Day 4: Page Structure With Divs

Boilerplate Code
File Paths
Div & Span
Semantic Containers

Step 1 - The Fundamental Truth

A website is not just one file. It is a collection of files: HTML, CSS, JavaScript, images, fonts, and videos. These files are organized into folders (directories). A file path tells the browser exactly where to find a resource.

Step 2 - The Core Problem

If index.html needs to show logo.png, how does the browser find it? It needs an exact address (path). Paths can be:

Relative → Best for your own files (inside project).
Absolute → Full URLs, used for external resources.

Example: Project Folder Layout

        my-website/
        ├── index.html
        ├── about.html
        ├── images/
        │   ├── logo.png
        │   └── hero.jpg
        └── pages/
            ├── contact.html
            └── terms.html

A) Relative File Paths

Relative paths describe a file's location starting from the file you are editing.

Scenario 1 - Same Folder

You are in index.html and want to link to about.html:
```
<a href="about.html">About Us</a>
```
Scenario 2 - Sub-folder (Go Down)

You are in index.html and want to display logo.png inside images/:
```
<img src="images/logo.png" alt="My Website Logo">
```
Scenario 3 - Parent Folder (Go Up)

You are in pages/contact.html and want images/logo.png. From pages/ go up one level, then down into images/.
```
<img src="../images/logo.png" alt="My Website Logo">
```
Tip: .. = one level up. Use ../../ for two levels up.

Optional: Root-relative Path

<img src="/images/logo.png" alt="Logo from root">

Works only on servers, not on local files.

B) Absolute File Paths (external resources)

Use full URLs for resources hosted on other websites or CDNs:

    <a href="https://www.google.com">Google</a>
    <img src="https://upload.wikimedia.org/.../Html5_logo_and_wordmark.svg" alt="HTML5 Logo">

Why Not Use Local System Paths?

Wrong examples:

    Windows: C:\Users\Arjun\Desktop\my-website\images\logo.png
    macOS/Linux: /Users/johndoe/Desktop/my-website/images/logo.png

These paths only exist on your computer. They will break when uploaded or opened elsewhere.

Security Sandbox

Browsers block access to your personal files for safety. Example of a dangerous attempt:

<img src="C:\Users\Arjun\Documents\Passwords.txt">

Browsers block this → otherwise websites could steal your private data.

Absolute Paths in Different OS

Feature	Windows	macOS / Linux
Starting Root	`C:\` (Drive letter)	`/` (Single root)
Separator	`\` (backslash)	`/` (forward slash)
Example Path	`C:\Users\John\Docs\file.txt`	`/Users/john/Docs/file.txt`

Debugging Tips

Check spelling & case sensitivity (Logo.png ≠ logo.png).
Use forward slashes in web paths, never backslashes.
Check Developer Tools → Network tab for 404 errors.
Make sure the file is uploaded to the server.

Linking CSS & JS

        <!-- CSS in same folder -->
        <link rel="stylesheet" href="styles.css">
        <!-- JS inside a js/ folder -->
        <script src="js/app.js"></script>

Examples for Copy-Paste

        <a href="about.html">About</a>
        <img src="images/logo.png" alt="Logo">
        <img src="../images/logo.png" alt="Logo">
        <img src="https://example.com/photo.jpg" alt="External">
        <a href="https://example.com" target="_blank">Visit Site</a>

HTML Boilerplate Code

Every HTML file should start with a boilerplate. It sets encoding, title, viewport, etc.

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        </head>
        </body>
        </html>

Explanation:

<!DOCTYPE html> → tells browser to use HTML5.
<meta charset="UTF-8"> → encoding for all characters.
<meta name="viewport"> → responsive for mobiles.
<title> → shown in browser tab.

Multipage Website

A website is often made of multiple HTML files. Example: Home, About, Contact.

        <nav>
        <a href="index.html">Home</a> |
        <a href="about.html">About</a> |
        <a href="contact.html">Contact</a>
        </nav>

<div> (Generic Box)

Use: To group multiple elements as one block.

        <div>
        <img src="avatar.png">
        <h2>Priyanka</h2>
        <p>Loves HTML</p>
        </div>

class & id

id = unique (like Aadhaar).
class = reusable (like job title).

    <div id="main-header">Header</div>
    <div class="profile-card">Card</div>
    <div class="profile-card">Card</div>

<span> (Inline Highlighter)

Use: To highlight words inside text.

    <p>This is very <span>important</span> text.</p>

Semantic Containers

<header> → top section (logo, nav).
<footer> → bottom (copyright, links).
<main> → main content (once per page).