🌐 Introduction to HTML
Welcome! In this segment, we will write our very first lines of code. No prior programming experience is needed—just a computer and a text editor.
✏️ 1. Choosing an HTML Editor
An HTML Editor is simply a program that lets you write and save text. You have several options:
📝 Notepad (Windows)
Pros: It's already installed on your computer.
Cons: No color-coding, no auto-complete, and you must manually save as "All Files" to avoid .txt.
🍏 TextEdit (Mac)
Pros: Pre-installed on macOS.
Cons: By default, it uses "Rich Text" (adds hidden formatting). You must switch to Format > Make Plain Text before coding.
⭐ Visual Studio Code (VS Code) – Our Choice!
Why VS Code? It's free, works on Windows/Mac/Linux, and gives you:
- 🌈 Syntax Highlighting (tags appear in different colors).
- 📥 Live Server extension (auto-refreshes your page when you save).
- 🧠 Auto-complete (speeds up your typing).
🚀 Download it now: code.visualstudio.com
🏷️ 2. How to Write Code Using Tags
HTML uses tags to tell the browser what to display. Tags are like labels: <tagname> content </tagname>.
- Opening tag:
<h1> - Closing tag:
</h1>(notice the forward slash/) - Self-closing tags: Some tags don't wrap content, like
<br>(line break) or<hr>(horizontal line).
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<br> <!-- This is a self-closing tag -->
📝 Practical Example: Write this in VS Code
Open VS Code, create a new file, and type the following exact structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World! 👋</h1>
<p>This is my first webpage built with VS Code.</p>
</body>
</html>💾 3. How to Save an HTML File
Saving is where most beginners make a mistake. Follow these exact steps to ensure it works:
📂 In VS Code
- Press Ctrl + S (Windows) or Cmd + S (Mac).
- Name your file:
index.html(The.htmlextension is mandatory). - Choose a folder (e.g.,
MyFirstWebsite) and click Save.
✅ VS Code automatically recognizes it as HTML and color-codes your code!
⚠️ In Notepad (The "Gotcha")
- Go to File > Save As.
- Type:
index.html. - CRITICAL: Change the "Save as type" dropdown from "Text Documents (*.txt)" to "All Files (*.*)".
- If you forget this, it saves as
index.html.txtand won't open as a website!
👀 4. Viewing the HTML Page (3 Easy Ways)
Once saved, you need to open it in a web browser (Chrome, Edge, Firefox).
-
🏠 Method 1: Double-Click (The Manual Way)
Navigate to your folder on your computer (e.g., Desktop). Double-click theindex.htmlfile. It will automatically open in your default web browser. -
⚡ Method 2: Right-Click (Quick Preview)
Right-click theindex.htmlfile and select "Open with" > Choose your favorite browser (e.g., Google Chrome). -
🚀 Method 3: VS Code "Live Server" (The Developer's Favorite)
- In VS Code, go to the Extensions tab (left sidebar), search for "Live Server" by Ritwick Dey, and install it.
- Right-click anywhere inside your HTML file and select "Open with Live Server".
- Your browser will open automatically. Best part: Whenever you save your code (Ctrl+S), the browser auto-refreshes so you see changes instantly!
🎯 Your 5-Minute Challenge
- Open VS Code and create a new file.
- Type your name inside an
<h1>tag and a short bio inside a<p>tag. - Save it as
about_me.html. - Open it using Live Server and watch it come to life in your browser!
✅ Recap: We learned about editors (Notepad vs VS Code), wrote tags, saved with the correct .html extension, and viewed it in a browser. You are officially a web developer now!