HTML Fundamentals Tutorial

Lecture 3: File Paths, Boilerplate & Structure

File Path System

The Fundamental Truth

A website is not one single file. It's a collection of different files (HTML, CSS, JavaScript, images, videos, fonts) that all need to work together.

Image: Website Folder Structure

Relative File Paths

Relative paths give directions to a file starting from the location of the file you are currently in.

Example Folder Structure:


my-website/

├── index.html

├── about.html

│

├── images/

│   ├── logo.png

│   └── hero.jpg

│

└── pages/

    ├── contact.html

    └── terms.html

Image: Relative Path Visualization

Same Folder:

<a href="about.html">About Us</a>

Sub-folder (Going Down):

<img src="images/logo.png" alt="My Website Logo">

Parent Folder (Going Up):

<img src="../images/logo.png" alt="My Website Logo">

Key Point:

Use ../ to go up one level in the folder hierarchy. Each ../ moves up one folder.

Absolute File Paths

Absolute paths give the full URL to a resource on the web. Use these for external resources.

<a href="https://www.google.com">Search on Google</a>

Warning:

Never use absolute paths for your own files (like C:/Users/YourName/website/image.png). These will break when you upload your site to a server!

HTML Boilerplate

Why We Need Boilerplate Code

Browsers need specific instructions to properly render your webpage. The boilerplate provides this essential "setup information".

Image: Browser Rendering Process

The Standard HTML5 Boilerplate


<!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>

    <!-- Your content goes here -->

</body>

</html>

Image: HTML Boilerplate Breakdown

Breaking Down the Boilerplate

  • <!DOCTYPE html>: Tells the browser to use the latest HTML5 standard
  • <html lang="en">: Root element with language specification
  • <meta charset="UTF-8">: Ensures proper character encoding
  • <meta name="viewport">: Makes site mobile-friendly
  • <title>: Sets the browser tab title
  • <body>: Contains all visible content

Pro Tip:

Always include the viewport meta tag to ensure your website looks good on mobile devices!

Page Structure with Semantic HTML

Why Semantic HTML Matters

Semantic HTML tags like <header>, <nav>, <main>, and <footer> provide meaning to your content and improve accessibility.

Image: Semantic HTML Structure Diagram

Basic Page Structure


<header>

    <h1>Website Title</h1>

    <nav>...</nav>

</header>



<main>

    <section>

        <h2>Section Title</h2>

        <article>...</article>

    </section>

</main>



<footer>

    <p>Copyright Info</p>

</footer>

Remember:

There should be only one <main> element per page, as it represents the primary content.

Div, Span, Class & ID

The <div> Element

A generic container for grouping content. It's a block-level element.


<div>

    <h2>Group Title</h2>

    <p>Some content</p>

</div>

Image: Div Element Visualization

The <span> Element

A generic inline container for phrasing content.

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

Image: Span Element Example

Class vs. ID Attributes

  • Class: For grouping multiple elements (reusable)
  • ID: For identifying a single unique element

<div class="product-card">Product 1</div>

<div class="product-card" id="featured-product">Product 2</div>

<div class="product-card">Product 3</div>

Remember:

IDs must be unique within a page, while classes can be reused multiple times.

Multi-page Websites

Creating a Cohesive Website

A multi-page website needs consistent navigation across all pages.

Image: Multi-page Website Structure

Example Navigation Structure


<nav>

    <ul>

        <li><a href="index.html">Home</a></li>

        <li><a href="about.html">About</a></li>

        <li><a href="contact.html">Contact</a></li>

    </ul>

</nav>

Linking Between Pages

Use relative paths to link between pages in your website:


<!-- From index.html to about.html in same folder -->

<a href="about.html">About Us</a>



<!-- From about.html to contact.html in a subfolder -->

<a href="pages/contact.html">Contact</a>



<!-- From contact.html back to index.html -->

<a href="../index.html">Home</a>