1 / 15

HTML Tutorial 2: Developing a Web Site

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

midori
Télécharger la présentation

HTML Tutorial 2: Developing a Web Site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CIS 1315 HTMLTutorial 2: Developing a Web Site

  2. 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

  3. <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

  4. <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 #

  5. <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

  6. <a> • Attributes • title=“text” • Provides Supplemental Information Regarding a Link • Behaves Like a Tooltip • Should be Less Than 60 Characters

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

  8. 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>

  9. Image Maps • Requirements • id Attribute for <map> • alt Attribute for <area>

  10. 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

  11. 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

  12. URL • http://www.cod.edu/people/faculty/losacco/index.htm • Communication Protocol • http:// • Domain • www.cod.edu • Path • /people/faculty/losacco/ • Document • index.htm

  13. URL • Escape Characters • Preserve Information about Blank Spaces

  14. Protocols • E-Mail • Mailto • <a href=“mailto:losacco@cod.edu”>Send Mail</a> • Can Automatically Include Subject Line • “mailto:losacco@cod.edu?subject=text” • Other Options • “mailto:losacco@cod.edu?cc=another@cod.edu&bcc=secret@cod.edu&subject=subscribe&body=Send me your newsletter right away”

  15. Metadata • Appears in <head>

More Related