Lab 1 : Building Web Presence

Lab Overview

Learn HTML and make a Webpage
Learn how to use Eclipse

The purpose of this lab is to let you learn HTML programming and make your own webpage. First, read the HTML tutorial. While you're using that you can use any text editor (including Eclipse) to write your HTML code. When you're ready to try Eclipse, follow the directions below.

Set up cps1 Folder on ACPUB System

Double-click My Computer.
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.
Double-click public_html. folder.
Right-click -> new -> folder.
Name it cps1.

Getting started:

Start (or Launch) Eclipse by: Start -> Programs -> Eclipse -> Eclipse.
Important! Just after the Eclipse banner, you will see a window asking you to select the eclipse workspace. You need to change the workspace path. Hit the Browse button. In the next window, browse to "AFSDocs..."(H:). Create a new folder in the H: drive and name (rename) it "eclipse". Hence, your Eclipse workspace should be "H:\eclipse". You are required to do this every time you start Eclipse after logging on to a computer. Files stored on your "Network Drives" will be permanent and files stored elsewhere (C, D drives) will be lost when you log out.
Eclipse will start. Close any welcome messages.
Each of the labs you do this semester will be in the form of an Eclipse project. In this lab you will create a simple one.
To create a new project, click on File (top left of your eclipse window) and follow File -> New -> Project. to click on Project.
A new window will pop up titled "New Project". Among the various wizards mentioned here, you will click on Simple -> Project. and click on Next button.
You will now be prompted for a project name. We will follow a very very strict naming scheme in all the labs, so be careful when naming your files and projects. Name the project "lab1".
Now you can see a project folder called lab1 in your "Navigator" window. (The name/title of every window is the text written on the top colored bar (by default blue) of the window.) When you click on the "+" next to the project folder, you will see its contents.
>Now you have to create a new file in this newly created lab1 project. To do this Right-Click on the project folder (i.e. lab1) and follow New -> File and click on File.
A "New File" window will now show on the screen with the default parent folder for the new file as lab1. Enter the name of the new file as index.html and hit Finish .
A new file index.html will now show among the contents of the lab1 project folder and a new browser window will pop up (Browsers are tools we all use to access the website on the internet, the most common ones are Internet Explorer, Netscape etc.) Browsers do not let you modify the source or original text in the webpage and hence you see a blank page. Close this browser window.
Right-Click on index.html and follow Open With -> Text Editor . This will open the index.html file in you center window. Enter the following HTML code into this file:
HTML Code
```
<html>
   <head>
      <title> My first webpage </title>
   </head>
   <body>
      I just produced my first webpage.
   </body>
</html>
	
```
Save your text (use diskette icon or use file menu).
That's it! You have created a webpage. To see how people viewing your webpage from the internet will see it as, Right-click on the index.html file in the Navigator window and click Open With -> Default Editor . The webpage will open in a browser (most likely Internet Explorer which is default application for HTML files on the Old Chem machines.

Jazzing It Up

Your webpage will look a little dull at this point. based on your readings from the HTML tutorial, you should be able to do much better. Choose a topic and make a webpage of your own. A good idea might be to design a page about a hobby of yours. Any subject will do. Just include at least one of EACH of the following HTML elements (and use them properly) in your webpage:

Title
Paragraph
Image
Link
List
Table

Uploading the Webpage:

The webpage you created in still inside your IDE workspace. This means, your index.html is stored by eclipse and is accessible only by you. You have to store this webpage in a Webfolder which is accessible to everyone via the internet. All duke ACPUB accounts have a public_html folder by default. This is where you have created your cps1 directory and you need to store your index.html file in this.

You have to export this project from the eclipse workspace to the windows File System. (If all this sounds confusing, just follow the instructions below and you won't have to understand this "workspace" concept as of now.)

To export your lab1 project, Right-Click on lab1 in the Navigator window and click on Export. A new window will appear titled Export.
Choose File System as the export destination and click Next
The next window will show up which project and which files are chosen to be exported (i.e. the ones with a check mark next to it.) More importantly this window asks you to enter a destination directory. Click on the Browse button next to the TextField.
In the new window which appears, choose My Computer -> xyz99 on 'Afs\acpub\users..(P:) (ie your P: drive) -> public_html -> cps1 and hit OK button.
Hit the Finish button in the original "Export" window. A progress bar will appear and the Export window will disappear. You have successfully exported your lab1 project.

You can view your index.html file locally (i.e. via the File system) by clicking on My Computer on the desktop and choosing
My Computer -> P: drive -> public_html -> cps1 -> lab1 and then clicking on the index.html file.

To view your webpage via the internet, open a web-browser (ie Internet Explorer , Netscape etc.) and enter the following address in the address bar:

www.duke.edu/~xyz99/cps1/lab1/

Replace xyz99 by your Duke ID. This is how your Lab TAs will view and grade your labs, all of them. They will not be able to see your webpage if you have named it something other than index.html or named the project something else or exported the eclipse lab1 project to a location other than P:\public_html\cps1 . Hence it is required all the students follow a uniform naming scheme.

Wrapping up:

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 Credit

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 preseentation (in CSS). This separation is useful in adapting pages to the whatever web browser is being used and improving accessibility.

Style sheet syntax is made up of three parts: a selector, a property, and a value in the following order.

selector {property:value}

The selector is the tag or element to be defined, the property is the attribute of that selector to be defined and that property has a value. For example,

h1 {color:blue}

sets all <H1> tags to be blue, while the following:

h2 {color:blue; font-size: 14pt}

sets <H2> tags to be blue and of 14 point size. Check out the CSS Introduction by W3schools (http://www.w3schools.com/css/css_intro.asp) for more information.

For extra credit, create a style sheet for your webpage to do at least the following:

Change the color and size of your <H1> tags to be red and 18pt.
Make the bullets in your unordered lists become squares.
Change the color of links so that links that you hover over are red and visited links are grey.

HELP:

Check the readings from the HTML tutorial or see the tutorials linked on the course resources page for more information. Also, raise a hand and ask the instructor or the TA.

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/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 being an introduction to HTML, we have used a bare-bones approach to creating html webpages. In future lectures we'll see how to do a better job with CSS presentation.

The lab has been adapted from the Spring 2006 cps001 HTML lab. That lab pas produced by Siddhesh Sarvankar.