Lecture 4: File Path in HTML | HTML BoilerPlate Code | DIV + Class + ID |

šŸŽ„ Full Video Lecture

1. Understanding File Paths

šŸ“– Notes:

If yourĀ index.htmlĀ file needs to display an image namedĀ logo.png, how does the HTML file tell the browser where toĀ **find**Ā logo.png?
You can't just sayĀ src="logo.png"Ā and expect it to work every time. What if the logo is in anĀ imagesĀ folder? What if it's on a completely different website?
The browser needs an exact, unambiguous address to locate the file.Ā **A file path is that address.**

File Paths

šŸŽ„ Watch:

2. Types of File Paths

šŸ“– Notes:

The two main types of file paths are Absolute Paths and Relative Paths.
File Paths types

šŸŽ„ Watch:

3. Relative Path

šŸ“– Notes:

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).
Relative Path

šŸŽ„ Watch:

4. Absolute Path

šŸ“– Notes:

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

Absolute Path

šŸŽ„ Watch:

5. Boilerplate Code

šŸ“– Notes:

The solution is to create a standard, universal starting templateā€”aĀ **boilerplate**. This is a block of code that you will start every single HTML file with. It's not something you need to reinvent each time; you just copy-paste it and fill in the blanks.
It's the "blueprint of the house" that you need before you can start putting in the walls (h1) and windows (img).
Boilerplate Code

šŸŽ„ Watch:

6. div tag

šŸ“– Notes:

The most basic solution is to invent a generic,Ā **meaningless**Ā container. Its only job is to be a box that you can put other things into. It shouldn't have any inherent meaning or style; it's just a grouping mechanism.
This is theĀ **div**Ā (short for "division").
By wrapping our elements in aĀ div, we create a single "box" that we can now control.
div tag

šŸŽ„ Watch:

7. class & id

šŸ“– Notes:

The logical solution is to invent two types of labels (which we callĀ **attributes**) that you can add to any HTML tag.
1. **A Unique Identifier:**Ā We need a label for one, and only one, specific element on the entire page. It must be unique. This is perfect for major, one-of-a-kind layout sections like the main navigation bar or a search form. This is theĀ **id**.
2. **A Reusable Classifier:**Ā We also need a label that we can apply toĀ *multiple*Ā elements to group them into a category. This is for things that have a similar style or function, like all the profile cards, all the error messages, or all the "buy now" buttons. This is theĀ **class**.
class & id

šŸŽ„ Watch:

8. Header, Main & Footer

šŸ“– Notes:

- **header**: This is the box for the introductory content at the top of your page or a section. It typically contains your logo, site navigation (nav), and main heading.
- **footer**: The box for the closing content at the bottom. It usually contains copyright info, contact details, and secondary links.
- **main**: This is the most important one. It defines theĀ **main, unique content**Ā of that specific page. It should not contain things that are repeated on every page (like the header or footer). There should only beĀ **one**Ā mainĀ tag per page.
Header, Main & Footer

šŸŽ„ Watch: