In this lab we will be going over some of the basic tags in HTML 5. We will do this by inserting them in some existing, partially coded HTML files. These files are probably not the best fit for some of the tags, so be warned that these are for example purposes only, and when you do this for real in later assignments, your pages will probably look a bit different.
We will spend a bit of time linking, and also introduce some HTML elements including HTML 5 elements.
Partial instructions for the lab follow. For most of the tags, if you are not in class, you will have to use your best judgment for how to include them.
In your local workspace, make a new folder called "constitution"
Right-click and save the following html files into that folder:
Open up both files in a text editor (TextWrangler on the Macs in the lab), and in a web browser.
Add <h1> and <h2> headers to the file to create the appropriate headers.
Create an ordered list for the table of contents using <ol> and <li>.
Add the following structural HTML 5 tags to the document in the appropriate places (see the HTML 5 Diff document):
Linking: 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 (doctype, header, body, etc.). Remember to include the following in the proper places in the files:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
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 by replacing the <ol>s with <ul&tl;s. 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.
In all three files, "articles.html", "billofrights.html", and "constitution.html", add navigation links within the <nav> tag at the top which link to all three files. Make the text within the anchor tag meaningful.
Add links at the bottom of the file as well that will help a viewer of your pages navigate between them.
Add any other links you think might help navigation to any of the three files.
Add some information to the <footer> tag that identifies you as having created the format but not the content of the website.
When you are satisfied, SSH into to your GSLIS I: Drive, create a new folder in your "courseweb_html" folder named "constitution", and scp your files over:
In terminal window 1:
% ssh netid@classrm03.lis.illinois.edu % cd /homei/users/netid/courseweb_html/ % ls % mkdir constitution % ls % cd constitution % pwd
In terminal window 2:
% cd constitution % ls % scp * netid@classrm03.lis.illinois.edu:/homei/users/netid/courseweb_html/constitution/
Back in terminal window 1:
% ls
Past this URL in one of your browser windows (making the appropriate edits):
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.
In terminal window 1, create a symbolic link:
% ls % ln -s constitution.html index.html % ls
You have now created a symbolic link named "index.html" which links directly to "constitution.html".
Now go to the browser window in which you pasted 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. Write up your experience (250-500 words) and what you learned in the email you send me with the link to your lab.
To submit this assignment, send me a URL to your "index.html" file.
Out of 30 points total.
Correct HTML in the "article.html" and "billofrights.html" files: 7 points each (14 points total)
Correct creation of the "constitution.html" file: 7 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: 3 points
Write-up: 3 points
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.