Scribd
Upload
20 views

Web Technology Lab

The document discusses using HTML tags and formatting to create webpages about various topics like text formatting, family details, lists, student details using tables, wildlife information using frames, and HTML forms. It provides code examples and outputs for each topic.

Uploaded by

Sreeprada V
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Web Technology Lab

The document discusses using HTML tags and formatting to create webpages about various topics like text formatting, family details, lists, student details using tables, wildlife information using frames, and HTML forms. It provides code examples and outputs for each topic.

Uploaded by

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

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:-

.
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:-
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:-

.
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:-

.
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:-

.
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:-

.
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:-

.
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:
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:-

.
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:-
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:-

.
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:-

.
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:-

.
7. 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:-
8. 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:-

.
9. 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:-
10. DOCUMENT OBJECT

Aim : To create Document Object & its properties :


JavaScript Document object is an object that provides access to all HTML elements of a
document. When an HTML document is loaded into a browser window, then it becomes a
document object.
A document object is a child object of the Window object,

Description:
 Suppose you have created a FORM in an HTML document using the FORM element
and added some text fields and Buttons on the Form. On Submitting the Form you
want to validate the input or display input on another page. In this situation, you can
use a document object which is a child object of the window object. Using the
document object, you can access the elements of the form and validate the Input.
 The Document Object provides different collection elements, such as anchor and
Links which helps you to count the number of specific elements on a form.
 The Document Object also provides various properties such as URL, bgcolor, etc.
which will allow you to retrieve the details of a document and various methods such
as open(), close(), write(), getElementById(), getElementByName(), etc. which allow
you to perform various tasks like opening an HTML document to display output and
writing a text on Web Page.
 The Document Object also allows you to create cookies for a webpage by providing a
property named cookie. A cookie stores information about the user's computer, which
helps in accessing visited websites.

JavaScript Document Object Properties

As we know, a property of an object is the value associated with the object. The property is
accessed by using the following notation:

objectName.propertyName

where objectName is the name of the object and propertyName is the name of its
property.

Now we will show you the properties of document object in the table given below:

Properties Description
Properties Description

returns a report that contains all the visible and unexpired cookies
cookie
associated with the document

returns the domain name of the server from which the document has
domain
originated

lastModified returns the date on which document was last modified

documentMode returns the mode used by the browser to process the document

readyState returns the loading status of the document.

referrer returns the URL of the documents referred to in an HTML document

returns the name of the HTML document defined between the starting and
title
ending tags of the TITLE element

URL returns the full URL of the HTML document.


SOURCE CODE
<!doctype html>
<head>
<style>
/* CSS comes here */
</style>
<title>Document Properties</title>
</head>
<body>
<h3>Document Properties Example</h3>

<script>

document.write(document.domain +"<br>")
document.write(document.lastModified +"<br>")
document.write(document.documentMode +"<br>")
document.write(document.title +"<br>")
document.write(document.url +"<br>")

</script>
</body>
</html>
Output :
Document Properties Example
www.studytonight.com
03/20/2024,14:23:41
undefined
DocumentProperties
undefined

You might also like