The Assignment
This assignment deals with lecture material covered in class during classes 5-7. Review your class notes, consult chapters 1-3 of the textbook, and set up your course web site with one web page as follows:
-
Make sure you can log into your account and save your work in the TREE domain.
You should have done this already, but if you have not already done so, be sure you can log into your account in SB A-205, the Computer Science Department’s “TREE Lab.” Information on how to do this, both from within the lab and from off campus, is available at the TREE Lab Information web page.
If you log in from off-campus, you have to put
TREE\
in front of your user name in order to log into the TREE domain. If you leave it out, the system will not let you log in.Be sure to test the “roaming profile” feature described in that web page.
-
Set up your web site in Dreamweaver
We went over this in class, but now is the time to be sure you can do it. There is a web page, Dreamweaver Setup that will guide you. But that web page was written for Dreamweaver CS4 and XHTML 1.1, and has not yet been updated for Dreamweaver CS5 and HTML5 yet. So there will be minor differences between what is there and what you will actually encounter in the lab. In particular, ignore everything it says about template.zip and template.xhtml for now.
Set up your My Website directory as your site’s local directory, and C:\htdocs as the remote server, as demonstrated in class on September 23.
-
Create an index page for your web site
Create a new HTML document named index.html (not index.xhtml). Open it in the Dreamweaver code editor, and edit it so it looks like this:
<!doctype html> <html lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> </body> </html>The two significant differences between the above code and what you might get when Dreamweaver creates the file for you are:
-
The code you are to use is properly indented to show the nesting structure of the elements. Indenting
your code properly is a requirement for all code you submit for assignments in this course.
Proper code indentation is a requirement, but you have to get everything else right before I start enforcing it.
- There is a lang attribute added to the html start tag. As mentioned in class, this is to aid screen readers pronounce the text in your web page correctly, but will not otherwise affect it.
-
The code you are to use is properly indented to show the nesting structure of the elements. Indenting
your code properly is a requirement for all code you submit for assignments in this course.
-
Add a title and heading to your web page, and make sure you can view it.
Make up a clever title for your web page, and put it in the title element. Repeat the same text as the content of an h1 in the body part of the page.
Save your web page, and verify that you can view it (using whatever browser you like) using “tilde notation” in the URL.
Save your web page to the “remote” server, and make sure you can access it from your computer’s document root.
-
Add some paragraphs of dummy text and an ordered list to your web page.
Go to the web site, lipsum.com. After you read the page and learn what it is all about, click the “Generate Lorem Ipsum” button to generate 5 paragraphs of Lorem Ipsum text. Copy just those five paragraphs of Latin text into your web page, inside the body, right after the h1 element. Enclose each paragraph in paragraph tags.
These paragraphs will make your code very hard to read and will totally destroy the indentation structure you set up at the beginning. Add line breaks and indentation to make the paragraphs nested inside the body, and the Latin text indented inside the paragraph tags. Select all the code in your web page (
, right-click, and choose the menu to convert all the tabs to spaces.Save your web page and view it in a browser. Make sure the paragraphs look like paragraphs, not just run-together text.
Add an ordered list to the end of your web page (after the paragraphs, but inside the body) with three list items. Put a few words of dummy text in each list item. Make sure the code is indented properly, convert the tabs to spaces, save the file, and check to make sure it looks right in a browser.
Submit The Assignment
When your page is ready for me to review send an email message to
Christopher.Vickery@qc.cuny.edu
with CS-081 Assignment 2
as the Subject line. All you have to do is to put your name in the
body of the message so that I know who sent the message. I will then copy your website from your profile on
the server (oak) in the lab to the web server on babbage, where I will verify that it works correctly.
- The web server on babbage is on a case-sensitive file system. That means that if you don’t capitalize file and directory names exactly right, your site will no longer work when it is copied to babbage, even though it may have worked perfectly well in the lab, where the file system is case-insensitive. Be sure the name of you web page is index.html using all lowercase letters.
- Your site will not be copied to the DocumentRoot on babbage: make sure that all links in your site use relative, not absolute, pathnames. This is not an issue for this assignment (there are no links), but important to keep in mind for future assignments.