What is HTML

A Project on HTML Introducing the HTML elements

Shardul Sapkota

Class: 9 ‘B’Roll; 24

I would take this opportunity to express my sincere gratitude to Department of Computer Science, PNF especially Tr. Biwash for his great conceptualization of the project that really helps the student to increase their, knowledge towards practical learning of HTML.

I am really acknowledged to my parents as well, for their constant motivation and encouragement to complete this task.

This project entitled, '' A Project on HTML'' is a comprehension on HTML tags, which explores all the HTML elements, despite of their introduction and function are represented only through output.

The is successively completed, meeting all the required criteria as desired. Any comments or suggestions for the improvement on the work would be highly appreciable.

Hope the project becomes useful to the reader!!

- Shardul Sapkota

Page 2

S.N. Content Pg.no.1. Acknowledgement 1

2. HTML Documents (1) 3










12. Conclusion 24

HTML Document (1) [Basic tags]

<HTML>

<HEAD>

Page 3

<TITLE>

BASIC CODES </TITLE> </HEAD>

<BODY BGCOLOR="lightblue"><BR>

<P align="center"> This is my basic HTML page where I have used the Basic tags of HTML. </p>

Moreover this project is based on description of HTML itself.

<BR><HR>

Here in this Project, I will explore the elements of HTML and present them. <BR> <BR>

Please continue reading through the project to enlarge your horizon on HTML codes and tags.

</Body>

</HTML>

Output;

Page 4

HTML Document (2) [Text formatting]

<HTML>

Page 5

<HEAD>

<TITLE>

Text Formatting Codes </TITLE> </HEAD><BR><BR>

<Body Bgcolor=”brown”>

Html is a formatting language that provides web pages with various types of writing styles and formats.

<HR>

<Font size="6"> <B> <I> <U>

Formatting web pages makes it look more attractive </U> </I> </B></Font>

<BR> <BR>

<Font size="4" face="arial" color="darkred"> Obviously, because we can compare the above two texts and identify.</font><BR>

Moreover we can also define format the texts using <B> Bold </B>, <U> Underline </U> and <I> Italics </I>.<BR>We can even <strike> Strike </strike> the text.<BR> <BR>

<Font size="5" face="arial" color="black">

But what to do to express subscripts and superscripts?

</font>

We use the tag "sup" to express superscript and "sub"

toe xpress subscript.

Here, H<sub>2</sub>O uses subscript whereas in

Page 6

x<sup>2</sup>+y<sup>2</sup> uses superscript.

</Body>

</HTML>

Output;

HTML Document (3) [Marquee]

</HTML>

<HEAD>

Page 7

<TITLE>

marquee </title><BR> <BR>

<Br> <body bgcolor="acqua"> <Marquee direction="up">

And that is not it. We can even move the images and texts. here </marquee> <BR>

<Marquee behavior="scroll" direction="left"> HTML </marquee><br>

HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like ), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1> , although some tags, known as empty elements, are unpaired, for example . The first tag in a pair is the start tag, the second tag is the end tag(they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

<marquee behavior="alternate" direction="right"> Thank-you </marquee>

</Body>

</HTML>

Output;

Page 8

HTML document (4) [Image]

Page 9

<HTML>

<HEAD>

<TITLE>

Images</title></head>

<Body Bgcolor=”green” align=”center”>

Here I am again with introduction to another tag. <BR> <BR>

But this one is interesting as HTML document also helps to add pictures and images. Here let us have a look.

<Img src="picture.jpg" align="left" width="25%" height="25%" border="3" alt="Picture"><BR>

This function allows us to make our web pages more attractive and we can even express a great zeal of information through it. <BR> <BR>

<img src="download1.jpg" height="250" width="250" border="2" alt="HTML" align="right"> <BR> <BR>

<img src="download(1).jpg width="300" height="300" alt="Html">

</Body>

</HTML>

Output;

Page 10

HTML Document (5) [List]

Page 11

<HTML>

<HEAD>

<TITLE>

List</title></head>

<body bgcolor=” yellow”>

HTML supports several types of list elements that should be included within the BODy element of the document. Some of the commomly used lists are ordered(numbered) list and unordered(bulleted )list.<BR> <BR>

<OL type="A">

<LI> HTML </LI>

<UL type="disc">

<LI>HTML stands for Hyper Text Markup

Language</LI>

<LI> HTML is not a programming language, it

is a markup language </LI></UL>

<LI> HTML Codes </LI>

<UL type="square">

<LI>HTML tags are keywords (tag names) surrounded by

angle brackets like <html></LI>

<LI> HTML tags normally come in pairs </LI></UL> </OL>

Page 12

<OL type="1">

<LI>HTML Documents = Web Pages</LI>

<UL type="cicle">

<LI> HTML documents describe web pages </LI>

<LI> HTML documents contain HTML tags and plain text

</LI> </UL>

<LI>HTML Importance</LI>

<UL type="disc">

<LI> TO create web pages </LI>

<LI> TO allow the web page to look attractive</LI> </UL>

</OL>

</Body>

</HTML>

Output;

Page 13

HTML Document (6) [Table]

Page 14

<HTML>

<HEAD>

<TITLE>

Table</title></head>

<body background="A.jpg">

<font color= "00ff00"><BR> <h3>

An HTML table is an element comprised of table rows and columns, much like you'd see when working with an application such as Excel. Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -- row by row, column by column.</h3></font><table border="1" width="50%" height="50%" bgcolor="blue" cellpadding="5" cellspacing="5">

<tr>

<th>Items</th>

<th>Price</th> </tr>

<tr>

<td align="center">Pen</td>

<td align="center">Rs. 5</td>

</tr>

<tr>

<td align="center">Book</td>

<td align="center">Rs. 100</td>

</tr>

</table>

Page 15

</Body>

</HTML>

Output;

HTML Document (7) [Form]

Page 16

<HTML>

<HEAD>

<TITLE>

Form</title></head>

<body bgcolor="red">

<form name="regsitry">

<B align="center"> Admission Form </B> <br> <br>

<font size="4"> Full name : <input type="text"></font> <BR> <br>

<font size="4">Address :<br> <textarea rows="5" cols="15"> </textarea> </font><br> <BR>

<font size="4">Gender:</font> <br><BR>

Male <input type="radio" name="a" checked>

Female <input type="radio" name="a"> <br><BR>

<font size="4">Previous School's name:</font>

<br> <input type="text"><BR><br>

<font size="4">Interested in:</font> <br><BR>

<input type="checkbox"> swimming <br>

<input type="checkbox"> Playing <br>

<input type="checkbox" checked> singing <br>

<input type="checkbox"> others <br><BR>

<font size="4">Favourite sport:</font>

<select>

Page 17

<option> Basketball </option>

<option> Football </option>

<option selected> Cricket </option>

<option> Other </option>

</select> <br><BR><BR>

<Input type="submit">

<input type="reset">

</form>

</body>

</html>

Output:

Page 18

HTML Document (8) [HTML page]

Page 19

<HTML>

<HEAD>

<TITLE>

Page</title></head>

<body bgcolor="orange"> <BR> <BR> <a name=here>

<font size="5" face="arial"> Welcome to our site </font><BR> <BR>

<H3>This is the place were you have come from after filling up the registry form. Now that you are just few steps away from your destiny.</H3> <BR> <hr>

<h1>Our fees structure are very expensive.</h1> As your form seems to describe a lower secondary level ward total cost of 4 years would be <big> Rs.100000000/- </big> <hr>

<h4>Inspite of fee structures you can search anything about </h4> our school portal below:

<center>

<textarea rows="5" cols"10"> </textarea><Br>

<input type="button" value="search">

</center>’<a href=#top><h3> top </h3> </a>

</body>

</HTML>

Output:

Page 20

HTML Document (9) [Link]

Page 21

<HTML>

<HEAD>

<TITLE>

Table</title></head>

<body bgcolor="00ff00"> <a name="atop">

<BR> <font color="black" size="5">

This is our free web portal. Here You can download almost anything.But taxes are charged on registration to our site... <BR> <br><HR> <br>

Just clink into the links below to download the given software. If you do not find it search it below. <BR> <a href="C:\Documents and Settings\shardul\Desktop\Oxford Advanced Learner's Dictionary - 8th Edition.lnk"> Click to download OALD-8</a><BR><BR>

<a href="C:\Documents and Settings\All Users\Desktop\AVG 2012.lnk"> Click here to download AVG </a><BR><BR>

<a href="C:\Documents and Settings\All Users\Desktop\Skype.lnk"> Click for downloading Skype </a><BR><BR>

These were the basic softwares. Others can be downloaded by going through the following download selections;

<BR> <BR>

<Select>

<option> games </option>

<option> animation </option>

Page 22

<option> movies </option>

<option> education </option>

<option> science </option>

<option> others </option>

</select> <HR>

Thank - you

<BR> <p align="left"> </font> <a href="#aop"> top</a> </p>

</Body>

</HTML>

Output;

HTML Document (10) [Frame]

Page 23

<HTML>

<HEAD>

<TITLE>

Frame</title></head>

<Frameset cols="35%,*">

<frame src="s.html" name="leftframe">

</frame>

<frameset rows="50%,*">

<frame src="sa.html" name="top">

</frame>

<frame src="ssa.html"

</frame>

</frameset>

</frameset>

</HTML>

Output;

Page 24

Page 25

To sum up, the project on Html elements is the work based on the tags and elements that I had learnt. After the completion of the project, the confusions of the HTML tags that were learnt theoretically could be easily clarified through the observation of HTML tags and their functions.

Above all the project given at the edge of examination could also help revise the topic thoroughly to prepare the work. Moreover HTML being an important markup language to design the web pages really made us expert; to create well designed HTML pages, through this project.

Page 26