INDEX
SR.NO TITLE PAGE
NO.
1. Personal Profile Page using Text Formatting 01
and Horizontal Rule
2. Web Page using Headings, Paragraphs, Line 02
Break and Formatting
3. Web Page with Description List and Nested 03
Lists
4. Table with Rowspan and Colspan for Time 05
Table
5. Form with All Input Types 07
6. Web Page with Links to Different Pages 08
(Same Website)
7. Image Gallery Web Page 10
8. Internal CSS Styling of a Resume Page 11
9. Web Page Using Iframes (Internal Pages) 12
10. Web Page Using Iframes (Internal Pages) 13
1. Personal Profile Page using Text Formatting and Horizontal Rule
<!DOCTYPE html>
<html>
<head><title>My Profile</title></head>
<body>
<h1>X.Y.Z</h1>
<hr>
<p><b>Roll No:</b> 123456</p>
<p><i>Course:</i> Bachelor of Computer Applications</p>
<p><u>College:</u> MJPRU University</p>
</body>
</html>
OUTPUT :-
2. Web Page using Headings, Paragraphs, Line Break and
Formatting
<!DOCTYPE html>
<html>
<head><title>About Web Technology</title></head>
<body>
<h1>Web Technology</h1>
<p>This subject covers <b>HTML</b>, <i>CSS</i>, and <u>JavaScript</u>.</p>
<br>
<p>It is important for developing web applications.</p>
</body>
</html>
OUTPUT :-
3. Web Page with Description List and Nested Lists
<!DOCTYPE html>
<html>
<head><title>Nested List</title></head>
<body>
<h2>My Courses</h2>
<dl>
<dt>HTML</dt>
<dd>Structure of Web Pages</dd>
<dt>CSS</dt>
<dd>Styling of Web Pages</dd>
</dl>
<h2>Daily Schedule</h2>
<ol>
<li>Morning
<ul>
<li>Exercise</li>
<li>Study</li>
</ul>
</li>
<li>Evening
<ul>
<li>Coding</li>
<li>Reading</li>
</ul>
</li>
</ol>
</body>
</html>
OUTPUT :-
4. Table with Rowspan and Colspan for Time Table
<!DOCTYPE html>
<html>
<head><title>Class Time Table</title></head>
<body>
<h2>BCA 6th Sem Time Table</h2>
<table border="1">
<tr>
<th>Day</th>
<th colspan="2">Subjects</th>
</tr>
<tr>
<td>Monday</td>
<td>Web Tech</td>
<td>DBMS</td>
</tr>
<tr>
<td rowspan="2">Tuesday</td>
<td colspan="2">Project Work</td>
</tr>
<tr>
<td>Java</td>
<td>Python</td>
</tr>
</table>
</body>
</html>
OUTPUT :-
5. Form with All Input Types
<!DOCTYPE html>
<html>
<head><title>Full Form</title></head>
<body>
<h2>Feedback Form</h2>
<form>
Name: <input type="text"><br><br>
Email: <input type="email"><br><br>
Age: <input type="number"><br><br>
Password: <input type="password"><br><br>
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female <br><br>
Hobbies:
<input type="checkbox"> Reading
<input type="checkbox"> Sports <br><br>
City:
<select>
<option>Bijnor</option>
<option>Moradabad</option>
<option>Meerut</option>
</select><br><br>
Message:<br>
<textarea rows="4" cols="30"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT :-
6. Web Page with Links to Different Pages (Same Website)
<!DOCTYPE html>
<html>
<head><title>Navigation Page</title></head>
<body>
<h2>My Website</h2>
<a href="about.html">About</a> |
<a href="services.html">Services</a> |
<a href="contact.html">Contact</a>
</body>
</html>
OUTPUT :-
7. Image Gallery Web Page
<!DOCTYPE html>
<html>
<head><title>Gallery</title></head>
<body>
<h2>My Gallery</h2>
<img src="https://images.unsplash.com/photo-1509395176047-4a66953fd231" width="200"
height="150">
<img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" width="200"
height="150">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" width="200"
height="150">
</body>
</html>
OUTPUT :-
8. Internal CSS Styling of a Resume Page
<!DOCTYPE html>
<html>
<head>
<title>Resume</title>
<style>
body { font-family: Arial; }
h1 { color: darkblue; }
p { font-size: 16px; color: gray; }
</style>
</head>
<body>
<h1>X Y Z</h1>
<p><b>Email:</b> xyz@example.com</p>
<p><b>Skills:</b> HTML, CSS, JS</p>
</body>
</html>
OUTPUT :-
9. Web Page Using Iframes (Internal Pages)
<!DOCTYPE html>
<html>
<head><title>IFrame Example</title></head>
<body>
<h2>Website with Iframe</h2>
<iframe src="https://www.wikipedia.org" width="1200" height="580"></iframe>
</body>
</html>
OUTPUT :-
10. DHTML with Button to Change Text Color
<!DOCTYPE html>
<html>
<head>
<script>
function changeColor() {
document.getElementById('text').style.color = 'red';
</script>
</head>
<body>
<h2 id="text">Click button to change my color</h2>
<button onclick="changeColor()">Change Color</button>
</body>
</html>
OUTPUT :-
After clicking “Change Color” button :-
