Scribd
Upload
85 views8 pages

Lab 12

This document is a lab journal from a computer science course at Bahria University in Lahore, Pakistan. It outlines 4 tasks for a lab on CSS: 1) Using div tags with IDs and classes, 2) Creating a table with CSS, 3) Creating a web page structure with div/HTML5 tags, and 4) Creating a form with CSS. It provides the code for tasks 1, 3, and 4 and includes spaces to record marks for each task.

Uploaded by

Faisal Ghani
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
85 views8 pages

Lab 12

This document is a lab journal from a computer science course at Bahria University in Lahore, Pakistan. It outlines 4 tasks for a lab on CSS: 1) Using div tags with IDs and classes, 2) Creating a table with CSS, 3) Creating a web page structure with div/HTML5 tags, and 4) Creating a form with CSS. It provides the code for tasks 1, 3, and 4 and includes spaces to record marks for each task.

Uploaded by

Faisal Ghani
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/ 8

Bahria University, Lahore Campus

Department of Computer Sciences


Lab Journal 12
(Spring 2019)

Course: IC&T Date:


Course Code: Max Marks: 30
Faculty’s Name: Miss Sars Lab Engineer: Bilal Shahid

Name:____________________________________ Enroll No: _______________________

Objective(s) :
 To understand Learn the language of the web CSS.
 How to Design web page.
 To understand how to design web page structure.

Lab Tasks :
Task 1: Write a code in which Div tag is used with ID and Class and display given below
page. Internal style sheet will be used in this task.

Task 2: Create given below table using CSS and Div tag.
i. Font size and style should be same.
ii. Cell’s color will be same as table cells.
%

Enrollment Number: 03-134192-012

Task 3: Create given below web page structure using Div tag/HTML5 tags.

Page 2 of 8
%

Enrollment Number: 03-134192-012


Task 4: Create given below form using CSS.

Lab Grading Sheet :


Max Obtained
Task Comments(if any)
Marks Marks
1. 05
2 05
3 10
4 10

Total 30 Signature

Note : Attempt all tasks and get them checked by your Lab Instructor.

Page 3 of 8
%

Enrollment Number: 03-134192-012

Task 01 code:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: red;
color: white;
margin : 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the united kingdom,
with a metropolitian area over 13 million inhabiatant. Standing on the river Thames, londan
has been a major settlement for two millennia, its history going back to its founding by
Romans , who named it Londinium. </p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.<br>
Stiuated on the Senine river, it is at the heart of the Ile-De-France region, also known as
the region parisienne.<br>
Within its metropolitan area is one of the largest population centre in Europe, with over 12
million In habiatant.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greter Tokyo Area, and the most
populous metropolitan area in the world<br>
It is the seat of the Japanese government and the Imperial Palace, and the home of
Japanese Imperial Familt.<br>
The tokyo prefecture is part of the world's most populous metriopolitan area woith 18
million people and the world's largest urban economy</p>
</div>

</body>
</html>

Page 4 of 8
%

Enrollment Number: 03-134192-012


Task 03 code:
<!DOCTYPE html>
<html>
<head>
<style>
.back {
background-color:white;
height: 500px;
width: 500px;
color: black;
border: 2px;
padding-bottom: 30px;
padding-left: 470px;

border-color: black;

}
.header{
background-color: lightgray;
width:500px;
height:120px;
}
.nav{
background-color: yellow;
width: 500px;
height: 25px
}
.sec{

background-color:green;
height:355px;
width:175px;
float: right;
}
.side{
background-color: red;
width:425px;
height:355px;

}
.footer{
background-color: royalblue;
width:500px;
height:70px;
}
</style>
</head>
<body>
<div class="back">
<div class="header">
Header
</div>
<div class="nav">
Page 5 of 8
%

Enrollment Number: 03-134192-012


Navigation Bar
</div>
<div class="sec">
Side Bar
</div>
<div class="side">
Section
</div>
<div class="footer">
Footer
</div>

</div>
</body>
</html>

Page 6 of 8
%

Enrollment Number: 03-134192-012

Task 04 code:
<html>
<title>Bahria submission page</title>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta name="Description" content="Bahria submission page"/>
<style>
body{

background-color:gainsboro;
}
*{
padding-top:0px;
margin:30px;
margin-right:90px;
}
header{
background-color:blue;
height: 223px;
border-bottom:1px solid;

</style>

</head>
<body>
<header>
<div style="position:absolute;margin-left:400px;padding-top:50px;" >
<b><h1 style="position:absolute font-size:30pt;" > Bahria university Lahore</h1></b>
</div>

</header>

<div style="position:absolute;top:0px;margin-left:1200px;">
<img src="logo5.png" >
</div>

<div style="position:absolute;margin-left:30px;">
Email or Phone<input type="text" placeholder="email"/>
Password <input type="password" placeholder="password"/>
<br><br><br>
</div>
<div style="position:absolute;margin-left:0px;padding-top: 60px;">
<b><h1 style="position :absolute;font-size:20pt;"> Sign up</h1></b>
</div>

<div style="position:absolute;margin-left:30px;padding-top:110px;">
First Name<input type="text"/>
Page 7 of 8
%

Enrollment Number: 03-134192-012


Second Name <input type="password" />

</div>

<div style="position:absolute;margin-left:30px;padding-top:140px;">
Mobile<input style="margin-left:55px;"type="text"/>
</div>

<div style="position:absolute;margin-left:30px;padding-top:170px;">
Email<input style="margin-left:63px;"type="email"/>
</div>

<div style="position:absolute;margin-left:30px;padding-top:200px;">
Date of Birth<input style="margin-left:40px;"type="date"/>
</div>

<div style="position:absolute;margin-left:30px;padding-top:250px;">
Gender<input style="margin-left:20px;"type="radio" >Male
<input style="margin-left:50px;"type="radio" >Female

</div>

<div style="position:absolute;margin-left:1000px;padding-top:50px;">
<img src="download.jpg">
</div>

<div style="position :absolute;margin-left:700px;padding-top:300px;">


<input type="Submit" value="Create an account" style="background-color:blue;border-
color:1px solid black;">
</div>

</body>

</html>

Page 8 of 8

You might also like