html. 2 world wide web www is a service internet the total set of interlinked hypertext documents...
TRANSCRIPT
![Page 1: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/1.jpg)
HTML
![Page 2: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/3.jpg)
3
A network of computer networks which operates world-wide using a common set of communications protocols.
What is Internet?
![Page 4: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/4.jpg)
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.
![Page 5: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/5.jpg)
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.
![Page 6: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/10.jpg)
HTML Rules
Case insensitiveSpacing:Browsers ignore extra spaces
Block-level tags include automatic line brakes
Examples: P, H1, UL, TABLE
![Page 11: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/11.jpg)
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>
![Page 12: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/12.jpg)
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 (.)
![Page 13: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/14.jpg)
Nesting Tags (example)
Correct:<H1> Information <I>System</I></H1>
Incorrect:<H1> Information <I>System</H1></I>
![Page 15: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/15.jpg)
HTML Document
<HTML><HEAD> …
</HEAD><BODY>
…</BODY>
</HTML>
Starting Web Page
![Page 16: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/17.jpg)
The BODY Section
<BODY>
{Text displayed by browser}
</BODY>
![Page 18: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/18.jpg)
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
![Page 19: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/19.jpg)
Commonly Used HTML Tags
<H1> … </H1> Heading. <H2> … </H2> Heading.<H3> … </H3> Heading.<BLOCKQUOTE> … </ BLOCKQUOTE
>Indents block of text
one tab.
Text Formatting
![Page 20: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/20.jpg)
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)
![Page 21: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/21.jpg)
21
Creating Superscripts & Subscript
<SUB>…</SUB> : Subscript<SUP>…</SUP> : Superscript
Example:H<SUB>2</SUB>O :H2O
10<SUP>th</SUP> :10th
![Page 22: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/24.jpg)
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>
![Page 25: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/25.jpg)
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
![Page 26: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/26.jpg)
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…
![Page 27: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/27.jpg)
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
![Page 28: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/28.jpg)
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
![Page 29: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/29.jpg)
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…
![Page 30: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/30.jpg)
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
![Page 31: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/31.jpg)
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”
![Page 32: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/32.jpg)
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
![Page 33: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/33.jpg)
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
![Page 34: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/34.jpg)
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.
![Page 35: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/35.jpg)
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>
![Page 36: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/36.jpg)
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
![Page 37: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/37.jpg)
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
![Page 38: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/38.jpg)
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” >
![Page 39: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/39.jpg)
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
![Page 40: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/40.jpg)
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 %)
![Page 41: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/41.jpg)
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>
![Page 42: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/42.jpg)
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>
![Page 43: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/43.jpg)
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
![Page 44: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/44.jpg)
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>
![Page 45: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/45.jpg)
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>
![Page 46: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/46.jpg)
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”
![Page 47: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/47.jpg)
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
![Page 48: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/48.jpg)
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.
![Page 49: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/49.jpg)
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
![Page 50: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/50.jpg)
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.
![Page 51: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/51.jpg)
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
![Page 52: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/52.jpg)
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
![Page 53: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/53.jpg)
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>
![Page 54: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/54.jpg)
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.
![Page 55: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/55.jpg)
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.
![Page 56: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/56.jpg)
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
![Page 57: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/57.jpg)
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”
![Page 58: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/58.jpg)
58
Keeping Visitors from Resizing Frames
To keep visitors from resizing your frames, type NORESIZE in the FRAME tag for desire frame
![Page 59: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/59.jpg)
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.
![Page 60: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/60.jpg)
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>
![Page 61: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/61.jpg)
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 >
![Page 62: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/62.jpg)
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>
![Page 63: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/63.jpg)
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>
![Page 64: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/64.jpg)
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.
![Page 65: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/65.jpg)
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.
![Page 66: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/66.jpg)
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
![Page 67: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/67.jpg)
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:
![Page 68: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/68.jpg)
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.
![Page 69: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/69.jpg)
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>
![Page 70: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/70.jpg)
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.
![Page 71: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/71.jpg)
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.
![Page 72: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/72.jpg)
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
![Page 73: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/73.jpg)
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.
![Page 74: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/74.jpg)
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.
![Page 75: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/75.jpg)
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
![Page 76: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/76.jpg)
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
![Page 77: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/77.jpg)
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.
![Page 78: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/78.jpg)
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>
![Page 79: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/79.jpg)
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.
![Page 80: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/80.jpg)
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>
![Page 81: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/81.jpg)
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.
![Page 82: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/82.jpg)
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>
![Page 83: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/83.jpg)
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>
![Page 84: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/84.jpg)
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.
![Page 85: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/85.jpg)
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>
![Page 86: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/86.jpg)
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>
![Page 87: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/87.jpg)
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>
![Page 88: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/88.jpg)
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
![Page 89: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/89.jpg)
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>
![Page 90: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/90.jpg)
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>
![Page 91: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/91.jpg)
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>
![Page 92: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/92.jpg)
92
Creating and Using Image Maps
![Page 93: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/93.jpg)
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>
![Page 94: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/94.jpg)
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
![Page 95: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/95.jpg)
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)
![Page 96: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/96.jpg)
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”>
![Page 97: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/97.jpg)
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)
![Page 98: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/98.jpg)
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”>
![Page 99: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/99.jpg)
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
![Page 100: 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](https://reader033.vdocuments.net/reader033/viewer/2022061305/55140ba7550346e7488b4ddb/html5/thumbnails/100.jpg)
Thank you for your attention!