🏬 Shopping Mall Project - Links, Navigation, and Image Insertion

🔗 Links and Navigation

Modify index.html

1. Make the Service button link to service.html located in the service/ folder.
2. Make the Shop button link to shop.html located in the shop/ folder.
3. Make the Cart button link to cart.html located in the cart/ folder.
4. Add an additional link in index.html to navigate to about.html in the root directory.

Modify about.html, cart.html, service.html, shop.html

5. Add a Back to Home Page (index.html) link at the bottom of each file. The <a> element should be inside a <p> tag (Be careful with folder structures and file paths).
6. Open index.html with Live Server and test all the links to ensure they work correctly.

Modify files inside shop/products/

7. Make product.html link to product-details.html, which is inside shop/products/product-details/.
8. Ensure product-details.html has a Back to Shop (shop.html) button with the correct file path.

Check Link Functionality

9. Open all files in Live Server and verify that:
   • All links work correctly.
   • No broken links (404 Not Found errors).
   • File paths follow the correct folder structure.

---

🖼️ Image Insertion

Add images to the project:

10. Add the Shopping Mall banner in index.html at the top of the page ().
11. Add an image to about.html
12. Insert a banner image in service.html to make it more professional (e.g., an image showcasing the store’s services).
13. Add product images in shop.html to display a preview of each product.
14. Ensure product-details.html includes product-specific images with the correct file paths.

Check Image Display

15. Open all files in Live Server and verify that:

• All images display correctly.
• The file paths for images are accurate.
• The image sizes are appropriate and not stretched or pixelated.

---

📌 Final Steps:

16. Compress the shopping_mall_hyperlink_project folder into a ZIP file and name it yourID_lab3.zip, then upload it to the required platform.

---

💡 Notes:

• Use relative paths for images, such as img/logo.png.
• Ensure images have appropriate sizes for responsiveness.
• Include alt text in <img> for SEO and accessibility support.

🔍 This exercise will help you practice proper HTML linking and image usage! Give it a try 😊