Day-03 File Path System in HTML

File Path System

The first thing you have to understand that in real life is that, a website in not one single file.

It's a collection of different files (HTML, CSS, JavaScript, images, videos, fonts) that all need to work together. These files are organized into folders, just like documents on your computer.

There are two ways by which you can refer to any content in a html page:

A. Relative Path

A relative file path gives directions to a file starting from the location of the file you are currently in. You will use this 99% of the time for linking your own files together (images, CSS, other HTML pages).

folder structure
  • Case:1 Linking to file in the same folder
    • Problem: You are in index.html and want to link to about.html.
    • The Logic: They are neighbors, living in the same my-website/folder. The directions are as simple as possible.
    • The Syntax: You just use the filename.

      • Relative Path Example

  • Scenario 2: Linking to a file in a SUB-FOLDER (Going Down).
    • The Problem: You are in index.html and want to display logo.png.
    • The Logic: From index.html, you need to go into the images folder to find the logo.
    • The Syntax: You write the folder name, a forward slash/, and then the filename.

      • Relative Path Example

  • Scenario 3: Linking to a file in a PARENT FOLDER (Going Up).
    • The Problem: You are in contact.html(which is inside pages/) and you want to display logo.png(which is inside images/).
    • The Logic: You can't go directly from pages/ to images/. You must first go up one level out of the pages folder to get back to the main my-website/folder. From there, you can go down into the images folder.
    • The Syntax: Two dots and a slash (../) means "go up one level."

      • Relative Path Example
    • ../takes you from pages/ up to my-website/.
    • images/logo.png then takes you down into the images folder to find the file.

B. Absolute Paths

An absolute file path gives the full, complete URL to a resource on the web. It starts with http:// or https://.

You ONLY use absolute paths when you are linking to a resource that is NOT on your own website.

  • Linking to another website.
  • Using a font from Google Fonts.
  • Using an image from an image-hosting service.

    • absolute path example

The main reason why you shouldn't prefer absolute path :

  1. They only work on your computer – a path like C:/Users/... doesn’t exist on the web server, so files won’t load online.
  2. Lack of portability – if you move your project to another folder, computer, or server, absolute paths will break.
  3. Sandbox restrictions – browsers don’t allow web code to directly access your computer’s file system for security reasons.

Boilerplate Code

HTML Boilerplate Code
  • <!DOCTYPE html> → Tells the browser this is an HTML5 document.
  • <html lang="en"> → Starts the HTML document and sets the language to English.
  • <head> → Contains page information (not visible directly on the page).
  • <meta charset="UTF-8"> → Supports all characters, symbols, and emojis.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the page responsive for all devices.
  • <meta http-equiv="X-UA-Compatible" content="ie=edge"> → Ensures Internet Explorer uses the latest rendering engine.
  • <title>HTML 5 Boilerplate</title> → Sets the title of the webpage (shown on the browser tab).
  • <link rel="stylesheet" href="style.css"> → Links an external CSS file for styling.
  • </head> → Ends the head section.
  • <body> → Main visible content of the webpage goes here.
  • </body> → Ends the body section.
  • </html> → Ends the HTML document.

Div,id,class and Span

Div

A div in html is like an empty box.

  • You can put anything inside it (text, images, buttons, etc.).
  • It doesn’t have any special meaning by itself — it just groups things together.
  • Think of it like a container that helps you organize your webpage.
  • It occupies whole available width.

Span

A span tag in HTML is like a small box inside a line of text.

  • Unlike div, it does not occupy whole width it occupies only that amount which is needed.
  • You use it to highlight or style part of a sentence.
  • Think of it as a marker you put around words.

Id and Class

They are like name tags that you give to your boxes.(div,span or any html tag)

  • id:a unique name (used for one element only).Think of it like a roll number in school (only one student can have it).
  • class:a group name (can be used for many elements).Think of it like a team name (many students can belong to the same team).
Example of how to use id and class