|
|
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.
|