HTML Web Development 🌐

Build Your Own Website

Session 7: HTML Fundamentals

What Is HTML? 🏗️

HTML (HyperText Markup Language) is the building blocks of websites. Every website you visit is made of HTML.

HTML Does:

Creates structure (headings, paragraphs, lists)
Displays images
Creates links to other pages
Makes buttons and forms
Organizes content into sections

Note: HTML only controls structure. CSS (next session) controls how it looks!

HTML Tags: The Building Blocks 🧩

Tags are HTML's instructions. They use angle brackets < > and usually have an opening tag and closing tag.

Basic Structure:

                    <html>
  <head>
    <title>My
                    Website</title>
  </head>
  <body>
    <h1>Hello
                    World!</h1>
  </body>
</html>

Key: Notice opening <tag> and closing </tag>

Essential Tags 🏷️

Headings:

<h1>Biggest
                    Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
(h1
                    = most important, h6 = least important)

Paragraphs & Text:

<p>This is a paragraph of text.</p>
<b>Bold
                    text</b>
<i>Italic text</i>

Lists in HTML 📋

Unordered List (Bullets):

<ul>
  <li>Item
                    1</li>
  <li>Item 2</li>
</ul>

Ordered List (Numbers):

                    <ol>
  <li>First</li>
  <li>Second</li>
</ol>
                

Images in HTML 🖼️

Display images from the web or your computer.

Image Tag:

Note: img tag doesn't have a closing tag!

src = where the image is located
alt = text shown if image doesn't load

Links in HTML 🔗

Link to other websites or pages.

Link Tag:

<a href="https://google.com">Visit Google</a>

a = anchor (link)
href = where the link goes
Text between tags is what user clicks

Divs and Sections 📦

Div (division) is a container that groups related content. Essential for organization!

Using Divs:

<div>
  <h2>About
                    Me</h2>
  <p>I'm a student...</p>
</div>

Divs let you organize content and style groups of elements

Project: Personal Webpage 👤

Create an HTML file with:

<h1> Your name
<p> A paragraph about you (3-4 sentences)
<h2> "My Interests"
<ul> A bulleted list of your interests
<img> A photo of yourself or something you like
<a> A link to your favorite website
<h2> "Hobbies"
<ol> A numbered list of hobbies

HTML Comments 💬

Comments are notes in code that don't display on the website. Great for explaining code!

Comment Syntax:

<!-- This is a comment -->
<h1>Hello</h1>
<!--
                    Computers ignore comments -->

Semantic HTML 🏗️

Semantic HTML uses tags that describe their meaning, not just appearance.

Better HTML Structure:

<header> Navigation </header>
<nav> Links
                    </nav>
<main> Page content </main>
<footer> Copyright info
                    </footer>

Why: Better for search engines, accessibility, organization

HTML vs. Viewing Source 🔍

You can see HTML of any website by pressing Ctrl+U (or right-click "View Page Source")!

Try It:

Visit any website (YouTube, Twitter, Wikipedia)
Right-click → "View Page Source"
You'll see the HTML structure
This is how you learn from others!

Cool fact: Complex websites have thousands of lines of HTML!

Common Mistakes ❌

Watch Out For:

Forgetting closing tags (</p>)
Typing >< instead of <>
Wrong tag names (using <headl> instead of <h1>)
Nesting tags wrong (<b><i>text</b></i> is wrong)
Spelling attribute names wrong (hrf instead of href)

What We Learned 🎓

HTML is the structure of websites
Tags are HTML's building blocks (h1, p, img, a, etc.)
Headings organize content (<h1> through <h6>)
Lists can be ordered or unordered
Images and links bring content to life
Divs organize related content
You can view source code of any website!

You Can Build Websites! 🎉

HTML is the foundation - next add CSS to make it beautiful

Next Session: CSS Styling & Web Design