WEB DESIGN AND
DEVELOPMENT
Assignment #01
SUBMITTED BY:
Tahreem Rafaqat
ID: 223316
Amna Altaf
ID: 223317
SEMESTER:
5th
SUBMITTED TO:
Sir Sheraz Tariq
Program 1
<!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>Welcome</title>
</head>
<body>
<p> Hello and Welcome to XHTML!</p>
</body>
</html>
Output:
Program 2
<?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>Headings</title>
</head>
<body>
<h1>The Headings are: </h1>
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>
</body>
</html>
Output:
Program 3
<?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>Links</title>
</head>
<body>
<h1>Here are the links of the Sites </h1>
<p><strong>Click on the name to go on to the website given below :
</strong></p>
<p><a href = "https://www.w3schools.com"> w3schools</a></p>
<p><a href = "https://www.youtube.com"> Youtube</a></p>
<p><a href = "https://www.pinterest.com"> Pinterest</a></p>
<p><a href = "https://github.com"> Github</a></p>
</body>
</html>
Output:
Program 4
<?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>Contacts</title>
</head>
<body>
<p>My email is
<a href = "mailto:223305@pakaims.edu.pk">223305@pakaims.edu.pk</a>
click the email address and it will open email messgae and send it to
me</p>
</body>
</html>
Output:
Program 5
<?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>Images</title>
</head>
<body>
<p><img src="Web programming.jpg" width="92" height="120" alt="Web
Programming Book cover"/> <img src="" width="92" height="120"
alt="How to program java"/></p> </body>
</html>
Output:
Program 6
<?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>Navigation Bar</title>
</head>
<body>
<p>
<a href="Links.html">
<img src="Links.jpg" width="140" height="100" alt="Links page">
</a>
<a href="Contacts.html">
<img src="Contacts.jpg" width="140" height="100" alt="Contacts
page"> </a>
<a href="Books.html">
<img src="Books.jpg" width="140" height="100" alt="Books page">
</a>
</p>
</body>
</html>
Output:
<?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>Contacts</title>
</head>
<body>
<p>Click
<a href = "mailto:223305@pakaims.edu.pk">here</a>
to email me</p>
<p>All information on this site is <strong>© of
pakaims & Associates, Inc. 2004.</strong></p>
<p><del>You may download 3.14 x 10<sup>2</sup>
characters worth of information from this site.</del>
Only <sub>one</sub> download per hour is permitted.</p>
<p><em>Note: < ¼ of the information
presented here is updated daily.</em></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>Links</title>
</head>
<body>
<h1>Here are the links of the Sites </h1>
<p><strong>Click on the name to go on to the website given below : </strong></p>
<ul>
<li><a href = "https://www.w3schools.com">
w3schools</a></li>
<li><a href = "https://www.youtube.com"> Youtube</a></li>
<li><a href = "https://www.pinterest.com"> Pinterest</a></li>
<li><a href = "https://github.com"> Github</a></li>
</ul>
</body>
Program 1
Code:
<!DOCTYPE html>
<html>
</html>
Output:
WEB DESIGN AND
Program 2
Code:
<!DOCTYPE html>
<html>
DEVELOPMENT
Assignment #03
Tahreem Rafaqat
Name
ID 223317
Semester 5th
Summited to Sir Sheraz Tariq
<head>
<title>Welcome to JS Program</title>
<script type="text/javascript">
document.writeln(
"<h1>Welcome to JS first program!! <br> Web programming is amazing.</h1>"
);
</script>
</head>
</html>
Output:
Program 3
Code:
<!DOCTYPE html>
<html>
<head>
<title>Printing line with multiple statements</title>
<script type="text/javascript">
document.writeln("<h1 style =\"color :magenta\">");
document.writeln("Welcome to JS first program!! <br> Web programming is
amazing.</h1>");
</script>
</head>
</html>
Output:
Program 4
Code:
<!DOCTYPE html>
<html>
<head>
<title>Using prompt and Alert Boxes</title>
<script type="text/javascript"> var name; name =
window.prompt("Please Enter your name here :"); document.writeln("<h1
Program 5
Code:
<!DOCTYPE html>
<html>
style=\"color: blue\">"); document.writeln("Hello, "+ name + " And welcome to
JS programming</h1>");
</script>
</head>
</html>
Output
Program 4
Code:
<!DOCTYPE html>
<html>
<head>
<title>An Addition program</title>
<script type="text/javascript">
var firstnum; var Secondnum;
var Thirdnum; var num1;
var num2; var num3; var
sum;
firstnum = window.prompt("Enter the first integer :");
Secondnum = window.prompt("Enter the second integer :");
Thirdnum = window .prompt("Enter the Third integer:");
num1 = parseInt(firstnum);
num2 = parseInt(Secondnum);
num3 = parseInt(Thirdnum);
sum = num1 + num2 + num3; document.writeln("<h1> The sum of the
three integers are " + sum + " </h1>"); </script>
<body>
<p>click reload to run the script again.</p>
</body>
</head>
</html>
Output:
Program 5
Code:
<!DOCTYPE html>
<html>
<head>
<title>Using Relational Operators</title>
<script type = "text/javascript">
var name; // string entered by the user var
now = new Date(); // current date and time var
hour = now.getHours(); // current hour (0-23)
name = window.prompt( "Please enter your name" );
if ( hour < 12 )
document.write( "<h1>Good Morning, " );
if ( hour >= 12 )
{
// convert to a 12-hour clock
hour = hour - 12;
if ( hour < 6 )
document.write( "<h1>Good Afternoon, " );
if ( hour >= 6 )
document.write( "<h1>Good Evening,
" ); } // end if
document.writeln( name +
", welcome to JavaScript programming!</h1>" );
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
Output:
