Lecture 6

File Path

In HTML, file paths are used to tell the browser where a file (like an image, CSS, JS, video, etc.) is located.
There are two main types of paths:

Absolute Path

Full URL of the file.
Always points to the same location, no matter where the HTML file is.
Example
https://example.com/images/logo.png

Relative Path

Based on the location of your HTML file in the project.
Easier for local projects because files move together.
Types of relative paths:
- Same folder → file.jpg
- Inside folder → images/file.jpg
- One folder back → ../file.jpg
- Two folders back → ../../file.jpg

1. Absolute Path Example 2. Relative Path Examples

1. Absolute Path Example	2. Relative Path Examples
`<!DOCTYPE html> <html> <head> <title>Absolute Path Example</title> </head> <body> <!-- Loads from an external website --> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools Logo"> </body> </html>`	`<!DOCTYPE html> <html> <head> <title>Relative Path Example</title> <!-- Linking CSS in same folder --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Image inside "images" folder --> <img src="images/logo.png" alt="Logo"> <!-- JavaScript in same folder --> <script src="script.js"></script> </body> </html>`

<!DOCTYPE html>
<html>
<head>
  <title>Absolute Path Example</title>
</head>
<body>
  <!-- Loads from an external website -->
  <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools Logo">
</body>
</html>

            
<!DOCTYPE html>
<html>
<head>
  <title>Relative Path Example</title>
  <!-- Linking CSS in same folder -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Image inside "images" folder -->
  <img src="images/logo.png" alt="Logo">

  <!-- JavaScript in same folder -->
  <script src="script.js"></script>
</body>
</html>

Division:

<div> is a block-level container used to group HTML elements.
It does not add any style by itself, but helps in structuring the webpage.
Useful for applying CSS styles and JavaScript functions to a group of elements.

Example

<div>
  <h2>Title</h2>
  <p>Some text here</p>
</div>

ID Attribute

id gives a unique identifier to an element.
Each id must be unique in a page (cannot be reused).
Mostly used for styling specific elements or JavaScript targeting.
Syntax: id="name"
Example
```
<div id="header">This is header</div>
```

class Attribute

class groups multiple elements together.
Unlike id, the same class can be used on many elements.
Useful for applying common styles to multiple elements.
Syntax: class="name"

Example:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

HTML BoilerPlate Code | DIV + Class + ID (Lecture 6)

File Path

Division:

ID Attribute

class Attribute

See the video lecture