1.
Personal Portfolio Website
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Portfolio</h1>
<p>Hello! I'm a web developer in training.</p>
<h2>Projects</h2>
<ul>
<li>HTML Resume</li>
<li>Interactive Form</li>
</ul>
</body>
</html>
2. HTML Table with Merged Cells
html
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Grades</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Juan Dela Cruz</td>
<td>90</td>
<td>85</td>
</tr>
</table>
3. Image Gallery
html
<h2>Image Gallery</h2>
<img src="[Link]" width="200">
<img src="[Link]" width="200">
<img src="[Link]" width="200">
4. Navigation Menu
html
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
5. Resume Page
html
<h1>Maria Santos</h1>
<p><strong>Email:</strong> maria@[Link]</p>
<h2>Education</h2>
<ul>
<li>BSIT - UDM</li>
</ul>
<h2>Skills</h2>
<ul>
<li>HTML, CSS</li>
<li>Python</li>
</ul>
6. Login Form
html
<form>
<label>Username:</label>
<input type="text" required><br>
<label>Password:</label>
<input type="password" required><br>
<button type="submit">Login</button>
</form>
[Link] YouTube Video
html
<iframe width="560" height="315"
src="[Link]
title="YouTube video" allowfullscreen></iframe>
8. Feedback Form with Textarea
html
<form>
<label for="name">Your Name:</label>
<input type="text" id="name"><br>
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" rows="4"
cols="40"></textarea><br>
<button type="submit">Submit</button>
</form>
9. HTML5 Audio and Video
html
<h2>Audio Sample</h2>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
<h2>Video Sample</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
10.. To-Do List Layout
html
<h1>My To-Do List</h1>
<ul>
<li><input type="checkbox"> Finish HTML project</li>
<li><input type="checkbox"> Study for quiz</li>
<li><input type="checkbox"> Submit OJT form</li>
</ul>
11. Contact Information with Links
html
<h2>Contact Me</h2>
<p>Email: <a
href="[Link]
a></p>
<p>Phone: <a href="[Link] 917 123
4567</a></p>
12 . FAQ Section Using Details and Summary
html
<h2>Frequently Asked Questions</h2>
<details>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language.</p>
</details>
<details>
<summary>What is a tag?</summary>
<p>A tag is an element used to define structure or content
in HTML.</p>
</details>
13. Multipage Navigation (Linking Pages)
[Link]
html
<a href="[Link]">Go to Page 2</a>
[Link]
html
<a href="[Link]">Back to Home</a>
14. Simple Calculator Layout
html
<h2>Simple Calculator</h2>
<form>
<input type="number" placeholder="First number"><br>
<input type="number" placeholder="Second
number"><br>
<button type="submit">Add</button>
</form>
15. Product Card
html
<div style="border:1px solid #ccc; width:200px;
padding:10px;">
<img src="[Link]" width="180">
<h3>Product Name</h3>
<p>₱999.00</p>
<button>Add to Cart</button>
</div>
16. Progress Bar
html
<h3>Course Completion</h3>
<progress value="70" max="100"></progress>
<p>70% completed</p>
17. Quotes Section Using Blockquote
html
<blockquote>
"Education is the most powerful weapon which you can use
to change the world." – Nelson Mandela
</blockquote>
18. Student Profile Card
html
<div style="border:1px solid #000; padding:15px;
width:250px;">
<h3>Ronald B. Fernandez</h3>
<p>BSIT - 3rd Year</p>
<p>Email: ronald@[Link]</p>
</div>
19 . Simple To-Do List
html
<h1>My To-Do List</h1>
<ul>
<li><input type="checkbox"> Finish HTML project</li>
<li><input type="checkbox"> Review JavaScript</li>
<li><input type="checkbox"> Attend group meeting</li>
</ul>
20. Contact Information Page
html
<h2>Contact Me</h2>
<p>Email: <a
href="[Link]
a></p>
<p>Phone: <a href="[Link] 917 123
4567</a></p>
<p>LinkedIn: <a
href="[Link]
onald</a></p>
21. Frequently Asked Questions (FAQ)
html
<h2>FAQs</h2>
<details>
<summary>What is HTML?</summary>
<p>HTML stands for Hypertext Markup Language.</p>
</details>
<details>
<summary>Is HTML a programming
language?</summary>
<p>No, HTML is a markup language.</p>
</details>
22. Two-Page Navigation (Links Between Pages)
[Link]
html
<h1>Welcome to My Site</h1>
<p><a href="[Link]">Go to About Page</a></p>
[Link]
html
CopyEdit
<h1>About Me</h1>
<p>This is the about page.</p>
<p><a href="[Link]">Back to Home</a></p>
23. Simple Feedback Form
html
<h2>Feedback Form</h2>
<form>
<label>Name:</label><br>
<input type="text"><br><br>
<label>Comments:</label><br>
<textarea rows="4" cols="30"></textarea><br><br>
<button type="submit">Submit</button>
</form>
24. Course Enrollment Form
html
CopyEdit
<h2>Course Enrollment</h2>
<form>
<label>Student Name:</label><br>
<input type="text"><br><br>
<label>Choose Course:</label><br>
<select>
<option>HTML Basics</option>
<option>JavaScript Fundamentals</option>
<option>Python for Beginners</option>
</select><br><br>
<button type="submit">Enroll</button>
</form>
25. Basic Quiz Template
html
<h2>HTML Quiz</h2>
<form>
<p>1. What does HTML stand for?</p>
<input type="radio" name="q1">Hyper Text Markup
Language<br>
<input type="radio" name="q1">Home Tool Markup
Language<br><br>
<p>2. Which tag is used for a paragraph?</p>
<input type="radio" name="q2"><p><br>
<input type="radio" name="q2"><para><br><br>
<button type="submit">Submit Answers</button>
</form>
26. Table with Student Records
html
<h2>Student Grades</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>Ana</td>
<td>Math</td>
<td>90</td>
</tr>
<tr>
<td>Juan</td>
<td>Science</td>
<td>85</td>
</tr>
</table>
29. Blockquote and Citation
html
<blockquote>
"Success is not final, failure is not fatal: It is the courage to
continue that counts."
</blockquote>
<cite>- Winston Churchill</cite>
21. Basic Resume Structure
html
<h1>Ronald B. Fernandez</h1>
<h2>Web Developer</h2>
<p>Email: ronald@[Link]</p>
<h3>Education</h3>
<ul>
<li>BS in Information Technology - LCUP</li>
</ul>
<h3>Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>