Webtechnologies Lab
1. Program on Header Tag
Program
<html>
<head>
<title>My First Webpage</title>
</head>
<body bgcolor="#07e8e4">
<h1>S.K.B.R.Government Degree College</h1>
<h2>S.K.B.R.Government Degree College</h2>
<h3>S.K.B.R.Government Degree College</h3>
<h4>S.K.B.R.Government Degree College</h4>
<h5>S.K.B.R.Government Degree College</h5>
<h6>S.K.B.R.Government Degree College</h6>
</body>
</html>
Output
2. Demonstration on FONT Tag
<html>
<head>
<title>FONT TAG</title>
</head>
<body bgcolor="#778855">
<p><font size="+5" color="#880033" face="Algerian"><u><b>Computer</b> is an electronic device which accepts input from the user, process it and displays the output on output device</u></font></p>
</body>
</html>
Output
3. Demonstration on Image Tag
Program
<html>
<head>
<title>Image Tag</title>
</head>
<body>
<img src="images.jpg" height=200 width=1500 border=5 alt="Browser not supported"/>
</body>
</html>
Output
4. Program on anchor tag(External Linking)
Program
<html>
<head>
<title>ANCHOR TAG</title>
</head>
<body>
<a href="https://www.google.com">GOOGLE</a>
<br>
<a href="https://www.facebook.com">FACEBOOK</a>
<br>
<a href="e:\color.html">COLORS PROGRAM</a>
</body>
</html>
Output
5. Program on anchor tag with images
Program
<html>
<head>
<title>Image with anchor tag</title>
</head>
<body>
<a href="http://www.google.com" target="_blank">GOOGLE</a>
<br>
<a href="http://www.facebook.com" target="_blank"><img src="facebook.PNG" width=20 height=20 border=1/></a>
</body>
</html>
6. Program on Anchor Tag(Internal Linking)
<!--Internal Linking using anchor tag-->
<html>
<head>
<title>Internal Linking</title>
</head>
<body>
<a href="#lesson1">Lesson.1</a><br/>
<a href="#lesson2">Lesson.2</a><br/>
<a href="#lesson3">Lesson.3</a><br/>
<a href="#lesson4">Lesson.4</a><br/>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a id="lesson1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="lesson2">Introduction of Lession.2</div>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="lesson3">Introduction of Lession.3</p>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<article id="lesson4">Introduction of Lession.4</article>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>
OUTPUT:
7. Program on Unordered List
Program
<!-- Lists in HTML-->
<html>
<head>
<title>Lists-Ordered List in HTML</title>
</head>
<body>
<h1>Fruits</h1>
<ol>
<li>Mango</li>
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
</ol>
</body>
</html>
8. Program on Ordered List
Program
<html>
<head>
<title>Ordered Lists</title>
</head>
<body>
<ul type="a">Fruits
<li>Grapes</li>
<li>Orange</li>
<li>Mango</li>
<li>Banana</li>
</ul>
</body>
</html>
Output
9. Program on Definition Lists
Program
<html>
<head>
<title>definition list</title>
</head>
<body>
<dl>
<dt>Computer</dt>
<dd>it is an electronic device</dd>
<dt>HTML</dt>
<dd>Hypertext markup language</dd>
</dl>
</body>
</html>
Output
10. Program on Table Tag
<html>
<head>
<title>Table Tag</title>
</head>
<body bgcolor="pink">
<table border="5" bgcolor="yellow">
<tr>
<td>Item</td>
<td>Quantity</td>
<td><font size=+5 color="red">Price</font></td>
<td>destination</td>
</tr>
<tr>
<td>Grapes</td>
<td>1 kg</td>
<td>100</td>
<td rowspan=2>Guntur</td>
</tr>
<tr>
<td>Oranges</td>
<td>1 kg</td>
<td>50</td>
</tr>
<tr>
<td colspan=4>Amount Paid:150</td>
</tr>
</table>
</body>
</html>
Output:-
11. Program on Text Formatting tags
<html>
<head>
<title>Text formatting Tags</title>
</head>
<body>
Desktop <b>software</b> requires larger storage space on the machine's hard disk to deploy its necessary pakcages and associated files. <mark>Desktop software requires larger storage space on the machine's <u>hard disk</u> to deploy its necessary pakcages and associated files.</mark> Desktop software requires larger storage space on the machine's hard disk to deploy its necessary pakcages and <i>associated</i> files. <font color="#6C1367" face="Algerian" size="+6">Desktop software requires larger storage space on the <font color="red">machine's hard disk</font> to deploy its necessary pakcages and associated files</font>. Desktop software requires larger storage space on the <strike>machine's hard disk to deploy its necessary pakcages and associated files.</strike>
<br>
f(x)=x<sup>2</sup>+2x+1
<br>
log<sub>10</sub>a=4.15
<br>
H<sub>2</sub>O
<font color="blue">SKBR GOVERNMENT DEGREE COLLEGE</font>
<small>SKBR GOVERNMERT DEGREE COLLEGE</small>
<br>
<pre>
1
12
123
1234
12345
</pre>
<blink>hello </blink>
</body>
</html>
OUTPUT
12. Program on frames
Program
<html>
<head>
<title>About Frames</title>
</head>
<frameset rows="200,*">
<frame src="image.html">
<frameset cols="200,*">
<frame src="dlist.html">
<frame src="unorderedlist.html">
</frameset>
</frameset>
<noframes>
<body>Your browser does not suppport</body>
</noframes>
</html>
Output
13. Program on Forms
Program
<html>
<head>
<title>Form tags</title>
</head>
<body>
<form>
<table>
<tr>
<td><label>Name:</label></td><td><input type="text" name="uname" size=10 maxsize=26/></td>
</tr>
<tr>
<td>Fathers Name:</td><td><input type="text" name="fname"/></td>
</tr>
</table>
<br>
Password: <input type = "password" name = "password" />
Address : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter Your Address...
</textarea>
<br>
Hobbies:<br>
<input type = "checkbox" name = "pc" value = "on"> Playing Cricket
<input type = "checkbox" name = "rb" value = "on"> Reading books
<br>
Gender:<br>
<input type = "radio" name = "male"> Male
<input type = "radio" name = "female">Female
<br>
Course Studied:
<select name = "dropdown">
<option value = "c1" selected>B.Sc.(MPC)</option>
<option value = "c2">B.Sc.(MPCs)</option>
<option value = "c3" selected>B.Sc.(MECs)</option>
<option value = "c4">B.Sc.(MSCs)</option>
</select>
<br>
Upload a photo: <input type = "file" name = "fileupload" accept = "image/*" />
<br>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>
Output
14. Program to demonstrate Inline CSS
Program
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<!-- <font color="red">
<h1>this is a heading</h1>
<p>this is paragraph</p>
</font>-->
</body>
</html>
Output
Program
<html>
<head>
<title>internal stylesheets</title>
<style>
.first
{
color:blue;
}
.second
{
color:chocolate;
}
.fh1
{
color:darkslateblue;
margin-right: 40px;
font-family: "Times New Roman", Times, serif;
font-style: oblique;
outline-style: dotted;
}
.sh1
{
color:darkblue;
margin-left: 40px;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px dotted blue;
margin: 0;
}
</style>
</head>
<body>
<p class="first">This is first paragraph</p>
<p class="second">This is second paragraph</p>
<h1 class="fh1">bharathi</h1>
<h1 class="sh1">Devi</h1>
<div>where the file is stored in the disk</div>
</body>
</html>
Output
16. Program to demonstrate External CSS
Program
external1.css
<style>
p
{
font-size:15;
color:blue;
background-color:rgba(85,255,189,0.4);
}
h1
{
font-size=25;
font-family=verdana;
color:red;
background-color:rgb(85,255,189);
}
h2
{
color:blue;
border-style: dotted;
border-width: 5px;
border-color: green;
border-radius: 5px;
}
</style>
external.html
<html>
<head>
<title>external stylesheets</title>
<link rel="stylesheet" href="external1.css"/>
</head>
<body>
<p>this is my first paragraph</p>
<h1>this is header tag one</h1>
<h2>this is header tag two</h2>
</body>
</html>
OUTPUT
This comment has been removed by the author.
ReplyDelete