Scribd
Upload
2 views

chapter 5 assignment 2

The document is an assignment on web design and development by Tahreem Rafaqat, detailing multiple HTML programs demonstrating various styling techniques. Each program showcases different aspects of CSS, including inline styles, embedded styles, absolute positioning, and media types. The assignment includes code snippets for creating styled web pages with features like drop-down menus and background images.

Uploaded by

223317
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

chapter 5 assignment 2

The document is an assignment on web design and development by Tahreem Rafaqat, detailing multiple HTML programs demonstrating various styling techniques. Each program showcases different aspects of CSS, including inline styles, embedded styles, absolute positioning, and media types. The assignment includes code snippets for creating styled web pages with features like drop-down menus and background images.

Uploaded by

223317
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

WEB DESIGN AND

DEVELOPMENT
Assignment #02

Tahreem Rafaqat
Name

ID 223317

Semester 5th

Summited to Sir Sheraz Tariq


Program 1
Code:
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>This text does not have any style applied to it</p>
<p style="font-size: 20pt">This text has the <em>Font-size</em>
style applied to it ,making it 20 pt</p>
<p style="font-size: 20pt;color: #66f">This text has the <em>Font-size</em>
style applied to it ,making it 20 pt and blue color.</p>
</body>
</html>
Output:
Program 2
Code:
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Style Sheets</title>
<style type="text/css">
* em{
font-weight: bold;
color: black;
}

h1 {
font-family: Tahoma, Helvetica, sans-serif;
}

p{
font-size: 12pt;
font-family: Arial, sans-serif;
}

.special {
color: #6666ff;
}
</style>
</head>
<body>
<h1 class = "special">Deitel &amp; Associates, Inc.</h1>
<p>Deitel &amp; Associates, Inc. is an internationally
recognized corporate training and publishing organization
specializing in programming languages, Internet/World
Wide Web technology and object technology education.
The company provides courses on Java, C++, Visual Basic,
C#, C, Internet and World Wide Web programming, Object
Technology, and more.</p>

<h1>Clients</h1>
<p class = "special"> The company's clients include many
<em>Fortune 1000 companies</em>, government agencies,
branches of the military and business organizations.
Through its publishing partnership with Prentice Hall,
Deitel &amp; Associates, Inc. publishes leading-edge
programming textbooks, professional books, interactive
web-based multimedia Cyber Classrooms, satellite
courses and World Wide Web courses.</p>
</body>
</html>
Output:
Program 3
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>More Styles</title>
<style type="text/css">

body {
font-family: Arial, Helvetica, sans-serif;
}

a.nodec {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

em{
font-weight: bold;
text-decoration: underline;
}

h1{
text-decoration: underline;
}

ul {
margin-left: 20px;
}

ul {
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>Shopping list for Monday :</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White Bread</li>
<li>Whole Wheat Bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>Extra Cheese</em></li>
</ul>
<p><em>Go to the </em>
<a class="nodec" href="https://www.foodpanda.pk/darkstore/p3ag/pandamart"
title="FoodPanda Online Grocery Store">online Grocery Store</a>
</p>
</body>
</html>
Output:
Program 4
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Linking embedded sheet styles</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Shopping list for Monday :</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White Bread</li>
<li>Whole Wheat Bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>Extra Cheese</em></li>
</ul>
<p><em>Go to the </em>
<a class="nodec"
href="https://www.foodpanda.pk/darkstore/p3ag/pandamart" title="FoodPanda Online
Grocery Store">online Grocery Store</a>
</p>
</body>
</html>
Output:
Program 5
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Absolute Positioning</title>
<style type="text/css">
.bging{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.fging{
position: absolute;
top: 25px;
left: 100px;
z-index: 2;
}
.text{
position: absolute;
top: 25px;
left: 100px;
z-index: 3;
font-size: 20pt;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<p><img src="bging.png" class="bging" alt="First image Positioning"
/></p>
<p><img src="fging.png" class="fging" alt="Second image Positioning"
/></p>
<p class="text">Positioned Text</p>
</body>
</html>
Output:
Program 6
Code:
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Absolute Positioning</title>

<style type="text/css">

p { font-size: 1.3em;

font-family: verdana, arial, sans-serif }

span { color: red;

font-size: .6em;

height: 1em }

.super { position: relative;

top: -1ex }

.sub { position: relative;

bottom: -1ex }

.shiftleft { position: relative;

left: -1ex }

.shiftright { position: relative;

right: -1ex }

</style>

</head>

<body>

<p>The text at the end of this sentence

<span class="super">is in a superscript</span>.

</p>

<p>The text at the end of this sentence

<span class="sub">is in a subscript</span>.


</p>

<p>The text at the end of this sentence

<span class="shiftleft">is in a shifted left</span>.

</p>

<p>The text at the end of this sentence

<span class="shiftright">is in a shifted right</span>.

</p>

</body>

</html>

Output:
Program 7
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-images</title>
<style type="text/css">
body {
background-image: url(pakaims.png) ;
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #eeeeee;
}
p{
font-size: 18pt;
color: #1144AA;
text-indent: 1em;
font-family: Arial, Helvetica, sans-serif;
}
.dark{
font-weight: bold;
}
</style>
</head>
<body>
<p>
This example uses the background-image,
background-position and background-attachment
styles to place the <span class = "dark">Pak-aims
&amp; Institute of Management and Sciences, Inc.</span> logo in the bottom,
right corner of the page. Notice how the logo
stays in the proper position when you resize the
browser window. The background-color fills in where
there is no image.
</p>
</body>
</html>
Output:
Program 8
Code:
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Flowing Text Around Floating Elements</title>
<style type = "text/css">
div.heading { background-color: #bbddff;
text-align: center;
font-family: arial, helvetica, sans-serif;
padding: .2em }
p { text-align: justify;
font-family: verdana, geneva, sans-serif;
margin: .5em }
div.floated { background-color: #eeeeee;
font-size: 1.5em;
font-family: arial, helvetica, sans-serif;
padding: .2em;
margin-left: .5em;
margin-bottom: .5em;
float: right;
text-align: right;
width: 50% }
div.section { border: 1px solid #bbddff }
</style>
</head>
<body>
<div class="heading"><img src="pakaims.png" alt="Pakaims logo" /></div>
<div class="section">
<div class="floated">CS and BBA PRograms</div>
<p>Pak-aims &amp; Institute of Management and Sciences, Inc. is an internationally
recognized corporate training and publishing organization
specializing in programming languages, Internet/World
Wide Web technology and object technology education.
The company provides courses on Java, C++, Visual Basic, C#,
C, Internet and web programming, Object
Technology, and more.</p>
</div>

<div class = "section">


<div class = "floated">Leading-Edge Programming Textbooks</div>
<p>Through its publishing
partnership with Prentice Hall, Deitel &amp; Associates,
Inc. publishes leading-edge programming textbooks,
professional books, interactive CD-ROM-based multimedia
Cyber Classrooms, satellite courses and DVD and web-based
video courses.</p>
</div>
</body>
</html>
Output:
Program 9
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Media Types</title>
<style type="text/css">
@media all
{
body{ background-color: #4488aa;}
h1{ font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #aaffcc;}
p{ font-size: 12pt;
color: white;
font-family: Arial, Helvetica, sans-serif;}
}
@media print{
body{background-color: white;}
h1{color: #008844;}
p{ font-size: 14pt;
color: #4488aa;
font-family: 'Times New Roman', Times, serif;}
}
</style>
</head>
<body>
<h1>Css Medaia types examples</h1>
<p>
This example uses CSS media types to vary how the page
appears in print and how it appears on any other media.
This text will appear one font on the screen and a
different font on paper or in a print preview. To see
the difference in Internet Explorer, go to the Print
menu and select Print Preview. In Firefox, select Print
Preview from the File menu.
</p>

</body>
</html>
Output:
Program 10
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop Down Menu</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
}
div.menu{
font-weight: bold;
color: white;
border: 2px solid #22776ce3;
text-align: center;
width: 10em;
background-color: #22776ce3 ;
}
div.menu:hover a{ display: block;}
div.menu a{display: none;
border-top: 2px solid #22776ce3;
background-color: white;
width: 10em;
text-decoration: none;
color: black;}
div.menu:hover a{background-color: #dfeeff ;}
</style>
</head>
<body>
<div class="menu">
Menu
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Articles</a>
<a href="#">Contact</a>
</div>
</body>
</html>

Output:

You might also like