An HTML Tutorial for Siuli
This is a tutorial on HTML Page writing.
The page itself is written with HTML.
What you are watching is the output of the HTML file
,namely siuli.html on a Browser/Viewer
like Netscape/Internet Explorer.
Where you see html files ?
When u goto any website like
http://www.stat.ufl.edu or http://www.google.com,
the first page comes is a html file( see FAQ below,
to know the name of this file), when u click on some link
on these pages, the pages come is also html files, as u
go on clicking you get more and more html file or like files.
This tutorial will take
a few minutes to grasp the knowledge of HTML pages.
stands for Hyper Text MarkUp Language.
There are other files also like XYZ.shtml,
XYZ.htm( same as .html) , XYZ.xhtml etc.(XYZ is meant for
any name) which works almost like html files.
Here. we will concentrate on html files only.
These files has Two parts :
NOTE : The html files can be seen in two ways. One in
Netscape/Internet Explorer(i.e what currently you are looking is output of the html file)
OR in Notepad/Vi editor/MSWORD(This is the source of the
html file whose output u r looking at now,
what is written by someone( here by me). This source file is
not having same look as its output.) This source file has
different TAGs which dictate computer how to show things
written between TAGs when viewed in html viewer(
e.g Netscape/ Internet Explorer generally called Browser)
Look at the example of a TAG named title below :
<title>HTML Tutorial for Siuli</title>
This TAG is used to create the Title of the
page which comes in head part of the html files.
TAGs has a beginning and and an end. Beginning TAG name
is put in between a < and a > and the end TAG is put
in between a </ and a >. TAGs are written in capital
letter for good practice.
But lower case letter and upper case letter works in same way.
In Head you can give description of your page,
the name of your page, e.g this page has a name "HTML Tutorial
For Siuli". So when u open this page in
Netscape/Internet Explorer, the Title Bar on the top
of that window has the name as HTML Tutorial
For Siuli. Look at the Title Bar of this window!
The Description of the page is not used by the
viewer of the page. But it gives a description of your
page to the internet, so that the search Engines like google,
hot-bot etc can track your page according to your description.
In Body, one have to write things which are
visible. You can put
1. Header( It has many types as
2. Paragraph, where you can write texts.
3.Tables: where you can put the things in row-column format.
4. Image/ Photos : here you can put Images of the
formats .jpg. .gif, .bmp etc on your page which will be visible.
5. A Link : This is the entity for which
The Pages are called HTML. This is a link to another .html page/
or a link to an image or a link to a document etc.
6. List : a list of lines starting with a number
each, a numbered item list basically. ( Following has
All above entities, the head, the body are put into an html
file through TAGs. There is TAGs( is meant for the pair
for TAGs) for the HTML file
beginning and end, there is TAGs for head beginning and end.
There is TAGs for body begin and end.
TAGs for paragraph beginning and end. There are TAGs for
table beginning and end, list begin and end etc.
The beginning TAG specifies some properties for the contents
in between the TAG-pair( e.g start of a paragraph,
font color etc.) and those propertes will be continued
in the Browser unless a matching TAG(i.e end TAG) is found.
See Example 8 below to see the
format of a typical html file.
Followings are some Examples:
STOP: In Following Examples all the texts in White you
see below, are the format
to be used in the writing the html file for which the output
is shown after the white texts.
Example 1 : Following is
an Example of
creating different Headers. Look at the difference of their
In the the Source file ( ie. in .html file, here it's siuli.html file)
TAGs used are : h1, h2, h3.
The source file has following TAGed lines to make following output
to the Browser.
<h1>This is headr One </h1>
<h2>This is headr Two </h2>
<h3>This is headr Three </h3>
<h4>This is headr Four </h4>
Ouput in Browser :
This is header One
This is header Two
This is header Three
This is header Four
Example 2 : Following is an Example
TAGs used for making paragraph
are are :
<p> Texts for the
This is a paragraph. This is not aligned.
But the default alignment is left. The main problem with Auto
rickshaw puller in Delhi is that they say opposite what
They will not go by meter when Govt imposes so, they used to opted
to be hired
when there was no law of meter. If you talk abt a shorter road,
they think that you are going to make them fool, so they
will take you through longest route. The main problem is that they
are mostly illeterate. So, before imposing laws on them ,
Govt should give proper Education to Auto rickshw pullars.
What's a permanent solution.
When i see a good autorickshaw pullar,
I got surprised.
This is also a paragraph, but this is centered aligned.
When you are aked to write something without a topic,
it's very difficult to start with but there is freedom
to write a lot, u can write the poem u read in primary
school. But you may not get credit for it writing a lot.
Again , when your writing has lots of speeling mistakes,
u can't win reader's heart, whatever good thing you write.
This is also a paragraph but aligned to right.
NOTE : Inside beginning tag, u can specify
the alignment attribute ( look below
to see what's an
attribute is )
value you want i.e. u can write<p align="right">
to make the paragraph aligned to center. This can be done for the
TAGs : img( for image), p( for paragraph),table( for table),
Example 3 : Following is an Example of
TAGs used for making table
are are :
<tr><td> Contents of First Row First Coloumn
</td><td> Contents of First Row 2nd colomn</td>
... other columns </tr>
Write other rows in same way ...
NOTE : td TAG is for colomn, tr TAG for row.
| Row1 Column1||Row 1 Column 2|
| Row2 Column1||Row 2 Column 2|
| Row3 Column1||Row 3 Column 2|
Example 4: Following is an Example of
TAGs used for image
<img src="image filename" align="what you want
of left/right/center" width="an integer" height=" an integer">
Example 5: Following is an Example of
TAGs used for putting link with an image/ text
<a href="http://the website name you want to link
with following text"> Text to hold link to be seen to Viewer ,
in the example it's "Here"
If you click Here U will go to
Example 6: Following is an Example of
TAGs used for making list
<li> First Item in list </li>
<li> Second Item in list </li>
<li> Third Item in list </li>
Following is a list :
- start with a title
- add headings and paragraphs
- add emphasis to your text
- add images
- add links to other pages
- use various kinds of lists
Example 7 : Following is an Example of
making different colored fonts
TAGs used for making coloured fonts
<font color="#color code, see NOTE below how to
write color code"> Texts to be shown in color </font>
This is Black.
This is Red.
This is Green.
This is Blue.
NOTE : Color code is a word of 6 characters, first Two for RED, 2nd Two for
Green, Last 2 characters for Blue. The Charasters can take value from
00 to ff. So, to get a Particular color, u take a combination of these
colors like : 26ff89, 3f74a8 etc.
Click Here to get color
code for a particular color.
Other TAGs and Special Characters:
1. HTML file Beginning <html> HTML file End : </html>
2. Body Beginning : <body> Body End : </body>
3. Head Beginning : <head> Head End : </head>
4. Title Beginning <title> Title End : </tltle>
5. <br> This TAG will produce a new line i.e. a line break.
NOTE : There is no end TAG for it.
6.& nbsp ; will produce a space in Viewer's page.
7. & gt ; and & lt ; will produce a >and < respectively
8. <-- What ever Written here won't be shown to Viewer,
--> : This is used for writing comments.
9.<b> Bold texts </b> This will make text bold like :
10. <u>Underlined Texts </u>This will make
11. <i> Italics Texts</i>This will make text italics:
12. Another way of alignning center :
Centered align beginning <center> Everything written here
will come being center alligned.
Advanced features : Some Attributes
Note : All Values of attributes will be inside
double quote e,g width="100"
1. align : this can take value right, left, center
used with TAGs : img, p, table
2. color : this can take a color code used with font TAG
3. height : this can take a integer value used with img TAG
4. size : this is used in font TAG and can take integer value
5. width : this can take integer value used in font TAG
6. bgcolor : this take color code and used with
body, table, td, tr TAGs, this determines the back ground color
of a page, if not specified, a default color is used.
7. background : can take a image file name e. g background="s.jpg".
This is used with body TAG and makes the image as the background
of the page
8. target : this is used in frames in link TAG( a) ( See FAQ 3
below for frame concept). This can take the name of an
frame or "_blank". When a link tag : a has target attribute's
value ="_blank", then when the link is clicked, the linked page is
opened in new window.
Example 8: As You have learned
all the TAGs and
their attributes following is an example of an html file
<title>Give Title of the Page
<body bgcolor="ffffff" >
This will come in Header One Format.
This is a paragraph which is aligned left. <br>
background will come in white color as ffffff <br>
color code for white. This is my first HTML page.<br>
paragraph has three line breakes.
You can put Tables, lists, links, images inside body.
Following are some FAQ
FAQ: 1. How to see the souce of a html file from Viewer/Browser
like Netscape/Internet Explorer etc.?
You can see the source of an html file from Netscape/Internet Explorer.
Go to a websit say, http://www.stat.ufl.edu in Netscape /
In Netscape you follow the menu : View--> Page Source,
the html file will be shown in a new Window.
In Internet Explorer follow the
menu View--> Source.
FAQ: 2 What's the file name opened in my
Browser when i first entered a website?
This is the file named index.html.
and http://ww.stat.ufl.edu will show
same thing on Browser.
FAQ : 3 Sometimes It's seen that, in a webpage,
some parts are static i.e
never changes, and some part are dynamic, i.e a link on
static part is clicked
the Dynamic part changes. How does it happen? an example
can be found from
These are done by dividing a page into frames. These are advanced
concepts in HTML.
FAQ : 4 How to put email address link in Webpage?
Suppose we want, when it's clicked on the word siuli,
it will open composer
to mail you. Following is the tag :
In Browser it will look like:
FAQ 5: How to put link on a image?
i.e when an image is clicked a new page
The TAG is shown below :
src="image file name"></ai>
Example if u click on following image it will
take you to ur homepage in www.stat.ufl.edu.
PLEASE NOTE: Here I have used the target attribute, so when
clicked on the image, linked page is opened in new window.
the source TAG is as follows in siuli.html file :
<a href="htpp://www.stat.ufl.edu/smukhopa" target="_blank">
<img src="ufl.gif" height="150" width="100"></a>
I guess you have enjoyed to read the tutorial for HTML page writing.
All the texts are written by me. It's written for you only.
This is my first try to make a tutorial for
some technical thing for someone. To make a presentation is a
different thing, as I present it. Tutorial is meant to be
independent. So, if you find any difficulty in understanding,
do mail me.
As i will
make a Homepage for you, i will try my best to make it excellent,
you may heve to maintain it putting updates etc,
so I make this tutorial for you.
DISCLAIMER : This tutorial is written very fast, may be having lots of
spelling mistakes and grammartical mistakes.
you are most encouraged to bring those to me. This
tutorial is for beginners so, you may find some familiar things.
But to complete the tutorial i have put all the things.