Scribd
Upload
2 views

assignment 1chapter 4

This document contains multiple web design and development assignments submitted by students Tahreem Rafaqat and Amna Altaf. It includes various HTML and JavaScript programs demonstrating different web development concepts such as XHTML structure, links, images, and user interaction through prompts and alerts. Each program is presented with its corresponding code and intended output.

Uploaded by

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

assignment 1chapter 4

This document contains multiple web design and development assignments submitted by students Tahreem Rafaqat and Amna Altaf. It includes various HTML and JavaScript programs demonstrating different web development concepts such as XHTML structure, links, images, and user interaction through prompts and alerts. Each program is presented with its corresponding code and intended output.

Uploaded by

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

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:[email protected]">[email protected]</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:[email protected]">here</a>

to email me</p>
<p>All information on this site is <strong>&copy; of
pakaims &amp; 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: &lt; &frac14; 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:

You might also like