HTML
2
World Wide Web
WWW is a service internet
The total set of interlinked hypertext documents residing on Web servers all around the world.
Documents on the WWW, called pages or Web pages
WWW is based on HTML
Introduction
3
A network of computer networks which operates world-wide using a common set of communications protocols.
What is Internet?
Web Browser
is a computer program which is used to view a Web page.
Browser implements the following functions:Search and access to a Web-server;Loading, formatting, and displaying HTML-document;Hyperlink detection and moving from one document to another;Standard tools support.
Hypertext Mark-up Language
(HTML)
HTML is the standard mark-up language used to create and organize documents on the World Wide Web;HTML lets users to format text, add graphics, sound, video, and save it all in a Text-Only or ASCII format that any computer can read.
HTML Features
Hypertext, that allows to create a link in a Web page that leads to any other pages on the Web. Hence information on the Web can be accessed from many different locations
Universality means that any computer can read a Web page regardless of platforms or operating systems
HTML Files
Must be saved as text files with extension html or htm. The extension tells the browser that file is to be interpreted according to HTML standardsName your files to describe their functionalityFile name of your home page should be index.html
Developing HTML documents
Bottom-up approach: write HTML code in a text editor, and then view the Web page in a browserSteps:
Open a text editorEnter text and tagsSave file as xxx.htmlOpen the file in a browser to view the Web pageRepeat above steps if you need to debug the page
Top-down approach: build the Web page elements using an HTML editor, and then view the HTML code laterSteps:
Open an HTML editorAdd HTML elements using the editor’s GUISave the automatically generated HTML code in a file as xxx.htmlExit the editor and view the page
HTML Building BlocksHTML tags are command words written between symbols < >, that indicate how browser should display the text.Tags may have opening and closing versionText is placed in a container (or HTML element), which starts with opening tag and ends with closing.
<B> Bold text </B>
Building Blocks
HTML Rules
Case insensitiveSpacing:Browsers ignore extra spaces
Block-level tags include automatic line brakes
Examples: P, H1, UL, TABLE
Tag AttributesAttributes offer a variety of options Attributes are entered between keyword and final symbol >A single tag may have a few attributesAttributes are placed one after the other in any order<IMG SRC=“Image.bmp” HSPACE=5>
Attribute Values
Attributes can accept the values of particular typesValues of attributes should be enclosed in straight quotation marks“” may be omitted if the value contains only letters, digits, hyphen (-), and period (.)
Nesting Tags
Hierarchy – tags that affect entire paragraph may contain tags affecting individual words or letters
Order – the current closing tag should correspond to the last unclosed opening tag
Nesting Tags (example)
Correct:<H1> Information <I>System</I></H1>
Incorrect:<H1> Information <I>System</H1></I>
HTML Document
<HTML><HEAD> …
</HEAD><BODY>
…</BODY>
</HTML>
Starting Web Page
The HEAD Section
<HEAD> - beginning of the head section
<TITLE> - page description</TITLE> - end of title<!-- Script or comment may be placed
here --></HEAD> - end of the head section
The BODY Section
<BODY>
{Text displayed by browser}
</BODY>
18
HTML Document
<HTML><HEAD><TITLE>My First Page</TITLE></HEAD><BODY>Welcome to NU's Students!</BODY></HTML>
Example HTML Document
Result of <TITLE> tag
Result of <BODY> tag
Commonly Used HTML Tags
<H1> … </H1> Heading. <H2> … </H2> Heading.<H3> … </H3> Heading.<BLOCKQUOTE> … </ BLOCKQUOTE
>Indents block of text
one tab.
Text Formatting
Commonly Used HTML Tags (continued…)
<P> … </P> : Paragraph.<B> … </B> : Bold <I> … </I> : Italic <U> … </U> : Underline<EM> … </EM> : Emphasize (logical – exact
effect depends on browser)
<BR /> : Line break<HR /> : Horizontal Rule (line)
21
Creating Superscripts & Subscript
<SUB>…</SUB> : Subscript<SUP>…</SUP> : Superscript
Example:H<SUB>2</SUB>O :H2O
10<SUP>th</SUP> :10th
22
Formatting Text With <FONT>
FONT elementAdd color and formatting to textFONT attributes:
COLOR Preset or hex color codeValue in quotation marksNote: you can set font color for whole document using TEXT attribute in BODY element
23
Formatting Text With <FONT>
SIZETo make text larger, set SIZE = “+x”To make text smaller, set SIZE = “-x”x is the number of font point sizesN=3 corresponds to default value
Value of n
1 2 3 4 5 6 7
Size in pt. 8 10 12 14 18 24 36
24
FACEFont of the text you are formattingBe careful to use common fonts like Times, Arial, Courier and HelveticaBrowser will display default if unable to display specified font
Example<FONT COLOR = “red” SIZE = “+1” FACE = “Arial”>…</FONT>
Formatting Text With <FONT>
Ordered List<OL TYPE=x START=n> Beginning
of an Ordered List<LI> … </LI> A list element<LI> … </LI> Another list element
</OL> End of the Ordered List
TYPE, START are optional X=A, a, I, i, 1 ( X=1 is default value)n – initial value for list items
Unordered List<UL TYPE=shape > Beginning an
Unordered List<LI> … </LI> A list element<LI> … </LI> Another list element
</UL> End of the Unordered List
TYPE is optional, shape represents the kind of bullet, like circle, square…
27
Nested ListsNested list
Contained in another list elementNesting the new list inside the original
Indents list one level and changes the bullet type to reflect the nesting
Browsers Insert a line of whitespace after every closed list
Indent each level of a nested list Makes the code easier to edit and debug
Uniform Resource Locator (URL)
An address for a resource on the Internet. URL can be
Absolute – contains all parts of URL;Relative – presents path and file name relatively current file.
“http://www.norton-u.com/itdepartment/index.html”
Scheme Server name Part File name
Schemehttp – Hypertext Transfer Protocol to access Web-pagesftp – File Transfer Protocol to download the file from the netmailto – to send electronic mailFile – to access file on a local hard disk (File scheme uses ///).and others…
Absolute URL (examples)
http://www.norton.com/dir/hpage.html
ftp://ftp.site.com/common/prog.exe
mailto:[email protected]
file:///Cdisk/ITEC1010/COL.html
Relative URL (examples)A file from the same folder as current file:
“file.htm”A file from a subfolder of current folder:
“images/picture.gif”A file from another folder at the same hierarchical level:
“../info/data.htm”
External Link
is a reference to another page
<A HREF=“URL” > Label text </A>
Label text will be underlined or highlighted, click upon it will bring visitors to the page with given URL
Internal linkIs a reference to a particular part of the same page.Click upon the internal link will bring a visitor to the particular part of the same page.To create an internal link:
Create an anchorAdd a hyperlink to the anchor
Creating AnchorsPlace the cursor in the desirable part of a page, where the link should bring visitorsCreate an anchor
<A NAME=“anchor name”>Label text </A>
Label text is a text or image that should be referenced.
Link to a specific anchor
Within a document <A HREF=“#anchor name”> Label
text </A>
To a separate document
<A HREF=“URL#anchor name”>Label text </A>
Link to E-mail address<A
HREF=“mailto:[email protected]”>Say HELLO!!!</A>Click on hypertext “Say HELLO!!!” will
invoke an application such as MS Outlook to send E-mail to the address
Images
<IMG SRC=“image_URL”>SRC – source of the image (file
address)Another attributes:
BORDER=n, n-thickness of the border in pixelsALT – alternative textWIDTH – width of an image in pixels
Images (continued…)HEIGHT – height of an image in pixelsALIGN – position on a page
<IMG SRC=“images/pic1.bmp” WIDTH=30
HEIGHT=30 ALT=“Digimon” ALIGN=“left” >
Tables
A table is a matrix formed by the intersection of a number of horizontal rows and vertical columns.
Column 1 Column 2 Column 3
Row 1 Row 2 Row 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Tables (continued…)
Container <TABLE> … </TABLE>
Attributes:BORDER= n – the border thickness
in pixelsWIDTH=x – width of the table or a
cell within the table in pixels (or %)
Tables (continued…)A table is formed row by row. To define a
row
<TR>…</TR> is used
Within a row table cells with data is determined by
<TD>…</TD> or with headers by
<TH>…</TH>
Simple Table (example)<HTML><HEAD>
<TITLE> Example of table </TITLE></HEAD><BODY><TABLE>
<TR> <TH>Month</TH> <TH>Quantity</TH> </TR><TR> <TD>January</TD> <TD>130</TD></TR><TR> <TD>February</TD> <TD>125</TD> </TR><TR> <TD>March</TD> <TD>135</TD> </TR>
</TABLE></BODY></HTML>
Tables (more complicated)To span a cell across a few columns attribute
COLSPAN=n, where n - number of columns, is used
To span a cell across a few rows attribute
ROWSPAN=n, where n - number of rows, is used
Table (example)<TABLE BORDER=2>
<TR><TH>
Quarter</TH><TH>Month</TH><TH>Quantity</TH></TR><TR> <TD ROWSPAN=3> I </TD> <TD>January</TD> <TD>130</TD> </TR><TR> <TD>February</TD> <TD>125</TD> </TR><TR>
<TD>March</TD><TD>135</TD></TR>
Table (examplecontinued…)
<TR> <TD ROWSPAN=3> II </TD> <TD>April</TD> <TD>130</TD></TR><TR> <TD>May</TD><TD>125</TD> </TR><TR> <TD>June</TD><TD>135</TD> </TR><TR> <TD COLSPAN=2> Total </TD> <TD>780</TD></TR>
</TABLE>
Cell AttributesFONT – establishes the font of a cellALIGN – determines horizontal alignment of cell content, accepts values:
“left”, “center”, or “right”VALIGN - determines vertical alignment of cell content, accepts values:
“top”, “middle”, or “bottom”
Purposes to use tablesTo present tabular data;To create multicolumn textTo create captions for imagesTo create side bars
Cells may contain various HTML elements:
Images, Hyperlinks, Text, Objects, even Tables
48
Frame
A frame is an independent scrolling region, or window, of a Web page. Every Web page can be divided into many individual frames, which can even be nested within other frames
Each frame can contain a different document.
49
Create FramesetTo create a frameset with three horizontal rows all in the same column
<frameset rows=“a,b,*”><frame src=“URL” name=“name”><frame src=“URL” name=“name”><frame src=“URL” name=“name”>
</frameset
Note: The BODY tag is not used at all in frameset pages
50
Create Frameset (continued…)
Frameset Attributerows=“a,b,*” where a and b are the height of the first & second rows and asterisk is the height of the third row. The value may either be a percentage or exact number of pixels
Frame Attributename=“name” where name is word that identifies this particular frame’s use.
src=“URL” where path of url for the page that will be displayed in the this frame.
51
To create frames in columns<frameset cols=“a,b,*”>
<frame src=“URL” name=“name”><frame src=“URL” name=“name”><frame src=“URL” name=“name”>
</frameset>
Frameset Attributecols=“a,b,*” where a and b are the width of the first & second rows and asterisk is the width of the third row. The value may either be a percentage or exact number of pixels
Creating frame in column
52
Creating frames in Rows and Columns
To create a frameset with both rows and columns<frameset cols=“a,b” rows=“a,b”>
<frame src=“URL” name=“name”> <frame src=“URL” name=“name”> <frame src=“URL” name=“name”> <frame src=“URL” name=“name”>
</frameset>
Note: Defining rows and columns in this way limits you to the same number of frames in each row or column
53
Combining Framesets
To combine Framesets<frameset rows=“a,b”>
<frame src=“url” name=“name”><frameset cols=“a,b”>
<frame src=“url” name=“name”><frame src=“url” name=“name”>
</frameset>
</frameset>
54
Adjusting a Frame’s Margins
To adjust a frame’s marginsIn the desired FRAME tag, Type MARGINWIDTH=W where w is the desired amount of space, in pixel, between the left and the right edges of the frame.
Type MARGINHEIGHT=H where H is the desired amount of space, in pixel, between the top and the bottom edges of the frame.
55
Showing or Hiding Scroll Bars
In the FRAME tag of the particular frame, type scrolling=“yes, no, auto” Scrolling value
yes for showing scroll barno for hiding scroll barauto for scroll bars to appear only when necessary.
56
Adjusting the color of the Borders
To adjust the color of all the borders in the framesets
Inside the topmost FRAMESET tag, type BORDERCOLOR=color
57
Adjusting Frame Borders
To adjust amount of space between frames
Inside the topmost FRAMESET tag, type BORDER=n where n is the width of the space between frames in pixels
To show or hide bordersInside the FRAMESET or FRAME, type FRAMEBORDER=“1, yes , 0, no”
58
Keeping Visitors from Resizing Frames
To keep visitors from resizing your frames, type NORESIZE in the FRAME tag for desire frame
59
Creating Links Between Frames
To target a link to a particular frameMake sure the target frame has a nameOn the page where the link appear, type <a href=“Hello.htm” target=“name”>I want to say…</a>
Target=“name” where name is the reference given to the target frame within the frame tag.
60
Creating Links Between Frames (continued…)
To target a link to a special spotType < a href=“detail.htm”Type target=“_blank” to open the link in the new window, blank windowOr type target=“_self” to open the link in the same frame that contains the linkOr type target=“_top” to open the link in the current browser window.Or type target=“_parent” to open the link in the frame that contains the current frameset.</a>
61
Creating Links Between Frames (continued…)
To change the default targetIn the HEAD section of the page that contains the links, <base target=“name” , where name is the word that identifies the frame in which you want the links to appear, by default >
62
Creating Alternatives to Frames
To create alternatives to framesType <noframe> before the last </frameset> tagCreate the content that you want to appear if the frames do not</noframe>
63
Creating an Inline Frame
To create an inline frameIn the container page, type <iframe src=“frame.url” name=“name” width=“x” height=“y” align=“direction”>Type the text that should appear if the browser doesn’t support</iframe>
64
Basic HTML FormsForms
Collect information from people viewing your site
FORM elementMETHOD attribute
Form data can be sent to the server in two waysThe get method, which sends data as part of the URLThe post method, which hides data in the HTTP headers
ACTION attribute The action attribute indicates which page on the server will receive the information from this form when a user presses the submit button.
65
Basic HTML Forms (Cont)ID Attribute
The id attribute allows you to provide a unique identifier for the <form> element, just as it does for other elements.
Name AttributeAs with most other attributes, the name
attribute is the predecessor to the id attribute.
66
Form ControlsThis section covers the different types of form controls that you can use to collect data from a visitor to your site. You will see:
Text input controlsButtonsCheckboxes and radio buttonsSelect boxes (sometimes referred to as drop-down menus) and list boxesFile select boxesHidden controls
67
Text input controls
There are actually three types of text input used on forms:
Single-line text input controlsPassword input controls:Multi-line text input controls:
68
Single-line text input controls
Single-line text input controls are created using an <input> element whose type attribute has a value of text
Attribute Purpose
type Indicates the type of input control you want to create.
name Used to give the name part of the name/value pair that is sent to a server.
value Provides an initial value for the text input control that the user will see when the form loads.
size Allows you to specify the width of the text-input control.
maxlength Allows you to specify the maximum number of characters a user can enter into the text box.
69
Password Input ControlsPassword input controls are created almost identically to the single-line text input controls, except that the type attribute on the <input> element is given a value of password.
Example:<form action="http://www.example.com/login.asp" method="post">Username:<input type="text" name="txtUsername" value="" size="20"
maxlength="20"><br>Password:<input type="password" name="pwdPassword" value="" size="20"maxlength="20“><input type="submit" value="Submit"></form>
70
Multiple-Line Text Input Controls
Allowing a visitor to your site to enter more than one line of text, you should create a multiple-line text input control using the <textarea>…</textarea> element.
Attribute Purpose
name Used to give the name part of the name/value pair that is sent to a server.
rows it indicates the number of rows of text a <textarea> element
cols It specifies the width of the box and refers to the number of columns. One column is the average width of a character.
71
Multiple-Line Text Input Controls(Cont)
Attribute Values
Wrapallows you to Indicate howthe textshould be wrapped.
Selecting Off or Default prevents text from wrapping to the next line.
Selecting Virtual sets word wrap in the text area. When the user’s input exceeds the right boundary of the text area, text wraps to the next line.
Selecting Physical sets word wrap in the text area, as well as to the data when it is submitted for
processing.
72
Button ControlsYou can create a button in three ways:
Using an <input> element with a type attribute whose value is submit, reset, or buttonUsing an <input> element with a type attribute whose value is imageUsing a <button> element
73
Button ControlsCreating Buttons Using the <input> Element
The type attribute can take the following values:submit, which creates a button that automatically submits a formreset, which creates a button that automatically resets form controls to their initial valuesbutton, which creates a button that is used to trigger a client-side script when the user clicks that button
The name attribute provides a name for the button.The value attribute enables you to specify what the text on the button should read.
74
Button ControlsUsing Images for ButtonsCreating an image button is very similar to creating any other button, but the type attribute has a value of image
Attribute Purpose
src Specifies the source of the image file.
alt Provides alternative text for the image.
75
Button ControlsCreating Buttons Using the <button> Element
Allowing you to specify what appears on a button between an opening <button> tag and a closing </button> tag. You can include image elements between these tags.
The type attribute can take the following values:submit, which creates a button that automatically submits a formreset, which creates a button that automatically resets form controls to their initial valuesbutton, which creates a button that is used to trigger a client-side script when the user clicks that button
76
Checkbox & RadioINPUT element
TYPE = “checkbox” creates a checkboxUsed individually or in groupsEach checkbox in a group should have same NAMEMake sure that the checkboxes within a group have different VALUE attribute values
TYPE = “radio”Radio buttons similar in function and usage to checkboxesOnly one radio button in a group can be selected
77
Checkbox & Radio (Cont)Attribute Purpose
type Indicates that you want to create a checkbox or radio.
name Gives the name of the control
value The value that will be used if the checkbox is selected
checkedIndicates that when the page loads, the checkbox or radio should be selected.
sizeThis attribute indicates the size of the radio button in pixels, but this attribute does not work in IE 6 or Netscape 7.
78
Select Boxes
SELECT elementAdd an item to list
Insert an OPTION element in the <SELECT>…</SELECT> tags
Example
<select name="selColor"><option selected="selected" value="">Select
color</option><option value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option>
</select>
79
Select BoxesSELECT Element
Attribute Purpose
name This is the name for the control.
sizeThis can be used to present a scrolling list box (list box control)
multiple Allows a user to select multiple items from the menu.
OPTION Element
Attribute Purpose
valueThe value that is sent to the server if this option is selected.
selected Specifies that this option should be the initially selected value when the page loads.
80
Grouping OptionsThe <optgroup> element can carry a labellabel attribute whose value is a label for that group of options.
<form action="http://www.example.org/info.asp" method="get" name="frmInfo">Please select the product you are interested in:<br><select name="selInformation">
<optgroup label="Hardware"><option value="Desktop">Desktop computers</option><option value="Laptop">Laptop computers</option>
</optgroup><optgroup label="Peripherals">
<option value="InputDevices">Input Devices</option><option value="Storage">Storage</option>
</optgroup></select><br><br><input type="submit" value="Submit"></form>
81
File Select BoxesINPUT element
TYPE = “file” creates a file uploadNAME=“name” is the name for the controlWhen you are using a file upload box, the method attribute of the <form> element must be post.
82
Hidden ControlsYou create a hidden control using the <input> element whose type attribute has a value of hidden.hidden control must carry name and value attributes.
<form action="http://www.example.com/vote.asp" method="get" name="fromVote">
<input type="hidden" name="hidPageSentFrom" value="home page">
<input type="submit" value="Click if this is your favorite page of our
site."></form>
83
Creating Labels for Controls and the <label> Element
Use the <label> tag to define relationships between a form control, such as a text input field.Labels get associated with a form control in one of two ways:
implicitly by including the form control as contents of the label tagexplicitly by naming the ID of the target form control in the <label> tag's FOR attribute.
<form action="http://www.example.org/login.asp" method="post" name="frmLogin">
<table><tr>
<td><label for="Uname">User name</label></td><td><input type="text" id="Uname" name="txtUserName"></td>
</tr></table></form>
84
Structuring Your Forms with <fieldset> and <legend> Elements
The <fieldset> element creates a border around the group of form controls to show that they are related.
The <legend> element allows you to specify a caption for the <fieldset> element, which acts as a title for the group of form controls.
When used, the <legend> element should always be the first child of the <fieldset> element.
85
Structuring Your Forms with <fieldset> and <legend> Elements
<form action="http://www.example.org/com.asp" method="post“ name="frmComp">
<fieldset><legend>Contact Information</legend><label>First name:
<input type="text" name="txtFName“ size="20"></label><br><label>Last name:
<input type="text" name="txtLName“ size="20"></label><br><label>E-mail:
<input type="text" name="txtEmail“ size="20"></label></fieldset>
86
Tabbing OrderIf you want to control the order in which elements can gain focus you can use the tabindex attribute to give that element a number between 0 and 32767, which forms part of the tabbing order.
The following elements can carry a tabindex attribute:<a> <area> <button> <input> <object> <select> <textarea>
<form action="http://www.example.com/tabbing.asp" method="get"name="frmTabExample"><input type="checkbox" name="chkNumber" value="1" tabindex="1">
One<br><input type="checkbox" name="chkNumber" value="2" tabindex="2">
Two<br><input type="checkbox" name="chkNumber" value="3" tabindex="3">
Three<br><input type="checkbox" name="chkNumber" value="4" tabindex="4">
Four<br><input type="checkbox" name="chkNumber" value="5" tabindex="5">
Five<br><input type="submit" value="Submit"></form>
87
Access KeysThe access key is defined using the accesskey attribute. The value of this attribute is the character.
The following elements can carry an access key attribute:<a> <area> <button> <input> <label> <legend> <textarea>
<form action="http://www.example.com/tabbing.asp" method="get“ name="frmTabExample">
<input type="checkbox" name="chkNumber" tabindex="1" accesskey=“O”> One<br>
<input type="checkbox" name="chkNumber" value="2" tabindex="2“ accesskey=“T”> Two
</form>
88
Disabled and Read-OnlyThe readonly attribute prevents users from changing the value of the form controlThe disabled attribute disables the form control so that users cannot alter it.
The following table indicates which form controls work with the readonly and disabled attributes.
ElementElement readonlreadonlyy
disabledisabledd
<textarea> Yes Yes
<input type=”text”>
Yes Yes
<input type=”checkbox” >
No Yes
<input type=”radio”>
No Yes
<input type=”submit” >
No Yes
<input type=”reset”>
No Yes
<input type=”button”>
No Yes
<select> No Yes
<option> No Yes
<button> No Yes
89
Multimedia Linking to Multimedia Files
1. Type <a href="multimedia.ext">, where multimedia.ext is the location, name, and extension of the multimedia file.
2. Type the text or insert an image that the visitor will click on to activate the link.
3. Type </a> to complete the link.
Example<a href=“sovat.mp3”>Preap Sowat</a>
90
MultimediaEmbedding Windows Media
<object classid="CLSID:6BF52A52-394A-11d3-B153-
00C04F79FAA6" width="320“ height="305"><param name="URL" value="pond.wmv"><param name="autoStart" value="true"><param name=“uiMode" value=“none"> <embed width="320" height="305“
src="pond.wmv" loop="false" autostart="true”></embed></object>
91
Multimedia
Embedding Flash<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="flash1" name="flash1“ width="320" height="240"> <param name="movie" value="button1.swf" > <param name="quality" value="high" > <embed src="test.swf“ id="flash1" name="flash1“ width="320"
height="240“ quality="autohigh" bgcolor="#ffffff" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
<noembed> <img src="test.gif" alt="" height="250" width="320" ></noembed>
</embed> </object>
92
Creating and Using Image Maps
93
Creating and Using Image Maps
To use the image map with an IMG elementInsert the USEMAP = “#name” attribute into the IMG elementname - value of the NAME attribute in the MAP element
Example. <IMG SRC = "deitel.gif" WIDTH = "200" HEIGHT="144"
BORDER="1" ALT = "Harvey and Paul Deitel" USEMAP = "#picture">
<map name=“picture" id=“picture"><area shape="rect" coords="6,50,140,143"
href="rectangle.html" alt="rectangle"><area shape="circle" coords="195,100,50" href="circle.html" alt="circle"></map>
94
Creating and Using Image Maps
Image maps Designate certain sections of an image as hotspots Use hotspots as anchors for linkingAll elements of image map inside <MAP>…</MAP> tags<MAP> tag requires NAME attribute
Ex. <MAP NAME = “picture”>
Hotspots designated with AREA elementAREA attributes:HREF sets the target for the link on that spotSHAPE and COORDS set the characteristics of the AREAALT provides alternate textual description
95
Creating and Using Image Maps
AREA element (continued)SHAPE = “rect”
Causes rectangular hotspot to be drawn around the coordinates given in the COORDS attributeCOORDS - pairs of numbers corresponding to the x and y axes
x axis extends horizontally from upper-left cornery 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)
96
Creating and Using Image Maps
AREA element (continued)SHAPE = “poly”
Causes a hotspot to be created around specified coordinatesEx. <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 hotspotCoordinates of center of circle and radius of circle, in pixelsEx. <AREA HREF = “mailto:[email protected]” SHAPE = “circle” COORDS = “146, 66, 42” ALT = “Email the Deitels”>
97
Creates a scrolling text marquee
<marquee>text</marquee>Marquee attribute
align = top | middle | bottombehavior = alternate | scroll | sidebgcolor = colordirection = down \ left \ up \ rightheight = number; width = numberloop = numberscrollamount = number (Specifies the number of pixels moved each time the text scrolls)scrolldelay = number (delay in milliseconds between each movements of the scroll)
98
<META> Tags Meta data refers to data that is not part of the content of an HTML documentMeta data describes Web pages to search engines.Search engines use meta data to index and rank page hits in a given searchThe <META> tag declares meta data. It must be used in the <HEAD> section.
Example:<META NAME = “description” CONTENT = “Everything you
would want to know about using HTML”><META NAME = “keywords” CONTENT = “HTML 4.0, tags,
attributes, editors”>
99
<META> TagsMETA tags
Contain two attributes that should always be used:NAME identifies type of META tagCONTENT 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 linesUsed by search engines to catalog and display your site
Thank you for your attention!
