In this lab we will be going over the basic forms of hyperlinking in HTML. First we will be linking within files. Then we will be linking between files. Finally, we will be linking to external web pages.
Right above the header, insert an anchor tag of the following form:
<a name="preamble"></a>
This anchor tag creates an anchor point in your HTML that has the name "preamble".
Insert an anchor tag such that the final form of the Preamble list itme is as follows:
<li><a href="#preamble">Preamble</a></li>
The hash mark (number sign) in the href attribute indicates that the link is to an internal anchor point in the document.
Create the basic HTML structure which you create for the labs you write up and turn in (header, body, etc.). Remember to include the following in the proper order:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Edit them so that the list items have the following form:
<li><a href="articles.html#preamble">Preamble</a></li>
Note, the form of this link means: link to the file "articles.html" that is located in the same directory as the "constitution.html" file that is being edited, and within the "articles.html" file link to the anchor point named "preamble" (as designated by the hash).
Add a link in the "constitution.html" file of the following form:
<a href="http://www.archives.gov/national-archives-experience/charters/constitution_transcript.html">US National Archives Constitution Page</a>
Make sure you add this link in a logical place in the file. This link is a link to an outside resource, so relative linking is not possible. Therefore, a full hyperlink must be used to create this link.
When you are satisfied, edit the URL in one of your browser windows so that your browser is pointing to: "http://courseweb.lis.uiuc.edu/~netid/constitution/". Remember to substitute your NetID for "netid". What happens? Nothing is displayed. How do we fix this? By creating an "index.html" file in this directory. Now, we could have just named the "constitution.html" file "index.html", but when you are editing multiple "index.html" files in multiple directories at the same time, it becomes difficult to sort them out. Therefore, we will create a symbolic link that will automatically direct browsers from "index.html" to "constitution.html" in a completely transparent fashion.
Open up a terminal window or open an ssh client (if you are working at home from a windows machine). Connect to "netid@classrm04.lis.uiuc.edu"; be sure to substitute your NetID for "netid". To do this from the command line, type the following command and hit enter:
% ssh netid@classrm04.lis.uiuc.edu
Note: the percent sign is simply a symbolic representation of the command line. You ought not type it. Start typing at "ssh".
Once you have logged in successfully, in the command line in your ssh connection, change directories by typing in the following command and then hit enter:
% cd /homei/users/netid/courseweb_html/
Remember to substitute your NetID for "netid". You will now be in the "courseweb_html" directory on your I: drive.
Now change directories to the "constitution" directory:
% cd constitution
List the files in the current directory:
% ls
Now create a symbolic link by typing in the following command and hitting enter:
% ln -s constitution.html index.html
You have now created a symbolic link named "index.html" which links directly to "constitution.html".
List the files in the current directory again:
% ls
To submit this assignment, send me a URL to your "index.html" file.
Out of 25 points total.