Web Documents

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure content and tell browsers how to display information.

HTML Document Structure

Every HTML page follows a basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Key Elements Explained

<!DOCTYPE html> - Declares this is an HTML5 document
<html> - The root element containing all content
<head> - Contains metadata (title, styles, scripts)
<body> - Contains visible page content

Common HTML Elements

Text Elements

<h1> to <h6> - Headings (h1 is largest)
<p> - Paragraph
<strong> - Bold/important text
<em> - Italic/emphasized text
<br> - Line break

Lists

<ul> - Unordered (bulleted) list
<ol> - Ordered (numbered) list
<li> - List item (goes inside ul or ol)

Links and Images

<a href="url"> - Hyperlink
<img src="image.jpg" alt="description"> - Image

Semantic Elements

Semantic elements describe their meaning to both browsers and developers:

<header> - Page or section header
<nav> - Navigation links
<main> - Main content area
<section> - Thematic grouping of content
<article> - Self-contained content
<footer> - Page or section footer

What is CSS?

CSS (Cascading Style Sheets) controls the visual appearance of HTML elements. It handles colors, fonts, spacing, layout, and more.

CSS Syntax

selector {
    property: value;
    property: value;
}

Common CSS Properties

color - Text color
background-color - Background color
font-size - Text size
font-family - Font type
margin - Space outside an element
padding - Space inside an element
border - Border around an element
width / height - Element dimensions

CSS Selectors

element - Selects all elements of that type (e.g., p)
.class - Selects elements with that class (e.g., .highlight)
#id - Selects the element with that ID (e.g., #header)

Adding CSS to HTML

There are three ways to add CSS:

1. Internal CSS (in the head):

<style>
    h1 { color: blue; }
</style>

2. External CSS (separate file):

<link rel="stylesheet" href="styles.css">

3. Inline CSS (on the element):

<p style="color: red;">Red text</p>

The Box Model

Every HTML element is a box with four layers:

Content - The actual content (text, images)
Padding - Space between content and border
Border - Line around the padding
Margin - Space outside the border

Web Accessibility

Making websites accessible means everyone can use them, including people with disabilities:

Use descriptive alt text for images
Use semantic HTML elements correctly
Ensure sufficient color contrast
Make sure the site works with keyboard navigation
Use proper heading hierarchy (h1 → h2 → h3)

Key Terminology

HTML - HyperText Markup Language, structures web content
CSS - Cascading Style Sheets, styles web content
Tag - HTML code enclosed in angle brackets
Element - An HTML tag and its content
Selector - CSS code that targets HTML elements
Semantic - Elements that describe their meaning

Learning Objectives