🧠 Module 1

Introduction to the Web & HTML

Objective: Understand how websites work, what HTML is, and create your first “Hello StreetGeek!” webpage.

🌐 1. What is HTML?

HTML stands for HyperText Markup Language — it’s the skeleton of every webpage.

HyperText

Links between pages.

Markup Language

Uses tags to define content.

Purpose

Tell browsers what to display (headings, paragraphs, images, links, etc.).

Example

<h1>Hello, StreetGeek!</h1>
<p>Welcome to my very first webpage.</p>

Browsers (Chrome, Edge, Firefox) read this and render it for users.

⚙️ 2. How Websites Work

Your browser sends a request to a web server (e.g., sitesbyyogi.com).
The server returns files (HTML, CSS, JS, images).
Your browser renders the HTML to display the page.

💡 Think of it like a restaurant:

Browser: Customer
Server: Kitchen
HTML/CSS/JS: Ingredients for your meal

🧩 3. HTML, CSS, and JavaScript: The Big Three

Language	Purpose	Example
HTML	Structure	Headings, paragraphs, images
CSS	Style	Colors, fonts, layout
JavaScript	Interactivity	Popups, animations, dynamic updates

These three languages work together to form every modern website.

💻 4. Your Web Development Environment

🔧 Option 1: Basic Setup

Install VS Code (free code editor).
Create a folder named html-basics.
Create a file called index.html.

🔧 Option 2: Web Playground

You can also use CodePen or JSFiddle to test HTML instantly in your browser.

🧱 5. The Basic Structure of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello StreetGeek!</h1>
  <p>This is my very first HTML page.</p>
</body>
</html>

Breakdown

<!DOCTYPE html> → HTML5
<html> → wraps the page
<head> → page info (title, metadata)
<body> → visible content

Pro Tip

Use a simple, readable structure first. Add styles and scripts later.

🧪 6. Hands-On Practice: Create Your First Webpage

✅ Exercise 1: “Hello StreetGeek!”

Open VS Code.
Create a new file named index.html.
Paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello StreetGeek</title>
</head>
<body>
  <h1>Hello, StreetGeek!</h1>
  <p>My name is [Your Name]. This is my first webpage.</p>
</body>
</html>

Save the file.
Open it in your browser by double-clicking it.

🎉 You’ve just built your first web page!

🧭 7. Understanding Tags and Elements

Every tag comes in pairs — an opening and closing tag:

<p>This is a paragraph.</p>

Parts

<p> = opening tag
</p> = closing tag
Together they form an element.

Common Tags

<h1>–<h6> Headings
<p> Paragraph
<a> Link
<img> Image
<ul>, <ol>, <li> Lists
<div> Block container
<span> Inline container

🧠 8. Comments and Readability

Use comments to explain your code — they won’t show on the page:

<!-- This is a comment -->

Good indentation and spacing help future you (and teammates) understand your intent.

💡 9. Try It Yourself Challenge

Create a webpage called about.html with:

A heading: “About Me”
A paragraph describing who you are
A list of 3 favorite hobbies

Then link it from your homepage using: <a href="about.html">About Me</a>

🧩 10. Quiz Time

What does HTML stand for?
What tag defines the main visible content of a webpage?
What’s the purpose of the <head> tag?
What is the difference between HTML and CSS?
What tag do you use to create a hyperlink?

🏁 Module 1 Summary

What HTML is and how it works
The structure of a webpage
How browsers and servers communicate
How to build your first HTML file
Basic tags and document setup

Next up: 👉 MODULE 2: HTML Structure & Elements — semantic structure, headings, divs, and multi-section pages.