Make your own free website on Tripod.com

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.

HTML 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 :
1.Head
2.Body
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 following examples)
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 an exampole)

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 looks!

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 of Different Paragraphs.

TAGs used for making paragraph are are :
<p> Texts for the paragraph </p>

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
government says. They will not go by meter when Govt imposes so, they used to opted to be hired for meter
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),
ul(for list)


Example 3 : Following is an Example of Table

TAGs used for making table are are :
<table>
<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 ...
</table>

NOTE : td TAG is for colomn, tr TAG for row.

Row1 Column1Row 1 Column 2
Row2 Column1Row 2 Column 2
Row3 Column1Row 3 Column 2

Example 4: Following is an Example of Image

TAGs used for image are :
<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 Link

TAGs used for putting link with an image/ text are :
<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" </a>


If you click Here U will go to www.stat.ufl.edu.

Example 6: Following is an Example of list

TAGs used for making list are :

<ul>
<li> First Item in list </li>
<li> Second Item in list </li>
<li> Third Item in list </li>
...
</ul>


Following is a list :

Example 7 : Following is an Example of making different colored fonts

TAGs used for making coloured fonts are :

<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 : Bold Texts
10. <u>Underlined Texts </u>This will make text underlined
11. <i> Italics Texts</i>This will make text italics: Italics Texts
12. Another way of alignning center :
Centered align beginning <center> Everything written here
will come being center alligned. </center>

Advanced features : Some Attributes To TAGs




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


<html>
<head>
<title>Give Title of the Page
</title> </head>


<body bgcolor="ffffff" >
<h1> This will come in Header One Format. </h1>
<p align="left">
This is a paragraph which is aligned left. <br>
The page's background will come in white color as ffffff <br>
is the color code for white. This is my first HTML page.<br>
This paragraph has three line breakes.
</p>

You can put Tables, lists, links, images inside body.
</body>
</html>

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 / Internet Explorer. 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.
So, http://www.stat.ufl.edu/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 this Homepage.

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 :
<a href="mailto:smukhopa@stat.ufl.edu">siuli</a>

In Browser it will look like:
siuli

FAQ 5: How to put link on a image? i.e when an image is clicked a new page will come.

The TAG is shown below :
<a href="http://websitename"><img 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.

-suman