Scribd
Upload
26 views

Lab

The document contains the code from 15 lab experiments on various HTML tags and concepts. The experiments cover basic tags like headings, paragraphs and fonts. It also covers lists, links, images, tables, forms, CSS, embedded videos and JavaScript form validation.

Uploaded by

Yash Soni
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

Lab

The document contains the code from 15 lab experiments on various HTML tags and concepts. The experiments cover basic tags like headings, paragraphs and fonts. It also covers lists, links, images, tables, forms, CSS, embedded videos and JavaScript form validation.

Uploaded by

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

Name of Program: BBA BFSI

Lab File

NAME OF STUDENT: GOPAL KHATRI


NAME OF SUBJECT: WEB TECHNOLOGY – HTML AND CSS

SEMESTER: 2
NAME OF FACULTY: MONA CHOUDHARY
Lab experiment : 1
Objective : Pre-tags
Html code:
<html>
<head>
<title> Pre tag </title>
</head>
<body>
<h1> Basic of html </h1>
</body>
</html>
Lab experiment : 2
Objective : Font face, size and color
Html code:
<html>
<body>
<font face="algerian" size="7" style ="color:green"> WELCOME </font> <br>
<font size="6" style="color: red"> WELCOME </font> <br>
<font size="3" color="green"> WELCOME </font> <br>
<font size="4" color="pink"> WELCOME </font> <br>
<font size="5" color="yellow"> WELCOME </font> <br>
</body>
</html>
Lab experiment : 3
Objective: Write a program to illustrate comment, h1-h6 and div tag.
Program : (html code)
<html>
<head>
<title>
Illustrating comment , h1-h6 div tags
</title>
<body>
<div style="color: #00FF00">
<h1 align="center"> This is h1 tag text with center aligned </h1>
<h2 align="left"> This is h2 tag with left aligned </h2>
<h3 align="right"> This is h3 tag aligned right<h/3>
</div>
<h4> This is h4 tag without alignmenrt </h4>
<h5> This is h5 tag text without alignment</h5>
<h6> This is h5 tag text without alignment</h6>
</body>
</html>
Lab experiment : 4
Objective: Write a program to illustrate text formatting tags.
Program : (html code)
<html>
<body>
<title> Text tags</title>
<body>
<center>
<h1> To illustrate text formatting tags </h1>
<p> This is <i>italized</i></p>
<p> This is <u>underlined</u></p>
<p> This is <em>emphasized</em></p>
<p> This is <strong>strong text</strong></p>
<p> This is <s>striked</s></p>
<p> This is <i>italized</i></p>
<p> This is <code>computer code</code></p>
<p> This is <sup>superscript</sup></p>
<p> This is <sub>subscript</sub></p>
<p> This is <big>big text</big></p>
<p> This is <small>small</small></p>
</center>
</body>
</html>

Lab experiment : 5
Objective: Write a program to illustrate ordered list tags.
Program : (html code)
<html>
<head>
<title> Oder list tag </title>
<head>
<body>
<h3 align="center" style="color:red"> To illustrate oder list tags </h3>
<h4> Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Banana</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4> Uppercase letters list:</h4>
<ol type="A">
<li> Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li> Lemons</li>
</ol>
<h4> Lowercase letters list:</h4>
<ol type="a">
<li> Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li> Lemons</li>
</ol>
<h4> Roman numbers list:</h4>
<ol type="I">
<li> Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li> Lemons</li>
</ol>
<h4> Lowercase roman number list:</h4>
<ol type="i">
<li> Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li> Lemons</li>
</ol>
</body>
</html>
Lab experiment : 6
Objective: Write a program to illustrate unordered list tags.
Program : (html code)
<html>
<title> Unordered list</title>
<body>
<h3 align="center"> To illustrate unordered list tags</h3>

<h4> Disc bullet list</h4>


<ul>
<li> Apple</li>
<li> Banana</li>
<li> Orange </li>
<li> Lemons</li>
</ul>

<h4> circle bullet list </h4>


<ul type="circle">
<li> Apple</li>
<li> Banana</li>
<li> Orange </li>
<li> Lemons</li>
</ul>
<h4> square bullet list </h4>
<ul type="square">
<li> Apple</li>
<li> Banana</li>
<li> Orange </li>
<li> Lemons</li>
</ul>

</body>
</html>
Lab experiment : 7
Objective: Write a program to illustrate Nested and Definition tag .
Program : (html code)
<html>
<head>
<title> Nested and definition list</title>
</head>
<body>
<h3 align="center"> To illustrate nested and definition tag list tags</h3>
<h4>An ordered nested list</h4>
<ol>
<li>Coffee</li>
<li>tea</li>
<ol type="a">
<li>Black tea</li>
<li>Green tea</li>
<ol type="i">
<li>China</li>
<li>Africa</li>
</ol>
</ol>
<li>milk</li>
</ol>
<h4> A definition list : </h4>
<dl>
<dt>Bangalore</dt>
<dd> capital city of karnataka</dd>
<dt>Mumbai</dt>
<dd>capital city of maharashtra</dd>
</dl>
</dl>
</body>
</html>
Lab experiment : 8
Objective: Write a program for image tag.
Program : (html code)
<html>
<head>
<title> Image tag</title>
<body>
<h3 align="center" style="color:red" > To illustrate image tags </h3>
<p>
<img src="clouds.jpg" align="right" "width="300" height="200"> This image is
aligned right
</p><br><br><br><br><br><br>
<p>
<img src="clouds.jpg" align="left" "width="300" height="200"> This image is
aligned left
</p><br><br><br><br><br><br><br><br><br><br>
<hr>
<p>
This image is aligned center with the text
<img src="clouds.jpg" align:"middle" "width="300" height="200">
</p><br><br><br><br><br><br>
<p>
<hr>
This image is aligned bottom
<img src="clouds.jpg" align="bottom" "width="300" height="200">
</p><br><br><br><br><br><br>
<p>
<hr>
This image is aligned top with text
<img src="clouds.jpg" align="top" "width="300" height="200">
</p><br><br><br><br><br><br>
</body>
</head>
</html>
Lab experiment : 9
Objective: Write a program for hyperlink tag.
Program : (html code)
<html>
<head>
<title> Link tag</title>
</head>
<body>
<h3 align="center" style=colr:"red"> To illustrate link tags </h3> <hr>
Text as a link / hyperlink to another page : <a href="page1.html"> click here!!!
</a> <hr>

<h3> click image to redirect to page 1 <h3>


<a href="page1.html" > <img src="clouds.jpg" width="50" height="50">
</a>
</body>
</html>
Lab experiment : 10
Objective: Write a program for table tag.
Program : (html code)
<html>
<head>
<title> Table tag</title>
</head>
<body>
<center>
<h4> Table with border,vertical headers, cellpapdding and cellspacing </h4>
<table border="10" cellpadding="10" cellspacing"10">

<tr><td></td>
<th> Name</th>
<th> Age</th>
<th> Telephone</th>
</tr>
<tr>
<th> Student 1</td>
<td> Radha</td>
<td> 20</td>
<td> 123456789</td>
</tr>
<tr>
<th> Student 2</th>
<td> Geetha Bhar</td>
<td> 21 </td>
<td> 123456789</td>
</tr>
</table>
<h4> Cell that span too columns</h4>
<table border="4">
<tr>
<th>Name</th>
<th colspan="2"> Telephone </th>
</tr>
<tr>
<td>Radha</td>
<td>456789</td>
<td>987456</td>
</tr>
</table>
<h4> Cell that span too columns</h4>
<table border="10">
<tr>
<th>Name</th>
<td> Radha</td>
</tr>
<tr>
<th rowspan="2">Telephone</th>
<td>456789</td>
</tr>
<tr>
<td>987456</td>
</tr>
</table>
</center>

</body>
</html>

Lab experiment : 11
Objective: Write a program for form tag.
Program : (html code)
<html>
<head>
<title> Form </title>
</head>
<body>
<center>
<h3 align="center"> To illustrate form based tags </h3> <hrcolor="red"><form
action="">

<p> This is a text box to enter any text


<input type="text">
</p>
<p> This is a text box to enter password
<input type="password">
</p>
<p> This is a text area to enter large area
<input type="textarea"></textarea>
</p>
<p> This is a button
<input type="button" value="click">
<p> <b><u>Radio Options</b></u><br>
<input type="radio" name="y" > YES
<input type="radio" name="n" > NO
</p>
<p>
<u><b>Checkbox Options<u><b><br>
Sunday <input type="checkbox">
Monday <input type="checkbox">
Tuesday <input type="checkbox">
</p>
<p>
<b><u>Menu driven options </b></u>
<select name="cars">
<option value="volvo"> volvo</option>
<option value="saab">saab<option>
<option value="Fiat">fiat<option>
<option value="Audi">audi<option>
</select>
</p>
</form>
</center>
</body>
</html>
Lab experiment : 12
Objective: Write a program for span tag.
Program : (html code)
<html>
<head>
<title> Span tag </title>
</head>
<body>
<style type="text/css">
span.blue{ color:lightskyblue; font-weight:bold;}
span.green{ color:darkolivegreen; font-weight:bold;} </style>
</head>
<body>
<p align="center"><font size=10>
my mother has <span class="blue"> light blue </span> eyes and my father has
<span class="green"> dark green </span> eyes.
</font>
</p>
</body>
</html>

Lab experiment : 13
Objective: Write a program for CSS demo tag.
Program : (html code)
<html>
<head>
<title> CSS demo</title>
</head>
<style type="text/css">
body{ background-color:red}
h1{color:orange;text-align:center;}
p{font-family:"Timenewroman";font-size:20px}
</style>
<body>
<h1>CSS EXAMPLE color orange</h1>
<p>This is a paragraph font times new roman</p>
</body>
</html>

Lab experiment : 14
Objective: Write a program for Embedded video tag.
Program : (html code)
<html>
<head>
<title> Embedded multipedia</title>
</head>
<body>
<center>
<h1>
Here is a video embedded on this webpage</h1><br>
<iframe src="donut.mp4" type="video" height="200" width="200">
</iframe>
</center>
</body>
</html>
Lab experiment : 15
Objective: Write a program for validate java tag.
Program : (html code)
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php" onsubmit="return


validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

You might also like