Quartz 4

What are Webpages

4 min read

Metadata

  • Date :: 13-04-2025
  • Tags :: web-dev

Notes

🌐 Creating Multi-Page Websites Using File Paths

Learn how to connect multiple HTML pages and use images as clickable links using correct file path strategies.

📁 1. Website Folder Structure

🔸 Single Page Project (Before):

Project/
├── index.html
├── assets/
│   └── images/
│       └── cat.png

  • index.html is the homepage.

  • Assets (like images, CSS, JS) are stored in separate folders like /assets/images/.

🔸 Multi-Page Project (Now):

Project/
├── index.html                ← Homepage
├── public/
│   ├── about.html            ← About Me page
│   └── contact.html          ← Contact Me page
├── assets/
│   └── images/
│       └── cat.png

  • Now we include additional HTML files inside the public/ folder.

  • index.html is still the homepage, but we link to other pages using anchor (<a>) tags.

🔗 2. Linking Web Pages with Anchor Tags

🔹 Basic Syntax:

<a href="path/to/page.html">Link Text</a>

🧠 Example from the Lesson:

If you’re inside index.html and want to link to about.html (which is in /public/):

<a href="./public/about.html">About Me</a>

  • ./ points to the current directory (where index.html lives).

  • Then we go into the public/ folder → and to about.html.

✅ When clicked, the browser navigates to that HTML file and displays its contents.

🖼️ 3. Linking Images (as Content)

🔹 Displaying an Image:

<img src="path/to/image.jpg" alt="Description" />

🧠 Example:

To show an image from this structure:

index.html
assets/
└── images/
    └── cat.png

You would write:

<img src="./assets/images/cat.png" alt="A cute cat" />

  • ./ → current directory (where index.html is).

  • /assets/images/cat.png → path to the image.

To create an image that functions like a button (links to another page):

✅ Correct Way:

<a href="./public/about.html">
  <img src="./assets/images/cat.png" alt="About Me Image" />
</a>

  • The <a> tag wraps around the <img> tag.

  • When the image is clicked, the user is redirected to the about.html page.

  • This is how we created a clickable image that links to the About page in the challenge.

📌 5. File Path Quiz Recap

You were asked:
From index.html, what is the correct path to display cat.png inside assets/images/?

❌ Incorrect Options:

  1. ../assets/images/cat.png

    • ❌ Goes up one level (outside the Project folder) — unnecessary here.

  2. Using href instead of src inside <img> tag:

    • ❌ <img> uses src, not href.

  3. Using <a> tag to display an image:

    • ❌ <a> creates links, not image displays.

✅ Correct Option:

<img src="./assets/images/cat.png" alt="Cat Image" />

Why it’s correct:

  • ./ means look in the current folder.

  • From index.html, go into assets/images/ → find cat.png.

💻 6. Challenge Breakdown

You were asked to perform two tasks:

🔶 Task 1: Add a Link to the “Contact Me” Page

From index.html (in Project/) to contact.html (in public/):

<a href="./public/contact.html">Contact Me</a>

✅ When clicked, it should open the contact page.

🔷 Task 2: Create a Clickable Image That Links to the “About Me” Page

Steps:

  1. Wrap image in anchor tag:

  2. Correctly reference the image and page using relative paths.

<a href="./public/about.html">
  <img src="./assets/images/cat.png" alt="About Me Image" />
</a>

🔁 Clicking the image redirects the user to about.html.

🔁 7. Revision: Understanding File Paths Again

PathMeaningExample
./Current directory./about.html
../Move one level up../assets/logo.png
folder/filenameInside sub-folderimages/photo.jpg

✅ Good Practices:

  • Always use relative paths in web projects.

  • Use ./ for current directory files.

  • Use ../ only when needed to go up one level.

  • Wrap your images in anchor tags if you want them to act as links.

  • Use VS Code auto-suggestions to avoid typos and find the correct paths quickly.

🔍 8. Debugging File Path Issues

If an image or link doesn’t work, check:

  • 🔤 Spelling errors in file or folder names.

  • 🔄 Wrong use of ../ or ./.

  • 📁 File may not exist or is in the wrong folder.

  • ❌ Used href instead of src for images.

  • ❌ Forgot to wrap the image with <a> for clickable links.

🎯 What You Can Do Now

You should now be able to:

  • ✅ Structure a multi-page website properly.

  • ✅ Link multiple HTML pages using anchor tags.

  • ✅ Display images from nested folders using file paths.

  • ✅ Make images clickable and link them to other pages.

  • ✅ Debug broken paths by understanding folder structure.

🧪 Suggested Exercises for Practice

  1. 🔗 Create a 3-page portfolio (Home, About, Projects).

  2. 🖼️ Add a personal image that links to a “Resume” page.

  3. 📁 Reorganize your folders and see if your relative paths still work.

  4. ❓ Break the file path intentionally and fix it to build muscle memory.

Let me know if you’d like:

  • ✅ A starter multi-page template.

  • ✅ A cheat sheet of file path rules.

  • ✅ A visual guide of folder navigation.

References

Graph View

Backlinks