Cs-344: Web Engineering: Dr. Qaiser Riaz

CS-344: WEB ENGINEERING
Dr. Qaiser Riaz qaiser.riaz@seecs.edu.pk
BESE-10AB Lecture-3AB Fall-2021
School of Electrical Engineering and Computer Science (SEECS)

National University of Science and Technology (NUST)
2
Outline
• Designing a Web Page
• Using HTML DIVs
• Cascading Style Sheets - CSS

HTML – Fundamentals: Tables
• Tables are frequently used to layout the basic web page design .
1280
640 3
4
Assignment # 1
• HTML is the standard language which is widely used over world
wide web
• Over the passage of time, various versions of HTML have been
released.
• HTML5 is the latest version of HTML which is adapted by W3C in
2008.
• Your task
• Write a detailed report on HTML5 including
• What are the new features/tags introduced in HTML5
• A comparison with HTML4: What is no more supported in
HTML5
• Report must include at least 10 pages
• It’s a group task
• Important: Feel free to browse online literature to search for
related content but your report must be your own work. A
similarity index of above 20% will get a straight ‘0’.
• Deadline: 9th of Feb 11:59pm.
5
Division (DIV)
• Defines a division or a section in an HTML document
• A generic container for blocks of content, such as images

and paragraphs of text etc.
• Used purely to imply a logical grouping of enclosed

elements
• Very often used together with CSS, to layout a web page
• By default, browsers always place a line break before

and after the <div> element
• However, this can be changed with CSS
6
Simple DIV
<div style="border: 1px solid gray;">

<h2> Div 1 </h2>
<p> a paragraph </p>
</div>
<div> Div 2 </div>
<div style="border: 1px solid gray;"> Div 3 </div>
<div> Div 4 </div>

7
Simple DIV
<div style="border: 1px solid gray; color=blue;">

<h2> Div 1 </h2>
</div>
<div> Div 2 </div>
<div > Div 4 </div>

8
Simple DIV
<div style="border: 1px solid gray; color=blue; text-align:center;">

<h2> Div 1 </h2>
</div>
<div> Div 2 </div>
<div > Div 4 </div>

9
Style <style> Tag

• Defines styles information for an HTML document
• Inside the <style> element you specify how HTML
elements should render in a browser
• Each HTML document can contain multiple <style> tags
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
10
DIV + Style – Using Class

<html><head>
<style type="text/css">
.block {
position: absolute;
top: 50px;
left: 200px;
width: 120px;
padding: 10px;
border: 1px solid;
text-align: center;
}
</style> </head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div class="block">
1
</div> </body>
11
Position Property – CSS

• The position property specifies the type of positioning
method used for an element (static, relative, absolute or
fixed).
12
DIV – Float
• Float is a CSS position property
• The float property specifies whether or not an element should float
• In its simplest use, the float property can be used to wrap text
around images.
• E.g. style=“float: right;”
13
DIV – Float
<style type="text/css"> <div class="left">

.left { 1
float: left; </div>
width: 120px;
padding: 10px; <div class="left">
border: 1px solid; 2
} </div>
.right { <div class="right">

float: right; 3
width: 120px; </div>
padding: 10px;
border: 1px solid; <div class="right">
} 4
</style> </div>
14
DIV – Clear
• Another CSS positioning property
• The clear property is used to control the behavior of

floating elements
• Elements after a floating element will flow around it.

To avoid this, use the clear property.
• The clear property specifies on which sides of an

element floating elements are not allowed to float
• E.g. style=“clear: left;”
DIV – Clear
15
<style type="text/css"> <div class="left">

.left {
1
float: left;
padding: 10px;
border: 1px solid; <div class="left">
} 2
</div>
.right {
float: right; <div class="clear"></div>
width: 120px;
padding: 10px;
<div class="right">
border: 1px solid;
} 3
</div>
.clear {clear: left;}
<div class="right">
</style> 4 </div>
16
DIV inside DIV

<style type="text/css"> <div class="container">
.container { <div class="left">
width: 300px; 1
padding: 10px; </div>
border: 1px solid;
} <div class="left">
.left { 2
float: left; </div>
width: 120px;
border: 1px solid;
text-align: center;
}
</style>
17
DIV inside DIV

<style type="text/css"> <div class="container">
.container { <div class="left">
width: 300px; 1
border: 1px solid;
} <div class="left">
.left { 2
float: left; </div>
width: 120px; <div class="clear"></div>
border: 1px solid;
text-align: center;
}
.clear{ clear: left; }
</style>
18
DIV Float – Without Clear

<style type="text/css"> <div class="header">
.content { border: 1px solid; Div 1
text-align: left; width: 250px; </div>
float: left;
}
<div class="menu">
.header { border: 1px solid; Menu 1<br />
text-align: left; width: 400px; Menu 2<br />
float: left; Menu 3
} </div>
.menu { border: 1px solid; <div class="content">

text-align: center; Div 3
width: 150px; float: left; </div>
}
</style>
19
DIV Float – With Clear

float: left;
clear: left;
} <div class="menu">
Menu 1<br />
text-align: left; width: 400px; Menu 3
float: left; </div>
}
<div class="content">
.menu { border: 1px solid; Div 3
text-align: center; </div>
width: 150px; float: left;
}
</style>
20
DIV Float – With Clear + Right Float

float: right;
clear: left;
} <div class="menu">
Menu 1<br />
text-align: left; width: 400px; Menu 3
float: left; </div>
}
<div class="content">
.menu { border: 1px solid; Div 3
text-align: center; </div>
width: 150px; float: left;
}
</style>
21
DIVs Side by Side – Different Widths

<style type="text/css"> <div class="left1">
.left1 { Menu 1<br />
border: 1px solid; Menu 2<br />
text-align: center; Menu 3
float: left;
} <div class="left2">
Lorem ipsum dolor sit amet,
.left2 { consectetuer adipiscing elit.
border: 1px solid; Aliquam commodo, magna vitae
text-align: left; egestas sodales, massa purus
width: 250px; auctor diam, sed mattis turpis ac
float: left; arcu. Phasellus sed neque. Nulla
} facilisi. Maecenas mollis scelerisque
</style> nisi. </div>
22
DIVs Side by Side – Header

.content { Header </div>
border: 1px solid;
text-align: left; width: 250px; <div class="clear"></div>
float: left; }
<div class=“menu">
.clear{ clear: left; } Menu 1 <br />
Menu 2 <br />
.header { Menu 3 </div>
border: 1px solid;
text-align: left; width: 400px; <div class=“content">
float: left; } Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
.menu { Aliquam commodo, magna vitae
border: 1px solid; egestas sodales, massa purus
text-align: center; auctor diam, sed mattis turpis
width: 150px; float: left; ac arcu. Phasellus sed neque.
} </div>
</style>
23
DIVs Side by Side – Header

.content { Header </div>
border: 1px solid;
text-align: left; width: 250px; <div class="clear"></div>
float: left; }
<div class=“menu">
.clear{ clear: left; } Menu 1 <br />
Menu 2 <br />
.header { Menu 3 </div>
border: 1px solid;
text-align: left; width: 400px; <div class=“content">
float: left; } Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
.menu { Aliquam commodo, magna vitae
border: 1px solid; egestas sodales, massa purus
text-align: center; auctor diam, sed mattis turpis
width: 150px; float: left; ac arcu. Phasellus sed neque.
} </div>
</style>
24
DIV – Text Wrapping

<style type="text/css"> <div style="border: 1px solid;">
.right { <div class="right">
border: 1px solid; 1
float: right; </div>
height: 40px; Lorem ipsum dolor sit amet, consectetuer
width: 100px; adipiscing elit. Donec massa magna, ultricies vel,
text-align: center; bibendum vel, ornare eget, lacus. kums sociis
} natoque penatibus et magnis dis parturient
</style> montes, nascetur ridiculus mus. Aenean diam
massa, ultrices nec, pharetra a, faucibus ac, ante.
Quisque quis felis. Duis scelerisque aliquam urna.
Phasellus rhoncus, lacus consectetuer
pellentesque venenatis, ipsum est bibendum sem,
vel ultricies urna mauris eget lorem. kums sociis
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Aenean diam
massa, ultrices nec, pharetra a, faucibus ac, ante.
Quisque quis felis.
</div>
25
WEB PAGE LAYOUT – DIV

26
Layout we are looking for!

27
Basic Skeleton
<div style="width:90%; margin:auto; border:1px solid black;">
<div style="text-align:center; padding:10px; border-bottom: 1px solid
black;">HEADER SECTION </div>

black;">NAVIGATION BAR SECTION </div>
<div style="width:100%">
<div style="float:left; width:20%;height:350px;border-right: 1px solid
black;">SIDE BAR </div>
<div style="float:left; ">CONTENT AREA</div>
<br style="clear: left;" />
</div>
<div style="text-align:center; padding:10px; border-top: 1px solid

black;">FOOTER SECTION </div>
</div>
28
Basic Skeleton
<div style="width:90%; margin:auto; border:1px solid black;">
black;">HEADER SECTION </div>

black;">NAVIGATION BAR SECTION </div>
<div style="width:100%">
<div style="float:left; width:20%;height:350px;border-right: 1px solid
black;">SIDE BAR </div>
<div style="float:left; ">CONTENT AREA</div>
<br style="clear: left;" />
</div>
<div style="text-align:center; padding:10px; border-top: 1px solid

black;">FOOTER SECTION </div>
</div>

Cs-344: Web Engineering: Dr. Qaiser Riaz

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cs-344: Web Engineering: Dr. Qaiser Riaz

Uploaded by

Copyright:

Available Formats

CS-344: WEB ENGINEERING

Dr. Qaiser Riaz qaiser.riaz@seecs.edu.pk

BESE-10AB Lecture-3AB Fall-2021

School of Electrical Engineering and Computer Science (SEECS)

• Using HTML DIVs

• Cascading Style Sheets - CSS

• A generic container for blocks of content, such as images

• Used purely to imply a logical grouping of enclosed

• Very often used together with CSS, to layout a web page

• By default, browsers always place a line break before

<div style="border: 1px solid gray;">

<div> Div 2 </div>

<div style="border: 1px solid gray;"> Div 3 </div>

<div> Div 4 </div>

<div style="border: 1px solid gray; color=blue;">

<div> Div 2 </div>

<div style="border: 1px solid gray;"> Div 3 </div>

<div > Div 4 </div>

<div style="border: 1px solid gray; color=blue; text-align:center;">

<div> Div 2 </div>

<div style="border: 1px solid gray;"> Div 3 </div>

<div > Div 4 </div>

Style <style> Tag

DIV + Style – Using Class

Position Property – CSS

• The float property specifies whether or not an element should float

<style type="text/css"> <div class="left">

.right { <div class="right">

• The clear property is used to control the behavior of

• Elements after a floating element will flow around it.

• The clear property specifies on which sides of an

<style type="text/css"> <div class="left">

DIV inside DIV

DIV inside DIV

DIV Float – Without Clear

.menu { border: 1px solid; <div class="content">

DIV Float – With Clear

DIV Float – With Clear + Right Float

DIVs Side by Side – Different Widths

DIVs Side by Side – Header

DIVs Side by Side – Header

DIV – Text Wrapping

WEB PAGE LAYOUT – DIV

Layout we are looking for!

<div style="text-align:center; padding:10px; border-bottom: 1px solid

<div style="text-align:center; padding:10px; border-top: 1px solid

<div style="text-align:center; padding:10px; border-bottom: 1px solid

<div style="text-align:center; padding:10px; border-top: 1px solid

You might also like