HTML and CSS

Overview

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 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;

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)

<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 (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.

<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