Scribd
Upload
3 views32 pages

Internet Technology and web page design

The document is a practical file for web technology, detailing various HTML exercises conducted on specific dates. It includes tasks such as creating HTML pages with text formatting, tables, frames, forms, and using CSS for styling. The file also demonstrates JavaScript functionalities like alert and prompt messages, along with basic arithmetic operations using functions.

Uploaded by

Abhay Damalu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views32 pages

Internet Technology and web page design

The document is a practical file for web technology, detailing various HTML exercises conducted on specific dates. It includes tasks such as creating HTML pages with text formatting, tables, frames, forms, and using CSS for styling. The file also demonstrates JavaScript functionalities like alert and prompt messages, along with basic arithmetic operations using functions.

Uploaded by

Abhay Damalu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

WEB TECHNOLOGY PRACTICAL FILE

INDEX
S.NO DATE
Page TITLE
1. 01/03/21
3 Create html page using basic text formatting tags,
image tags.
2. 08/03/21
5 Create a table using html.
3. 15/03/21
8 Create a nesting of frame using html.
4. 25/03/21
11 Create a webpage in html using iframe tags.
5. 01/04/21
12 Create a list using html.
6. 08/04/21
13 Create a form using html.
7. 22/04/21
15 Create a html page using div tag.
8. 26/04/21
17 Create html page using inline style tag.
9. 29/04/21
18 Create html page using internal style tag.
10. 03/05/21
19 Create html page using external style tag.
11. 17/05/21
20 Wap to demonstrate alert message box.
12. 24/05/21
22 Wap to demonstrate prompt message.
13. 27/05/21
24 Wap to add two numbers using function and button on
click event.
14. 03/06/21
26 Wap to change the style of a text.
15. 07/06/21
27 WAP to find factorial using functions.
16. 11/06/21
29 Write a xml, css and internal dtd file to validate xml
file.
17. 14/06/21
31 Write a xml, css and external dtd file to validate xml
file.

ABHISHEK RAI 2
WEB TECHNOLOGY PRACTICAL FILE

1. Create html page using basic text formatting tags, image tags.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body >
<small><font align = left>Web Technology Project</small>
<font color="#FF7F50" face="Georgia" size ="5"><h1><center><strong><u><b>HTML
Introduction</b></u></strong></center></h1></font>
<font face="Georgia" size ="4" ><b><mark>HTML is the standard markup language for
creating webpages.</mark></b></font>
<font face ="Georgia" color = "black" size="4">
<font color="Black" face="Georgia" size="5">
<br>
<pre><i><b><strong><em>What is HTML?</em></strong></b></i></font>
1.Html stands for HyperText Markup Language <del>does</del>.
2.Html is the standard markup language used for creating webpages.
3.Html <ins>describes</ins> the structure of a web page.
4.Html consists series of elements.
5.Html tells the browser how to display the content.
6.Html elements label pieces of content such as "this is a heading", "this is a paragraph", "this is
a link", etc.</font>
<br>
<dl>
<dt><font face = "Georgia" color ="black" size = "4">DOCTYPE HTML
Tag</dt></font>
<dd><font face = "Georgia" color = "black" size="4"><sub>Doctype stands for
Document Type Declaration.</sub><br><sup> It informs the web browser about the type and
version of HTML used in building the web document.<br> This helps the browser to handle and
load it properly.<br> While the HTML syntax for this statement is somewhat simple, you must
note each version of HTML has its own rules.</sup></font></dd>
<dt><font face = "Georgia" color ="black" size = "4">HTML Tag</dt></font>
<dd><font face = "Georgia" color = "black" size="4"><sub>HTML tags are used to
create HTML documents and render their properties.</sub><br><sup> Each HTML tags have
different properties.<br> An HTML file must have some essential tags so that web browser can
differentiate between a simple text and HTML text.</sup></font></dd>
<dt><font face = "Georgia" color ="black" size = "4">HEAD Tag</dt></font>

ABHISHEK RAI 3

3
WEB TECHNOLOGY PRACTICAL FILE

<dd><font face = "Georgia" color = "black" size="4"><sub>The head element is a


container for metadata (data about data) and is placed between the "html" tag and the "body"
tag.</sub><br><sup>Metadata is data about the HTML document.<br>Metadata is not
displayed. Metadata typically define the document title, character set, styles, scripts, and other
meta information.</sup></font></dd>
</dl>
<p><font face = "Georgia" color="black" size="4"><sup>
Hypertext Markup Language (HTML) is the standard markup language for documents designed
to be displayed in a web browser.<br>It can be assisted by technologies such as Cascading Style
Sheets (CSS) and scripting languages such as JavaScript.
Language paradigms: Markup language.</sup></font>
<a href="https://www.w3schools.com/html/html_intro.asp"><font face="Georgia" color =
"black" size = "3"><br>For more info click the here</a>
</p>
</pre>
</body>
</html>

OUTPUT: -

ABHISHEK RAI 4

4
WEB TECHNOLOGY PRACTICAL FILE

2. Create a table using html.

<!DOCTYPE html>
<html>
<head>
<title>Q3</title>
</head>
<body>
<table border ="5" width="150"
cellpadding="10">
<caption>A complex table</caption>
<thead>
<tr>
<th colspan="3">Invoice #123456789</th>
<th>14 January 2025
</tr>
<tr>
<td colspan="2">
<strong>Pay to:</strong><br>
Acme Billing Co.<br>
123 Main St.<br>
Cityville, NA 12345
</td>
<td colspan="2">
<strong>Customer:</strong><br>
John Smith<br>
321 Willow Way<br>
ABHISHEK RAI 5

5
WEB TECHNOLOGY PRACTICAL FILE

Southeast Northwestershire, MA 54321


</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name / Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Subtotal</th>

ABHISHEK RAI 6

6
WEB TECHNOLOGY PRACTICAL FILE

<td> 110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td> 8% </td>
<td>8.80</td>
</tr>
<tr>
<th colspan="3">Grand Total</th>
<td>$ 118.80</td>
</tr>
</tfoot>
</table>
</body>
</html>

OUTPUT: -

ABHISHEK RAI 7

7
WEB TECHNOLOGY PRACTICAL FILE

3. Create a nesting of frame using html.


<!DOCTYPE html>
<html>

ABHISHEK RAI 8

8
WEB TECHNOLOGY PRACTICAL FILE

<head>
</frameset>
<frameset rows="80%,20%">
<frame src="list.htm">
<frame src="form.html">
</frameset>
</frameset>
<body>
</body>
</html>

OUTPUT: -

ABHISHEK RAI 9

9
WEB TECHNOLOGY PRACTICAL FILE

ABHISHEK RAI 10

10
WEB TECHNOLOGY PRACTICAL FILE

4. Create a webpage in html using iframe tags.


<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "C:\Users\coolr\Desktop\mohit2.html" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>

OUTPUT: -

5. Create a list using html.


<!DOCTYPE html>

ABHISHEK RAI 11

11
WEB TECHNOLOGY PRACTICAL FILE

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>

xt Transfer Protocol</dd>
</dl>
</body>
</html>

OUTPUT: -

ABHISHEK RAI 12

12
WEB TECHNOLOGY PRACTICAL FILE

6. Create a form using html.


<!DOCTYPE html>
<html>

ABHISHEK RAI 13

13
WEB TECHNOLOGY PRACTICAL FILE

<head>
<title>FORMS</title>
</head>
<h1><center><font face="Verdana" color="black" ><b>FILL THE FORM WITH CORRECT
INFORMATION.</b></center></h1>
<body bgcolor = "white"><br><br><br>
<form > <center>
FIRSTNAME<input type="text" name="FIRST_NAME" value="F_name"><br> <br>
LASTNAME<input type="text" name="LAST_NAME" value="L_name"><br> <br>
PASSWORD<input type="PASSWORD" ><br> <br>
GENDER<input type="radio" name="gender" value="male"> MALE
<input type="radio" name="gender" value="female"> FEMALE<br><br>
LANGUAGES KNOWN<br><br><input type="checkbox" > HINDI
<input type="checkbox" > ENGLISH
<input type="checkbox" > FRENCH
<input type="checkbox" > GERMAN<br><br>
ADDRESS
<textarea></textarea> <br><br><br>
<input type = "submit">
</font>
</center>
</form>
</body>
</html>

OUTPUT: -

ABHISHEK RAI 14

14
WEB TECHNOLOGY PRACTICAL FILE

7. Create a html page using div tag.

ABHISHEK RAI 15

15
WEB TECHNOLOGY PRACTICAL FILE

<html>
<head>
<title>Div</title>
<style type=text/css>
p{
background-color:black;
margin: 10px;
}
div
{
color: white;
background-color: gray;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div > maths </div>
<div >java </div>
<div > web technology </div>
<div > Computer networks </div>
</body>
</html>

OUTPUT: -

ABHISHEK RAI 16

16
WEB TECHNOLOGY PRACTICAL FILE

8. Create html page using inline style tag


<!DOCTYPE html>

ABHISHEK RAI 17

17
WEB TECHNOLOGY PRACTICAL FILE

<html>
<head>
<style>
h1 {color:yellow;}
p {color:green;}
</style>
</head>
<body>
<h1>INLINE STYLE TAG</h1>
<p>AN INLINE CSS IS USED TO APPLY UNIQUE STYLE TO A SINGLE HTML
ELEMENT. </p>
</body>
</html>

OUTPUT: -

9. Create html page using internal style tag.


<!DOCTYPE html>

ABHISHEK RAI 18

18
WEB TECHNOLOGY PRACTICAL FILE

<html>
<head>
<style>
body{background-color:black;}
.myclass{ color: white;}
#myid{color:lime;}
</style>
</head>
<body>

OUTPUT: -

10. Create html page using external style tag.


/*external.css*/
body{background-color:brown;}
.myclass{ color: orange; }
#myid{color:lime;align:center; font-style:italic;}
p{align:center; font-family:times New Roman; font-style:italic;}

ABHISHEK RAI 19

19
WEB TECHNOLOGY PRACTICAL FILE

<!--external.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href= "external.css">
</head>
<body>
<h2 id= "myid">External Css</h2>
<p class= "myclass">AN EXTENAL CSS IS SEPARATE FILE LINKED TO AN HTML
WEBPAGE.</p>
</body>
</html>

OUTPUT: -

11 . Wap to demonstrate alert message box.

<!DOCTYPE html>
<html>
<head>
<title>
Window alert() Method in HTML
</title>
ABHISHEK RAI 20

20
WEB TECHNOLOGY PRACTICAL FILE

<style>
h1 {
color: Blue;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>JIMS</h1>
<p>
For displaying the alert message, double
click the "Show Alert Message" button:
</p>
<button ondblclick="myalert()">
Show Alert Message
</button>
<script>
function myalert() {
alert("Welcome to HIMACHAL PRADESH UNIVERSITY
CAMPUS.\n " +

"Shimla " +"Himachal Pradesh(HP)");

ABHISHEK RAI 21

21
WEB TECHNOLOGY PRACTICAL FILE

</script>
</body>
</html>

OUTPUT: -

12. Wap to demonstrate prompt message.


<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>

ABHISHEK RAI 22

22
WEB TECHNOLOGY PRACTICAL FILE

var a = prompt("Enter a digit:");


var i;
a = parseInt(a);
console.log(a);
for (i = 1; i <= 5; i++) {
a++;
console.log(a);
document.write("Next numbers is: ", a);
document.write("<br>");
}
</script>
</body>
</html>

OUTPUT: -

ABHISHEK RAI 23

23
WEB TECHNOLOGY PRACTICAL FILE

13. Wap to add two numbers using function and button on click event.
<!DOCTYPE html>
<html>
<head>

ABHISHEK RAI 24

24
WEB TECHNOLOGY PRACTICAL FILE

<title>Document</title>
</head>
<body bgcolor=”yellow”>
<script>
function add() {
var a, b, c;
a = parseInt(document.getElementById("1st element").value);
b = parseInt(document.getElementById("2nd element").value);
c = a + b;
document.getElementById("answer").value = c;
}
</script>
ENTER THE FIRST NUMBER: <input id="1st element"><br>
<br>
ENTER THE SECOND NUMBER: <input id="2nd element"><br>
<br>
<button
onclick="add()">ADD</button>;
<input id="answer">
</body>
</html>

OUTPUT: -

ABHISHEK RAI 25

25
WEB TECHNOLOGY PRACTICAL FILE

14. Wap to change the style of a text.

<!DOCTYPE html>
<html>
<body>
ABHISHEK RAI 26

26
WEB TECHNOLOGY PRACTICAL FILE

<p id = "p1">Hello World</p>


<p id = "p2">Hello World</p>
<script type="text/javascript">
document.getElementById('p2').style.color = "blue";
document.getElementById('p2').style.fontFamily = "Arial";
document.getElementById('p2').style.fontSize = "40";

</script>
</body>
</html>

OUTPUT: -

15 . WAP to find factorial using functions.

<!DOCTYPE html>

ABHISHEK RAI 27

27
WEB TECHNOLOGY PRACTICAL FILE

<html>
<head>
<title>Document</title>
</head>
<body>
<script>
function factorial(){
var n=parseInt(document.getElementById(“number”).value);
var fact=1;
for(i=n;i>1;i--)
{
fact=fact*i;
}
document.getElementById(“id”).innerHTML = fact;
}
</script>
ENTER A NUMBER <input id=”number”>
<button onclick=”factorial()”>Submit</button>
<p id =”id”></p>
</body>
</html>

OUTPUT: -

ABHISHEK RAI 28

28
WEB TECHNOLOGY PRACTICAL FILE

16.Write a xml file to display book info which includes : Title of Book, Author Name, Isbn
Number, Publisher Name, Edition & Price. Also write a css & internal dtd to validate the xml
file.
<?xml version=”1.0” encoding=”UTF-8”?>
<?xml-stylesheet type = “text/css” href = “o.css”?>
<!-- DTD -->
<!DOCTYPE onlinebooks [<!ELEMENT onlinebooks (book)*>
<!ELEMENT book (title,Author,ISBN,Publisher,Edition,Price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT Author (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT Publisher (#PCDATA)>
<!ELEMENT Edition (#PCDATA)>
<!ELEMENT Price (#PCDATA)>
]>
<!--internaldtd.XML -->
<onlinebooks>
<book>

ABHISHEK RAI 29

29
WEB TECHNOLOGY PRACTICAL FILE

<title>WT</title>
<Author>XYZ</Author>
<ISBN>123-456-678</ISBN>
<Publisher>LMN</Publisher>
<Edition>2021</Edition>
<Price>150/-</Price>
</book>
<book>
<title>SE</title>
<Author>ABC</Author>
<ISBN>783-956-648</ISBN>
<Publisher>PQR</Publisher>
<Edition>2020</Edition>
<Price>40,00,000/-</Price>
</book>

</onlinebooks>
/*o.CSS*/
onlinebooks{display:block;
font-family:times new roman;
color:red;
font-size:14pt;}

OUTPUT: -

ABHISHEK RAI 30

30
WEB TECHNOLOGY PRACTICAL FILE

17. Write a xml file to display book info which includes : Title of Book, Author Name, Isbn
Number, Publisher Name, Edition & Price. Also write a css & external dtd to validate the xml
file.
<!-- onlinebooks.DTD -->
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT onlinebooks (book)*>
<!ELEMENT book (title,Author,ISBN,Publisher,Edition,Price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT Author (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT Publisher (#PCDATA)>
<!ELEMENT Edition (#PCDATA)>
<!ELEMENT Price (#PCDATA)>

<!--onlinebooks.XML-->
<?xml version="1.0" encoding="UTF-8"?>

ABHISHEK RAI 31

31
WEB TECHNOLOGY PRACTICAL FILE

<!-- New XML document created with EditiX XML Editor (http://www.editix.com) at Mon May
17 00:17:03 GMT-07:00 2021 -->
<?xml-stylesheet type = "text/css" href = "o.css"?>
<!DOCTYPE onlinebooks SYSTEM "onlinebooks.dtd">
<!--onlinebooks.XML-->
<onlinebooks>
<book>
<title>WT</title>
<Author>XYZ</Author>
<ISBN>123-456-678</ISBN>
<Publisher>LMN</Publisher>
<Edition>2021</Edition>
<Price>150/-</Price>
</book>
<book>
<title>SE</title>
<Author>ABC</Author>
<ISBN>783-956-648</ISBN>
<Publisher>PQR</Publisher>
<Edition>2020</Edition>
<Price>40,00,000/-</Price>
</book>
</onlinebooks>

/*o.CSS*/
onlinebooks{display:block;
font-family:times new roman;

ABHISHEK RAI 32

32
WEB TECHNOLOGY PRACTICAL FILE

color:red;
font-size:14pt;}

OUTPUT: -

ABHISHEK RAI 33

33

You might also like