Introduction To HTML

Introduction to HTML
By: Mrs. Sarvat Mumtaz

Lecturer in Computer Science
Govt. Girls Degree College Sukkur
What is HTML?
Hyper Text Markup Language (HTML) is
a computer language used to create
documents (WebPages) for display on the
World Wide Web.
Two basic tools are needed to create
HTML documents: an HTML Editor to
create and save documents and a web
browser to view them.
HTML Editors.
There are two main types of HTML
Editors:
WYSIWYG (What You See Is What You
Get) Editors
Text Editors.
WYSIWYG (What You See Is What
You Get) Editors
 WYSIWYG stands for What You See Is What You Get.
This type of Editors let you create WebPages without
knowing how to write HTML.
 They have graphical interfaces and tools to develop
WebPages, and allow you to insert images, tables, lists,
and hyperlinks.
 Microsoft FrontPage and Dreamweaver are two of the
popular WYSIWYG HTML editors.
 The two main advantages of WYSIWYG editors are:
1. Websites can be created quickly.

2. Knowledge of HTML tags or commands is not
required.
TEXT Editors:
 You can also create HTML documents with Notepad,
WordPad, or any other text editor. But in this case you
need to be familiar with HTML coding. This is how you
create an HTML document using Notepad:
1. Open Notepad by Clicking on
Start All Programs Accessories Notepad
2. Select File New
3. Type HTML Document.
4. Select File Save as
5. In Save as dialogue box Enter File name with extension
.htm or .html.
Viewing HTML Document in a Web
Browser.
 You can use any web browser, say internet explorer or
Firefox, to view an HTML document. The steps to
view an HTML document in Internet Explorer are as
follows:
1.Open Internet Explorer.
2.Select File Open
3.The Open dialogue box is displayed. Click on browse.
4.A file selection dialogue box will appear select the
HTML file you just create.
5.Click on Open
6.The Open dialogue box will appear. Click on ok and
you will see the file in Internet Explorer.
HTML CODING
In this section we will discuss about the
main components that makeup the HTML
code:
Elements,
Tags,
Attributes.
HTML Elements and Tags
A webpage is made up of HTML Elements,
and HTML elements are identified by HTML
Tags.
An HTML tag always begins with a less than
sign < and ends with a greater than sign>.
e.g. The tag for underlining text is <u>
HTML elements are of two types
1. Container Elements.
2. Empty Elements.
Container Elements
HTML elemets that include both ON and
OFF tags are called container elements.
We put <u> before the text that we want to
underline. This is the opening tag or ON tag.
We put</u> after the underline text. That is
the closing tag or OFF tag. The OFF tag is
same as the ON tag except it has a forward
slash / after <.
e.g. <u> this text is underlined </u>
<b> this text is bold</b>
Empty Elements
HTML elements that only have an ON tag
and do not require an OFF tag are called
empty elements.
e.g. the <hr> tag, which is used to draw a
horizontal line, does not require a closing
tag. Another example is the line break tag
<br>.
HTML Attributes
Attributes give us extra information about
elements. They are always specified
inside the start tag.
e.g. the BGCOLOR attribute of the body
tag specifies the background colour of the
web page. <body bgcolor =“red”>
HTML Rules
 Here are some rules for writing the HTML code.
1.Tag names and attribute names are not case sensitive. e.g. <BODY> is same as
<body>. <BODY BGCOLOR =“RED”> is same as <body bgcolor=“red”>
however, it is better to use lower case. In future versions of HTML it will be
mandatory.
2. Attribute values can be case sensitive.
3. Spaces between tags do not matter. e.g. <u> Underlined text </u> is same
as <u>underlined text </u> and
<u>
Underlined text
</u>
4. Tag names cannot contain spaces. e.g. <b o d y > is not same as <body>. Also
there should be no space between < and > in tag. So do not write < u > or < /
u >.
5. Elements can be nested. e.g. if we want to underline text and also make it bold,
we can write <b><u> Correct order of tags </u></b>
However this one is incorrect <b><u> this is incorrect order of tags</b></u>
Structure of an HTML document
 An HTML document contain two distinct parts: Head and Body.
 The Head section contains information about document.
 The Body section contains everything that is displayed on the
webpage. It includes text, graphics, etc.
 Here is the basic structure of an HTML document:
<html>
<head>
<title> ---------------- </title>
</head>
<body>
------------
------------
</body>
</html>
Structure of an HTML document
HTML: <html> the html element defines the document as an
HTML file. It is a container element starts with <html> and ends
with </html>. A browser will interpret every thing that comes in
between as an HTML document. An HTML element contains
only the <head> and <body> elements. They in turn can contain
other elements.
HEAD: <head> the head element is a container element that
includes identification and supplementary information about the
document. Most of this is not displayed.
TITLE: <title> the title element has the title of your webpage. This
is the title that displayed in the titlebar when you view the page
in a browser. It is a conatiner element.
BODY: <body> the body element has the main content of your
webpage.
The Body Element
The BODY element of a web page is an
important element in regards to the page’s
appearance. Here are the attributes of the
BODY tag to control all the levels:
TEXT="#RRGGBB" to change the color
of all the text on the page (full page text
color.)
 This element contains information about the
page’s background color, the background
image, as well as the text and link colors.
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>
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=“white”
TEXT=“red”></BODY>
In this example the document’s page
color is white and the text would be red.
Using Image Background
 The BODY element also gives you ability
of setting an image as the document’s
background.
 An example of a background image’s
HTML code is as follows:
<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY>
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:
1. H1: should be used as the highest level of
heading, H2 as the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3
should not appear after an H1, unless there is
an H2 between them.
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example
Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1> Heading 1
<H2> Heading 2 </H2>
Heading 6
</BODY>
</HTML>
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.
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE> Heading 1
</HEAD> Paragraph 1,….
<BODY></H1> Heading 1 </H1>
Heading 2
<P> Paragraph 1, ….</P>
Paragraph 2,….
<P> Paragraph 2, ….</P> Heading 3
Paragraph 3,….
<P> Paragraph 3, ….</P>
<P> Paragraph 4, ….</P> Paragraph 4,….
<H6> Heading 6</H6> Paragraph 5,….
</BODY></HTML>
Paragraph 6,….
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.
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example
Page</TITLE>
</HEAD>
<BODY>
<P>Paragraph 1, <BR> Paragraph 1,….
Line 2 <BR> Line 3 <BR>….
Line 2
</P>
</BODY> Line 3
</HTML> ….
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>.
Attribute Description Default Value
Height of the rule in
SIZE 2 pixels
pixels
Width of the rule in
WIDTH pixels or percentage 100%
of screen width
Draw the rule with a Not set
NOSHADE flat look instead of a
3D look (3D look)
Aligns the line (Left,
ALIGN Center
Center, Right)
Sets a color for the
COLOR Not set
rule (IE 3.0 or later)
<HTML>
<HEAD>
<TITLE> Example
Heading 1
Page</TITLE> Paragraph 1,….
</HEAD> Line 2
<BODY>
__________________
<P>Paragraph 1, <BR> _________
Line 2 <BR> Line 3
<HR>Line 3 <BR>
</P>
</BODY>
</HTML>
Bold, Italic and other Character Formatting
Elements
 <FONT SIZE=“+2”> Two sizes bigger</FONT>
 The size attribute can be set as an absolute value from 1 to 7
or as a relative value using the “+” or “-” sign. Normal text
size is 3 (from -2 to +4).
 <B> Bold </B>
 <I> Italic </I>
 <U> Underline </U>
 Color = “#RRGGBB” The COLOR attribute of the FONT
element. E.g., <FONT COLOR=“#RRGGBB”>this text
has color</FONT>
 <PRE> Preformatted </PRE> Text enclosed by PRE tags
is displayed in a mono-spaced font. Spaces and line breaks
are supported without additional elements or special 28
Elements
 <EM> Emphasis </EM> Browsers usually
display this as italics.
 <STRONG> STRONG </STRONG> Browsers
display this as bold.
 <TT> TELETYPE </TT> Text is displayed in a
mono-spaced font. A typewriter text, e.g. fixed-
width font.
 <CITE> Citation </CITE> represents a
document citation (italics). For titles of books,
films, etc. Typically displayed in italics. (A
Beginner's Guide to HTML)
29
Elements
<P> <FONT SIZE=“+1”> One One Size Larger - Normal – One
Size Larger </FONT> - Normal Size Smaller
– Bold - italics - Underlined -
<FONT SIZE=“-1”> One Size Colored
Smaller </FONT> <BR> Emphasized - Strong - Tele
Type
<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>
30
Lists
In this chapter you will learn how to create a variety of lists.

Objectives
Upon completing this section, you should be able to
1. Create an unordered list.
2. Create an ordered list.
3. Create a defined list.
4. Nest Lists.
31
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>
</UL>
 List item …
 List item …
32
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”>
</UL>
 List item …
 List item …
 List item …
33
List Elements
 OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
</OL>
1. List item …
2. List item …
3. List item
 You have the choice of setting the TYPE Attribute to one of
five numbering styles.
34
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, ……
35
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>
36
List Elements
i. List item …
ii. List item …
Text ….
iii. List item …
37
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>
HTML
Hyper Text Markup Language
DOG
A human’s best friend!
38
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”>
</OL>
</LI>
39
Images
In this chapter you will learn about images
and how to place images in your pages.
Objectives
Upon completing this section, you should be
able to
1. Add images to your pages.
40
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.
 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.
41
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.
42
HOW TO MAKE A LINK
1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends. Everything between
these two will work as a link.
2) The example below shows how to make the word

Here work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to

go to yahoo.
43
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.
44
Internal Links
 Internal Links : Links can also be created inside large documents to
simplify navigation. Today’s world wants to be able to get the
information quickly. Internal links can help you meet these goals.
1. 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>
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.
2. 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>
45
Tables
In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.
46
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.
47
Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
</tr>
<tr>
</tr>
</table>
48
Tables
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2
49
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.
50
Table Attributes
 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.
51
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).
52
Table Header
 Table Data cells are represented by the TD

element. Cells can also be TH (Table Header)
elements which results in the contents of the
table header cells appearing centered and in
bold text.
53
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
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>
55
<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>
</table>
56
Column 1 Header Column 2 Header
Row 1 Col 1
Row 2 Col 2
Row 2 Col 1
Row 3 Col 2
57
Special Things to Note
 TH, TD and TR should always have end tags.

Although the end tags are formally optional, many browsers will mess
up the formatting of the table if you omit the end tags. In particular,
you should always use end tags if you have a TABLE within a TABLE
-- in this situation, the table parser gets hopelessly confused if you
don't close your TH, TD and TR elements.
 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
58
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.
59
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.
60
Frames
Doc1.html Doc2.html
Doc1.html Doc2.html
Frames.html
61
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.
62
Frame Page Architecture
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMeSET COLS=“23%,77%”>
<FRAME SRC=“Doc1.html”>
<FRAME SRC=“Doc2.html”>
</FRAMeSET >
</HEAD>
</HTML>
63
The Diagram below is a graphical view of
the document described above
FRAMESET COLS=”23%, 77%”

FRAME FRAME
NAME= NAME=right_pane
left_pane SRC= Doc2.html
SRC=Doc1.h
tml
64
<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*”>
65
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.

 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,*”.
66
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.
67
<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.
68
<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.
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.
69
<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.
70
<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>
71
<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>
72
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
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI (Common Gateway Interface).

4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
 Forms work in all browsers.
 Forms are Platform Independent.
73
Forms
 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=“fsubmit1” VALUE=“Send Info”>
</P>
</FORM>
</BODY> </HTML>
74
<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.
75
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>.
76
Sami Ali
Al al-Bayt University
77
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.
78
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.
79
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"
Nationality: <INPUT TYPE="TEXT" NAME="Country"
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
</FORM> </BODY> </HTML>
80
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.
 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.
81
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>
</FORM></BODY> </HTML>
82
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.
83
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.
84
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the
following</font></h1>
<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> </BODY></HTML>
85
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.
86
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the
following</font></h1>
<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>
87
<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>
88
Push Button
 Push Button: This element would be used with
JavaScript to cause an action to take place.
<INPUT TYPE=“BUTTON”>
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.
89
<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><BR>
<FONT Color=green>
Hit Here to see a baby eating:<BR>
<INPUT TYPE="button" VALUE="HitME" > <BR><BR>
<FONT Color=yellow>
</FORM></DIV>
90
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.
91
<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>
92
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.
93
<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>
94
File
 FileUpload: You can use a file upload to allow surfers to
upload files to your web server.
 <INPUT TYPE=“FILE”>
 Browser will display
 FileUpload 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.
95
<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>
96
Other Elements used in Forms
 <TEXTAREA></TEXTAREA>: is an element
that allows for free form text entry.
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.
97
<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>:
</form>
</BODY>
98
 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
 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.
99
<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>
100
 Drop Down List:
 Name: is the name of the variable to be sent to the

CGI application.
 Size: 1.
101
 List Box:
 Name: is the name of the variable to be sent to

 SIZE: is greater than one.
102
 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.
103
</HEAD>
<BODY>
<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>
</FORM></BODY></HTML>
104
<HEAD> <TITLE>SELECT with Mutiple </TITLE>
</HEAD>
<BODY>
<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>
</FORM></BODY></HTML>
105
106

Introduction To HTML

Uploaded by

Copyright:

Available Formats

Introduction To HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To HTML

Uploaded by

Copyright:

Available Formats

Introduction to HTML

By: Mrs. Sarvat Mumtaz

1. Websites can be created quickly.

In this chapter you will learn how to create a variety of lists.

iii. List item …

2) The example below shows how to make the word

Click <A HREF="http://www.yahoo.com">here</A> to

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2

Row2, Col1 Row2, Col2

 The Caption element has one attribute ALIGN that

 Table Data cells are represented by the TD

 Colspan: Specifies how many cell columns of the table this

<Table border=1 cellpadding =2>

Column 1 Header Column 2 Header

 TH, TD and TR should always have end tags.

 For Example to make a framed page with a

FRAMESET COLS=”23%, 77%”

Possible values are:

3. Define CGI (Common Gateway Interface).

Checkboxes have the following attributes:

Radio buttons have the following attributes:

Push Button has the following attributes:

Browser will display

 FileUpload has the following attributes:

<INPUT TYPE="File" name="myFile" size="30">

<INPUT TYPE="Submit" value="SubmitFile">

Browser will display

Textarea has the following attributes:

 Drop Down List:

 Name: is the name of the variable to be sent to the

 Name: is the name of the variable to be sent to

You might also like