WWW 131

1
WWW 131

• Week 4
• External Hyperlinks

2
What do we mean by an external hyperlink?

• Internal hyperlinks link to another point within
  the same document. These hyperlinks lead from
  one point in a document to another point also
  inside the same document.
• First, we will see how to write external
  hyperlinks these take us from a link within one
  document to a different document or a totally
  different website
• the link takes the reader to a point external to
  the document containing the link

3
How do we create external hyperlinks?

• We will use
• the anchor tag ltagt and
• the href attribute
• Syntax
• lta hreflocation of destination file.htmgt
  hyperlink textlt/agt

4
Where may external hyperlinks take us?

• External hyperlinks may take us to 3
  destinations
• 1. To the home page of other web sites at
  different domains
• E.g., from Oakton to Microsoft.com
• Actually, link is to a single front page of a
  site
• 2. To specific documents located on different web
  servers
• E.g., from Oakton to W3School.coms page on Links
• 3. Other documents on the same server but in
  different directories (also local documents)
• 4. To other documents on the same web server
  and in the same directory (local documents)

5
Giving directions to the browser

• There are several billions of web pages out there
  on the Web. So
• We need to give directions to the browser how to
  find the destination document.
• There are two ways to do this
• 1. Provide an absolute URL total set of
  instructions to the destination document
• http//www.w3schools.com/html/html_links.asp
• 2. Provide a relative URL shorthand
  instructions
• From class home page lectures.htm
• Both ways provide instructions on how to go from
  the base or starting document to the destination
  or target document

6
Absolute URLs

• An absolute URL specifies the complete route to
  the external document on the Internet, and
  includes the complete filepath on the server
  where the file is located.
• The entire URL of an absolute filepath begins
  with the protocol.

7
Absolute URLs

• To understand URLs think of them as having two
  parts
• The domain name
• http//www.oakton.edu/
• The filepath to the specific document
• Sessions/05/exercise01.htm
• Filepaths operate exactly as on a PCs hard
  drive, except backslashes (\) become forward
  slashes (/)

8
URL Structure

• The structure of an absolute URL is
• protocol//servername.domain.TLDN/
• ltentire filepathgt/filename.htm
• Protocol http// (others ftp// file///)
• This is what tells the browser you want something
  over the Web.
• Servername - www is common. . . but any name
  may be used (MIT dandelion-patch)
• Domain oakton, ibm, microsoft
• TLDN - top level domain name .edu, .com, .net,
  .mil, .info, .biz,
• (For more info on TLDNs, go to
  http//www.icann.org)

9
Absolute URL

• An example of an absolute URL is
• http//www.oreilly.com/catalog/html6/chapter/index
  .html

10
Absolute URL

• The parts of this absolute URL are
• http// protocol//
• www. servername.
• oreilly.com domainTLDN.
• /catalog/html6/chapter/
• entire filepath
• index.html filename

11
Absolute URL

• Often times, the combination of domain name and
  the top level domain name are simply called the
  domain name
• For example
• oakton.edu
• w3schools.com
• w3.org
• This is because, when a domain name is registered
  (e.g., oakton), it is registered within a
  specific TLDN (e.g., .edu).

12
Hyperlinks to a Web SitesHome Pages

• So why does a hyperlink like this operate?
• http//www.oakton.edu
• Because
• It specifies a specific domain
• When the web server gets a request for this
  specific domain and no filepath or filename, it
  understands the request to be for one specific
  page in the top level folder at the domain.
• index.htm, default.htm, home.htm, etc.

13
URL Structure

• protocol//servername.domain.TLDN/
• ltentire filepathgt/filename.htm
• The part of the URL through the TLDN (in red)
• a. is not case sensitive
• b. provides directions to get to
• i) the particular network on the Internet
  (domain) and
• Ii) a specific server on that network where the
  destination file is located
• A typographical error in this part of the URL can
  generate a DNS error when the user clicks the
  link.

14
URL Structure

• But even if the browser can contact the correct
  server, it needs a way to request a specific
  document in a specific filepath which is stored
  on that server.

15
URL Structure

• protocol//servername.domain.TLDN/
• ltentire filepathgt/filename.htm
• The part of the URL following the TLDN (in
  green)
• might be case sensitive! (For documents stored on
  a Unix/Linux server, the filepath and filename
  are case-sensitive for documents stored on a
  Windows server, they are not.) We will always
  treat this part of the URL as being
  case-sensitive!
• provides directions to the specific directory on
  the server which contains the destination file
• A typographical error in this part of the URL
  can generate a 404" error

16
Examples of Absolute URLsto documents on other
websites

• http//www.w3schools.com/
• http//www.december.com/html/spec/color1.html
• http//www.w3schools.com/html/default.asp
• http//chicago.cubs.mlb.com
• http//chicago.cubs.mlb.com/spring_training/index.
  jsp?c_idchc

17
Linking to local documents same directory

• document on same server and in same directory
• lta hrefotherdoc.htmgthyperlink textlt/agt

18
Linking to local documents same directory

• This is a relative URL
• Since no other directory, or network-locating
  information is provided, the browser looks only
  in the same directory as the base file
• If it finds the file, the file is displayed if
  the browser cannot find the file 404 Error.
• We could also use an absolute filepath here.

19
Linking to local documents different directory

• We can also write a hyperlink to a document on
  same server, in different directory
• with a relative URL
• lta href ../../answrs.htmgtAnswerslt/Agt
• . . . or an absolute URL

20
Linking to local documents different directory

• To tell the browser how to move from the base
  documents directory to the destination
  documents directory, we must specify the actual
  filepath from the base document to the
  destination document.
• To do this, we use some unusual abbreviations .

21
Linking to local documents different directory

• These are two such abbreviations used to specify
  the filepath
• / the forward slash character
• This separates directory names it is used
  instead of the \ (backslash used in Windows
• ..
• These two dots indicate the directory one level
  above the one we are now in

22
Linking to local documents different directory

• Move up one directory level ../
• Go to otherdoc.htm one directory level up from
  here
• ../otherdoc.htm
• Move up two directory levels ../../
• Go to otherdoc.htm two directory level up from
  here
• ../../otherdoc.htm

23
Linking to local documents different directory

• NOTE If you are just moving up the directory
  tree, you do not need to provide the name of any
  directory!

24
Movin on Up

• C\answers.htm
• C\WWW FILES\WWW131\test_1.htm
• A relative URL from test_1.htm to
  answers.htm would read
• ../../answers.htm

25
Linking to local documents different directory

• However, if we need to move down a directory
  tree, we write the relative URL differently.

26
Moving down directory trees

• To move down one directory level, we use the
  subdirectory name and the forward slash
• Go to otherdoc.htm one directory level down
  from here
• subdirname/otherdoc.htm
• To move down two directory levels
• Go to otherdoc.htm two directory levels down
  from here
• subdir1_name/subdir2_name/otherdoc.htm

27
Moving down directory trees

• Canswers.htm
• C\WWWFILES\WWW131\test_1.htm
• A relative URL from within answers.htm to
  test_1.htm would read
• WWW FILES/WWW131/test_1.htm

28
Relative URLs so far

• So far, we have seen how to write relative URLs
  for a file that is either directly above or
  directly below it in the file directory
  hierarchy.
• If directly above, we can just write use the
  correct number of ../ terms to climb the
  directory tree. No folder names are needed
• If directly below, we just need to specify the
  subdirectory names for each step down the
  directory tree.

29
Files that are lateral to one another

• To write filepaths to such files, we simply
  combine the above two rules in writing the
  filepath.

30
Combine the rules

• To do this, we need to climb up to the folder
  that is the parent of the folder holding the
  destination file using the ../ character, then to
  climb down that portion of the directory tree by
  specifying the names of the subdirectory or
  subdirectories.

31
Files that are lateral to one another

• You may find it easier to picture a directory
  structure horizontally instead of vertically
• The horizontal view is especially helpful in
  writing relative filepaths for files in lateral
  directories

32
Specifying a filepath for lateral files

• Write a relative URL from
• C\WWW FILES\WWW 131\test_1.htm to
• C\WWW FILES\WWW 111\test_1.htm ../WWW
  111/test_1.htm

33
Specifying a filepath for lateral files

• What is the relative URL from
• C\WWW FILES\concepts.htm to
• C\CIS FILES\concepts.htm ?
• ../CIS FILES/test_1.htm

34
Specifying a filepath for lateral files

• How do we write links to local files that are not
  straight up/down the directory tree, or in a
  lateral file? Combine the rules!
• What is the relative URL from C\WWW
  FILES\concepts.htm to
• C\CIS FILES\concepts.htm ?
• ../WWW FILES/WWW 131/test_1.htm

35
Combine the rules

• A link from
• C\CIS FILES\concepts.htm to
• C\WWW FILES\test_1.htm
• ../WWW FILES/WWW 131/test_1.htm

36
Which URL to use? Relative or Absolute?

• Relative
• Easy to type
• Smaller risk of typos
• Highly Portable
• ext 3761

• Absolute
• Harder to type
• Greater risk of typos
• Less Portable
• 01-630-847-1600 ext 3761

37
Summary
38
FYI The tilde in filepaths

• Some servers have such long filepaths that typing
  the absolute filepath is a nuisance
• H\Student\01\s\Public.www\smit6789\131_stuff\
  mypage.htm
• So some servers allow a shortcut to be used the
  tilde character tells the server to take a
  shortcut to the a specific directory
• Result the above filepath becomes this URL
• http//www.oakton.edu/smith.6789
• omitting Student\01\s\Public.www

39
Email Hyperlinks

• We can create hyperlinks which create start up an
  email message, using the default email program on
  the computer
• We do this with the mailto protocol
• lta href mailtommcdonal_at_oakton.edugtMelt/agt

40
Email Hyperlinks

• Typical use is in the address section of a page
• ltaddressgtThis page authored by
• lta href mailtommcdonal_at_oakton.edugtMatthew
• McDonaldlt/agt
• lt/addressgt
• Output
• This page authored by Matthew McDonald

41
Internal Hyperlinks
42
Internal Hyperlinks

• An internal hyperlink is a hyperlink taking the
  reader from one point in a document to another
  point within the same document.

43
Creating Internal Hyperlinks

• To write internal hyperlinks, we write
• one a tag with an href attribute
• lta hrefURLgtHypertextlt/agt
• and another a tag with the name attribute
• lta nameURLgtlt/agt

44
Creating Internal Hyperlinks

• First, decide where in the document the hyperlink
  is to take the reader
• Determine this destination
• Type lta name at the destination
• lta name
• Then type in the value for the name attribute
• Make the value descriptive, but short (to avoid
  typing errors)
• lta name topgt
• Close the anchor tag
• lta name topgtlt/agt

45
Creating Internal Hyperlinks

• Go to the point in your document preceding the
  text which will be the hyperlink
• Position the opening anchor tag before this text
  and type
• lta href
• Then type in the the value given the name
  attribute
• lta href topgt
• Type the close anchor tag following the selected
  text
• lta href topgtToplt/agt

46
Internal Hyperlinks FAQ

• The anchor with the name attribute may be above
  or below the corresponding anchor tag with the
  href attribute.
• The character must go in the anchor tag with
  the href attribute it tells the browser to look
  within the present document for this link.
• There may be multiple copies of the anchor tag
  with the href attribute, but only one with the
  name attribute.
• You can keep this in mind if you remember that it
  is reasonable to have multiple links to the Top
  of the document, but only one actual Top!

47
How Internal Hyperlinks are used

• In 3 ways
• to let readers move about within a document
• to provide links back to the Top of a long
  document (see this classs syllabus)
• to let visitors coming to the page from outside
  the document or website jump immediately to a
  specific point in the document!
• http//www.oreilly.com/catalog/html3/chapter/ch05.
  html20540

48
Session 3 Review

• What are the three types of lists used to
  organize data on a web site?
• Unordered list
• Ordered list
• Definition list

49
List Tags

• Which tags are used to define the following
  lists?
• Unordered
• Ordered
• Definition

ltulgt lt/ulgt ltolgt lt/olgt ltdlgt lt/dlgt
50
List attributes

• What are the three bullet types used in an
  unorderlist and the tags for the list to appear
  in that style?
• Disc
• Circle
• Square

ltul typediscgt ltul typecirclegt ltul
typesquaregt
51
Do you know . . .

• What is a nested list?
• A nested list is one type of list inside another
• What kind of list pairs a word or phrase with a
  longer description?
• A definition list
• What do these tags define?
• ltdlgt
• ltdtgt
• ltddgt

defines beginning of definition list word or
short phrase that will be explained definition of
the term (browsers usually type this on the line
below the term indented)
52
WWW 131

• Session 4
• Links

53
HTML Hyperlinks

• Method to move from one location to another
• one page of a web site to another page in the
  site
• one web site to another site
• one segment of a web page to another
• link to an email address
• call up a graphic, sound file, or even a movie,
  and download files

54
HTML Hyperlinks The ltagt Tag

• ltagt
• non-empty or paired tag
• ltagtLabel textlt/agt
• requires destination (href attribute)
• href"url"
• optional target (target attribute)
• target"window to open"

55
3 parts of a hyperlink

• Destination (the URL) Identified with HREF
  property (hypertext reference)
• absolute or relative URL address
• Label
• what the user clicks on
• must be descriptivenot "Click Here"
• Can be an text or image or both
• Target
• identifies if you want to open it in the same
  window, or a new window (optional)

56
Link tag

• Syntax
• lta href"http//www.oakton.edu"
  target"_blank"gtOakton Community Collegelt/agt

57
Hints for Creating Links

• Rather than typing a complicated URL
• go to that Web page in your browser
• copy the URL in the location box
• return to your code
• paste the URL directly into the HTML document.
  
• It is usually best to write the text for a page
  first. Then, highlight appropriate words from the
  text to use as links.

58
Suggestion

• Use descriptive text, rather than Click Here, in
  your links to give the user info on which to
  judge interest in pursuing the link.
• Click here to see good design. (Bad example)
• The Tri-City Florists Web site received the 1999
  Great Design Award from WebMaster Magazine.
• The WebMasters International Web site has a
  tutorial on Web design basics.

59
Problems? If a Link doesnt work . . .
. . .

• Make sure the name of the file in the HREF tag
  matches the name of the file on the disk.
• Make sure upper and lowercase match since links
  are case sensitive
• Make sure both of the files are in the same
  directory.
• Check that the link is closed with an lt/agt tag.
• Make sure that surround the filename.

60
Samples of Tags One page of a web site to
another page lta hrefpage.htmlgtLabel
textlt/agt One web site to another site lta
hrefhttp//www.oak.edu/path/page.htmgtLabellt/agt
One segment of web page to another lta
hrefanchor namegtLabellt/agt
61
Links Anchors

• LinkProvides text or an object that the user can
  click. The users display automatically jumps
  to the pre-programmed location.
  
• lta hrefcrabgtCrablt/agt
• (HREF stands for Hypertext Reference)
• AnchorThe location the display will jump to when
  the Link item is clicked.
• lta namecrabgt(A heading, etc.)Crablt/agt

62
Linking to E-Mail

• A well designed Web page provides a way for
  visitors to contact the Web developer.
• Visitors use this link to contact the company to
  request additional information.

E-mail your comments to us at webwear_at_isp.com . .
.lta hrefmailtowebwear_at_isp.comgtwebwear_at_isp.comlt
/agt
63
Absolute URL references

• Absolute
• links to web page at different site
• requires complete URL
• http//www.oakton.edu/departments/directory.htm

64
Relative URL references

• Relative
• links to another web page in the same local root
  folder
• requires only a path to the page
• aboutoakton.htm
• departments/directory.htm
• ../index.htm

65
Anchors

• a location usually within the same HTML file that
  the users display jumps to when the link is
  clicked
• allows linking to locations other than top of web
  page

66
Anchors cont.

• 2 step process
• place the named anchor
• lta name"location"gtlt/agt
• marks the location to be linked to
• create the link
• lta href"location"gtJump to locationlt/agt
• OR
• lta href"aboutus.htmlocation"gtGo to location on
  About Us pagelt/agt
• Example

67
E-mail links

• Provides a method for the user to communicate via
  e-mail from the web page
• Syntax
• lta href"mailtoorderdivision_at_oakton.edu"gt
  Contact uslt/agt

68
Target attribute

• used to open a link in a different window
• target is name of window to open
• special reserved names begin with underscore
• _blank (opens new window)
• _self (default)
• other choices related to frames
• Syntax
• lta hrefhttp//www.oakton.edu target"_blank"gtOpe
  n Oakton homepage in new window leaving window
  with link openlt/agt

69
Target attribute

• Syntax
• lta hrefhttp//www.oakton.edu target"_blank"gtOpe
  n Oakton homepage in new window leaving window
  with link openlt/agt
• Example

70
Anchors

• Clicking on a link generally takes the user to
  the top of the linked page.
• Anchors are needed to jump to a specific section
  of a Web page.
• lta nameanchor namegt(Description)lt/agt

71
Sample
ltH2gtNew lta hrefjumpgtTagslt/agtlt/H2gt ltPgtThis is
a sample paragraph. The above heading is a link
that when clicked will jump to an anchor in the
code below.lt/Pgt ltPgtThe text between the ltAgt tag
and the lt/Agt tag will be highlighted on the
users screen to click as the link.lt/Pgt ltPgtThe
anchor ltAgt tag appears in the HTML code, but the
user will not see anything special on the screen.
The only thing the user sees is that when the
link above is clicked, the screen jumps to the
anchor area below.lt/Pgt lta namejumpgt
lt/agt ltPgtThe new tags are . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . lt/Pgt
72
Link Tags ltagt and lt/agt

• lta href . . .gt
• HREF attribute for links
• for link that jumps to anchor in same HTML page
• lta name . . .gt
• NAME attribute for anchors