Scribd
Upload
18 views138 pages

2023 2024 G9 HTML

Uploaded by

Samantha Ebalde
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views138 pages

2023 2024 G9 HTML

Uploaded by

Samantha Ebalde
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 138

Introduction to

HTML

2
Definitions

▪ W W W – 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.

3
“Normal text” surrounded
by bracketed tags that tell Pages end with “.htm” or
browsers how to display “.html”
web pages

HTML Editor – A word


processor that has been
specialized to make the
writing of HTML documents
more effortless.

4
Tags

▪ Codes enclosed in brackets


▪ Usually paired
<TITLE>My Web Page</TITLE>
▪ Not case sensitive
<TITLE> = <title> = <TITLE>

5
Choosing Text
Editor
▪ There are many different programs that you can use
to create web documents.
▪ HTML Editors enable users to create documents
quickly and easily by pushing a few buttons. Instead
of entering all of the HTML codes by hand.
▪ These programs will generate the HTML Source
Code for you.

6
Choosing Text
Editor
▪ HTML Editors are excellent tools for
experienced web developers;
however; it is important that you
learn and understand the HTML
language so that you can edit code
and fix “bugs” in your pages.
▪ For this Course, we will focus on
using the standard Microsoft
Windows text editors, NotePad. We
may use also textpad.

7
Starting NotePad
NotePad is the standard text editor
that comes with the microsoft
windows operating system. To start
NotePad in windows 9x or XP
follow the steps bellow:
▪ Click on the “Start” button located
on your Windows task bar.
▪ Click on “Programs” and then click
on the directory menu labeled
“Accessories”.
▪ Locate the shortcut “NotePad” and
click the shortcut once.

8
HTML Page Creation
& Editing
In this chapter you will learn to create
HTML
pages with a standard text editor.
Objectives
Upon completing this section, you
should be able to
1. Choose a Text Editor.
2. Create a Basic Starting Document.
3. Understand and set Document
Properties.
4. View Your Results in a Browser.

9
Creating a Basic
Starting Document
<HTML>
<HEAD>
<TITLE>Al al-Bayt
University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

10
▪ The HEAD of your document point
to above window part. The TITLE of
your document appears in the very
top line of the user’s browser. If the
user chooses to “Bookmark” your
page or save as a “Favorite”; it is
the TITLE that is added to the list.
▪ The text in your TITLE should be as
descriptive as possible because this
is what many search engines, on
the internet, use for indexing your
site.
Creating a Basic
Starting Document
11
Setting Document
Properties
▪ Document properties are controlled
by attributes of the BODY element.
For example, there are color
settings for the background color of
the page, the document’s text and
different states of links.

12
Color Codes
• Colors are set using “RGB” color
codes, which are, represented as
hexadecimal values. Each 2-digit
section of the code represents the
amount, in sequence, of red,
green or blue that forms the color.
For example, a RGB value with
00 as the first two digits has no
red in the color.

13
Main Colours

14
RGB
Colour
Model
16 Basic Colors

16
1. WHITE 1. #FFFFFF
Color 2. BLACK 2. #000000
3. RED 3. #FF0000
Codes 4.
5.
GREEN
BLUE
4.
5.
#00FF00
#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

17
Color Codes

▪ If you require more information


about color values, there is an
excellent site entitled “VGDesign’s
Interactive Color Cube” that displays
the background color code when
you put your cursor over a small
color sample. The Web address is :
http://www.vgdesign.com/color.html

18
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.
19
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>
20
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.

21
LINK, VLINK, and
ALINK
These attributes control the colors of the
different link states:
1. LINK – initial appearance – default =
Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–
default= Yellow.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”
LINK=“#0000FF”
VLINK=“#FF00FF”
ALINK=“FFFF00”> </BODY>

22
▪ 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>

Using Image
Background
23
Previewing Your
Work
▪ Once you have created your basic
starting document and set your
document properties it is a good
idea to save your file.
▪ To save a file, in NotePad, follow
these steps:
1. Locate and click on the menu called
“File”.
2. Select the option under File Menu
labeled “Save As”.
3. In the “File Name” text box, type in
the entire name of your file
(including the extension name
.html).

24
Edit, Save and View
Cycle
▪ To preview Your Work, open a web browser and
do the following:
1. Click on the menu labeled “File”.
2. Locate the menu option, “Open”.

25
Edit, Save and
View Cycle
3. In the “Open” dialog box,
click on the “Browse”
button and locate your web
document.
4. Click “OK” once you have
selected your file.

▪ The web browser will load


the same document but
with the new revisions. This
process is the Edit, Save
and View Cycle.

26
Headings,
Paragraphs, Breaks
& Horizontal Rules

In this chapter you will add headings to your


page, insert paragraphs, add some
breaks, and add horizontal rules.
Objectives
Upon completing this section, you should be
able to
1. List and describe the different Heading
elements.
2. Use Paragraphs to add text to a
document.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.

27
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.

28
<HTML>
Headings, <HEAD>
<TITLE> Example Page</TITLE>
<Hx> </Hx> </HEAD>
<BODY>
Heading 1
Heading 2
<H1> Heading 1 </H1> Heading 3
<H2> Heading 2 </H2>
<H3> Heading 3 </H3> Heading 4
<H4> Heading 4 </H4> Heading 5
<H5> Heading 5 </H5> Heading 6
<H6> Heading 6 </H6>
</BODY>
</HTML>

29
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.

30
<HTML>
Heading 1
Paragraphs, <HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
Paragraph 1,….
<P> </P> <BODY>
<H1> Heading 1 </H1>
Heading 2
<P> Paragraph 1, ….</P> Paragraph 2,….
<H2> Heading 2 </H2>
<P> Paragraph 2, ….</P> Heading 3
<H3> Heading 3 </H3>
<P> Paragraph 3, ….</P> Paragraph 3,….
<H4> Heading 4 </H4>
<P> Paragraph 4, ….</P>
Heading 4
<H5> Heading 5 </H5> Paragraph 4,….
<P> Paragraph 5, ….</P>
<H6> Heading 6</H6> Heading 5
<P> Paragraph 6, ….</P>
</BODY> Paragraph 5,….
</HTML>
Heading 6
Paragraph 6,….

31
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.

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

33
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>.

34
Horizontal Rule, <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)
35
<HTML>
Horizontal <HEAD> Heading 1
<TITLE> Example
Rule, <HR> Page</TITLE>
Paragraph 1,….
Line 2
</HEAD>
<BODY> _____________________
______
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR> Line 3
Line 2 <BR>
<HR>Line 3 <BR>
</P>
</BODY>
</HTML>

36
Character Formatting

In this chapter you will learn how to enhance your


page with Bold, Italics, and other character
formatting options.
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.

37
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 characters.

38
Bold, Italic and other
Character Formatting
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)

39
<P> <FONT SIZE=“+1”> One One Size Larger - Normal
Bold, Italic Size Larger </FONT> - – One Size Smaller
Normal – Bold - italics -
and other <FONT SIZE=“-1”> One Size Underlined - Colored
Smaller </FONT> <BR> Emphasized - Strong -
Character <B> Bold</B> - <I> italics</I> Tele Type
- <U> Underlined </U> -
Formatting <FONT COLOR=“#FF0000”>
Colored </FONT> <BR>
Elements <EM> Emphasized</EM> -
<STRONG> Strong
</STRONG> - <TT> Tele
Type </TT> <BR>

40
Alignment

▪ Some elements have attributes for


alignment (ALIGN) e.g. Headings,
Paragraphs and Horizontal Rules.
▪ The Three alignment values are :
LEFT, RIGHT, CENTER.
▪ <CENTER></CENTER> Will center
elements.

41
Alignment

▪ <DIV ALIGN=“value”></DIV>
Represents a division in the
document and can contain most
other element type. The alignment
attribute of the DIV element is well
supported.
▪ <TABLE></TABLE> Inside a
TABLE, alignment can be set for
each individual cell.

42
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. For a comprehensive
listing, visit the W3C’s section on
special characters at:
http://www.w3.org/MarkUp/HTMLPlus/
htmlplus_13.html

43
Special Characters & Symbols
Special Entity Special Entity
Character Name Character Name
Ampersand &amp; & Greater-than &gt; >
sign
Asterisk &lowast; Less-than sign &lt; <
∗∗
Cent sign &cent; ¢ Non-breaking &nbsp;
space
Copyright &copy; © Quotation mark &quot; "
Fraction one &frac14; Registration &reg; ®
qtr ¼ mark
Fraction one &frac12; Trademark sign &trade; 44
half ½ ™
Special Characters
& Symbols
• Additional escape sequences support
accented characters, such as:
• &ouml;
– a lowercase o with an umlaut: ö
• &ntilde;
– a lowercase n with a tilde: ñ
• &Egrave;
– 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
&lt;.

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

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

47
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.

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

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

<LI> List item …</LI>


<LI> List item …</LI>
</UL>
▪ List item …
▪ List item …
▪ List item …

50
List Elements
▪ OL: Ordered List. Items in this list are
numbered automatically by the browser.
<OL>
<LI> List item …</LI>

<LI> List item …</LI>


<LI> List item …</LI>
</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.

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

52
List Elements

▪ You can specify a starting number


for an ordered list.
<OL TYPE =“i”>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
</OL>

53
List Elements

i. List item …
ii. List item …

Text ….

iii. List item …

54
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!

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

56
What will be the
output?
• <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>

57
The
output….
• <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>
What
•
•
<LI>Use the canoe for support
<OL type="I" start="4">
will
•
•
<LI> Be careful </LI>
<LI> Do not look around</LI>
be the
• </LI> </OL>
• <LI>Swim to shore output?
• </UL> </LI>
• <LI>Don't overexert yourself </LI>
• <LI>Use a bow light at night </LI>
• </OL>

59
The
output….
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.

61
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.

62
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.

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

64
Anchors, URLs
and Image Maps
In this chapter you will learn about
Uniform Resource Locator, and
how to add them as Anchor or
Links inside your web pages.
Objectives
Upon completing this section, you
should be able to
1. Insert links into documents.
2. Define Link Types.
3. Define URL.
4. List some commonly used URLs.
5. Plan an Image Map.

65
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.

66
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.

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

68
E-Mail (Electronic
Mail)
E.g. mailto:[email protected]
▪ 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
[email protected]
<A
HREF=“mailto:[email protected]”>S
end me
More Information </A>

69
Image Maps
▪ Image maps are images, usually in gif
format that have been divided into
regions; clicking in a region of the image
cause the web surfer to be connected to a
new URL. Image maps are graphical form
of creating links between pages.
▪ There are two type of image maps:
Client side and server side
Both types of image maps involve a listing of co-
ordinates
that define the mapping regions and which URLs
those
coordinates are associated with. This is known
as the map
file.

70
Area
Shapes
Used
▪ Client-side image maps (USEMAP) use a map file
that is part of the HTML document (in an element
called MAP), and is linked to the image by the Web
browser.

<IMG SRC="note.GIF" Width=200 Height=200


border="5" USEMAP="#map1">
Client-Side <MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="0,0,90,90"
Image Maps HREF="hi.html" ALT="see me…">
<AREA SHAPE="RECT" COORDS="100,100,160,160"
HREF="divPara.html" ALT="see him…" >
<AREA SHAPE="CIRCLE" COORDS="150,50,20"
HREF="house.html" ALT="see it…" >
</MAP>
We can use Poly as well as Rect……

72
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.

73
• Types of Shapes
• Rect → used for
squares and
ordered shapes.
• Circle → used for
circles.
• Poly → used for
unordered shapes.
• Number of coordenations

Shapes, for each shape:


• Rect →4 numbers
for two corners
Coords • Circle →3
numbers for the
center & R
• Poly → depends
on the number of
corners of the
shape( 2 numbers
for each corner)

74
▪ The
<TABLE></TABLE>
element has four
sub-elements:
1. Table
Row<TR></TR>.
2. Table Header
<TH></TH>.
3. Table Data
Tables 4.
<TD></TD>.
Caption
<CAPTION></CAPT
ION>.
▪ The table row
elements usually
contain table header
elements or table
data elements.

75
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
Tables <td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>

76
Tables

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2

Row2, Col1 Row2, Col2

77
▪ BGColor: Some browsers support background colors
in a table.
▪ Width: you can specify the table width as an
Tables absolute number of pixels or a percentage of the
document width. You can set the width for the table
Attributes 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.

78
▪ CellPadding: Cell Padding is the space between the
cell border and the cell contents and is specified in
Table pixels.
▪ Align: tables can have left, right, or center alignment.
Attributes ▪ Background: Background Image, will be titled in
IE3.0 and above.
▪ BorderColor, BorderColorDark.

79
▪ 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>
Table <CAPTION ALIGN=“BOTTOM”> Label For My Table
</CAPTION>
Caption
▪ The Caption element has one attribute ALIGN that
can be either TOP (Above the table) or BOTTOM
(below the table).

80
▪ Table Data cells are represented by the TD element.
Table Cells can also be TH (Table Header) elements which
Header results in the contents of the table header cells
appearing centered and in bold text.

81
▪ Colspan: Specifies how many cell
columns of the table this cell should
span.
▪ Rowspan: Specifies how many cell
Table Data and rows of the table this cell should span.
▪ Align: cell data can have left, right, or
Table Header center alignment.
▪ Valign: cell data can have top, middle,
Attributes 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.

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

Basic Table Code 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>

83
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>
</table>

84
Table Data and Table Header
Attributes

Column 1 Header Column 2 Header

Row 1 Col 1

Row 2 Col 2
Row 2 Col 1
Row 3 Col 2

85
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

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

87
The Output

88
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.

89
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”>
Forms <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>

90
▪ 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.
<FORM> ▪ METHOD: GET (default) or POST specifies which
HTTP method will be used to send the form’s
element contents to the web server. The CGI application
should be written to accept the data from either
attributes method.
▪ NAME: is a form name used by VBScript or
JavaScripts.
▪ TARGET: is the target frame where the response
page will show up.

91
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>.

92
Sami Ali

Al al-Bayt University

93
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. 94
<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.

Form Elements
95
<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>
Example on Last Name: <INPUT TYPE="TEXT" NAME="LName"

Text Box 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>

96
Output

97
▪ 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.
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.

98
<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
Example on enter:</font></h1>
<FORM name="fome2" Action="url"
Password method="get">

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>
</FORM></BODY> </HTML>

99
Output

100
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 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.

101
▪ 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.
Check Box ▪ 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.

102
<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="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>

103
Output
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.

105
• <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>

106
107
<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">
108 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>
Output
Push ▪ Push Button: This element would be used
with
Button 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.
<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>
112
▪ 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.
Submit <INPUT TYPE=“SUBMIT”>
The browser will display
Button 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.

113
• <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>

114
115
• Reset: It is a good idea to include one of
Reset these for each form where users are entering
data. It allows the surfer to clear all the input
in the form.
Button • <INPUT TYPE=“RESET”>

• Browser will display


•
• Reset buttons have the following attributes:
• TYPE: reset.
• VALUE: determines the text label on the
button, usually Reset.
116
• <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>
117
• <STRONG><font size=5>Press Here to
submit the data:</font></STRONG><BR>
• <INPUT TYPE="submit"
VALUE="SubmitData">
• <INPUT TYPE="RESET" VALUE="Reset">
• </FORM>
118
▪ Image Submit Button: Allows you to substitute an
image for the standard submit button.
Image
<INPUT TYPE=“IMAGE” SRC=“jordan.gif”>
Submit
Button 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.

119
<form>
<H1><font color=blue>
Click to go Jordan’s Map:
<INPUT TYPE="IMAGE"
SRC="jordan.gif">
</form>
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.

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

122
Other
Elements
used in
123 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.
• <BODY bgcolor=lightblue>
• <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>

124
125
126
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.

128
• <BODY bgcolor=lightblue>
• <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>

129
130
▪ Drop Down List:
Other
Elements
used in ▪ Name: is the name of the variable to be sent to the
CGI application.
Forms ▪ Size: 1.

131
▪ List Box:

Other Elements
used in Forms
▪ Name: is the name of the variable
to be sent to the CGI application.
▪ SIZE: is greater than one.

132
▪ Option
The list items are added to
the <SELECT> element
Other by inserting
<OPTION></OPTION>
elements.
Elements The Option Element’s
attributes are:
used in ▪ SELECTED: When this
attribute is present, the
Forms 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.

133
</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>

134
135
<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>

136
137
138

You might also like