Scribd
Upload
371 views43 pages

Web Technology Lab

The document describes creating HTML programs to demonstrate various HTML tags and concepts. It includes 6 sections that provide the code and output for programs covering: 1. Text formatting tags 2. A webpage about a family using hyperlinks 3. Different list types using <ol>, <ul>, and <dl> tags 4. A student details table 5. A wildlife information site using frames 6. An HTML form using various <input> tags Each section provides the aim, description, algorithm, source code, and output for the example program.

Uploaded by

venkata rama krishna rao junnu
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
371 views43 pages

Web Technology Lab

The document describes creating HTML programs to demonstrate various HTML tags and concepts. It includes 6 sections that provide the code and output for programs covering: 1. Text formatting tags 2. A webpage about a family using hyperlinks 3. Different list types using <ol>, <ul>, and <dl> tags 4. A student details table 5. A wildlife information site using frames 6. An HTML form using various <input> tags Each section provides the aim, description, algorithm, source code, and output for the example program.

Uploaded by

venkata rama krishna rao junnu
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/ 43

1.

TEXT FORMATTING

Aim: To write a HTML program using Text Formatting Tags.

Description:

 In this program, we are going to develop the formatting using different types of
text tags.
 We can use some techniques for text formatting tags like <p>(paragraph),
<pre>(preformatted with white space) etc.

Procedure:

 Start the program.


 Go to the start menu and select accessories for notepad.
 Type the source code in notepad and save it in the form of filename.html format
 To run the program, we must follow the following steps
 Start  Internet Explorer  File  Open  Browser  and select the file and
click OK, then the webpage will be displayed.

Algorithm:

Step 1: Start

Step 2: <p> used for paragraph.

Step 3: <i> used for italic.

Step 4: <b> used for bold.

Step 5: <u> used for underline.

Step 6: <div> used for division.

Step 7: <pre> used for preformatted text.

Step 8: Stop.
SOURCE CODE:-

<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<h3 align="center"><b><u>Text Formatting</u></b></h3>
The Text is <p>paragraph</p><br>
The Text is <pre>preformatted</pre><br>
The Text is <b>bold</b><br>
The Text is <i>italic</i><br>
The Text is <u>underline</u><br>
The Text is <big>big</big><br>
The Text is <small>small</small><br>
The Text is <strong>strong</strong><br>
The Text is <h1>heading1</h1><br>
The Text is <div>div</div><br>
The Text is <em>emphasis</em><br>
The Text is <strike>strike</strike><br>
</body>
</html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


2.ABOUT MY FAMILY

Aim: To create a HTML program for about my family using hyperlink.

Description:

 In this program, we can develop the webpage about my family.


 We use Hyperlinks and image for this webpage.

Algorithm:

Step 1: Start.

Step 2: Create father.html. In this file, we are using <p> paragraph tag and <img>
tag.

Step 3: Create mother.html. In this file, we are using <p> paragraph tag and
<img> tag.

Step 4: Create sister.html. In this file, we are using <p> paragraph tag and <img>
tag.

Step 5: Create brother.html. In this file, we are using <p> paragraph tag and
<img> tag.

Step 6: After creating sub files, create the main document. It has hyperlinks as the
sub files.

Step 7: Stop.
SOURCE CODE:-

<html>
<head>
<title>About My Family</title>
</head>
<body>
<h1>My Father Name is <u><a href="father.html">KRISHNA</a></u></h1>
<h1>My Mother Name is <u><a href="mother.html">RADHA</a></u></h1>
<h1>My Sister Name is <u><a href="sister.html">MENAKA</a></u></h1>
<h1>My Brother Name is <u><a href="brother.html">RAHUL</a></u></h1>
</body>
</html>

OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


FATHER

SOURCE CODE:-

<html>
<head>
<title>My Father</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\father.jpg" height="200"
width="200">
<p>He is my Father,a Philosopher.</p>
</body>
</html>

OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


MOTHER

SOURCE CODE:-

<html>
<head>
<title>My Mother</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\mother.jpg" height="200"
width="200">
<p>She is my Mother,a Bank Manager.</p>
</body>
</html>

OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


SISTER

SOURCE CODE:-

<html>
<head>
<title>My Sister</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\sister.jpg" height="200"
width="200">
<p>She is my Sister.She is studying.</p>
</body>
</html>

OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


BROTHER

SOURCE CODE:-

<html>
<head>
<title>My Brother</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\brother.jpg" height="200"
width="200">
<p>He is my brother.</p>
</body>
</html>

OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


3.LISTS

Aim: To write a html program which illustrates different types of list.

Description:

 In this program, we can develop different types of list.


 We are using Ordered list <ol>, Unordered list <ul> and Definition list <dl> tags.

Algorithm:

Step 1: Start.

Step 2: Create a document about list.html.

Step 3: By using <ol> tags makes an ordered list.

Step 4: By using <ul> tags makes an unordered list.

Step 5: By using <dl> tags makes an definition list.

Step 6: <li> tag used to declare the list of item option such as number (or) alphabet (or)
some special symbol like disk, circle and square by using the “type” attribute.

Step 7: <dt> tag is for define term and <dd> tag is for definition data.

Step 8: Stop.
SOURCE CODE:-

<html>
<head>
<title>Lists</title>
</head>
<body bgcolor="skyblue">
<h1 align="center">Illustrating the List of HTML</h1>
<h3>Operating System</h3>
<ul type="circle">
<li>Unix</li>
<li>Dos</li>
<li>Windows</li>
</ul>
<h3>Languages for Web Design</h3>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>Definition</h3>
<dl>
<dt><h4>HTML:</h4></dt>
<dd>HTML Stands for Hypertext Markup Language, a standardized system for tagging
text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web
pages.</dd>
<dt><h4>CSS:</h4></dt>
<dd>CSS Stands for Cascading Style Sheets is a style sheet language used for describing
the presentation of a document written in a markup language.</dd>
<dt><h4>Javascript:</h4></dt>

<dd>Javascript is an object-oriented computer programming language commonly used


to create interactive effects within web browsers.</dd>
</dl>
</body>
</html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


4.STUDENT DETAILS

Aim: To write a HTML program for student details using table.

Description:

 In this program, we are going to develop the student details.


 We use the techniques for this program to create a tabel like <table
border=”value”>
 Here we can use the logic for total is equal to m1+m2+m3 (i.e. total =
m1+m2+m3).

Algorithm:

Step 1: Start.

Step 2: To create a table.

Step 3: To declare the heading for table like sno, sname, course, marks(m1,m2,m3) and
total.

Step 4: Enter the values into the table.

Step 5: Here mark m1, m2 and m3.

Step 6: Here total = m1+m2+m3.

Step 7: Stop.
SOURCE CODE:-

<html>
<head>
<title>Student Details</title>
</head>
<body>
<table border="3" align="center">
<caption><b><u>Student Details</u></b></caption>
<tr align="center">
<th>SNO</th>
<th>SName</th>
<th>Course</th>
<th>M1</th>
<th>M2</th>
<th>M3</th>
<th>Total</th>
</tr>
<tr align="center">
<td>1</td>
<td>Krishna</td>
<td>B.sc</td>
<td>75</td>
<td>89</td>
<td>16</td>
<td>180</td>
</tr>
<tr align="center">
<td>2</td>
<td>Rahul</td>
<td>B.com</td>
<td>25</td>
<td>73</td>
<td>61</td>
<td>159</td>
</tr>
<tr align="center">
<td>3</td>
<td>Menaka</td>
<td>B.C.A</td>
<td>93</td>
<td>80</td>
<td>63</td>
<td>236</td>
</tr>
</table>
</body>
</html>
OUTPUT:

CONCLUSION: Therefore the webpage is successfully designed.


5.USING FRAMES

Aim: To write a HTML program for wildlife information using frames.

Description:

 In this program, we are designing the wildlife information using frames.


 We are using the concepts like frames and hyperlinks.

Algorithm:

Step 1: Start.

Step 2: Create the sub files like animal.html, bird.html, flower.html. In each files
contains <img> and <h1> tags.

Step 3: Create the frame.html using <frameset> and <frame> tags and contents.html
which contain the sub files as hyperlink.

Step 4: Now run the frame which hyperlink shows on other side of the web page.

Step 5: Stop.
SOURCE CODE:-
<html>
<head>
<title>Using Frames</title>
<frameset cols="50%,50%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
</head>
</html>
FRAME1
SOURCE CODE:-
<html>
<body>
<h1>Contents:</h1>
<ol><li><a href="Animal.html" target="frame2">Animal</li>
<li><a href="Bird.html" target="frame2">Bird</li>
<li><a href="Flower.html" target="frame2">Flower</li></ol>
</body>
</html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


ANIMAL

SOURCE CODE:-

<html>
<body>
<h1>Contents:</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\tiger.jpg" height="200"
width="200">
<h1>Tiger is our National Animal.</h1>
</body>
</html>

OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


BIRD

SOURCE CODE:-

<html>
<title>Peacock</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\peacock.jpg" height="200"
width="200">
<h1>Peacock is our National Bird.</h1>
</body>
</html>

OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


FLOWER

SOURCE CODE:-

<html>
<title>Flower</title>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\daisyflower.jpg" height="200"
width="200">
<h1>Bunches of Daisy Flower.</h1>
</body>
</html>

OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


6.HTML FORM

Aim: To write a HTML program for HTML forms.

Description:

 In this program, to develop a webpage for HTML form.


 We using different tags like <input>, <textarea> and <select> tags etc.

Algorithm:

Step 1: Start.

Step 2: Create a document about HTML form.

Step 3: By using <input type=”text”> tag make a name form.

Step 4: By using <input type=”email”> tag make an email form.

Step 5: By using <input type=”number”> tag make a number form.

Step 6: By using <input type=”radio”> tag make a gender form.

Step 7: By using <select> tag make an course details by using <option> tag.

Step 8: By using <textarea> tag make a comment form.

Step 9: By using <script> tag make an alert by click on submit button.

Step 10: Stop.


SOURCE CODE:-

<html>
<head>
<title>Forms in HTML</title>
</head>
<body>
<h1><u><center>Student Bio-Data</center></u></h1>
<center>
<form>
Name : <input type ="text" name="myname"><br><br>
Email.ID : <input type="email" name="emailid"><br><br>
C.Number : <input type="number" name="number"><br><br>
Gender : <input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<input type="radio" name="gender">Other <br><br>
Course : <select>
<option>B.sc</option>
<option>B.com</option>
<option>B.C.A</option>
</select><br><br>
Address:<br>
<textarea>Enter Here...</textarea><br><br>
Photo: <input type="file" name="file"><br><br>
<input type="checkbox" name="chkb1">I verified the above information<br><br>

<input type="submit" name="button" onclick="submitted()" value="submit">

<script type="text/javascript">
function submitted()
{
alert("Your application is submitted");
}
</script>

</form>
</center> </body> </html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


7.INTERNAL STYLE SHEET

Aim: To write a HTML program with CSS using Internal Style Sheet.

Description:

 This program is about Internal Style Sheet.


 In this program, we are using different style sheet properties.

Algorithm:

Step 1: Start.

Step 2: Declare style in <head> tag.

Step 3: Create ISS class with font-family: verdana and font-color: Green

Step 4: Set color : red for the text which use <h2> tag.

Step 5: Apply style inside the <body> tag.

Step 6: Stop.
SOURCE CODE:-

<html>
<head>
<title>Internal Style Sheet</title>
<style type="text/css">
h1.ISS
{
text-align:center;
font-family:Footlight MT;
background-color:pink;
}

h2
{
color:skyblue;
}
</style>
</head>
<body>
<h1 class="ISS">Internal Style Sheet</h1>
<h2>Hello World</h2>
<img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" height="300"
width="300">
<p>It is Emperor Penguin and its Life Span is 20 Years.</p>
</body>
</html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


8.EXTERNAL STYLE SHEET

Aim: To write a HTML program with CSS Using External Style Sheet.

Description:

 This program is about External Style Sheet.


 In this program, we are using the <link> tag which link the HTML program to
CSS file.

Algorithm:

Step 1: Start.

Step 2: Create “Style.css” file.

Step 3: Create “.ISS” class with color:pink and font-family:Arial, set color: brown for
the text which uses <h2> tag.

Step 4: Open another notepad and create html file.

Step 6: In this, we are creating <link rel=”stylesheet” type=”text/css”


href=”E:/css/style.css”>

Step 7: Finally, use the classes inside the document to corresponding tags.

Step 8: Stop.
SOURCE CODE:-

<html>
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>External Style Sheet</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\Web Design.jpg" height="200"
width="200">
<h2><p>We Can design Web Pages by learning HTML,CSS,Javascript</p><h2>
</body>
</html>

STYLE.CSS:-

h1
{
text-align:center;
color:#00ff00;
text-decoration:underline;
}

h2
{
font-style:italic;
font-size:30;
}
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


9.LAYERS

Aim: To write a HTML program using CSS for Layers.

Description:

 In this program, to develop a webpage for html layers.


 We are using different styles and Z-index makes arrangement of layers.

Algorithm:

Step 1: Start.

Step 2: Declare <style> tag in <head> tag.

Step 3: Create class and id selection.

Step 4: Create first class with background-color : red and z-index : 1.

Step 5: Create second class with background- color : #00ff00, left : 50px, top : -75px,

z-index : 2.

Step 6: Create third class with background – color : #0000ff, left : 100px, top : -150px,

z-index : 3.

Step 7: Apply all style inside the <body> tag.

Step 8: Stop.
SOURCE CODE:-

<html>
<head>
<title>Layers</title>

<style type="text/css">
.first{
background-color:red;
z-index:1;
}
.second{
background-color:green;
left:50px;
top:-75px;
z-index:2;
}
.third{
background-color:#0000ff;
left:100px;
top:-150px;
z-index:3;
}
#same{
height:100px;
width:200px;
position:relative;
}
</style>

</head>
<body>
<div class="first" id="same"><h3>First Information</h3>
</div>

<div class="second" id="same"><h3>Second Information</h3>


</div>

<div class="third" id="same"><h3>Third Information</h3>


</div>

</body>
</html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


10.ARITHMETIC OPERATIONS

Aim: To write a program for arithmetic operation using Javascript.

Description:

 In this program, we are going to develop webpage for arithmetic operations.


 Here, we are using the technique of Javascript.
 By using switch case, the arithmetic operation like add, sub, mul, div and mod are
done.

Algorithm:

Step 1: Start.

Step 2: Create a document arithmetic.html

Step 3: Here, we use tag as <script type=”text/javascript”>.

Step 4: In script, declare the value of a, b and c.

Step 5: Read the value of a and b.

Step 6: Read the value of x.

Step 7: By using the switch statement, the corresponding option is executed.

Step 8: Evaluate the expression in that particular case.

Step 9: Display the value of c.

Step 10: Stop.


SOURCE CODE:-

<html>
<head>
<title>Arithmetic Operation</title>
</head>
<body>
<script type="text/javascript">
var a,b,c,x;
a=parseInt(prompt("Enter the first value:"));
b=parseInt(prompt("Enter the second value:"));
x=prompt("1.Add,2.Sub,3.Mul,4.Div,5.Mod.....Enter your choice:");
document.write("Entered Values are : "+a+","+b+"<br>");
document.write("1.Addition<br>2.Substraction<br>3.Multiplication<br>4.Division<br>
5.Modulo<br><br>");
document.write("Your option : "+x+"<br>");
switch(eval(x*1))
{
case 1: c=a+b;
document.write("Addition value is : "+c);
break;
case 2: c=a-b;
document.write("Substraction value is : "+c);
break;
case 3: c=a*b;
document.write("Multiplication value is : "+c);
break;
case 4: c=a/b;
document.write("Division value is : "+c);
break;

case 5: c=a%b;
document.write("Modulo value is : "+c);
break;
default: document.write("Invalid option...Enter correct option");
}
</script></body></html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


11.STRING MANIPULATION

Aim: To write the program for string manipulation using Javascript.

Description:

 In this program, we are going to develop the web page for string manipulation.
 Here, we are using the technique is Javascript.
 There are different string function like concat( ), toUpperCase( ), toLowerCase( )
and valueOf( ) etc.

Algorithm:

Step 1: Start.

Step 2: Create a document string.html.

Step 3: Here, we use tag as <script type=”text/javascript”>.

Step 4: Declare the variable str1, str2 and initialize the strings for it.

Step 5: Here, charAt(index) function display ASCII value at given index.

Step 6: concat( ) function, concatenation of two strings.

Step 7: By using of indexOf(searchstring), display the position of the first occurance of


specified value in string.

Step 8: By using substring(from, to) function display the character from a string between
two specified indicator.

Step 9: toUpperCase( ) function converts the string into upper case and toLowerCase( )
function converts the string into lower case.

Step 10: Stop.


SOURCE CODE:-
<html>
<head>
<title>String Maniputlation</title>
</head>
<body>
<h3 align="Center">String Manipulation</h3>
<h3 align="center">********************</h3>
<script type="text/javascript">
var s1="Welcome";
var s2="Javascript";
document.write("The First String is "+s1+"<br>");
document.write("The Second String is "+s2+"<br>");
document.write("The Concatenation of the string is "+s1.concat(s2)+"<br>");
document.write("Character at 5th position in first string :"+s1.charAt(5)+"<br>");
document.write("The Length of the Second string :"+s2.length+"<br>");
document.write("UpperCase for the first string:"+s1.toUpperCase()+"<br>");
document.write("LowerCase for the second string:"+s2.toLowerCase()+"<br>");
document.write("Value of second string is :"+s2.valueOf()+"<br>");
document.write("Substring for the first string :"+s1.substring(3,7)+"<br>");
document.write("Index value for the s in second string is :"+s2.indexOf("s")+"<br>");
</script>
</body>
</html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.


12.MATHEMATICAL FUNCTIONS

Aim: To write a program for mathematical function using Javascript.

Description:

 In this program, to develop a web page for mathematical function.


 Here we use the technique is Javascript.
 There are different mathematical function such as sqrt( ), abs( ), min( ) and max( )
etc.

Algorithm:

Step 1: Start.

Step 2: Declare the <script> tag in head and load the script in the <body> tag using
function.

Step 3: Using function keyword we can define function.

Step 4: We can use different mathematical function as shown below,

 Math.sqrt(25)
 Math.abs(4.9)
 Math.ceil(9.1)
 Math,floor(5.9) and
 Math.max(10,20) etc.

Step 5: By using above function the corresponding calculation are executed in web page.

Step 6: Stop.
SOURCE CODE:-

<html>
<head>
<title>Mathematical Functions</title>
<script type="text/javascript">

function MathFunction()
{
document.write("<b><u>Mathematical Functions</u></b><br><br>");
document.write("Square Root value for 4 is ..."+Math.sqrt(4)+"<br>");
document.write("Absoulte value of 4.9 is ..."+Math.abs(4.9)+"<br>");
document.write("Ceil value of 9.1 is ..."+Math.ceil(9.1)+"<br>");
document.write("Floor value of 5.9 is ..."+Math.floor(5.9)+"<br>");
document.write("Round value of 10.5 is ..."+Math.round(10.5)+"<br>");
document.write("Log value for 1 is ..."+Math.log(1)+"<br>");
document.write("3 Power 4 is ..."+Math.pow(3,4)+"<br>");
document.write("Minimum value from(6,8) is ..."+Math.min(6,8)+"<br>");
document.write("Maximum value from(9,10) is ..."+Math.max(9,10)+"<br>");
document.write("SIN value for 5 is ..."+Math.sin(5)+"<br>");
document.write("COS value for 5 is ..."+Math.cos(5)+"<br>");
document.write("TAN value for 5 is ..."+Math.tan(5)+"<br>");
}

</script>
</head>

<body align="center" onLoad="MathFunction()">


</body>
</html>
OUTPUT:-

CONCLUSION: Therefore the webpage is successfully designed.

You might also like