				⇓

The hidden part of html

The Problem of Locating Your Own Files

So far, we have only used images by linking to them from other websites (e.g., using a full https://... URL). But this raises a fundamental question:

The "Why": What if the image I want to use isn't on the web, but is located on my own computer, inside my project folder? How do I tell the browser where to find a local file?
The Solution: We need a way to describe the location of a file, which is known as a File Path. There are two distinct ways to do this.

Relative vs. Absolute Paths

Imagine you are in Dwarka, Delhi, and need to give someone directions to Chandni Chowk. You have two ways to do it:

Relative Path: You give directions from your current location. "From here, go to CP, then from CP, go to Vikas Puri, and from there you'll reach Chandni Chowk." This path is relative to where you are right now.
Absolute Path: You give directions from a universal starting point. "Go to Planet Earth, find the country India, then the city New Delhi, and inside it, find Chandni Chowk." This path is absolute because it starts from the ultimate root.

This same logic applies to files in our project:

Relative Path: This is the most common method. It describes the path to a file from the location of the current file.
- Going Down into a Folder: Use the folder name followed by a forward slash (/).
  - Example: To get cow.jpg from inside the beta folder, the path is beta/cow.jpg.
- Going Up out of a Folder: Use two dots and a slash (../). This moves you to the parent directory.
  - Example: To get cat.png which is one level above the current file, the path is ../cat.png.
- Staying in the Current Directory (Best Practice): Use a single dot and a slash (./). While simply writing the filename (dog.jpg) works, explicitly writing ./dog.jpg is a clearer, recommended practice that signifies the file is in the same directory.
Absolute Path: This describes the path from the absolute root of a file system.
- On the Web: A full URL like https://some-website.com/image.jpg is an absolute path.
- On Your Computer: This is the full path from the root drive, like C:/Users/YourName/image.jpg on Windows or /Users/YourName/image.jpg on macOS/Linux.

The Security Risk of Local Absolute Paths

The "Why": If a browser allowed a webpage to use an absolute path to your local files (e.g., <img src="C:/Users/YourName/private-photo.jpg">), what could go wrong?
The Danger: A malicious website could send you an HTML file that tries to access your private, sensitive files. If the browser allowed this, the code could read your personal data and potentially send it back to a hacker's server without your permission.
The Solution: For security, browsers block any attempt by a webpage to access your local file system using absolute paths. Similarly, you cannot use relative paths (../) to navigate outside of your project's root folder. The browser creates a "sandbox" to protect your computer.

The Problem of a Standard Web Page Structure

We've seen that writing <h1>Hello</h1> in a file works. So why do we need all the extra "boilerplate" code that professional developers use?

The "Why": If we don't provide a standard structure, the browser has to guess what we mean. It might assume we're using an older version of HTML, which can cause unexpected bugs, especially when CSS and JavaScript are added. It also harms our site's ranking in search engines (SEO).
The Solution: The HTML Boilerplate. This is a standard template that explicitly tells the browser exactly how to interpret our document, leaving no room for guesswork.

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

<!DOCTYPE html>: This is the very first line and it declares that the document is an HTML5 document.
<html lang="en">: This is the root element that wraps everything. The lang="en" attribute specifies that the page's primary language is English, which is important for accessibility and SEO.
<head>: This section contains meta-information about the page. The content here is not displayed in the main browser window.
- <meta charset="UTF-8">: This is crucial. Computers only understand numbers (specifically, binary). This tag specifies the character encoding standard (UTF-8) that maps every character, symbol, and emoji from every language in the world to a unique number, allowing the browser to store and display it correctly.
- <meta name="viewport"...>: This tag is essential for responsive design. It tells the browser to set the page width to the screen width of the device it's being viewed on (like a phone or tablet), ensuring the content scales correctly.
- <title>: This sets the text that appears in the browser tab, helping users identify the page.
<body>: This section contains all the visible content of your webpage, like headings, paragraphs, images, and links.

The Problem of Grouping and Selecting Elements

As pages get more complex, we run into new problems: How do we apply one style to a whole group of elements? And how do we target one very specific element and nothing else?

The "Why": Applying styles one-by-one to every single element is repetitive and inefficient. We need a way to group elements together logically.
The Solutions: selectors

1. <div> (The Container)
- The Problem: How do you group multiple elements (like several headings and paragraphs in a login form) into a single block so you can move or style them all at once?
- The Solution: The <div> tag. It's an invisible container used purely for grouping other elements. By applying a style (like text-align: center) to the <div>, you apply it to everything inside, saving you from styling each element individually.
2. The class Attribute (The Grouping Label)
- The Problem: What if you want to apply the same style to multiple elements that are not next to each other and can't be wrapped in a single <div>?
- The Solution: The class attribute. You can assign the same class name to multiple, separate elements. This creates a "group" that can be targeted with CSS. Class names are reusable and can be applied to many elements.
3. The id Attribute (The Unique Identifier)
- The Problem: How do you target one single, specific element on a page, and nothing else?
- The Solution: The id attribute. An ID must be completely unique on the entire page. No two elements can have the same ID. It is used to pinpoint a single element, often for manipulation with JavaScript.

◀ ▶

⇓

The hidden part of html

The Problem of Locating Your Own Files

Relative vs. Absolute Paths

The Security Risk of Local Absolute Paths

The Problem of a Standard Web Page Structure

The Problem of Grouping and Selecting Elements

1. `<div>` (The Container)

2. The `class` Attribute (The Grouping Label)

3. The `id` Attribute (The Unique Identifier)

⇓

The hidden part of html

The Problem of Locating Your Own Files

Relative vs. Absolute Paths

The Security Risk of Local Absolute Paths

The Problem of a Standard Web Page Structure

The Problem of Grouping and Selecting Elements

1. <div> (The Container)

2. The class Attribute (The Grouping Label)

3. The id Attribute (The Unique Identifier)

1. `<div>` (The Container)

2. The `class` Attribute (The Grouping Label)

3. The `id` Attribute (The Unique Identifier)