Html tutorial

of 8
Prof Mukesh N Tekwani
H T M L
Introduction:
1. HTML - Hyper Text Markup Language.
2. Developed by Tim Berners-Lee
3. Used for creating documents for World Wide Web. Documents can be
“active”, i.e., they can contain moving text, pictures, sound, movie, forms, etc.
4. Documents can be linked to other documents – hyperlinks. The various
documents may be on the same computer or on another computer in another
part of the world. A part of the document can also lead to another document.
5. HTML is used for working with non-linear information.
6. HTML documents can be viewed using a web browser such as Internet
Explorer, Netscape Navigator, Opera, etc.
Advantages of HTML:
1. HTML is easy to learn.
2. HTML document is created using a simple text editor such as Notepad. No
expensive software is required for creating or viewing HTML documents.
3. Different HTML documents can be linked whether they are on the same
computer or on different computers in other parts of the world.
4. HTML pages can be updated easily without having to change the whole
document.
5. HTML contains powerful facilities for document layout, hyper linking and
including not only text but also pictures, movies, sound, and animation.
6. HTML pages can be used to collect information by using forms.
Structure of a document:
Every HTML document has two parts: a head and a body. These two parts contain
the various tags and the text. Tags are enclosed in angular brackets < and >.
Tags:
1. A tag is a unit of markup. An HTML document is made up of text and tags.
Tags are a set of symbols which have a specific meaning in HTML.
2. Tags are enclosed between angular brackets < and >. E.g., <B>

of 8
3. Most tags are in pairs: a start tag and an end tag. E.g., <U> and </U>
4. Tags can be nested within each other. E.g., <B><I> Welcome </I></B>
5. Certain tags also have an attribute which affect the tag’s behaviour. E.g.,
<FONT COLOR = “#FF0000”>
<HTML> Tag:
Every HTML document begins with this tag and ends with the </HTML> tag.
<HEAD> Tag:
This tag appears first in an HTML document. It contains the <TITLE> tag.
The closing tag is </HEAD>.
<TITLE> Tag:
This tag is used to display text in the title bar of a window. The closing tag is
</TITLE>.
<BODY> Tag: This tag indicates the beginning of the body of an HTML document.
The closing tag is </BODY>.
To change the color of the page:
<BODY BGCOLOR = “#000000”>. This will set the page color to black.
To set the page color to yellow: <BODY BGCOLOR = “#FFFF00”>
Headings <H1> to <H6>
There are six HTML heading styles marked with the tag <H1>, <H1>, <H1>, <H1>,
<H1>, and <H6>. <H1> tag shows the heading in the largest size while <H6> shows
heading in the smallest size. A heading always starts on a new paragraph.
<P> Tag for New Paragraph
This tag is used to start a new paragraph.
<BR> Tag for New Line
This tag starts a new line within the current paragraph but does not start a new
paragraph.
Text Formatting Tags:
1. <PRE > Preformatted Text Tag
This tag is used to make your text appear the way you want it.
2. <HR > Horizontal Line Tag
This tag is used to draw a horizontal line across the screen. The attributes
are: width and size.
E. g., <HR width = 50% SIZE = 3>

of 8
This will draw a line in the center of the screen occupying 50% of screen
width, and having a line thickness of 3 pixels.
3. <OL> Ordered List Tag
An ordered list is used to indicate a sequence of events or list of items in
order.
E. g., Suppose we wish to display the following list of items in order:
1. FYJC
2. SYJC
3. FYBSc
4. SYBSc
5. TYBSc
We can create the above list as follows:
<OL>
<LI> FYJC
<LI> SYJC
<LI> FYBSC
<LI> SYBSC
<LI> TYBSC
</OL>
4. <UL> Unordered List Tag
An unordered list is used to indicate a list of items that are related to each
other but the sequence is not important. A bulleted list is created.
<UL>
<LI> Scanner
<LI> Printer
<LI> Monitor
<LI> Hard Disk
<LI> CPU
</UL>
The output is:
• Scanner
• Printer
• Monitor
• Hard Disk
• CPU
To change the bullet to a square, we can change the above code as follows:
<UL TYPE = SQUARE>

of 8
To change the bullet to a hollow circle, we can change the above code as
follows:
<UL TYPE = CIRCLE>
To change the bullet to a solid bullet, we can change the above code as
follows:
<UL TYPE = DISC>
5. <FONT> Font Tag
This tag specifies the name, size and color of the font to be used. The
FONT tag has the following attributes:
SIZE – specifies the size of the text.
FACE – Specifies the font to be used to display the text. If the specified
font is not available on the client computer, the browser substitutes a
similar font.
E.g., <FONT FACE = “Courier”> Welcome </FONT>
COLOR – Specifies the color of the text. We can specify the color code
using hexadecimal digits such as #FF0000 for Red, #00FF00 for Green,
#0000FF for Blue, etc.
These three attributes can be combined into a single statement such as:
<FONT FACE = “Courier” COLOR = “#FF8003”> Welcome </FONT>
Linking Tags:
<A > Tag Anchor
The anchor tag is used to create hyperlinks to other documents or to parts of the same
document. A hyperlink appears in a different color from the rest of the text. When the
mouse pointer is moved over a hyperlink, the pointer turns into a finger. When we
click the mouse button over a hyperlink, the browser displays another document. This
other document may be on the same computer on another computer.
To create a bookmark:
<A NAME = “Top”>Text </A>
To create a hyperlink to this bookmark:
<A HREF = “#Top”>Go Top </A>
To create a link to another document, say DOC2.HTM (assume current
document is DOC1.HTM)
<A HREF = “DOC2.HTM”> Text </A>

of 8
To create a link to a book mark another document, say DOC2.HTM (assume
current document is DOC1.HTM)
<A HREF = “DOC2.HTM#Prices”> Text </A>
Graphics in HTML Documents
Graphics are not inserted directly in an HTML document. The document contains
special tags which reference the image to be inserted by the browser when the page is
opened. The two most common types of graphics formats used for HTML documents
are JPEG (Joint Photographic Experts Group), and GIF (Graphics Interchange
Format).
To put an image in a document:
<P ALIGN = “CENTER”>
<IMG BORDER = “0” SRC = “FILE://STARS.GIF” WIDTH = “200” HEIGHT =
“165” ALT = “Stars”>
</P>
To insert an image as a background in a document:
<BODY BACKGROUND = “FILE:///Z:/SYJC/COMMON/PICTURES/MOON.JPG>
Superscript and Subscript Tags
Superscript Tag <SUP>
This tag is used to display characters in superscript mode. Characters enclosed
between the <SUP> and the </SUP> tag appear in superscript mode. E.g., to display
x2
, the HTML code is
x <SUP>2</SUP>
Subscript Tag <SUB>
This tag is used to display characters in subscript mode. Characters enclosed between
the <SUB> and the </SUB> tag appear in subscript mode. E.g., to display H2, the
HTML code is
H <SUB>2</SUB>
Tables in HTML Documents
1. Every table begins with the <TABLE> tag and ends with the </TABLE> tag.
2. The attributes of the table tag allow us to specify the following:
a. Border,
b. Distance between the cells,
c. Width and height of the table in pixels or as a percentage of the total
screen size.
3. Table rows are marked by the <TR> tag an d the end of a row is indicated by the
</TR> tag.
4. Each row’s columns are marked by the <TD> tag and the closing </TD> tag.

of 8
The following HTML code creates a table with 3 rows and 3 columns:
<TABLE>
<CAPTION>India’s Performance at the Olympics</CAPTION>
<TR>
<TD WIDTH="33%">Row 1, Col 1</TD>
<TD WIDTH="34%">Row 1, Col 3<TD>
</TR>
<TR>
<TD WIDTH="33%">Row 2, Col 2<TD>
</TR>
<TR>
</TR>
</TABLE>
To merge cells of a row:
<TR>
<TD WIDTH="33%">Data 1</TD>
<TD WIDTH="67%" COLSPAN="2">Data 2</TD>
</TR>
Example:
Write the HTML code to display the following table:
Sales by Region
REGION
YEAR
2001 2001 2003
East
West
North
South

of 8
HTML code is as follows:
<HTML>
<BODY>
<TABLE BORDER="1" WIDTH="100%">
<CAPTION>SALES BY REGION</CAPTION>
<TR>
<TD WIDTH="25%" ROWSPAN="2">REGION</TD>
<TD WIDTH="75%" COLSPAN="3">YEAR</TD>
</TR>
<TR>
<TD WIDTH="25%" ALIGN="CENTER">2001</TD>
</TR>
<TR>
<TD WIDTH="25%">
<P ALIGN="CENTER">EAST</TD>
<TD WIDTH="25%" ALIGN="CENTER">&NBSP;</TD>
</TR>
<TR>
<TD WIDTH="25%">
<P ALIGN="CENTER">WEST</TD>
</TR>
<TR>
<TD WIDTH="25%">
<P ALIGN="CENTER">NORTH</TD>
</TR>
<TR>
<TD WIDTH="25%">

of 8
<P ALIGN="CENTER">SOUTH</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Html tutorial

More Related Content

What's hot (20)

Similar to Html tutorial (20)

More from Mukesh Tekwani (20)

Recently uploaded (20)

Html tutorial