Home Lecture 2 Lecture 3 Lecture 5 Lecture 6

File Path & Biolerplate

HTML File Paths Examples

  1. Absolute Path (URL)

    <img src="https://example.com/images/photo.jpg" alt="Photo">

  2. Relative Path

    1. Same folder

      <img src="photo.jpg" alt="Photo">

    2. Subfolder

      <img src="images/photo.jpg" alt="Photo">

    3. Parent folder

      <img src="../photo.jpg" alt="Photo">

    4. Multiple levels

      <img src="../../assets/images/photo.jpg" alt="Photo">

  3. Root-relative Path

    <img src="/images/photo.jpg" alt="Photo">

Note on Absolute and Relative Paths

  1. Absolute Path

     
- An absolute path contains the full URL or the complete system path to a file.
- Example:
    <img src="C://Users/images/photo.jpg" alt="Photo">

- Absolute path does NOT work when:
    1. You try to use a local system absolute path on a web server.
       Example: C:/Users/Paras/Pictures/photo.jpg
       → This only works on your computer, not on the internet.
    2. The server URL or file location changes, which breaks the path.
    3. If you are in VS Code and try to access an image using an absolute path
       that is outside the folder you opened, the image will NOT load.

  2. Relative Path

     
- A relative path specifies the location of a file relative to the current HTML file.
- Examples:
    Same folder:  <img src="photo.jpg" alt="Photo">
    Subfolder:    <img src="images/photo.jpg" alt="Photo">
    Parent folder: <img src="../photo.jpg" alt="Photo">

- Relative path does NOT work when:
    1. The file is not in the expected relative location.
    2. The folder structure changes, breaking the path.
    3. If you open the HTML directly in VS Code or browser and try to access
       an image outside the project folder, it will NOT load due to security restrictions.

Boilerplate

  1. Understanding Boilerplate Code

     
- Boilerplate code is the basic template required to start any HTML document.
- It includes DOCTYPE declaration, html, head, and body tags.
- Example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

  2. UTF-8

     
- UTF-8 (Unicode Transformation Format - 8 bit) is a character encoding capable of encoding all possible characters.
- Example: <meta charset="UTF-8"> is used in HTML head.

  3. ASCII Values

     
- ASCII (American Standard Code for Information Interchange) represents characters as numbers.
- Example:
    Character 'A' = 65
    Character 'a' = 97
    Character '0' = 48

  4. Why Use UTF-8

     
- UTF-8 supports all languages, symbols, and emojis.
- It is backward compatible with ASCII.
- It ensures that your HTML content displays correctly across all browsers.

  5. div Tag

     
- The <div> tag is a block-level container used to group content.
- Example:
<div>
    <p>This is a paragraph inside a div.</p>
</div>

  6. class & id

     
- class: Assigns a style or behavior to multiple elements.
- id: Unique identifier for a single element.
- Example:
<div class="container">Multiple elements can use this class.</div>
<div id="unique">This ID is unique.</div>

  7. Header, Main & Footer

     
- These are semantic HTML5 tags to structure content.

- <header>: Contains navigation or introductory content.
- <main>: Main content of the page.
- <footer>: Footer info, copyright, links.

Example:
<header>
    <h1>Website Title</h1>
</header>

<main>
    <p>This is the main content area.</p>
</main>

<footer>
    <p>© 2025 My Website</p>
</footer>