HTML and CSS
- 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
- Opening tag
- 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;
- Written
| 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
htmlelement enclosing everything else - A single
headelement with metadata - A single
bodyelement with content
- Indentation doesn't matter to the browser (but make source more readable to people)
- Use
<!--and-->to start and end comments (which cannot be nested)
| 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
hrefattribute ofaelement 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
- Another page with a full URL such as
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, you should specify UTF-8 encoding in your HTML:
html <meta charset="utf-8"> -
This tag should be placed in the
<head>section of your HTML document. -
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.
- Example:
html <p>© 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.htmluses an external style sheetstyled_page.css- Which can be shared by many pages
- Can define CSS variables or style things directly