HTML Assignment: Building a Personal Portfolio Website
Module: Practical HTML Methods and Exercises
Objective:
The goal of this assignment is to help students apply their HTML knowledge by creating a simple Personal Portfolio Website. This project will focus on structuring a webpage using HTML elements, implementing semantic tags, linking pages, and embedding multimedia.
Assignment Overview
Task:
Create a Personal Portfolio Website with the following sections:
Home Page (index.html)
About Page (about.html)
Projects Page (projects.html)
Contact Page (contact.html)
Each page should include HTML best practices such as semantic elements, navigation links, images, forms, and tables where necessary.
Assignment Requirements
1. Home Page (index.html)
Use the <!DOCTYPE html> declaration.
Include a <header> with your name or logo.
Add a navigation bar (<nav>) with links to other pages.
Include a welcome message using an <h1> tag.
Add a short description using a <p> tag.
Insert an image of yourself or a placeholder using the <img> tag.
Example Code:
html
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Portfolio</title> </head> <body> <header> <h1>Welcome to My Portfolio</h1> </header> <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> <section> <p>Hello! My name is [Your Name]. I am a web developer.</p> <img src="profile.jpg" alt="My Photo" width="200"> </section> </body> </html>
2. About Page (about.html)
Include a heading (<h1>).
Use <p> tags to describe your background.
Implement an ordered list (<ol>) or unordered list (<ul>) of your skills.
Example Code:
html
code
<h1>About Me</h1> <p>I am a passionate web developer learning HTML.</p> <h2>My Skills</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
3. Projects Page (projects.html)
Display a list of projects using a <table>.
Include a video or embedded content using <iframe>.
Example Code:
html
code
<h1>My Projects</h1> <table border="1"> <tr> <th>Project Name</th> <th>Description</th> </tr> <tr> <td>Portfolio Website</td> <td>A personal portfolio to showcase my work.</td> </tr> </table> <h2>My Video Project</h2> <iframe width="560" height="315" src="https://www.youtube.com/embed/your-video-link"></iframe>
4. Contact Page (contact.html)
Create a contact form using <form>, <input>, and <textarea>.
Example Code:
html
Copy code
<h1>Contact Me</h1> <form> <label for="name">Name:</label> <input type="text" id="name" name="name" required><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br><br> <label for="message">Message:</label><br> <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br> <input type="submit" value="Send"> </form>
Evaluation Criteria
Criteria
Description
Points
Proper Structure
Uses correct HTML structure and elements.
20
Navigation
Links work correctly between pages.
20
Semantic HTML
Uses <header>, <nav>, <section>, etc.
20
Form Implementation
Contact form is functional and well-structured.
20
Multimedia & Tables
Uses images, video, and tables effectively.
20
Total: 100 Points
Conclusion
This assignment provides hands-on experience in structuring an HTML website.
No comments:
Post a Comment