Hyper Text Markup Language (HTML)
HTML is a tag
based markup language standardized by W3C (World Wide Web Consortium) with
latest version 4.01. Used to provide effects on different kind of contents used
on the web including Text, Sound, Images, and Animation etc.
It provides static contents without any manipulation power. It
is case in-sensitive.
What is Tag?
A tag
is code defined by W3C which has the fix meaning interpreted by some Web
Browser. The tag is always enclosed in < and > symbols.
<B></B>
, <I></I>, <FONT></FONT> etc. are some of the examples
of tags.
Types of Tags
1. Singular
Tag – Do not have any closing tag. E.g. <IMG>, <BR> , <HR>
etc.
2. Paired
Tag – Having opening and closing both the tags. E.g <HTML></HTML>,
<BODY></BODY> etc.
Attributes
-
Each of the tag have some set of extra properties
attached with them called Attributes.
E.g <BODY> tag provides
attributes like text, bgcolor, background etc.
-
Attributes are written inside the opening section of
the tag.
<BODY text=”red” bgcolor=”blue”>
…
</BODY>
File Extensions
-
Files are saved as .htm or .html extension
Editor and IDEs
1. Notepad
2. MS
Front Page
3. Macromedia
Dreamweaver
4. Hot
Dog
5. First
Page
Etc.
Structure of HTML
Page
-
It is divided into two sections
<HEAD></HEAD> section –
To provide tags that do not display any content on page
<BODY></BODY> section –
To provide contents displayed on the page.
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
<!-- comments-->
Tag
This
the comment tag
<HTML>…</HTML>
Tag
Start
and End of a HTML document
<HEAD>…</HEAD>
Tag
Sub tag
of <HTML> tag which defines the heading section of a HTML document. It
contains some other tag like
<TITLE>,<SCRIPT>,<STYLE>,<LINK>,<BGSOUND>,<BASE>,<META > etc within it.
<BODY>…</BODY> Tag
Sub tag
of <HTML> tag which defines the body section of a HTML document. It
contains actual data including text, graphics, sound, animations, applets and
objects within it.
Attributes of <BODY>
Some of
the tags have some more properties attached with them, called attributes.
bgcolor
= “background color”
text =
“foreground color”
link =
“color of links”
alink=
“color of active links”
vlink=
“color of visited links”
background=
“image file name”
bgproperties
= “fixed”
leftmargin
= “n”
topmargin
= “n”
Using Colors
-
Colors can be provided as color name or color code
-
Color codes are made of six hexadecimal digits 2 for
red, 2 for green and 2 for blue
-
#RRGGBB
Example
Red #FF0000
Green #00FF00
<BGSOUND> Tag
Sub tag
of <HEAD>, used to set a sound which runs which webpage starts
Attributes
SRC=
“sound file name – wav, mid, au, snd extension”
LOOP =
“n or –1”
Example
<bgsound
src="canyon.mid" loop="-1">
<BASE> Tag
Sub tag
of <HEAD>, used to set the default working directory for files
Attribute
HREF =
“directory Name”
<TITLE>…</TITLE>
Tag
Sub tag
of <HEAD> used to set title text of the web page
Example
<title>Welcome to my
website</title>
<META >
Tag
Sub tag
of <HEAD> used to provide user info and web page information.
Attributes
name =
“name of meta field”
content
= “value of meta field”
Eg. <META name=”Generator” content = “IPM Ghaziabad”
<B>…</B>
Tag
Sub tag
of <BODY> used to make the contained text as bold.
<STRONG>…</STRONG>
Tag
Similar
to <B> tag
<I>…</I>
Tag
Sub tag
of <BODY> used to make the contained text as Italic.
<EM>…</EM>
Tag
Emphasis
tag. Similar to <I>
<U>…</U>
Tag
Sub tag
of <BODY> used to underline the contained text.
<S>…</S>
Tag
Sub tag
of <BODY> tag used to Strikethrough the contained text.
<SUP>…</SUP> Tag
-
To make the superscript
<SUB>…</SUB> Tag
-
To make the subscript
Example
X<sup>2</sup>+Y<sub>1</sub>=C
Gives
X2+Y1=C
<FONT>…</FONT>
Tag
Sub tag
of <BODY> tag used to set font name, color and size of contained text.
Attributes
FACE =
“font name”
COLOR =
“color name or color code”
SIZE =
“ number “ – number can be 1 to 7 only.
(1 –8pt, 7-36pt)
<BIG>…</BIG>
Tag
Sub tag
of <BODY>, to increase the size of the enclosed text by 4 points.
<SMALL>…</SMALL>
Tag
Sub tag
of <BODY>, to decrease the size of the enclosed text by 4 points.
<P>…</P>
Tag
Sub tag
of <BODY>, to create paragraphs.
Attributes
Align =
“Left” | “Center” | “Right”
Heading Styles
<H1>…</H1>
Tag
Define
Heading Style One – Biggest one (36 point)
<H2>…</H2>
Tag
Define
Heading Style Two
<H3>…</H3>
Tag
Define
Heading Style Three
<H4>…</H4>
Tag
Define
Heading Style Four
<H5>…</H5>
Tag
Define
Heading Style Five
<H6>…</H6>
Tag
Define
Heading Style Six – Smallest one – 8 point
<BR> Tag
Sub tag
of <BODY>, to line break
<HR> Tag
Sub tag
of <BODY>, to create a horizontal line
Attributes
Align =
“left” | “center” | “right”
Size =
“height in pixels”
color =
“color of line”
width =
“ number of pixels or percentage of width”
noshade
– Solid line
Example
<hr color="#FF0000" width="70%"
size="5">
<MARQEE>…</MARQUEE>
Tag
Sub
tag of <BODY>, used to create
movable items called marquee.
Attributes
align =
“top” | “middle” | “bottom’
behvior
= “scroll” | “slide” | “alternate”
bgcolor
= “background color of marquee”
direction
= “left” | “right”
loop =
“n or –1”
scrollamount
= amount of movement, in pixels, by which the marquee text will move.
scrolldelay
= delay, in milliseconds, before the marquee text will begin to move.
width=
“ no of pixels or percentage”
height
= “no of pixels or percentage”
border
= “no of pixels”
From MS FrontPage
Type
marquee text and select it
Insert à
Web Components à
Dynamic Effects à
Marqee
<IMG> Tag
To set
an image on the web page
Atrributes
src =
“image file name – jpg,gif”
align=”left|right”
width =
“no of pixels”
height”
= “no of pixels”
lowsrc
= “low resolution image file”
alt =
“alternative text”
MS Front Page
Insert à
Picture
dynsrc
= “dynamic source file –avi”
start =
“fileopen” | “mouseover”
loop =
“ n or –1”
loopdelay
= ”no of seconds”
align =
“top” | “middle” | “bottom” | “absmiddle” | “center” | “absbottom”
hspace
= “no of pixels”
vspace
= “no of pixels”
border
= “ no of pixels”
<A>…</A>
Tag
Sub tag
of <BODY> used to create links and anchors. Links are used to move to
certain webpage, open a graphics file, run a music or video, download files
etc. Anchor are bokmarks to directly switch to some specific location within a
web page.
Attributes
href =
“URL”
title =
“title text be shown by hyper link as tooltip”
target
= “window or frame name to open the URL”
name =
“name of anchor”
Sub tag
of <BODY>, to create a table
Attributes
border
= “pixels”
width =
“no of pixels or percentage”
height
= “no of pixels or percentage”
bgcolor
= “background color”
background
= “image file”
align =
“left” | “center” | “right”
cellspacing
= “no of pixels”
cellpading
= “no of pixels”
bordercolor
= “color”
bordercolorlight
= “color”
bordercolordark
= “color”
<CAPTION>…</CAPTION>
Tag
Sub tag
of <TABLE> to set the caption of the table
<TR>…</TR>
Tag
Sub tag
of <TABLE> to create a row
<TD>…</TD>
Tag
Sub tag
of <TD> which represents a column of the table
Attribute
width =
“no of pixels or percentage”
height
= “no of pixels or percentage”
valign
= “top” | “middle” | “bottom”
align =
“left” | “center” | “right”
bgColor
= “backgournd color”
background
= “background image”
borderColor
= “color”
borderColorlight
= “color”
borderColordark
= “color”
rowspan
= ”n”
colspan
= ”n”
<UL>…</UL>
Tag
Tag
used to create Bulleted (UN-Ordered) list
Attributes
Type =
“Disc” | “Circle” | “Square” – Default is “Disc”
<OL>…</OL>
Tag
Tag
used to created a Numbered (Ordered) List
Attributes
Type
= “1” | “A” | “a” | “I” | “i” – default
is “1”
Start =
“number”
<LI>…</LI>
Tag
Sub-tag
of <UL>, <OL> tags to define a list item
Attributes
Type =
“Disc” | “Circle” | “Square” | “1” | “A” | “a” | “I” | “i” – default is “1”
Value =
“Number” - for <OL>
<DL>…</DL>
Tag
Tag
used to create Definition list
<DT>…</DT>
Tag
Sub-tag
of <DL> tag to define the Defined Term
<DD>…</DD>
Tag
Sub Tag
of <DT> tag to define the definition of a definition term
Example of <DL>, <DT> and <DD>
<p>Computer System
<dl>
<dt>Hardware</dt>
<dd>Components that we can touch.</dd>
<dt>Software</dt>
<dd>Set of programs used to run the
computer.</dd>
</dl>
<APPLET>…</APPLET>
Tag
To used
to load the Java Applets into the web browser
Attributes
code =
“appletName.class”
codebase
= “directory name”
hspace
= “pixels”
vspace
= “pixels”
align =
“left” | “center” | “right” | “top” | “bottom”
<PARAM> Tag
Sub tag
of <APPLET> tag to define the parameters to passed to the applet
Attributes
name =
“parameter name”
value =
“value of the parameter to be passed”
valuetype
= “Type of value to be passed”
Example of <APPLET> and <PARAM> tags
<applet code="fphover.class" codebase="_fpclass"
width="120" height="24">
<param
name="text"
value="Click Me">
<param name="color" value="#000080">
<param
name="hovercolor"
value="#FF0000">
<param name="textcolor" value="#FFFFFF">
<param
name="effect"
value="glow">
<param name="url"
value="www.ipmgzb.com" valuetype="ref">
</applet>
<OBJECT> Tag
Tag
used to define the objects like ActiveX objects, Flash and other kind of files.
Attributes
id =
“object name”
border
= ”pixels”
hspace=
“pixels”
vspace
= “pixels”
width =
“pixels”
height
= “pixels”
classid
= “class id of the object from registry”
Example of
<object> Tag
<object id="calender" border="3"
hspace="2" vspace="4"
width="351"
height="275"
classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02">
</object>
Creating Forms
Forms contain some controls within it like Single line
TextBox, Multiline Textbox, CheckBox, Radio Button, Command Button etc. Forms
are created using <FORM> tag.
<FORM>…</FORM> Tag
To
create a form
Attribute
Method
= “Get” | “Post”
Action
= “URL to submit the data”
Name
= “name of the form”
<INPUT> Tag
Sub
tag of <FORM> tag to create form controls
Attributes
Type
= “text” | “password” | “radio” | “checkbox” | “image” | “button” | “submit” |
“reset” | “hidden”
Value
= “text attached with a field”
Size
= “no of characters to be displayed” – for text, password
Maxlength
= “max. no. of characters to be allowed in textbox or password field”
Checked
– to make a radio or checkbox to be selected as default
Name
= “name of the field”
Tabindex
= “index number”
src
= “image file name” – for image field
alt
= “alternate text” – for image field
width
= “pixels” for image field
height
= “pixels” for image field
Character Codes
Space
© ©
Numeric
Codes
&#number;
<DIV></DIV>
-- A division tag to club tags within it to perform activity on that tags
<SPAN></SPAN>
-- Again a division tag like <DIV> to do not insert any line break
<META > Tag – Provide meta information about the webpage
Attributes
Name=”fieldname”
Content=”value of field”
http-equiv=”instructions to
browser”
Examples
<meta name=”author”
content=”B.P.Sharma”>
<meta name=”keywords” content=”Ghaziabad ,MCA,ITS”>
<meta http-equiv=”referesh”
content=”n”> -- n is the time in
seconds
<meta http-equiv=”refresh”
content=”n;url=website”>
<meta http-equiv=”pragma”
content=”no-cache”>