Hamdan Khalifa Alsalmi — WebDev1 Study Guide (Assignment 2)

HTML Basics

Idea: HTML = content only. CSS = style only.

HTML code in VS Code showing basic tags — HTML code example in VS Code (light mode).

Semantic vs Non-semantic

Semantic tags: <header>, <nav>, <main>, <section>, <article>, <footer>
Non-semantic: <div> (block), <span> (inline)
Why semantic? Accessibility, SEO, and code readability.

CSS & Selectors

CSS selectors: type, class, id, descendant in VS Code — Selectors: type, class, id, descendant.

Links & Paths

Link: <a href="about.html">About</a>
Relative: about.html • folder/about.html • ../index.html
Absolute: https://example.com/folder/about.html

Accessibility (A11y)

Use semantic structure and labels.
Images need alt text.
Good contrast and readable sizes.
Keyboard friendly navigation.

Good vs weak text contrast in code — Good contrast vs weak contrast.

DOM & Rendering

Browser gets HTML with HTTP.
Parse → build DOM tree.
Load CSS/JS → apply to DOM.
Render to screen.

DOM flow notes in VS Code-like image — DOM flow: HTML → DOM → apply CSS/JS → render.

Lists • Tables • Figures

HTML table markup example — Table markup (thead, tbody, tfoot, scope).

Exam Checklist (tick each one)

Block vs inline
Semantic vs non-semantic
Selectors: type, class, id, descendant
Relative vs absolute paths
Tables: thead/tbody/tfoot/th/td
Accessibility basics (alt, labels, contrast)
DOM steps

Checklist HTML code in VS Code-like image — Checklist HTML sample.

Back to top ↑