Html tutorial 2 developing a web site
Download
1 / 15

HTML Tutorial 2: Developing a Web Site - PowerPoint PPT Presentation


  • 142 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML Tutorial 2: Developing a Web Site' - midori


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Html tutorial 2 developing a web site

CIS 1315

HTMLTutorial 2: Developing a Web Site


Web site structure
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


Html tutorial 2 developing a web site
<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


Html tutorial 2 developing a web site
<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 #


Html tutorial 2 developing a web site
<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


Html tutorial 2 developing a web site
<a>

  • Attributes

    • title=“text”

      • Provides Supplemental Information Regarding a Link

        • Behaves Like a Tooltip

        • Should be Less Than 60 Characters


Html tutorial 2 developing a web site
<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


Image maps
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>


Image maps1
Image Maps

  • Requirements

    • id Attribute for <map>

    • alt Attribute for <area>


Paths
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


Paths1
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


Html tutorial 2 developing a web site
URL

  • http://www.cod.edu/people/faculty/losacco/index.htm

    • Communication Protocol

      • http://

    • Domain

      • www.cod.edu

    • Path

      • /people/faculty/losacco/

    • Document

      • index.htm


Html tutorial 2 developing a web site
URL

  • Escape Characters

    • Preserve Information about Blank Spaces


Protocols
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”


Metadata
Metadata

  • Appears in <head>