Lets get Hyper

1
Lets get Hyper!
2
Why is Hypertext Hyper?

• Hyperlinks date back to 1980
• Documents called stacks were create to make links
• The main stack containing all the stacks was
  called the home stack
• Hypertalk was an actual programming language
• HTML works the same way

3
Storyboard

• A story board is a diagram that illustrates how
  two or more Web pages or sections of a Web page,
  relate to one another.

4
Sequential
Home
Link
Page 1
Link
Page 2
Link
Page 3
Link
5
Hierarchical
Home
Link
Link
Link
Page 1
Page 2
Page 3
Link
Link
Link
Page 4
Link
6
Custom
Page 3
Home
Page 2
Link
Link
Link
Link
Link
Page 4
Page 1
Link
Link
7
The Anchor

• ltAgtanchorlt/Agt
• Description provides data to link images,
  sounds, another area within the page, or to
  another Web page.
• Type container
• Attributes accesskey, charset, class, coords,
  dir, href, hreflang, land, id, name, onblur,
  onclick, ondbblclick, onfocus, onkeydown,
  onkeypress, onkeyup, onmousedown, onmousemove,
  onmouseout, onmouseover, onmouseup, rel, rev,
  shape, style, tabindex, target, title, type

8

• href a special attribute that identifies the
  pointer or pathway to the target link.
• This reference directs the browser to begin
  loading at a certain section of the page or on a
  new page.
• rel and rev Both specify the relationship
  between the source document and the target of the
  link. The rel attribute points forward, the rev
  points backward.

9
More rel and rev

• Next-indicates that the URL referenced in the
  href is the next in the series. This is usually
  usded only with the real attribute. Sample link
  to the next page in the series
• lta relnext hrefhttp//mysite.com/p2.htmlgtMore
  infolt/agt
• Index-shows that the document pointed to by the
  href is the index or table on contents for the
  series. Sample index
• lta rel-index hrefhttp//mysite.com/index.htmlgt
  Indexlt/agt
• Previous-shows that the document pointed to by
  the href is the previous element in a series. The
  element is the one that precedes the URL in the
  href. Normally, this is used with the rev
  attribute. Sample use of value
• lta revprevious hrefhttp//mysite.com/pl.html
  gtPage Onelt/agt

10
Targets
Intrasystem Links Sequential (between pages)
Home
Page 1 Link Link Link
Link
Page 1
Link
Link
Intrapage Links Indexed Sequential (within page)
Page 2
Link
Link
Page 3
Link
Link
11
Paths to Files

• Absolute Path
• Starts with a slash /
• Used to divide parts of the path name
• Relative Path
• do not need to give the current position because
  they start form the directory in which the
  browser is working
• Absolute vrs Relative
• Use relative paths vrs absolute because the path
  is shorter
• Make sure that all the files you are referencing
  are in the same directory

12
Intersystem Source Anchors

• Intersystem links bring data from distant
  machines across the WWW.
• Link Considerations
• When you create a link to a page on another
  machine, you are giving the users browser a
  different Internet address from which to down
  load data

13

• Domain name or IP address?
• Can use either IP address or domain name
• http//204.151.55.44/
• http//www.mcdonalds.com
• It is an extra step to convert IP address to a
  domain name
• Sometimes IP address are a pain to change
• People will know where they are going with a
  domain name

14
Intrapage Targets

• The ltagt tag contains the name attribute
• The same name cannot be used as another target
• Can be any combination of letters, numbers,
  hyphens, underscores, colons or periods
• Either name or id can be used
• lta idRFgtRandallt/agt
• lth2 idRFgtRandallt/agt
• Why name and id?
• Some browsers do not recognize id yet
• Name will be eliminated at some point

15
Intrapage Source Anchors

• The octothorp () tell the brwoser tha t the
  reference is a target within a document rather
  than a target to another file
• The hypertext reference is an intrapage target
  rather than a path to a independent file

16
URLS with Intrapage Targets

• URLs can have targeted spots to hit within the
  page.
• lta hrefpoems.htmlRFgtRobert Frostlt/agt
• This is take you to the poems page and the Robert
  Frost section of the page.

17
Anchor Placement

• Anchors can be used with another container.
• lth2 alignrightgtlta hrefphred.htmlgtPhreds
  Pagelt/agtlth2gt

18
Intrasystem Source Anchors

• Long hypertext documents with lots of intrapage
  links can cause problems.
• Slower download time
• Short documents are easier to navigate
• HTML designs say that each document should focus
  on only one topic
• Make sure all your links are valid

19
One-Way Streets

• A big problem on the web is long pages with no
  links back or back to top.
• Assign a first level heading at the beginning of
  the document titled top
• Never create one-way traps for users
• Provide links in both directions forward and
  back

20
The Click Here Faux Pas

• This is a classic error in web design. Click
  Here is often used to tell surfs where to click
  to use a link.
• Some other ways of creating links
• See pictures of my dog.
• You can go to the next page.
• Send me some email.
• Try being a little more subtle.

21
Mailto Protocol

• Use the href as you would a link but instead of
  the IP address or domain name, use the e-mail
  address.
• lta hrefmailtoscarey_at_fc.wtvl.k12.me.usgtE-mail
  me at WSHSlt/agt

22
Page Footers

• Links that appear at the page of every HTML
  document are referred to as a footer.
• Organization's name
• Logo
• Web designers name
• Date page was last updated
• Links to related pages
• The page footer can be the designers signature
  code.

23
Server-Side Includes

• Designing a common page footer to be used for
  every Web page within a site creates a unifying
  look.
• Any changes to the footer means updating the
  whole site.
• By creating a separate HTML page with the footer
  elements, you can create a comment lt!- include
  the filefooter.html-gt where the footer goes
  and the file will appear on every page with the
  comment.
• The .shtml file extension is used on every HTML
  document containing the comment.PROBLEMS WITH
  .SHTMLINCREASES NETWORK TRAFFICSLOW PAGE
  LOADINGOPENS THE DOOR TO DAMAGECREATES EXTRA
  FILES