1. Write a HTML program illustrating text formatting….
<head>
<title> Text formatting tags</title>
</head>
<body bgcolor="sky blue">
<h3>
<p> 1.This is my first program using text formatting tags.In this we use all
the formatting tags</p>
<b> 2.This bold the leters...</b><br><br>
<u> 3. It is used to underline the text...</u><br><br>
<i> 4. It slants the text...</i><br><br>
5. x <sub> 2 </sub> <br> <br>
6. x <sup> 2</sup> <br> <br>
<big> 7. The vision display size is increased....</big><br><br>
<small> 8. The vision display size is decreased....</small><br><br>
<strong> 9. The letters are bolded & their size is
increased...</strong><br><br>
<marquee> 10. The text moves...</marquee></h3>
</body>
</html>
Output:
2. Illustrate font variations in your Html.
<html>
<head>
<title> Font Variations</title>
</head>
<body bgcolor= powdered yellow>
<p> <font size="5" color="red"> This is some text! !</font></p>
<p> <font size="7" color="blue"> This is some text! !</font></p>
<p> <font style="calibra" color="green" size="8"> This is some text!
!</font></p>
</html>
Output:
3. External links..
<html
<head>
<title> Anchor Tags</title>
</head>
<body>
<a href=" link.html"> <h2> Go</h2></a>
<p > This links to the next page having link as file name...</p>
</body>
</html>
File Name: “link.html”
<html>
<head>
<title> Link </title>
</head>
<body background ="D:\mallika\pics\6.jpg" >
<h1 align="center" > This is my background image...</h1>
</body>
</html>
Output:
4. Create a simple html program to illustrate 3 types of lists….
<html>
<head>
<title>Lists</title>
</head>
<body bgcolor="pink">
<h2> <u> Using Ordered & unordered lists</u></h2>
<h3>Courses offered by Dr. L.B.College</h3>
<ol type="1" start ="1">
<li> BSC</li>
<ul type="disk">
<li> MECs</li>
<li>MSCs</li>
<li>MPCs</li>
<li>MPC</li>
<li>MBBTBC</li>
<li>BTBCC</li>
</ul>
<li> Bcom</li>
<ul type="circle">
<li> vocational</li>
</ul>
<li> MSC</li>
<ul type="disc"
<li> organic chemistry</li>
</ul>
<li> MCA</li>
</ol>
<h2> <u> Using definition list </u> </h2>
<h3> Courses abbrevations</h3>
<dl>
<dt>BSC
<dd> Bachelor of Science </dd>
</dt>
<dt>Bcom
<dd> Bachelor of Commerce</dd>
</dt>
<dt>MSC
<dd> Master in Science</dd>
</dt>
<dt>MCA
<dd> Master in Computer Application </dd>
</dt>
</dl>
</body>
</html>
Output:
5. Embed a calendar object in your web page.
<html>
<head>
<title>Calendar Example</title>
</head>
<body>
<form>
<center><table style="outline-style:solid">
<caption><u><b>Trip Advisor</b></u></caption>
<tr>
<td>From:
<td><input type=text>
<td>To:
<td><input type=text></tr>
<tr>
<td>Onward
<td><input type="date">
<td>Return
<td><input type="date"></tr>
<tr>
<td>Adults
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option></select>
<td>Children
<td><select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option></select></tr>
<td>Address
<td><textarea rows="10" cols="40"></textarea></tr>
<tr>
<td>Phone no:
<td><input type=text></tr>
<tr>
<td>Email Id:
<td><input type=text></tr>
</table></form>
</body>
</html>
Output:
6. Create an applet that accepts two numbers & perform all the arithmetic
operations on them.
<html>
<head>
<title>Arithmetic Operations UsingJS</title>
<script>
function addition(n1,n2)
{
var result;
result=parseInt(n1)+parseInt(n2);
document.getElementById("Result").value=result;
}
function subtraction(n1,n2)
{
var result;
result=parseInt(n1)-parseInt(n2);
document.getElementById("Result").value=result;
}
function multiplication(n1,n2)
{
var result;
result=parseInt(n1)*parseInt(n2);
document.getElementById("Result").value=result;
}
function division(n1,n2)
{
var result;
result=parseInt(n1)/parseInt(n2);
document.getElementById("Result").value=result;
}
</script>
</head>
<body>
<form>
<table align=center>
<tr>
<td>Number1:<td><input type="text" id="num1" ></tr>
<tr>
<td>Number2:<td><input type="text" id="num2"></tr>
<tr>
<td>Result:<td><input type="text" id="Result" name="res"></tr>
<tr>
<td colspan=2 align=center><input type="button"
value="Addition" onclick="addition(num1.value,num2.value)">
<input type="button" value="Subtraction"
onclick="subtraction(num1.value,num2.value)"></tr>
<tr>
<td colspan=2 align=center><input type="button" value="Multiplication"
onclick="multiplication(num1.value,num2.value)">
<input type="button" value="Division"
onclick="division(num1.value,num2.value)">
</tr>
<tr>
<td colspan=2 align=center><input type="reset" value="Clear"></tr>
</table>
</form>
</body>
</html>
Output:
7. Create your class time table.( using table & table fields)
<html>
<body bgcolor="sky blue">
<center><table border="5" cellspacing="0">
<tr>
<th colspan="7"> <h2>Time Table </h2></th>
</tr>
<tr>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<th rowspan="7" width="25"><h4>Break</h4></th>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td> mon </td>
<td>math</td>
<td>science</td>
<td>social</td>
<td>lab</td>
<td>lab</td>
</tr>
<tr>
<td> tue </td>
<td>math</td>
<td>math</td>
<td>social</td>
<td>eng</td>
<td>tel</td>
</tr>
<tr>
<td> wed</td>
<td>lab</td>
<td>lab</td>
<td>comp</td>
<td>math</td>
<td>hindi</td>
</tr>
<tr>
<td> thr </td>
<td>math</td>
<td>science</td>
<td>social</td>
<td>tel</td>
<td>eng</td>
</tr>
<tr>
<td> fri</td>
<td>math</td>
<td>eng</td>
<td>social</td>
<td>science</td>
<td>hindi</td>
</tr>
<tr>
<td> sat </td>
<td>math</td>
<td>lab</td>
<td>lab</td>
<td>tel</td>
<td>social</td>
</tr>
</table>
</center>
</body>
</html>
Output:
8. create a student registration form. (Using form & fields)
<html>
<head>
<title> Student registration form </title>
</head>
<body bgcolor="pink">
<form name="student registration" action="submit.html">
<br><br><br><br>
<table cellpadding="2" width="25%" height="65%" align="center"
cellspacing="2">
<tr><td colspan="2">
<center>
<font size=5> <b> Student reg form</b></font>
</center>
</td></tr>
<tr>
<td><b> Name: </b> </td>
<td>
<input type="text" name="text names" id="text names"
placeholder="xyz">
</td></tr>
<tr>
<td><b> Father's name: </b></td>
<td>
<input type=" text" name="Father name" id=" father name"
placeholder="xyz">
</td></tr>
<tr>
<td><b> Address: </b></td>
<td>
<textarea type=" text" name="paersonal address" id=" personal address"
cols="22" rows="3">
</textarea>
</td></tr>
<tr>
<td><b> Gender: </b> </td>
<tr><td>
<input type="radio" name="gender" value="male">Male</td></tr>
<tr><td>
<input type="radio" name="gender" value="female">Female</td></tr>
<tr><td>
<input type="radio" name="gender" value="others">Others</td></tr>
</tr>
<tr><td>
<b> Date of birth:</b></td>
<tr><td>
<input type="date"></td>
</tr>
<tr>
<td><b> Course</td>
<td>
<select name="course">
<option value="-1" selected>
select</option>
<option value="B.Tech"> B.Tech</option>
<option value="MCA"> MCA</option>
<option value="MBA"> MBA</option>
<option value="BCA"> BCA</option>
</select>
</td></tr>
<tr>
<td><b> City: </b></td>
<td>
<input type="text" name="text names" id="text names">
</td>
</tr>
<tr>
<td><b>State: </td>
<td>
<input type="text" name="text names" id="text names" size="20">
</td></tr>
<tr>
<td> Mobile number</td>
<td>
<input type="text" name="mobile number " >
</td></tr>
<td>
<input type="submit" value="submit"/>
</td></tr>
</table>
</body>
</html>
Output:
Link to the registration form…( submit.html)
<html>
<body bgcolor="sky blue" >
<h2> <center> Your details have been submitted..</center>
</h2>
</body>
</html>
Output:
9. Design the page as follows.
<html>
<head>
<title>BatMobile</title>
</head>
<body>
<table border=1><tr>
<th>Special Equipment</th>
<th colspan="2">Specifications/Performace Data</th></tr>
<tr>
<td>Retraceble protective armor</td>
<td><b>Engine Type</b></td>
<td>Jet Turbine</td></tr>
<tr>
<td>Weapons System</td>
<td><b>Thrust</b></td>
<td>150lbs@103%ROS</td></tr>
<tr>
<td>Instruments-Aircraft w/on-board Computer</td>
<td><b>Torque</b></td>
<td>[email protected]%ROS</td></tr>
<tr>
<td rowspan="9"><img src="D:\mallika\pics\bus.jpg"></td>
<td><b>Top Speed</b></td>
<td>Unknown</td></tr>
<tr>
<td><b>Brake Rating</b></td>
<td>Excellent</td></tr>
<tr><td><b>Wheel Base</b></td>
<td>141.0 in.</td></tr>
<tr>
<td><b>Length</b></td>
16 Dr.L.Bullayya College <td>260.7 in.</td></tr>
<tr>
<td><b>Width</b></td>
<td>94.4 in.</td></tr>
<tr>
<td><b>Height</b></td>
<td>51.2 in.</td></tr>
<tr>
<td><b>Wheels</b></td>
<td>Cast alloy,15 x6.5</td></tr>
<tr>
<td><b>Fuel Requirement</b></td>
<td>high oct 97% special.</td></tr>
</table>
</body>
</html>
Output:
10. Create a file. (Using frames & internal links)
**frames.html**
<html>
<frameset cols="25%, 75%">
<frame src="frame-a.html" name="Contents">
<frame src="frame-b.html" name=" output ">
</frameset>
</html>
Output:
**frame-a.html**
<html>
<head>
<title> Frames</title>
</head>
<body bgcolor="pink">
<h3 align="center">Contents</h3>
<a href="List.html" target =" output "> Lists </href><br><br><br>
<a href="tables.html" target=" output ">Tables </href><br><br><br>
<a href="style-sheets.html" target=" output "> Style Sheets
</href><br><br><br>
</body>
</html>
Output:
**frame-b.html**
<html>
<head>
<title> frame-b</title>
</head>
<body bgcolor="sky blue">
<h1 align="center"> The description of the contents will be displayed
here...</h1>
</body>
</html>
Output:
** Lists.html **
<html>
<head>
<title> list</title>
</head>
<body bgcolor="yellow">
<h1 align="senter"><center>Lists</center></h1>
<h3> <p> There are 3 types of lists.They are</p></h3>
<ol type="1" start="1">
<li> Ordered list</li>
<li> Unordered list</li>
<li> Definition list</li>
</ol>
<p> The ordered list uses numbers infront of each list item</p>
<p> The unordered list uses bullets infront of each list item</p>
<p> In definition list bullets & numbers are not used instead it uses
definition for the items.</p></body>
</html>
Output:
** Tables.html **
<html>
<head>
<title> Tables</title>
</head>
<body bgcolor="cream"><h1><center>Tables</center></h1>
<p><h3>Tables are used to structure a piece of information & to structure
the whole web page.</h3></p>
<p>The attributes of tables are:</p>
<ol type="1" start="1">
<li>Align</li>
<li>Border</li>
<li>Cell padding</li>
<li>Cell spacing</li>
<li>Width</li>
<li>Height</li>
</ol>
</body>
</html>
Output:
** Style-sheets.html **
<html>
<head>
<title> Style sheets</title>
</head>
<body bgcolor=" powder blue">
<h1 align="center">Style Sheets</h1>
<h3> <p> CSS stands for cascading style sheets </p></h3>
<p> The various types of CSS are: </p>
<ol type="1" start ="1">
<li> Inline CSS</li>
<li> Internal/ Embeded CSS</li>
<li> External CSS</li>
</ol>
</body>
</html>
Output:
11. Write a html program including style sheets.
<html>
<head>
<title>Html Inline css</title>
</head>
<body>
<p style="color:red;">Define style sheet rules directly along-with the HTML
elements using style attribute.</p><br><br>
<p style="font-size:20px;"> This should be done only when you are
interested to make a particular change in any HTML element
only.</p><br><br>
<p style="color:green;"> Inline CSS contains the CSS property in the body
section attached wite element is known as inline CSS.</p><br><br>
<p style="color:green; font-size:20px;"> This is all about Inline css...</p>
</body>
</html>
Output:
**Internal CSS**
<html>
<head>
<style>
h1 { color: blue;
font-family:verdana;
font-size:300%;
}
p { color : red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>This can be used when a single HTML document must be styled
uniquely. </p>
<p> The CSS rule set should be within the HTML file in the head section i.e
the CSS is embedded within the HTML file. </p>
</body>
</html>
Output:
**External CSS**
//* save this as style.css *//
.red {
color:red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
//External prog//
<html>
<head>
<title> HTML External css</title>
<link rel="stylesheet" type="text/css" href="D:\Mallika\html progs\
style.css">
</head>
<body>
<p class="red"> This is the program of external style sheets.</p>
<p class="thick"> A css file will be included in html files.</p>
<p class="green"> A cascading style sheet file will have extension as
".css".</p>
<p class="thick green"> This is both thick & green.</p>
</body>
</html>
Output:
12. Write a html program to layers of information in web page.
<html>
<head>
<title>HTML layer tag</title>
</head>
<body>
<div style="z-index:2;
left:190px; top: 200px;
position:absolute; color:red;
background-color:sky blue;
font-size: 26pt;
border: thin-groove">
<p>This is the higher layer...</p>
</div>
<div style="z-index:2;
left:30px; top: 70px; width:150px;
position:absolute; color:black;
background-color:sky blue;
font-size: 16pt;
border: thin-groove">
<p> Somemore text is placed in the box that doesn't go right accross the
screen.</p>
</div>
<div style="z-index:2;
left:520px; top: 250px;
position:absolute; color:red; width:25px;
background-color:sky blue;
font-size: 16pt;
border: thin-groove">
<p> This is third layer.</p>
</div>
</body>
</html>
Output:
