html tutorial 2: developing a web site
DESCRIPTION
CIS 1315. HTML Tutorial 2: Developing a Web Site. Web Site Structure. Linear Purchasing Sequence of E-Commerce Site Book Hierarchical General to Detail Progression Star Multiple Unified Sets of Information e.g., Destinations, Accommodations, Air Travel, Cruise, Rentals Mesh - PowerPoint PPT PresentationTRANSCRIPT
CIS 1315 – Web Development for Educators
CIS 1315
HTMLTutorial 2: Developing a Web Site
CIS 1315 – Web Development for Educators
Web Site Structure
Linear Purchasing Sequence of E-Commerce Site Book
Hierarchical General to Detail Progression
Star Multiple Unified Sets of Information e.g., Destinations, Accommodations, Air Travel, Cruise, Rentals
Mesh Every Page is Accessible to Every Other Page
CIS 1315 – Web Development for Educators
<a>
<a>…</a> Used to Create Links to Other Resources
Named Anchor
AKA Bookmark
Used to Name Specific Locations within a Page
id Attribute
Defines Destination
CIS 1315 – Web Development for Educators
<a>
Attributes accesskey=“text”
Character Used as Keyboard Shortcut to Activate Link coords=“X1, Y1, X2, Y2, etc.”
Coordinates that Define Hot Spot Shape in Image Map href=“URL”
Specifies Location of Linked Resource Typically Another HTML File Can Also Specify Other Internet Resources
Files, E-mail, FTP
Named Anchor or Bookmark URLs are Preceded By #
CIS 1315 – Web Development for Educators
<a>
Attributes name=“text”
Marks Specific Place Within an HTML Document AKA Named Anchor or Bookmark
rel=“text” Indicates Relationship Between Documents
rel=“stylesheet” Tells Browser that Linked Document is a Style Sheet
shape=“rect | circle | poly | default” Specifies Shape of Hot Spot in Image Map
CIS 1315 – Web Development for Educators
<a>
Attributes
title=“text”
Provides Supplemental Information Regarding a Link
Behaves Like a Tooltip
Should be Less Than 60 Characters
CIS 1315 – Web Development for Educators
<a>
Example
<a href="http://www.mysite.com/">A link to a site.</a>
< a href="#P5">A link to paragraph 4 in same document.</a><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p><p id=“P4”>Paragraph 4 content.</p>
ID Attribute Value Must be Unique Begin with a Letter Spaces are not Allowed
CIS 1315 – Web Development for Educators
Image Maps
Image Map An Image that has Multiple Areas Defined as Links
Hotspot An Area in an Image That is Defined as a Link
Example<img src=“filename.ext” usemap=“#mapname” /><map id=“mapname”>
<area shape=“rect” coords=“x1,y1, x2,y2” href=“url” /><area shape=“circle” coords=“x,y,r” href=“url” /><area shape=“poly” coords=“x1,y1, x2,y2, ...”
href=“url” /></map>
CIS 1315 – Web Development for Educators
Image Maps
Requirements
id Attribute for <map>
alt Attribute for <area>
CIS 1315 – Web Development for Educators
Paths
URL (Uniform Resource Locator)
Location of Document on Web
www.cod.edu
Path
Location of Document on Server
http://www.cod.edu/people/faculty/losacco/index.htm
CIS 1315 – Web Development for Educators
Paths
Absolute Exact Location on Server
Begins with a / /student/index.htm
Relative Location Relative to Current Document
Current — Nothing page.htm
Child — Separated by / images/background.gif
Parent — Two Periods (..) ../page.htm
CIS 1315 – Web Development for Educators
URL
http://www.cod.edu/people/faculty/losacco/index.htm Communication Protocol
http:// Domain
www.cod.edu Path
/people/faculty/losacco/ Document
index.htm
CIS 1315 – Web Development for Educators
URL
Escape Characters Preserve Information about Blank Spaces
CIS 1315 – Web Development for Educators
Protocols
E-Mail Mailto
<a href=“mailto:[email protected]”>Send Mail</a>
Can Automatically Include Subject Line
“mailto:[email protected]?subject=text”
Other Options
“mailto:[email protected][email protected]&[email protected]&subject=subscribe&body=Send me your newsletter right away”
CIS 1315 – Web Development for Educators
Metadata
Appears in <head>