History of the Internet and WWW
Exercise: Hand-code your own page
Simple freeware WYSIWYG editors
Exercise: Make a page with AOLPress
HTML Basics
Jeff Williamson
Northern Virginia Community College
www.nvcc.edu/home/nvwillj/html-basics/
nvwillj@nvcc.edu
Link syntax and file naming
WYSIWYG editors generally take care of link syntax for you, but they will also foul up one or more links fairly often. Therefore you have to be able to read and understand hyperlink syntax.
Basic hyperlink syntax is a bit long but otherwise straightforward. The bold, red stuff is always required; the non-bold black stuff changes.
<a href="link desintation">Visible linked element</a>
The visible linked element can be an image or text. Since image tags are also a bit long, I'm just going to deal with links from text on these pages. Substitute an image tag for the text in any of the examples and everything would work the same.
Absolute links are the easiest links to make - just copy and paste a URL in between the quotation marks. Note that no relation is required between display and link elements:
<a href="http://yahoo.com">Visit Yahoo!</a><a href="http://www.pepsi.com">Visit Coke!</a>
The problem with absolute links is that they only work when your pages are on the web. Developers need to test and use their pages offline. So relative links are used much more often than abolute links.
Relative links are shorter than absolute links, since they only specify a filename:
<a href="page2.htm">Go to page 2</a>
Servers look for relative links in the same directory as the first page served from a destintation. I'll need to use a graphic to explain this:
 |
 |
Folder tree, view A
|
Same folder tree, view B
|
The diagrams above have the same information laid out in different ways. View A is a typical HTML editor folder tree view (Dreamweaver 1.2), while View B is my own sketch, which I think is a bit easier to follow.
If the contents of c:\my_page were uploaded to a web directory like www.college.edu/bclinton/, then index.htm - the blue highlighted file - would be the home page.
On most systems, index.htm or something similar is the default home page; when a server is given just an address, with no file name, it pulls up the index.htm page. Good developers exploit this by using index.htm as their home pages within each site and folder root. Because the index.htm does not need to be written out, this allows for shorter and more logical addresses, e.g.
- www.myisp.com/jeffw/ instead of
- www.myisp.com/jeffw/homepage.htm and
- www.myisp.com/jeffw/colors/ instead of
- www.myisp.com/jeffw/colors/colors.htm
A relative link from index.htm to favorite_colors.htm would look like this:
Read all about my <a href="favorite_colors.htm "> favorite colors</a>
What about a link to pink.htm? Because it is within the folder red, that
folder must be specified in the link.
<a href="red/pink.htm ">Pink</a> is my favorite color.
Note that a link to pink doesn't always need to be written this way - just in files one directory higher from pink.htm or at the same directory level in a different directory from pink.htm. (Remember that these are relative links - their syntax is relative to their position).
So the link to pink above would be the same from the root index.htm, my_favorite_colors.htm, both files in the blue folder, and index.htm in the red folder.
The link from pink.htm to indigo.htm would be similar to the link from index.htm to pink -
<a href="blue/indigo.htm ">Indigo</a> is also nice.
However the link from pink.htm to the root index.htm or my_favorite_colors.htm would be different:
<a href="../my_favorite_colors.htm ">My favorite colors</a> are listed elsewhere. (Note the dot-dot-dash at the beginning!)Here is a link from the site root page index.htm to the root page in the maroon sub-folder:
<a href="red/maroon/index.htm">Maroon</a>is my sister's favorite color.
And here is the link from the root page index.htm in the maroon sub-folder to the site root index.htm page:
Return to <a href="../../index.htm">home</a>
Links jump from page to page. Anchors change their viewing position within one page. You see these most often in alphabetical directories, where a link from "Z" at the top of the page brings you to the Zimmermans listed near the bottom of the page.
Anchors first require an anchor name. Anchor names are desintations and so must be unique on each page (you can't have two desinations with exactly the same names, right?) Anchors are placed at the desination of your link - where you want users to arrive.
<a name="z">Zimmerman</a>
Anchor links are placed at the origin - where you want users to depart.
X || Y || <a href="#z">Z</a> ||
Anchor names may also be added to relative or absolute links, to both open a page scroll to the designated anchor:
<a href="../marketing/directory.htm#zimmerman">Zimmerman</a> is the new vice president.
And what about links in frames? And what about opening up new windows with links?
I'll have to explain these when they come up; I'm out of time on this page.