CompSci 4 Fall 2011
Beginning HTML

Sep. 1, 2011

10 points


This exercise is to be done with a partner.

Go Through Tutorial

You should go through the HTMl Tutorial here written by Sam Slee.

Other Tutorials for your reference are:

Start a Web Page

Last time you created a folder on your laptop called "compsci4" to store your work in this class. Inside that folder create a new folder for each days work. For today create a folder called "animalpages".

Now use "notepad" to start a new file. (If you are on a mac use "textedit" and see the Resource page about this under "Editing a .html file".)

Using notepad, create a web page named animal.html with the modifications that follow.

Modifications

  1. Your web page must have tags for html, head and body. A tag starts with a less than sign (<) and ends with a greater than sign (>). Most items have a beginning tag and an ending tag which looks the same but the ending tag also has a slash.

    You could type or cut and paste the following example into your empty animal.html file. The html tags must be first and last, the head tags go around the heading and the body tags go around the body of the web page.

    <html> <head> <title> CompSci 4: Your animal here </title> </head> <body> body here </body> </html>

    Decide on an animal to write about. Replace "Your animal here" between the title tags shown above (they appear in the heading) with the name of your animal, such as "Beaver".

    Save the file in your animalpages folder.

    After typing this all in, look at your animal.html web page using Internet Explorer (IE) to see if it looks ok. In IE, select "File", "Open", "Browse" and go to your animalpages folder and select animal.html to view.

    If you had chosen the animal "beaver" then your web page will look similar to the following. Note the two items circled in red, the title at the top "CompSci 4: Beaver" and the body has the phrase "body here".

  2. Create an H1 header tag with the name of the animal. Don't forget the ending H1 tag also.

    Note: After each step, make sure you save animal.html, and then look at with a browser to see if your modifications were done correctly.

  3. Put both your names on the web page (and all web pages you write).

  4. Write two short paragraphs, one about why you each decided on this animal, and the other with info about this animal that you find on the web (try using www.google.com to search for info). You'll need to use the p tag, that is: <p> put stuff here </p>

  5. Write an unordered list of other animals you both like. Use the ul tag.

  6. Write an ordered list of food this type of animal likes to eat. Use the ol tag.

  7. Write a definition list for three terms related to your animal.

  8. Put two long horizontal lines somewhere on your page.

  9. Include four links to pages on the web that refer to this animal.

  10. You should use the fonts bold, italic and courier (or typewriter) somewhere on your page.

  11. Copy the image below that Prof. Rodger created, and include the image in your document somewhere. To copy it, right click on it, select "save picture as" and then save it in your animalpages folder.

    Use the "image" html command to put the image in your document centered. Look at it via your browser to make sure it is displayed.

    Next include a link so that clicking on this image takes you to the Compsci 4 main web page.

  12. We will copy pictures you like from the web that relate to your animal (or anything close if you can't find it).

    Using your browser and a search engine, search for a picture of your animal that you like, save it and put it on your web page.

    If you want to modify the picture (such as crop it) then you can open up Paint (under programs, then accessories), modify it, save it and then put the modified picture on your web page.

  13. Change the background color and text color of your web page. (see Background Color) Make sure items are still easily readable! You will be taken off points if it is difficult to read your web page!

  14. Create a table with a border. It must have at least 3 rows and 3 columns and have something to do with your animal.

  15. Create a second table with no border and at least 3 rows and 2 columns and is somehow about your animal.

  16. Create a new page called background.html that has a few words of text and a background made out of multiple copies of your animal figure. (see Background Graphics). Link to this page from animal.html.

    How does Prof. Rodger (or anyone else) do her web page? Sometimes it is useful to copy html from someone else. In fact I rarely start a new web page from scratch, but rather copy an existing web page, and remove the stuff I don't want, and then add to it.

    You can see the html source that was used to create this web page. At the top of your browser, click on View, and then Source and a separate window pops up showing you the html for this page.

    Note: This doesn't always work well. If the person used a tool such as dreamweaver or frontpage to create the web page, view source doesn't help much as they put so much html into the page that it is difficult to figure out.

Copying your work to your Duke account

Before you leave class, you should copy your work over to your Duke web space. If you are working with a partner, you should both copy it over.

You will put these files in a directory on your account that will be viewable by others on the World Wide Web. Make sure you copy all the files in your animalpages folder (if you don't copy the images, they won't show up!).

DON'T USE Blanks in names of folders! They work, but make it harder to see the URL.

Note that the first class period in your Duke space you found the folder public_html and already created a folder compsci4 in it, and a folder named webpages in the compsci4 folder. You will put these files also in the webpages folder.

You can use webfiles.duke.edu to transfer the files over OR you can use a file transfer program you can get from OIT.

This describes a file transfer program.

  1. Start your file transfer program. (On the class laptops, to copy files over you will need to select "Start" from the bottom left corner of the window, then "All Programs", then "F-Secure SSH Secure Client", then "F-Secure SSH File Transfer". The window that appears will be split in two parts. On the left side, under Local Folders, click on "My Documents", then "compsci4" folder. You should see the "animalpages" folder you created.)

  2. Now you need to connect to a Duke machine . At the top of the window, select "File", then "Connect". You'll need to enter a machine where it says "Host Name:". A good machine to connect to is login.oit.duke.edu which connects you to some machine at OIT. Then beside "User Name:", enter your Duke netid, mine is "rodger". Select "Connect". Enter your Duke password and then you should see your folders on your Duke account.

  3. Now we need to find the webpages folder to put these new files in. Doubleclick on the folder "public_html", then click on the "compsci4" folder, then the "webpages" folder.

  4. We will now copy over your animalpages folder. Click the webpages folder from the laptop and drag it over to the folders for your Duke account. The folder should be copied over.

  5. Is your animal.html page on the web? If your user id is "abc3" then you can view your web page by entering the following address in a browser.
    www.duke.edu/~abc3/compsci4/webpages/animalpages/animal.html


    Easier, just type this part of the URL and then browse to the animal.html page.
    www.duke.edu/~abc3

If you don't finish this assignment in class, you should finish it for homework, and complete it by the time assignment 2 is due. Do not turn it in. We will just look for it on your web page when we grade assignment 2.

Once you do assignment 2 (due next week), you should both link to the animal.html page you created for this classwork.

OPTIONAL:

If you want to learn how style sheets work, check out this other tutorial: HTMl CSS Tutorial written by Sam Slee.