HTML – Hyper Text Markup
Language
Dr. Pallavi Jain
<BODY > tag attributes
BACKGROUND=[Link] - Specifies an image to be tiled as background.
BGCOLOR=color - Specifies the background color
BGPROPERTIES=FIXED -Fixes the background image so that it doesn't scroll.
LEFTMARGIN=n -Specifies the left margin for the entire page
TEXT=color -Specifies the color of text in the page
TOPMARGIN=n -Specifies the top margin for the entire page.
LINK -Specifies the link color.
ALINK -Specifies the active link color.
VLINK -Specifies the active link color.
Main Colours
10
RGB Colour Model
11
16 Basic Colors
12
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
15. ORANGE 15. #FF7F00 13
Headings, Paragraphs, Breaks & Horizontal Rules
14
Headings, <Hx> </Hx>
▪ Inside the BODY element, heading elements H1 through H6 are
generally used for major divisions of the document
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD> Heading 1
<BODY>
<H1> Heading 1 </H1> Heading 2
<H2> Heading 2 </H2> Heading 3
<H3> Heading 3 </H3> Heading 4
<H4> Heading 4 </H4>
Heading 5
<H5> Heading 5 </H5>
Heading 6
<H6> Heading 6 </H6>
</BODY>
</HTML>
15
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.
16
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE> Heading 1 Paragraphs allow you to add
text to a document in such a
</HEAD> Paragraph 1,….
way that it will
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P> Heading 2 automatically adjust the end
<H2> Heading 2 </H2>
of line to suite the window
Paragraph 2,….
<P> Paragraph 2, ….</P>
size of the browser in which
<H3> Heading 3 </H3> Heading 3 it is being displayed. Each
<P> Paragraph 3, ….</P> Paragraph 3,….
line of text will stretch the
<H4> Heading 4 </H4> entire length of the window
<P> Paragraph 4, ….</P>
Heading 4
<H5> Heading 5 </H5> Paragraph 4,….
<P> Paragraph 5, ….</P> Heading 5
<H6> Heading 6</H6>
Paragraph 5,….
<P> Paragraph 6, ….</P>
</BODY></HTML> Heading 6
Paragraph 6,….
17
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.
18
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE> Heading 1
</HEAD>
Paragraph 1,….
<BODY>
<H1> Heading 1 </H1>
Line 2
<P>Paragraph 1, <BR> Line 3
Line 2 <BR> Line 3 <BR>…. ….
</P>
</BODY>
</HTML>
19
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>.
20
Horizontal Rule, <HR>
Attribute Description Default Value
Determines the
thickness of the
SIZE horizontal rule. The 2 pixels
value is given as a pixel
value.
Width of the rule in
WIDTH pixels or percentage of 100%
screen width
Draw the rule with a flat Not set
NOSHADE
look instead of a 3D look (3D look)
Aligns the line (Left,
ALIGN Center
Center, Right)
Sets a color for the rule
COLOR Not set
(IE 3.0 or later)
21
Horizontal Rule, <HR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
Heading 1
<BODY> Paragraph 1,
<H1> Heading 1 </H1> Line 2
<P>Paragraph 1, <BR> _________________________
Line 2 <BR> __
<HR>Line 3 <BR> Line 3
</P>
</BODY>
</HTML>
22
Character Formatting
Objectives
Upon completing this section, you should be able to
1. Change the color and size of your text.
2. Use Common Character Formatting Elements.
3. Align your text.
4. Add special characters.
5. Use other character formatting elements.
23
Text Formatting Tags
Formatting The Web Page
<FONT> tag describes the display attributes
of the text inside
Bold, Italic and other Character Formatting Elements
<P> <FONT SIZE=“+1”> One Size Larger One Size Larger - Normal – One Size
</FONT> - Normal – Smaller
Bold - italics - Underlined - Colored
<FONT SIZE=“-1”> One Size Smaller Emphasized - Strong - Tele Type
</FONT> <BR>
<B> Bold</B> - <I> italics</I> - <U>
Underlined </U> -
<FONT COLOR=“#FF0000”> Colored
</FONT> <BR>
<EM> Emphasized</EM> - <STRONG>
Strong </STRONG> - <TT> Tele Type </TT>
<BR>
26
Special Characters & Symbols
Special Entity Special Entity
Character Name Character Name
Ampersand & & Greater-than > >
sign
Asterisk ∗ Less-than sign < <
∗∗
Cent sign ¢ ¢ Non-breaking
space
Copyright © © Quotation mark " "
Fraction one ¼ Registration ® ®
qtr ¼ mark
Fraction one ½ Trademark sign ™
27
half ½ ™
Additional Character Formatting Elements
▪ <STRIKE> strike-through text</STRIKE>
DEL is used for STRIKE at the latest browsers
▪ <BIG> places text in a big font</BIG>
▪ <SMALL> places text in a small font</SMALL>
▪ <SUB> places text in subscript position </SUB>
▪ <SUP> places text in superscript style position </SUP>
28
Example
<P><STRIKE> strike-through text </STRIKE></BR>
<BIG>places text in a big font </BIG><BR>
<SMALL> places text in a small font</SMALL><BR>
<SUB> places text in subscript position </SUB>
Normal
<SUP> places text in superscript style position </SUP><BR>
</P>
29
Lists
Objectives
• Create an unordered list.
• Create an ordered list.
• Create a defined list.
• Nest Lists.
30
Unordered Lists
Unordered Lists
• Unordered lists, are enclosed between the <UL >
and </UL > tag.
• Each item starts with the <LI> tag .
• The attribute that can be specified with <UL> tag is
TYPE= DISC will give a solid round black
TYPE= SQUARE will give a solid square black bullet
TYPE= CIRCLE will give a circle black bullet
Ordered Lists
An Ordered list starts with a <OL> tag and ends with a </OL> tag.
Each list item starts with the tag <LI>
The attribute that can be set with <OL> are:
TYPE - Controls the numbering scheme to be used
TYPE= “1” will give counting numbers (1, 2, 3….)
TYPE= “A” will give uppercase letters (A, B, C….)
TYPE= “a” will give lowercase letters (a, b, c….)
TYPE= “I” will give uppercase Roman numerals (I, II, III…..)
TYPE= “i” will give lowercase Roman numerals (i, ii, iii,……..)
START - Alters the numbering sequence. Can be set to any value
VALUE - Can be set with the <LI >tag to changes the numbering
sequence in the middle of an ordered list.
A definition list
A definition list is not a list of items.
This is a list of terms and explanation of the
terms.
A definition list is a list of terms paired with
associated definitions- in other words, a
glossary.
Definition list are enclosed with in <dl> and
</dl>
<dt> - Definition term.
<dd> - Data definition.
Write an HTML code to display the following output:
Assignment
1. Write a code for below output.
Assignment Cont.. Q:2 Write Code
Output
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Nested List</title>
</head>
<body>
<ul>
<li>Computer Science</li>
<ul>
<li>Web Application Engineering</li>
<ui>
<li>HTML</li>
<LI>php</LI>
<li>Java Script</li>
</ul>
<li>Operating System</li>
<ul>
<li>Kernel</li>
<li>process management</li>
<li>Embedded System</li>
</ul>
</ul>
</body>
</html>
Images
41
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. [Link] or /dir/[Link].
▪ Alternate Text (ALT): This is a text field that describes an image or
acts as a label. It is displayed when they position the cursor over a
graphic image.
▪ Alignment (ALIGN): This allows you to align the image on your page.
42
Images
▪ Width (WIDTH): is the width of the image in pixels.
▪ Height (HEIGHT): is the height of the image in pixels.
▪ Border (BORDER): is for a border around the image, specified in
pixels.
▪ HSPACE: is for Horizontal Space on both sides of the image specified in
pixels. A setting of 5 will put 5 pixels of invisible space on both sides of
the image.
▪ VSPACE: is for Vertical Space on top and bottom of the image specified
in pixels. A setting of 5 will put 5 pixels of invisible space above and
bellow the image.
43
Some Examples on images
1) <IMG SRC=“[Link]“ border=4>
2) <IMG SRC=" [Link]" width="60" height="60">
3) <IMG SRC=“[Link]" ALT="This is a text that goes with the
image">
4) <IMG SRC=" [Link] “ Hspace="30" Vspace="10" border=20>
5) < IMG SRC =" [Link]“ align="left">
44
Tables
Objectives:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.
45
Tables
▪ The <TABLE></TABLE> element has four sub-elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
▪ The table row elements usually contain table header elements or
table data elements.
46
Tables
Tables Attributes
▪ BGColor: Some browsers support background colors in a table.
▪ Width: you can specify the table width as an absolute number▪. of pixels or a
percentage of the document width. You can set the width for the table cells as
well.
▪ Border: You can choose a numerical value for the border width, which specifies
the border in pixels.
▪ CellSpacing: Cell Spacing represents the space between cells and is specified in
pixels.
▪ CellPadding: Cell Padding is the space between the cell border and the cell
contents and is specified in pixels.
▪ Align: tables can have left, right, or center alignment.
▪ Background: Background Image, will be titled in IE3.0 and above.
▪ BorderColor, BorderColorDark
48
Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th> Column 1 Header Column 2 Header
</tr>
<tr>
<td> Row1, Col1 </td>
Row1, Col1 Row1, Col2
<td> Row1, Col2 </td> Row2, Col1 Row2, Col2
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
50
Table Caption
▪ A table caption allows you to specify a line of text that will appear
centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>
▪ The Caption element has one attribute ALIGN that can be either TOP
(Above the table) or BOTTOM (below the table).
51
Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>
52
Creating Tables
Table Data and Table Header
Attributes
▪ Colspan: Specifies how many cell columns of the table this cell should span.
▪ Rowspan: Specifies how many cell rows of the table this cell should span.
▪ Align: cell data can have left, right, or center alignment.
▪ Valign: cell data can have top, middle, or bottom alignment.
▪ Width: you can specify the width as an absolute number of pixels or a
percentage of the document width.
▪ Height: You can specify the height as an absolute number of pixels or a
percentage of the document height.
54
Table Data and Table Header Attributes
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th> <th> Column 2
Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr> Column 1 Header Column 2 Header
</table> Row 1 Col 1
Row 2 Col 2
Row 2 Col 1
Row 3 Col 2
55
Special Things to Note
• TH, TD and TR should always have end tags.
• A default TABLE has no borders
By default, tables are drawn without border lines. You need the BORDER attribute to
draw the lines.
• By default, a table is flush with the left margin
TABLEs are plopped over on the left margin. If you want centered tables, You can
either: place the table inside a DIV element with attribute ALIGN="center".
Most current browsers also supports table alignment, using the ALIGN attribute.
Allowed values are "left", "right", or "center", for example: <TABLE ALIGN="left">. The
values "left" and "right" float the table to the left or right of the page, with text flow
allowed around the table. This is entirely equivalent to IMG alignment
57
What will be the output?
<TABLE BORDER width=“750”>
<TR> <TD colspan=“4” align=“center”>Page Banner</TD></TR>
<TR> <TD rowspan=“2” width=“25%”>Nav Links</TD><TD colspan=“2”>Feature Article</TD>
<TD rowspan=“2” width=“25%”>Linked Ads</TD></TR>
<TR><TD width=“25%”>News Column 1 </TD> <TD width=“25%”><News Column 2
</TD></TR>
</TABLE>
58
Example – Nested Tables in HTML
Frames
▪ 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.
61
Frames
■ Frameset – group of frames in a browser window where
frame is a partition
■ Frameset declaration specifies:
1. How to partition the browser window
2. What to load into each partition initially
■ Use <frameset> tag to replace <body> tag
■ To view source for frameset declaration, go to View in
browser window, select View Source
■ To view source for individual frames, right mouse click
while mousing over frame content, select View Source
Frames – frameset tag
■ rows attribute – used to divide window into rows
■ cols attribute – used to divide window into columns
■ Each can take different types of values (Think PPP):
❑ percent (30%, 70%)
❑ pixel amount (100, 400)
❑ proportion (*, 2*) (also used to represent remainder)
■ Values can be combined:
❑ <frameset rows = “15%, 20%,*">
3 values mean 3 rows, the first row is 15% the height of the
window, the second one is 20% the height of the window, the
third is the remainder
❑ <frameset cols = “*, 50%, 80”>
3 values mean 3 columns, the first column is ½ the width of the
window minus 80 pixels, the second is ½ the width of the
window, the third is 80 pixels (a fixed pixel value is useful for
displaying an image)
Frames – frame tag
■ Tells the browser what to load into each partition
■ src attribute specifies url of file to load
■ Frames are loaded in a top-to-bottom, left-to-right
manner
■ id or name attribute identifies a particular frame by
naming it (no spaces allowed in name)
<frame src = "[Link]" />
<frame src = "[Link]" name = "main" />
■ Notice there is no </frame> tag – use /> instead
Frames – frameset declaration
<frameset rows = "20%,80%">
<frame src = "[Link]" />
<frame src = "[Link]" name = "main" />
<noframes>This is best viewed with Netscape version 2.0 or higher.
<a href = “[Link]”>View</a> version of the material without frames.
</noframes>
</frameset>
Frames – combining cols and rows
■ Can use column (cols) and rows
(rows) together in frameset:
<frameset cols = “*, *, *” rows =
“33%, 33%, *”>
<frame src = “[Link]” /> [Link] [Link] [Link]
<frame src = “[Link]” />
<frame src = “[Link]” />
<frame src = “[Link]” /> [Link] [Link] [Link]
...
<frame src = “[Link]” />
</frameset>
[Link] [Link] [Link]
The partitioning will look like a
tic-tac-toe board with the files
loaded top-to-bottom,
left-to-right:
Frames – nesting cols and rows
Nested framesets produce
output like:
Header info here
...
</head>
Table of
<frameset rows = “30%, 70%”> contents
<frame src = “[Link]”>
<frameset cols = “*, 2*”>
<frame src = “[Link]”>
Display area
<frame src = “[Link]”
id = “display-area”>
</frameset>
</frameset>
</html>
Frames – noframes tag
■ Used in case a browser does not support frames (e.g.,
lynx)
■ Content between <noframes> and </noframes> is
displayed if browser does not support frames; content is
ignored if browser does support frames.
<noframes>This is best viewed with Netscape version 2.0 or higher.
<a href = “[Link]”>View</a> version of the material without
frames.
</noframes>
Frames – targeted hyperlinks (con’t)
■ Special (or magic) targets are reserved names for targeting windows
■ Can be used with or without frames:
❑ _blank - causes document specified in href attribute to be loaded
into a new, unnamed browser window (forward and back buttons
do not work)
❑ _top – causes document specified in href attribute to be loaded
into the entire browser window containing the link (forward and
back buttons do work)
❑ _self – causes document specified in href attribute to be loaded
into same window OR frame (default)
❑ _parent – causes document specified in href attribute to be
loaded into the parent frameset (useful for nested frames)
■ Examples:
<a href = “[Link]” target = “_top”>My Project</a>
<a href = “[Link]” target = “window_1”>Assignment 1</a>
Frames – inline frames
■ Uses the <iframe> tag to generate a “floating
frame.”
■ <iframe> tag is not used within frameset tag.
■ Use anywhere within your document that an
<img /> tag might appear.
■ The inline area is 150 pixels high and 300 pixels
wide (but those values can be changed).
■ The inline area is useful for displaying another
document that contains information related to the
current document being viewed:
Frame Example
<HTML>
<FRAMESET COLS="*, 2*">
<FRAME SRC=“[Link]"> example
<FRAME SRC=“[Link]">
</FRAMESET>
<HTML>
Nesting Frames
example
Targeting Frames
• Ensure frame naming
• <FRAMESET COLS="*, 20%">
<FRAME NAME="Frame1” SRC="Cell_1.htm">
<FRAME NAME="Frame2” SRC="Cell_2.htm">
</FRAMESET>
• Set the TARGET attribute for one hyperlink
– <A HREF="[Link]" TARGET="Frame1">Link Text</A>
– <A HREF="[Link]" TARGET="_top">Link Text</A>
• Set the TARGET attribute for all hyperlinks
– <BASE TARGET="Frame2">
– <BASE TARGET="_top">
Attributes Of Frames Tag
What will be the Output?
<FRAMESET ROWS="*, 2*, *" COLS="2*, *">
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
</FRAMESET>
75
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:
1. Create a FORM.
2. Add elements to a FORM.
76
<FORM> element attributes
▪ ACTION: is the URL of the 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.
▪ NAME: is a form name used by VBScript or JavaScripts.
▪ TARGET: is the target frame where the response page will show up.
77
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>.
78
Sami Ali
Al al-Bayt University
79
Form Elements
<INPUT> Element’s Properties
TYPE= Type of INPUT entry field.
NAME = Variable name passed to application
VALUE= The data associated with the variable
name to be passed to the application
CHECKED= Button/box checked
SIZE= Number of visible characters in text field
MAXLENGHT= Maximum number of characters
accepted.
80
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.
81
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"
SIZE="15" MAXLENGTH="25"><BR>
Nationality: <INPUT TYPE="TEXT" NAME="Country"
SIZE="25" MAXLENGTH="25"><BR>
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
SIZE="15" MAXLENGTH="12"><BR>
</FORM> </BODY> </HTML>
82
Password
▪ Password: Used to allow entry of passwords.
<INPUT TYPE= " PASSWORD " >
Browser will display
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.
▪ 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. 83
Example on Password Box
User Name: <INPUT TYPE="TEXT" Name="FName"
SIZE="15" MAXLENGTH="25"><BR>
Password: <INPUT TYPE="PASSWORD"
NAME="PWord" value="" SIZE="15”
MAXLENGTH="25"><BR>
84
Hidden
▪ 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.
▪ NAME: is the name of the variable to be sent to the CGI
application.
▪ VALUE: is usually set a value expected by the CGI application.
85
Check Box
▪ Check Box: Check boxes allow the users to select more than one option.
<INPUT TYPE=“CHECKBOX”>
Browser will display
Checkboxes have the following attributes:
▪ TYPE: checkbox.
▪ CHECKED: is blank or CHECKED as the initial
status.
▪ NAME: is the name of the variable to be sent to the
CGI application.
▪ VALUE: is usually set to a value.
86
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE="CheckBox" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="CheckBox" Name="country"><BR>
Qatar:<INPUT TYPE="CheckBox" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="CheckBox" Name="language" CHECKED><BR>
English:<INPUT TYPE="CheckBox" Name="language"><BR>
French:<INPUT TYPE="CheckBox" Name="language"> <BR></FORM>
87
Radio Button
▪ Radio Button: Radio buttons allow the users to select
only one option.
<INPUT TYPE=“RADIO”>
Browser will display
Radio buttons have the following attributes:
▪ TYPE: radio.
▪ CHECKED: is blank or CHECKED as the initial
status. Only one radio button can be
checked
▪ NAME: is the name of the variable to be sent to the
CGI application.
▪ VALUE: usually has a set value.
88
<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>
89
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.
90
<FONT Color=blue>
Click Here to see a baby shouting:<BR>
<INPUT TYPE="button" VALUE="ClickMe" > <BR><BR>
91
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.
92
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 " >
93
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”>
• Browser will display
•
• Reset buttons have the following attributes:
• TYPE: reset.
• VALUE: determines the text label on the button,
usually Reset.
94
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">
95
Image Submit Button
▪ Image Submit Button: Allows you to substitute an
image for the standard submit button.
<INPUT TYPE=“IMAGE” SRC=“[Link]”>
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.
96
<form>
<H1><font color=blue>
Click to go Jordan’s Map:
<INPUT TYPE="IMAGE" SRC="[Link]">
</form>
97
File
• File Upload: You can use a file upload to allow surfers to upload
files to your web server.
• <INPUT TYPE=“FILE”>
• Browser will display
• File Upload has the following attributes:
• TYPE: file.
• SIZE: is the size of the text box in characters.
• NAME: is the name of the variable to be sent to the
CGI application.
• MAXLENGHT: is the maximum size of the input in the
textbox in characters.
98
<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">
99
Other Elements used in Forms
▪ <TEXTAREA></TEXTAREA>: is an element that
allows for free form text entry.
Browser will display
Textarea has the following attributes:
▪ NAME: is the name of the variable to be sent to the
CGI application.
▪ ROWS: the number of rows to the textbox.
▪ COLS: the number of columns to the textbox.
100
<form>
<TEXTAREA COLS=40 ROWS=20 Name="comments" >
From observing the apathy of those
about me during flag raising I
concluded that patriotism if not
actually on the decline is at least
in a state of dormancy.
Written by Khaled Al-Fagih
</TEXTAREA>:
101
Other Elements used in Forms
▪ The two following examples are
<SELECT></SELECT> elements, where the
attributes are set differently.
The Select elements attributes are:
▪ NAME: is the name of the variable to be sent to
the 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.
102
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>
103
Other Elements used in Forms
▪ Drop Down List:
▪ Name: is the name of the variable to be sent to
the CGI application.
▪ Size: 1.
104
Other Elements used in Forms
▪ List Box:
▪ Name: is the name of the variable to be sent to
the CGI application.
▪ SIZE: is greater than one.
105
Other Elements used in Forms
▪ 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.
106
<h2><font color=blue>What type of Computer do you have?</font><h2>
<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>
107
<h2><font color=blue>What type of Computer do you have?</font><h2>
<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>
108
109
Forms
Practice Exercise
111
A complete example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>
112
Form Example