Div in HTML
To familiarize the students with the use of Div‟s and the use of CSS for designing page layout
After this lab the students should be able to use the DIV tag and the use of CSS for page layout designing
Introduction
The div tag is used to define a division or section in an HTML document. It visually, allows us to
make containers that can be formatted. It can be declared as: <div>……</div>. We use div and CSS to design a page layout. The div tag is used to represent sections in a page and CSS is used to style these sections. We can describe the process of designing a page as
- Determine the requirements of the site
- Group the required information
- Make a site map
- Identify key elements for each page
- Decide about the arrangement of information on each page
- Translate the design into code
Lab Activities:
Activity 1:
Use div and CSS properties to design a page layout which contains
- a header section to display the title, style this title with CSS
- a form container which contains a registration form, use CSS to style the elements of the form
- a footer section
Solution:
External CSS
body {
background-color: lightblue;
}
h1 {
color: navy; margin-left: 20px; font-family: verdana;
font-size: 50px;
}
#para1 {
text-align: center; color: red;
}
.center {
text-align: center; color: yellow;
}
<html>
<head>
<title>Using divs</title>
</head>
<body>
<div>
<div style=”width:100px;backround-color:gray”>First</div>
<div style=”width:100px;backround-color:red”>second</div>
</div>
</body>
</html>
Home Activities:
Activity 2:
Design the web template given below using tables and external CSS
Assignment:
Design the web page for Comsats Alumni using External CSS
