The purpose of this lab is to create your own webpage using HTML and CSS. You should have read a HTML tutorial and a CSS tutorial from the prelab. When you're ready, follow the directions below.
You should have some HTML code ready from your prelab assignment. Now we're going to put that code online into your Duke provided web space. You can do this following these directions (with pictures) or follow the directions below.
After following the above directions you should have successfully created a folder inside your Duke provided web space. Naming the folder "cps1" just helps us find the code that you'll create for this class and seperate it from anything else that you might want to put in your Duke webspace. We would also appreciate it if, inside of the cps1 folder, you made separate folders for each of your submissions (lab1, lab2, etc.).
To get your webpage to show up inside your Duke webspace, all you have to do is save your .html file inside the public_html folder. Note that it also works to save it inside your cps1 folder since that's inside of the public_html folder. To view your webpage via the internet, open a web-browser (ie Firefox, Safari, Internet Explorer, etc.) and enter the following address in the address bar:
www.duke.edu/~xyz99/cps1/
Replace xyz99 by your Duke ID. This is how your Lab TAs will view and grade your labs, all of them. If your webpage code is not posted online or is not named so that we can identify which file you're trying to submit for your lab grade your TA may not be able to give you a grade. Thus, it is important that all students follow a uniform naming scheme.
In the prelab you were just supposed to get started using some basic HTML elements. Now we're going to request that you add a few more and use some CSS to add style to your page. In a separate file from your prelab1 submission, create a new file named lab1.html that you'll use for this lab1 submission. You can copy and paste any code you like from your prelab into your lab submission, we just want to be able to keep track of what you're turning in for each part. (Of course, you could create something entirely different for this assignment instead, if you wish.) In your new lab1.html file for this lab submission, please add enough to satisfy all of the 3 HTML requirements given below.
In addition to those new HTML elements, we'll now add a touch of CSS. Cascading style sheets (CSS) are one of the preferred methods for formatting webpages. Style sheets give web developers control over fonts, colors, and layout. The idea is that the document structure (usually written in HTML) should be separate from the document presentation (in CSS). This separation is useful in adapting pages to the whatever web browser is being used and improving accessibility.
If you haven't already, read through the course CSS Tutorial or look through other CSS tutorials linked on the Prelab 1 page. Once you have an idea of how to use CSS, use your new skills to include enough to satisfy all of the 5 CSS requirements given below. Include at least one of each:
Note that the last requirement is intended to make you put in "conflicting" rules so you can see which rule gets precedence. Remember that you can target instances of an HTML element not just with the tag name, but also with what other elements it is contained within or by using a class or id attribute to distinguish it.
You will need to submit this list for every lab. If you do not turn in this list, you will have many points taken off.
When you finish changing your page, make sure you saved the final version and then start shutting stuff down. You mostly start hitting the little X's in the upper right-hand corner of each window. If you are about to destroy something important, you will get a warning, so do it carefully. Make absolutely sure you do not leave any windows open! If you do, anyone who walks by feeling malicious can get you in trouble. And that's it. You're done!
LOGOUT OF YOUR MACHINE BEFORE LEAVING THE LAB! (Double-click the Logoff icon on the Desktop)
Check the readings from the HTML tutorial or see the tutorials linked on the Prelab 1 page for more information. Also, raise a hand and ask the instructor or the TA.
When given a web-address which ends in a folder name like www.duke.edu/~xyz99/cps1 (where cps1 can be any folder), by default the browser looks for an html page named "index.html" so make sure you have named your file correctly. (All letters should be lower-case)
If you want to name your html page something other than "index.html" then the path to that page should be given with the name of the page included.
e.g.: www.duke.edu/~xyz99/cps1/not_named_index.html
Also, the address to your web folder (which is your public_html folder) is www.duke.edu/~xyz99/ . Although, you might choose to have a lot of folders and data on your ACPUB account (which is ~ 70 MB for me, I think) only the files/folders which you create or copy into the public_html folder will be accessible over the internet.
This lab is an introduction to HTML that uses a basic approach to creating HTML webpages. Later, we will see how to do some more tricks with CSS presentation.
The lab has been partially adapted from the Spring 2006 cps001 HTML lab. That lab pas produced by Siddhesh Sarvankar.