Introduction to HTML and CSS

Welcome! In this chapter, we are diving into the visual and structural side of the web. If you think of a web application as a house, HTML (HyperText Markup Language) is the "skeleton" and "bricks" that provide structure, while CSS (Cascading Style Sheets) is the "paint" and "interior design" that makes everything look professional and organized.

For your H2 Computing syllabus, you don't need to be a graphic designer. You just need to understand how to use these tools to build functional interfaces that can accept user input and display data effectively. Let's get started!

1. HTML: The Structure of the Web

HTML uses tags to mark up content. Most tags come in pairs: an opening tag <tag> and a closing tag </tag>.

Basic Document Structure

Every HTML document must follow a specific hierarchy. According to the syllabus, your document must begin with the doctype declaration (which tells the browser you are using modern HTML).

<!DOCTYPE html>
<html>: The root element that wraps everything.
<head>: Contains "behind-the-scenes" info like the <title> and <link> to CSS files.
<body>: Contains everything visible to the user.

Text and Layout Elements

To organize text on your page, use these essential tags:

  • <h1>, <h2>, <h3>: Headings of different sizes. <h1> is the most important (largest).
  • <p>: Defines a paragraph.
  • <hr>: Creates a horizontal rule (a line) to separate sections.
  • <b> and <i>: Used to make text bold or italic.
  • <div>: A "block-level" container used to group large sections of content together.
  • <span>: An "inline" container used to style a small specific part of a text.

Links and Images

Websites wouldn't be "web-like" without connections!

The Anchor Tag <a>: Used for hyperlinks. It uses the href attribute to point to the destination URL.
Example: <a href="https://www.moe.edu.sg">Visit MOE</a>

The Image Tag <img>: Used to display pictures. Note that it is a "self-closing" tag (it doesn't need a </img>).
Attributes: src (the file path) and alt (alternative text for accessibility).
Example: <img src="logo.png" alt="School Logo">

Tables

Tables are great for displaying data from your SQL databases. They follow a strict nesting order:

  1. <table>: The outer wrapper.
  2. <tr>: A Table Row.
  3. <th>: A Table Header (usually bold and centered).
  4. <td>: Table Data (a standard cell).

Quick Review: Remember that id and class are common attributes you can add to almost any tag. Use id for a unique element and class for a group of elements you want to style the same way.

2. HTML Forms: Taking User Input

Forms are critical because they allow your Python/Flask server to receive data from users (like usernames or file uploads).

The <form> element: Uses action (where to send the data) and method (usually "POST" for security and large data). If you are uploading images, you must include enctype="multipart/form-data".

Inside the form:

  • <input>: The most versatile tag. Its behavior changes based on the type attribute (e.g., type="text", type="password", type="file", type="submit").
  • <textarea>: Used for multi-line text input.
  • name attribute: This is vital! Your Python code uses the name to identify which input is which.

3. Character References

Sometimes, you can't just type a character because HTML might mistake it for a tag. Use these special codes instead:

  • &amp; for the ampersand (&)
  • &lt; for the less-than sign (<)
  • &gt; for the greater-than sign (>)
  • &quot; for double quotes (")

4. CSS: Adding Style and Layout

CSS changes how HTML elements look. You connect a CSS file to your HTML using <link rel="stylesheet" href="style.css"> inside the <head>.

The CSS Box Model

Don't worry if this seems tricky at first! Every HTML element is basically a rectangular box. From the inside out, the layers are:

  1. Content: The actual text or image. Controlled by height and width.
  2. Padding: Clear space inside the border, around the content.
  3. Border: The line surrounding the padding and content.
  4. Margin: Clear space outside the border, separating the element from its neighbors.

Mnemonic: Please Bring More (Padding, Border, Margin).

Typography and Visuals

You can change how text looks using these properties:

  • color: Changes text color.
  • background: Changes the background color or image.
  • font-family: Sets the typeface (e.g., Arial).
  • font-size: Sets how big the text is.
  • font-weight: Sets thickness (e.g., bold).
  • text-align: Aligns text (left, right, center).
  • text-decoration: Often used to remove underlines from links (none).
  • display: Controls how the box behaves (e.g., block, inline, or none to hide it).

5. Connecting HTML to Flask (Jinja2)

Since this chapter is part of "Web Applications," you will often use HTML templates with Python. Two specific "filters" you need to know for your templates are:

  • length: Used to count items (e.g., {{ users|length }} shows the number of users).
  • safe: Tells the browser that the HTML inside a variable is "safe" to render and shouldn't be treated as plain text.

Key Takeaways for the Exam

1. Nesting: Always close your tags in the reverse order you opened them (e.g., <b><i>Text</i></b>).
2. Attributes: Remember that src is for images and href is for links. Confusing these is a common mistake!
3. Forms: For file/image uploads, always remember the enctype attribute in the form tag.
4. CSS Selectors: Use a dot for classes (.myClass) and a hash for IDs (#myID) in your CSS file.