Lab 1: Creating WebPages

Lab Overview:

                 Eclipse is an Integrated Development Environment we will use in this class to create and run Java applets. In general, an IDE is a package in which various tools which the programmer/developer might find useful are integrated to collaborate with each other. The most basic of such IDE can be one with a Compiler, Debugger and a Text Editor. You will learn the definitions and uses of these in future labs.

                You will use the text editor provided by eclipse to create a basic HTML webpage.

General Information:

This lab lets you earn points by making yourself a part of the web with your own home page. If at any point the instructions on this lab sheet do not make perfect sense to you, raise your hand and a TA will save the day.

For future reference, it's a good idea to check your the discussion boards before coming to lab each week. When we notice a common problem in other sections, your TAs may post a message to the discussion board.

Set up cps1 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 cps1.

Getting started:

  1. Start (or Launch) Eclipse by: Start -> Programs -> Eclipse -> Eclipse.
  2. Eclipse will start. Close any welcome messages.
  3. 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.
  4. To create a new project, click on File (top left of your eclipse window) and follow File -> New -> Project. to click on Project.
  5. 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.
  6. 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" .
  7. 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.
  8. 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.
  9. 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 .
  10. 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.
  11. 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:
  12.                                 <html>
                                    <body>
                                    <h1> This is a Major Heading </h1>
                                    <ul>
                                    <li> List item one
                                    <li> List item two
                                    </ul>
                                    </body>
                                    </html>
  13. Save your text (use diskette icon or use file menu).
  14. 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 prelab, you should be able to do much better.

 (Note that, all the jazzing-up you do should add html tags and text between the two <html> and </html> tags already on your webpage.) You may remove the tags mentioned in the step 12 and replace them with your own, the tags mentioned in those steps are just to ensure you get atleast a basic web-page ONLINE!

Your TAs probably don't write HTML code on a regular basis, so if you have specific questions, like "how do I put a table on my page," the online notes are generally the best spot to look for an answer.

To get full credit, you MUST add a all of the HTML features mentioned below

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.)

  1. To export your lab1 project, Right-Click on lab1 in the Navigator window and click on Export. A new window will appear titled Export.
  2. Choose File System as the export destination and click Next.
  3. 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.
  4. 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.
  5. Hit the Finish button in the original "Export" window. A progress bar will apprear 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:

  1. Change the color and size of your <H1> tags to be red and 18pt.
  2. Make the bullets in your unordered lists become squares.
  3. 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 prelab for more help on HTML.

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, like your TAs, you will find it much more convenient to create HTML documents using some proprietary software specifically meant for creating webpages. The most common of which are MS FrontPage and Dreamweaver.

Siddhesh Sarvankar ( siddhesh@cs.duke.edu )