CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.
-
Upload
orion-newbold -
Category
Documents
-
view
218 -
download
2
Transcript of CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.
![Page 1: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/1.jpg)
CIS 1315 – Web Development for Educators
CIS 1315
HTMLTutorial 2: Developing a Web Site
![Page 2: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/2.jpg)
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
![Page 3: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/3.jpg)
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
![Page 4: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/4.jpg)
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 #
![Page 5: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/5.jpg)
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
![Page 6: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/6.jpg)
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
![Page 7: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/7.jpg)
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
![Page 8: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/8.jpg)
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>
![Page 9: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/9.jpg)
CIS 1315 – Web Development for Educators
Image Maps
Requirements
id Attribute for <map>
alt Attribute for <area>
![Page 10: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/10.jpg)
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
![Page 11: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/11.jpg)
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
![Page 12: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/12.jpg)
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
![Page 13: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/13.jpg)
CIS 1315 – Web Development for Educators
URL
Escape Characters Preserve Information about Blank Spaces
![Page 14: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/14.jpg)
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”
![Page 15: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.](https://reader030.fdocuments.us/reader030/viewer/2022032516/56649c765503460f94929e30/html5/thumbnails/15.jpg)
CIS 1315 – Web Development for Educators
Metadata
Appears in <head>