0% found this document useful (0 votes)
35 viewsHTML Notes
Basics of HTML
Uploaded by
dawsondurgan2Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
35 viewsHTML Notes
Basics of HTML
Uploaded by
dawsondurgan2Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
/ 38
5 7
INTRODUCTION i MM
HTML is an i See
ETE a hee and stands for Hyper Text Markup Language
browseP uboueige? to du suy Sea tags which are instructions given to
e page. ° s
: ne aoe is an htm or html file extension.’ “ t
wibilatiay? ‘an be created using a simple text editor (like’Notepad in
HTML was invented by Tim B 5]
for Particle Physics in Geneva. hae
/-HTML
while at CERN, the European Laboratory
4.1 WHY HTML f
Hypertext is an ordinary text with formatting faciliti ip
process of taking ordinary text and adding extra pee dirarntcrat
Thus the HTML documents are text files made up of HTML elements that
define a document and guide its display. In practical terms, HTML is a collection of
platform-independent styles that define the various components of a World Wide
Web document. HTML provides the user with a consistent interface and a highly
effective medium for presenting information to developers. uu
HTML is a set of instructions given to Web browser for formatting and layout
of WebPages, so it may be possible that a look of the same HTML code may differ
since different browsers may interprets them differently. j
Advantages of HTML
1) HTML is an easy to use, learn, implement and flexible ‘alternative to
traditional presentation and tedious software. U
2) Contains powerful formatting facilities. rob TMITE toy
3) HTML documents are device and platform independent. (Since’it can be
designed to work on not only home PCs but also on graphical workstations.
dumb terminals, network computers, hand-held devices etc.) ' ©
4) You can traverse to any HTML document Tequired because of hyper Tinking
facility available, thus controlled navigation is possible. ar
5) Required HTML pages can be’ updated casily, without: changing whole
iment. F
6) me Kind of software, which has been called world ware. ber ia
7) Independent work can be done and you need not rely “on ‘application or
program vendor.
8) No expensive license software or hardware reqaired. * created using any text editor (g.,
126
ic id multiple platfo. .
cages ‘ , expectations an = forme’.
wT Es Ce ing languages features and capabilities
HTML doesn’t offer pro; ining errors. ~~ ~~
~ -2)-It's easy to write "bad" H to read and understand and code cop,
3) Complex HTML code is tard Te. so building complex page,
increases to make interactive web
- time consuming. 1 e SM or '/" character),
: i leaving out a .
ap di events and pao Hae
5 aed for sae since no special debugging tool is provided,
4.2 HTML DOCUMENTATION q
‘ ia ee are plain-text (also known as ASCTD files th,
+., Emacs or vi on UNIX machines; Simple
Macintosh; Notepad on a Windows machine). Kon can also use word: proce
software if you ee save your document as "text only with line breaks",
wd
Scrip,
HTML Editors i 1 :
HTML Editors are programming tools for Hyper Text Markup
(HTML) documents. = r
There are three categories of HTML Editors; .
1, Text Editors
2. HTML Code Editors
3. HTML Design Tools
1) Text Editors : 27 0
These editors only edit ASCII text. They offer no functionality to fa
better HTML development. They are useful if: ‘your knowledge of HTML is excelle
Some. examples of. Text. Editors include Notepad. (Windows), Simple
(Macintosh), and Pico (Unix). ia a
They are typically WYSIWYG. WYSIWYG is an acronym for "what yous
is what you get’, it means that you design your HTML document visually, as if
were using a word processor, instead of writing the markup tags in a plain-text I
and imagining what the resulting page will look like , oi
2) HTML Code Editors»,
These editors may or may not be WYSIWYG, 1 }&8&2 eee
127
HTML
ee
3 A These tools are intended for HTML development without exposing the code to
the author. ‘They are typically WYSIWYG. Many of these tools do allow the user to
jocess the HTML code, however this is not usually apparent to the user. Some
examples of HTML Design Tools include NetObjects Fusion (Web Development),
and Microsoft Office 97 (Traditional Office/Design Tools that provide
I). ;
cae can concentrate on the content, rather than the syntax, of your Web site, You
can Create a Web site without leaming HTML, You can Design Elegant and
Consistent Web sites with a few key strokes, since they are more user friendly
> HIMLELEMENT... ‘
‘An element is a fundamental component of the structure of a text document.
Some examples of elements are heads, tables, paragraphs, and lists. Elements can
contain plain text, other elements, or both. i
HTML elements are defined using HTML tags.
> HTML Tags Mya
HTML tags are used to mark-up HTML elements.
HTML tags are surrounded by the two characters < and >
‘The surrounding characters are called angle brackets.
HTML tags normally come in pairs like and they are usually paired
to start and end the tag instruction.
«. The first tag in a pair is the start tag, the second tag is the end tag.
The text between the start and end tags is the element content.
« HTML tags are not case sensitive; means the same as .
Syntax is: . . :
text (element content)
text (element content)
:
or just
For example:
WELCOME TO MY WEBSITE
CLICK HERE
An HTML document is composed of a single element;
that is, in tum, composed of head and body elements:
...
and ... > Taga ay
«Tage cau have aebutes, Attributes can provide addtional information
HTML elements on your page, included inside the start te.
Attributes always come in name/value pairs like this: name="value" | «
Syntax is’) advelen} :
=e ane attribute name="value">
.g. 
window. Never try to format the text in your editor by adding empty lines and gp
to the text. ig oe é :
HTML will truncate the spaces in your text. Any number of spaces coun}
one. In HTML a new line counts as one space.” ? ie
Using empty paragraphs <p> to insert blank lines is a bad habit. Use the ch
tag instead. You might have noticed’ that paragraphs can be written’ without
closing tag </p>. Don't rely on it. The next version of HTML might not allow you}
skip any closing tags. 2 4
HTML automatically adds an extra blank line before and after some clement
like before and after a paragraph, and before and after a heading. aq
4.3 THE MINIMAL HTML DOCUMENT
Every HTML document should contain certain standard HTML tags.
document consists of head and body text. The head contains the title, and the
contains the actual text that is made up of paragraphs, lists, and other el
HTML and SGML specifications.
> Simple html document
>
<HEAD>
<TITLE> HOME PAGE I
</TITLE>
</HEAD> ke
<BODY> THIS IS MY FIRST WEB PAGE
</BODY> Z faa : ; 129
save the file as “firstpage.htm)
. This tag tells your browser
hat this is the start of an HTML document. The last tag in your document is
(L>. This tag tells your browser that this is the end of the HTML document.
The text between the’ tag and the tag is header information.
Header information is not displayed in the browser window. The title is displayed in
your browsér's caption. teh tax mi inet 81 4
The text between the tags is the text that will be displayed in your
browser. : ; i 7 a
: ‘The text between the tags is the title of your page |
4.4 BASIC HTML TAGS i =) :
The most important tags in HTML are tags that define headings, paragraphs and
line breaks. ne oa ea v i i YC
1.<HTML> de 3 ? J
The HTML tag identifies a document as an HTML document. All HTML documents
should start with the <HTML> tag and end with the </HTML> tag.
Syntax LAK bile ee :
eg. TARE
The following example begins and ends a short document with the HTML tag.
<HTML> ‘
<BODY>
This is HTML file.
</BODY>
</HTML>
Following tags appear in <HTML>tag.:-- ¥ eis) <a:
° HEAD anod ae OF
The’ HEAD contains‘ general information, or meta-information, | about: the
document. The HEAD tag defines an HTML document header. It is the first thing in
any document, lying above the BODY and just after the <HTML> tag starting the
document. The contents of the HEAD are not displayed as part of the document.’
The HEAD tag can contain TITLE, BASE, ISINDEX, META, SCRIPT, STYLE,
and LINK tags. > : Ot !
Syntax
<HEAD>...</HEAD>
NC ee EA TOFIRSTWEBSITESTITLE>
e TITLE’ .
The title of a document is specified
ey in the document HEAD. Each a can
identify the document content in a general way. - c
a Title is not part of the document text and cannot contain hypertext links o,
special markup commands -- it must be simple text. Often the title is used to Tabel th
window displaying the text, or is used to label a place in a browser's history g
bookmark list. It therefore should be short -~ less than 64 characters J
Other tags can be placed are: :
by the TITLE element, which shoulg
have only one title, which shou:
© STYLE -- Stylesheet instructions, written in a stylesheet language. Styleshe
instructions specify how the document should be formatted for display. Very fey
browsers currently support stylesheets. fi
© SCRIPT = Script program code -- for enclosing, within a document, scripting
program code that should be run with -- and that can interact: with — the
document, Example languages are JavaScript and VBScript.
E.g.<HTML> aio
<HEAD>
<SCRIPT language="VBSCRIPT’> VBscript </SCRIPT>
</HEAD>
<BODY>
sieee text of the document
</BODY>
</HTML>
2.<BODY> Defines the document's body [
The BODY element contains all the contents of a document
Various mark-up elements are allowed within -the body to indicate ‘hi
paragraphs, lists, hypertext links, images, and so on. fa
> Attributes in body tag : aa
1) The BACKGROUND Attribute 4
This allows you to specify an image file to use ihe
watermark) behind the displayed text ei graphics, as a background (a bil
E.g.<BODY BACKGROUND="c:\a gif'> lll
. Text... : a
</BODY> P y
HTML 131
So image a.gif will be set as a background to your web page.
2) Background color.of the web page
Attribute is;BGCOLOR="#rrggbb" ahd
sets the background color to the specified RGB color value, where RR GG and BB
are the hexadecimal color codes for the Red, Green and Blue levels, ranging from Oto
255 -- that is, 00 to FF. The color "000000" is black, while "FFFFFF" is white.
3). Setting the text color(TEXT Attribute)
Syntax: <BODY TEXT="#rrggbb">text in a body</BODY>
Sets the default text color to the specified RGB color value.
'4)_ Setting color for hyperlinks (LINK Attribute)
Syntax: <BODY LINK="snggbb">text in a body/BODY>
Sets the default text color of hypertext anchors to the specified RGB color value.
5). Setting color for visited hyperlinks (VLINK Attribute)
Syntax: <BODY, VLINK="#trggbb">text in a body</BODY>
Sets the default text color of visited hypertext links to the specified RGB color
value.
> Elements in the BODY are categorized as
A) Text Block Elements
BODY element contains all the displayed content of a document. Structurally,
the document content is organized into blocks of text, such as paragraphs, lists,
headings, paragraphs, block quotations, and so on. These are generically called block
elements, since they "block" chunks of text together into logical units. Block elements
can often contain other blocks -- for example, a list item can contain paragraphs or
block quotations, so that these elements can often nest together.
The block-level elements are:
Hn (Headings) (h1 to h6)
P 1
ADDRESS
BLOCKQUOTE
PRE
HR
FORM.
TABLE
eee ween. B) Text nite : ’
These are elements that mark ext for special meanings fOr ee ap
Piece of text is emphasized (EM) or.a citation ¢ aria e cemene co ea
physical formatting, such as boldface (B) ot italics (1). THEE Tes can gy
EDpear anywhere Sacide a block element, with a few exceptions (you can j4)
images inside a PRE element). : ,
C) Special Elements — Hypertext Anchors Sy
Analogous to the text-level markup is the anchor (A) element. This is the clemen}
want to know a lot about this one. ha
marks hypertext links. Obviously you
aE a
D) Character-Level Elements . *
Then are what I call character-level elements, namely line breaks (BR) and ima,
(IMG). These are treated much like characters, and can appear wherever thers jg
character in a document. a -
tg
E) Character References 4
Finally there are character or entity references. ‘These are special HTML "escapg
codes that can be used to enter special characters that are hard to type, such ;
accented or other non-ASCII characters. You also need to use these to type ang
brackets or ampersand characters -- as these are otherwise interpreted as HTML tap
(<....>) or as the beginnings of character or entity references (&).
Analogous to the text-level markup is the anchor (A) element. This is the element
marks hypertext links. Obviously you want to know a lot about this one. 4
3. <P> Defines a paragraph J
Paragraphs are defined with the <P> tag. Can contain align attribute for alignment
the text within paragraph. aon oe
E.g.<P ALIGN="CENTER’®> this is a paragraph</P>
HTML automatically adds an extra blank line before and after a paragraph.
must indicate paragraphs with <P> elements. A browser ignores any indentations
blank lines in the source text. Without <P> elements, the document becomes
large paragraph. The </P> closing tag may be omitted. This is because b
understand that when they encounter.a <P> tag, it means that the previous pa
has ended. However, since HTML now allows certain attributes to be assigned to ie
<P> tag, it's generally a good idea to include it. aq
e ADDRESS Element 2
‘The ADDRESS element is used for address information, signatures, statements
authorship, etc. It is often placed at the bottom (or top) of a document. The rendents)
of the contents of the ADDRESS is left up to the browser -- most browsers render the”
ADDRESS in italics. It may also be right justified, or indented. & es Dee ee
HTML ; : 133
a
eNDDRESS><A HREF="c:\add.html">X.Y.Z.. See eon ess <P>.
DDRESS>
DESIGNER<BR>
qel (023) 122 123.
ADDRESS> </P>
These are rendered as
YZ») abel
BE ESIGNER
Tel (023) 122 123.
An address cannot contain P, BLOCKQUOTE, FORM or other block elements, but
can contain text, er -markp (emphasis, etc,), ees ements or even images.
4, <BR> Inserts a single line Break
Line Breaks: :
The <BR> tag is used aie you want to. al a line, but don't want to start a new
/ paragraph. The <BR> tag forces a line break wherever you place it.
Eg. This <BR> is line breaks.
So here This and is line breaks will appear on two different lines. _
The <BR> tag is an empty tag. Ithas no closing tag.
5. <HR> Defines a horizontal rule, 5
Used to produce a horizontal line, the width of browser’s window.
Itallows to differentiate sections of your document, ;
SIZE and WIDTH attributes will let you alter the thickness
And the percentage of the windows covered by it.
e.g.<BODY> ‘
<H1>This is my first web page</H1>
<HR SIZE=5 WIDTH=” ”20%"> j wi yy
</BODY> 5 at
6, <! Defines a comment in the HTML source code Conmentat in HTML.
The browser will ignore a comment, You can use comments to explain your
code, which can help you ee you edit the source code at a later date,
E.g.<!-- This is a comment -->
| Note that’you need 4 an exclamation point after the opening: aes but not
before the closing bracket.
Comments do not nest, and the double-dash, sequence "--" may not appear
inside a comment except as part of the closing --> tag. You must a make sure that
there are no spaces in the start-of-comment string.
NO For exe ;
Sm the line
<h
is not, sin
7.
is is a valid comment —>
's 1S not a valid comment -->
ce there is a space between the left angle bracket and the exclamation mark,
<H 1>-~<H6> Defines heading 1 to heading 6.
Headin,
heading. <H6;
Eg.
<HI>
<H1 STYLE="FONT-SIZE: 150%">You can define size in percentage also.</H1s!
HTML automatically adds an extra blank line before and after a heading. «
8. <PRE> tag
This tag preformats the text. The text
displayed in monospace form. Using
also be used for columnar lists.
> defines the smallest heading (as shown).
Heading Size 1 Heading Size 2
Heading Size 3
~-Heading Size 5
<H1 STYLE="COLOR: blue">THIS is displayed
<HI STYLE="FONT-FAMILY:verdana">This is displayed in verdana font
Heading Size 4
Heading Size 6
in large font with blue color‘
gs are defined with the <H1> to <H6> tags. <HI> defines the larga
oe
Style
appearing between <pre> and </pre> ig
this tag, we can position the characters. It can
Eg. <PRE> Employee_name Employee_number Employee address <PRE>)!
So output is displayed as :
Employee_name
42.
Employee_number
FONT TAGS IN HTML
To have different size and color to the text, rather than
Employee_address ae
using headings tags, =
color="color-name”
many people uses <FONT>tag.
The <FONT> tag in HTML is deprecated. It is supposed to be removed in a future ~
version of HTML. q
Font attributes:
Attribute Example Purpose | 5
size="number” size="2” Defines the font size_|
size="+number”, + size="+1” Increases the font size
size="-number” size="-1" Decreases the font size
|face="face-name” face=”Times new Roman’ Defines the font-name
color="color-value” color="#eeff00 | Defines the font color 4
{L
color="red”
Defines the font color — 9
ML 135
ee ; ;
Pr
NT SIZE="5" FACE="VERDANA” COLOR="#AA00FF">
This is example of demonstrating fonts. </FONT>
<P MARQUEE> TAG. ; f
MARQUEE, supported only by the Microsoft Intermet Explorer 2 (and later)
browser, is used to create a scrolling text marquee.
eg. <MARQUEE ALIGN="top">Scrolling text <MARQUEE>
creates a text marquee with the enclosed text scrolling along the frame.
‘The another attribute is DIRECTION defining direction of the marquee text.
e.g-<MARQUEE DIRECTION="RIGHT’>WELCOME</MARQUEE> es
So here WELCOME scrolls from left towards right. The default direction is right
left.
a But other commercial browsers, including Netscape Navigator, do not support this
‘ element.
> Character Formatting
HTML has two types of styles for individual words or sentences: logical and
physical. Logical styles tag text according to its meaning, while physical styles
indicate the specific appearance of a section. For example, in the preceding sentence,
the words “logical styles” was tagged as “strong.” The same effect (formatting those
words in italics) could have been achieved via a different tag that tells your, browser
to “put these words in bolds.” Try to be consistent about which type of style you use.
Logical Styles:
<EM>
for emphasis. Typically displayed in italics. (Consultants cannot reset your
password unless you call the help line.)
<CODE>
for computer code. Displayed in a fixed-width font. (The <stdio.h> header
file) »
<STRONG>
for strong emphasis. Typically displayed in bold. (NOTE: Always check your
links.) s
SVAR> : |
for a variable, where you will replace the variable with specific information.
Typically displayed in italics. (rm filename deletes the file.) — <B> and </B> tag,
Physical Styl sopraring Bawee®
<B> bold text :I boldface text PP ia
€.g.<B>In Bold</B> _
Output is In Bold ~
d </I> tag.
: ing between <I> and
<Ditalic text: Ie italcize text appeaing
e.g.<i>In Itlics<lI> ain?
Output is In Italics ican
ing between <U> anc > tag,
<<U>underine text: tundertines ext @PPPaDS a
€.g.<U>Underlined</U> L
Output is Underlined
© <SUB> tag: It is subscript (5+
displayed in subscript form. ‘This
formulae or chemi jons.
eg. H-<SUB>2</sub>SO<SUB>4</SUB>
output displayed as :H2SOs
‘The text enclosed’ in <SUB>and </gyp,
jg useful in representation of math
i i in <SUP>and </§}
© <SUP> tag: It is superscript tag. The text enclosed in <
displayed in’ superscript form. This is also useful’ in repres
mathematical formulae or chemical equations.
e.g. volume of sphere is=(4/3)(3.14)reSUP>3</SUP>
Output displayed as: volume of sphere is=(43)(3.14)"
4.6 DEALING WITH URLS
Hypertext Anchors ‘
URL stands for Uniform Resource Locator, which may represent an
of document on web or Intemet or simply a path to a document in a specific directo
The World. Wide Web uses Uniform Resource Locators (URLs) to specify ihe
location of files on other servers. A URL includes the type of resource being a ,
(cg. Web, gopher, FTP), the address of the server, and the location of the file
syntax is: 4
scheme:Ifhost. domain (:port\pathl filename. ie
HTML provides you to jump from a link to any document or image of
local or WebPages by using special tag, called <a> i.e, Anchor tag. :
Syntax is: <A HREF="URL’>name or image which can be treated as link</A
Thus anchor is a piece of.text or some other object (€.g. image), which
On ee erg tvPetet lik The <A> clement is used 1 mil
pies image), and to give its hyper tex ionship t0
documents. The text between the opening and tae Sy pe. Ws
</A> can act as start or destination (or both) ofa link. The HIREF attribute (White
actually optional) marks the anchor as the start of a link to another d !
The gs
yat : 137
ree (it could point, for example, to an image file), or to a particular place in ”
jer document Y sal epg ae 3 (rel
syntax is:
'URL (absolute or relative path)">anchor name </A>.
a absolute or partial URL can specify
eg: ‘ 2
4) Link to a page on the World Wide Web,
‘<A HREF="http://www yahoo.com">Enter your email-id</A>
‘The string * Enter your email-id ' is a hypertext link to the website indicated by URL
specified ATR rf rw t
the address of the referenced document:
‘
a a elt
2) Link to an image by image as alink, _,
: HREF="image?2.jpeg"> <IMG SRC="imagel.gif"> </A> :
fhe image “imagel.gif'.is a hypertext link to the image file located in the same
directory This will allow you to use a small icon that links the user to. a larger version
of the same image. os
3) Link to document located in different directory . { ¥TIT
<A HREF="d:\soft\a.html"> Click Here.</A>. ; 1OnTo ee
Here by clicking on Click Here link, destination page will be displayed which is
specified in the path given.
4) Link to the same page(Links to a Particular Place in a Document)
<P><A HREF="#samepage">This is link to the same page: </A></P>
<A NAME="samepage"><H2>Yes You are in the same page.</H2></A>
Particular places in an HTML. document .can. be marked as specific
destinations of hypertext links via the NAME attribute. Links to Specific Sections
Anchors can also be used to move a reader to a Particular section in a
document (either the same or a different document) rather than to the top, which is the
default. This type of an anchor is commonly called a named anchor because to create
the links, you insert HTML names within the document.
5) Links Between Sections of Different Documents
Suppose you want to set a link from document, A. (fileA-html) to a specific section in
another document (fileB.html). : p
Enter the HTML coding for a link to a! named anchor: ite =
* fileA html:-- : Be
<P>
This is link : 5
<A HREF=" fileB.html #differentlink">referenced to-a specific section </A> in
aiferent document. . :
SS 138
mark as a tab within the fileB htm) gy
Think Of the characters after the hash (#) at the top of the window “ts
This tab tells your browser what should be displayed
the link is activated.
© Next, create the named anchor (in this example
“differentlink " as:
<H2><A RAMS aeenneeg "> to a specific section </A></H2>
With both of these elements in place, you can bring a reader directly to , «
specific section” word in fileB.html
Important Hint
"You cannot make links to specific sections within a different document unless |
either you have write permission to the coded source of that document or tha |
document already contains in-document named anchors
Attributes for A and LINK :>The following are the attributes appropriate tp
either Anchor or LINK elements. The other attributes are less common, and can be
omitted at an introductory reading.
1. HREF (link to object) one
2. NAME (link from object a
3. TITLE (TITLE of document) * le
4. METHODS (how to link — this attribute has been dropped from the HIME
specification, and should not be used)
6) Link to Mail (Mailto)
You can make it easy for a reader to send electronic mail to a specific person of al
alias by including the ae attribute in a hyperlink. - . c
Syntax it
<A HREF: snailto:emaiid@host">NamecIA> 1
e.g.
<A HREF="mailto:spc@yahoo.co.in">Mail me</A>
4: 7 LISTS INHTML
HTML supports ordered, unordered and definition lists.
Different List Tags are:
<OL> Defines an orderedlist ‘a
<UL> _ Defines An Unordered List . +
<LI> _ Defines a list item :
<DL> _ Defines a definition list
<DT> _ Defines a definition term tg
<DD> _ Defines a definition description a E
<DIR> Deprecated. Use <UL> instead
<MEN> Deprecated. Use <UL> instead a
an 139
— ynordered Lists 10
i unordered list is a list of items. The list items are marked with bullets
opically small black circles). To make an unnumbered, bulleted list, : F
(Pr Start with an opening list <UL> (for unnumbered list) tag Enter the <LI> (list
item) tag followed by the individual item; no closing </LI> tag is needed
2. End the entire list with a closing list </UL> tag as
Inside a list item you can put paragraphs, line breaks, images, links, other lists,
etc. ‘°
e.g: <HTML>
<BODY>
<H4>This is Unordered List</H4>
<UL type ="circle">
<Li>Sunday</Lb>.
<LI>Monday</LI>
<LI>Tuesday</LI>
</UL>. :
</BODY>
</HTML>
so-output given by browser is:
‘This is Unordered List:
« Sunday_
« Monday
« Tuesday
By specifying type attribute in the <UL> tag you can change shape of the bullet.
‘The standard shapes provided are "disk", "circle", and "square" -
2.Ordered Lists
An ordered list is also a list of items. The list items are marked with
numbers. A ordered list also called an numbered is identical to an unnumbered list,
except it uses <OL> instead of <UL>. Inside a list item you can put paragraphs, line
breaks, images, links, other lists, etc. You can specify style of numbering for the list
items by giving type attribute in <OL> tag and it can take values "I" for uppercase
Toman, "i" for lower case roman, "A" for uppercase letters, "a” for lower case alpha
numeric letter. The start attribute ini<OL> tag is used to start the list from the
Tequired number. e.g. <OL start = "6"> will start the list items from number 6. +
e.g. <HTML> :
<BODY>
<H4><B>This is an Ordered List</B></H4>
<OL type
<Li>Sunday</LI>
<LI>Monday</L>
<LI>Tuesday </LI>
</OL> 140 : a try
</BODY> aii j
SO output given by browser is: ie ie
This is an Ordered List: .
i) Sunday SLR
ii) Monday
iii) Tuesday
3.Definition Lists S
A definition list is not a list of items. This is list of terms and explanation
the terms. A definition list starts with the <DL> tag. Thus a definition list (c
<DL>) usually consists of alternating a definition term (coded as <DTS) ang;
definition description (coded as <DD>). Web browsers generally format
definition on a new line and indentit. }
eg.
<HTML> : :
<BODY>
_ <H4>This is a Definition List</H4>
<DL>
<DT>VB<DI>
<DD>Programming Language</DD> i
<DISVB SCRIPT<DT> i
<DD>Scripting Language <DD>
</DL> r ib
</BODY>
</HTML>
So output given by browser is:
This is a Definition List: ‘
VB i
Programming Language (
VB SCRIPT 4 i
Scripting Language i wre
Inside a definition-list definition (the <DD> tag) you can put paragraphs, line
breaks, images, links, other lists, ete.) 1)» * 4
4.Nested lists :
Lists can be nested. You can also have a number of paragraphs, each containing #
nested list, in a single list item,
eg.
<HTML>
<BODY>
<H4>This example of Nested List</H4> a
HTML 141
<L1>Scripted Programming</LI> he THOME
<LI>Structured Programming 3 , a
<UL> i
<LD>Basiceg/ L> ite
<LI>Pascal</LI> s 9:
</UL> :
<LI> 4 i
<LI>Object Oriented Languages</LI>
+ Object Oriented Languages
4.8 TABLES INHTML ~ ; s :
‘The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define
ows in the table, use the TH tag to define row or column headings, and use the TD
tag to define table cells. The TABLE tag can also contain a CAPTION tag, which
specifies the caption for the table you can specify the width of the border surrounding
the table and the default background color of the table, (Individual rows and cells in
the table can have their own background color.) You can use the CELLSPACING
attribute to specify the distance between cells in the table and the CELLPADDING
attribute to specify the distance between the border and content of every cell. If you
specify the width and height of the table, the browser will do its best to make the table
fit the specified dimensions, but in some cases this may not be possible. For example,
if the table contains cells that contain non-wrapping long lines, the table may not fit in
a specified width, 1 ' < ray
Syntax :
<TABLE
ALIGN="LEFTIRIGHTICENTER"
BGCOLOR="color"
BORDER="value"
CELLPADDING="value"
a CELLSPACING="value"
ight"
COLS="numOfCols"
HSPACE="horizMargin"
VSPACE="vertMargin"
>
</TABLE>
> Table Elements ;
a table in HTML. If the BORD)
" <TABLE> ... </TABLE>? defines Tays the table with a bord 4)
ibute is present, your browser disp! ‘ y
. <CAPTIONS A PCAPTION> defines the caption for the title of the ¢
‘The default position of the title is centered at the top of the table, The |
attributes ALIGN=BOTTOM can be used to position the caption beloy,
er bl ithin a table, You may define defayi, |
=> <TR>... </TR>> specifies a table row wil ¥ i
attributes for ae row; ALIGN (LEFT, CENTER, RIGHT) and/or |
VALIGN (TOP, MIDDLE, BOTTOM). : f
= <TH... </TH> defines a table header cell. By default the text in this cell ig |
bold and centered. Table header cells may contain other attributes tp
determine the characteristics of the cell and/or its contents. |
* <TD>... </TD> defines a table data cell. By default the text in this cell is |
aligned left and centered vertically. Table data cells may contain other |
attributes to determine the characteristics of the cell and/or its contents.
Table Attributes
= ALIGN
Specifies the horizontal placement of the table.
LEFT aligns the table on the left (the default).
RIGHT aligns the table on the right.
CENTER aligns the table in the center
= BGCOLOR="color"
sets the color of the background for the table. This color can be overridden by
a BGCOLOR tag in the TH, TR, or TD tags. +
* BORDER="value” indicates the thickness, in pixels, of the border to draW
around the table. Give the value as an integer. no border, means value 0
= CELLPADDING="value"
determines the amount of space, in pixels, between the border of a cell and the
contents of the cell. The default is 1.
2
> HTML ( 143
+ CELLSPACING="value"' determines: the amount of space, in pixels,
between individual cells in a table. The default is 2,
« HEIGHT="height" ;
specifies the height of the table, The default is the optimal height determined
by the contents of each cell. Can be a number of pixels, or a percentage.of the
height of the page or parent element.
» WIDTH="width" $
defines the width of the table. The default is the optimal width determined by
the contents of each cell, Can be’a number of pixels, or a percentage of the
height of the page or parent element, :
» COLS="numberOfColumns" ae
Indicates how many virtual columns of equal width fit in the width of the
window. If the WIDTH attribute is supplied, the COLS attribute indicates how
many virtual columns fit in the specified width. Suppose that the WIDTH
attribute is "80%" and the COLS attribute is 4. In this case, each column takes
up 20% of the width of the window. Note, however, that if the minimum
width needed to display the contents of an actual column is greater than the
width of a virtual column, then the width of the column is expanded to fit its
contents.
= HSPACE="horizontalMargin"
Specifies the distance between the left and right edges of the table and any
surrounding content.
= VSPACE="verticalMargin"
Specifies the distance between the top and bottom edges of the table and any
surrounding content. ° f y
Similarly you can define Attributes within <TH> ... </TH> or <TD>... </TD>
cells as---
ALIGN (LEFT, CENTER, RIGHT): Horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.
COLSPAN=n The number (n) of columns a cell spans.
ROWSPAN=n The number (n) of rows a cell spans.
Important Hint
1. TH, TD and TR should always have end tags. Although the end tags are
formally optional, many browsers will mess up the formatting of the table if
you omit the end tags. In particular, you should always use end tags if you
have a TABLE within a html document. 144 : <=
default; tables are drawn withoy bond,
2. A default TABLE has no borders. BY lines. f
lines. You need the BORDER attribute to eal Na current browse
3, By default a table is ash withthe ITT tines Allowed vain
i us "ere ay
Se “ght of "ent fren TABLE ALIGNS 18>. The aig
; pune "ight" float the table to the left or right of the page, with "ext Noy
allowed around the table. : + 4
4, Alignment attributes on TD ot TH attributes eee one lgnmeny
specified by the TR: i
> VARIOUS TABLE EXAMPLES :
1.Table with no border and caption:
<HTML> :
<BODY> :
<TABLE> !
<CAPTIONSTABLE WITH NO BORDER</CAPTION>
: <TR>
<TD>ABC</TD>
<TD>XYZ</TD>
<TD>PQR</TD>
</TR>
<TR>
<TD>LMN</TD>
<ID>DEF<TD>
<TD>HYJ</TD> =
</TR>
</TABLE>
<BODY> at
<HTML>
Output displayed by browser is: iii
TABLE WITH NO BORDER i
ABC XYZ PQR
LMN DEF HY] ‘
2.Table with background color and image no border:
<HTML> .
<BODY> —
<H4>A BACKGROUND COLOR:</H4>)
<TABLE BORDER="1" BGCOLOR="BLUE">
<TR>
<TD>100</TD> *
<TD>200</TD> me 4 eR
arth 145
care <TD>300</TD> : es
<H4>A BACKGROUND IMAGE:<fHé> ©) ss)
<TABLE BORDER="1". » es ati
BACKGROUND=".C\DESKTOPKYZ.JPG"> ihe
<TD>SUNDAY</TD>
<TD>MONDAY</TD>
<TR> s
<TD>TUESDAY</ID>
<TD>WEDNESSDAY<TD>
</TR> oe
</TABLE> |
</BODY>
</HTML>
output displayed by browser is:
A Background Color:
A Background Image:
3.Table With Cell spacing ! } 1
<BODY>
<H4>WITHOUT CELLSPACING:</H4>
<TABLE BORDER="1">
<TR>
<TD>SUNDAY</TD>
<TID>MONDAY</TD>, ;
</TR>
<TR> ? 5
<TD>WEDNESSDAY</TD> 1a
<TD>THURSDAY</TD> TAG, 1.12) Ht
</TR> AHS:
</TABLE> I
<H4> WITH CELLSPACING:</H4> Ww i>
<TABLE BORDER="1" CELLSPACING="10"> 7
<TR> .
<TD> SUNDAY</TD>
<TD> MONDAY </TD> </TR>
<TR>
<TD> WEDNESSDAY </TD>
<TD> THURSDAY </TD>
</TR>
</TABLE>
</BODY>
50 output displayed by browser is:
WITHOUT CELL SPACING:
4.Table with cell padding
<HTML>
<BODY>
<H4>WITHOUT CELLPADDING:</H4>
<TABLE BORDER="1">
<TR>
<TD>SUNDAY</TD>
<TD>MONDAY</TD>
</TR>
<TR>
<TD>WEDNESSDAY</TD>
<TD>THURSDAY</TD>
</TR>
</TABLE>
<H4> WITH CELLSPADDING:</H4>
<TABLE BORDER="1" CELLPADDING="20">
<TR>
<TD> SUNDAY </TD>
<TD> MONDAY </TD>
</TR>
<TR>
<TD> WEDNESSDAY </TD>
fry </TR>
</TABLE>
</BODY>
Jefe
<TD> THURSDAY </TD> : (
so output displayed by browser is: :
wiTHOUT CELL PADDING:
WITH CELL PADDING: :
ian
7
5, Table showing use of colspan and rowspan.
<HTML> i
<BODY>
<H4>WITHOUT CELLPADDING:</H4>
<TABLE BORDER="1">
<TR> : .
‘<TD COLSPAN=2 ALIGN=CENTER>PRGRAMMING LANGUAGE</TD>
</TR>
<TR> A
<TD ROWSPAN=2>OBJECT ORIENTED LANGUAGE</TD>;
<TD>JAVA</TD> -
</TR> ss
<TR>
<TD>C++</TD>
a9
‘<TD ROWSPAN=2>STRUCTURED LANGUAGE</TD>
<TD>C</TD> ‘
a
<ID>BASIC</TD>
Ss
&
Ee |
Ai
</BODY>
by browser. is :--
“— PRGRAMMING LANGUAGE
i
OBJECT ORIENTED LANGUAGE)
| :
STRUCTURED LANGUAGE
4.9 IMAGES IN HTML ‘
The IMG tag specifies an image to be displayed in an HTML document.
An image can be a plain image that simply appears on the page. An image
can be embedded in an <A HREF> tag so that the user can click it to open a URL. An
imagé can also be an image map, which has multiple clickable areas that each link
to different URLS. The HEIGHT and WIDTH attributes indicate the dimensions of
the image. If you specify these attributes, Navigator uses them to reserve a place for
the image on the page and continues loading any text and other page elements instead)
of waiting for the image to load. Most Web browsers can display inline images (thit
is, images next to text) a
Images can be in the following types of formats:
¢ GIF (Graphics Interchange Format)
° JPEG (Joint Photographic Experts Group)
+» XPM (XK PixMap) : :
* XBM (X Bitmap)
80 output displayed
aie
Syntax
<IMG
SRC="location"
ALT="alterntiveText"
ALIGN="alignment"
BORDER="borderWidth"
HEIGHT="height"
WIDTH="width"
HSPACE="horizMargin"
VSPACE="verticalMargin"
>
The SRC attribute is compulsory
SRC="location(URL)"
specifies the URL of the image to be displayed in the document, specifies text to be displayed if the browser does not ee the IMG
tag or if the user has Suspended image dong in the browser.
aul IGN
ifies the scans eee ee text. iyo do not
ify a value for ALIGN, browser uses BOTTOM as the default LEFT aligns an
jmage with the left margin, y i "
s» RIGHT aligns an image with the right ‘margin. ane
« TOP aligns the top of an image with the top of the tallest item in the current
line.
+ TEXTTOP aligns the tp of an image with | the top of the tallest text in the
current line.. 4
* MIDDLE als mii of te ime wi te bitin of he tin te
current line, * f
» BASELINE aligns the bottom of an image with te bavelide of the text in the
current line. .
+ BOTTOMis the same as BASELINE,
BORDER="borderWidth"
Specifies the width, in pixels, of a border around the image. The, Pie must
be an integer.
HEIGHT="height"
Specifies the height of the image, either in pixels or as a percentage of the
height of the window, frame, or positioned block of HTML. that contains the image.
To indicate a numberof pixels specify the value as an integer, for example, "100". To
indicate a percentage, specify the value as an vinteget lence by the Pacem sign,
for example "20%".
WIDTH="width"
Specifies the width of the image either in | pixels or as a percentage of the
window, frame, or positioned block of HTML containing the image. To indicate a
number of pixels specify the value as an integer, for example, 100". To indicate a
percentage, specify the value as an integer followed by the percentage sign, for
example, "20%".
HSPACE="horizMargin"
Specifies a margin in pixels between the left and right mie of the image and
surrounding text and images. Give the value as an integer itm
erticalMargin'
Specifies © margin in pixels between the top and bottom edges of the ;
and surrounding text and images. Give the value as an integer,
> Dummy Images Eelcis tober
<a an <IMG SRC> tag points to an image tat does no SXISt, Your brows,
Software substitutes a dummy image. When this happens during your fina) 1
Your files, make sure that the referenced image does in fact exist, that the bypeting
has the correct information in the URL, and that the file permission jc
Appropriately, 5
>
External Images, Sounds, and Animations
You may want to have an image open as a separate document when 8 User
Setivates a link on either a word or a smaller, inline version of the image included in
2Pur document. This is called an extemal image, and itis useful if you do Dot Wish
slow down the loading of the main document with large inline images,
To include a reference to an extemal image:
<A HREF="Extlng gif'>text or linke/A>
You can also use a smaller image as a link to a larger image:
<A HREF="Bigimage.gif'><IMG SRC="Smalllmage,gif'></A> Me
The reader sees the Smalllmage.gif image and clicks on it to open the Bigrlmage gif
file. Te
You can use the same syntax for links to external animations and sounds, The -
only difference is the file extension of the linked file like: i
<A HREF="K3GtheFilm.mov">link anchor</A>
Specifies a link toa QuickTime movie. Some common file types and their extensions
are:
1) plain text pes txt
2) HTML document :-- html
3) GIF image i gif
4) X Bitmap image :-- xbm
5) JPEG image —:- "jpg or jpeg
6) AIFF sound file :~ aiff
7) AU sound file au
8) WAV sound file -way
9) QuickTime movie :- .moy
10)MPEG movie _ :-- -Mpeg or .mpg _
Examples sill m Beitr .
” '
+ Inserting Image as an background;
ewer versions of Web browsers can load an image and use it as a background when
displaying a page. Some people like background images and some don't In general, if
ant to include a background, make sure your text can be read easily when
Yeplayed on top of the image. e
acl und images can be a texture (linen finished paper, for example) or a. image
of an object (a logo, possibly). You create the background image as you do any image.
<HTML> ‘
‘<BODY BACKGROUND="background Image,jpg">
text within a body :
Both gif and jpg files can be used as HTML backgrounds.
If the image is smaller than the page, the image will repeat itself.
«= Different sized images:
<BODY>
<P>
<IMG SRC="c:\MyDoc\bulb gif" width="12" height="20"> (
</P>
<P>
<IMG SRC="c:\MyDoo\bulb gif" width="50" height="70">
Thus you can make a picture larger or smaller changing the values in the
HEIGHT" and "WIDTH" attributes of the img tag. attribute, where
<HTML>.
<BODY>
image lies.
* Images from different location:
You can insert images
directories on your local
locations either fom wep, ‘|
full pat,
Pee eriaijouitate to give the
Image
oe patie
from local disk,but different
<IMG SRC="c:\MyDocWwh\images\bulb.gif>
<P> : :
| . Image from net... “ ees
<IMG SRC="http://www.yahoo.com/Logo. gif’ WIDTH="73"
j : HEIGHT="68"> ;
! </P>
</BODY> i
Image as a link:
You can have image as a link to
i <HTML>
| <BODY> :
td Click on Icon.gif file to get your destination document.
i <A HREF="DestinationPage.htm">
<IMG BORDER="0" SRC="ICONT.GIF" WIDTH=
<A>
<P>
Click on Logo. gif file to get resultant image you want......
<A HREF="ResultantImage jpg">
<IMG BORDER="0" SRC="ICONT.GIF" WIDTH="20" HEIGHT="
</A> °
</BODY>
</HTML>
some other image or document.
Alternate text:
Text-only browsers will only display the text in the
"This is Alternative Text”.
modem or have a slow connection). HTML provides a mechaniem to tel readers Wait a . : 153
ing on your pages if they can't load images The ALT attribute lets yo™
iB
ney a ext to’ be: displayed :instead of an image, Note that if you’ hold’ the mouse
wer over the image wil ipa thee eal tool tier ioe
aT GDY> il)! jisewadeaion touts eb IMTH nt tat? A ay
IMG SRC="ICON.GIF") ALT=": This Is Altemative Text’"/ WIDTH=
gHT="30"> >
HEN jBODY>
<HTML>
» Images without Text ots F
To display an image without any associated -text (e.g. your organization's
J0g0) make it a separate paragraph. Use the paragraph ALIG! tribute to center
image or adjust it to the right side of the window 9, , 17 tj 8. J0>
mi *
ris Tetie AVAL
the
<BODY> i
<P ALIGN=CENTER> On
<IMG SRC = "ICON.GIE" ALT="NOTEXT"> :
<P> : x
</BODY> aig His SAP Scuboxq Liiw 9x0
</HTML> :
4.10 HTML SCRIPTS 4 0) je Hava ihe
HTML pages with scripts are used to make them more dynamic and interactive.
> VBScript Noh pecsecereae tae
Microsoft Visual Basic Scripting Edition brings active scripting to a wide
variety of environments,’ including’ Web client’ scripting in Microsoft’ ‘Internet
Explorer and Web server scripting in Microsoft Intemet Information Service.
Easy to Use and Learn : be ae t
If you already ‘know Visual Basic or Visual Basic for’ Applications (VBA),
VBScript will be very familiar’ Even if you do not know Visual Basic; once you learn
VBScript, you are on your way to programming with the whole family of Visual
Basic languages. VBScript is integrated with World Wide Web browsers. VBScript
and Windows Script can also be used as a general’ scripting language in other
applications. %
_ VBSctipt talks to host applications using Windows Script. With Windows
Script, browsers and other host applications do not require special integration code
for each scripting component. Windows Script ‘enables: a’host to’ compile scripts,
— 154 : : Arm |
; ; ‘ wailable:to ‘the’ devey, |
obtain and call entry’ points, and manage the namespace A “Veloper,
With Windows Script, language vendors can ae cae run tee foe
scripting. Microsoft will provide run-time support "
Shia
a
o >
A set in HEM den wane cig 1-NOE tl YOU WH ay
Use the typé attribute to specify the scripting a ae
eg. ‘
<HTML>
<HEAD>
<TITLE>JAVA SCRIPT:
</HEAD> ©... aay
<BODY>» LGA. tigen m
<SCRIPT TYPE="text/javascript’>”
document.write("Hello World!")
</SCRIPT>
</BODY>
108s
AUTH,
‘The script above will produce this output:
Hello World!
A new browser will understand that the script should be executed, )even’ if Cominient
tags surround it. vimany mort anlar of beeilsrs ziqnic2, ¢ ug OMT
> Various tags in VB script iv
* The <NOSCRIPT> Tag jo.) geyqs? chai won Mt
In) addition to hiding. the, script. inside a,comment,. you ,can, also.add.a
<noscript> tag.» j»9 js, nh itogoroll at waitgings rave soln
The <noscript> tag is used to define an alternate text if a script is NOT”
executed. This tag is used for browsers that recognize the <script> tag, butjdoes not
support the script inside, so this browser will display the text inside the ‘<noscript> tag ef
instead. However, if a browser supports the script inside the. <script> tag it will ignore
the <noscript> tag. amROTG 0) yew iqho SS
<!- :
document.write("Hello World!")
> i ive y F
SCRIPTS, ini ixiooqereninpen WUUpehision ys
<NOSCRIPI> Your Browser Does Not Support Voscript!</NOSCRIPTS ‘Defines A Script: ;
Defines: An Alternate Text If The Script Is Not Erected,
Defines An Embedded Object T shook se
efines Run-Time Settings (Parameters) For An Object
t+ Deprecated. Use ple
The qhe <SCRIPT> Tag
VBScript code is written within paired <SCRIPT> tags. For example, a
proce rocedure to test a delivery date might appear as. follows:
ESCRIPT LANGUAGE="VBScript">
foo
Se inction CanDeliver(Dt)
CanDeliver = (CDate(Dt).- Now() >2
End Function -
>
2/SCRIPT>
Beginning and ending <SCRIPT> tags surround the code. The LANGUAGE
attribute indicates the scripting language. You must specify. the language because
browsers can use other scripting languages. Notice that the Can Deliver function is
embedded in comment tags (<!— and —>). This prevents browsers that don't
understand the <SCRIPT> tag from displaying the code.
‘ You can use SCRIPT blocks anywhere in an HTML page. You can put them
in both the BODY and HEAD sections. However, you will probably want to put all
general-purpose scripting code in the HEAD section in order to keep all the code
together. Keeping your code in the HEAD section ensures that all code is read and
decoded before it is called from within the BODY section.’ -
One notable exception to this rule is that you may want to provide inline °
scripting code within forms to respond to the events of objects in your form. Fur
example, you can embed scripting code to respond to a button click in a form:
<HTML>
nie f
fine OO giana teeing
<HEAD> ate
<TITLE>Test Button Events z
1 , i
? wv
158 try
SLL en eee marks atic
First level left aligned Heading
Second Level center aligned heading
| ‘Third level center aligned heading
‘Feurth level right aligned heading
Sample of Unordered lists
- WELCOME
- NAMASKAR
- HTML {
- HYPER TEXT MARKUP LANGUAGE |
- URL -iveal
- UNIFORM RESOURCE LOCATOR 8 2191
- How to solve itBy computer a
Wt
HTML in Easy Steps
i
CH Programming + , >. PanWie i
- |
Sample of Ordered lists
-
|
Sample of Da lists
| 2 | YEAR as | |||
|---|---|---|---|---|
| 1998 apguqruon ¢E 1i wilog 0 | 1999 : a
| : oi
5) Write the exact output of the following HTML code with font specifications jn
brackets: : (March 2002)
}
LIST OF BOOKS
| |||