Lab: 01
Task-01
1. What is HTML?
HTML stands for HyperText Markup Language. It is the basic language used to create webpages.
Every website you see on the internet is built using HTML because it provides the structure of the
page. You can think of HTML as the skeleton of a webpage. It tells the browser what to show.
For example:
headings
paragraphs
images
links
lists
tables
forms
HTML is not a programming language. It does not perform calculations or logic. Instead, it simply
describes the content of a webpage using special keywords called tags.
2. Difference Between HTML Tags and HTML Elements
HTML Tags HTML Elements
HTML tags are special words written inside An HTML element is the complete structure
angle brackets < >. that includes:
They are instructions for the browser.
the opening tag
Example of a tag: the content
<p> this is paragraph </p> the closing tag
Tags tell the browser: Example of an element:
“This is a paragraph,” <p>This is my first paragraph.</p>
“This is a heading,”
“This is an image,” etc.
Here:
<p> = opening tag
This is my first paragraph. = content
</p> = closing tag
When all these parts come together, they form an HTML element.
Task: 2
Output
Task: 3
Task: 4
Output:
Lab: 2
Task: 1
Output:
Task: 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<center>Task 2: Make a marksheet pattern</center>
</h1>
<table border="2" cellpadding="8" cellspacing="0" width="70%" align="center">
<caption>
<h2>Muhammad Ibraheem <br>3<sup>rd</sup> semester Marksheet</h2>
</caption>
<thead>
<tr>
<th>[Link]</th>
<th>Subject</th>
<th>Obtained Marks</th>
<th>Total Marks</th>
</tr><br>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Software Engineering</td>
<td>75</td>
<td>100</td>
</tr><br>
<tr>
<td>2</td>
<td>Data Structures</td>
<td>84</td>
<td>100</td>
</tr><br>
<tr>
<td>3</td>
<td>Computer Organization & Assemsbly Language</td>
<td>80</td>
<td>100</td>
</tr><br>
<tr>
<td>5</td>
<td>Financial Accounting</td>
<td>66</td>
<td>100</td>
</tr><br>
<tr>
<td>6</td>
<td>Linear Algebra</td>
<td>75</td>
<td>100</td>
</tr>
<tr>
<td colspan="2" style="text-align: right; font-weight:
bold;">Obtained Marks</td>
<td colspan="2" style="text-align: center; font-weight:
bold;">380</td>
</tr>
<tr>
<td colspan="2" style="text-align: right; font-weight:
bold;">Obtained Marks</td>
<td colspan="2"style="text-align: center; font-weight:
bold;">500</td>
</tr>
<tr>
<td colspan="2" style="text-align: right; font-weight:
bold;">Percentage</td>
<td colspan="2"style="text-align: center; font-weight:
bold;">76%</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Task: 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<center>Task 2: Make a marksheet pattern</center>
</h1>
<table bgcolor="lightgreen" border="2" cellpadding="8" cellspacing="0"
width="70%" align="center">
<caption>
<h2>Muhammad Ibraheem <br>3<sup>rd</sup> semester
Marksheet</h2>
</caption>
<thead>
<tr>
<th bgcolor="white">[Link]</th>
<th>Subject</th>
<th bgcolor="skyblue">Obtained Marks</th>
<th>Total Marks</th>
</tr><br>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Software Engineering</td>
<td>75</td>
<td>100</td>
</tr><br>
<tr>
<td>2</td>
<td>Data Structures</td>
<td>84</td>
<td>100</td>
</tr><br>
<tr>
<td>3</td>
<td>Computer Organization & Assemsbly Language</td>
<td>80</td>
<td>100</td>
</tr><br>
<tr>
<td>5</td>
<td>Financial Accounting</td>
<td>66</td>
<td>100</td>
</tr><br>
<tr>
<td>6</td>
<td>Linear Algebra</td>
<td>75</td>
<td>100</td>
</tr>
<tr>
<td colspan="2" style="text-align: right; font-weight:
bold;">Obtained Marks</td>
<td colspan="2" style="text-align: center; font-weight:
bold;">380</td>
</tr>
<tr>
<td colspan="2" style="text-align: right; font-weight:
bold;">Obtained Marks</td>
<td colspan="2"style="text-align: center; font-weight:
bold;">500</td>
</tr>
<tr>
<td colspan="2" style="text-align: right; font-weight:
bold;">Percentage</td>
<td bgcolor="skyblue" colspan="2"style="text-align:
center; font-weight: bold;">76%</td>
</tr>
</tbody>
</table>
</body>
</html>
Task: 4
Output
Task: 5
Output:
Task: 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<center>
<h1>Government College University Hyderabad</h1>
<h1>Department Of Information Technology</h1>
</center>
<table border="2" cellpadding="8" cellspacing="0" width="90%" align="center">
<caption>
<h2>TIME TABLE FOR 2024 BATCH (Morning)</h2>
<h2>BSIT 4<sup>th</sup> Semester</h2>
</caption>
<thead>
<tr bgcolor="lightgray">
<th>TIME</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st <br> 8:40–9:30</td>
<td>Operating Systems</td>
<td>Operating Systems</td>
<td>Operating Systems (Lab)</td>
<td>Web Technologies (Lab)</td>
<td>Database Systems (Lab)</td>
</tr>
<tr>
<td>2nd <br> 9:30–10:20</td>
<td>Database Systems</td>
<td>Database Systems</td>
<td>Database Systems</td>
<td>Web Technologies (Lab)</td>
<td>Database Systems (Lab)</td>
</tr>
<tr>
<td>3rd <br> 10:20–11:10</td>
<td>Computer Networks</td>
<td>Computer Networks</td>
<td>Web Technologies</td>
<td>Web Technologies</td>
<td>Computer Networks (Lab)</td>
</tr>
<tr>
<td>4th <br> 11:10–12:00</td>
<td>Probability & Statistics</td>
<td>Probability & Statistics</td>
<td>Probability & Statistics</td>
<td>Operating Systems (Lab)</td>
<td>Computer Networks (Lab)</td>
</tr>
<tr>
<td colspan="6"><center> BREAK(12:00-12:20)</center></td>
</tr>
<tr>
<td>5th <br> 12:20–1:10</td>
<td>Discrete Structures</td>
<td>Discrete Structures</td>
<td>Discrete Structures</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Lab: 3
Task: 1
Output:
Task: 2
Output:
Lab: 4
Task: 1
Task: 2
Output:
Task: 3
HTML External CSS
Output:
Task: 4
Output:
Lab: 5
Task: 1
Output:
Lab: 6
Task: 1
<!DOCTYPE html>
<html>
<head>
<title>Dropdown List</title>
</head>
<body>
<h1 align="center">Select Your Country</h1>
<div align="center">
<select>
<option>Select</option>
<optgroup label="Asian">
<option value="pakistan">Pakistan</option>
<option value="china">China</option>
<option value="indonesia">Indonesia</option>
<option value="iran">Iran</option>
</optgroup>
<optgroup label="African">
<option value="egypt">Egypt</option>
<option value="ethiopia">Ethiopia</option>
<option value="ghana">Ghana</option>
<option value="kenya">Kenya</option>
</optgroup>
<optgroup label="European">
<option value="russia">Russia</option>
<option value="france">France</option>
<option value="spain">Spain</option>
<option value="ukraine">Ukraine</option>
</optgroup>
</select>
</div>
</body>
</html>
Task: 2
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
<style>
.form-box {
width: 600px;
border: 2px solid #ccc;
padding: 20px;
margin: 30px auto;
font-size: 20px;
}
</style>
</head>
<body>
<div class="form-box">
<b>Basic Info:</b><br><br>
<label>Name:</label>
<input type="text" placeholder="Your Name"><br><br>
<label>Fathers Name:</label>
<input type="text" placeholder="Fathers Name"><br><br>
<input type="button" value="Click Here to Submit">
</div>
</body>
</html>
Task: 3
<!DOCTYPE html>
<html>
<head>
<title>Form With Multiple Elements</title>
</head>
<body>
<h2>Registration Form</h2>
<form>
<!-- 1. Text -->
<label>Full Name:</label>
<input type="text" name="fullname" placeholder="Enter your name">
<br><br>
<!-- 2. Email -->
<label>Email:</label>
<input type="email" name="email" placeholder="Enter email">
<br><br>
<!-- 3. Password -->
<label>Password:</label>
<input type="password" name="password" placeholder="Enter password">
<br><br>
<!-- 4. Radio buttons -->
<label>Gender:</label><br>
<input type="radio" name="gender" value="male"> Male <br>
<input type="radio" name="gender" value="female"> Female <br><br>
<!-- 5. Checkbox -->
<label>Hobbies:</label><br>
<input type="checkbox" name="hobby" value="reading"> Reading <br>
<input type="checkbox" name="hobby" value="sports"> Sports <br>
<input type="checkbox" name="hobby" value="music"> Music <br><br>
<!-- 6. Dropdown -->
<label>Country:</label>
<select name="country">
<option>Select</option>
<option>Pakistan</option>
<option>India</option>
<option>China</option>
</select>
<br><br>
<!-- 7. Textarea -->
<label>About Yourself:</label><br>
<textarea name="about" rows="4" cols="40" placeholder="Write
something..."></textarea>
<br><br>
<!-- 8. File Upload -->
<label>Upload Photo:</label>
<input type="file" name="photo">
<br><br>
<!-- 9. Submit -->
<input type="submit" value="Submit">
</form>
</body>
</html>
Lab: 7
Task: 1
<!DOCTYPE html>
<html>
<head>
<title>Even / Odd Number Checker</title>
<script>
function checkNumber() {
let num = [Link]("num").value;
if (num === "") {
alert("Please enter a number!");
return;
}
if (num % 2 === 0) {
alert(num + " is an EVEN number.");
} else {
alert(num + " is an ODD number.");
}
}
</script>
</head>
<body>
<h2>Check Even or Odd</h2>
<label>Enter a Number:</label>
<input type="number" id="num" placeholder="Type a number">
<button onclick="checkNumber()">Check</button>
</body>
</html>
Task: 2
<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
<script>
function convertTemp() {
let temp = parseFloat([Link]("temp").value);
let type = [Link]("type").value;
if (isNaN(temp)) {
alert("Please enter a valid temperature!");
return;
}
if (type === "CtoF") {
let fahrenheit = (temp * 9/5) + 32;
alert(temp + "°C = " + [Link](2) + "°F");
}
else if (type === "FtoC") {
let celsius = (temp - 32) * 5/9;
alert(temp + "°F = " + [Link](2) + "°C");
}
}
</script>
</head>
<body>
<h2>Temperature Converter</h2>
<label>Enter Temperature:</label>
<input type="number" id="temp" placeholder="Enter value">
<select id="type">
<option value="CtoF">Celsius → Fahrenheit</option>
<option value="FtoC">Fahrenheit → Celsius</option>
</select>
<button onclick="convertTemp()">Convert</button>
</body>
</html>
Task: 3
<!DOCTYPE html>
<html>
<head>
<title>Prime Number Checker</title>
<script>
function checkPrime() {
let num = parseInt(prompt("Enter a number:"));
if (isNaN(num) || num < 1) {
alert("Please enter a valid positive number!");
return;
}
if (num === 1) {
alert("1 is not a prime number.");
return;
}
let isPrime = true;
for (let i = 2; i <= [Link](num); i++) {
if (num % i === 0) {
isPrime = false;
break;
}
}
if (isPrime) {
alert(num + " is a PRIME number.");
} else {
alert(num + " is NOT a prime number.");
}
}
</script>
</head>
<body onload="checkPrime()">
</body>
</html>
Task: 4
<!DOCTYPE html>
<html>
<head>
<title>Right Aligned Star Pattern</title>
<script>
function printPattern() {
let rows = 5; // You can change number of rows
let pattern = "";
for (let i = 1; i <= rows; i++) {
// Print spaces
for (let s = 1; s <= rows - i; s++) {
pattern += " ";
}
// Print stars
for (let j = 1; j <= i; j++) {
pattern += "* ";
}
pattern += "<br>";
}
[Link]("result").innerHTML = pattern;
}
</script>
</head>
<body onload="printPattern()">
<h2>Right Aligned Star Pattern</h2>
<div id="result" style="font-size:20px; line-height:22px;"></div>
</body>
</html>
Task: 5
<!DOCTYPE html>
<html>
<head>
<title>Number Operations</title>
<script>
let userNumber;
function getNumber() {
userNumber = parseInt(prompt("Enter a number:"));
if (isNaN(userNumber)) {
alert("Please enter a valid number!");
}
}
function showTable() {
let output = "<h3>Table of " + userNumber + "</h3>";
for (let i = 1; i <= 10; i++) {
output += userNumber + " x " + i + " = " + (userNumber * i) +
"<br>";
}
[Link]("result").innerHTML = output;
}
function showSquare() {
let square = userNumber * userNumber;
[Link]("result").innerHTML =
"<h3>Square of " + userNumber + " is: " + square + "</h3>";
}
function checkPrime() {
let num = userNumber;
let isPrime = true;
if (num <= 1) {
isPrime = false;
} else {
for (let i = 2; i <= [Link](num); i++) {
if (num % i === 0) {
isPrime = false;
break;
}
}
}
if (isPrime) {
[Link]("result").innerHTML =
"<h3>" + num + " is a PRIME number.</h3>";
} else {
[Link]("result").innerHTML =
"<h3>" + num + " is NOT a prime number.</h3>";
}
}
</script>
</head>
<body onload="getNumber()">
<h2>Number Operations</h2>
<button onclick="showTable()">Table</button>
<button onclick="showSquare()">Square</button>
<button onclick="checkPrime()">Prime</button>
<hr>
<div id="result" style="font-size:20px;"></div>
</body>
</html>
Task: 6
<!DOCTYPE html>
<html>
<head>
<title>Account Info Form</title>
</head>
<body>
<h2>Account Info:</h2>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>Name:</td>
<td><input type="text" placeholder="Your Name"></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" placeholder="Surname"></td>
</tr>
<tr>
<td>Fathers Name:</td>
<td><input type="text" placeholder="Fathers Name"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" placeholder="Alphanumeric"></td>
</tr>
<tr>
<td>Re-type Password:</td>
<td><input type="password" placeholder="Again Type Password"></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="text" placeholder="(DD-MM-YYYY)"></td>
</tr>
<tr>
<td>Cell NO:</td>
<td><input type="text" placeholder="03333333333"></td>
</tr>
<tr>
<td>Country:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Select Gender:</td>
<td colspan="3">
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
</td>
</tr>
<tr>
<td>Select Language(s):</td>
<td colspan="3">
<input type="checkbox"> English
<input type="checkbox"> Sindhi
<input type="checkbox"> Urdu
</td>
</tr>
<tr>
<td colspan="4" align="center">
<button>Proceed</button>
</td>
</tr>
</table>
</body>
</html>
Task: 7
<!DOCTYPE html>
<html>
<head>
<title>NIC Validation</title>
<script>
function validateNIC() {
let nic = [Link]("nic").value;
// Regular Expression for NIC Format (XXXXX-XXXXXXX-X)
let nicPattern = /^[0-9]{5}-[0-9]{7}-[0-9]{1}$/;
if () {
alert("Invalid NIC Format! Use XXXXX-XXXXXXX-X");
return false; // Stop form submission
}
alert("NIC is valid. Form submitted successfully!");
return true; // Allow form submission
}
</script>
</head>
<body>
<h2>NIC Validation Form</h2>
<form onsubmit="return validateNIC()">
<label>Enter NIC:</label>
<input type="text" id="nic" placeholder="12345-1234567-1" required>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Task: 8
<!DOCTYPE html>
<html>
<head>
<title>Text Validation Form</title>
<script>
function validateForm() {
// Get field values
let name = [Link]("name").value;
let caste = [Link]("caste").value;
let roll = [Link]("roll").value;
let dept = [Link]("dept").value;
// Allow only alphabets (A-Z or a-z)
let textOnly = /^[A-Za-z ]+$/;
// Check empty fields
if (name === "" || caste === "" || roll === "" || dept === "") {
alert("All fields are required!");
return false;
}
// Validate each field
if () {
alert("Invalid data in Name field!");
return false;
}
if () {
alert("Invalid data in Caste field!");
return false;
}
if () {
alert("Invalid data in Roll No field!");
return false;
}
if () {
alert("Invalid data in Department field!");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h2>Student Information Form</h2>
<form onsubmit="return validateForm()">
<label>Name:</label>
<input type="text" id="name"><br><br>
<label>Caste:</label>
<input type="text" id="caste"><br><br>
<label>Roll No:</label>
<input type="text" id="roll"><br><br>
<label>Department:</label>
<input type="text" id="dept"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Task: 9
<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>
<script>
function calculateAge() {
let dob = [Link]("dob").value;
if (dob === "") {
alert("Please enter your Date of Birth!");
return;
}
let birthDate = new Date(dob);
let today = new Date();
let years = [Link]() - [Link]();
let months = [Link]() - [Link]();
let days = [Link]() - [Link]();
// Adjust days and months if needed
if (days < 0) {
months--;
let previousMonth = new Date([Link](),
[Link](), 0).getDate();
days += previousMonth;
}
if (months < 0) {
years--;
months += 12;
}
[Link]("result").innerHTML =
"<h3>Your Age is:</h3>" +
"<b>" + years + "</b> Years, " +
"<b>" + months + "</b> Months, " +
"<b>" + days + "</b> Days";
}
</script>
</head>
<body>
<h2>Age Calculator</h2>
<label>Enter Date of Birth:</label>
<input type="date" id="dob">
<button onclick="calculateAge()">Calculate Age</button>
<hr>
<div id="result" style="font-size:20px;"></div>
</body>
</html>
Task: 10
<!DOCTYPE html>
<html>
<head>
<title>Current Day and Time</title>
<script>
function showDateTime() {
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday"];
let now = new Date();
// Get day
let day = days[[Link]()];
// Get hours, minutes, seconds
let hours = [Link]();
let minutes = [Link]();
let seconds = [Link]();
// Set AM/PM
let ampm = hours >= 12 ? "PM" : "AM";
// Convert to 12-hour format
hours = hours % 12;
hours = hours ? hours : 12;
[Link]("output").innerHTML =
"Today is : <b>" + day + "</b><br>" +
"Current time is : <b>" + hours + " " + ampm + " : " + minutes +
" : " + seconds + "</b>";
}
</script>
</head>
<body onload="showDateTime()">
<h2>Current Day and Time</h2>
<div id="output" style="font-size:20px;"></div>
</body>
</html>