Aug. 29, 2013
10 points
You should go through the HTMl Tutorial here written by Sam Slee.
Other Tutorials for your reference are:
Last time you created a folder on your laptop called "compsci94" 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".)
Go ahead and create the web page file named animal.html with the modifications that follow.
Note that you will need to figure out how to do some of these things by looking them up in the w3schools tutorial above.
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.
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 a browser such as Chrome to see if it looks ok. 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 94: Beaver" and the body has the phrase "body here". NOTE: Nowadays, not all browsers may show the title.
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. It is much more difficult to you type everything in and then try to find and fix the errors.
put stuff here
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 94 main web page.
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.
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 by viewing the source. How to do that in a browswer changes a lot. In Firefox I was able to do it by selecting "Tools", then "Web Developer" then "Page Source". On Chrome I clicked on the three lines at the top right of the browser and then selected "Tools", "View Source".
Note: Sometimes when you look at the source it looks really messy. 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.
When your page is ready, you should copy your animalpages folder over to your Duke web space putting in your compsci94 folder that you already put in your public_html folder. If you are working with a partner, you should both copy it over.
Now these files, in particular, animal.html, 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!). In fact it is better to just copy the whole folder over.
TIP: DON'T USE Blanks in names of files or folders! They work, but make it harder to see the URL.
See the first classwork handout on how to transfer files from your computer to your Duke web space, and go ahead and copy the animals folder over.
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.
When you do assignment 2, you should link to the animal.html page you created for this classwork.
To make a change on your animal.html page, you will need to edit the file on your computer, then copy that file to your Duke web space and replace the old file.
If you want to learn how style sheets work, check out this other tutorial: HTMl CSS Tutorial written by Sam Slee.