HTML Tutorial

Bringing Your Code to Life

You've written your first HTML code, neatly structured with `<!DOCTYPE html>`, `<head>`, and `<body>`. But code in a text editor is just a blueprint—it's static text. The real magic happens when a **web browser** interprets that code and transforms it into a visual, interactive web page. This process is the most gratifying part of learning web development: seeing your creations come to life. This guide will walk you through the simple but essential process of saving your HTML files and opening them in a browser. We'll also cover critical concepts like **file paths** and **caching**, which are common stumbling blocks for beginners.

The Simple Workflow: Create, Save, View

Turning your code into a viewable page involves three straightforward steps.

Step-by-Step Process

  • Step 1: Create Your HTML File - First, you need to write your code. While you can use simple editors like Notepad or TextEdit, using a dedicated **code editor** is highly recommended for features like syntax highlighting and auto-completion. 1. Open your code editor (e.g., **VS Code**, Sublime Text, Atom). 2. Create a new file. 3. Type or paste your HTML code. **Example Code:** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Page</title> </head> <body> <h1>Hello, World!</h1> <p>I just created my first web page.</p> <img src="images/welcome.jpg" alt="A welcome sign"> </body> </html> ```
  • Step 2: Save the File With the `.html` Extension - This is the most critical step. The browser identifies a file as HTML by its extension. 1. Click **File > Save As** in your editor. 2. Navigate to the folder where you want to save your project (e.g., `my-website`). 3. In the "File name" field, give your file a name followed by **`.html`**. The most common first page is: * **`index.html`** (The default page a web server looks for) You can also use names like `about.html` or `contact.html`. 4. In the "Save as type" dropdown, select **"All Files"** or **"HTML Documents"** to ensure it doesn't save as a `.txt` file. **⚠️ Important:** If you are on Windows, and you have "Hide extensions for known file types" enabled in your folder settings, your file might be saved as `index.html.txt` without you realizing it. Always double-check the full name. **Correct File Name:** `index.html` **Incorrect File Name:** `index` or `index.txt` or `index.html.txt`
  • Step 3: Open the HTML File in a Web Browser - Now for the fun part—viewing your page. 1. Open your **File Explorer** (Windows) or **Finder** (Mac). 2. Navigate to the folder where you saved your `index.html` file. 3. Double-click the `index.html` file. It will automatically open in your system's default web browser (e.g., Chrome, Firefox, Edge, Safari). **Alternative Method: Using the Browser's Open Command** * You can also open your browser first. * Press `Ctrl+O` (Windows/Linux) or `Cmd+O` (Mac). * Navigate to your `index.html` file and select "Open". **You should now see your web page rendered!** The title "My First Page" will be in the browser tab, and you'll see "Hello, World!" as a large heading followed by the paragraph text.

Understanding File Paths: Why Your Image Might Be Broken

The example code above includes an image: `<img src="images/welcome.jpg" alt="A welcome sign">`. The `src` (source) attribute uses a **relative file path**. For this to work, your project folder structure *must* match the path in the code. The browser looks for the image relative to the location of the `index.html` file. **Correct Folder Structure:** ``` my-website/ ├── index.html └── images/ └── welcome.jpg ``` * The `index.html` file is in the `my-website` folder. * The `welcome.jpg` file is inside an `images` folder, which is also inside the `my-website` folder. * The path `images/welcome.jpg` means "look inside the `images` folder for the `welcome.jpg` file." If you see a broken image icon, it means the browser can't find the file at that path. This is the most common error beginners make. **Troubleshooting Broken Images/Links:** 1. **Check the file name spelling:** Is it `welcome.jpg` or `welcome.jpeg`? Spelling and capitalization must be exact! 2. **Check the folder name spelling:** Is the folder named `image` or `images`? 3. **Check the file location:** Is the `welcome.jpg` file actually inside the `images` folder?

text
1<!-- Correct folder structure -->
2my-website/
3├── index.html
4└── images/
5    └── welcome.jpg

The Edit-Refresh Cycle: Seeing Your Changes

Web development is an iterative process. You will make constant changes to your code and need to see the results. 1. **Edit:** After viewing your page, go back to your code editor and make a change (e.g., change the text in the `<p>` tag). 2. **Save:** Save the file (`Ctrl+S`). 3. **Refresh:** Return to your browser and **refresh the page** (click the reload button or press `F5`/`Ctrl+R`). Your changes should now be visible.

The Caching Problem (And How to Solve It)

  • Browser Caching - Sometimes, especially with CSS and JavaScript, you might refresh and not see your changes. This is often due to **browser caching**. To save bandwidth and load pages faster, browsers store copies of files. Sometimes they load the old cached version instead of the new one you just saved.
  • Solutions - * **Hard Refresh:** Force the browser to bypass the cache. Use `Ctrl+F5` (Windows) or `Cmd+Shift+R` (Mac). * **Disable Cache (Developer Tools):** For more persistent development, open your browser's **Developer Tools** (right-click on the page and select "Inspect", or press `F12`). Go to the **Network** tab and check the box that says **"Disable cache"**. This will ensure you always see the latest version when the tools are open.

Beyond Your Local Machine: The Next Steps

Viewing a file directly from your hard drive (using a `file://` URL) is great for development. However, to share your website with the world, you need to put it on a **web server**. * **Web Hosting:** Companies called web hosts provide space on their servers. You upload your `index.html` and other files to them. * **Live Website:** Once uploaded, anyone in the world can access your site by typing your domain name (e.g., `www.yourwebsite.com`) into their browser. For now, practicing on your local machine is the perfect way to learn.

Conclusion: You Are Now a Web Developer

You have successfully closed the loop. You can now write code, save it, and view the rendered result in a browser. This **create-save-view-refresh** cycle is the fundamental workflow you will use every single day as a web developer. Mastering this process, along with understanding file paths, is a huge milestone. You are no longer just reading about code—you are actively creating and testing it. The next module will dive into the specific tags you can use inside your `<body>` to add meaning and structure to your content: **HTML Text Formatting**.

Frequently Asked Questions

Why does my page look different in Chrome vs. Firefox?

Different browsers have slightly different default styles (e.g., default fonts, margin sizes). This is why using CSS (which we'll cover later) to explicitly define your styles is so important for creating a consistent cross-browser experience.

I double-click my file, but it opens in a text editor, not a browser. What's wrong?

This means your operating system doesn't have a default program set to open `.html` files. Right-click the file, select "Open with," and choose your preferred browser (e.g., Chrome). You can usually check a box like "Always use this app to open .html files" to set it as the default.

Can I view my HTML page on my phone?

Yes, but it's more complex since the file is on your computer. The easiest ways are:
1. **Use a local server:** Tools like Live Server in VS Code can create a simple server and often provide a URL that devices on the same Wi-Fi network can access.
2. **Upload it:** Use a free hosting service (like GitHub Pages, Netlify, or Vercel) to upload your files and get a real public URL you can open on any device.

What is "View Page Source" and "Inspect"?

If you right-click on any web page, you'll see these options.
* **View Page Source:** Shows the raw HTML file as it was delivered from the server.
* **Inspect (or Developer Tools):** Opens a powerful suite of tools that shows you the **live** HTML DOM tree (which can change with JavaScript), as well as the applied CSS and JavaScript. This is an invaluable tool for learning and debugging.