HTML
-Mrs. Minakshi Godbole
What is HTML
• It is Hyper Text Markup Language.
• It is used to create web pages i.e. documents/pages displayed in a web
browser.
• A collection of webpages, connected together in various ways is called
website.
• Computer that hosts website on internet is web server.
HTML
• Hyper Text means the text which contains references and links with
related text and graphics.
• Markup language refers to a text encoding system consisting of set of
symbols inserted in the text to tell the formatting of text.
• Thus HTML is not a programming language like C or C++. But it is a
markup language which tells the formatting and design of webpage.
• It can be made interactive by adding scripts like vb script or java script
in the html code.
Coding and running HTML program
• Any text editor like note pad can be used to write HTML program.
• The file must have extension .htm or .html and not .txt.
• HTML code(webpage) can be run using any browser like internet
explorer or chrome or Netscape navigator.
Advantages of HTML
For creating HTML document, only text editor needed. No special software
is required.
HTML document can be created on any hardware platform using any text
editor.
Contains powerful formatting facilities.
Required HTML pages can be updated easily, without changing whole
document.
Any HTML document can be traversed due to hyper linking facility is
available.
Independent work can be done and need not to worry about editing
program.
HTML will not cost anything for its use. There are no expensive licenses to
buy or no upgrade to purchase.
HTML is easy to learn.
Limitations of HTML
HTML is not programming language in true sense.
Any simple calculation cannot be done in HTML.
It cannot be used to display even date.
The interactive web pages cannot be built by HTML.
The web pages developed in HTML cannot behave like an application.
The web pages developed in HTML do not have their own interface.
Hyperlink is provided in HTML. But for that we need a trip to server
at each step.
Also as there is no compiler or so, programmer will not be told about
syntax errors. Simply it will not display the webpage in required
format for which mistake is done.
HTML TAGs
Markup language uses tags where a tag is a single unit of mark-up.
HTML tags are like keywords which define the format in which web
browser will display the text or other contents.
The tag keywords which specify the formatting effect, are generally one or
tow letters enclosed in angle brackets < >
There are two types of tags in HTML
i) start tag <tag > ii) End tag </tag>
Start tags are used to begin an effect and end tags are used to end that
effect. Name of end tag is same as that of start tag but the name of end tag
is preceded by forward slash(/).
e.g. <I> is italic tag. The text written between start tag <I> and end tag </I>
will be displayed in Italic.
Structure of HTML Program
<HTML>
<HEAD>
<TITLE>
Title of the document
</TITLE>
</HEAD>
<BODY>
Actual document
</BODY>
</HTML>
Basic Tags used in HTML document
1. <HTML>
2. <HEAD>
3. <TITLE>
4. <BODY>
<HTML> Tag
Definition and Usage <HTML>
<BODY>
• The <html> tag tells the browser
MY FIRST HTML DOCUMNT
that this is an HTML document.
</BODY>
• The <html> tag represents the </HTML>
root of an HTML document.
• The <html> tag is the container
for all other HTML elements
<Title> tag
• College Profile is the title given for the webpage in figure.
Tag <HEAD> </HEAD>
• <Head> tag defines the header area of the page which is not
displayed within the page itself in the browser.
• In the <Head> section, <Title> tag can be used for giving the title for
the web page.
• E.g.
<html>
<head>
<title>Welcome to First Web Page</title>
</head>
</html>
12
Tag <TITLE> </TITLE>
• The <title> tag defines the title of the document.
• Title is displayed in the browser toolbar.
• Title should be descriptive as it is frequently used by web indexing
and searching programs to name your web page.
• Also it should not be very big like paragraph.
• There should not be extra space between title tag and text of title.
13
Tag <BODY> </BODY>
• The actual content of the web page that will be displayed on
browser will appear in body section of document.
• The body section start with <Body> tag and ends with </Body> tag.
• The <body> element contains all the contents of an HTML
document, such as text, hyperlinks, images, tables, lists, etc.
14
Attributes of Tags
• Many HTML tags can have attributes.
• Attributes are the special keywords used which give some special
properties or extra information related to the tag.
• The attributes of a tag are always placed within the opening tag.
• Most attributes consist of a name and a corresponding value,
formatted as attribute="value". The value is typically enclosed in
double quotes.
• They are generally optional unless specifically required by the tag. Eg.
Href attribute of a tag or src attribute of img tag.
Important attributes of Body tag
Attribute Properties Description
link color Specifies the color of an active link in a
document
Vlink Color Specifies color of visited link
background URL Specifies a background image for a
document
bgcolor color Specifies the background color of a
document
Text Color Defines the color of text in the
document. 16
Bgcolour attribute of Body tag-
<HTML>
<HEAD>
<TITLE> HTML Class </TITLE>
</HEAD>
<body bgcolor="pink" >
-----
-----</body>
• This will set pink colour as a back
ground colour of the whole
page.
17
Various Tags Used in HTML
Heading tag <Hn> </Hn>
• This tag is used to give headings and subheadings in the web page.
• There are six levels of headings from <H1> to <H6>
• This is a paired tag.
• <H1> is the largest heading and the heading size decreases as heading
number increases.
• <h6> is the smallest heading size.
• Heading are displayed in bold.
• Browser adds one blank line before and after the heading while
displaying it.
• Attribute used : align (center, left, right)
Heading tag <Hn> </Hn>
<H1 ALIGN=CENTER> HEADING 1
</H1>
<h2 align=right> heading 2, right
aligned</h2>
<H6> HEADING 6 </H6>
• H1 and h2 tags are with
attribute align whereas h6 is
without attribute displayed left
aligned by defalult.
Paragraph tag <P> </P>
• <P> tag is used to create a paragraph in web page.
• While writing html code file if we change a paragraph in the text
editor like note pad, it has no effect on web page means it doesn’t
change para in web page.
• To change or to create a new paragraph in the matter on web page
we must use <p> tag.
• Browsers automatically add a single blank line before and after each
<p> element.
• It has end tag </P> but can work without it.
• The main attribute associated with the paragraph is the align
attribute. It will have values left, center or right to align the para.
Break tag <BR>
• <BR> tag used to break the line. e.g.
• First line <p>Second line
• Cursor is taken to the new line and Will display in browser
next matter is displayed on new
line. It doesn’t change the First line
paragraph.
Second line
• The difference between <p> tag
and <BR> tag is that with <p> tag a
blank line is inserted before the • First line <BR> second line
next line and with <br> tag matter will display
is displayed on immediate next
line. First line
• It has no end tag. Second line
Horizontal rule tag <HR>
• The <hr> tag represents a thematic break • E.g.
or horizontal rule in an HTML document. Group 1 <br> Physics
<br>Chem<br>Maths
<HR>
• It has no closing tag. Group 2 <br> Physics
<br>Chem<br>Bio
Will be displayed as
Group 1
• Typical attributes of HR tag are- align,
Physics
color, size and width.
Chem
Maths
Group 2
Physics
Chem
Bio
Tag <PRE> </PRE>
• It is used to pre format the text. The text appearing between start tag
<pre> and end tag</pre> is displayed in mono space form.
• It displays the text in exactly same format as defined in source HTML
document.
• E.g. <pre> 1
1 2 1
1 2 3 2 1 </pre> will display in web page as it is like
• 1
1 2 1
1 2 3 2 1
Text formatting tags
1. <B> tag: The text appearing between start tag <B> and end tag</B> will be displayed in bold
letters.
e.g. <b> This is for bold</b> --output This is for bold
2. <I> tag: The text appearing between start tag <I> and end tag</I> will be displayed in Italics.
e.g. <i> This is for Italics</i> --output This is for Italics
3. <U> tag: The text appearing between start tag <U> and end tag</U> will be underlined. Generally
browser indicates hyperlinks in web pages by underling them. So it is generally avoided.
e.g. <u> This is for underlining</b> --output This is for underlining
<b><U><I> All three formats together.</b></U></I> -- output All three formats together.
Tags <EM> and <STRONG>
1. <EM> tag:-
The text appearing within <Em> (start tag) and</Em> (end tag) will be displayed in italics. This tag
is used to emphasize the text.
The main difference between <Em> tag and <I> tag is that text to speech browser gives spoken
emphasis to the text within emphasis tag, while no such emphasis given to the text within italic
tags. A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
2. <Strong> tag:-
The text appearing within <Strong> (start tag) and</Strong> (end tag) will be displayed in bold.
This tag is used to create strong emphasize.
The main difference between <Strong> tag and <B> tag is that text to speech readers gives
strident pronunciation to the strong, while no such strident pronunciation given to the text within
bold tags.
Tags <Big> and <Small>
1.1. <Big> tag:-
The text enclosed within <Big> (start tag) and</Big> (end tag) will be displayed in
one font size larger than current font size.
This tag has the same effect as <FONT SIZE=“+1”> . If current font size is 5 then
with big it becomes 6.
*If size is already largest then this tag is ignored.
1.2. <Small> tag:-
The text enclosed within <Small> (start tag) and</Small> (end tag) will be
displayed in one font size smaller than current font size.
This tag has the same effect as <FONT SIZE=“-1”> . If current font size is 5 then
with small it becomes 4.
If size is already smallest then this tag is ignored.
Tag <Strike>
The text enclosed within <Strike> (start tag) and</Strike> (end tag) or
<S> (start tag) and</S> (end tag) would have a line drawn through the
middle of the text.
E.g. <STRIKE> strike-through text</STRIKE>
it will be displayed: strike-through text
Superscript tag <sup> and Subscript tag <sub>
• <SUP> tag : The text enclosed within <Sup> and </Sup> is displayed
in superscript form.
e.g.
2 <Sup> 2</Sup> = 4 will be displayed as
• 22=4
• <SUB> tag: The text enclosed in <sub> and </sub> tag is displayed as
subscript format in browser. Subscript is bit lower than the normal
text.
e.g. H <Sub> 2</Sub>SO <sub>4</sub>
it will be displayed as H2SO4
Tag <Font> </Font>
• The font tag is used to change the color, size, and style of a text .
• the font tag in HTML has three primary attributes, namely: size, color,
and face.
1. Size: This attribute specifies the size of the font.
• Values could range from 1 (smallest) to 7 (largest). The default size is typically 3.
• Relative values like +1 or -2 could also be used to adjust the size relative to the
base font size.
2. Color: This attribute defines the color of the text.
• Values could be color names (e.g., "red", "blue") or hexadecimal color codes
(e.g., "#FF0000" for red).
Tag <Font> </Font>
3. Face: This attribute specifies the typeface or font family to be used for
the text.
• The value should be the exact name of the desired font (e.g., "Arial", "Times New
Roman", "Verdana").
• Multiple font names could be provided as a comma-separated list, acting as fallbacks if
the primary font was not available on the user's system.
E.g. This is current font face, size and colour.
<P> <Font face=“Arial Narrow” size=“5” color=“green”> This is new para in
Arial Narrow font with size 5 and in green colour. </font>
This will be displayed in browser like-
This is current font face, size and colour.
This is new para in Arial Narrow font with size 5 and in green colour.
Tag <marquee>
• It is used for scrolling the text and images on screen from right to left by default.
• The text written between <marquee> and end tag </marquee> will scroll on screen in horizontal
line.
Attribute Properties Description
Behavior Scroll/alternate/slide Indicate the type of scrolling
Direction Left/ Right This attribute specifies scrolling
direction of the Marquee text.
Scroll amount Integer value(in number of pixels) Indicate how far marquee text shift
between redraws
Height Integer value(in number of pixels) Height of the rule in pixels or
percentage of screen width
Width 100% Width of the rule in pixels or
percentage of screen width
Bgcolor color Specifies the background color of a
document
Anchor tag<a>
• The <a> tag, or anchor tag, creates hyperlinks to link pages together or to
different sections of the same page.
• The most crucial attribute of <a> tag is href, which specifies the destination
URL. (Remember <A> cannot be written without attribute href)
• The text or image enclosed between starting tag<A> and ending tag</A>
acts as a link which when clicked opens the web page given in href
attribute.
• With most browsers, the text within these tags is displayed in different
colour and underlined.
• By default, links will appear as follows in all browsers:
i. An unvisited link is underlined and blue
ii. A visited link is underlined and purple
iii. An active link is underlined and red
Anchor tag<a> </a>
• Other attribute of <A> tag is Title
• Title:- The value of this attribute is displayed as tool tip text or at the
bottom of the browser window, if the user points to the anchor with
the mouse but doesn’t click on it.
• E.g.
• <a href=“[Link]”> University </a>
In this example University word will act like an anchor or link which
will be displayed in blue colour and underlined. Clicking on it will
open the page of [Link] site.
• We can also give webpage like <a href=“[Link]”> xyz</a> which will
open [Link] page after clicking xyz.
image tag <IMG>
• It is used to include graphic images in the body of the web page.
• There are two types of images:
1. Inline image: It occur in the middle of a line of text. If a image is
large one, then the line becomes very tall.
2. Floating images: It cause text to wrap around the image. The
paragraph will flow around the image for several lines, if the
image is large.
• The most important and required attribute of <img> tag is src. Which
tells the name or source of image to be displayed.
• <Img> tag always comes with srs attribute.
Attributes of <img> tag:
Attribute Properties Description
SRC Image path This defines the name of the image file. If file is in same folder as of
HTML document, then only the file name is to be specified. Otherwise
complete path or URL.
Height Integer value(in Height of the image in pixels
number of pixels)
Width Integer value(in Width of the image in pixels
number of pixels)
Border Integer value Specifies the border of the image
Align Left/right/top/botto This attribute describes how the image should be aligned with respect to
m/center surrounding text.
HSPACE Integer value(in is for Horizontal Space on both sides of the image specified in pixels. A
number of pixels) setting of 5 will put 5 pixels of invisible space on both sides of the image
VSPACE Integer value(in is for Vertical Space on top and bottom of the image specified in pixels. A
number of pixels) setting of 5 will put 5 pixels of invisible space above and bellow the
image.
Lists
Types of List:-
1. Unordered list.
2. Ordered list.
3. Defined list.
4. Nest Lists. 37
List Elements
HTML supplies several list elements. Most list elements are composed
of one or more <LI> (List Item) elements.
UL : Unordered List. Items in this list start with a list mark such as a
bullet. Browsers will usually change the list mark in nested lists.
<UL>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
• List item …
• List item …
38
List Elements
You have the choice of three bullet types:
disc(default) • , circle , square .
These are controlled in Netscape Navigator by the “TYPE” attribute for the
<UL> element.
<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
List item …
List item …
39
List item …
List Elements
OL: Ordered List. Items in this list are numbered automatically by the
browser.
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
1. List item …
2. List item …
3. List item
You have the choice of setting the TYPE Attribute to one of five
numbering styles. 40
List Elements
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
41
List Elements
You can specify a starting number for an ordered list.
<OL TYPE =“i”>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
<P> text ….</P>
<OL TYPE=“1” START=“3”>
<LI> List item …</LI>
</OL>
42
List Elements
i. List item …
ii. List item …
Text ….
3. List item …
43
List Elements
• DL: Definition List. This kind of list is different from the others. Each item in a DL consists of one or
more Definition Terms (DT elements), followed by one or more Definition Description (DD
elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>
HTML
Hyper Text Markup Language
DOG
A human’s best friend! 44
Nesting Lists
You can nest lists by inserting a UL, OL, etc., inside a list item (LI).
EXample
<UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI>
45
</UL>
What is the o/p of following code?
<html> Output is :
<body>
<H2 align ="center"> COMPUTER
DEVICES</H2>
<UL>
<LI>INPUT DEVICES
<OL>
<LI>Keyboard
<LI>Mouse
</OL>
<LI>STORAGE DEVICES
<OL type="i">
<LI>Hard disk
<LI>Floppy disk
<LI>Compact disk
</OL>
<LI>OUTPUT DEVICES
<OL type="A">
<LI>Screen
<LI>Printer
</OL>
</UL> 46
</body>
</html>
To insert table , tag <Table> </Table>
• The <TABLE> </TABLE> element has four sub-elements:
1. Table Row<TR> </TR>.
2. Table Header <TH> </TH>.
3. Table Data <TD> </TD>.
4. Caption <CAPTION> </CAPTION>.
• The table row elements usually contain table header elements or
table data elements.
47
Inserting Table in webpage:
• While inserting table in web page, <table> tag is used.
• Table is created row wise using <TR> tag.
• For each row columns are created using <TD> tag (data in rows).
• If first row is heading row, then for that <TH> tag is used which also
displays the text by default bold and center aligned.
• Apart from header row other rows’ data should be given using <td>
tag.
Tables Attributes
1. Width: you can specify the table width as an absolute number of pixels or a
percentage of the document width. You can set the width for the table cells as
well.
• E.g.<table width=“50”> (absolute value in pixel)
• OR .<table width=“80%”> percent value of document width
2. Border: Draw an outline around table row and cell which specifies the border in
pixels. By default table has no border.
• E.g.<table Border=“2”>
3. CellSpacing: Cell Spacing represents the space between cells and is specified in
pixels. 49
• E.g.<table Border=“2” cellspacing=“4”>
Table Attributes
1. CellPadding: Cell Padding is the space between the cell border and the
cell contents and is specified in pixels.
• E.g.<table Border=“2” cellpadding=“2”>
2. Align: Decides the alignment of the table. By default it is left. tables
can have left, right, or center alignment.(This decides the alignment of
the complete table on the screen and not the alignment of matter in
the table)
3. BGColor: Some browsers support background colors in a table.
4. BorderColor :Give color to the border. 50
• E.g.<table Border=“3” bgcolor=“blue” bordercolor=“red”>
Table Caption
• A table caption allows you to specify a line of text that will appear
centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Caption of My Table </CAPTION>
• The Caption element has one attribute ALIGN that can be either TOP
(Above the table) or BOTTOM (below the table).
51
Table Data and Table Header Attributes
• Colspan: Specifies how many cell columns in a row are to be spanned(merged).
E.g. <tr>
<td>column 1
<td colspan=2>column2 ABC
-this will span or merge cells in 2 columns, 2nd and 3rd for that specific row
and will contain matter ABC
• Rowspan: Specifies how many cell rows in a column, are to be spanned(merged).
E.g. <tr>
<td> column 1
<td rowspan=2> column2 -ABC
-this will span or merge cells in 2nd and 3rd rows of 2nd column and will
52
contain matter column2-ABC.
Table Data and Table Header Attributes
• align: Used for horizontal alignment (e.g., left, center, right).
• valign: Used for vertical alignment (e.g., top, middle, bottom).
•
• width: Used to define the width of a cell..
• height: Used to define the height of a cell.
• bgcolor: Used to set the background color of a cell.
• background: Used to set a background image for a cell. 53
Special Points to Note
• TH, TD and TR should always have end tags.
In many browsers omission of them will mess up the formatting of the table .
• In particular, you should always use end tags if you have a TABLE within a TABLE
• By default, tables are drawn without border lines. BORDER attribute of table tag
should be used to draw the lines.
• By default, a table is displayed at the left margin of the screen. It can be placed
right or center aligned using align attribute of the table tag.
54
What will be the output?
<TABLE BORDER width=“750”>
<TR> <TD colspan=“4” align=“center”>Page Banner</TD></TR>
<TR>
<TD rowspan=“2” width=“25%”>Nav Links</TD>
<TD colspan=“2”>Feature Article</TD>
<TD rowspan=“2” width=“25%”>Linked Ads</TD>
</TR>
<TR>
<TD width=“25%”>News Column 1 </TD>
<TD width=“25%”><News Column 2 </TD>
</TR>
55
</TABLE>
The Output
56
