Getting Started with HTML

Welcome to the first step of your web development journey! HTML (HyperText Markup Language) is the foundational building block of every webpage on the internet. In this guide, you will learn how the web works, set up your code editor, and build your very first web page from scratch.

How the Web Works

When you visit a website in your browser (like Chrome, Firefox, or Safari), a multi-step request and response process happens behind the scenes:

URL Entry: You type a URL (e.g., https://codeharborhub.github.io) into your browser address bar.
DNS Lookup: Your browser queries a Domain Name System (DNS) server to translate the domain name into an IP address (e.g., 192.0.2.1).
HTTP Request: The browser sends an HTTP/HTTPS request to the web server hosting that IP address.
Server Response: The server processes the request and sends back files—primarily HTML, CSS, and JavaScript.
Rendering: Your browser parses the HTML code, fetches linked assets, and renders the visual page on your screen.

+---------+  1. HTTP Request (Get index.html)  +------------+
| Browser | ---------------------------------> | Web Server |
| Client  | <--------------------------------- |            |
+---------+  2. Response (HTML, CSS, JS)       +------------+

The Core Web Triad

Modern web development relies on three core technologies working together:

Technology	Role	Analogy (Building a House)
HTML	Structure & Content	The framing, walls, and rooms
CSS	Styling & Presentation	Paint, interior decoration, and aesthetics
JavaScript	Behavior & Interactivity	Electricity, plumbing, and automatic doors

Setting Up Your Development Environment

To write HTML code efficiently, you need a modern code editor. We recommend Visual Studio Code (VS Code).

Step 1: Install VS Code

Download VS Code from the official website: code.visualstudio.com.
Run the installer for your operating system (Windows, macOS, or Linux) and follow the installation prompts.

Step 2: Essential Extensions

Enhance your workflow by installing these recommended extensions from the VS Code Marketplace:

Live Server (by Ritwick Dey): Launches a local development server with a live reload feature for static pages.
Prettier - Code Formatter: Automatically formats your HTML code to maintain clean, consistent syntax.
Auto Rename Tag: Automatically renames paired HTML tags when you modify either the opening or closing tag.

Creating Your First HTML Page

Follow these simple steps to create and view your first HTML file locally:

Create a new folder on your computer named my-first-website.
Open VS Code, go to File > Open Folder, and select my-first-website.
Create a new file named index.html.
Copy and paste the following HTML code into index.html:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my first web page built with HTML5.</p>
</body>
</html>

Anatomy of an HTML Document

Let's break down each element of the starter template:

1. `<!DOCTYPE html>`

The document type declaration. It informs the web browser that this document is written in modern HTML5. It must always be at the very top of the file.

2. `<html lang="en">`

The root element that wraps all content on the page. The lang="en" attribute specifies that the primary language of the document is English, aiding search engines and assistive technologies like screen readers.

3. `<head>`

Contains document metadata (data about data) that is not directly displayed on the main webpage canvas.

<meta charset="UTF-8">: Sets character encoding to UTF-8, supporting almost all human languages and special symbols.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures responsive viewport behavior for mobile devices and tablets.
<title>: Defines the title shown in the browser tab and search engine result listings.

4. `<body>`

Contains all the visible content displayed to users, such as text, images, buttons, links, tables, and videos.

Running Your HTML Page

Quick Hands-On Exercise

Try editing your index.html file to customize the content:

Change the <title> text to [Your Name]'s Portfolio.
Update the <h1> heading to display a customized welcome message.
Add a second paragraph <p> describing your goals for learning web development.
Save the file and observe the updates in your browser.

Summary Checklist

Before moving to the next section, make sure you understand:

What HTML stands for and its role in web development.
The function of the core document tags (<!DOCTYPE html>, <html>, <head>, <body>).
How to create and run an .html file locally in a web browser.

├── 01-getting-started/
│   ├── index.mdx
        │   ├── what-is-html.mdx
        │   ├── html-history.mdx
        │   ├── html-vs-html5.mdx
        │   ├── how-the-web-works.mdx
        │   ├── html-document-structure.mdx
        │   ├── create-your-first-html-page.mdx
        │   └── browser-developer-tools.mdx

How the Web Works​

The Core Web Triad​

Setting Up Your Development Environment​

Step 1: Install VS Code​

Step 2: Essential Extensions​

Creating Your First HTML Page​

Anatomy of an HTML Document​

1. <!DOCTYPE html>​

2. <html lang="en">​

3. <head>​

4. <body>​

Running Your HTML Page​

Quick Hands-On Exercise​

Summary Checklist​