chapter 10 – intermediate html 4 outline 10.1introduction 10.2unordered lists 10.3nested and...

Chapter 10 – Intermediate Chapter 10 – Intermediate HTML 4HTML 4

Outline10.1 Introduction10.2 Unordered Lists10.3 Nested and Ordered Lists10.4 Basic HTML Tables10.5 Intermediate HTML Tables and Formatting10.6 Basic HTML Forms10.7 More Complex HTML Forms10.8 Internal Linking10.9 Creating and Using Image Maps10.10 <META> Tags10.11 <FRAMESET> Tag10.12 Nested <FRAMESET> Tags

10.1 Introduction10.1 IntroductionIn this ChapterIn this Chapter– ListsLists– TablesTables– Internal linkingInternal linking– Image mapsImage maps– Frames Frames

10.2 Unordered Lists10.2 Unordered Lists

Unordered listUnordered list element element– Creates a list in which every line begins with a Creates a list in which every line begins with a

bullet markbullet mark– <UL><UL>……</UL></UL> tags tags– Each item in unordered list inserted with the Each item in unordered list inserted with the <LI><LI> ( (list itemlist item) tag) tag

Closing Closing </LI></LI> tag optional tag optional

Unordered lists with HTMLUnordered lists with HTML

1.1.Unordered listUnordered list1.1 List items1.1 List items

1<HTML>3456<HEAD>7<TITLE>Internet and WWW How to Program - Links</TITLE>8</HEAD>910<BODY>1112<CENTER>13<H2>Here are my favorite Internet Search Engines</H2>14<P><STRONG>Click on the Search Engine address to go to that15page.</STRONG></P>16171819<UL>20<LI>Yahoo: <A HREF = "http://www.yahoo.com">21http://www.yahoo.com</A></LI>2223<LI>Alta Vista: <A HREF = "http://www.altavista.com">24http://www.alta-vista.com</A></LI>2526<LI>Ask Jeeves: <A HREF = "http://www.askjeeves.com">27http://www.askjeeves.com</A></LI>2829<LI>WebCrawler: <A HREF = "http://www.webcrawler.com">30http://www.webcrawler.com</A></LI>31</UL>32</CENTER>33</BODY>34</HTML>

10.3 Nested and Ordered Lists10.3 Nested and Ordered Lists

Nested listNested list – Contained in another list elementContained in another list element– Nesting the new list inside the original Nesting the new list inside the original

Indents list one level and changes the bullet type to Indents list one level and changes the bullet type to reflect the nestingreflect the nesting

Browsers Browsers – Insert a line of whitespace after every closed listInsert a line of whitespace after every closed list

Indent each level of a nested list Indent each level of a nested list – Makes the code easier to edit and debugMakes the code easier to edit and debug

1.1.Nested listsNested lists

1.1 Three levels of nesting1.1 Three levels of nesting

1.2 Close </UL> tags in 1.2 Close </UL> tags in appropriate placesappropriate places

1 <HTML>23 4 56 <HEAD>7 <TITLE>Internet and WWW How to Program - List</TITLE>8 </HEAD>910 <BODY>1112 <CENTER>13 <H2><U>The Best Features of the Internet</U></H2>14 </CENTER>1516 <UL>17 <LI>You can meet new people from countries around 18 the world.</LI>19 <LI>You have access to new media as it becomes public:</LI>2021 22 23 <UL>24 <LI>New games</LI>25 <LI>New applications </LI>2627 28 <UL>29 <LI>For business</LI>30 <LI>For pleasure</LI>

2.2. Ordered listOrdered list

31 </UL> 32 <LI>Around the clock news</LI>33 <LI>Search engines</LI>34 <LI>Shopping</LI>35 <LI>Programming</LI>36 <UL>37 <LI>HTML</LI>38 <LI>Java</LI>39 <LI>Dynamic HTML</LI>40 <LI>Scripts</LI>41 <LI>New languages</LI>42 </UL>43 </UL> 44 <LI>Links</LI>45 <LI>Keeping in touch with old friends</LI>46 <LI>It is the technology of the future!</LI>47 </UL> 4849 <BR><CENTER><H2>My 3 Favorite <EM>CEO's</EM></H2></CENTER>5051 52 

53 <OL>54 <LI>Bill Gates</LI>55 <LI>Steve Jobs</LI>56 <LI>Michael Dell</LI>57 </OL>5859 </BODY>60 </HTML>

Nested and ordered lists in Nested and ordered lists in HTMLHTML

10.3 Nested and Ordered 10.3 Nested and Ordered ListsLists

Ordered list elementOrdered list element– <OL><OL>……</OL></OL> tags tags– By default, ordered lists use decimal sequence numbers By default, ordered lists use decimal sequence numbers

(1, 2, 3, …)(1, 2, 3, …)

– To change sequence type, use To change sequence type, use TYPETYPE attribute in attribute in <OL><OL> opening tagopening tag

TYPETYPE = “1” (default) = “1” (default)– Decimal sequence (1, 2, 3, …)Decimal sequence (1, 2, 3, …)

TYPETYPE = “I” = “I”– Uppercase Roman numerals (I, II, III, …)Uppercase Roman numerals (I, II, III, …)

TYPETYPE = “i” = “i”– Lowercase Roman numerals (i, ii, iii, …)Lowercase Roman numerals (i, ii, iii, …)

TYPETYPE = “A” = “A”– Uppercase alphabetical (A, B, C, …)Uppercase alphabetical (A, B, C, …)

TYPETYPE = “a” = “a”– Lowercase alphabetical (a, b, c, …)Lowercase alphabetical (a, b, c, …)

Different types of ordered listsDifferent types of ordered lists

1.1. OLOL element element1.1 1.1 TYPETYPE attribute attribute

1<HTML>23456<HEAD>7<TITLE>Internet and WWW How to Program - List</TITLE>8</HEAD>910<BODY>1112<CENTER>13<H2>Web Site Outline</H2>14</CENTER>151617181920<OL>21<LI>Home page</LI>22<LI>Links page</LI>23 <OL TYPE = "I">24 <LI>Links to search engines</LI>25 <LI>Links to information sites</LI>26 <OL TYPE = "A">27 <LI>News sites</LI>28 <OL>29 <LI TYPE = "i">TV based</LI>30 <OL TYPE = "a">

1.1 1.1 TYPETYPE attribute attribute

31 <LI>CNN</LI>

32 <LI>Headline News</LI>

33 </OL>

34 <LI TYPE = "i">Text based</LI>

35 <OL TYPE = "a">

36 <LI>New York Times</LI>

37 <LI>Washington Post</LI>

38 </OL>

39 </OL>

40 <LI>Stock sites</LI>

41 </OL>

42 <LI>Links to "fun" sites</LI>

43 </OL>

44 <LI>Feedback page</LI>

45 <LI>Contact page</LI>

46 <LI>HTML Example Pages</LI>

47 </OL>

48

49 </BODY>

50 </HTML>

10.4 Basic HTML Tables10.4 Basic HTML Tables

TablesTables – Organize data into rows and columnsOrganize data into rows and columns– All tags and text that apply to the table go inside All tags and text that apply to the table go inside <TABLE><TABLE>……</TABLE></TABLE> tags tags

– TABLETABLE element elementAttributesAttributes– BORDERBORDER lets you set the width of the table’s border in pixels lets you set the width of the table’s border in pixels– ALIGNALIGN: left, right or center: left, right or center– WIDTH:WIDTH: pixels (absolute) or a percentage pixels (absolute) or a percentage

CAPTIONCAPTION element is inserted directly above the table in the element is inserted directly above the table in the browser windowbrowser window

– Helps Helps text-based browserstext-based browsers interpret table data interpret table data

10.4 Basic HTML tables10.4 Basic HTML tables

– TABLETABLE element (cont.) element (cont.)THEADTHEAD element element

– Header infoHeader info– For example, titles of table and column headersFor example, titles of table and column headers

TRTR element element– Table row element used for formatting the cells of individual rowsTable row element used for formatting the cells of individual rows

TBODYTBODY element element– Used for formatting and grouping purposesUsed for formatting and grouping purposes

Smallest area of the table we are able to format is data cellsSmallest area of the table we are able to format is data cells– Two types of data cellsTwo types of data cells

In the header:In the header: <TH> <TH>……</TH></TH> suitable for titles and column suitable for titles and column headingsheadingsIn the table body: In the table body: <TD><TD>……</TD></TD>

– Aligned left by defaultAligned left by default

1.1.TABLETABLE element element1.1 1.1 BORDERBORDER attribute attribute

1.2 1.2 CAPTIONCAPTION element element

1.3 1.3 THEADTHEAD element element

1.4 1.4 THTH element element

1 <HTML>23 4 56 <HEAD>7 <TITLE>Internet and WWW How to Program - Tables</TITLE>8 </HEAD>910 <BODY>1112 <CENTER><H2>Table Example Page</H2></CENTER>1314 15 16 <TABLE BORDER = "1" ALIGN = "center" WIDTH = "40%">1718 19 20 <CAPTION>Here is a small sample table.</CAPTION>21 22 23 24 25 <THEAD>26 <TR><TH>This is the head.</TH></TR>27 </THEAD>2829 30 31

1.5 1.5 TBODYTBODY element element

1.6 1.6 TDTD element element

2.2. Page rendered by Page rendered by browserbrowser

32 <TBODY>

33 <TR><TD ALIGN = "center">This is the body.</TD></TR>

34 </TBODY>

35

36 </TABLE>

37

38 </BODY>

39 </HTML>

10.5 Intermediate HTML Tables 10.5 Intermediate HTML Tables and Formattingand Formatting

COLGROUPCOLGROUP element element– Used to group and format columnsUsed to group and format columns

Each Each COLCOL element element – In the In the <COLGROUP><COLGROUP>……</COLGROUP></COLGROUP> tags tags – Can format any number of columns (specified Can format any number of columns (specified

by the by the SPANSPAN attribute) attribute)

Background color or imageBackground color or image– Add to any row or cell Add to any row or cell – Use Use BGCOLORBGCOLOR and and BACKGROUNDBACKGROUND attributes attributes

10.5 Intermediate HTML Tables 10.5 Intermediate HTML Tables and Formattingand Formatting

Possible to make some data cells larger than othersPossible to make some data cells larger than others– ROWSPANROWSPAN attribute inside any data cell attribute inside any data cell

Value extends the data cell to span the specified number of cellsValue extends the data cell to span the specified number of cells

– COLSPANCOLSPAN attribute attributeValue extends the data cell to span the specified number of cellsValue extends the data cell to span the specified number of cells

– Modified cells will cover the areas of other cellsModified cells will cover the areas of other cellsReduces number of cells in that row or columnReduces number of cells in that row or column

VALIGNVALIGN attribute attribute– toptop, , middlemiddle, , bottombottom and and baselinebaseline– Default is Default is middlemiddle

1. Small simple table1. Small simple table

1<HTML>

2

3

4

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>

1.11.1 COLGROUPCOLGROUP element element

1.21.2 COLCOL element element

1.31.3 ROWSPANROWSPAN and and COLSPANCOLSPAN attributesattributes

1.41.4 BGCOLORBGCOLOR attribute attribute

1.5 1.5 WIDTHWIDTH attribute attribute

1.61.6 VALIGNVALIGN attribute attribute

30<BR><BR>3132<TABLE BORDER = "1" ALIGN = "center">3334 <CAPTION>Here is a more complex sample table.</CAPTION>3536 37 38 39 <COLGROUP>40 <COL ALIGN = "right">41 <COL SPAN = "4" ALIGN = "center">42 </COLGROUP>4344 <THEAD>4546 47 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>

61 <TH>Indigenous region</TH>

62 <TH>Spits?</TH>

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>

A complex table with formatting A complex table with formatting and colorand color

10.6 Basic HTML Forms10.6 Basic HTML Forms

FormsForms – Collect information from people viewing your siteCollect information from people viewing your site

FORMFORM element element– METHODMETHOD attribute indicates the way the attribute indicates the way the Web serverWeb server will will

organize and send you form outputorganize and send you form outputWeb serverWeb server: machine that processes browser requests: machine that processes browser requestsMETHOD = “post”METHOD = “post” in a form that causes changes to server data in a form that causes changes to server dataMETHOD = “get”METHOD = “get” in a form that does not cause any changes in in a form that does not cause any changes in server dataserver data

– Form data sent to server as an Form data sent to server as an environment variableenvironment variableProcessed by scriptsProcessed by scripts

– ACTIONACTION attribute attribute Path to a script (a CGI script written in Perl, C or other languages)Path to a script (a CGI script written in Perl, C or other languages)

10.6 Basic HTML Forms10.6 Basic HTML FormsINPUTINPUT element element– Attributes:Attributes:

TYPETYPE (required) (required)– Hidden inputs always have Hidden inputs always have TYPE = “hidden”TYPE = “hidden”– Defines the usage of the Defines the usage of the INPUTINPUT element element

TYPE = “text”TYPE = “text” inserts a one-line text box inserts a one-line text box

NAMENAME provides a unique identification for provides a unique identification for INPUTINPUT elementelementVALUEVALUE indicates the value that the indicates the value that the INPUTINPUT element element sends to the server upon submissionsends to the server upon submissionSIZESIZE

– For For TYPE = “text”TYPE = “text”, specifies the width of the text , specifies the width of the text input, measured in charactersinput, measured in characters

MAXLENGTHMAXLENGTH– For For TYPE = “text”TYPE = “text”, specifies the maximum number of , specifies the maximum number of

characters that the text input will acceptcharacters that the text input will accept

10.6 Basic HTML Forms10.6 Basic HTML FormsINPUTINPUT element (cont.) element (cont.)– Include textual identifier adjacent to Include textual identifier adjacent to INPUTINPUT

elementelement– 2 types of 2 types of INPUTINPUT elements that should be elements that should be

inserted into every form:inserted into every form:TYPE = “submit”TYPE = “submit” inserts a button that inserts a button that submits data to the serversubmits data to the server– VALUEVALUE attribute changes the text displayed on the attribute changes the text displayed on the

button (default is “button (default is “SubmitSubmit”)”)

TYPE = “reset”TYPE = “reset” inserts a button that clears inserts a button that clears all entries the user entered into the formall entries the user entered into the form– VALUEVALUE attribute changes the text displayed on the attribute changes the text displayed on the

button (default is “button (default is “ResetReset”)”)

1.1.FORM elementFORM element

1.11.1 Specify METHOD Specify METHOD attributeattribute

1.21.2 Hidden input elementsHidden input elements

1<HTML>

2

3

4

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

16

17

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

1.31.3 Text box Text box INPUTINPUT element element

1.41.4 “submit”“submit” and and “reset”“reset” INPUT TYPEINPUT TYPEss

2. 2. Page rendered by Page rendered by browserbrowser

28<P><STRONG>Name:</STRONG>

29<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>

30

31

32

33<INPUT TYPE = "submit" VALUE = "Submit Your Entries">

34<INPUT TYPE = "reset" VALUE = "Clear Your Entries">

35</FORM>

36

37</BODY>

38</HTML>

10.7 More Complex HTML 10.7 More Complex HTML FormsForms

TEXTAREATEXTAREA element element – Inserts a scrollable text box into Inserts a scrollable text box into FORMFORM– ROWSROWS and and COLSCOLS attributes specify the number attributes specify the number

of character rows and columnsof character rows and columns

INPUTINPUT element element– TYPE = “password”TYPE = “password” – Inserts a text box where data displayed as Inserts a text box where data displayed as

asterisksasterisksActual data submitted to serverActual data submitted to server

10.7 More Complex HTML 10.7 More Complex HTML FormsForms

INPUTINPUT element (cont.) element (cont.)– TYPE = “checkbox”TYPE = “checkbox” creates a checkbox creates a checkbox

Used individually or in groupsUsed individually or in groups

Each checkbox in a group should have same Each checkbox in a group should have same NAMENAME

Make sure that the checkboxes within a group have different Make sure that the checkboxes within a group have different VALUEVALUE attribute values attribute values

– Otherwise, browser will cannot distinguish between themOtherwise, browser will cannot distinguish between them

CHECKEDCHECKED attribute checks boxes initially attribute checks boxes initially

– TYPE = “radio”TYPE = “radio”Radio buttons similar in function and usage to checkboxesRadio buttons similar in function and usage to checkboxes

Only one radio button in a group can be selectedOnly one radio button in a group can be selected

CHECKEDCHECKED attribute indicates which radio button is selected initially attribute indicates which radio button is selected initially

10.7 More Complex Forms10.7 More Complex Forms

SELECTSELECT element element– Places a selectable list of items inside Places a selectable list of items inside FORMFORM

Include Include NAMENAME attribute attribute

– Add an item to list Add an item to list Insert an Insert an OPTIONOPTION element in the element in the <SELECT><SELECT>……</SELECT></SELECT> tagstags

Closing Closing OPTIONOPTION tag optional tag optional

– SELECTEDSELECTED attribute applies a default selection to list attribute applies a default selection to list– Change the number of list options visibleChange the number of list options visible

Including the Including the SIZE = “SIZE = “xx”” attribute inside the attribute inside the <SELECT><SELECT> tag tag

xx number of options visible number of options visible

1.11.1 TEXTAREA elementTEXTAREA element

1<HTML>23456<HEAD>7<TITLE>Internet and WWW How to Program - Forms</TITLE>8</HEAD>910<BODY>11<H2>Feedback Form</H2>1213<P>Please fill out this form to help us improve our site.</P>1415<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail">1617<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"> 2324<P><STRONG>Name: </STRONG>25<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>262728<P><STRONG>Comments:</STRONG> 29<TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA>30</P>

1.21.2 “password” TYPE“password” TYPE

1.31.3 “checkbox” TYPE“checkbox” TYPE

1.41.4 Checkboxes in same Checkboxes in same group must have same group must have same

NAMENAME, but different , but different VALUEVALUE attributesattributes

31

32

33

34<P><STRONG>Email Address:</STRONG>

35<INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>

36

37

38<P><STRONG>Things you liked:</STRONG><BR>

39

40Site design

41<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Design">

42Links

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>

Form including textareas, Form including textareas, password boxes and password boxes and

checkboxescheckboxes

1<HTML>23456<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>

30

1.11.1 TYPE = “radio” TYPE = “radio” creates a radio buttoncreates a radio button

1.21.2 Only one radio button in Only one radio button in a group can be selecteda group can be selected

1.31.3 CHECKEDCHECKED attribute attribute specifies which radio button specifies which radio button

is selected by defaultis selected by default

31<P><STRONG>Email Address:</STRONG>

32<INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>

33

34<P><STRONG>Things you liked:</STRONG><BR>

35

36Site design

37<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Design">

38Links

39<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Links">

40Ease of use

41<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Ease">

42Images

43<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Images">

44Source code

45<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Code">

46</P>

47

48

49

50

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

1.41.4 SELECTSELECT element element

1.51.5 Create menu items with Create menu items with OPTIONOPTION elements elements

1.61.6 SELECTEDSELECTED attribute attribute specifies which option is specifies which option is

displayed by defaultdisplayed by default

59Deitel.com Web site 60<INPUT NAME = "how get to site" TYPE = "radio" 61 VALUE = "deitel.com">62Reference in a book 63<INPUT NAME = "how get to site" TYPE = "radio" 64 VALUE = "book">65Other 66<INPUT NAME = "how get to site" TYPE = "radio" 67 VALUE = "other">68</P>69707172<P><STRONG>Rate our site (1-10):</STRONG> 73<SELECT NAME = "rating">74<OPTION SELECTED>Amazing:-)75<OPTION>1076<OPTION>977<OPTION>878<OPTION>779<OPTION>680<OPTION>581<OPTION>482<OPTION>383<OPTION>284<OPTION>185<OPTION>The Pits:-(86</SELECT></P>8788<INPUT TYPE = "submit" VALUE = "Submit Your Entries"> 89<INPUT TYPE = "reset" VALUE = "Clear Your Entries">90</FORM>92</BODY>93</HTML>

HTML form including radio HTML form including radio buttons and pulldown listsbuttons and pulldown lists

10.8 Internal Linking10.8 Internal Linking

Internal linkingInternal linking – Assign location name to individual point in an HTML Assign location name to individual point in an HTML

filefile– Location name can then be added to the page’s URLLocation name can then be added to the page’s URL

Link to specific point on the pageLink to specific point on the page

– Location marked by including a Location marked by including a NAMENAME attribute in an attribute in an A A (anchor) element(anchor) element

Ex. Ex. <A NAME = “features”></A><A NAME = “features”></A> in in list.htmllist.html

– URL of location URL of location Format: Format: page.html#namepage.html#name

Ex. Ex. list.html#featureslist.html#features

1.11.1 Create an internal link Create an internal link using the using the NAMENAME attribute in attribute in

an an AA element element

1 <HTML>

2

3 

4 

5

6 <HEAD>

7 <TITLE>Internet and WWW How to Program - List</TITLE>

8 </HEAD>

9

10 <BODY>

11

12 <CENTER>

13 

14 <A NAME = "features"></A>

15 <H2><U>The Best Features of the Internet</U></H2>

16

17 

18 <H3><A HREF = "#ceos">Go to <EM>Favorite CEO's</EM></A></H3>

19 </CENTER>

20

21 <UL>

22 <LI>You can meet new people from countries around the world.

23 <LI>You have access to new media as it becomes public:

24 <UL>

25 <LI>New games

26 <LI>New applications

27 <UL>

28 <LI>For Business

29 <LI>For Pleasure

30 </UL>

1.21.2 Access internal link Access internal link using using HREF = HREF = “#features”“#features”

31 <LI>Around the Clock news32 <LI>Search Engines33 <LI>Shopping34 <LI>Programming 35 <UL>36 <LI>HTML37 <LI>Java38 <LI>Dynamic HTML39 <LI>Scripts40 <LI>New languages41 </UL>42 </UL>43 <LI>Links44 <LI>Keeping In touch with old friends45 <LI>It is the technology of the future!46 </UL><BR><BR>4748 <A NAME = "ceos"></A> 49 <CENTER><H2>My 3 Favorite <EM>CEO's</EM></H2>50 <H3><A HREF = "#features">Go to <EM>Favorite Features</EM></A>51 </H3></CENTER>5253 <OL>54 <LI>Bill Gates55 <LI>Steve Jobs56 <LI>Michael Dell57 </OL>5859 </BODY>6061 </HTML>

Using internal hyperlinks to Using internal hyperlinks to make your page more make your page more

navigablenavigable

10.9 Creating and Using Image 10.9 Creating and Using Image MapsMaps

Image mapsImage maps – Designate certain sections of an image as Designate certain sections of an image as hotspotshotspots – Use hotspots as anchors for linkingUse hotspots as anchors for linking– All elements of image map inside All elements of image map inside <MAP><MAP>……</MAP></MAP> tags tags– <MAP><MAP> tag requires tag requires NAMENAME attribute attribute

Ex. Ex. <MAP NAME = “picture”><MAP NAME = “picture”>

Hotspots designated with Hotspots designated with AREAAREA element element– AREAAREA attributes: attributes:

HREFHREF sets the target for the link on that spot sets the target for the link on that spot

SHAPESHAPE and and COORDSCOORDS set the characteristics of the set the characteristics of the AREAAREA

ALTALT provides alternate textual description provides alternate textual description


AREAAREA element (continued) element (continued)– SHAPE = “rect”SHAPE = “rect”

Causes rectangular hotspot to be drawn around the Causes rectangular hotspot to be drawn around the coordinates given in the coordinates given in the COORDSCOORDS attribute attribute

COORDSCOORDS - pairs of numbers corresponding to the x and y - pairs of numbers corresponding to the x and y axesaxes

– x axis extends horizontally from upper-left cornerx axis extends horizontally from upper-left corner– y axis extends vertically from upper-left cornery axis extends vertically from upper-left corner

Ex. Ex. <AREA HREF = “form.html” SHAPE = “rect” <AREA HREF = “form.html” SHAPE = “rect” COORDS = “3, 122, 73, 143” ALT = “Go to the COORDS = “3, 122, 73, 143” ALT = “Go to the form”>form”>

– Rectangular hotspot with upper-left corner of rectangle at (3, 122) Rectangular hotspot with upper-left corner of rectangle at (3, 122) and lower-right corner at (73, 143)and lower-right corner at (73, 143)


AREAAREA element (continued) element (continued)– SHAPE = “poly”SHAPE = “poly”

Causes a hotspot to be created around specified coordinatesCauses a hotspot to be created around specified coordinates

Ex. Ex. <AREA HREF = “mailto:[email protected]” SHAPE <AREA HREF = “mailto:[email protected]” SHAPE = “poly” COORDS = “28, 22, 24, 68, 46, 114, 84, = “poly” COORDS = “28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13” ALT = “Email the 111, 99, 56, 86, 13” ALT = “Email the Deitels”>Deitels”>

– SHAPE = “circle”SHAPE = “circle” Creates a circular hotspotCreates a circular hotspot

Coordinates of center of circle and radius of circle, in pixelsCoordinates of center of circle and radius of circle, in pixels

Ex. Ex. <AREA HREF = “mailto:[email protected]” SHAPE <AREA HREF = “mailto:[email protected]” SHAPE = “circle” COORDS = “146, 66, 42” ALT = “Email = “circle” COORDS = “146, 66, 42” ALT = “Email the Deitels”>the Deitels”>


To use the image map with an To use the image map with an IMGIMG element element– Insert the Insert the USEMAP = “#USEMAP = “#namename”” attribute into attribute into

the the IMGIMG element element– namename - value of the - value of the NAMENAME attribute in the attribute in the MAPMAP

elementelement– Ex. Ex. <IMG SRC = "deitel.gif" WIDTH = "200" <IMG SRC = "deitel.gif" WIDTH = "200" HEIGHT="144" BORDER="1" ALT = "Harvey and HEIGHT="144" BORDER="1" ALT = "Harvey and Paul Deitel" USEMAP = "#picture">Paul Deitel" USEMAP = "#picture">

1.1. MAPMAP element element

1.1 1.1 NAMENAME attribute attribute

1.2 1.2 SHAPE = “rect”SHAPE = “rect”

1.3 1.3 “rect”COORDS“rect”COORDS

1.4 1.4 SHAPE = “poly”SHAPE = “poly”

1.5 1.5 “poly” COORDS“poly” COORDS

1<HTML>

2

3

4

5

6<HEAD>

7<TITLE>Internet and WWW How to Program - List</TITLE>

8</HEAD>

9

10<BODY BACKGROUND = "bckgrnd.gif">

11

12<CENTER>

13

14

15<MAP NAME = "picture">

16

17

18

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

29

30<AREA HREF = "mailto:[email protected]" SHAPE = "poly"

1.61.6 SHAPE = “circle”SHAPE = “circle”

1.71.7 Use image map with Use image map with IMGIMG element via element via USEMAPUSEMAP

attributeattribute

31 COORDS = "28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13"

32 ALT = "Email the Deitels">

33

34

35

36<AREA HREF = "mailto:[email protected]" SHAPE = "circle"

37 COORDS = "146, 66, 42" ALT = "Email the Deitels">

38</MAP>

39

40

41

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>

A picture with links anchored to A picture with links anchored to an image mapan image map

10.10 10.10 <META><META> Tags Tags

Search engines Search engines – Catalog sites by following links from page to pageCatalog sites by following links from page to page– Save identification and classification infoSave identification and classification info

<!DOCTYPE HTML PUBLIC <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 "-//W3C//DTD HTML 4.0 Transitional//EN">Transitional//EN">

– Tells browser that HTML conforms to a Tells browser that HTML conforms to a TransitionalTransitional subset of HTML version 4.0subset of HTML version 4.0

METAMETA tag tag– Main HTML element that interacts with search enginesMain HTML element that interacts with search engines

10.10 10.10 <META><META> Tags TagsMETAMETA tags tags – Contain two attributes that should always be used:Contain two attributes that should always be used:– NAMENAME identifies type of identifies type of METAMETA tag tag– CONTENTCONTENT provides info the search engine will provides info the search engine will

catalog about your sitecatalog about your siteCONTENTCONTENT of a of a METAMETA tag with tag with NAME = “keywords”NAME = “keywords”

– Provides search engines with a list of words that describe key Provides search engines with a list of words that describe key aspects of your siteaspects of your site

CONTENTCONTENT of a of a METAMETA tag with tag with NAME = “description”NAME = “description”– Should be 3 to 4 linesShould be 3 to 4 lines– Used by search engines to catalog and display your siteUsed by search engines to catalog and display your site

METAMETA elements elements – Not visible to users of the site Not visible to users of the site – Should be placed inside header sectionShould be placed inside header section

1.1. METAMETA tags tags

1.11.1 NAME = “keywords”NAME = “keywords”

1.21.2 NAME = NAME = “description”“description”

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4

5

6

7<HEAD>

8

9

10<META NAME = "keywords" CONTENT = "Webpage, design, HTML,

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

31and we enjoy the features that have been added recently.</FONT>

32

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>

10.11 10.11 <FRAMESET><FRAMESET> Tag Tag

FramesFrames – Display more than one HTML file at a timeDisplay more than one HTML file at a time– If used properly, frames make your site more readable and usableIf used properly, frames make your site more readable and usable

<!DOCTYPE><!DOCTYPE> tag tag – Uses Uses FramesetFrameset instead of instead of TransitionalTransitional – Tell the browser that you are using framesTell the browser that you are using frames

<FRAMESET><FRAMESET> tags tags – Tell the browser the page contains framesTell the browser the page contains frames– Details for frames contained within Details for frames contained within <FRAMESET><FRAMESET>……</FRAMESET></FRAMESET>

tagstags– COLSCOLS or or ROWSROWS attribute gives the width or height of each frame attribute gives the width or height of each frame

In pixels or a percentageIn pixels or a percentage


FRAMEFRAME elements elements – Specify what files will make up framesetSpecify what files will make up frameset– FRAMEFRAME attributes: attributes:

NAMENAME - identifies specific frame, enabling hyperlinks to load in their - identifies specific frame, enabling hyperlinks to load in their intended frameintended frame

– TARGETTARGET attribute of attribute of AA element element– Ex. Ex. <A HREF = “links.html” TARGET = “main”><A HREF = “links.html” TARGET = “main”>– TARGET = “_blank”TARGET = “_blank” loads page in a new blank browser window loads page in a new blank browser window– TARGET = “_self”TARGET = “_self” loads page in the same window as anchor element loads page in the same window as anchor element– TARGET = “_parent”TARGET = “_parent” loads page in the parent loads page in the parent FRAMESETFRAMESET– TARGET = _top”TARGET = _top” loads page in the full browser window loads page in the full browser window

– SRCSRC Gives the URL of the page that will be displayed in the specified frameGives the URL of the page that will be displayed in the specified frame


Not all browsers support framesNot all browsers support frames– Use the Use the NOFRAMESNOFRAMES element inside the element inside the FRAMESETFRAMESET

– Direct users to a non-framed versionDirect users to a non-framed version– Provide links for downloading a frames-Provide links for downloading a frames-

enabled browserenabled browser

Use of framesUse of frames– Do not use frames if you can accomplish same Do not use frames if you can accomplish same

with tables or other, simpler HTML formattingwith tables or other, simpler HTML formatting

1.11.1 <!DOCTYPE><!DOCTYPE> declares declares FramesetFrameset

1.21.2 FRAMESETFRAMESET tag gives the tag gives the dimensions of your frame dimensions of your frame

using using COLSCOLS or or ROWSROWS

1.31.3 COLS = “110,*” COLS = “110,*” indicates that the first frame indicates that the first frame extends 110 pixels from left extends 110 pixels from left side and the second frame side and the second frame

fills the remainder of the fills the remainder of the screenscreen

1.41.4 FRAMEFRAME elements elements

1.51.5 NOFRAMESNOFRAMES element element

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

2<HTML>

3

4

5

6

7<HEAD>




11




15

16<TITLE>Internet and WWW How to Program - Main</TITLE>

17</HEAD>

18

19

20<FRAMESET COLS = "110,*">

21

22 

23 

24 <FRAME NAME = "nav" SRC = "nav.html">

25 <FRAME NAME = "main" SRC = "main.html">

26

27 <NOFRAMES>

28 <P>This page uses frames, but your browser does not support

29 them.</P>

30 <P>Get Internet Explorer 5 at the


31 <A HREF = "http://www.microsoft.com/">

32 Microsoft Web Site</A></P>

33 </NOFRAMES>

34

35 </FRAMESET>

36 </HTML>

Web Site with two framesWeb Site with two frames

10.12 Nested 10.12 Nested <FRAMESET><FRAMESET> TagsTags

FRAMEFRAME element element– SCROLLINGSCROLLING attribute attribute

Set to Set to “no”“no” to prevent scroll bars to prevent scroll bars

– NORESIZENORESIZE attribute prevents user from resizing the attribute prevents user from resizing the frameframe

Nesting framesNesting frames– Include the correct number of Include the correct number of FRAMEFRAME elements inside elements inside FRAMESETFRAMESET

– Using nested Using nested FRAMESETFRAMESET elements elementsIndent every level of Indent every level of FRAMEFRAME tag tag

Makes page clearer and easier to debugMakes page clearer and easier to debug

1.1. Nested FRAMESET Nested FRAMESET elementselements

1.11.1 Indent each level of Indent each level of FRAMESET and FRAME FRAMESET and FRAME

elementselements

1.21.2 Provide NOFRAMES Provide NOFRAMES elementelement

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

2<HTML>

3

4

5

6

7<HEAD>

8




12




16

17<FRAMESET COLS = "110,*">

18 <FRAME NAME = "nav" SCROLLING = "no" SRC = "nav.html">

19

20 

21 

22 <FRAMESET ROWS = "175,*">

23 <FRAME NAME = "picture" SRC = "picture.html" NORESIZE>

24 <FRAME NAME = "main" SRC = "main.html">

25 </FRAMESET>

26

27 <NOFRAMES>

28 <P>This page uses frames, but your browser doesn't

29 support them.</P>


30 <P>Get Internet Explorer 5 at the31 <A HREF = "http://www.microsoft.com/">Microsoft 32 Web-Site</A></P>3334 </NOFRAMES>3536 </FRAMESET>37 </HTML>

Framed Web site with a nested Framed Web site with a nested framesetframeset

chapter 10 – intermediate html 4 outline 10.1introduction 10.2unordered lists 10.3nested and...

Documents

new list

list elementnesting

list items10

listsnested list

sequence type

intermediate html tables

bullet type

basic html forms10