Web Technology – Unit 1 Laboratory Assignment
Lab Task 1: HTML Document Basics
Aim: To create a valid HTML5 document using headings, paragraphs and formatting tags.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>This is a <b>bold</b> word and <i>italic</i> word.</p>
<p>This is <strong>important</strong> and <em>emphasized</em>.</p>
<p>Water formula: H<sub>2</sub>O</p>
<p>2<sup>2</sup> = 4</p>
<mark>Highlighted Text</mark>
<hr>
</body>
</html>
Explanation: This document shows basic structure and formatting elements in HTML5.
What I Learned: I learned HTML structure, formatting tags and document declaration.
Lab Task 2: Lists and Hyperlinks
Aim: To create ordered, unordered lists and hyperlinks.
Source Code:
<ul>
<li>Home</li>
<li>About</li>
</ul>
<ol>
<li>Write assignment</li>
<li>Submit assignment</li>
</ol>
<a href="[Link] Google</a>
Explanation: Unordered list uses bullets. Ordered list uses numbers. Anchor tag creates
hyperlinks.
What I Learned: I learned navigation menus and linking pages.
Lab Task 3: Images and Accessibility
Aim: To create image gallery with alt text.
Source Code:
<figure>
<img src="[Link]" alt="College Building" width="200">
<figcaption>College Building</figcaption>
</figure>
Explanation: Image tag displays image. Alt text improves accessibility.
What I Learned: I learned importance of alt attribute and captions.
Lab Task 4: Client-Side Image Map
Aim: To create clickable areas on image.
Source Code:
<img src="[Link]" usemap="#campusmap">
<map name="campusmap">
<area shape="rect" coords="34,44,270,350" href="[Link]">
</map>
Explanation: Map and area tags define clickable regions.
What I Learned: I learned how image maps work.
Lab Task 5: Tables with Spanning
Aim: To create timetable using rowspan and colspan.
Source Code:
<table border="1">
<tr><th>Day</th><th>Subject</th></tr>
<tr><td rowspan="2">Monday</td><td>Math</td></tr>
<tr><td>English</td></tr>
</table>
Explanation: Rowspan merges rows. Colspan merges columns.
What I Learned: I learned table structuring and spanning.
Lab Task 6: Frames and iFrames
Aim: To embed external page using iframe.
Source Code:
<iframe src="[Link] width="600" height="400"></iframe>
Explanation: Iframe embeds another webpage inside current page.
What I Learned: I learned difference between frame and iframe.
Lab Task 7: Form Controls and Validation
Aim: To create student form with validation.
Source Code:
<form>
<label>Name:</label>
<input type="text" required>
<label>Email:</label>
<input type="email" required>
<input type="submit">
</form>
Explanation: Form collects user input and validation ensures correct data.
What I Learned: I learned form elements and validation attributes.
Lab Task 8: CSS Inclusion Approaches
Aim: To demonstrate inline, internal and external CSS.
Source Code:
<!-- Inline -->
<p style="color:red;">Hello</p>
<!-- Internal -->
<style>
p {color: blue;}
</style>
<!-- External -->
<link rel="stylesheet" href="[Link]">
Explanation: Inline has highest priority, then internal, then external.
What I Learned: I learned CSS precedence and inclusion methods.
Lab Task 9: CSS Box Model and Positioning
Aim: To demonstrate box model and positioning.
Source Code:
.box {
margin: 10px;
padding: 20px;
border: 2px solid black;
}
.relative {
position: relative;
top: 10px;
}
Explanation: Box model includes margin, border, padding and content.
What I Learned: I learned layout control using CSS.
Lab Task 10: Mini Project (3 Page Website)
Aim: To create Home, About and Contact pages with navigation and responsive CSS.
Source Code:
<!-- [Link] -->
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
<!-- [Link] -->
@media (max-width:600px){
nav {display:block;}
}
Explanation: Mini project combines HTML structure, CSS styling and responsiveness.
What I Learned: I learned how to build a small multi-page website.
