Your First HTML Page

Time to write code! Let's create a page from scratch.

What is HTML?

HTML = HyperText Markup Language

It's not a programming language, it's a markup language. It defines the structure of the page:

What is title
What is paragraph
Where is the image
What is a link

Basic Structure

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>My Page</title></head><body>    <h1>Hello World!</h1></body></html>

Let's understand each part:

Tag	Function
`<!DOCTYPE html>`	Says it's HTML5
`<html>`	Wraps everything
`<head>`	Metadata (not visible)
`<body>`	Visible content
`<title>`	Title in browser tab

Tags Work in Pairs

Most tags have opening and closing:

html

<p>This is a paragraph</p>   ↑ opening          ↑ closing (with /)

Some tags are "self-closing":

html

<br>      <!-- line break --><img>     <!-- image --><input>   <!-- form field -->

Essential Tags

Headings

html

<h1>Main Title</h1><h2>Section</h2><h3>Subsection</h3><h4>Topic</h4><h5>Subtopic</h5><h6>Detail</h6>

Only use one h1 per page!

Paragraphs and Text

html

<p>This is a paragraph.</p><p>This is another paragraph.</p> <strong>Bold text</strong><em>Italic text</em>

Links

html

<a href="https://google.com">Click here</a> <!-- Open in new tab --><a href="https://google.com" target="_blank">Google</a>

Images

html

<img src="photo.jpg" alt="Photo description"> <!-- From internet --><img src="https://site.com/image.png" alt="Description">

alt is important for accessibility!

Lists

html

<!-- Unordered (bullets) --><ul>    <li>Item 1</li>    <li>Item 2</li></ul> <!-- Ordered (numbers) --><ol>    <li>First</li>    <li>Second</li></ol>

Practice: Personal Page

Create a about.html file:

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>About Me</title></head><body>    <h1>Your Name</h1>    <p>Hello! I'm learning to program.</p>     <h2>About Me</h2>    <p>Write something about yourself here.</p>     <h2>My Goals</h2>    <ul>        <li>Learn HTML</li>        <li>Learn CSS</li>        <li>Learn JavaScript</li>        <li>Get a tech job</li>    </ul>     <h2>Contact</h2>    <p>Email: <a href="mailto:your@email.com">your@email.com</a></p></body></html>

Open with Live Server and see the result!

Summary

HTML defines the page structure
Tags generally have opening <tag> and closing </tag>
head = metadata, body = visible content
Always use alt on images

In the next lesson, we'll learn to better structure HTML with semantic elements! 🚀