Scribd
Upload
2 views38 pages

Lec04 Tut05

The document outlines Lecture 4 and Tutorial 5 on Intermediate HTML, covering topics such as basic and intermediate HTML tables, forms, and image maps. It includes detailed explanations of HTML elements like <TABLE>, <FORM>, and various input types, along with examples of their usage. The content is structured to facilitate understanding of HTML formatting and form creation for web development.

Uploaded by

kin yam Law
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
2 views38 pages

Lec04 Tut05

The document outlines Lecture 4 and Tutorial 5 on Intermediate HTML, covering topics such as basic and intermediate HTML tables, forms, and image maps. It includes detailed explanations of HTML elements like <TABLE>, <FORM>, and various input types, along with examples of their usage. The content is structured to facilitate understanding of HTML formatting and form creation for web development.

Uploaded by

kin yam Law
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/ 38

Lecture 4 & Tutorial 5

Intermediate HTML
Outline
4.1 Introduction
4.2 Basic HTML Tables
4.3 Intermediate HTML Tables and Formatting
4.4 Basic HTML Forms
4.5 More Complex HTML Forms
4.6 Creating and Using Image Maps
4.7 <META> Tags

CC2005 (10/11) Sem. 1 - L4 1


4.1 Introduction

• In this Chapter
– Tables
– Internal linking
– Image maps
– Frames

CC2005 (10/11) Sem. 1 - L4 2


4.2 Basic HTML Tables
• Tables
– Organize data into rows and columns
– All tags and text that apply to the table go inside
<TABLE>…</TABLE> tags
– TABLE element
• Attributes
– BORDER lets you set the width of the table’s border in
pixels
– ALIGN: left, right or center
– WIDTH: pixels (absolute) or a percentage
• CAPTION element is inserted directly above the table in the
browser window
– Helps text-based browsers interpret table data
CC2005 (10/11) Sem. 1 - L4 3
4.2 Basic HTML tables (II)
– TABLE element (cont.)
• THEAD element
– Header info
– For example, titles of table and column headers
• TR element
– Table row element used for formatting the cells of
individual rows
• TBODY element
– Used for formatting and grouping purposes
• Smallest area of the table we are able to format is data cells
– Two types of data cells
» In the header: <TH>…</TH> suitable for titles and
column headings
» In the table body: <TD>…</TD>
– Aligned left by default
CC2005 (10/11) Sem. 1 - L4 4
1 <HTML>
2 Outline
3
4 <!-- Basic table design -->
5 1. TABLE element
6 <HEAD> 1.1 BORDER attribute
7 <TITLE>Internet and WWW How to Program - Tables</TITLE>
1.2 CAPTION element
8 </HEAD>
9
1.3 THEAD element
10 <BODY> 1.4 TH element
11
12 <CENTER><H2>Table Example Page</H2></CENTER>
13
14 <!-- The <TABLE> tag opens a new table and lets you put in -->
15 <!-- design options and instructions -->
16 <TABLE BORDER = "1" ALIGN = "center" WIDTH = "40%">
17
18 <!-- Use the <CAPTION> tag to summarize the table's contents -->
19 <!-- (this helps the visually impaired) -->
20 <CAPTION>Here is a small sample table.</CAPTION>
21
22 <!-- The <THEAD> is the first (non-scrolling) horizontal -->
23 <!-- section.Use it to format the table header area. -->
24 <!-- <TH> inserts a header cell and displays bold text -->
25 <THEAD>
26 <TR><TH>This is the head.</TH></TR>
27 </THEAD>
28
29 <!-- All of your important content goes in the <TBODY>. -->
30 <!-- Use this tag to format the entire section -->
31 <!-- <TD> inserts a data cell, with regular text -->

© 2000 Deitel & Associates, Inc. All rights reserved.


32 <TBODY>
33 <TR><TD ALIGN = "center">This is the body.</TD></TR> Outline
34 </TBODY>
35 1.5 TBODY element
36 </TABLE> 1.6 TD element
37
38 </BODY>
2. Page rendered by
39 </HTML>
browser

© 2000 Deitel & Associates, Inc. All rights reserved.


4.3 Intermediate HTML Tables and
Formatting
• COLGROUP element
– Used to group and format columns
• Each COL element
– In the <COLGROUP>…</COLGROUP> tags
– Can format any number of columns (specified by the
SPAN attribute)
• Background color or image
– Add to any row or cell
– Use BGCOLOR and BACKGROUND attributes

CC2005 (10/11) Sem. 1 - L4 7


4.3 Intermediate HTML Tables and
Formatting (II)
• Possible to make some data cells larger than others
– ROWSPAN attribute inside any data cell
• Value extends the data cell to span the specified number of
cells
– COLSPAN attribute
• Value extends the data cell to span the specified number of
cells
– Modified cells will cover the areas of other cells
• Reduces number of cells in that row or column
• VALIGN attribute
– top, middle, bottom and baseline
– Default is middle
CC2005 (10/11) Sem. 1 - L4 8
1<HTML>
2 Outline
3
4<!-- Intermediate table design -->
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Tables</TITLE>
8</HEAD>
9<BODY>
10
11<H2 ALIGN = "center">Table Example Page</H2>
12
13<TABLE BORDER = "1" ALIGN = "center" WIDTH = "40%">
14 <CAPTION>Here is a small sample table.</CAPTION>
15
16 <THEAD>
17 <TR>
18 <TH>This is the Head.</TH>
19 </TR>
20 </THEAD>
21
22 <TBODY>
23 <TR>
24 <TD ALIGN = "center">This is the Body.</TD>
25 </TR>
26 </TBODY>
27
28</TABLE>
29
30<BR><BR>

© 2000 Deitel & Associates, Inc. All rights reserved.


30<BR><BR>
31 Outline
32<TABLE BORDER = "1" ALIGN = "center">
33
34 <CAPTION>Here is a more complex sample table.</CAPTION> 1.1 COLGROUP element
35
1.2 COL element
36 <!-- <COLGROUP> and <COL> are used to format entire -->
37 <!-- columns at once. SPAN determines how many columns --> 1.3 ROWSPAN and
38 <!-- the COL tag effects. --> COLSPAN attributes
39 <COLGROUP>
1.4 BGCOLOR attribute
40 <COL ALIGN = "right">
41 <COL SPAN = "4" ALIGN = "center"> 1.5 WIDTH attribute
42 </COLGROUP> 1.6 VALIGN attribute
43
44 <THEAD>
45
46 <!-- ROWSPANs and COLSPANs combine the indicated number -->
47 <!-- of cells vertically or horizontally -->
48 <TR BGCOLOR = "#8888FF">
49 <TH ROWSPAN = "2">
50 <IMG SRC = "deitel.gif" WIDTH = "200" HEIGHT = "144"
51 ALT = "Harvey and Paul Deitel">
52 </TH>
53 <TH COLSPAN = "4" VALIGN = "top">
54 <H1>Camelid comparison</H1><BR>
55 <P>Approximate as of 8/99</P>
56 </TH>
57 </TR>
58
59 <TR BGCOLOR = "khaki" VALIGN = "bottom">
60 <TH># of Humps</TH>

© 2000 Deitel & Associates, Inc. All rights reserved.


61 <TH>Indigenous region</TH>
62 <TH>Spits?</TH> Outline
63 <TH>Produces Wool?</TH>
64 </TR>
65
66 </THEAD>
67
68 <TBODY>
69
70 <TR>
71 <TH>Camels (bactrian)</TH>
72 <TD>2</TD>
73 <TD>Africa/Asia</TD>
74 <TD ROWSPAN = "2">Llama</TD>
75 <TD ROWSPAN = "2">Llama</TD>
76 </TR>
77
78 <TR>
79 <TH>Llamas</TH>
80 <TD>1</TD>
81 <TD>Andes Mountains</TD>
82 </TR>
83
84 </TBODY>
85 </TABLE>
86
87 </BODY>
88 </HMTL>

© 2000 Deitel & Associates, Inc. All rights reserved.


A complex table with formatting and color

CC2005 (10/11) Sem. 1 - L4 12


4.4 Basic HTML Forms
• Forms
– Collect information from people viewing your site
• FORM element
– METHOD attribute indicates the way the Web server will
organize and send you form output. For example:
• Web server: machine that processes browser requests
• METHOD = “post” in a form that causes changes to server data
• METHOD = “get” in a form that does not cause any changes in
server data
(Note: The detail applications of the METHOD attribute will not be covered)
– Form data sent to server as an environment variable
• Processed by scripts
– ACTION attribute
• Path to a script (a CGI script written in Perl, C or other languages)
CC2005 (10/11) Sem. 1 - L4 13
4.4 Basic HTML Forms (II)
• INPUT element
– Attributes:
• TYPE (required)
– Hidden inputs always have TYPE = “hidden”
– Defines the usage of the INPUT element
» TYPE = “text” inserts a one-line text box
• NAME provides a unique identification for INPUT element
• VALUE indicates the value that the INPUT element sends to
the server upon submission
• SIZE
– For TYPE = “text”, specifies the width of the text
input, measured in characters
• MAXLENGTH
– For TYPE = “text”, specifies the maximum number of
characters that the text input will accept

CC2005 (10/11) Sem. 1 - L4 14


4.4 Basic HTML Forms (III)
• INPUT element (cont.)
– Include textual identifier adjacent to INPUT element
– 2 types of INPUT elements that should be inserted into
every form:
• TYPE = “submit” inserts a button that submits data to the
server
– VALUE attribute changes the text displayed on the button
(default is “Submit”)
• TYPE = “reset” inserts a button that clears all entries the
user entered into the form
– VALUE attribute changes the text displayed on the button
(default is “Reset”)

CC2005 (10/11) Sem. 1 - L4 15


1<HTML>
2 Outline
3
4<!-- Introducing Form Design -->
5 1. FORM element
6<HEAD> 1.1 Specify METHOD
7<TITLE>Internet and WWW How to Program - Forms</TITLE> attribute
8</HEAD>
1.2 Hidden input
9
elements
10<BODY>
11<H2>Feedback Form</H2>
12
13<P>Please fill out this form to help us improve our site.</P>
14
15<!-- This tag starts the form, gives the method of sending -->
16<!-- information and the location of form scripts. -->
17<!-- Hidden inputs give the server non-visual information -->
18<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail">
19
20<INPUT TYPE = "hidden" NAME = "recipient"
21 VALUE = "[email protected]">
22<INPUT TYPE = "hidden" NAME = "subject"
23 VALUE = "Feedback Form">
24<INPUT TYPE = "hidden" NAME = "redirect"
25 VALUE = "main.html">
26
27<!-- <INPUT type = "text"> inserts a text box -->

© 2000 Deitel & Associates, Inc. All rights reserved.


28<P><STRONG>Name:</STRONG>
29<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P> Outline
30
31<!-- Input types "submit" and "reset" insert buttons -->
1.3 Text box INPUT
32<!-- for submitting or clearing the form's contents -->
element
33<INPUT TYPE = "submit" VALUE = "Submit Your Entries">
34<INPUT TYPE = "reset" VALUE = "Clear Your Entries">
1.4 “submit” and
35</FORM>
“reset” INPUT
36
TYPEs
37</BODY>
38</HTML> 2. Page rendered by
browser

© 2000 Deitel & Associates, Inc. All rights reserved.


4.5 More Complex HTML Forms
• TEXTAREA element
– Inserts a scrollable text box into FORM
– ROWS and COLS attributes specify the number of
character rows and columns
• INPUT element
– TYPE = “password”
– Inserts a text box where data displayed as asterisks
• Actual data submitted to server

CC2005 (10/11) Sem. 1 - L4 18


4.5 More Complex HTML Forms (II)
• INPUT element (cont.)
– TYPE = “checkbox” creates a checkbox
• Used individually or in groups
• Each checkbox in a group should have same NAME
• Make sure that the checkboxes within a group have different
VALUE attribute values
– Otherwise, browser will cannot distinguish between them
• CHECKED attribute checks boxes initially
– TYPE = “radio”
• Radio buttons similar in function and usage to checkboxes
• Only one radio button in a group can be selected
• CHECKED attribute indicates which radio button is selected
initially

CC2005 (10/11) Sem. 1 - L4 19


4.5 More Complex Forms (III)
• SELECT element
– Places a selectable list of items inside FORM
• Include NAME attribute
– Add an item to list
• Insert an OPTION element in the <SELECT>…</SELECT>
tags
• Closing OPTION tag optional
– SELECTED attribute applies a default selection to list
– Change the number of list options visible
• Including the SIZE = “x” attribute inside the <SELECT>
tag
• x number of options visible

CC2005 (10/11) Sem. 1 - L4 20


1<HTML>
2 Outline
3
4<!-- Form Design Example 2 -->
5 1.1 TEXTAREA element
6<HEAD>
7<TITLE>Internet and WWW How to Program - Forms</TITLE>
8</HEAD>
9
10<BODY>
11<H2>Feedback Form</H2>
12
13<P>Please fill out this form to help us improve our site.</P>
14
15<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail">
16
17<INPUT TYPE = "hidden" NAME = "recipient"
18 VALUE = "[email protected]">
19<INPUT TYPE = "hidden" NAME = "subject"
20 VALUE = "Feedback Form">
21<INPUT TYPE = "hidden" NAME = "redirect"
22 VALUE = "main.html">
23
24<P><STRONG>Name: </STRONG>
25<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>
26
27<!-- <TEXTAREA> creates a textbox of the size given -->
28<P><STRONG>Comments:</STRONG>
29<TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA>
30</P>

© 2000 Deitel & Associates, Inc. All rights reserved.


31
32<!-- <INPUT TYPE = "password"> inserts a textbox whose --> Outline
33<!-- readout will be in *** instead of regular characters -->
34<P><STRONG>Email Address:</STRONG>
35<INPUT NAME = "email" TYPE = "password" SIZE = "25"></P> 1.2 “password” TYPE
36 1.3 “checkbox” TYPE
37<!-- <INPUT TYPE = "checkbox"> creates a checkbox -->
1.4 Checkboxes in
38<P><STRONG>Things you liked:</STRONG><BR>
same group must
39
40Site design
have same NAME,
41<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Design"> but different VALUE
42Links attributes
43<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Links">
44Ease of use
45<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Ease">
46Images
47<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Images">
48Source code
49<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Code">
50</P>
51
52<INPUT TYPE = "submit" VALUE = "Submit Your Entries">
53<INPUT TYPE = "reset" VALUE = "Clear Your Entries">
54</FORM>
55
56</BODY>
57</HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


Form including textareas, password
boxes and checkboxes

CC2005 (10/11) Sem. 1 - L4 23


1<HTML>
2
3
Outline
4<!-- Form Design Example 3 -->
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Forms</TITLE>
8</HEAD>
9
10<BODY>
11<H2>Feedback Form</H2>
12
13<P>Please fill out this form to help us improve our site.</P>
14
15<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail">
16
17<INPUT TYPE = "hidden" NAME = "recipient"
18 VALUE = "[email protected]">
19<INPUT TYPE = "hidden" NAME = "subject"
20 VALUE = "Feedback Form">
21<INPUT TYPE = "hidden" NAME = "redirect"
22 VALUE = "main.html">
23
24<P><STRONG>Name: </STRONG>
25<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>
26
27<P><STRONG>Comments:</STRONG>
28<TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA>
29</P>
© 2000 Deitel & Associates, Inc. All rights reserved.
30
31<P><STRONG>Email Address:</STRONG>
32<INPUT NAME = "email" TYPE = "password" SIZE = "25"></P> Outline
33
34<P><STRONG>Things you liked:</STRONG><BR>
35
1.1 TYPE = “radio”
36Site design creates a radio
37<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Design"> button
38Links 1.2 Only one radio
39<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Links"> button in a group
40Ease of use can be selected
41<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Ease">
1.3 CHECKED attribute
42Images
specifies which
43<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Images">
44Source code
radio button is
45<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Code">
selected by default
46</P>
47
48<!-- <INPUT TYPE="radio"> creates a radio button. The -->
49<!-- difference between radio buttons and checkboxes is -->
50<!-- that only one radio button in a group can be selected -->
51<P><STRONG>How did you get to our site?:</STRONG><BR>
52
53Search engine
54<INPUT NAME = "how get to site" TYPE = "radio"
55 VALUE = "search engine" CHECKED>
56Links from another site
57<INPUT NAME = "how get to site" TYPE = "radio"
58 VALUE = "link">

© 2000 Deitel & Associates, Inc. All rights reserved.


59Deitel.com Web site
60<INPUT NAME = "how get to site" TYPE = "radio"
61 VALUE = "deitel.com">
Outline
62Reference in a book
63<INPUT NAME = "how get to site" TYPE = "radio" 1.4 SELECT element
64 VALUE = "book">
65Other 1.5 Create menu items
66<INPUT NAME = "how get to site" TYPE = "radio" with OPTION
67 VALUE = "other"> elements
68</P>
69 1.6 SELECTED attribute
70<!-- The <select> tag presents a drop down menu with --> specifies which
71<!-- choices indicated by the <option> tags --> option is displayed
72<P><STRONG>Rate our site (1-10):</STRONG>
73<SELECT NAME = "rating">
by default
74<OPTION SELECTED>Amazing:-)
75<OPTION>10
76<OPTION>9
77<OPTION>8
78<OPTION>7
79<OPTION>6
80<OPTION>5
81<OPTION>4
82<OPTION>3
83<OPTION>2
84<OPTION>1
85<OPTION>The Pits:-(
86</SELECT></P>
87
88<INPUT TYPE = "submit" VALUE = "Submit Your Entries">
89<INPUT TYPE = "reset" VALUE = "Clear Your Entries">
90</FORM>
92</BODY>
93</HTML>
© 2000 Deitel & Associates, Inc. All rights reserved.
HTML form including radio buttons
and pulldown lists

CC2005 (10/11) Sem. 1 - L4 27


4.6 Creating and Using Image Maps
• Image maps
– Designate certain sections of an image as hotspots
– Use hotspots as anchors for linking
– All elements of image map inside <MAP>…</MAP>
tags
– <MAP> tag requires NAME attribute
• Ex. <MAP NAME = “picture”>
• Hotspots designated with AREA element
– AREA attributes:
• HREF sets the target for the link on that spot
• SHAPE and COORDS set the characteristics of the AREA
• ALT provides alternate textual description
CC2005 (10/11) Sem. 1 - L4 28
4.6 Creating and Using Image Maps (II)
• AREA element (continued)
– SHAPE = “rect”
• Causes rectangular hotspot to be drawn around the coordinates
given in the COORDS attribute
• COORDS - pairs of numbers corresponding to the x and y axes
– x axis extends horizontally from upper-left corner
– y axis extends vertically from upper-left corner
• Ex. <AREA HREF = “form.html” SHAPE = “rect”
COORDS = “3, 122, 73, 143” ALT = “Go to
the form”>
– Rectangular hotspot with upper-left corner of rectangle at
(3, 122) and lower-right corner at (73, 143)

CC2005 (10/11) Sem. 1 - L4 29


4.6 Creating and Using Image Maps (III)
• AREA element (continued)
– SHAPE = “poly”
• Causes a hotspot to be created around specified coordinates
• Ex. <AREA HREF = “mailto:[email protected]”
SHAPE = “poly” COORDS = “28, 22, 24, 68,
46, 114, 84, 111, 99, 56, 86, 13”
ALT = “Email the Deitels”>
– SHAPE = “circle”
• Creates a circular hotspot
• Coordinates of center of circle and radius of circle, in pixels
• Ex. <AREA HREF = “mailto:[email protected]”
SHAPE = “circle” COORDS = “146, 66, 42”
ALT = “Email the Deitels”>

CC2005 (10/11) Sem. 1 - L4 30


4.6 Creating and Using Image Maps (IV)

• To use the image map with an IMG element


– Insert the USEMAP = “#name” attribute into the
IMG element
– name - value of the NAME attribute in the MAP element
– Ex. <IMG SRC = "deitel.gif" WIDTH = "200"
HEIGHT="144" BORDER="1" ALT = "Harvey and
Paul Deitel" USEMAP = "#picture">

CC2005 (10/11) Sem. 1 - L4 31


1<HTML>
2 Outline
3
4<!-- Creating and Using Image Maps -->
5 1. MAP element
6<HEAD> 1.1 NAME attribute
7<TITLE>Internet and WWW How to Program - List</TITLE>
1.2 SHAPE = “rect”
8</HEAD>
9 1.3 “rect”COORDS
10<BODY BACKGROUND = "bckgrnd.gif"> 1.4 SHAPE = “poly”
11
12<CENTER>
1.5 “poly” COORDS
13<!-- <MAP> opens and names an image map formatting area -->
14<!-- and to be referenced later -->
15<MAP NAME = "picture">
16
17<!-- The "SHAPE = rect indicates a rectangular area, with -->
18<!-- coordinates of the upper-left and lower-right corners -->
19<AREA HREF = "form.html" SHAPE = "rect"
20 COORDS = "3, 122, 73, 143" ALT = "Go to the form">
21<AREA HREF = "contact.html" SHAPE = "rect"
22 COORDS = "109, 123, 199, 142" ALT = "Go to the contact page">
23<AREA HREF = "main.html" SHAPE = "rect"
24 COORDS = "1, 2, 72, 17" ALT = "Go to the homepage">
25<AREA HREF = "links.html" SHAPE = "rect"
26 COORDS = "155, 0, 199, 18" ALT = "Go to the links page">
27
28<!-- The "SHAPE = polygon" indicates an area of cusotmizable -->
29<!-- shape, with the coordinates of every vertex listed -->
30<AREA HREF = "mailto:[email protected]" SHAPE = "poly"

© 2000 Deitel & Associates, Inc. All rights reserved.


31 COORDS = "28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13"
32 ALT = "Email the Deitels"> Outline
33
34<!-- The "SHAPE = circle" indicates a circular area with --> 1.6 SHAPE =
35<!-- center and radius listed --> “circle”
36<AREA HREF = "mailto:[email protected]" SHAPE = "circle"
1.7 Use image map
37 COORDS = "146, 66, 42" ALT = "Email the Deitels"> with IMG element
38</MAP> via USEMAP attribute
39
40<!-- <IMG SRC=... USEMAP = "#name"> says that the indicated -->
41<!-- image map will be used with this image -->
42<IMG SRC = "deitel.gif" WIDTH = "200" HEIGHT = "144" BORDER = "1"

43 ALT = "Harvey and Paul Deitel" USEMAP = "#picture">


44</CENTER>
45
46</BODY>
47</HTML>

© 2000 Deitel & Associates, Inc. All rights reserved.


A picture with links anchored
to an image map

CC2005 (10/11) Sem. 1 - L4 34


4.7 <META> Tags
• Search engines
– Catalog sites by following links from page to page
– Save identification and classification info

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0


Transitional//EN">
– Tells browser that HTML conforms to a
Transitional subset of HTML version 4.0

• META tag
– Main HTML element that interacts with search engines

CC2005 (10/11) Sem. 1 - L4 35


4.7 <META> Tags (II)
• META tags
– Contain two attributes that should always be used:
– NAME identifies type of META tag
– CONTENT provides info the search engine will catalog
about your site
• CONTENT of a META tag with NAME = “keywords”
– Provides search engines with a list of words that describe
key aspects of your site
• CONTENT of a META tag with NAME = “description”
– Should be 3 to 4 lines
– Used by search engines to catalog and display your site
• META elements
– Not visible to users of the site
– Should be placed inside header section
CC2005 (10/11) Sem. 1 - L4 36
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML> Outline
3
4
5<!-- <META> and <!DOCTYPE> tags --> 1. META tags
6 1.1 NAME =
7<HEAD> “keywords”
8<!-- <META> tags give search engines information they need -->
9<!-- to catalog your site -->
1.2 NAME =
10<META NAME = "keywords" CONTENT = "Webpage, design, HTML, “description”
11 tutorial, personal, help, index, form, contact, feedback,
12 list, links, frame, deitel">
13
14<META NAME = "description" CONTENT = "This Web site will help
15 you learn the basics of HTML and Webpage design through the
16 use of interactive examples and instruction.">
17
18<TITLE>Internet and WWW How to Program - Welcome</TITLE>
19</HEAD>
20
21<BODY>
22
23<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
24
25<P><FONT COLOR = "red" SIZE = "+1" FACE = "Arial">We have
26designed this site to teach about the wonders of
27<EM>HTML</EM>.</FONT>
28
29<FONT COLOR = "purple" SIZE = "+2" FACE = "Verdana">We have been
30using <EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,

© 2000 Deitel & Associates, Inc. All rights reserved.


31and we enjoy the features that have been added recently.</FONT>
32 Outline
33<FONT COLOR = "blue" SIZE = "+1" FACE = "Helvetica">It
34seems only a short time ago that we read our first <EM>HTML</EM>
35book.</FONT>
36
37<FONT COLOR = "green" SIZE = "+2" FACE = "Times">Soon you will
38know about many of the great new feature of HTML 4.0.</FONT></P>
39
40<H2 ALIGN = "center">Have Fun With the Site!</H2></P>
41
42</BODY>
43</HTML>

< End >

© 2000 Deitel & Associates, Inc. All rights reserved.

You might also like