INTRODUCTION TO HTML
By
M.HEMAMALINI
DESIGNING A HOME PAGE
The first page of a website is called the home page.
It normally has the logo of the company, with a
pleasant background having several hot texts.
HTML – Hyper-Text Mark-up Language
HISTORY OF HTML
The seed for html was sown by IBM in the early
1980s.
They wanted to set a documentation system in
which one could mark the title, headings,
paragraphs and font type selections.
They called it General Mark-up Language (GML).
ISO – standardized it as Generalized mark-up
language (SGML).
Tim Berners Lee and his team in the European
Laboratory for particle Physics designed the present
form of the documentation language and it called it
HTML.
HTML DOCUMENTS
Every HTML document has the following two sections
Head
Body
The head begins with <HEAD> tag and ends with </
HEAD> tag .
The title begins with <title> and ends with </title>.
The body begins with <body> and ends with
</body>.
Headings can be created with tags H1,H2…..H6.
H1 will make a big heading
H2 will make it smaller
H3 will make it still smaller and so on.
<HTML>
<head>
<title> HEADINGS </title>
</head>
<body>
<h1> WELCOME TO HTML </h1>
<h2> WELCOME TO HTML </h2>
<h3> WELCOME TO HTML </h3>
<h4> WELCOME TO HTML </h4>
<h5> WELCOME TO HTML </h5>
<h6> WELCOME TO HTML </h6>
</body>
</html>
The following are some more tags
<!.......> Comments
<br> Line break
<p> Starts a new paragraph
<pre> </pre> Preformatted text
<b> </b> Bold face
<u> </u> Underline
<I> </I> Italics
<tt> </tt> Typewriter font
<ol> </ol> Ordered list
<ul> </ul> Unordered list
<li> </li> A list item
ANCHOR TAG
When a page is shown some of its words may need
further explanation.
Such words are called hot text and they appear in a
different color.
When the cursor is moved to the hot text, a hand
symbol appears.
When we click it , another HTML file will be opened
and that will have the required explanation.
A hot text is created with an anchor tag <a>.
For ex. If a hot text “st.xaviers College” is to be
created with an HTML document College.html we
must type
<a href =“college.html”> St. Xaviers College </a>
<HTML>
<head>
<title>Xavier</title>
</head>
<body>
<h1>Dr.C Xavier</h1>
<hr>
<br>
Dr C. xavier is working as a senior lecturer in computer
science in <a href=" college. html"> St Xavier's college
</a> palayamkottai. Palayamkottai and Tirunelveli are
considered as twin cities of the famous <a href="
district.html". Tirunelveli kattabomman</a>District.<br>
</body>
</HTML>
The foregoing text of xavier.html has been shown on different
lines only for better readability.
In this page, “st.Xaviers College” is a hot text. When this is
clicked , it will open College.html shown as follows.
<HTML>
<head>
<title>College</title>
</head>
<body>
<h1>St Xavier's College</h1>
<hr>
<br>
St Xavier's College is a famous college. This was started in 1923
by the Society of Jesus. It is in Palayamkottai. Palayamkottai
and Tirunelveli are considered as twin cities of the famous <a
href="district. html"> Tirunelveli kattabomman</a>
District.<br>
</body>
</HTML>
HYPER LINK
when we click a hot text another HTML document
is opened.
This is how we link two texts.
This is called the hyper link.
If a web site runs into several pages. It is possible
to define hyper links within the same web
document itself.
< a name = comp > </a>
An identification called COMP has been defined
using the anchor tag <A>. This is called the
identification of a location.
< a href = “#Comp”> Computer Science </A>
When the hot text computer science is clicked , the
cursor jumps to the location with the identification
COMP.
<html>
<head>
<title> St.Xaviers College </title>
<head>
<body>
<h1> St.Xaviers College </h1>
--------
--------
The <a href = “#comp”> Computer science </a> is
rendering commendable service to the society.
--------
--
< a name = comp > </a>
<h4> Department of computer science </h4>
The department offers…………………
</body>
The HTML document shown above is a single
document
<a name = comp> </a> defines an identification
of the location.
The identification of the location can also be
defined
In the <br > tag or <h1> tag or any head or
similar tag.
<a name = comp> </a>
<h4> Department of computer science </h4>
We can simply write
<h4 id = comp> Department of computer science
</h4>
<br id = comp>
<head>
<title> Tamil nadu Tourist Information </title>
<body>
Tamil Nadu very interesting tourist spots at the
following places
<ul>
<li> < a href = # maha”> Mahabalipuram </a>
<li> < a href = # kodai”> Kodaikanal </a>
<li> < a href = # OOty”> Ooty </a>
…………………..
< h4 id = maha > Mahabalipuram </h4>
< h4 id = kodai > Kodaikanal </h4>
< h4 id = Ooty > Ooty </h4>
</body>
