Scribd
Upload
25 views19 pages

Lab 2

Uploaded by

Sibgha Noor CSE Batch 21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views19 pages

Lab 2

Uploaded by

Sibgha Noor CSE Batch 21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Static Web Design using HTML

LAB # 02

Spring 2024
CSE 303L: Database Management System
Submitted by: Sibgha Noor
Registration No. 21PWCSE1975
Section: C

“On my honor, as student of University of Engineering and Technology, I have


neither given nor received unauthorized assistance on this academic work.”

Student Signature: ________________

Submitted to:
Mam Summayea Salahudin
DATED: 7/ March/ 2024

Department of Computer Systems Engineering


University of Engineering and Technology, Peshawar
Static Web Design using HTML

OBJECTIVES OF THE LAB


-- This lab aims at the understanding of:
 The basic syntax and structure of HTML.
 Identify the different types of headings and the appropriate usage for e ach.
 Understand how to create and use rules to style HTML elements.
 Learn how to use comments in HTML to provide additional information and context for the
code.
 Understand how to structure paragraphs in HTML and use appropriate formatting tags.
 Understand how to use HTML styles to change the appearance of text and other elements.
 Learn how to create and format tables in HTML.
 Learn how to create and format lists in HTML.
 Understand how to create and use forms to collect user input.

Task2.2
Forms play critical role in taking data to and from users. To enhance this ability, design three
different types of forms using HTML Form. (Note: Don’t use CSS or Bootstrap. Only HTML.)
Example forms can be registration form, contact form, student feedback form, etc.

Contact Form:
<!DOCTYPE html>

<html>
<head>
<title>Contact Us</title>
<style>
body {
background-color: #FFC0CB;
text-align: center;
}
form {
width: 50%;
margin: 0 auto;
text-align: left;
}
</style>
</head>
<body>
<h1>Contact Us</h1>
<form>
Your Name:<br>
<input style="width: 20%;" type="text" placeholder="Enter your name:" name="Full
Name"><br><br>
Your Email:<br>
<input style="width: 20%;" type="email" placeholder="Enter your email:"
name="Email"><br><br>
Your Message:<br>
<textarea style="width: 30%; height: 50px;" placeholder="Type your message
here"></textarea><br><br>
<a href="[email protected]" style="display: flexbox; ">Email Us</a>
OR
<a href="03477567944" style="display: flexbox;">Call US</a>
<br><br>
<button type="submit" style="background-color: #000; color: #fff; padding: 10px
20px; border: none; border-radius: 5px;">Submit</button>
<button type="reset" style="background-color: #000; color: #fff; padding: 10px 20px;
border: none; border-radius: 5px;">Reset</button>
</form>
</body>
</html>
Registration form:
<!DOCTYPE html>
<html>

<head>
<title>Registration Form</title>
</head>
<body style="background-image: url('https://img.freepik.com/free-photo/office-
supplies_23-2148103974.jpg'); background-size: cover;">

<h1>Registration Form:</h1>

<form>
Your Name*:<br>
<input type="text" placeholder="first name">
<input type="text" placeholder="last name">
<input type="file" name="picture" accept="image/*">
<br><br>
Your Email*:<br>
<input type="email" placeholder="[email protected]"> Phone Number*:
<input type="tel">
<br><br>
Address*:<br>
<input type="tel" placeholder="street number">
<input type="text" placeholder="city">
Province*:
<select name="province" >
<option value="KPK">KPK</option>
<option value="Sindh">Sindh</option>
<option value="Balochistan">Balochistan</option>
<option value="Punjab">Punjab</option>
</select><br><br>

Gender*:<br>
<input type="radio" name="gender" value="female">female
<input type="radio" name="gender" value="male">male
<input type="radio" name="gender" value="other">other
<br><br>
Date of Birth*:<br>
<input type="date" name="date" value="date">
<br><br>
where did you hear about us?:<br>
<input type="checkbox" value="social media">social media <br>
<input type="checkbox" value="friend">friend<br>
<input type="checkbox" value="portal">portal <br>
<input type="checkbox" value="other">other<br>

<br>
<button type="submit" style="background-color: #000; color: #fff;
padding: 10px 20px; border: none; border-radius: 5px;">Register</button>
<button type="reset" style="background-color: #000; color: #fff;
padding: 10px 20px; border: none; border-radius: 5px;">Reset</button>
</form>
</body>

</body>

Feedback Form:
Task2.3
Code
<html>
<head><title>table </title>
</head>
<body>
<h1>Demo</h1>
<span>

Show: <select name="numbers" >


<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</span> search:<input type="search" name="search" value="search">
<table table width="900" border="1px" cellspacing="0"
cellpadding="10px" >
<tr bgcolor="sjy blue">
<td >Rank</td>
<td >Country</td>
<td > US $</td>
<td >Year</td>
</tr>
<tr >
<td>1</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\1.png"></image><label style="color: rgb(26, 129, 155);">Luxembourge</label>
</td>
<td>$ 113,533</td>
<td>2011</td>
</tr>

<tr >
<td>2</td>
<td> <image width ="30 pixels"src= "S:\6th_semester\DBMS lab\
lab 2\2.png"></image><label style="color: rgb(26, 129, 155);">Qatar</label></td>
<td>98,329</td>
<td>2011</td>
</tr>

<tr >
<td>3</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\7.jpg"></image> <label style="color: rgb(26, 129, 155);">Norway</label></td>
<td>97,255</td>
<td>2011</td>
</tr>

<tr >
<td>4</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\6.jpg"></image> <label style="color: rgb(26, 129,
155);">Switzerland</label></td>
<td>81,161</td>
<td>2011</td>
</tr>

<tr >
<td>5</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\5.jpg"></image><label style="color: rgb(26, 129, 155);">United Arab
EmiratesS</label></td>
<td>67,008</td>
<td>2011</td>
</tr>

<tr >
<td>6</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\4.jpg"></image> <label style="color: rgb(26, 129,
155);">Australia</label></td>
<td>65,477</td>
<td>2011</td>
</tr>

<tr >
<td>7</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\3.jpg"></image> <label style="color: rgb(26, 129, 155);">Denmark</label></td>
<td>59,998</td>
<td>2011</td>
</tr>

<tr >
<td>8</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\9.jpg"></image><label style="color: rgb(26, 129, 155);">Sweden</label></td>
<td>56,956</td>
<td>2011</td>
</tr>

<tr >
<td>9</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\9.jpg"></image> <label style="color: rgb(26, 129, 155);">Canada</label></td>
<td>50,436</td>
<td>2011</td>
</tr>

<tr >
<td>10</td>
<td> <image width ="30 pixels"src="S:\6th_semester\DBMS lab\lab
2\1.png"></image><label style="color: rgb(26, 129,
155);">Netherlandss</label></td>
<td>50,335</td>
<td>2011</td>
</tr>

</table>
<table><tr><td><p>Showing 1 to 10 of 186 records</p></td></tr>

<footer align="center">
pages:<a href="#">Previous</a>
<a href="#" title="1">1</a>
<a href="#" title="2">2</a>
<a href="#" title="3">3</a>
<a href="#" title="4" >4</a>
<a href="#" title="5">5</a>
......
<a href="#" title="10">10</a>

<a href="#">Next</a> </footer>


</table>
</body>
</html>

Output:
Task2.4
Code:
<html>
<head><title>task 2.4</title></head>
<body style="background-image:
url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQHEQ8NBw0QDg0QDR
YPDRAODQ8NDQ0QFx0WFhURExMYIyghGBolGxUVITEhJSk3Li4uFx8zRDMsNygtLisBCgoKDQ0OFQ0PFSs
ZHR0rKystKy0rKy0tNys3KystKy0rKy0rKy03LTctKysrLTcrKystKys3LSsrKysrKysrK//
AABEIAL0BCwMBIgACEQEDEQH/xAAZAAEBAQEBAQAAAAAAAAAAAAAAAQIEAwf/
xAAlEAEAAQMDBAEFAAAAAAAAAAAAAQJhoQMRExIhMVFBcYGRscH/
xAAYAQEBAQEBAAAAAAAAAAAAAAAAAgEDBP/EABgRAQEBAQEAAAAAAAAAAAAAAAABERIC/
9oADAMBAAIRAxEAPwD6zEGxCvS7psbKAmxsoCbGygLR2mJdTkdVE7xCfTKoCWAAAAAAAAAAAAAAAAAAAA
CSqSDkhUhXRQAAAAAA9tCfMfd4tUVdMxLKOkBCQAAAAAAAAAAAAAAAAAAABJVJByQqQrooAAAAAAAB0aV
XVH0bc+lV0zb5dCLE0AYAAAAAAAAAAAAAAAAAACSqSDkhUhXRQAAAAAAAA6NGrqjafMOdaaumd4ZYV1BE
794EJAAAAAAAAAAAAAAAAAAElUkHJCpCuigAAAAAAAAAG9Kvp7T4/
Tocj10tTbtV9k2MsewCWAACoA1sbemQGuk2ZAa2ZAAAAAAABJVJByQqQrooAAAAAAAAAAAB66Wp8VfaXs
5Hpp6vT2q8fpNjLHuETv4EsAAAAAAAAAAAAAAElUkHJCpCuigAAAAAAAAAAAAAGqK5p8PejUir6uYZYY6
x4Uasx57/
ALetNcVeE2JxoBgAAAAAAAAAAJKpIOSFSFdFAAAAAAAAAAAAAAAAAAN06sxf6vSnWifPZ4DMMdcTv4kcj
Uakx8/1nLMdI8Y1p+YajWj5iWZWY9BiNWPeF649wzBoTqj3H5Xe4Ab3N7x+QEk6o9x+WZ1I9wDmhUhXRQ
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxU2xUDUKkKAN9f8APRNe/
wAMGBvqj0dUejRgb6o9M1Tv49AgDQAAAAAAAAAAAAAAAAAAAAAAYqbYqBqFSFAAAAAAAABYuu8epZGDXa
52uyAANAAAAAAAAAAAAAAAABiptioGoV5xqWXktkGxjktk5LZBsY5LZOS2QbGOS2TktkGxjktk5LZBsY5
LZOS2QbGOS2TktkGxjktk5LZBsY5LZOS2QbGOS2TktkGxjktk5LZBsY5LZOS2QbGOS2TktkGxjktk5LZB
sY5LZOS2QbGOS2TktkG2Kjktlmagf//Z); background-size: cover;">
<h1 style="text-align: center; color: rgb(19, 2, 2);">Features of HTML
5.0:</h1>
<header style="text-align: right;">Welcom mam Sumiya </header>
<h2>Audio:</h2>
<p>Audio is a feature of HTML 5.We can insert audios in out website
using an audio tag.
<br>For which we need to put out appopriate source and type of audio
file.</p>
<audio controls >
<source src="S:\6th_semester\DBMS lab\lab 2\male1.wav"
type="audio/wav">
</audio>

<h2>Vedio:</h2>
<p>Vedio tag is used to insert vedios to out website.</p>
<video width="640" height="360" controls>
<source src="S:\6th_semester\DBMS lab\lab 2\WhatsApp Video 2024-03-
03 at 12.38.05 AM.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<h2>SVG</h2>
<p>We can use svg in HTML 5.0 by using the "svg" tag.</p>
<svg width="200" height="200" >
<circle cx="100" cy="150" r="30" fill="red" />
</svg>

<section>
<h2>Section 1</h2>
<p>We created a section 1 using section tag that is available in
HTML 5.0.
An HTML Form provides data gathering functionality to a web
page. <br>The data submitted can be
processed at the web server by CGI programs, server side JavaScript, Java
Servlets, and so on.
</p>
</section>
<h2>Footer:</h2>
<p>we inserted a footer at the end of page.Footer element can be
inserted by using "footer" tag. </p>
<footer style="text-align: end;">

<a href="[email protected]" style="display: flexbox;


">Email Us</a><br>
author: Sibgha Noor

</footer>

</body>
</html>

Output:
Task2.5
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cv</title>
</head>
<body >
<h1 ><b><u>SIBGHA NOOR</u></b></h1>
<section ">

<label><b>Phone: </b> 03477567944</label><br>


<label><b>Email:</b> [email protected]</label><br>
<label><b>Linkdin:</b><a href="https://www.linkedin.com/feed/"> Sibgha
Noor</a></label><br></section>
<hr width="60%">

<table><tr><td></td>

<h2>About Me:</h2>
<p>Computer System Engineering student with a passion for
technology.<br>I bring a strong foundation in hardware,software, and
networking.<br>Eager to apply my skills to real-world project and contribute to a
dynamic team. </p>
<hr width="60%">

<h2>Education:</h2>
<ul>
<li>Computer Systems Engineering</li>
<label><i>University of Engineering and Technology,
Peshawar.</i></label><br>
2021-2025<br><br>
<li>Intermediate</li>
<label><i>The Peace College, Haripur.</i></label><br>
2019-2021<br><br>

<li>Matric</li>
<label><i>SPSC,Haripur.</i></label><br>
2017-2019<br><br>
</ul><hr width="60%">

<h2>Skills:</h2>
<ul>
<li>Programming</li>
<li>Modelsim</li>
<li>MATLAB</li>
<li>Public Relation</li>
<li>COmmunication</li>

</ul>
<hr width="60%">
<h2>Certificates:</h2>
<ul>
<li>Signal Processing Onramp </li>
<li> MATLAB Onramp</li>
<li>Coursera</li>
</ul></td>
<td></tr><hr width="60%">

</td>
</table>

</body>
</html>

Output:

You might also like