Creating a Multi-page Website with Various HTML Elements

Step 1: Understanding the Problem

Before we start writing code, let's make sure we understand what we're trying to accomplish with our multi-page website project.

Assignment Requirements

The assignment asks us to create a multi-page website with various HTML elements. Let's break this down:

• Multi-page Website: We need to create multiple HTML files that link together with navigation.
• Various HTML Elements: We should demonstrate a wide range of HTML elements including:
  • Structural elements (headings, paragraphs, divs, sections)
  • Text formatting elements (bold, italic, underline, etc.)
  • Lists (ordered, unordered, definition)
  • Links (internal and external)
  • Images and multimedia
  • Tables for organized data
  • Forms for user input
  • Semantic elements (header, footer, nav, article, etc.)

Questions to Consider

• What will be the theme or purpose of our website?
• How many pages should we include?
• What specific content will go on each page?
• How will users navigate between pages?
• How will we organize our file structure?

Defining Our Approach

For this tutorial, we'll create a simple "Personal Portfolio" website with the following pages:

1. Home Page (index.html): Introduction and overview
2. About Page (about.html): Detailed personal/professional information
3. Projects Page (projects.html): Showcase of work samples
4. Contact Page (contact.html): Contact form and information

This approach will allow us to demonstrate all the required HTML elements while creating a practical, real-world website that you might actually use for your portfolio.

Step 2: Devising a Plan

Now that we understand what we need to build, let's create a systematic plan for developing our multi-page website.

Site Structure Whiteboard Plan

1. Create a project folder structure
   • Main folder: portfolio_website
   • Subfolders: images, css (for future use)
2. Create the basic HTML template with common elements
   • DOCTYPE declaration
   • HTML, head, and body tags
   • Meta tags
   • Title
   • CSS link (for future use)
   • Header with navigation
   • Main content area
   • Footer
3. Create individual pages using the template
   • index.html (Home)
   • about.html
   • projects.html
   • contact.html
4. Implement navigation between pages
   • Create nav element with links to all pages
   • Ensure links work correctly
5. Fill each page with appropriate content and elements
   • Home: Intro text, image, featured content
   • About: Biography, skills table, education timeline
   • Projects: Project cards with images and descriptions
   • Contact: Contact form, contact information, social links
6. Test the website
   • Verify all links work
   • Check all elements display correctly
   • Validate HTML

HTML Elements to Include on Each Page

Common Elements (All Pages)

• Semantic structure (header, nav, main, footer)
• Navigation menu
• Headings (h1, h2, h3)
• Paragraphs
• Links

Home Page (index.html)

• Profile image
• Welcome message
• Brief introduction
• Featured projects (with links)
• Call-to-action buttons

About Page (about.html)

• Detailed biography
• Skills table
• Education/experience list
• Blockquote (personal statement)
• Embedded video (optional)

Projects Page (projects.html)

• Project cards/sections
• Images for each project
• Descriptive text
• Lists of technologies used
• Links to live projects or code

Contact Page (contact.html)

• Contact form with various input types
• Address information
• Social media links
• Embedded map (iframe)

Step 3: Executing the Plan

Now we'll implement our plan step by step, creating each part of our multi-page website.

Setting Up the Project Structure

First, let's create our folder structure:

portfolio_website/
├── index.html
├── about.html
├── projects.html
├── contact.html
└── images/
    ├── profile.jpg
    ├── project1.jpg
    ├── project2.jpg
    └── project3.jpg

File path: Create a new folder named portfolio_website on your computer.

Creating the Basic HTML Template

Next, we'll create a basic HTML template that we'll use for all our pages. This ensures consistency across our site.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title | My Portfolio</title>
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="icon" href="/favicon.png">
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <!-- Main content goes here (unique to each page) -->
    </main>
    
    <footer>
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

Creating Individual Pages

Home Page (index.html)

File path: portfolio_website/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home | My Portfolio</title>
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="icon" href="/favicon.png">
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="hero">
            <img src="images/profile.jpg" alt="My professional headshot" width="200" height="200">
            <h2>Hello, I'm <span class="highlight">Your Name</span></h2>
            <h3>Web Developer & Designer</h3>
            <p>Welcome to my portfolio website. I create beautiful, functional websites using HTML, CSS, and JavaScript.</p>
            <div class="cta-buttons">
                <a href="projects.html" class="button">View My Work</a>
                <a href="contact.html" class="button">Contact Me</a>
            </div>
        </section>
        
        <section class="featured-projects">
            <h2>Featured Projects</h2>
            <div class="project-card">
                <img src="images/project1.jpg" alt="E-commerce Website Project" width="300" height="200">
                <h3>E-commerce Website</h3>
                <p>A fully responsive online store built with HTML, CSS, and JavaScript.</p>
                <a href="projects.html#project1">Learn More &rarr;</a>
            </div>
            
            <div class="project-card">
                <img src="images/project2.jpg" alt="Portfolio Website Project" width="300" height="200">
                <h3>Portfolio Template</h3>
                <p>A customizable portfolio template for creative professionals.</p>
                <a href="projects.html#project2">Learn More &rarr;</a>
            </div>
        </section>
        
        <section class="about-preview">
            <h2>About Me</h2>
            <p>I'm a passionate web developer with experience in creating responsive, user-friendly websites. I focus on clean code and intuitive user interfaces.</p>
            <p><a href="about.html">Read more about my background and skills &rarr;</a></p>
        </section>
    </main>
    
    <footer>
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

About Page (about.html)

File path: portfolio_website/about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About | My Portfolio</title>
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="icon" href="/favicon.png">
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="about-me">
            <h2>About Me</h2>
            <img src="images/profile.jpg" alt="My professional headshot" width="300" height="300">
            
            <h3>My Story</h3>
            <p>Hello! I'm <strong>Your Name</strong>, a web developer based in <em>Your Location</em>. I have been passionate about web development since I created my first HTML page at the age of 15.</p>
            
            <p>I specialize in creating responsive, user-friendly websites that not only look great but also perform well. My approach combines <u>technical expertise</u> with creative problem-solving to deliver exceptional web experiences.</p>
            
            <blockquote>
                <p>"The web is more than just a collection of pages; it's an experience that connects people across the globe. My mission is to make that experience better, one website at a time."</p>
            </blockquote>
            
            <p>When I'm not coding, you can find me hiking, reading science fiction novels, or experimenting with new recipes in the kitchen.</p>
        </section>
        
        <section class="skills">
            <h2>Skills & Expertise</h2>
            
            <h3>Technical Skills</h3>
            <table>
                <thead>
                    <tr>
                        <th>Category</th>
                        <th>Skills</th>
                        <th>Proficiency</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Frontend</td>
                        <td>HTML, CSS, JavaScript, React</td>
                        <td>Advanced</td>
                    </tr>
                    <tr>
                        <td>Backend</td>
                        <td>Python, Node.js, Express</td>
                        <td>Intermediate</td>
                    </tr>
                    <tr>
                        <td>Design</td>
                        <td>Figma, Adobe XD, Photoshop</td>
                        <td>Intermediate</td>
                    </tr>
                    <tr>
                        <td>Other</td>
                        <td>Git, REST APIs, Responsive Design</td>
                        <td>Advanced</td>
                    </tr>
                </tbody>
            </table>
            
            <h3>Soft Skills</h3>
            <ul>
                <li>Problem-solving</li>
                <li>Communication</li>
                <li>Time management</li>
                <li>Teamwork</li>
                <li>Adaptability</li>
            </ul>
        </section>
        
        <section class="education">
            <h2>Education & Experience</h2>
            
            <h3>Education</h3>
            <ol>
                <li>
                    <h4>Bachelor of Science in Computer Science</h4>
                    <p>University Name, 2018-2022</p>
                    <p>Relevant coursework: Web Development, Data Structures, Algorithms, Database Systems</p>
                </li>
                <li>
                    <h4>Full-Stack Web Development Bootcamp</h4>
                    <p>Coding Academy, 2022</p>
                    <p>Intensive 12-week program focused on modern web technologies</p>
                </li>
            </ol>
            
            <h3>Work Experience</h3>
            <dl>
                <dt>Frontend Developer</dt>
                <dd>Tech Company, 2022-Present</dd>
                <dd>Developing responsive web interfaces and implementing UI/UX designs for client projects.</dd>
                
                <dt>Web Development Intern</dt>
                <dd>Startup Inc., 2021</dd>
                <dd>Assisted in building and maintaining company website and client projects.</dd>
            </dl>
        </section>
        
        <section class="video-intro">
            <h2>Video Introduction</h2>
            <!-- Placeholder for video - in a real site, you would use an actual video -->
            <video controls poster="images/video-thumbnail.jpg" width="560" height="315">
                <source src="video/introduction.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </section>
    </main>
    
    <footer>
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

Projects Page (projects.html)

File path: portfolio_website/projects.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects | My Portfolio</title>
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="icon" href="/favicon.png">
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="projects-intro">
            <h2>My Projects</h2>
            <p>Here's a collection of my recent work. Each project presented unique challenges and opportunities for growth.</p>
        </section>
        
        <section id="project1" class="project">
            <h3>E-commerce Website</h3>
            <figure>
                <img src="images/project1.jpg" alt="E-commerce Website Screenshot" width="600" height="400">
                <figcaption>A fully functional online store with product catalog and shopping cart</figcaption>
            </figure>
            
            <div class="project-details">
                <h4>Project Overview</h4>
                <p>Designed and developed a responsive e-commerce website for a local clothing brand. The site features a product catalog, shopping cart, user accounts, and checkout system.</p>
                
                <h4>Technologies Used</h4>
                <ul>
                    <li><span class="tech">HTML5</span> - For structure and semantics</li>
                    <li><span class="tech">CSS3</span> - For styling and responsive design</li>
                    <li><span class="tech">JavaScript</span> - For interactive elements</li>
                    <li><span class="tech">Node.js</span> - For backend functionality</li>
                    <li><span class="tech">MongoDB</span> - For database storage</li>
                </ul>
                
                <h4>Key Features</h4>
                <ol>
                    <li>Responsive design that works on all devices</li>
                    <li>Product filtering and search functionality</li>
                    <li>User account management</li>
                    <li>Secure checkout process</li>
                    <li>Admin dashboard for inventory management</li>
                </ol>
                
                <div class="project-links">
                    <a href="https://example.com/ecommerce" target="_blank">Live Demo</a>
                    <a href="https://github.com/yourusername/ecommerce" target="_blank">Source Code</a>
                </div>
            </div>
        </section>
        
        <section id="project2" class="project">
            <h3>Portfolio Template</h3>
            <figure>
                <img src="images/project2.jpg" alt="Portfolio Template Screenshot" width="600" height="400">
                <figcaption>A customizable portfolio template for creative professionals</figcaption>
            </figure>
            
            <div class="project-details">
                <h4>Project Overview</h4>
                <p>Created a clean, modern portfolio template designed for photographers, designers, and other creative professionals. The template is fully customizable and easy to use.</p>
                
                <h4>Technologies Used</h4>
                <ul>
                    <li><span class="tech">HTML5</span> - For structure and semantics</li>
                    <li><span class="tech">CSS3/SASS</span> - For styling and responsive design</li>
                    <li><span class="tech">JavaScript</span> - For animations and interactions</li>
                </ul>
                
                <h4>Key Features</h4>
                <ol>
                    <li>Minimalist design with focus on visual content</li>
                    <li>Responsive image gallery with lightbox functionality</li>
                    <li>Contact form with validation</li>
                    <li>Easy customization options</li>
                </ol>
                
                <div class="project-links">
                    <a href="https://example.com/portfolio-template" target="_blank">Live Demo</a>
                    <a href="https://github.com/yourusername/portfolio-template" target="_blank">Source Code</a>
                </div>
            </div>
        </section>
        
        <section id="project3" class="project">
            <h3>Weather Dashboard App</h3>
            <figure>
                <img src="images/project3.jpg" alt="Weather Dashboard App Screenshot" width="600" height="400">
                <figcaption>A weather dashboard showing current conditions and forecast</figcaption>
            </figure>
            
            <div class="project-details">
                <h4>Project Overview</h4>
                <p>Developed a weather dashboard application that displays current weather conditions and a 5-day forecast for any city. The app uses a weather API to fetch real-time data.</p>
                
                <h4>Technologies Used</h4>
                <ul>
                    <li><span class="tech">HTML5</span> - For structure and semantics</li>
                    <li><span class="tech">CSS3</span> - For styling and responsive design</li>
                    <li><span class="tech">JavaScript</span> - For data fetching and manipulation</li>
                    <li><span class="tech">OpenWeather API</span> - For weather data</li>
                </ul>
                
                <h4>Key Features</h4>
                <ol>
                    <li>City search functionality</li>
                    <li>Current weather conditions display</li>
                    <li>5-day forecast with temperature, humidity, and wind speed</li>
                    <li>Search history for quick access to previous searches</li>
                    <li>Responsive design for all device sizes</li>
                </ol>
                
                <div class="project-links">
                    <a href="https://example.com/weather-app" target="_blank">Live Demo</a>
                    <a href="https://github.com/yourusername/weather-app" target="_blank">Source Code</a>
                </div>
            </div>
        </section>
    </main>
    
    <footer>
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

Contact Page (contact.html)

File path: portfolio_website/contact.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact | My Portfolio</title>
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="icon" href="/favicon.png">
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="contact-intro">
            <h2>Contact Me</h2>
            <p>Have a project in mind or just want to say hello? I'd love to hear from you! Fill out the form below or use the contact information provided.</p>
        </section>
        
        <section class="contact-form">
            <h3>Send Me a Message</h3>
            <form action="submit-form.php" method="post">
                <fieldset>
                    <legend>Personal Information</legend>
                    
                    <div class="form-group">
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" required placeholder="Your Name">
                    </div>
                    
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" required placeholder="your.email@example.com">
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">Phone (optional):</label>
                        <input type="tel" id="phone" name="phone" placeholder="(123) 456-7890">
                    </div>
                </fieldset>
                
                <fieldset>
                    <legend>Message Details</legend>
                    
                    <div class="form-group">
                        <label for="subject">Subject:</label>
                        <input type="text" id="subject" name="subject" required placeholder="What's this about?">
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Message:</label>
                        <textarea id="message" name="message" rows="5" required placeholder="Your message here..."></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="project-type">Project Type:</label>
                        <select id="project-type" name="project-type">
                            <option value="">Select a project type</option>
                            <option value="website">Website Development</option>
                            <option value="app">Web Application</option>
                            <option value="redesign">Website Redesign</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <p>Preferred Contact Method:</p>
                        <input type="radio" id="contact-email" name="contact-method" value="email" checked>
                        <label for="contact-email">Email</label>
                        
                        <input type="radio" id="contact-phone" name="contact-method" value="phone">
                        <label for="contact-phone">Phone</label>
                    </div>
                    
                    <div class="form-group">
                        <input type="checkbox" id="newsletter" name="newsletter" value="yes">
                        <label for="newsletter">Subscribe to my newsletter</label>
                    </div>
                </fieldset>
                
                <div class="form-actions">
                    <button type="submit">Send Message</button>
                    <button type="reset">Clear Form</button>
                </div>
            </form>
        </section>
        
        <section class="contact-info">
            <h3>Contact Information</h3>
            <address>
                <p><strong>Email:</strong> <a href="mailto:your.email@example.com">your.email@example.com</a></p>
                <p><strong>Phone:</strong> <a href="tel:+11234567890">(123) 456-7890</a></p>
                <p><strong>Location:</strong> City, State, Country</p>
            </address>
            
            <h3>Social Media</h3>
            <div class="social-links">
                <a href="https://linkedin.com/in/yourusername" target="_blank">LinkedIn</a>
                <a href="https://github.com/yourusername" target="_blank">GitHub</a>
                <a href="https://twitter.com/yourusername" target="_blank">Twitter</a>
            </div>
        </section>
        
        <section class="location">
            <h3>My Location</h3>
            <!-- Placeholder for a map - in a real site, you would use a real map embed -->
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387193.30592893235!2d-74.25986613799748!3d40.69714941887875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1619913125650!5m2!1sen!2s" 
                width="600" 
                height="450" 
                style="border:0;" 
                allowfullscreen="" 
                loading="lazy">
            </iframe>
        </section>
    </main>
    
    <footer>
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

Step 4: Review and Reflect

Now that we've implemented our multi-page website, let's review what we've created and consider possible improvements.

What We've Accomplished

• Created a complete multi-page website with four interconnected HTML pages
• Implemented a consistent structure across all pages using semantic HTML
• Included various HTML elements demonstrating different features and capabilities
• Created a functioning navigation system to move between pages
• Organized content in a logical, user-friendly manner

HTML Elements Implemented

• Document Structure: DOCTYPE, html, head, body, meta tags
• Semantic Structure: header, nav, main, section, article, footer, figure, figcaption, address
• Text Content: headings (h1-h6), paragraphs, blockquote, span
• Text Formatting: strong, em, u
• Lists: ordered (ol), unordered (ul), definition (dl, dt, dd)
• Links: internal page links, anchor links, external links, mailto, tel
• Images and Media: img with alt text, video
• Tables: table, thead, tbody, tr, th, td
• Forms: form, fieldset, legend, label, input (various types), textarea, select, option, button
• Embedded Content: iframe
• Special Characters: ©, →, etc.

Testing and Validation

To ensure our website is properly constructed, we should:

1. Open each page in a web browser to verify all content displays correctly
2. Test all navigation links to ensure they work as expected
3. Verify that all images display with appropriate alt text
4. Check that forms are properly structured and labeled
5. Validate our HTML using the W3C Validator at https://validator.w3.org/

Possible Improvements

While our website is functional and demonstrates various HTML elements, there are several ways it could be improved:

• CSS Styling: Add CSS to improve the visual appearance and layout
• Responsive Design: Enhance the responsive behavior for different screen sizes
• JavaScript Functionality: Add interactive features with JavaScript
• Form Processing: Implement actual form submission and processing
• SEO Optimization: Add meta description and keywords for better search engine optimization
• Accessibility Enhancements: Improve accessibility features like ARIA attributes and keyboard navigation

Learning Outcomes

Through this exercise, we've learned:

• How to structure a multi-page website with consistent navigation
• How to use a wide range of HTML elements for different purposes
• How to organize content in a logical, user-friendly manner
• How to implement links between pages and within pages
• How to create forms for user input
• How to embed external content like maps and videos

These skills form the foundation of web development and will serve as building blocks for more advanced concepts like CSS styling, JavaScript functionality, and responsive design.