Lab 9: Web Page Creation In this lab you will be creating a web page. In a web page, the content (which you see) is mixed in with the formatting (which you don't see). The formatting controls things like paragraph breaks, pictures, links, and so on. In HTML, every formatting element is known as a tag. A tag is a word enclosed between the < and > symbols, like the following tag for a new paragraph:

An ending tag is just like the tag it matches, but begins with a This Is The Title Everything between and is, in fact, the title. There are a few exceptions, that is, tags that do not need an ending tag.

(paragraph) is an exception, as is
(paragraph break). Note that there cannot be spaces between the < and the tag name, or between the < and the / in an ending tag, so the following are not valid tags: < title> < /title> The tag names are case insensitive, so is valid, as is <TiTLe>. Every html document begins with a <html> tag, and ends with a </html> tag. What goes between these is the actual web page. Anything that appears outside of them will not show up if you open it in a browser. Documents usually have two main sections: a heading and a body. The heading defines the title, and may also refer to a stylesheet for the document (more on that later.) It is enclosed in a <head> </head> tag pair. The body contains what you really see on the web page, and it is enclosed in a <body> </body> tag pair. Two really useful tags are the tags for hyperlinks, the a tag (for anchor), and the tag for an image, img. Here is an example of an anchor tag: <a href="http://www.cs.ucdavis.edu/~franklin/ECS15/index.html">Course home page</a> Notice the name of the tag is a, but it has another thing after it, the href="class URL" bit. This is called an attribute: this anchor tag has an attributed, named href, whose value is the URL for the course home page, enclosed in quotes. The text between the beginning tag and the ending tag will show up as a link in the browser, and if you click on it, the browser will go to the location specified by the href attribute. And here is an example of an image tag: <img src=!1http://www.ucdavis.edu/images/common_home/home_logo_2.gif!1> This tag does not have an ending tag. It also has an attribute, the src attribute, that specifies where the image can be found. Create a Simple Document: Open notepad (Start -> All Programs -> Accessories -> Notepad) Type the following into your file: <html> <head> </head> <body> </body> </html> Save the document with the name "index.html", and be sure to change the "Save as type" selection to "All Files". This simple document has a heading section and a body section, both inside an html section. Now make it say something. First add a title. Between the <head> and </head> tags, add the following: <title>My Home Page (You can call it something more creative.) Now, a topic: how about a "What are my favorite pastimes" essay? It need not be very long, just a short introductory sentence, then a list of things you did, with links. Start with a new element. Put this after the beginning tag:

My Favorite Pastimes

This is the heading element: the number is the level of heading, with 1 being the biggest, and 4 being the smallest. Now type a short sentence or paragraph after this, like: This summer I!- After this, put in a list of things you did. Here is an example: Notice how the list, and each of the list items, has beginning and endings tags. Notice also how each list item as a link in it. You will want to do the same. It will make your page more interesting. Also, notice how the anchor tag ends before the list item. The following sequence of tags is not right:
  • This is a busted bit of html
    • Find a picture you want to include, and save it in the same folder as index.html. If it is saved as picture.jpg, add this to your document somewhere in the body: You can change the fonts, colors, etc. that a web page uses using the This defines a style section. The style section has some style elements that should apply to the body portion of the document. That is what the body { } statement does: anything in between the curly braces applies to the body section of the document. The first two lines in there are about the text color. They say that the color (of text) in the body should be navy, and the background color in the body should be #ffff66. That is the hexadecimal value of the red, green, and blue components of a color: ff for red, ff for green, and 66 for blue. As it turns out, this is yellow. The next line is specifying the font face for the body. It says the font should be sans-serif. The style section goes in the heading section of your document. Your expanded heading section should look like: Another thing you may want to do is specify left and right margins, with the margin-left and margin-right statements, e.g.: margin-right: 15%; Feel free to experiment with different styles to find one you like. For your lab assignment, make a web page of your choosing. Name the web page file index.html. It can be on any topic. It must contain: A title (2 points) A style section specifying a 10% left and right margin, some font face besides the default serif, and some color besides the default black-on-white (2 points each, 6 points total) Two different headings, with separate content under each heading (2 points each, 4 points total) An unnumbered list with at least two different items (2 points each, 4 points total) At least 4 links to other web pages (1 point each, 4 points total) At least one picture (2 points) We recommend you use notepad to create the web page. However, you can decide which software/editor to use to create the web page. We require your index.html file be clean and readable (5 points), e.g., without unnecessary characters/tags/formats. To hand it in, create a zip file containing index.html and any pictures you include in your web page, and name it lab5.zip (3 points). In the labs, you can use the FilZip utility to create the zip file. Go to Start->All Programs->Utilities->FilZip. In FilZip, go to File->New Archive, and create lab5.zip on the Desktop. Click the Add (+) button and select the file. Note that you must click two Add buttons before they are added to the archive. Save your zip file in MySpace. Use the e-drop for lab 5 in MyUCDavis to submit your zip file.