Practice Problems

Create a new HTML file for each problem, focusing on multi-page linking.

Problem 1: Simple 3-Page Site

File Name: index.html, about.html, contact.html
In each file, include a <header> or <nav> with links to the other two pages.
Use relative paths (e.g., href="about.html").
Write a short message on each page so you can confirm navigation works.

Problem 2: Organized Folders

File Name: index.html, plus subfolders for images/, css/
Reference a local image from the images/ folder in your index.html using a relative path (e.g., src="images/logo.png").
Optional: Link an external or local CSS file from a css/ folder.
Check that the image and CSS are loading correctly with your relative paths.

Problem 3: Mixing Absolute & Relative Links

File Name: resources.html
In the <body>, create a list of links:
- At least one internal link (relative path) to another HTML page in the same folder.
- One external link (absolute URL) to a favorite website.
Write a paragraph explaining when you’d use absolute vs. relative paths.

Advanced Problems

Problem 4: Business Website with Multiple Sections

Overview:

Design a multi-page website for a fictitious business that includes pages for Home, Services, Testimonials, and Contact. This exercise will require you to use consistent navigation, relative links, and references to assets stored in organized folders.

Instructions:

Folder Structure:
- Create a main project folder (e.g., business-website/).
- Inside, create separate HTML files: index.html (Home), services.html, testimonials.html, and contact.html.
- Create subfolders for assets: an images/ folder for your pictures (e.g., company logo, service icons) and a css/ folder for any CSS files.
Navigation:
- In each HTML file, add a <header> or <nav> section that includes links to all the pages using relative paths (e.g., <a href="services.html">Services</a>).
- Include an external link (absolute URL) in the navigation—for example, a link to a partner website or industry resource (e.g., <a href="https://www.example.com" target="_blank">Partner Site</a>).
Content and Assets:
- On the Home page (index.html), include an image (using a relative path like images/logo.png) and a welcome message.
- On the Services page, list your services and include at least one image to illustrate your offerings.
- On the Testimonials page, include a few quotes with proper attribution.
- On the Contact page, include a simple contact form (or just your contact details) and a map image if desired.
- Optionally, link an external CSS file from the css/ folder to style your pages.

Objective:

Practice building a multi-page site with consistent navigation across pages, utilizing both relative and absolute links, and organizing assets in a structured folder hierarchy.

Problem 5: Portfolio Website with External Links

Overview:

Develop a personal portfolio website that includes separate pages for Home, Projects, and Resume. This project will emphasize linking between pages using relative paths, referencing assets from subfolders, and including external links.

Instructions:

Folder Structure:
- Create a main folder (e.g., portfolio-website/).
- Place your HTML files at the root: index.html (Home), projects.html, and resume.html.
- Create an images/ folder for portfolio images and a css/ folder for your stylesheet.
Navigation:
- On each page, include a consistent navigation bar in a <header> or <nav> that links to all pages using relative paths.
- In the navigation or within content, include at least one external link (using an absolute URL) that directs visitors to your professional profile (for example, your LinkedIn or GitHub).
Content:
- Home Page (index.html):
  - Include an introduction and a headshot (using an image from your images/ folder).
- Projects Page (projects.html):
  - List several projects, each with a brief description and a link to a live demo or GitHub repository. Use relative paths for internal navigation and absolute URLs for external project links.
- Resume Page (resume.html):
  - Provide a summary of your experience and skills. Optionally, include a downloadable resume link (e.g., <a href="resume.pdf" download>Download Resume</a>).

Objective:

Create a well-organized portfolio site that demonstrates proper multi-page linking, asset referencing from organized folders, and the smart use of absolute links to connect to external professional profiles.

Problem 6: Blog with Subfolder Articles and Breadcrumb Navigation

Overview:

Build a blog site that organizes articles in a subfolder and provides breadcrumb navigation to help users understand their location within the site hierarchy.

Instructions:

Folder Structure:
- Create a main folder (e.g., blog-site/).
- Create a main HTML file for the blog overview page (e.g., blog.html).
- Create a subfolder named articles/ that contains individual blog article files (e.g., article1.html, article2.html).
Navigation and Breadcrumbs:
- On the blog overview page (blog.html), include a navigation bar with links to Home, Blog, and Contact (if desired) using relative paths.
- On each article page inside the articles/ subfolder, include breadcrumb navigation at the top of the page (e.g., Home > Blog > Article Title).
  - The breadcrumb should use relative links to navigate back to the blog overview page or Home page.
Content and External Links:
- Blog Overview (blog.html):
  - Provide a list or summary of recent articles with links (using relative paths) to each article in the articles/ folder.
- Article Pages:
  - Each article should contain a <header> with the title and publication date, followed by the article content.
  - In the article content, include at least one external link (absolute URL) to a related resource or reference.
- Ensure that all links (internal and external) are correctly set up and that your folder structure remains organized.

Objective:

Develop a blog website that practices multi-level navigation with breadcrumb links, proper organization of pages into subfolders, and a mix of relative and absolute links to manage both internal and external navigation effectively.

Structuring Multi-Page Websites