Welcome to the World of HTML!
Welcome to Unit 2! In this chapter, we are going to explore HTML (HyperText Markup Language). If a website were a building, HTML would be the bricks and the wooden frame. It provides the structure and meaning to everything you see online. Don't worry if it looks like a lot of code at first—once you understand the patterns, it’s like learning a very simple new language!
7.1 Document Structure
Before we start adding pictures and text, we need to understand how an HTML document is built. Think of this as the "skeleton" of your web page.
Basic Building Blocks
Everything in HTML is made of elements, tags, and attributes.
• Tags: These are the labels surrounded by angle brackets, like <p>. Most come in pairs: an opening tag <p> and a closing tag </p>.
• Elements: This is the whole package—the opening tag, the content inside, and the closing tag.
• Attributes: These provide extra information about an element. They always go inside the opening tag, like this: <p lang="en">.
The "Head" vs. The "Body"
An HTML document is divided into two main parts:
1. The Head (<head>): This is like the "brain" of the page. It contains metadata (info about the page), the document title (what you see on the browser tab), and links to external files like CSS styles or JavaScript scripts. Users don't see this content on the actual page.
2. The Body (<body>): This is where all the visible content goes—text, images, and videos.
Writing Clean Code (Syntax Rules)
To make sure browsers understand your code perfectly, follow these "golden rules":
• Always use lowercase letters for element names and attributes.
• Indent your code. If an element is "inside" another, move it a few spaces to the right. It makes it much easier to read!
• Use double quotes for attribute values (e.g., class="header").
• In modern HTML5, you should remove the forward slash at the end of self-closing elements (use <br> instead of <br />).
Global Attributes
Some attributes can be used on almost any HTML element. These are called global attributes:
• id: A unique name for one specific element.
• class: A name used to group multiple elements together.
• style: Used to add quick CSS rules directly.
• hidden: Tells the browser not to show that element yet.
Key Takeaway: Structure is everything! A well-organized document uses the head for info and the body for content, following strict lowercase syntax.
7.2 Structural Markup
Now that we have a skeleton, let's look at the different types of content we can add.
Block-level vs. Inline
This is a common point of confusion, but here is a simple way to remember it:
• Block-level elements: These are "greedy." They always start on a new line and take up the full width available (like a paragraph <p> or a heading <h1>).
• Inline elements: These are "social." They only take up as much space as they need and sit next to other elements (like bold text or a span).
Organizing Text
We use specific tags to tell the browser what our text is:
• Headings: <h1> is the most important, <h6> is the least.
• Paragraphs: <p> for blocks of text.
• Emphasis and Importance: Use <em> for emphasis (italics) and <strong> for importance (bold).
Lists
There are three main ways to make lists:
1. Unordered Lists (<ul>): Bullet points.
2. Ordered Lists (<ol>): Numbered lists. You can use the start attribute to begin at a specific number!
3. Description Lists (<dl>): Used for terms and their definitions.
Hyperlinks (The "Web" in World Wide Web)
Links are created using the <a> tag with the href attribute.
• Internal links: Connect to other pages on your own site.
• External links: Connect to other websites.
• Specific parts: You can link to a specific id on a page (e.g., href="#contact") to jump straight there!
Key Takeaway: Use block elements for structure and inline elements for small details. Use <ol> for steps and <ul> for random items.
7.3 Page Components
Let's make our page more interactive and visual with images, tables, and forms.
Adding Images
Images use the <img> tag. It doesn't have a closing tag!
• alt tag: This is vital! It provides a text description if the image fails to load or for visually impaired students using screen readers.
• Proportions: Always try to retain the original proportions so your images don't look "squashed."
Tables
Tables are for data, not for layout!
• <tr> creates a row.
• <td> creates a standard data cell.
• <th> creates a heading cell (usually bold and centered).
• You can combine cells using colspan (across columns) or rowspan (down rows).
Forms: Collecting Information
Forms allow users to talk back to the website.
• Input Types: You can use type="text", type="password", or even type="checkbox".
• Drop-down lists: Created using the <select> and <option> tags.
• Validation: HTML can check if a user entered a real email address or if they left a "required" field empty before the form is sent to the server.
Audio and Video
Gone are the days of needing extra plugins!
• Use <audio> and <video> tags.
• Use the controls attribute so users can hit play/pause.
• Inside the tag, use the <source> element to provide multiple file formats. This ensures that if a browser doesn't like one format (like .ogg), it can try another (like .mp4).
Inline Frames (iframes)
An iframe is like a "window" on your page that looks into another website. You often see this with Google Maps or YouTube videos embedded on a blog.
Memory Aid: For tables, remember TR stands for "Table Row" and TD stands for "Table Data." Rows come first, then the data goes inside them!Key Takeaway: Components like forms and media make a website "alive." Always use alt tags for images and controls for media to keep your site accessible and easy to use.
Don't Forget!
Don't worry if you forget a specific tag name—even professional developers look them up sometimes! The most important thing is understanding how they fit together. Keep practicing your indention and lowercase syntax, and you'll be an HTML pro in no time!