Scribd
Upload
8 views6 pages

Lab 03

lab manual

Uploaded by

Sidra Sami Khanzada
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
8 views6 pages

Lab 03

lab manual

Uploaded by

Sidra Sami Khanzada
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/ 6

Department of: Subject

Computer Systems Engineering WEB ENGINEERING


Mehran University of Engineering Year 3rd Semester 6th
&Technology 03
Jamshoro Batch 21CS Duration
Hours

PRACTICAL # 3
TO MANAGE THE DIV TAG & ITS ATTRIBUTES

The <DIV> tag is for Division, as in dividing or subdividing a Page into many Sections or
functional blocks, for example: Header, Footer, Navigation pane: Main Content pane: Right
Pane etc.
This HTML <DIV> tag is a container for other HTML items or elements. This HTML-Div Tag is
used to layout HTML elements on a page and can be used to group HTML Elements together.
Ultimately, we can say that <DIV> tag is container unit that encapsulates other page elements
and divides the HTML document into sections.
You can use the <DIV> Tag to layout your page, The other way to layout your HTML web page
is table. I would like to suggest you use Div tag for page payout.
Web designers use <DIV> elements to combine together HTML elements and implement CSS
styles to many elements at once. For instance, by covering a set of paragraph elements into a
<div> element, the designer can take advantage of CSS styles.
Designer can apply a design to all paragraphs at once by applying a design style to the <DIV>
tag instead of coding the same style for each paragraph element.
Within a <DIV>, you can you can nest and align A) Paragraphs B) Headings C) Lists D) Definitions
E) Pre-formatted text F) Images G) Tables etc. You can use the ALIGN attribute for Horizontal Text
Alignment.
Using the HTML Div Tag:
The following section demonstrates, how to use div tag to layout your page.

Listing 1: Simple script to display the content of div tag.


<html>
<body>
<div> This is first line. </div>
<div> This is second line. </div>
<div> This is third line. </div>
<div> This is fourth line. </div>
</body>
</html>
Figure 1: Above figure is out of script to display the content of div tag.

HTML Div Tag - Alignment and Style


First of all we will add border in each Div tag. We can do this by using in-line CSS. In-line CSS
is CSS inside HTML which is used for adding style to page

 This is done by adding style=” border: 1px solid red;” to each the div's tag. That will add a
red border to one html div.
 It should be kept in mind while designing website that as per requirement add the borders to
HTML div tags. You should also take care: what each div contains, where it starts and ends.
 HTML div’s alignment can be changed by using the align attribute. To align a div using the
align attribute E.g.

Listing 2: HTML- Div tag with align property.


<div align=”left”>”contents”</div>

 HTML Div tag can also be used to set layout width and Height, E.g. <div width:100px;
Height:100px;">

Following Script will clear the concept of use of align attribute and adding style

Listing 3: Script of HTML Div Tag Layout using the Align Attribute and adding Style
<html>
<body>
<div style="width:500px;">
<div align="center" width="400px;"style="border:9px solid green;">This is first
block</div>
<div align="left" width="400px;"style="border:9px solid red;">This is second
block</div>
<div align="right" width="400px;"style="border:9px solid blue;">This is third
block</div>
<div align="center" width="400px;"style="border:9px solid pink;">This is fourth
block</div>
<div align="center" bgcolor="green" width="900px;align="center"
style="border:9px solid red;background:black;color:white;">Last block !
Background is black</div>
</div>
</body>
</html>

Figure 2: The figure shows output of applying alignment and style property on Div tag

Note: If you will place<Div> elements or items inside of other <Div>elements, it will allow these
elements to be further subdivided. Following Script will clear the concept of subdivision.

Listing 4: HTML script for <DIV> inside </DIV>


<html>
<body>
<div style="width:600px;">
<div id="UgDiv" name="UgDiv" title="Div Element" style="font-family: Arial; font-
size: 15pt; border: 4px solid black;">
<div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color:
green; border: 7px solid red;">
<h5>paragraph 1</h5>
<p>This is block of first paragraph</p>
</div>
<br /><div id="subDiv2" name="subDiv2" title="Subdivision Div Element"
style="color: Blue;border: 4px dashed green;">
<h5>paragraph2</h5>
<p>This is block of second paragraph</p>
</div>
</body>
</html>

Figure 3: Output of subdivision script of div tag.


LAB TASKS

Task # 4: Make a webpage which look likes as shown below;

Task # 2:

1. Create several divs of various widths, heights, and colors. Use margin to push them
around the page.
2. Make some of the <div>'s into links (anchors). Then, make the background color of the
div change on mouse over.
3. Try to position some of the <div>'s relatively in a vertical line down the middle of the page.
4. Create a class that you can use with <span> tags to make certain text twice the default
size.

Marks Obtained
Rubrics
0 1
Completeness & Accuracy

Timelines

Student ID:

Subject Teacher:

Date:

You might also like