PROGRAM 1
<HTML>
<HEAD>
<TITLE>Fruits and Flowers Inc </TITLE>
</HEAD>
<BODY>
<P>Fruits and Flowers, Inc.</P>
<P>No garden? No problem!</P>
<P>Our special, patented fertilizer let you grow lush flowers and healthy fruits INDOOR!</P>
<P>Our fruit selection includes:
<BR>Popular berries such as strawberries, raspberries and blueberries.
<BR>Exotic fruit such as mangoes, papayas and kiwis.</P>
</BODY>
</HTML>
Instructions:
1. Type the above HTML program in notepad and save as “[Link]”
2. Observe the result in any web browser.
PROGRAM 2
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
PROGRAM 3
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p><U>This text is underlined</u></p>
<p><big>This text is big</big></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
This text is bold
This text is italic
This text is underlined
This text is big
This is computer output
This is subscript and superscript
PROGRAM 4
Do following changes in program 1.
a) Use of TEXT in BODY tag
b) Use of <H1>, <I>, <CENTER> AND <FONT> tags.
<HTML>
<HEAD>
<TITLE>Fruits and Flowers Inc </TITLE>
</HEAD>
<BODY TEXT="#0000ff">
<H1><CENTER>Fruits and Flowers, Inc.</CENTER></H1>
<P><I>No garden? No problem!</I></P>
<P>Our special, patented fertilizer let you grow lush flowers and healthy fruits INDOOR!</P>
<P>Grow beautiful, exotic flowers and impress your friends!
<BR>Grow your own fruit and save on your grocery bills!</P>
<P><FONT COLOR="#008000" SIZE="6">Our fruit selection includes:</FONT>
<BR>Popular berries such as strawberries, raspberries and blueberries.
<BR>Exotic fruit such as mangoes, papayas and kiwis.</P>
</BODY>
</HTML>
PROGRAM 5
HOW TO ADD PICTURE?
<HTML>
<HEAD>
<TITLE>Fruits and Flowers Inc </TITLE>
</HEAD>
<BODY TEXT="#0000ff">
<H1><CENTER>Fruits and Flowers, Inc.</CENTER></H1>
<CENTER><IMG SRC="[Link]"></CENTER>
<P><I>No garden? No problem!</I></P>
<P>Our special, patented fertilizer let you grow lush flowers and healthy fruits INDOOR!</P>
<P>Grow beautiful, exotic flowers and impress your friends!
<BR>Grow your own fruit and save on your grocery bills!</P>
<P><FONT COLOR="#008000" SIZE="6">Our fruit selection includes:</FONT>
<BR>Popular berries such as strawberries, raspberries and blueberries.
<BR>Exotic fruit such as mangoes, papayas and kiwis.</P>
</BODY>
</HTML>
1. Replace the <BODY> tag with:
<BODY TEXT="NAVY" style="background-color:teal">
and enjoy the changes in background color.
2. Replace IMG tag with:
<CENTER><IMG SRC="[Link]" border=8></CENTER>
Wow Now, Picture is looking nice. Isn’t it?
PROGRAM 6(a)
Creating Ordered List
<HTML>
<HEAD>
<TITLE>Table of Contents</TITLE>
</HEAD>
<BODY>
<H2>Table of Contents</H2>
<OL>
<LI>Introduction</LI>
<LI>Company History</LI>
<LI>Mission Statement</LI>
<LI>Products Offered</LI>
<LI>Services Offered</LI>
<LI>Future Goals</LI>
<LI>Conclusion</LI>
</OL>
</BODY>
</HTML>
PROGRAM 6(b)
Creating Unordered List
<HTML>
<HEAD>
<TITLE>Pasta Perfection</TITLE>
</HEAD>
<BODY>
[Link]
<H2>Pasta Perfection</H2>
Perfect Pasta Everytime!
<FONT face="monotype corsiva" size="5"> Yummyyy!!!!!</H4></FONT>
<UL>
<LI>Cannelloni</LI>
<LI>Lasagna</LI>
<LI>Linguine</LI>
<LI>Manicotti</LI>
<LI>Ravioli</LI>
<LI>Spaghetti</LI>
</UL>
</BODY>
</HTML>
PROGRAM 7
<HTML>
<BODY>
<P>
<a HREF="[Link]">This text</a>
is a link to a Page on this Web site.
</P>
<P>
<a HREF="httP://[Link]/">GOOGLE!</a>
is a link to a Page on the World Wide Web.
</BODY>
</HTML>
1. Replace <a HREF="httP://[Link]/"> with:
<a HREF="httP://[Link]/" target="_blank">
Oooo target="_blank" opens the Google site in a new window. Okyyy!
CREATING TABLES
PROGRAM 8 (a)
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>Asma</td>
<td>VIII A</td>
</tr>
<tr>
<td>Ghadeer</td>
<td>IX A</td>
</tr>
</table>
Check Out - Cellpadding
<table border="1" cellpadding=”10” bgcolor="rgb(100,250,77)">
PROGRAM 8 (b)
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
PROGRAM 8 (c)
Cell Span
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
FORM DESIGNING
PROGRAM 9 (a) - Text Fields
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
PROGRAM 9 (b) - Password Field
<form>
Password: <input type="password" name="pwd" />
</form>
PROGRAM 9 (c) - Radio Buttons
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
PROGRAM 9 (d) - Checkboxes
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
PROGRAM 9 (e) - Submit Button
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
PROGRAM 9 (f) – Drop Down List
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>