- File Path System
- Relative Path → Used for your own project files.
- Same folder → about.html
- Sub-folder → images/logo.png
- Parent folder → ../images/logo.png
- Absolute Path → Used for external resources (Google Fonts, images from Wikipedia, etc.).
- Golden Rule: Never use C:/Users/... type paths in HTML. Works only on your computer, not on the web.
- Relative Path → Used for your own project files.
- Boilerplate Code
- <!DOCTYPE html> → Tells browser "this is HTML5" (enables standards mode).
- <html lang="en"> → Defines document language (important for SEO & accessibility).
- <head> → Meta information for browser (charset, viewport, title).
- <meta charset="UTF-8"> → Prevents text encoding issues.
- <meta name="viewport"> → Makes page mobile-friendly.
- <title> → Name of the page in browser tab & search results.
- <body> → Where visible content lives.
- Multi-Page Websites
- Real websites = multiple HTML files (Home, About, Contact).
- Navigation system = anchor <a> links across all pages.
- Use a consistent header/footer across pages.
Example navigation inside index.html:
<nav> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="pages/contact.html">Contact</a> </nav> - <div>, id, and class
- <div> = a generic container (groups elements together).
- id = unique identifier (used only once).
- class = reusable label (used multiple times).
Example:
<div id="main-header">Welcome!</div> <div class="profile-card">Profile 1</div> <div class="profile-card">Profile 2</div> In CSS: #main-header { background: black; color: white; } .profile-card { border: 1px solid gray; padding: 10px; }