HTML tags formatting guide

1. Create a web page illustrating text formatting tags.
<html>
<head>
<title>Text Formating Tags</title>
</head>
<body>
<h1><center>Eample Text Formatting Tags</center></h1>
<tt>Teletype text</tt><br>
<i>Italic text</i><br>
<b>Bold text</b><br>
<big>Big text</big><br>
<small>Small text</small><br>
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>

Output

2. Create a web page to demonstrate font variations.

<html>
<head>
<title>font variations</title>
</head>
<body>
<h1><center>Demonstrating Font Variations</center></h1>
<font size="12" color="red">This is some text!</font><br>
<font size="14" face="Bookshelf Symbol 7" color="blue">This is some
text! </font><br>
<font face="verdana" color="green">This is some text!</font>
</body>
</html>

Output

3. Prepare a sample code to illustrate three types of lists in HTML.

<html>
<head>
<title>types of Lists</title>
<head>
<body>
<h1><center>Different types of Lists</center></h1>
<h4 align="center">Ordered List</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>
<h4 align="center">Unordered List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>
<h4 align="center">Definition List</h4>
<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>
<body>
</html>

Output

4) Prepare a sample code to illustrate links between different sections of the Page.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.adc.edu.in" target="_blank">Visit AURORA site</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser
window/tab.</p>
</body>
</html>

Output

5)Link to section of same page
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>

<h2><a name="C4">Chapter 4</a></h2>
<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>

<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
</body>
</html>
Output:

6)An Image as a link
<!DOCTYPE html>
<html>
<body>

<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>

<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>

</body>
</html>

Output

7) Addition of two numbers
<html>
<head>
<title>Input tutorial</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2;
}
</script>
</head>
<body>
value1 = <input type="text" id="value1" name="value1" value="1"/>
value2 = <input type="text" id="value2" name="value2" value="2"/>
<input type="button" name="Sumbit" value="Click here"
onclick="javascript:addNumbers()"/>
Answer = <input type="text" id="answer" name="answer" value=""/>
</body>
</html>
Output:

8) Embeded real player in web page html code
<html>
<body>
<table border='0' cellpadding='0' align="left">

<tr><td>
<OBJECT id='rvocx' classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
width="300" height="300">
<param name='src' value="123.wmv">
<param name='autostart' value="true">
<param name='controls' value='imagewindow'>
<param name='console' value='video'>
<param name='loop' value="true">
<EMBED src="123.wmv" width="300" height="300"
loop="true" type='audio/x-pn-realaudio-plugin' controls='imagewindow' console='video'
autostart="true">
</EMBED>
</OBJECT>
</td></tr>

<tr><td align='center'>
<a href="123.wmv" style='font-size: 85%;' target='_blank'>Launch in external player</a>

</td></tr>
</table>
</body>
</html>
Output:
Lau

Launch a player

9)Embedded calender object in your web page
<html>
<title>
calendar
</title>
<head>
</head>
<body>
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3>
<TR>
<TD COLSPAN="7" ALIGN=center><B>January 2009</B></TD>
</TR>
<TR>
<TD COLSPAN="7" ALIGN=center><I>Course calendar</I></TD>
</TR>
<TR>
<TD ALIGN=center>Sun</TD>
<TD ALIGN=center>Mon</TD>
<TD ALIGN=center>Tue</TD>
<TD ALIGN=center>Wed</TD>
<TD ALIGN=center>Thu</TD>
<TD ALIGN=center>Fri</TD>
<TD ALIGN=center>Sat</TD>
</TR>
<TR>
<TD ALIGN=center></TD>
<TD ALIGN=center>1</TD>
</TR>
<TR>
<TD ALIGN=center>8<br><br>PL Class</TD>
<TD ALIGN=center>9<br><br><br></TD>
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</body>
</html>
Output

10) Cretae a nested table to store your curriculum
<html>
<head>
<title>Nested table</title>
</head>
<body>
<table border=1>
<tr>
<table border=1>
<tr>
<td>name of the college</td>

<td>Aurora </td>
</tr>
</table>
<tr>
<td>name</td>
<td>ADC</td>
</tr>
</table>
</body>
</html>
Output:

11. Design the page as follows:

<html><head>
<title>Web Design</title>
</head>
<body>
<h1><center>The Mobile Ambulance-EMRI 108</center></h1>
<table border="1" align="center">
<tr>
<th>Special Equipments</th>
<th colspan="2">Specifications/Performace</th>
</tr><tr>
<td>Retracable Protective armour</td>
<td> Engine Type</td><td> Jet Turbine</td>
</tr><tr>
<td>Weapons System</td>
<td> Thrust</td><td> 150lbs@103%ROS</td>
</tr><tr>
<td>Instrument Aircraft</td>
<td>Torque</td><td>175lbs@98.7ROS</td>
</tr><tr>
<td rowspan="9"><img src="e:\mecs_record\ambulance_with-TN-
logo.gif"></td>
<td>0-60MPH</td><td>3.7Sec</td>
</tr>
<tr>
<td>Top Speed</td><td>Unknown</td>
</tr>
<tr>
<td>Break Rate</td><td>Excellent</td>
</tr>
<tr>
<td>Wheel Base</td><td>141.12in</td>
</tr>
<tr>
<td>Length</td><td>300.5in</td>
</tr>
<tr>
<td>width</td><td>100.0in</td>
</tr>
<tr>
<td>Height</td><td>200.25in</td>
</tr>
<tr>
<td>Wheels</td><td>Cast Alloy 15*7.5</td>
</tr>
<tr>
<td>Fuel Required</td><td>pure petrol with 99.9 % free carbon</td>
</tr>
</table>
</body></html>

Output

12. Using Table related tags align the images

<html>
<head>
<title>table example</title>
</head>
<body>
<h1><center>Table Tag with Images</center></h1><br><br>
<table border="1" align="center">
<tr>
<td><img src="e:\mecs_record\ASSETS.gif"/></td>
<td><img src="e:\mecs_record\CONTACTS.gif"/></td>
<td><img src="e:\mecs_record\EVTMGMT.gif"/></td>
<td><img src="e:\mecs_record\EXPENSES.gif"/></td>
</tr>
<tr>
<td><img src="e:\mecs_record\INVENTRY.gif"/></td>
<td colspan="2" align="center">Table with Images</td>
<td><img src="e:\mecs_record\LEDGER.gif"/></td>
</tr>

<tr>
<td><img src="e:\mecs_record\ORDPROC.gif"/></td>
<td><img src="e:\mecs_record\RESOURCE.gif"/></td>
<td><img src="e:\mecs_record\SERVICE.gif"/></td>
<td><img src="e:\mecs_record\TIMEBILL.gif"/></td>
</tr>
</table>
</body>
</html>

Output

13. Using Frames Divide the web page as follows

<html>
<head>
<title>Frames Example</title>
</head>
<frameset rows="75%,25%">
<frameset cols="25%,75%">
<frame src="e:\mecs_record\a.html">
<frame src="e:\mecs_record\b.html">
</frameset>
<frame src="e:\mecs_record\c.html">
</frameset>
<body>
</body>
</html>

Output

14. Design The page as follows

<html>
<head>
<title>108 services</title>
</head>
<body>
<h1><center>Image Displaying</center></h1>
<img src="e:\mecs_record\ambulance_with-TN-logo.gif">
<p>
1-0-8 Emergency Response Service is a 24X7 emergency service for medical, police
and fire emergencies. The service is available for the entire state of Andhra Pradesh
,Gujarat, Uttarakhand, Goa, Tamil Nadu, Karnataka, Assam, Meghalaya, Madhya
Pradesh and Himachal Pradesh.
The main highlights are<br>It is a 24x7 emergency service. <br>
Toll Free number accessible from landline or mobile <br>
Emergency help will reach you in an average of 18 minutes
</p>
</body>
</html>

Output

15. Illustrate with example the horizontal rulers in your page.

<html>
<head>
<title>horizontal rular</title>
</head>
<body>
<h1><center>Creating Horizontal Ruler</center></h1>
<hr />Use
<hr /><hr />
Them
<hr />
Sparingly
<hr />
</body>
</html>
Output

HTML tags formatting guide

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML tags formatting guide

Transféré par

Droits d'auteur :

Formats disponibles

1. Create a web page illustrating text formatting tags.

Vous aimerez peut-être aussi