Scribd
Upload
8 views30 pages

PRACTICALS PRINTOUT

The document outlines various HTML coding exercises conducted at P.A International School, focusing on creating web pages with different structures including lists, tables, and forms. Each program aims to demonstrate specific HTML functionalities such as ordered and unordered lists, table creation, and the use of CSS for styling. The document includes code snippets for each program along with their respective aims.

Uploaded by

daanisisters
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views30 pages

PRACTICALS PRINTOUT

The document outlines various HTML coding exercises conducted at P.A International School, focusing on creating web pages with different structures including lists, tables, and forms. Each program aims to demonstrate specific HTML functionalities such as ordered and unordered lists, table creation, and the use of CSS for styling. The document includes code snippets for each program along with their respective aims.

Uploaded by

daanisisters
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

P A INTERNATIONAL SCHOOL

EX NO:
DATE:

PROGRAM NO:1

AIM: To create HTML coding.

CODING:

<html>
<head>
<title>lists in html</title>
</head>
<body>
<ul>
<li>this is the first item in unnumbered list.
<li>this the next
<li>the third item is itself a list:
</ul>
<ul>
<li>first term in the nested list
<li>second be sure to end both lists!
</ul>
<p>
<ol>

<lli>the first term in numbered list.


<li>the second.
<li>they also are called ordered lists.
</ol>
<p>a definition list follows:
<dl>
<dt>html
<dd>hypertext markup language is a language that defines web pages.
<dt>SGML
<dd>standarized general markup language is a class of markup languages like
html.
</dl>
</body>
</html>

P A INTERNATIONAL SCHOOL

EX NO:
DATE:
PROGRAM NO:2

AIM: To display many ordered list.

CODING:

<html>
<head>
<title>many ordered lists</title>
</head>
<body>
<h4>numbered list:</h4>
<ol >
<li>apple
<li>orange
<li>grapes
</ol>
<h4>letter list:</h4>
<ol type="A">
<li>apple
<li>orange
<li>grapes
</ol>
<h4>lowercase letter list starting from 5th letter:</h4>
<ol type="a" start=5>
<li>apple
<li>orange
<li>grapes
</ol>
<h4> numbers list starting from 11th number:</h4>
<ol type="1" start=11>
<li>apple
<li>orange
<li>grapes
</ol>
</body
</html>

P A INTERNATIONAL SCHOOL

EX NO:
DATE:

PROGRAM NO:3

CODING:
AIM: To create restaurant webpage.

<html>
<head>
<title>EAT HEALTHY AND LIVE HEALTHY</title>
</head>
<body link="green" alink="blue" vlink="red">
<center>
<h1>
<font color="maroon">KHAO PIYO RESTAURANT</font></h1>
<img src="restaurant.jpg" ALIGN="right" height=255>
<width=250>
<font color="purple" size=5>
<align=left>
collect information for
<ul>
<li><a href="one.html">menus</a>
<li><a href="two.html">reservation</a>
<li><a href="three.html">catering</a>
<li><a href="four.html">tours</a>
</ul>
</font><font size=5>
<center>
<table border=2 bordercolor="blue">
<font color=blue><caption>menus available are</caption></font>
<tr>
<td>1
<td>INDIAN
<tr>
<td>2
<td>ITALIAN
<tr>
<td>3
<td>CONTINENTAL
<tr>
<td>4
<td>THAI
</table>
</center>
<br>for further equiries and reservation
<a href ="malito:[email protected]">contact us</a>
</font>
</body>
</html>
P A INTERNATIONAL SCHOOL

EX NO:
DATE:

PROGRAM NO:4

AIM: To create elephant webpage.

CODING:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY bgcolor="yellow" link="black "link="green">
<FONT face="Arial" color="maroon">
<H2 align="center">INDIAN ELEPHANT</H2></FONT>
<FONT face="Arial">
<IMG src="elephant.png"height="150"width="200"align="right">
The Indian elephant (Elephas maximus indicus) is one of three recognized
subspecies of the asian elephant and native to mainland Asia. Since 1986,
Elephas maximus has been listed as Endangered by IUCN as the population has
declined by at least 50% over the last three generations, estimated to be 60-
75years. Asian elephants are threatened by habitat loss, degradation and
fragmentation.
<P>
SEE ALSO
<UL>
<LI><A href="one.html">Sri Lankan Elephant</A></LI>
<LI><A href="two.html">Sumatran Elephant</A></LI>
<LI><A href="three.html">Borneo Elephant</A></LI>
<LI><A href="four.html">African Elephant</A></LI>
</UL>
<TABLE align="center" border="2" width="250">
<CAPTION>Threats To Elephants</CAPTION>
<TR><TD>1
<TD>ILLEGAL HUNTING
</TR>
<TR><TD>2
<TD>INDUSTRIALIZATION
</TR>
<TR><TD>3
<TD>HABITAT LOSS
</TR>
<TR><TD>4
<TD>FRAGMENTATION
</TR>
<TR><TD>5
<TD>DISEASE
</TR>
</TABLE>
<P>
<P>
<FONT SIZE="2"><CENTER>FOR FURTHER ENQUIRIES AND RESERVATIONS
<A HREF="[email protected]">CONTACT US</A>
</CENTER>
</BODY>
</HTML>
P A INTERNATIONAL SCHOOL

EX NO:
DATE:

PROGRAM NO:5

CODING:

<HTML>
<HEAD>
<TITLE> Dances of India </TITLE>
</HEAD>
<BODY LINK = "GREEN" ALINK = "BLUE" VLINK = "RED" BGCOLOR = "YELLOW">
<FONT COLOR = "MAROON">
<H1 ALIGN = "CENTER">Dances of India </H1>
</FONT>
<IMG SRC = "dance.png" HEIGHT = "200" WIDTH = "200" ALIGN = "RIGHT">
<P>
There are many types of dance in India, from those which are deeply religious
in content to those which are danced on more trivial happy occasions. <BR>
Classical dances of India are usually always spiritual in content, although this is
often true also of Folk dances.
</P>
<TABLE BORDER = "2" BORDERCOLOR = "BLUE" ALIGN = "CENTER">
<CAPTION>
<FONT COLOR = "BLUE">DANCES OF INDIA</FONT>
</CAPTION>
<TR>
<TH ALIGN = "CENTER">CLASSICAL DANCES </TH>
<TH ALIGN = "CENTER">FOLK DANCES </TH>
</TR>
<TR>
<TD>Mohini Attam</TD>
<TD>Hikat of Himachal Pradesh </TD>
</TR>
<TR>
<TD>Bharata Natyam </TD>
<TD>Rouff of Kashmir </TD>
</TR>
<TR>
<TD>Odissi </TD>
<TD>Hurkia Baol of Kumaon </TD>
</TR>
</TABLE>
<H4>List</H4>
<UL TYPE = "NONE">
<LI>
<A HREF = "one.html">Mohini Attam</A>
</LI>
<LI>
<A HREF = "two.html">Bharata Natyam<<LI>
<A HREF = "three.html">Odissi</A>
</LI>
<LI>
<A HREF = "mailto:[email protected]">Contact Us</A>
</LI>
</UL>
</BODY>
</HTML>

P.A INTERNATIONAL SCHOOL


EX NO:
DATE:

PROGRAM NO:6

AIM: To create forms.

CODING:

<html>
<body>
<p align= center>
<center><h1>project 5</h1></center></p>
<form method=post>
<p>person's name:
<input type="text" name ="persons-name" size="40" maxlength="40">
<input type="hidden" name ="recipient" size="40" maxlength="40">
</p>
<p>password:
<input type="password" name ="password" size="10" maxlength="10">
</p><p>please place me on your mailing list:
<input type="checkbox" name ="mailing list" value="yes" checked>
</p>
<p>what country do you live in?
<select name="country">
<option value="ind">india
<option value="usa">united states
<option value="ca">canada
<option value="fr">france
</select>
</p>
<p>type of computer you have:
<input type="radio" name="comp-type" value="inteli3"/>intelI3&nbsp
<input type="radio" name="comp-type" value="inteli5"/>intelI5&nbsp
<input type="radio" name="comp-type" value="inteli7"checked/>intelI7&nbsp
<input type="radio" name="comp-type" value="AMDFX"/>AMD FX
</p>
<p>comments:<br>
<text area rows="5" cols="50" NAME="comments">this is text that can be
defaulted into the text area field</textarea></p>
<p>
<input type="submit" name="request" value="submit this form">
<input type="reset" name="clear" value="clear form and start over">
</p>
</form>
</body>
</html>
P.A INTERNATIONAL SCHOOL

EX NO:
DATE:
PROGRAM NO:7

AIM: To create guest book.

CODING:

<HTML>
<BODY>
<FORM>
<H1> My Guest Book </H1>
<P>
Please let me know what you think of my Web Pages. Thanks !
</P>
<TABLE BORDER = "0" RULES = "NONE" FRAME = "VOID">
<TR>
<TD> <PRE>What is your name ?</PRE> </TD>
<TD> <INPUT TYPE = "TEXT" NAME = "NAME" /> </TD>
</TR>
<TR>
<TD> <PRE>What is your e-mail address :</PRE> </TD>
<TD> <INPUT TYPE = "TEXT" NAME = "EMAILID" /> </TD>
</TR>
</TABLE>
<BR>
Check all that apply:
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C1" NAME = "C1" VALUE = "I really like your
Web Site.">
<LABEL FOR = "C1">I really like your Web Site.</LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C2" NAME = "C2" VALUE = "One of the best
site I've seen.">
<LABEL FOR = "C2">One of the best site I've seen.</LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C3" NAME = "C3" VALUE = "I have no taste so
your site didn't do much for me.">
<LABEL FOR = "C3">I have no taste so your site didn't do much for
me.</LABEL>
<BR>
<BR>
Choose the one thing you love best of my pages:
<BR>
<INPUT TYPE = "RADIO" ID = "O1" NAME = "OPINION"
VALUE = "That gorgeous picture of you and your dogs.">
<LABEL FOR = "O1">That gorgeous picture of you and your dogs.</LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "O2" NAME = "OPINION"
VALUE = "The inspiring recap about your childhood.">
<LABEL FOR = "O2">The inspiring recap about your childhood.</LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "O3" NAME = "OPINION"
VALUE = "The detailed list of your hobbies.">
<LABEL FOR = "O3">The detailed list of your hobbies.</LABEL>
<BR>
<BR>
Imagine my site as a book, video or album.
<BR>
What do you think about my site?
<BR>
<SELECT NAME = "DETAILS" SIZE = "3">
<OPTION VALUE = "ADD MORE DETAILS ABOUT YOUR HOBBIES!" SELECTED>
ADD MORE DETAILS ABOUT YOUR HOBBIES!
</OPTION>
<OPTION VALUE = "ADD PICTURES OF YOUR CHILDHOOD">
ADD PICTURES OF YOUR CHILDHOOD
</OPTION>
<OPTION VALUE = "ADD YOUR FAVOURITES">
ADD YOUR FAVOURITES
</OPTION>
</SELECT>
<INPUT TYPE = "SUBMIT" NAME = "SUBMIT" VALUE = "Click here to submit" />
</FORM>
</BODY>
</HTML>
P A INTERNATIONAL SCHOOL

EX NO:
DATE:

PROGRAM:8

AIM: To creating cascading stylesheets.

CODING:

<html>
<title>inline styles</title>
<body>
<table style="font-family:arial; font-size:small">
<tr>
<th style="color:blue">
writer'name</th>
<th style="color:green">
primary genre</th>
</tr>
<tr><td>arora</td>
<td>technical</td></tr>
<tr><td>roy<td>
<td>fiction</td></tr>
<tr style="color:red">
<td>yunus</td>
<td >non-fiction</td>
</tr>
</table>
<p>another table shows
<table>
<tr><th>writer'name
<th>primary genre
</tr>
<tr><td>singh</td><td>technical</td></tr>
<tr><td>paulo</td><td>fiction</td></tr>
<tr><tr><td>oslo</td><td>non-fiction</td></tr>
</table>
</body>
</html>

P A INTERNATIONAL SCHOOL

EX NO:
DATE:

PROGRAM NO:9

CODING:

Sample.css

<body> {background:cyan;margin-top:20}
<h1> {font-weight:bold;text-align:center;color:red;font-family:gill;arial:sans-
serif}
<cite> {font-family:gill sans,arial,sans-serif;font-style:italic}
<h2> {font-size:16pt;font-weight:bold;margin-top:6;margin-bottom:6}
<p> {margin-top:4;margin-bottom:4}
<td> {padding:1pt 3pt 2pt 3pt;border-style:so;id;border-width:3}
<table> {border-style:solid;border-width:3;border-color:white;font-
size;10pt;text-align:justify}
<html>
<head><title>external styles</title>
</head>
<body>
<h1>using external stylesheet</h1><table>
<tr>
<th>writer</th>
<th>primary genre</th>
</tr>
<table>
<tr>
<th>writer</th>
<th>primary genre</th>
</tr>
<tr><td>Arora</td><td>Technical (Multimedia)</td></tr>
<tr><td>Roy</td><td>Fiction</td></tr>
<tr>
<td>Yunus</td>
<td>Non-Fiction</td>
</tr>
</table>
<p>Another table follows
<table>
<tr>
<th>writer</th>
<th>primary genre</th>
</tr>
<table>
<tr>
<th>writer</th>
<th>primary genre</th>
</tr>
<tr><td>Singh</td><td>Technical</td></tr>
<tr><td>Paulo</td><td>Fiction</td></tr>
<tr>
<td>Oslo</td>
<td>Non-Fiction</td>
</tr>
</table>
</body>
</html>
P.A INTERNATIONAL SCHOOL

EX.NO:
DATE:

PROGRAM NO:10

AIM: To create css font properties.

CODING:

h1{color:red ;font-family:"times new roman",serif;


font-size:30px;
text-align:centre;
text-decoration:underline;
text-transform:uppercase;}
p{ font-family:arial,verdanna,sans-serif;
font-style:italic;font-size:1em;
text-indent:30px;
word-spacing:15px;
color:grey;}
li{color:blue;
text-transform:capitalize;
letter-spacing:
font-family:sans-serif;}
<html>
<head>
<title>using css properties</title>
<link rel="stylesheet" type="text/css" href="sample10.css">
</head>
<body>
<h1>quote of the day</h1>
<p>
it's never too late to start over.<br>If u weren't happy with yesterday,try
something different today.<br>Don't stay stuck.Do better.
<ul>
<li>Stay positive:)</li>
<li>Staay strong!!</li>
</ul>
</p>
</body>
</html>

OUTPUT:
PROGRAM 1:

PROGRAM 2:
PROGRAM 3:

PROGRAM 4:
PROGRAM 5:

PROGRAM 6:
PROGRAM 7:

PROGRAM 8:
PROGRAM 9:

PROGRAM 10:

You might also like