What is a web page?

• A file or set of files.
  • A file will contain XHTML markup.
  • Another file, linked to the XHTML file, will contain CSS styles.
  • Other files, also linked to the main XHTML file, may contain images and multimedia.
• We access files through URLs.
  • An absolute URL will have:
    • Protocol: often http or https.
    • Domain name: plantplaces.com indicates that this site is hosted at plantplaces.com.  A DNS server will map this to an IP address, which tells us where to find the server or servers that contain plantplaces.com files.
    • Virtual directory:  a directory that follows the / after plantplaces.com.  This is usually mapped to a much longer directory on the actual server that hosts plantplaces.com
    • A file.
• When we are within a web page file, we can map to other files using absolute or virtual paths.
  • http://www.plantplaces.com/faq.shtml is an absolute path. 
    • It's best to use absolute paths only when referring to material on another site.
  • Use relative paths for pages that are within your site.
    • If you use just a filename, the system will expect to find this file in the same directory as the current file. 
      • For example, the CSS link for faq.shtml on plantplaces.com is  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />.  Note that the href is styles.css, without any other directory information.  It expects to find this file on the same directory as faq.shml.
    • If you want to reference a file in a subdirectory of the current file, simply use the syntax directoryname/filename.  For instance, if I want to link to the start page of planttrials.com, which is in the directory trials, I would link to trials/index.shtml.
    • If you want to reference a file in a parent directory, use ../, which is the symbol for parent directory.
    • If you want to reference a file in a sibling directory, first navigate to the parent directory, then use a relative path to the sibling directory.  For example, this document is in the directory named 'CSSAndXHTML' on my UC Filespace page.  But, it is referenced from a page in the 'fotw' directory.  Thus, the reference is: ../CSSAndXHTML/anchortag.shtml.  The ../ takes us from fotw to the site root directory.  The CSSAndXHTML navigates to CSSAndXHTML.  anchortag.shtml is the file that you are currently reading.
    • Sibling directories can be tricky.  An easier approach may be to start the path with /.  By starting the path with /, you are starting at the root directory.
      • Root may be tricky, because it depends on your environment.  On UCFilespace, / takes you all the way back to ucfilespace.uc.edu.  Thus, to reference this page using root, I would enter /~jonesbr/CSSAndXHTML/anchortag.shtml.
      • An advantage of using root is that the links will still work, even if the domain name of the website changes.
        

Anchor Tag

We can reference other files with the anchor tag.  We use this tag and its href attribute to create a hyperlink.

Syntax:

<a href="http://www.plantplaces.com/faq.shtml">View the PlantPlaces FAQ</a> creates this: View the PlantPlaces FAQ

Note that I used an absolute URL, since the PlantPlaces FAQ is on an external site.  On the other hand, if I want to make a link within this site, I can do it like this:

<a href="cssintro.shtml">Introduction to CSS</a> creates this link, which links to a file in the same directory as the page you are currently viewing:  Introduction to CSS

When I added the PlantPlaces FAQ, I added this link to the side navigation:

<a href="/faq.shtml">Green FAQ</a>

We can also have links within a page.  For this, we use the name attribute to create an anchor, or an area where we want the link to take us:

<a name="alternativeenergy"></a>

This tag will not have a physical presence on the screen that the user sees.  But, we can link to this tag with this syntax:

<a href="#alternativeenergy">Alternative Energy</a>

This makes it easy to replicate a table of contents, similar to what you might see in a word processing program.  This is very useful when you have a long document with a lot of text, like our FAQ.  We'll use anchors in our FAQ.