HTML and CSS
Terms defined: attribute, Cascading Style Sheets (CSS), CSS class, CSS variable, element, escape sequence, external style sheet, HyperText Markup Language (HTML), root element, tag
- 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
| 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
<!-- 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 |
<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>© 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