HTML
Comprehensive Learning Guide
Font Tags • Marquee • Character Formatting • Hyperlinks
Lists • Tables • Images • HTML Scripts
HTML Comprehensive Learning Guide Page 1
1. Font Tags in HTML
The <FONT> tag was used in early HTML to control text size, typeface, and colour directly in markup.
Although the tag is now deprecated in modern HTML (CSS handles styling), it is still important to
understand for legacy codebases and academic examinations.
1.1 Syntax
<FONT SIZE="value" FACE="font-name" COLOR="color-value">
... text to style ...
</FONT>
1.2 Attributes
Attribute Example / Value Purpose
size="number" size="3" Sets absolute font size (1–7, default is 3)
size="+number" size="+2" Increases font size relative to default
size="-number" size="-1" Decreases font size relative to default
face="name" face="Arial" Sets the typeface / font family
color="#rrggbb" color="#AA00FF" Sets text colour using hex RGB code
color="name" color="red" Sets text colour using a colour name
1.3 Example 1 – Basic Font Sizes
<HTML>
<BODY>
<FONT SIZE="1">Font Size 1 (smallest)</FONT><BR>
<FONT SIZE="3">Font Size 3 (default)</FONT><BR>
<FONT SIZE="5">Font Size 5</FONT><BR>
<FONT SIZE="7">Font Size 7 (largest)</FONT>
</BODY>
</HTML>
▶ Browser Output
Font Size 1 (smallest)
Font Size 3 (default)
Font Size 5
Font Size 7 (largest)
1.4 Example 2 – Face and Colour
<HTML>
<BODY>
<FONT SIZE="5" FACE="Verdana" COLOR="#AA00FF">
This is Verdana, size 5, purple.
</FONT>
<P>
HTML Comprehensive Learning Guide Page 2
<FONT SIZE="4" FACE="Comic Sans MS" COLOR="red">
Comic Sans, size 4, red.
</FONT>
</BODY>
</HTML>
▶ Browser Output
This is Verdana, size 5, purple.
Comic Sans, size 4, red.
1.5 Example 3 – Relative Size Change
<HTML>
<BODY>
<FONT SIZE="3">Normal text (size 3)</FONT><BR>
<FONT SIZE="+2">Increased by 2 (size 5)</FONT><BR>
<FONT SIZE="-1">Decreased by 1 (size 2)</FONT>
</BODY>
</HTML>
▶ Browser Output
Normal text (size 3)
Increased by 2 (size 5)
Decreased by 1 (size 2)
📌 Note: The <FONT> tag is deprecated. Modern web development uses CSS (font-size, font-
family, color) for all text styling. However, it remains relevant in the Grade XII curriculum.
HTML Comprehensive Learning Guide Page 3
2. The <MARQUEE> Tag
The <MARQUEE> tag creates a scrolling text effect on a web page. It was supported primarily by
Microsoft Internet Explorer. While not part of the official HTML standard, it is still taught in many
curricula.
2.1 Syntax
<MARQUEE ALIGN="alignment" DIRECTION="direction">
Text to scroll
</MARQUEE>
2.2 Attributes
Attribute Example / Value Purpose
ALIGN ALIGN="top" Aligns marquee vertically (top, middle,
bottom)
DIRECTION DIRECTION="right" Direction of scroll: LEFT (default) or
RIGHT
BEHAVIOR BEHAVIOR="scroll" How text moves: scroll, slide, or alternate
BGCOLOR BGCOLOR="yellow" Background colour of the marquee box
SCROLLDELAY SCROLLDELAY="100" Delay in milliseconds between each scroll
step
SCROLLAMOUNT SCROLLAMOUNT="5" Pixels scrolled each step (speed control)
2.3 Example 1 – Basic Marquee
<HTML>
<BODY>
<MARQUEE>Welcome to our website!</MARQUEE>
</BODY>
</HTML>
▶ Browser Output
[ ←←← Welcome to our website! scrolls from right to left ←←← ]
2.4 Example 2 – Direction Right with Colour
<HTML>
<BODY>
<MARQUEE DIRECTION="RIGHT" BGCOLOR="yellow">
WELCOME – scrolling left to right!
</MARQUEE>
</BODY>
</HTML>
HTML Comprehensive Learning Guide Page 4
▶ Browser Output
[ →→→ WELCOME – scrolling left to right! →→→ ]
2.5 Example 3 – Slow Alternate Bounce
<HTML>
<BODY>
<MARQUEE BEHAVIOR="alternate" SCROLLDELAY="200" SCROLLAMOUNT="3">
*** Sale! 50% Off Today Only! ***
</MARQUEE>
</BODY>
</HTML>
▶ Browser Output
[ *** Sale! 50% Off Today Only! *** bounces back and forth ]
📌 Note: The <MARQUEE> tag is not supported by all browsers (e.g., Firefox/Chrome may require
a polyfill). Modern scrolling effects use CSS animations or JavaScript.
HTML Comprehensive Learning Guide Page 5
3. Character Formatting Tags
HTML provides two categories of text-level formatting: Logical Styles (which describe the meaning of
text) and Physical Styles (which describe the exact visual appearance).
3.1 Logical Styles
Attribute Example / Value Purpose
<EM> <EM>text</EM> Emphasis – typically italic
<STRONG> <STRONG>text</STRONG> Strong emphasis – typically bold
<CODE> <CODE>text</CODE> Computer code – fixed-width font
<VAR> <VAR>text</VAR> Variable placeholder – typically italic
<CITE> <CITE>text</CITE> Citation – typically italic
<KBD> <KBD>text</KBD> Keyboard input – fixed-width font
3.2 Physical Styles
Attribute Example / Value Purpose
<B> <B>text</B> Bold text
<I> <I>text</I> Italic text
<U> <U>text</U> Underlined text
<SUB> H<SUB>2</SUB>O Subscript text (smaller, below baseline)
<SUP> r<SUP>3</SUP> Superscript text (smaller, above baseline)
<S> <S>text</S> Strikethrough text
<TT> <TT>text</TT> Teletype / monospace text
3.3 Example 1 – Bold, Italic, Underline
<HTML>
<BODY>
<B>This text is Bold</B><BR>
<I>This text is Italic</I><BR>
<U>This text is Underlined</U><BR>
<B><I>Bold and Italic combined</I></B>
</BODY>
</HTML>
▶ Browser Output
This text is Bold
This text is Italic
This text is Underlined
Bold and Italic combined
3.4 Example 2 – Subscript (Chemistry)
HTML Comprehensive Learning Guide Page 6
<HTML>
<BODY>
<P>Water molecule: H<SUB>2</SUB>O</P>
<P>Sulphuric Acid: H<SUB>2</SUB>SO<SUB>4</SUB></P>
<P>Carbon Dioxide: CO<SUB>2</SUB></P>
</BODY>
</HTML>
▶ Browser Output
Water molecule: H₂O
Sulphuric Acid: H₂SO₄
Carbon Dioxide: CO₂
3.5 Example 3 – Superscript (Maths)
<HTML>
<BODY>
<P>Volume of sphere = (4/3) × π × r<SUP>3</SUP></P>
<P>Area of circle = π r<SUP>2</SUP></P>
<P>2<SUP>10</SUP> = 1024</P>
</BODY>
</HTML>
▶ Browser Output
Volume of sphere = (4/3) × π × r³
Area of circle = π r²
2¹⁰ = 1024
3.6 Example 4 – Logical Styles in Use
<HTML>
<BODY>
<P><EM>Emphasis (italic)</EM></P>
<P><STRONG>Strong emphasis (bold)</STRONG></P>
<P>Code example: <CODE>int x = 10;</CODE></P>
<P>Variable: <VAR>filename</VAR></P>
</BODY>
</HTML>
▶ Browser Output
Emphasis (italic)
Strong emphasis (bold)
Code example: int x = 10;
Variable: filename
HTML Comprehensive Learning Guide Page 7
4. Hypertext Anchors and URLs
A URL (Uniform Resource Locator) is the address of a resource on the web. HTML uses the anchor tag
<A> to create hyperlinks that connect pages, documents, and resources together. This is the
fundamental mechanism of the World Wide Web.
4.1 URL Syntax
scheme://[Link][:port]/path/filename
Examples: [Link] | [Link]
4.2 Anchor Tag Syntax
<A HREF="URL or path">Link text or image</A>
4.3 Anchor Attributes
Attribute Example / Value Purpose
HREF HREF="[Link] URL the link points to (required for a link)
NAME NAME="section1" Creates a named anchor (bookmark) in
the page
TITLE TITLE="About page" Tooltip text shown on hover
TARGET TARGET="_blank" Where to open the link (_blank=new tab,
_self=same)
4.4 Example 1 – External Link
<HTML>
<BODY>
<A HREF="[Link] Yahoo!</A>
<BR>
<A HREF="[Link] TARGET="_blank">Open Google in new tab</A>
</BODY>
</HTML>
▶ Browser Output
Visit Yahoo! ← clickable hyperlink
Open Google in new tab ← opens in new browser tab
4.5 Example 2 – Link to Another Directory / File
<HTML>
<BODY>
<!-- Link to a file in a different folder -->
HTML Comprehensive Learning Guide Page 8
<A HREF="d:/soft/[Link]">Click Here to open [Link]</A>
<BR>
<!-- Link to a relative path -->
<A HREF="../about/[Link]">About Us</A>
</BODY>
</HTML>
▶ Browser Output
Click Here to open [Link]
About Us
4.6 Example 3 – Named Anchor (Same Page Link)
<HTML>
<BODY>
<!-- Jump link at the top -->
<A HREF="#summary">Jump to Summary</A>
<!-- ... lots of page content ... -->
<!-- Named anchor destination -->
<A NAME="summary"><H2>Summary Section</H2></A>
<P>This is the summary content.</P>
</BODY>
</HTML>
▶ Browser Output
Jump to Summary ← clicking scrolls page down to Summary Section
... page content ...
Summary Section
This is the summary content.
4.7 Example 4 – Link Between Sections of Different Documents
<!-- [Link] -->
<A HREF="[Link]#differentlink">
Go to specific section in File B
</A>
<!-- [Link] -->
<H2><A NAME="differentlink">Specific Section</A></H2>
<P>This section is linked from File A.</P>
▶ Browser Output
[Link] shows: Go to specific section in File B (link)
Clicking takes user directly to "Specific Section" in [Link]
4.8 Example 5 – Image as a Link
<HTML>
<BODY>
HTML Comprehensive Learning Guide Page 9
<!-- Small image that links to a larger image -->
<A HREF="[Link]">
<IMG SRC="[Link]" BORDER="0">
</A>
<BR>
<!-- Image linking to another page -->
<A HREF="[Link]">
<IMG SRC="home_icon.gif" WIDTH="30" HEIGHT="30" BORDER="0">
</A>
</BODY>
</HTML>
▶ Browser Output
[small image thumbnail] ← click opens large image
[home icon] ← click goes to [Link]
4.9 Example 6 – Email (Mailto) Link
<HTML>
<BODY>
<A HREF="[Link] the Student</A>
<BR>
<A HREF="[Link]
Mail the Teacher (with subject)
</A>
</BODY>
</HTML>
▶ Browser Output
Email the Student ← opens default mail client
Mail the Teacher (with subject) ← pre-fills subject line
HTML Comprehensive Learning Guide Page 10
5. Lists in HTML
HTML provides four types of lists: Unordered (bulleted), Ordered (numbered), Definition, and Nested.
Lists help organise information clearly and hierarchically.
5.1 List Tags Reference
Attribute Example / Value Purpose
<UL> <UL> ... </UL> Unordered (bulleted) list container
<OL> <OL> ... </OL> Ordered (numbered) list container
<LI> <LI>item</LI> List item (used inside UL or OL)
<DL> <DL> ... </DL> Definition list container
<DT> <DT>term</DT> Definition term
<DD> <DD>desc</DD> Definition description (indented)
5.2 Unordered List
An unordered list uses bullet symbols. The type attribute controls bullet shape: "disc" (filled circle),
"circle" (hollow circle), "square".
<HTML>
<BODY>
<H4>Days of the Week:</H4>
<UL TYPE="disc">
<LI>Sunday</LI>
<LI>Monday</LI>
<LI>Tuesday</LI>
<LI>Wednesday</LI>
</UL>
<H4>With squares:</H4>
<UL TYPE="square">
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
</UL>
</BODY>
</HTML>
▶ Browser Output
Days of the Week:
● Sunday
● Monday
● Tuesday
● Wednesday
With squares:
■ HTML
■ CSS
■ JavaScript
HTML Comprehensive Learning Guide Page 11
5.3 Ordered List
An ordered list uses numbers or letters. The type attribute controls numbering: "1" (numbers), "A"
(uppercase letters), "a" (lowercase), "I" (uppercase Roman), "i" (lowercase Roman). The start attribute
sets the starting number.
<HTML>
<BODY>
<H4>Roman Numeral List:</H4>
<OL TYPE="i">
<LI>Sunday</LI>
<LI>Monday</LI>
<LI>Tuesday</LI>
</OL>
<H4>Starting from 5:</H4>
<OL TYPE="1" START="5">
<LI>Fifth item</LI>
<LI>Sixth item</LI>
<LI>Seventh item</LI>
</OL>
</BODY>
</HTML>
▶ Browser Output
Roman Numeral List:
i) Sunday
ii) Monday
iii) Tuesday
Starting from 5:
5. Fifth item
6. Sixth item
7. Seventh item
5.4 Definition List
A definition list presents terms and their descriptions, similar to a dictionary. The term (<DT>) is on its
own line; the description (<DD>) is indented below it.
<HTML>
<BODY>
<H4>Programming Languages:</H4>
<DL>
<DT>HTML</DT>
<DD>HyperText Markup Language – for web page structure</DD>
<DT>VB Script</DT>
<DD>Scripting Language – for client-side scripting in IE</DD>
<DT>JavaScript</DT>
<DD>General-purpose scripting language for the web</DD>
</DL>
</BODY>
</HTML>
▶ Browser Output
Programming Languages:
HTML
HyperText Markup Language – for web page structure
HTML Comprehensive Learning Guide Page 12
VB Script
Scripting Language – for client-side scripting in IE
JavaScript
General-purpose scripting language for the web
5.5 Nested Lists
Lists can be placed inside other lists to create multi-level hierarchies. Each nested list is indented
automatically by the browser.
<HTML>
<BODY>
<H4>Programming Paradigms:</H4>
<UL>
<LI>Scripted Programming</LI>
<LI>Structured Programming
<UL>
<LI>Basic</LI>
<LI>Pascal</LI>
<LI>C</LI>
</UL>
</LI>
<LI>Object Oriented Languages
<UL>
<LI>Java</LI>
<LI>C++</LI>
<LI>Python</LI>
</UL>
</LI>
</UL>
</BODY>
</HTML>
▶ Browser Output
● Scripted Programming
● Structured Programming
○ Basic
○ Pascal
○ C
● Object Oriented Languages
○ Java
○ C++
○ Python
HTML Comprehensive Learning Guide Page 13
6. Tables in HTML
Tables are used to display data in rows and columns. The TABLE tag creates the container; TR defines
rows; TH creates header cells (bold & centred); TD creates data cells. Tables support borders, spacing,
padding, and spanning across rows and columns.
6.1 Core Table Tags
Attribute Example / Value Purpose
<TABLE> <TABLE BORDER="1"> Defines the table
<CAPTION> <CAPTION>Title</CAPTION> Table title (centred above by default)
<TR> <TR> ... </TR> Defines a table row
<TH> <TH>Header</TH> Header cell (bold, centred)
<TD> <TD>Data</TD> Data cell (normal, left-aligned)
6.2 Table Attributes
Attribute Example / Value Purpose
BORDER BORDER="1" Border thickness in pixels (0 = no border)
BGCOLOR BGCOLOR="blue" Background colour of the table
CELLPADDING CELLPADDING="10" Space between cell border and content
CELLSPACING CELLSPACING="5" Space between individual cells
WIDTH WIDTH="80%" Width of table (pixels or percentage)
HEIGHT HEIGHT="200" Height of table in pixels
ALIGN ALIGN="center" Horizontal alignment: LEFT, CENTER,
RIGHT
COLSPAN COLSPAN="2" Number of columns a cell spans
ROWSPAN ROWSPAN="3" Number of rows a cell spans
6.3 Example 1 – Simple Table (No Border, with Caption)
<HTML>
<BODY>
<TABLE>
<CAPTION>TABLE WITH NO BORDER</CAPTION>
<TR>
<TD>ABC</TD>
<TD>XYZ</TD>
<TD>PQR</TD>
</TR>
<TR>
<TD>LMN</TD>
<TD>DEF</TD>
<TD>HYJ</TD>
</TR>
HTML Comprehensive Learning Guide Page 14
</TABLE>
</BODY>
</HTML>
▶ Browser Output
TABLE WITH NO BORDER
ABC XYZ PQR
LMN DEF HYJ
6.4 Example 2 – Table with Border and Headers
<HTML>
<BODY>
<TABLE BORDER="1">
<CAPTION>Student Marks</CAPTION>
<TR>
<TH>Name</TH>
<TH>Subject</TH>
<TH>Marks</TH>
</TR>
<TR>
<TD>Asha</TD>
<TD>Mathematics</TD>
<TD>95</TD>
</TR>
<TR>
<TD>Ravi</TD>
<TD>Science</TD>
<TD>88</TD>
</TR>
</TABLE>
</BODY>
</HTML>
▶ Browser Output
Student Marks
┌────────┬─────────────┬───────┐
│ Name │ Subject │ Marks │
├────────┼─────────────┼───────┤
│ Asha │ Mathematics │ 95 │
│ Ravi │ Science │ 88 │
└────────┴─────────────┴───────┘
HTML Comprehensive Learning Guide Page 15
6.5 Example 3 – CELLSPACING and CELLPADDING
<HTML>
<BODY>
<H4>WITHOUT CELLSPACING:</H4>
<TABLE BORDER="1">
<TR><TD>SUNDAY</TD><TD>MONDAY</TD></TR>
<TR><TD>WEDNESDAY</TD><TD>THURSDAY</TD></TR>
</TABLE>
<H4>WITH CELLSPACING="10":</H4>
<TABLE BORDER="1" CELLSPACING="10">
<TR><TD>SUNDAY</TD><TD>MONDAY</TD></TR>
<TR><TD>WEDNESDAY</TD><TD>THURSDAY</TD></TR>
</TABLE>
<H4>WITH CELLPADDING="20":</H4>
<TABLE BORDER="1" CELLPADDING="20">
<TR><TD>SUNDAY</TD><TD>MONDAY</TD></TR>
<TR><TD>WEDNESDAY</TD><TD>THURSDAY</TD></TR>
</TABLE>
</BODY>
</HTML>
▶ Browser Output
WITHOUT CELLSPACING: cells are tightly packed together
WITH CELLSPACING=10: gaps appear between each cell
WITH CELLPADDING=20: text has wide space inside each cell border
HTML Comprehensive Learning Guide Page 16
6.6 Example 4 – COLSPAN and ROWSPAN
COLSPAN merges cells horizontally across multiple columns. ROWSPAN merges cells vertically
across multiple rows.
<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TD COLSPAN="2" ALIGN="CENTER">PROGRAMMING LANGUAGE</TD>
</TR>
<TR>
<TD ROWSPAN="2">OBJECT ORIENTED</TD>
<TD>JAVA</TD>
</TR>
<TR>
<TD>C++</TD>
</TR>
<TR>
<TD ROWSPAN="2">STRUCTURED</TD>
<TD>C</TD>
</TR>
<TR>
<TD>BASIC</TD>
</TR>
</TABLE>
</BODY>
</HTML>
▶ Browser Output
┌──────────────────────────┐
│ PROGRAMMING LANGUAGE │ ← COLSPAN="2"
├────────────────┬─────────┤
│ │ JAVA │
│ OBJECT ORIENTED├─────────┤ ← ROWSPAN="2"
│ │ C++ │
├────────────────┼─────────┤
│ │ C │
│ STRUCTURED ├─────────┤ ← ROWSPAN="2"
│ │ BASIC │
└────────────────┴─────────┘
📌 Note: Always include closing </TR>, </TD>, and </TH> tags. Omitting them causes incorrect
rendering in many browsers. Use CELLPADDING for readability and CELLSPACING to control cell
gaps.
HTML Comprehensive Learning Guide Page 17
7. Images in HTML
The <IMG> tag embeds images into an HTML document. Images can be plain, clickable links, or image
maps. Supported formats include GIF, JPEG, PNG, XBM, and XPM. The IMG tag is a self-closing
(void) element – it has no closing tag.
7.1 Syntax
<IMG SRC="URL or path"
ALT="alternative text"
ALIGN="alignment"
BORDER="borderWidth"
HEIGHT="height"
WIDTH="width"
HSPACE="horizMargin"
VSPACE="vertMargin"
>
7.2 Attributes
Attribute Example / Value Purpose
SRC SRC="[Link]" Required. URL or path of the image file
ALT ALT="Company Logo" Text shown if image cannot be displayed
(accessibility)
WIDTH WIDTH="200" Width in pixels or percentage (e.g., "50%")
HEIGHT HEIGHT="150" Height in pixels or percentage
BORDER BORDER="2" Width of border around image in pixels
ALIGN ALIGN="left" Alignment: LEFT, RIGHT, TOP, MIDDLE,
BOTTOM
HSPACE HSPACE="10" Horizontal margin (space left and right of
image)
VSPACE VSPACE="10" Vertical margin (space above and below
image)
7.3 Image Formats
Attribute Example / Value Purpose
GIF .gif Graphics Interchange Format – suited for
icons, logos, simple graphics
JPEG .jpg Joint Photographic Experts Group – suited
for photographs
PNG .png Portable Network Graphics – lossless,
supports transparency
XBM .xbm X Bitmap – monochrome bitmap format
(older)
HTML Comprehensive Learning Guide Page 18
XPM .xpm X PixMap – colour bitmap format (older)
7.4 Example 1 – Basic Image
<HTML>
<BODY>
<IMG SRC="[Link]">
<P>
<IMG SRC="[Link]" WIDTH="200" HEIGHT="150" BORDER="2">
</BODY>
</HTML>
▶ Browser Output
[[Link] displayed at its natural size]
[[Link] displayed at 200×150 pixels with a 2px border]
7.5 Example 2 – Different Sizes of Same Image
<HTML>
<BODY>
<P>Small icon:</P>
<IMG SRC="[Link]" WIDTH="12" HEIGHT="20">
<P>Medium icon:</P>
<IMG SRC="[Link]" WIDTH="50" HEIGHT="70">
<P>Large icon:</P>
<IMG SRC="[Link]" WIDTH="120" HEIGHT="160">
</BODY>
</HTML>
▶ Browser Output
Small icon: [tiny bulb image 12×20]
Medium icon: [medium bulb 50×70]
Large icon: [large bulb 120×160]
Same image file, different dimensions each time.
7.6 Example 3 – Image as a Link
<HTML>
<BODY>
<P>Click the icon to open the destination page:</P>
<A HREF="[Link]">
<IMG BORDER="0" SRC="[Link]" WIDTH="30" HEIGHT="30">
</A>
<P>Click thumbnail to view full-size image:</P>
<A HREF="[Link]">
<IMG BORDER="0" SRC="[Link]">
</A>
</BODY>
</HTML>
HTML Comprehensive Learning Guide Page 19
▶ Browser Output
[[Link]] ← clickable, opens [Link]
[[Link]] ← clickable, opens [Link] in browser
7.7 Example 4 – ALT Text and Accessibility
<HTML>
<BODY>
<!-- If image fails to load, ALT text is displayed -->
<IMG SRC="[Link]"
ALT="This is the company logo"
WIDTH="80" HEIGHT="80">
<!-- Decorative image with empty ALT -->
<IMG SRC="[Link]" ALT="" WIDTH="500" HEIGHT="5">
</BODY>
</HTML>
▶ Browser Output
If image loads: [company logo graphic]
If image fails: This is the company logo
Hover tooltip: "This is the company logo"
7.8 Example 5 – Background Image
<HTML>
<BODY BACKGROUND="[Link]">
<H2>Welcome to My Page</H2>
<P>The background image tiles across the page automatically.
Both .gif and .jpg files can be used as backgrounds.</P>
</BODY>
</HTML>
▶ Browser Output
[[Link] tiles across the entire background]
Welcome to My Page
The background image tiles across the page automatically.
📌 Note: Always provide meaningful ALT text for important images. This is crucial for accessibility
(screen readers), SEO, and users who disable image loading.
HTML Comprehensive Learning Guide Page 20
8. HTML Scripts
Scripts make HTML pages dynamic and interactive. The <SCRIPT> tag embeds client-side code
(JavaScript or VBScript) directly in an HTML page. Scripts can respond to user actions, validate forms,
update content, and much more.
8.1 Script Tags Reference
Attribute Example / Value Purpose
<SCRIPT> <SCRIPT Embeds a client-side script
TYPE="text/javascript">...</SCRIPT>
<NOSCRIPT> <NOSCRIPT>...</NOSCRIPT> Fallback content if scripting is
disabled
<OBJECT> <OBJECT>...</OBJECT> Embeds an external object or
plugin
<PARAM> <PARAM NAME="src" Runtime parameter for
VALUE="[Link]"> <OBJECT>
<APPLET> <APPLET> (deprecated) Deprecated – use <OBJECT>
instead
8.2 The <SCRIPT> Tag
The LANGUAGE (or TYPE) attribute identifies the scripting language. All code should be wrapped in
HTML comment tags <!-- --> to prevent older browsers from displaying the script as plain text.
<SCRIPT LANGUAGE="VBScript">
<!--
... script code here ...
-->
</SCRIPT>
<!-- OR using TYPE attribute: -->
<SCRIPT TYPE="text/javascript">
<!--
... JavaScript code here ...
-->
</SCRIPT>
8.3 Example 1 – Hello World with JavaScript
<HTML>
<HEAD>
<TITLE>JavaScript Example</TITLE>
</HEAD>
<BODY>
<SCRIPT TYPE="text/javascript">
[Link]("Hello World!");
</SCRIPT>
</BODY>
</HTML>
HTML Comprehensive Learning Guide Page 21
▶ Browser Output
Hello World!
8.4 Example 2 – JavaScript with Alert
<HTML>
<HEAD>
<TITLE>Alert Example</TITLE>
<SCRIPT TYPE="text/javascript">
function greetUser() {
var name = prompt("Enter your name:");
alert("Welcome, " + name + "!");
}
</SCRIPT>
</HEAD>
<BODY>
<BUTTON onclick="greetUser()">Click Me!</BUTTON>
</BODY>
</HTML>
▶ Browser Output
[Button appears: Click Me!]
Clicking opens a prompt dialog: "Enter your name:"
After entering "Asha", an alert shows: "Welcome, Asha!"
8.5 Example 3 – The <NOSCRIPT> Tag
The <NOSCRIPT> tag provides alternate content for browsers that do not support scripting or have it
disabled.
<HTML>
<BODY>
<SCRIPT TYPE="text/vbscript">
<!--
[Link]("Hello World from VBScript!")
-->
</SCRIPT>
<NOSCRIPT>
Your Browser Does Not Support VBScript!
</NOSCRIPT>
</BODY>
</HTML>
▶ Browser Output
If VBScript supported: Hello World from VBScript!
If not supported: Your Browser Does Not Support VBScript!
8.6 Example 4 – VBScript Button Click Event
Inline script within a form responds to the button click event:
<HTML>
<HEAD>
<TITLE>Button Event Test</TITLE>
</HEAD>
HTML Comprehensive Learning Guide Page 22
<BODY>
<FORM NAME="Form1">
<INPUT TYPE="Button" NAME="Button1" VALUE="Click Me!">
<SCRIPT FOR="Button1" EVENT="onClick" LANGUAGE="VBScript">
MsgBox "Button Pressed!"
</SCRIPT>
</FORM>
</BODY>
</HTML>
▶ Browser Output
[Form with button: "Click Me!"]
Clicking displays a message box: "Button Pressed!"
8.7 Example 5 – VBScript Random Number Generator
This VBScript generates 10 unique random numbers between 1 and 100:
<%@ LANGUAGE="VBSCRIPT" %>
<%
x = 0
y = 0
Dim xarr(9)
Do While x < 10
Randomize
MyVal = Int(100 * Rnd) + 1
y = 0
For y = 0 To 9
If MyVal = xarr(y) Then
Match = True
Exit For
Else
Match = False
End If
Next
If Match = False Then
xarr(x) = MyVal
x = x + 1
End If
Loop
%>
<HTML>
<BODY>
<TITLE>Random Number Generator</TITLE>
<% x = 0 %>
<% For x = 0 To 9 %>
<P><%= (x+1) %>) <%= xarr(x) %></P>
<% Next %>
</BODY>
</HTML>
▶ Browser Output
Random Number Generator
1) 47
2) 83
3) 6
4) 91
5) 23
6) 58
7) 14
HTML Comprehensive Learning Guide Page 23
8) 70
9) 35
10) 62
(Values change each time the page loads)
8.8 Example 6 – JavaScript Form Validation
A practical use of scripting: validate a form before submission.
<HTML>
<HEAD>
<TITLE>Form Validation</TITLE>
<SCRIPT TYPE="text/javascript">
function validate() {
var name = [Link]["myForm"]["fname"].value;
if (name == "" || name == null) {
alert("Name must be filled out!");
return false;
}
alert("Form submitted successfully!");
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm" onsubmit="return validate()">
Name: <INPUT TYPE="text" NAME="fname"><BR>
<INPUT TYPE="submit" VALUE="Submit">
</FORM>
</BODY>
</HTML>
▶ Browser Output
Form shows: Name: [text box] [Submit button]
If name is empty and Submit clicked:
Alert: "Name must be filled out!"
If name is entered and Submit clicked:
Alert: "Form submitted successfully!"
📌 Note: JavaScript is the dominant client-side scripting language in modern web development.
VBScript is largely obsolete and only supported by older versions of Internet Explorer. For modern
development, always prefer JavaScript.
HTML Comprehensive Learning Guide Page 24