Hyperlinks
Relative Links
    Intrapage Link
    Intrasystem Link
Absolute Link
Review
Intrasystem Link

• These are hyperlinks connected to
  external references.
• Anchor Tag
                <a> </a>
• Attributes
        <a href=URL>Hypertext</a>
<a href=URL title=“link title”>Hypertext</a>
Creating Intrasystem Link
• Create a folder named Q2Practice3Surname
• Create 4 Web pages with the following
  Background Color:
            Red, Blue, Green, Yellow
• The title of each Web page is its background
  color.
• Save as Q2Red.htm, Q2Blue.htm, Q2Green.htm,
  and Q2Yellow.htm respectively.
Creating Intrasystem Link
• Open a new notepad, type all the basic markup
  tags. The title of this Web page is “Home Page”.
• Save the page as Q2Practice4.htm
• Create hypertexts which are connected to the
  other four colored Web pages.
Example:
       <a href=“Q2Red.htm”>Go to Red</a>
      <a href=“Q2Blue.htm”>Go to Blue</a>
    <a href=“Q2Green.htm”>Go to Green</a>
    <a href=“Q2Yellow.htm”>Go to Yellow</a>
Changing hyperlink colors
• The colors to be used for the
  hyperlink are defined in the
  <body> tag using the following
  attributes:
• <body link=“color”>
  – The link attribute indicates the
    color of the hypertext which are
    not yet visited by the browser.
Changing hyperlink colors
• The colors to be used for the
  hyperlink are defined in the
  <body> tag using the following
  attributes:
• <body alink=“color”>
  – The alink attribute indicates the
    color of the hyperlink text while
    the link is selected.
Changing hyperlink colors
• The colors to be used for the
  hyperlink are defined in the
  <body> tag using the following
  attributes:
• <body vlink=“color”>
  – The vlink attribute indicates the
    color of the hyperlink which are
    already visited.
Example
<body link=“blue” alink=“red” vlink=“purple”>
These are the default hyperlink colors.
    Self defined hyperlink colors.
<body link=“pink” alink=“pink” vlink=“pink”>
For hyperlinks which do not change colors.
Notes: (For Files all in the same single folder)
• When creating an intrasystem link to pages,
  documents, and files on the same folder, you
  could type in the entire URL.
                     However,
• If the disc is used on other system it might
  have a different name and it will not return
  your desired link.
• Since the methods assignment are in the same
  folder, you can simply type the exact name of
  the files for the hyperlink.
                         
Notes: (For Files in different folders)
• You might decide to keep things orderly, you will create
  different folders for each of your files.
• This would require you to link from one folder to
  another. Again, the best way is to use relative links.
• For example, your Home page is in the parent folder
  and your Page1 is in another folder inside the parent
  folder, you will include the name of the folder before
  the filename, separated by a backslash ().
• Example:
<a href=“SubjectsComputer.htm”>Computer</a>
Absolute Links

• These are hyperlinks connected to
  Web sites published on the WWW.
• Anchor Tag
                <a> </a>
• Attributes
       <a href=“URL”>Hypertext</a>
Example:
<a href=“www.google.com”>Go to Google</a>
Mail to Link

• This creates a link on the Web site
  that opens an email window.
• href value
       Href=“mailto: emailaddress”
• Example
   <a href=“mailto:mspoli@yahoo.com”>
        Send email to your teacher
                   </a>

Links - IntraSystem and Absolute

  • 1.
    Hyperlinks Relative Links Intrapage Link Intrasystem Link Absolute Link
  • 2.
  • 3.
    Intrasystem Link • Theseare hyperlinks connected to external references. • Anchor Tag <a> </a> • Attributes <a href=URL>Hypertext</a> <a href=URL title=“link title”>Hypertext</a>
  • 4.
    Creating Intrasystem Link •Create a folder named Q2Practice3Surname • Create 4 Web pages with the following Background Color: Red, Blue, Green, Yellow • The title of each Web page is its background color. • Save as Q2Red.htm, Q2Blue.htm, Q2Green.htm, and Q2Yellow.htm respectively.
  • 5.
    Creating Intrasystem Link •Open a new notepad, type all the basic markup tags. The title of this Web page is “Home Page”. • Save the page as Q2Practice4.htm • Create hypertexts which are connected to the other four colored Web pages. Example: <a href=“Q2Red.htm”>Go to Red</a> <a href=“Q2Blue.htm”>Go to Blue</a> <a href=“Q2Green.htm”>Go to Green</a> <a href=“Q2Yellow.htm”>Go to Yellow</a>
  • 6.
    Changing hyperlink colors •The colors to be used for the hyperlink are defined in the <body> tag using the following attributes: • <body link=“color”> – The link attribute indicates the color of the hypertext which are not yet visited by the browser.
  • 7.
    Changing hyperlink colors •The colors to be used for the hyperlink are defined in the <body> tag using the following attributes: • <body alink=“color”> – The alink attribute indicates the color of the hyperlink text while the link is selected.
  • 8.
    Changing hyperlink colors •The colors to be used for the hyperlink are defined in the <body> tag using the following attributes: • <body vlink=“color”> – The vlink attribute indicates the color of the hyperlink which are already visited.
  • 9.
    Example <body link=“blue” alink=“red”vlink=“purple”> These are the default hyperlink colors. Self defined hyperlink colors. <body link=“pink” alink=“pink” vlink=“pink”> For hyperlinks which do not change colors.
  • 10.
    Notes: (For Filesall in the same single folder) • When creating an intrasystem link to pages, documents, and files on the same folder, you could type in the entire URL. However, • If the disc is used on other system it might have a different name and it will not return your desired link. • Since the methods assignment are in the same folder, you can simply type the exact name of the files for the hyperlink. 
  • 11.
    Notes: (For Filesin different folders) • You might decide to keep things orderly, you will create different folders for each of your files. • This would require you to link from one folder to another. Again, the best way is to use relative links. • For example, your Home page is in the parent folder and your Page1 is in another folder inside the parent folder, you will include the name of the folder before the filename, separated by a backslash (). • Example: <a href=“SubjectsComputer.htm”>Computer</a>
  • 12.
    Absolute Links • Theseare hyperlinks connected to Web sites published on the WWW. • Anchor Tag <a> </a> • Attributes <a href=“URL”>Hypertext</a> Example: <a href=“www.google.com”>Go to Google</a>
  • 13.
    Mail to Link •This creates a link on the Web site that opens an email window. • href value Href=“mailto: emailaddress” • Example <a href=“mailto:mspoli@yahoo.com”> Send email to your teacher </a>