Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
MODULE 1: Introduction to the Web & HTML - SitesByYogi
SitesByYogi text logo
Contact
🧠 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

  1. Your browser sends a request to a web server (e.g., sitesbyyogi.com).
  2. The server returns files (HTML, CSS, JS, images).
  3. 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

LanguagePurposeExample
HTMLStructureHeadings, paragraphs, images
CSSStyleColors, fonts, layout
JavaScriptInteractivityPopups, 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!”

  1. Open VS Code.
  2. Create a new file named index.html.
  3. 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>
  1. Save the file.
  2. 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

  1. Create a webpage called about.html with:
    • A heading: “About Me”
    • A paragraph describing who you are
    • A list of 3 favorite hobbies
  2. 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.