Unordered
- Valid HTML
- Clean structure
- Good alt text
HTML Essentials
- Semantic structure:
<header>,<nav>,<main>,<section>,<footer> - Images with alt text using
<figure>+<figcaption> - Links: relative URLs between pages (no absolute file paths)
- Headings in order: one
<h1>per page, then<h2>,<h3>…
CSS Basics
- Selectors → properties → values (e.g.,
p { color: #222; }) - Box model:
border,padding,margin - Linking a stylesheet in
<head>with<link> - Keep it simple
CSS Selectors (Quick Reference)
| Selector | Matches | Example Rule |
|---|---|---|
p | All <p> elements | p { color:#222; } |
.note | Any element with class="note" | .note { background:#fffbe6; } |
#main-title | Element with id="main-title" | #main-title { font-size:28px; } |
nav a | <a> inside a <nav> | nav a { text-decoration:none; } |
Box Model Cheatsheet
Every element is a box: content → padding → border → margin.
| Property | What it Does | Example |
|---|---|---|
padding | Space inside the border | padding:12px; |
border | Line around the element | border:1px solid #ddd; |
margin | Space outside the border | margin:10px; |
width | Content width | width:300px; |
Tip: We used * { box-sizing:border-box; } so width includes padding + border.
Lists
Ordered
- Create folders
- Write HTML
- Add CSS
- Upload & test
Definition
- Semantic
- Tags that describe meaning (e.g.,
<nav>). - Caption
- Title for a table; also
<figcaption>for images.
HTML Boilerplate & Head Tags
| Tag | Purpose | Example |
|---|---|---|
<meta charset="utf-8"> | Text encoding | Prevents weird characters |
<meta name="viewport"> | Mobile sizing | width=device-width,initial-scale=1 |
<title> | Tab title | <title>My Page</title> |
<link> | CSS file | <link rel="stylesheet" href="css/style.css"> |
Tables (structure we used in class)
| Element | Use | Notes |
|---|---|---|
<figure> |
Wrap an image | Pair with <figcaption> |
<nav> |
Navigation links | Use meaningful link text |
<table> |
Tabular data | Use <caption>, <thead>, <tbody>, scope |
<img> |
Images | Always include alt |
Paths & Publishing
- Keep a tidy structure (e.g.,
css/,img/) - If your page is in a subfolder: go up with
../then down to the target - Test your public URL before submitting
Example A (same folder)
<img src="logo.png" alt="Logo">
Example B (in img/)
<img src="img/logo.png" alt="Logo">
Example C (HTML in subfolder)
<img src="../img/logo.png" alt="Logo">
Accessibility Checklist
- Descriptive alt text for images
- Headings in logical order
- Links make sense out of context (no “click here”)
- Good color contrast and readable text
Alt Text: Do & Don’t
| Image | Good Alt | Avoid |
|---|---|---|
| Logo | alt="Sheridan College logo" |
alt="image123.png" or missing alt |
| Decorative divider | alt="" (empty alt = decorative) |
Writing a long description for decoration |
| Screenshot of a page title | alt="Web Dev 1 Homepage" |
“picture” or “screenshot” |
Common Elements (Quick Lookup)
| Tag | Purpose | Notes |
|---|---|---|
<header> | Top of page/section | Often contains site title + nav |
<nav> | Navigation | Group of links |
<main> | Primary content | One per page |
<section> | Topical grouping | Use headings inside |
<figure> | Image + caption | Use with <figcaption> |
<table> | Tabular data | Use <caption>, <thead>, <tbody>, scope |
<footer> | Page/section footer | Copyright, links |
Common Errors & Quick Fixes
| Issue | Why | Fix |
|---|---|---|
| Images don’t load online | Wrong path / wrong case | Check folder, use relative path, match file name case |
| CSS not applying | Wrong link path | <link rel="stylesheet" href="css/style.css"> (or ../css/style.css) |
| Weird symbols | Missing charset | Add <meta charset="utf-8"> |
| Headings look odd | Skipped levels | Keep logical order: h1 → h2 → h3 |
Practice Quiz (Self-Check)
- Write the HTML to link a stylesheet at
css/style.css. - What’s the difference between padding and margin?
- Give a relative path from
html/index.htmltoimg/logo.png. - Make a table with a caption and 2 columns: “Tag” and “Use”.
- When is
alt=""appropriate?
Practice Before the Midterm
- Create a small 2-page site with a header, nav, and footer.
- Add one image with
<figure>+<figcaption>. - Make one unordered list and one ordered list.
- Build a table with a caption, thead, tbody, and scope on headers.
- Upload to your server and verify the public URL works.