HTML and CSS

Overview

Introduction

HyperText Markup Language (HTML) is the standard way to represent documents on the web
Cascading Style Sheets (CSS) is the standard way to style them
Both are more complicated than they should have been but we need to understand a bit of both

HTML

HTML document contains elements and text
Elements are shown using tags
- Opening tag <tagname> shows where the element begins
- Closing tag </tagname> shows where it ends
Elements must form a tree, i.e., must be strictly nested
- <X>…<Y>…</Y></X> is legal
- <X>…<Y>…</X></Y> is not
And every document should have a single root element that encloses everything else
Since < and > are used to show where tags start and end, must use escape sequences to represent them
- Written &name;

Table 1: Table 1: HTML Escape Characters
Name	Escape Sequence	Character
less than	`<`	<
greater than	`>`	>
ampersand	`&`	&
copyright	`©`	©
plus/minus	`±`	±
micro	`µ`	µ

Well-formed HTML page has:
- <!DOCTYPE html> as the first line
- An html element enclosing everything else
- A single head element with metadata
- A single body element with content
Indentation doesn't matter to the browser (but make source more readable to people)
Use  to start and end comments (which cannot be nested)

Table 2: Table 2: HTML Tags
HTML Tag	Used For
`div`	section in a document
`h1`	level-1 heading
`h2`	level-2 heading, etc.
`p`	paragraph
`span`	inline text
`a`	hyperlink
`img`	reference to image
`ul`	unordered list
`ol`	ordered (numbered) list
`li`	list element
`table`	table
`tr`	table row
`th`	table heading
`td`	table data cell

Customize elements with name="value" attributes

<h1 align="center">A Centered Heading</h1>

Use href attribute of a element to link to:
- Another page with a full URL such as https://example.com/page.html
- A page relative to the current one such as ./examples/page.html
- Another element in this page by ID such as #main-title

UTF-8 Encoding

UTF-8 encoding (simplified):
- Think of UTF-8 as a universal language for computers to understand and display text
- It can handle almost any character from any language in the world, including emojis
- When you use UTF-8, you don't have to worry about your text looking weird on different devices or websites
Specifying UTF-8 in HTML:
- To ensure proper rendering of special characters, place this in the head of the HTML document

<meta charset="utf-8">

HTML Entities vs. Direct Unicode Characters:
- HTML entities like © are useful for ensuring compatibility across different encodings and older systems
- With UTF-8 encoding (and the proper meta tag), you can directly use Unicode characters like © in your HTML

<p>&copy; 2024</p>
<!-- is equivalent to -->
<p>© 2024</p>

Both will render the same in a browser, but the direct Unicode character is more readable in the source code.

CSS

<h1 align="center" color="red">…</h1> is frowned on these days
- Hard to keep styling consistent
Give elements classes and defines styles for classes
styled_page.html uses an external style sheet styled_page.css
- Which can be shared by many pages
Can define CSS variables or style things directly

:root {
    --extra-space: 5px;
    --page-width: 40em;
}

body {
    font-family: sans-serif;
    max-width: var(--page-width);
    border: 1px solid gray;
    margin: var(--extra-space);
    padding: var(--extra-space);
}

h1.title {
    text-align: center;
}

span.keyword {
    font-weight: bold;
}

Simple rule like the one for body has the name of the tag and some properties in curly braces
More complex rule has tag.class and properties
- Can also use tag#identifier to select a specific element with an id property
- Or .class or #identifier
The :root pseudo-element lets us define global variables
- Names must begin with two dashes --
- Refer to their values using var(name)