Lab 1 : Building Web Presence

Lab Overview

• Become acclimated to the lab environment
• Learn and practice some HTML
• Set up a webpage online in your Duke provided space.

The purpose of this lab is to create your own webpage using HTML. You should have read a HTML tutorial from Assignment 0.

Lab Procedures

• Lab policies
• Lab resources

Setting up a cps001 Folder on ACPUB System

1. Double-click My Computer.
2. Double-click P: from your Network Drives (P, Q and H)
   (If you don't see a P: Drive, goto Start(at the bottom left of the screen) -> Search -> For Files or Folders and search for afsdrivemapxp.vbs and execute it. (i.e. double click on it.).Your P: drive should appear along with your other network drives.
3. Double-click public_html. folder.
4. Right-click -> new -> folder.
5. Name it cps001.

After following the above directions you should have successfully created a folder inside your Duke provided web space. Naming the folder "cps001" 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 cps001 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 cps001 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/cps001/

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.

Create a Webpage

1. Creating your First Webpage
2. HTML Tutorial>

Webpage Content

1. Name
2. Lab section
3. Year
4. Hometown
5. Something biographical and hopefully interesting
6. Link to an interesting site related to computer science
7. Answer the following questions
   1. The premise that our society is different from what it would have been without the computer revolution is generally accepted. Is our society better that it would have been without the revolution? Is our society worse? Would your answer differ if your position within society were different?
   2. By creating a web page, you have established or added to your web presence. Search for your name using your favorite search engine. Link to any pages that may be part of your web presence. Link to someone who you believe has a good web presence. Explain why it is good. Link to a page for a person or organization that you feel has a poor web presence. Explain.

Webpage Style

1. Text: change the typeface to bold or italic and change the color of the text or background
2. List
3. Table
4. Image: use a picture of yourself online if one is available
5. HTML comments (describing or identifing parts of your HTML code)

Extra Credit

Read through the course CSS Tutorial or one from the web such as this CSS Tutorial from W3C or another CSS Tutorial from W3 schools. 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:

Pieces To Turn In (2)

• Change the default text color in some HTML element.
• Change the default background color or set a background image for some HTML element.
• Modify the margin, padding, and border of some HTML element.
• Change the default font family of some HTML element.
• Have different presentations for at least two instances of the same HTML element type. (Example: one instance of the <p> element with red text and another instance of the <p> element with blue text.)

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.

Submitting

You will need to submit this information 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)

Extra Help

Check the readings from Assignment 0 or the tutorials linked above. Also, raise your hand and ask a TA for help.

In addition to the readings, some other things to remember are:

When given a web-address which ends in a folder name like www.duke.edu/~xyz99/cps001 (where cps001 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/cps001/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 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 adapted from the Spring and Fall 2006 labs developed by Siddhesh Sarvankar and Sam Slee.