Htmllllllllllllllllllllllllllllllllll.pdf

Definitions
• WWW – World Wide Web.
• HTML – HyperText Markup Language – The
Language of Web Pages on the World Wide Web.
• HTML is a text formatting language.
• URL – Uniform Resource Locator.
• Browser – A software program which is used to show
web pages.
•
2

Introduction
• “Normal text” surrounded by bracketed tags that tell
browsers how to display web pages
• Pages end with “.htm” or “.html”
• HTML Editor – A word processor that has been
specialized to make the writing of HTML documents
more effortless.
3

Introduction
• HTML standsfor Hypertext Markup Language, and it
is the most widely used language to write Web Pages.
• As its name suggests, HTML is a markup language.
• Hypertext refers to the way in which Web pages
(HTML documents) are linked together. When you
click a link in a Web page, you are using hypertext.
4

Introduction
• Markup Language describes how HTML
works.
• With a markup language, you simply "mark
up" a text document with tags that tell a
Web browser how to structure it to display.
5

Structure of HTML
• The basic structure for all HTML
documents is simple and should include
the following minimum elements or tags:
• <html> - The main container for HTML
pages
• <head> - The container for page header
information
• <title> - The title of the page
• <body> - The main body of the page 6

Basic Structure Document
– <HTML>
– <HEAD>
– <TITLE>MES College Marampally</TITLE>
– </HEAD>
– <BODY>
– This is what is displayed.
– </BODY>
– </HTML>
–
7

Tags
• Codes enclosed in brackets
• Usually paired
– <TITLE>My Web Page</TITLE>
• Not case sensitive
– <TITLE> = <title> = <TITLE>
8

<!DOCTYPE> Declaration
• The <!DOCTYPE> declaration tag is used by the
web browser to understand the version of the
HTML used in the document. Current version of
HTML is 5 and it makes use of the following
declaration −
• <!DOCTYPE html>There are many other
declaration types which can be used in HTML
document depending on what version of HTML
is being used.
9

The <html> Element
• The <html> element is the containing element
for the whole HTML document. Each HTML
document should have one <html> and each
document should end with a closing </html> tag.
• Following two elements appear as direct
children of an <html> element:
• <head>
• <body>
• As such, start and end HTML tags enclose all
the other HTML tags you use to describe the
Web page. 10

The <head> Element
• The <head> element is just a container for
all other header elements. It should be the
first thing to appear after the opening
<html> tag.
• Each <head> element should contain a
<title> element indicating the title of the
document.
11

The <title> Element
• You should specify a title for every page
that you write inside the <title> element.
This element is a child of the <head>
element). It is used in several ways:
1. It displays at the very top of a browser
window.
2. It is used as the default name for a
bookmark in browsers such as IE and
Netscape.
12

The <title> Element
3. Its is used by search engines that use its
content to help index pages.
• Therefore it is important to use a title that really
describes the content of your site. The <title>
element should contain only the text for the title
and it may not contain any other elements.
• Example:
• Here is the example of using title tag.
• <head><title>HTML Basic tags</title> </head>
13

The <body> Element
• The <body> element appears after the <head>
element and contains the part of the Web page
that you actually see in the main browser
window, which is sometimes referred to as body
content.
• A <body> element may contain anything from a
couple of paragraphs under a heading to more
complicated layouts containing forms and tables.
• Most of what you will be learning in this and the
following five chapters will be written between
the opening <body> tag and closing </body>
tag. 14

The <body> Element
• Example:
• Here is the example of using body tag.
• <body> <p>This is a paragraph tag.</p>
</body>
15

Attributes
• Attributes are another important part of HTML
markup.
• An attribute is used to define the characteristics
of an element and is placed inside the element's
opening tag.
• All attributes are made up of two parts: a name
and a value:
• The name is the property you want to set.
• For example, the <font> element in the example
carries an attribute whose name is face, which
you can use to indicate which typeface you want
the text to appear in.
16

Attributes
• The value is what you want the value of the
property to be.
• The first example was supposed to use the Arial
typeface, so the value of the face attribute is
Arial.
• you can see that a color for the text has
been specified as well as the typeface in
this <font> element:
• <font face="arial" color="#CC0000">
17

Generic Attributes
18
Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an
HTML element.
bgcolor numeric,
hexidecimal, RGB
values
Places a background color behind
an element
background URL Places an background image
behind an element

Generic Attributes
19
Attribute Options Function
id User Defined Names an element for use with
Cascading Style Sheets.
class User Defined Classifies an element for use with
Cascading Style Sheets.
width Numeric Value Specifies the width of tables,
images, or table cells.
height Numeric Value Specifies the height of tables,
images, or table cells.
title User Defined "Pop-up" title for your elements.

Color Codes
• WHITE
• BLACK
• RED
• GREEN
• BLUE
• MAGENTA
• CYAN
• YELLOW
• AQUAMARINE
• BAKER’S CHOCOLATE
• VIOLET
• BRASS
• COPPER
• #FFFFFF
• #000000
• #FF0000
• #00FF00
• #0000FF
• #FF00FF
• #00FFFF
• #FFFF00
• #70DB93
• #5C3317
• #9F5F9F
• #B5A642
• #B87333
21

Background Color
• It is very common to see web pages with
their background color set to white or
some other colors.
• To set your document’s background color,
you need to edit the <BODY> element by
adding the BGCOLOR attribute.
• The following example will display a
document with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
22

TEXT Color
• The TEXT attribute is used to control the
color of all the normal text in the
document. The default color for text is
black. The TEXT attribute would be added
as follows:
• <BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
• In this example the document’s page color
is white and the text would be red.
23

Headings, <Hx> </Hx>
• Inside the BODY element, heading elements H1
through H6 are generally used for major
divisions of the document.
• Headings are permitted to appear in any order,
but you will obtain the best results when your
documents are displayed in a browser if you
follow these guidelines:
• H1: should be used as the highest level of
heading, H2 as the next highest, and so forth.
24

Headings, <Hx> </Hx>
• <HTML>
• <HEAD><TITLE> Example
page</TITLE>
• </HEAD>
• <BODY>
• <H1> Heading 1 </H1>
• </BODY>
• </HTML>
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
25

Paragraphs, <P> </P>
• Paragraphs allow you to add text to a document
in such a way that it will automatically adjust the
end of line to suite the window size of the
browser in which it is being displayed.
• Each line of text will stretch the entire length of
the window.
26

• <HTML><HEAD>
• <TITLE> Example Page</TITLE>
• </HEAD>
• <BODY></H1> Heading 1 </H1>
• <P> Paragraph 1, ….</P>
• <H6> Heading 6</H6>
• </BODY></HTML>
• Heading 1
• Paragraph 1,….
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
• Paragraph 6,…. 27

• <p align="left">This is left aligned.</p>
<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is jutified. This works
when you have multiple lines in your paragraph
and you want to justfy all the lines so that they
can look more nice.</p>
28

Break, <BR>
• Line breaks allow you to decide where the text
will break on a line or continue to the end of the
window.
• A <BR> is an empty Element, meaning that it
may contain attributes but it does not contain
content.
• The <BR> element does not have a closing tag.
29

Break, <BR>
• <HTML>
• <HEAD>
• <TITLE> Example
Page</TITLE>
• </HEAD>
• <BODY>
• <P>Paragraph 1, <BR>
• Line 2 <BR> Line 3
<BR>….
• </P>
• </BODY>
• </HTML>
• Heading 1
• Line 2
• Line 3
• ….
30

Horizontal Rule, <HR>
• The <HR> element causes the browser to
display a horizontal line (rule) in your document.
• <HR> does not use a closing tag, </HR>.
• Horizontal rules are used to visually break up
sections of a document.
• The <hr> tag creates a line from the current
position in the document to the right margin and
breaks the line accordingly.
• For example
• <p>This is paragraph one and should be on
top</p> <hr> <p>This is paragraph two and
should be at bottom</p>
31

Attribute Description Default Value
SIZE
Height of the rule in
pixels
2 pixels
WIDTH
Width of the rule in
pixels or percentage
of screen width
100%
NOSHADE
Draw the rule with a
flat look instead of a
3D look
Not set
(3D look)
ALIGN
Aligns the line (Left,
Center, Right)
Center
COLOR
Sets a color for the
rule (IE 3.0 or later)
Not set
32

• <HTML>
• <HEAD>
• <TITLE> Example
Page</TITLE>
• </HEAD>
• <BODY>
• <P>Paragraph 1, <BR>
• Line 2 <BR>
• <HR>Line 3 <BR>
• </P>
• </BODY>
• </HTML>
• Heading 1
• Line 2
• _________________
__________
• Line 3
33

Character Formatting
• The <center> Element
• You can use <center> tag to put any
content in the center of the page or any
table cell.
• Example:
• <p>This is not in the center.</p> <center>
<p>This is in the center.</p> </center>
34

• Nonbreaking Spaces:
• Suppose you were to use the phrase "12 Angry Men." Here
you would not want a browser to split the "12" and "Angry"
across two lines:
• A good example of this technique appears in the movie "12
Angry Men.“
• In cases where you do not want the client browser to break
text, you should use a nonbreaking space entity ( )
instead of a normal space. For example, when coding the "12
Angry Men" paragraph, you would use something similar to
the following code:
• <p>A good example of this technique appears in the movie
"12 Angry Men."</p>
35

• Preserve Formatting - The <pre> Element:
• Sometimes a text to follow the exact format of how it
is written in the HTML document. In those cases,
usee the preformatted tag (<pre>).
• Any text between the opening <pre> tag and the
closing </pre> tag will preserve the formatting of the
source document.
• <pre> function testFunction( strText )
– { alert (strText) }
</pre>
36

Presentational Tags
• If you use a word processor, you are familiar with the
ability to make text bold, italicized, or underlined;
these are just three of the ten options available to
indicate how text can appear in HTML.
• Bold Text - The <b> Element:
• Anything that appears in a <b>...</b> element is
displayed in bold, like the word bold here:
• <p>The following word uses a <b>bold</b>
typeface.</p>
• This will produce following result:
• The following word uses a bold typeface.
37

Presentational Tags
• Italic Text - The <i> Element:
• Anything that appears in a <i>...</i> element is
displayed in italicized, like the word italicized here:
• <p>The following word uses a <i>italicized</i>
typeface.</p>
• The following word uses a italicized typeface.
38

Presentational Tags
• Underlined Text - The <u> Element:
• Anything that appears in a <u>...</u> element is
displayed with underline, like the word underlined
here:
• <p>The following word uses a <u>underlined</u>
typeface.</p>
• The following word uses a underlined typeface.
39

Presentational Tags
• Strike Text - The <strike> Element:
• Anything that appears in a <strike>...</strike>
element is displayed with strikethrough, which is a
thin line through the text:
• <p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
• The following word uses a strikethrough typeface.
40

Presentational Tags
• Monospaced font - The <tt> Element:
• The content of a <tt> element is written in
monospaced font.
• Most fonts are known as variable-width fonts because
different letters are of different widths (for example,
the letter m is wider than the letter i). In a
monospaced font, however, each letter is the same
width.
• <p>The following word uses a <tt>monospaced</tt>
typeface.</p>
• The following word uses a monospaced typeface
41

Presentational Tags
• Superscript Text - The <sup> Element:
• The content of a <sup> element is written in
superscript; the font size used is the same size as the
characters surrounding it but is displayed half a
characters height above the other characters.
• <p>The following word uses a
<sup>superscript</sup> typeface.</p>
• The following word uses a
superscript
typeface.
42

Presentational Tags
• Subscript Text - The <sub> Element:
• The content of a <sub> element is written in
subscript; the font size used is the same as the
characters surrounding it, but is displayed half a
character’s height beneath the other characters.
• <p>The following word uses a <sub>subscript</sub>
typeface.</p>
• The following word uses a subscript typeface.
43

Presentational Tags
• Larger Text - The <big> Element:
• The content of the <big> element is displayed one
font size larger than the rest of the text surrounding it.
• <p>The following word uses a <big>big</big>
typeface.</p>
• The following word uses a big typeface.
44

Presentational Tags
• Smaller Text - The <small> Element:
• The content of the <small> element is displayed one
font size smaller than the rest of the text surrounding
it.
• <p>The following word uses a <small>small</small>
typeface.</p>
• The following word uses a small typeface.
45

Phrase Elements
• The following elements are not used as widely. As
the element names indicate, they are designed to
describe their content:
❑ <em> and <strong> for emphasis
❑ <blockquote>, <cite>, and <q> for quotations and
citations
❑ <abbr>, <acronym>, and <dfn> for abbreviations,
acronyms, and key terms
❑ <code>, <kbd>, <var>, and <samp> for computer
code and information
❑ <address> for addresses 46

Phrase Elements
• Emphasized Text - The <em> Element:
• The content of an <em> element is intended to be a
point of emphasis in the document, and it is usually
displayed in italicized text. The kind of emphasis
intended is on words such as "must" in the following
sentence:
• <p>You <em>must</em> remember to close
elements in HTML.</p>
• You must remember to close elements in HTML.
47

Phrase Elements
• Strong Text - The <strong> Element:
• The <strong> element is intended to show strong
emphasis for its content; stronger emphasis than the
<em> element. As with the <em> element, the
<strong> element should be used only when you want
to add strong emphasis to part of a document.
• <p>You <strong>must</strong> remember to close
elements in HTML.</p>
• You must remember to close elements in XHTML.
48

Phrase Elements
• Text Abbreviation - The <abbr> Element
• You can indicate when you are using an abbreviated
form by placing the abbreviation between opening
<abbr> and closing </abbr> tags.
• <p>I have a Friend called <abbr title = "Abhishek“ >
Abhy</abbr>.</p>
• I have a friend called Abhy.
•
49

Phrase Elements
• Using Acronym - The <acronym> Element
• The <acronym> element allows to indicate that the
text between an opening <acronym> and closing
</acronym> element is an acronym.
• When possible use a title attribute whose value is the
full version of the acronyms on the <acronym>
element.
• <p>This chapter covers marking up text in <acronym
title=“Hypertext Markup Language“> HTML
</acronym>.</p>
• This chapter covers marking up text in HTML.
50

Phrase Elements
• The <dfn> Element :
• The <dfn> element allows to specify a special term.
• Its use is similar to the words that are in italics in the
midst of paragraphs.
• Most recent browsers render the content of a <dfn>
element in an italic font.
• <p>This tutorial teaches you how mark up your
documents for the web using <dfn> HTML </dfn>
</p>
• This tutorial teaches you how mark up your
documents for the web using HTML.
51

Phrase Elements
• The <blockquote> Element :
• When to quote a passage from another source, you should use
the <blockquote> element.
• Text inside a <blockquote> element is usually indented from
the left and right edges of the surrounding text, and sometimes
uses an italicized font.
• <p>The following description of HTML is taken from the
W3C Web site:</p> <blockquote> HTML 1.0 is the W3C's
first Recommendation for XHTML, </blockquote>
• The following description of HTML is taken from the W3C
Web site:
• HTML 1.0 is the W3C's first Recommendation for XHTML 52

Phrase Elements
• Short Quotations - The <q> Element :
• The <q> element is intended to be used to add a quote
within a sentence rather than as an indented block on
its own.
• <p>Amit is in Spain, <q>He is their at my home. I
think I am wrong</q>.</p>
• Amit is in Spain, ”He is their at my home. I think I
am wrong.”
53

Phrase Elements
• Citations - The <cite> Element :
• If you are quoting a text, you can indicate the source
placing it between an opening <cite> tag and closing
</cite> tag.
• The content of the <cite> element is rendered in
italicized text by default.
• <p>This HTML Tutorial is derived from
<cite>World Wide Web Standard for
HTML</cite>.</p>
• This HTML Tutorial is derived from World Wide
Web Standard for HTML.
54

Phrase Elements
• The <code> Element :
• Any code to appear on a Web page should be placed
inside a <code> element. Usually the content of the
<code> element is presented in a monospaced font,
just like the code in most programming books.
• <h1><code>This is inside code element </code>
</h1>
• This is inside code element
55

Phrase Elements
• Keyboard Text - The <kbd> Element :
• When you are talking about computers, if you want to
tell a reader to enter some text, you can use the <kbd>
element to indicate what should be typed in, as in this
example.
• The content of a <kbd> element is usually
represented in a monospaced font rather like the
content of the <code> element.
• <h1> <kbd>This is inside kbd element</kbd></h1>
This will produce following result:
• This is inside kbd element 56

Phrase Elements
• Programming Variables - The <var> Element :
• This element is usually used in conjunction with the
<pre> and <code> elements to indicate that the
content of that element is a variable that can be
supplied by a user.
• <p><code>document.write("<var>user-name
</var>") </code></p> This will produce following
result:
• document.write("user-name")
57

Phrase Elements
• Addresses - The <address> Element :
• The <address> element is used to contain any
address. For example:
• <address>304, Menna Colony, Hyderabad - INDIA,
500032</address> This will produce following result:
• 304, Menna Colony, Hyderabad - INDIA, 500032
58

Phrase Elements
• Program Output - The <samp> Element :
• The <samp> element indicates sample output from a
program, script, or the like. Again, it is mainly used
when documenting programming concepts. For
example:
• <p>Result produced by the program is <samp>Hello
World</samp></p> This will produce following
result:
• Result produced by the program is Hello World
59

Comments
• Comments are piece of code which is ignored by any
web browser. It is good practice to comment your
code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone
looking at the code. Comments help you and others
understand your code.
• HTML Comment lines are indicated by the special
beginning tag  placed at the
beginning and end of EVERY line to be treated as a
comment.
60

Comments
• Comments do not nest, and the double-dash sequence
"--" may not appear inside a comment except as part
of the closing --> tag. You must also make sure that
there are no spaces in the start-of-comment string.
• For example: Given line is a valid comment in
HTML
• 
61

Comments
• T Multiline Comments:
• You have seen how to comment a single line in
HTML. You can comment multiple lines by the
special beginning tag  placed
before the first line and end of the lastline to be
treated as a comment.
• For example:
• <!– -
This is a multiline comment <br />
and can span through as many as lines you like.
--> 62

HTML Fonts
• Font face and color depends entirely on the computer
and browser that is being used to view your page. But
the <font> tag is used to add style, size, and color to
the text on the site.
• it can use a <basefont> tag to set all of your text to
the same size, face, and color.
• The font tag is having three attributes called size,
color, and face to customize your fonts.
• To change any of the font attributes at any time
within your page, simply use the <font> tag.
• The text that follows will remain changed until you
close with the </font> tag.
63

HTML Fonts
• Font Size attribute:
• You can set the size of your font with size attribute.
The range of accepted values is from 1(smallest) to
7(largest). The default size of a font is 3.
• Example:
• <font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>
64

HTML Fonts
• SPECIFY THE RELATIVE FONT SIZE.
• <font size="+n"> or <font size="-n">:
You can specify how many sizes larger or how many
sizes smaller than the preset font size should be.
• Example:
• <font size="-1">Font size="-1"</font>
• <font size="+1">Font size="+1"</font>
65

HTML Fonts
• Font Face:
• You can set any font you like using face attribute but be aware
that if the user viewing the page doesn't have the font installed,
they will not be able to see it.
• Instead they will default to Times New Roman of your font
with size attribute.
• Example:
• <font face="Times New Roman" size="5">Times New Roman
</font>
• <font face="Verdana" size="5">Verdana</font>
• <font face="Comic sans MS" size="5">Comic Sans MS
</font>
• <font face="WildWest" size="5">WildWest</font>
• <font face="Bedrock" size="5">Bedrock</font>
66

HTML Fonts
• Specify alternate font faces:
• A visitor will only be able to see your font if they have that
font installed on their computer.
• So, it is possible to specify two or more font face alternatives
by listing the font face names, separated by a comma.
• Example:
• <font face="arial,helvetica">
• <font face="Lucida Calligraphy,Comic Sans MS,Lucida
Console>
• When your page is loaded, their browser will display the first
font face that it has available.
• If none of your selections are installed....then it will display
the default font face Times New Roman.
67

HTML Fonts
• Font Color:
• You can set any font color you like
using color attribute.
• You can specify the color that you want by either the
color name or hexadecimal code for that color.
• Example:
• <font color="#FF00FF">This text is hexcolor
#FF00FF</font>
• <font color="red">This text is red</font>
68

HTML marquee
• A HTML marquee is a scrolling piece of text
displayed either horizontally across or vertically
down your web site page depending on the settings.
This is created by using HTML tag <marquees>.
• Syntax:
• A simple syntax to use marquee is as follows:
• <marquee attribute_name="attribute_value"....more
attributes>
• One or more lines or text message or image
</marquee>
69

HTML marquee
• Attrubutes:
• A HTML marquee can have following attributes:
1. width: how wide the marquee is. This will have a
value like 10 or 20%etc.
2. height: how tall the marquee is. This will have a
value like 10 or 20% etc.
3. direction: which direction the marquee should scroll.
This will have value either up,down, left or right.
4. behavior: what type of scrolling. This will have
value scroll, slid and alternate.
5. scrolldelay: how long to delay between each jump.
This will have a value like 10 etc.
70

HTML marquee
6. scrollamount: how far to jump. This will have a
value like 10 etc.
7. loop: how many times to loop. The default value is
INFINITE, which means that the marquee loops
endlessly.
8. bgcolor: background color. This will have any color
name or color hex value.
9. hspace: horizontal space around the marquee. This
will have a value like 10 or 20%etc.
10. vspace: vertical space around the marquee. This will
have a value like 10 or 20%etc. 71

HTML Images
• Images are very important to beautify as well as to
depicts many concepts on your web page. Its is true
that one single image is worth than thousands of
words.
• Insert Image - The <img> Element:
• You will insert any image in your web page by using
<img> tag.
• Following is the simple syntax to use this tag.
• <img src="image URL" attr_name="attr_value"...
more attributes >
72

HTML Images
• <IMG>This element defines a graphic image on the
page.
• Image File (SRC:source):
• This value will be a URL (location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
73

HTML Images
• Image Attributes:
• Following are most frequently used attributes for
<img> tag.
1. width: sets width of the image. This will have a
value like 10 or 20%etc.
2. height: sets height of the image. This will have a
value like 10 or 20% etc.
3. border: sets a border around the image. This will
have a value like 1 or 2 etc.
4. src: specifies URL of the image file.
5. alt: this is an alternate text which will be displayed if
image is missing.
74

HTML Images
6. align: this sets horizontal alignment of the image
and takes value either left, right orcenter.
7. valign: this sets vertical alignment of the image and
takes value either top, bottom orcenter.
8. hspace: horizontal space around the image. This will
have a value like 10 or 20%etc.
9. vspace: vertical space around the image. This will
have a value like 10 or 20%etc.
10. name: name of the image with in the document.
11. id: id of the image with in the document.
75

HTML Images
12. style: this will be used if you are using CSS.
13. stitle: specifies a text title. The browser, perhaps
flashing the title when the mouse passes over the
link.
76

HTML Images
• Some Examples on images
1) <IMG SRC=“graden.gif“ border=4>
2) <IMG SRC=“graden.gif " width="60" height="60">
3) <IMG SRC=“graden.gif " ALT="This is a text that
goes with the image">
4) <IMG SRC=“graden.gif“ Hspace="30"
Vspace="10" border=20>
5) < IMG SRC =" graden.gif“ align="left">
77

Lists
• In this chapter you will learn how to create a variety
of lists.
• Objectives
• Upon completing this section, you should be able to
❑ Unordered lists, which are like lists of bullet points
❑ Ordered lists, which use a sequence of numbers or
letters instead of bullet points
❑ Definition lists, which allow you to specify a term
and its definition
• Nest Lists. 78

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> List item …
• <LI> List item …</LI> List item …
• </UL>
79

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>
• </UL>
80

List Elements
• OL: Ordered List. Items in this list are numbered
automatically by the browser.
• <OL>
• <LI> List item One…</LI>
• <LI> List item Two …</LI>
• <LI> List item Three…</LI>
• </OL>
• You have the choice of setting the TYPE Attribute to
one of five numbering styles.
81

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, ……
82

List Elements
• You can specify a starting number for an ordered list.
• <OL TYPE =“i”>
• </OL>
• <P> text ….</P>
• <OL TYPE=“i” START=“3”>
• </OL>
83

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> 84

Nesting Lists
• You can nest lists by inserting a UL, OL, etc., inside a list item (LI).
• EXample
• <UL TYPE = “square”>
• <LI> List item …
• <OL TYPE=“i” START=“3”>
• <LI> List item 1 …</LI>
• <LI> List item 2…</LI>
• </OL>
• </LI>
• <LI> List item …</LI> 85

What will be the output?
86
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>

88
<H1 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H1>
<OL TYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support
<OL type="I" start="4">
<LI> Be careful </LI>
<LI> Do not look around</LI>
</LI> </OL>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
What
will
be the
output?

MSc – Html Table 90
Tables
• Tables provide a means of organising the layout of
data
• A table is divided into rows and columns: these
specify the cells of the table
• Cells can contain text, images, links, other tables...
• Tables can also be used for organising the layout of
the web page itself.

BSc CM0133 Internet Computing 91
Tables
• <table> main element
• <tr> table row
• <th> table header
• <td> table data
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D P Jones</td>
<td>Sailing</td>
<td>8</td>
</tr>
<tr>
</table>

Tables
• <table> main element
• <tr> table row
• <th> table header
• <td> table data
<table border="1">
<tr>
<th>Name</th>
<td>A B Morgan</td>
<td>D P Jones</td>
</tr>
<tr>
<th>Course</th>
<td>Fishing</td>
<td>Sailing</td>
</tr>
<tr>
<th>Year</th>
<td>8</td>
<td>5</td>
</tr>
<tr>
</table>

Rows and Columns
• Cells can span multiple
columns and multiple
rows with the colspan
and rowspan attributes
<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B</td>
<td>Morgan</td>
<td rowspan="2">Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D J</td>
<td>Jones</td>
<td>Sailing</td>
<td>8</td>
</tr>
<tr>
</table>

The align and width attributes
• The align
attribute
determines the
position of the
text within a
cell
• The width
attribute
determines the
width of the
row relative to
the table
<table border="1" align="center">
<tr>
<th colspan="2" width="60%">Name</th>
<th rowspan="2">Course</th>
<th rowspan="2">Year</th>
</tr>
<tr>
<th>Last</th>
<th>Init.</th>
</tr>
<tr>
<td>Morgan</td>
<td>AB</td>
<td>Fishing</td>
<td align="center">5</td>
</tr>
<!– etc -->

95
Table attributes
Table attributes
• align alignment relative to the page
• width in pixels or percentage of page width
• border - width of border (pixels)
• cellspacing separation between cells (pixels)
• cellpadding - space around data inside cell (pixels)
• bgcolor - background colour (inside cells)
Furthermore
• The <caption> element puts a title above the table

BSc CM0133 Internet
Computing
96
Table attributes
<table border="3" align="center" cellspacing="6"
cellpadding="6" bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<!– etc -->

BSc CM0133 Internet
Computing
97
Page
formatting
</body>
<table border="0" cellspacing="10">
<tr>
<td>
<img src="cat.gif" alt="cat">
<ul>
<li>cats</li>
<li>dogs</li>
<li>butterflies</li>
</ul>
</td>
<td>
This piece of text illustrates
the idea of placing two columns
of information in a web page...
Note also that there is no
border in this table.
</td>
</tr>
</table>
</body>
• Tables can be used to
organize the layout of
the web page itself

HTML Links
• Web pages can contain links that take you directly to
other pages and even specific parts of a given page.
• These links are known as hyperlinks.
• Hyperlinks allow visitors to navigate between Web
sites by clicking on words, phrases, and images.
98

HTML Links
• Linking Documents - The <a> Element:
• A link is specified using the <a> element.
• This element is called anchor tag as well.
• Anything between the opening <a> tag and the
closing </a> tag becomes part of the link and a user
can click that part to reach to the linked document.
• Following is the simple syntax to use this tag.
• <a href="Document URL" attr_name = "attr_value“
..more attributes />
99

More on LINKs
• <body LINK="#C0C0C0" VLINK="#808080"
ALINK ="#FF0000">
• LINK - standard link - to a page the visitor hasn't
been to yet. (standard color is blue - #0000FF).
• VLINK - visited link - to a page the visitor has been
to before. (standard color is purple - #800080).
• ALINK - active link - the color of the link when the
mouse is on it. (standard color is red - #FF0000).
• If the programmer what to change the color
• Click <a href="http://www.yahoo.com"><font
color="FF00CC">here</font></a> to go to yahoo. 100

HTML Links
• Anchor Attributes:
• Following are most frequently used attributes for <a>
tag.
1. href: specifies the URL of the target of a hyperlink.
Its value is any valid document URL, absolute or
relative, including a fragment identifier or a
JavaScript code fragment.
2. target: specify where to display the contents of a
selected hyperlink.
1. If set to "_blank" then a new window will be opened to
display the loaded page, 101

HTML Links
• Anchor Attributes:
– if set to "_top" or "_parent" then same window will be used
to display the loaded document,
– if set to "_self" then loads the new page in current window.
By default its "_self".
3. name & id: attributes places a label within a
document. When that label is used in a link to that
document, it is the equivalent of telling the browser to
goto that label.
4. event: attributes like onClick, onMouseOver etc. are
used to trigger any Javascript ot VBscript code.
102

HTML Links
5. title: attribute lets you specify a title for the document
to which you are linking. The value of the attribute is
any string, enclosed in quotation marks. The browser
might use it when displaying the link, perhaps
flashing the title when the mouse passes over the link.
6. accesskey: attribute attribute provides a keyboard
shortcut that can be used to activate a link. For
example, you could make the T key an access key so
that when the user presses either the Alt or Ctrl key
on his keyboard (depending on his operating system)
along with the T key, the link gets activated
103

Internal Links
• Internal Links : Links can also be created inside large
documents to simplify navigation.
• Select some text at a place in the document that you
would like to create a link to, then add an anchor to
link to like this:
• <A NAME=“bookmark_name”></A>
•
104

Internal Links
• The Name attribute of an anchor element specifies a
location in the document that we link to shortly. All
NAME attributes in a document must be unique.
• Next select the text that you would like to create as a
link to the location created above.
• <A HREF=“#bookmark_name”>Go To Book
Mark</A>
105

Special Characters & Symbols
• These Characters are recognized in HTML as they
begin with an ampersand and end with with a semi-
colon e.g. &value; The value will either be an entity
name or a standard ASCII character number. They
are called escape sequences.
• The next table represents some of the more
commonly used special characters.
106

Special
Character
Entity
Name
Special
Character
Entity
Name
Ampersand & & Greater-than
sign
> >
Asterisk &lowast;
∗∗
Less-than sign < <
Cent sign ¢ ¢ Non-breaking
space
 
Copyright © © Quotation mark " "
Fraction one qtr ¼
¼
Registration
mark
® ®
Fraction one
half
½
½
Trademark sign ™
™
107

• Additional escape sequences support accented
characters, such as:
• ö
– a lowercase o with an umlaut: ö
• ñ
– a lowercase n with a tilde: ñ
• È
– an uppercase E with a grave accent: È
• NOTE: Unlike the rest of HTML, the escape
sequences are case sensitive. You cannot, for
instance, use &LT; instead of <.
108

E-Mail (Electronic Mail)
• E.g. mailto:kmf@yahoo.com
• The type of service is identified as the mail
client program. This type of link will launch
the users mail client.
• The recipient of the message is
kmf@yahoo.com
• <A HREF=“mailto:kmf@yahoo.com”>Send
me
• More Information </A> 109

Frames
• Frames are a relatively new addition to the HTML
standard. First introduced in Netscape Navigator 2.0.
• Objectives:
• Upon completing this section, you should be able to:
• Create a Frame based page.
• Work with the Frameset, Frame, and Noframes
elements.
• Use the attributes of the Frames elements to control
the display.
• Set Targets appropriately. 110

Frames
• A framed page is actually made up of multiple
HTML pages. There is one HTML document that
describes how to break up the single browser window
into multiple windowpanes. Each windowpane is
filled with an HTML document.
• For Example to make a framed page with a
windowpane on the left and one on the right requires
three HTML pages. Doc1.html and Doc2.html are the
pages that contain content. Frames.html is the page
that describes the division of the single browser
window into two windowpanes. 111

Frames
112
Doc2.html
Doc1.html
Frames.html
Doc2.html
Doc1.html

Frame Page Architecture
• A <FRAMESET> element is placed in the html
document before the <BODY> element. The
<FRAMESET> describes the amount of screen real
estate given to each windowpane by dividing the
screen into ROWS or COLS.
• The <FRAMESET> will then contain <FRAME>
elements, one per division of the browser window.
• Note: Because there is no BODY container,
FRAMESET pages can't have background images
and background colors associated with them.
113

Frame Page Architecture
• <HTML>
• <HEAD>
• <TITLE> Framed Page </TITLE>
• <FRAMESET COLS=“23%,77%”>
• <FRAME SRC=“Doc1.html”>
• <FRAME SRC=“Doc2.html”>
• </FRAMESET >
• </HEAD>
• </HTML>
114

Graphical view
115
FRAMESET COLS=”23%, 77%”
FRAME
NAME=right_pane
SRC= Doc2.html
FRAME
NAME= left_pane
SRC=Doc1.html

<FRAMESET> Container
• <FRAMESET> : The FRAMESET element creates
divisions in the browser window in a single direction.
This allows you to define divisions as either rows or
columns.
• ROWS : Determines the size and number of rectangular
rows within a <FRAMESET>. They are set from top of
the display area to the bottom.
• Possible values are:
• Absolute pixel units, I.e. “360,120”.
• A percentage of screen height, e.g. “75%,25%”.
• Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “360,*”.
• <Frameset cols=“200,20%,*,2*”>
116

Creating a Frames Page
• COLS: Determines the size and number of
rectangular columns within a <FRAMESET>. They
are set from left to right of the display area.
• Possible values are:
• Absolute pixel units, I.e. “480,160”.
• A percentage of screen width, e.g. “75%,25%”.
• Proportional values using the asterisk (*). This is
often combined with a value in pixels , e.g. “480,*”.
117

Creating a Frames Page
• FRAMEBORDER : Possible values 0, 1, YES, NO.
A setting of zero will create a borderless frame.
• FRAMESPACING: This attribute is specified in
pixels. If you go to borderless frames you will need to
set this value to zero as well, or you will have a gap
between your frames where the border used to be.
• BORDER (thickness of the Frame): This attribute
specified in pixels. A setting of zero will create a
borderless frame. Default value is 5.
• BORDERCOLOR: This attribute is allows you
choose a color for your border. This attribute is rarely
used. 118

<FRAME>
• <FRAME>: This element defines a single frame
within a frameset. There will be a FRAME element
for each division created by the FRAMESET
element. This tag has the following attributes:
• SRC: Required, as it provides the URL for the page
that will be displayed in the frame.
• NAME: Required for frames that will allow targeting
by other HTML documents. Works in conjunction
with the target attribute of the <A>, <AREA>,
<BASE>, and <FORM> tags.
119

<FRAME>
• MARGINWIDTH: Optional attribute stated in pixels.
Determines horizontal space between the <FRAME>
contents and the frame’s borders.
• MARGINHEIGHT: Optional attribute stated in
pixels. Determines vertical space between the
<FRAME> contents and the frame’s borders.
• SCROLLING: Displays a scroll bar(s) in the frame.
Possible values are:
• Yes – always display scroll bar(s).
• No – never display scroll bar(s).
• Auto – browser will decide based on frame contents.
• By default: scrolling is auto.
120

<FRAME>
• NORESIZE: Optional – prevents viewers from
resizing the frame. By default the user can stretch or
shrink the frame’s display by selecting the frame’s
border and moving it up, down, left, or right.
121

<NOFRAMES>
• <NOFRAMES>: Frame – capable browsers ignore all
HTML within this tag including the contents of the
BODY element. This element does not have any
attributes.
• <HTML>
• <HEAD>
• <TITLE> Framed Page </TITLE>
• </HEAD>
122

<NOFRAMES>
• <FRAMESET COLS="23%,77%">
• <FRAME SRC="" NAME="left_pane“>
• <FRAME SRC="" NAME="right_pane">
• <NOFRAMES>
• <P> This is a Framed Page. Upgrade your browser to
support frames.</P>
• </NOFRAMES></FRAMESET>
123

Forms
• Forms add the ability to web pages to not only provide the
person viewing the document with dynamic information but
also to obtain information from the person viewing it, and
process the information.
• Objectives:
• Upon completing this section, you should be able to
• Create a FORM.
• Add elements to a FORM.
• Define CGI (Common Gateway Interface).
• Describe the purpose of a CGI Application.
• Specify an action for the FORM.
• Forms work in all browsers.
• Forms are Platform Independent. 124

• To insert a form we use the <FORM></FORM> tags. The
rest of the form elements must be inserted in between the
form tags.
• <HTML> <HEAD><TITLE> Sample Form /TITLE>
• </HEAD>
• <BODY BGCOLOR=“FFFFFF”>
• <FORM ACTION = http://www.xnu.com/formtest.asp>
• <P> First Name: <INPUT TYPE=“TEXT” NAME=“fname”
MAXLENGTH=“50”> </P>
• <P> <INPUT TYPE=“SUBMIT” NAME=“submit1”
VALUE=“Send Info”> </P>
• </FORM> 125
Forms

<FORM> element attributes
• ACTION: is the URL of the CGI (Common Gateway
Interface) program that is going to accept the data
from the form, process it, and send a response back to
the browser.
• METHOD: GET (default) or POST specifies which
HTTP method will be used to send the form’s
contents to the web server. The CGI application
should be written to accept the data from either
method.
• NAME: is a form name used by VBScript or
JavaScripts.
• TARGET: is the target frame where the response
page will show up.
126

Form Elements
• Form elements have properties: Text boxes,
Password boxes, Checkboxes, Option(Radio)
buttons, Submit, Reset, File, Hidden and
Image.
• The properties are specified in the TYPE
Attribute of the HTML element
<INPUT></INPUT>.
127

128
Sami Ali
Al al-Bayt University

Form Elements
<INPUT> Element’s Properties
TYPE= Type of INPUT entry field.
NAME = Variable name passed to CGI application
VALUE= The data associated with the variable
name to be passed to the CGI application
CHECKED= Button/box checked
SIZE= Number of visible characters in text field
MAXLENGHT= Maximum number of characters
accepted.
129

Text Box
• Text boxes: Used to provide input fields for text, phone
numbers, dates, etc.
• <INPUT TYPE= " TEXT " >
• Browser will display
• Textboxes use the following attributes:
• TYPE: text.
• SIZE: determines the size of the textbox in characters.
Default=20 characters.
• MAXLENGHT : determines the maximum number of
characters that the field will accept.
• NAME: is the name of the variable to be sent to the CGI
application.
• VALUE: will display its contents as the default value.
130

Example on Text Box
• <TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
• <h1> <font color=blue>Please enter the following
bioData</font></h1>
• <FORM name="fome1" Method= " get " Action= "
URL " >
• First Name: <INPUT TYPE="TEXT"
NAME="FName"
• SIZE="15" MAXLENGTH="25"><BR>
• Last Name: <INPUT TYPE="TEXT"
NAME="Lname” 131

Example on Text Box
• Nationality: <INPUT TYPE="TEXT"
NAME="Country"
• The Phone Number: <INPUT TYPE="TEXT"
NAME="Phone"
• </FORM> </BODY> </HTML>
132

Password
• Password: Used to allow entry of passwords.
• <INPUT TYPE= " PASSWORD " >
• Text typed in a password box is starred out in the
browser display.
• Password boxes use the following attributes:
• TYPE: password.
• SIZE: determines the size of the textbox in characters.
134

Password
• MAXLENGHT: determines the maximum size of the
password in characters.
• NAME: is the name of the variable to be sent to the
CGI application.
• VALUE: is usually blank.
135

Example on Password Box
• <HTML><HEAD>
• <TITLE>Form_Password_Type</TITLE></HEAD>
• <BODY>
• <h1> <font color=red>To Access, Please
• enter:</font></h1>
• <FORM name="fome2" Action="url" method="get">
• User Name: <INPUT TYPE="TEXT" Name="FName"
• Password: <INPUT TYPE="PASSWORD"
• NAME="PWord" value="" SIZE="15”
• MAXLENGTH="25"><BR> 136

• Hidden: Used to send data to the CGI application that
you don’t want the web surfer to see, change or have
to enter but is necessary for the application to process
the form correctly.
• <INPUT TYPE=“HIDDEN”>
• Nothing is displayed in the browser.
• Hidden inputs have the following attributes:
• TYPE: hidden.
CGI application.
• VALUE: is usually set a value expected by the CGI
application.
138
Hidden

Check Box
• Check Box: Check boxes allow the users to select
more than one option.
• <INPUT TYPE=“CHECKBOX”>
• Checkboxes have the following attributes:
• TYPE: checkbox.
• CHECKED: is blank or CHECKED as the initial
status.
CGI application.
• VALUE: is usually set to a value. 139

Check Box
• <HTML>
<HEAD><TITLE>CheckBoxType</TITLE>
</HEAD>
<BODY>
<h1> <font color=green>Please check one of the
following </font></h1>
<FORM name="form3" Action="url" method="get“
>
<font color=red> Select Country: </font><BR>
India:<INPUT TYPE="CheckBox" Name="country"
CHECKED><BR> 140

Check Box
• Srilanka<INPUT TYPE="CheckBox"
Name="country"><BR>
Qatar:<INPUT TYPE="CheckBox"
Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Hindi:<INPUT TYPE="CheckBox" Name="lang"
CHECKED><BR>
English:<INPUT TYPE="CheckBox" Name="lang“ >
• Arabic:<INPUT TYPE="CheckBox" Name="lang> <BR>
• </FORM>
• </BODY>
• </Html>
141

Radio Button
• Radio Button: Radio buttons allow the users to select
• only one option.
• <INPUT TYPE=“RADIO”>
• Radio buttons have the following attributes:
• TYPE: radio.
• CHECKED: is blank or CHECKED as the initial
status. Only one radio button can be checked
CGI application.
• VALUE: usually has a set value. 143

144
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the
following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE= "RADIO" Name="country"
CHECKED><BR>
Yemen<INPUT TYPE="RADIO " Name="country"><BR>
Qatar:<INPUT TYPE="RADIO" Name="country"><BR>
<BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="RADIO" Name="language"
CHECKED><BR> English:<INPUT TYPE=" RADIO "
Name="language"><BR>
French:<INPUT TYPE=" RADIO " Name="language">
<BR></FORM> </BODY></HTML>

146
<HTML><HEAD>
<TITLE>RADIOBox</TITLE> </HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="one"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="two"> No.
</FORM>
<HR color=red size="10" >
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="three"
CHECKED> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="four"> No.
</FORM>
</BODY></HTML>

Push Button
 Push Button: This element would be used with
JavaScript to cause an action to take place.
<INPUT TYPE=“BUTTON”>
 Browser will display
 Push Button has the following attributes:
 TYPE: button.
 NAME: is the name of the button to be used in
scripting.
 VALUE: determines the text label on the button.
148

• <DIV align=center><BR><BR>
<FORM> <FONT Color=red>
<h1>Press Here to see a baby crying:<BR>
<INPUT TYPE="button" VALUE="PressMe">
<BR><BR>
<FONT Color=blue> Click Here to see a baby
shouting:<BR>
• <INPUT TYPE="button" VALUE="ClickMe" > <BR>
• <FONT Color=green> Hit Here to see a baby eating:
• <INPUT TYPE="button" VALUE="HitME" >
• <FONT Color=yellow> </FORM></DIV> 149
Push Button

Submit Button
• Submit: Every set of Form tags requires a Submit
button. This is the element causes the browser to send
the names and values of the other elements to the CGI
Application specified by the ACTION attribute of the
FORM element.
• <INPUT TYPE=“SUBMIT”>
• The browser will display
• Submit has the following attributes:
• TYPE: submit.
• NAME: value used by the CGI script for processing.
• VALUE: determines the text label on the button,
usually Submit Query.
151

152
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"><BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color=red>
Press Here to submit the data:<BR>
<INPUT TYPE="submit" VALUE="SubmitData " >
</FORM>

Reset Button
• Reset: It is a good idea to include one of these for
each form where users are entering data. It allows the
surfer to clear all the input in the form.
• <INPUT TYPE=“RESET”>
• Reset buttons have the following attributes:
• TYPE: reset.
• VALUE: determines the text label on the button,
usually Reset.
154

Reset Button
• <FORM Action="URL" method="get">
• First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"> <BR>
• Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR><BR>
• <FONT Color = red>
• <STRONG><font size=5>Press Here to submit the
data:</font></STRONG><BR>
• <INPUT TYPE="submit" VALUE="SubmitData">
• <INPUT TYPE="RESET" VALUE="Reset">
• </FORM>
155

Image Submit Button
• Image Submit Button: Allows you to substitute an
image for the standard submit button.
• <INPUT TYPE=“IMAGE” SRC=“jordan.gif”>
• Image submit button has the following attributes:
• TYPE: Image.
• NAME: is the name of the button to be used in
scripting.
• SRC: URL of the Image file.
157

Image Submit Button
• <form>
<H1><font color=blue>
Click to go Jordan’s Map:
<INPUT TYPE="IMAGE" SRC=“India.gif">
</form>
158

File
• File Upload: You can use a file upload to allow
surfers to upload files to your web server.
• <INPUT TYPE=“FILE”>
• File Upload has the following attributes:
• TYPE: file.
• SIZE: is the size of the text box in characters.
• CGI application.
• MAXLENGHT: is the maximum size of the input in
the textbox in characters. 160

• <BODY bgcolor=lightblue>
• <form>
• <H3><font color=forestgreen>
• Please attach your file here to for uploading to
• My <font color =red>SERVER...<BR>
• <INPUT TYPE="File" name="myFile" size="30">
• <INPUT TYPE="Submit" value="SubmitFile">
• </form>
• </BODY>
161
File

Other Elements used in Forms
• <TEXTAREA></TEXTAREA>: is an element that
allows for free form text entry.
• Textarea has the following attributes:
CGI application.
• ROWS: the number of rows to the textbox.
• COLS: the number of columns to the textbox.
162

• <form>
• <TEXTAREA COLS=40 ROWS=20
Name="comments" >
• “Great minds discuss ideas; average minds discuss
events; small minds discuss people.”
• Written by Eleanor Roosevelt
• </TEXTAREA>:
• </form>
• </BODY> 163

• The two following examples are
<SELECT></SELECT> elements, where the
attributes are set differently.
• The Select elements attributes are:
CGI application.
• SIZE: this sets the number of visible choices.
• MULTIPLE: the presence of this attribute signifies
that the user can make multiple selections. By default
only one selection is allowed.
165

• <form> Select the cities you have visited:
• <SELECT name=“list” size=5>
• <option> London</option>
• <option> Tokyo</option>
• <option> Paris</option>
• <option> New York</option>
• <option> LA</option>
• <option> KL</option>
• </SELECT>
• </form> </BODY>
166

167

• Drop Down List:
• Name: is the name of the variable to be sent to the
CGI application.
• Size: 1.
168

• <body>
• <select>
• <option value="volvo">Volvo</option>
• <option value="saab">Saab</option>
• <option value="opel">Opel</option>
• <option value="audi">Audi</option>
• </select>
•
• </body>
169

• List Box:
• Name: is the name of the variable to be sent to the
CGI application.
• SIZE: is greater than one.
170

• Option
• The list items are added to the <SELECT> element
by inserting <OPTION></OPTION> elements.
• The Option Element’s attributes are:
• SELECTED: When this attribute is present, the
option is selected when the document is initially
loaded. It is an error for more than one option to be
selected.
• VALUE: Specifies the value the variable named in
the select element.
• 171

• <BODY>
• <FORM>
• <SELECT NAME="ComputerType" size=4>
• <OPTION value="IBM" SELECTED>
IBM</OPTION>
• <OPTION value="INTEL"> INTEL</OPTION>
• <OPTION value=" Apple"> Apple</OPTION>
• <OPTION value="Compaq">
Compaq</OPTION>
• </SELECT>
• </FORM></BODY></HTML> 172

• <FORM>
• <SELECT NAME="ComputerType" size=5
multiple>
• <OPTION value="IBM" > IBM</OPTION>
• <OPTION value="INTEL"> INTEL</OPTION>
• <OPTION value=" Apple"> Apple</OPTION>
• <OPTION value="Compaq" SELECTED>
Compaq</OPTION>
• <OPTION value=" other"> Other</OPTION>
• </SELECT>
• </FORM>
173

Htmllllllllllllllllllllllllllllllllll.pdf

More Related Content

Similar to Htmllllllllllllllllllllllllllllllllll.pdf(20)

Recently uploaded(20)

Htmllllllllllllllllllllllllllllllllll.pdf