CompSci 004 Fall 2005
Beginning HTML
Sept. 1, 2005
5 points
This exercise is to be done with your partner. You should continue to use the same
partner until you are instructed to use a new partner.
You should go through Part 1, Part 2 and Part 3
of the HTML tutorial listed
here and provided for you as a printout.
It is an old tutorial, but still good for basic
html. Mosaic is an
old web browser that probably doesn't exist anymore.
Start a Web Page
If you are using a class laptop, then first create a folder to work in.
Go to "My Documents" and create a folder called "compsci4" if one does
not yet exist. Inside that folder, create a folder called "webpages".
Now use "notepad" to start a new file.
Using notepad, create a web page named animal.html
with the modifications that follow.
Modifications
- 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 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.
CompSci 4: Your animal here
body here
Decide on an animal to write about.
and the name of the animal you decide 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 webpages 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 webpages 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".
- 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.
- Put both your names on the web page (and all web pages you write).
- 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:
- Write an unordered list of other animals you both like.
Use the ul tag.
- Write an ordered list of food this type of animal likes to eat.
Use the ol tag.
- Write a definition list for three terms related to your animal.
- Put two long horizontal lines somewhere on your page.
-
Include four links to pages on the web that refer to this animal.
-
You should use the fonts bold, italic and typewriter somewhere on your page.
- 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 webpages 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.
- 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.
- 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!
- Create a table with a border. It must have at least 3 rows and 3 columns
and have something to do with your animal.
- Create a second table with no border and at least 3 rows and 2 columns
and is somehow about your animal.
- 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 OIT account. 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 webpages directory.
- To copy files over you will need to select "Start" from the bottom
left corner of the window, then "All Programs", then "SSH Secure Shell",
then "Secure File Transfer Client".
The window that appears will be split in two parts. On the left side,
under Local Name, click on "My Documents", then "CompSci 4" folder. You should
see the "webpages" folder you created.
- Now you need to connect to your Duke OIT account. At the top of the window,
select "File", then "Connect". You'll need to enter a machine where it
says "Host Name:". Enter
"godzilla.acpub.duke.edu" or "teerX.acpub.duke.edu" (where X is a number
1-25, such as teer18.acpub.duke.edu). Then beside "User Name:", enter
your Duke login, mine is "rodger". Enter your Duke password and then you
should see your folders on your Duke account on the right side of the window.
- Now we need to create a place to put your files so they will be seen on
the web. On the right side of the window, doubleclick on the folder
"public_html". There may be nothing in it if you have never put anything
in it before. Let's create a folder for all your CompSci 4 items.
Near the top of the window, select "Operation", then "New Folder". It
will create a new folder in your Duke files, type the name "compsci4".
- Double click on the folder compsci 4. It is empty. We will now copy
over your webpages folder. Click the webpages folder on the left side of the
window and drag it over to the right side of the window. The folder should
be copied over.
- 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/animal.html
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.