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.
Connect to your GSLIS I: Drive via WebDAV (or SSH if you are so inclined).
Create a new folder in your "courseweb_html" folder named "constitution"
If you're using WebDAV, right-click and save the following html files into that folder:
If you're using SSH/SCP, I assume you have the technical expertise to get these files copied into the right place. The instructions I give in this lab assume you are using WebDAV, but you can complete this lab via SSH if you so choose.
Open up both files in a text editor (TextWrangler on the Macs in the lab), and in a web browser.
Note, you can open up the files in a web browser either directly through the filesystem, or via the following link (substitute your NetID for "netid" and the appropriate filename for "filename.html"): http://courseweb.lis.illinois.edu/~netid/constitution/filename.html
In order to link within a file, the first thing we need to do is create spots in the file which we can link to. In the articles.html file opened in the text editor, scroll down past the table of contents to the second-level header entitled "Preamble".
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".
Scroll up to the Table of Contents. Look for the Preamble in the ordered list.
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.
Save the file.
Reload the "articles.html" page in your web browser and see how it changes. Click on the "Preamble" link and see what happens.
Now repeat this process for each of the articles. It might be easier to make all the anchor points first, and then fill in the table of contents links, or vice-versa. The names of each anchor point must be different. NOTE: the names of the anchor points MUST NOT CONTAIN ANY SPACES!.
Save the file.
Switch to the "billofrights.html" file and repeat this process to create internal links within the file. Note: the names of these internal links can overlap with the names of the internal links within the "articles.html" file, but each name used within the "billofrights.html" file must be different.
Save the file.
If you haven't already, reload both pages and see what happened. Test all the links in both pages to make sure they work properly by clicking on them.
Now open up a new file in your text editor and name it "constitution.html". Save this file in the "constitution" folder on your I: drive.
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 places in the files:
<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">
Create an appropriately descriptive title and h1 header in the file. Use the titles and headers in the other two files as models.
Copy and paste the tables of contents from each of the other two files into the body of this file.
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).
Change the ordered lists into unordered lists. Create appropriate second level headers for each section.
Clean up the file or add features to the file so that it has a clear and clean display (i.e., delete unnecessary tags, add new tags, add text to establish context, etc.). You will be evaluated on the overall organization of the final "constitution.html" file as well as the correctness of the HTML you write.
If you have not already: Save the "constitution.html" file. Open it in a web browser, and check the links.
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.
Go back to the "articles.html" file and the "billofrights.html" file and add links at the top and the bottom which link to the "constitution.html" file. Make the text within the anchor tag meaningful: "Back to the Index of the Constitution of the USA" or something.
Add a link to the "billofrights.html" file at the bottom of the "articles.html" file.
Add a link to the "articles.html" file at the top of the "billofrights.html" file.
Add any other links you think might help navigation to any of the three files.
When you are satisfied, edit the URL in one of your browser windows so that your browser is pointing to: "http://courseweb.lis.illinois.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.illinois.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.illinois.edu
Note: the percent sign is simply a symbolic representation of the command line. You ought not type it. Start typing at "ssh".
The password you will be prompted for is your GSLIS password.
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
Now go to the browser window in which you edited the URL. Reload the page. The "constitution.html" file should appear. Note, however, that the link remains: "http://courseweb.lis.illinois.edu/~netid/constitution/".
Now edit the URL in the browser window to add "index.html". Your URL should now be: "http://courseweb.lis.illinois.edu/~netid/constitution/index.html". Hit enter, and the page will not change, nor will the URL change. If you substitute "constitution.html" for "index.html", again, nothing should happen.
You are now finished with the lab.
To submit this assignment, send me a URL to your "index.html" file.
Out of 25 points total.
Each anchor tag that was added in the "article.html" and "billofrights.html" files: 1/3 point each (14 points total)
Correct creation of the "constitution.html" file: 6 points
Good organization of all three files in both the plaintext and the rendered views, meaningful text in links, etc.: 3 points
Working "index.html" symbolic link: 2 points
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.