📖 HTML Reviewer (Weeks 1–3)
1. Introduction to HTML
HTML = HyperText Markup Language
Standard markup for creating webpages
Consists of elements → tells browser how to display content
Structure of a page = described using tags like:
<h1> → heading
<p> → paragraph
<a> → link
---
2. HTML Editors
Can use: Notepad, Notepad++, VS Code, Sublime, Atom, etc.
Save file as .html or .htm with UTF-8 encoding
View by opening file in browser
---
3. HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
Content goes here
</body>
</html>
<!DOCTYPE html> → must appear once at the top (HTML5 declaration)
Visible content is always between <body> and </body>
---
4. HTML Elements
Basic format: <tagname> Content </tagname>
Nested elements → tags inside other tags
Empty elements → no content (e.g., <br>, <hr>)
Case-insensitive, but lowercase is recommended
---
5. Attributes
href → link destination (<a href="url">)
src → image source (<img src="image.jpg">)
alt → alternative text for images
width / height → set image size
---
6. Text & Formatting
Headings: <h1> (largest) to <h6> (smallest)
Paragraphs: <p>
Line break: <br>
Horizontal rule: <hr>
Preformatted text: <pre>
Formatting tags:
<b> (bold), <i> (italic), <u> (underline), <mark>, <small>, <del>, <ins>, <sub>, <sup>
---
7. Links
<a href="url"> Link text </a>
Target attribute:
_self (default) → same tab
_blank → new tab
_parent → parent frame
_top → full window
Absolute URL = full web address
Relative URL = within same site
Can link to:
Button link → requires JavaScript
---
8. Images
<img src="path" alt="text" width="300" height="200">
Image as a link → wrap <img> inside <a>
Float images with CSS float: left; or float: right;
Common formats: JPG, PNG, GIF, SVG, WebP
---
9. Tables
Basic structure:
<table>
<tr><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
Styling options:
Borders (border, border-style, border-radius, border-collapse)
Background color for rows (zebra stripes using :nth-child)
Spanning:
colspan = multiple columns
rowspan = multiple rows
Caption → <caption>Table Title</caption>
Hover effect → tr:hover
---
10. Lists
Unordered list (<ul>) → bullets
Ordered list (<ol>) → numbers
List item = <li>
---
11. Block & Inline Elements
Block-level → takes full width (<div>, <p>, <h1>)
Inline → only takes necessary width (<span>, <a>, <img>)
---
12. Other Elements
<div> → block container
<span> → inline container
<iframe> → embed a webpage inside another
<blockquote> → long quotation
<q> → short quotation
<abbr> → abbreviation (shows tooltip on hover)
<address> → contact info
<cite> → work title (italicized)
<bdo> → bi-directional text override
<!-- comment --> → HTML comments
---
13. CSS Basics (Inline Style)
Syntax: <tag style="property:value;">
Common properties:
color → text color
background-color
font-family
font-size
text-align
---
14. Developer Tools
View Source: Ctrl+U
Inspect Element: F12 / Ctrl+Shift+I / Right-click → Inspect
