You will construct a simple web page for this assignment. First a bit about web pages.
A web page is simply a text file with formatting commands interspersed. The commands, called tags, are enclosed in angle brackets "<" and ">". So, for example, you indicate a new paragraph with "<p>" (everything between the quotes, but not including the quotes). If the character immediately following the "<" is a slash "/", then the tag is a ending tag; otherwise it is a starting or beginning tag.
A tag surrounds what it applies to. So:
<title>This is the title of the web page</title>
displays "This is the title of the web page" as a title, because "<title>" is the starting title tag and "</title>" is the ending title tag. Warning: if you put a space between the "<" and the "/" (for example, "< / title>"), the web browser will not recognize this as an ending tag.
Web browsers are reasonably good at guessing what you mean when you leave off the ending tag. In fact, paragraph ending tags are usually omitted. Thus, you very often see:
<p>This is the first paragraph<p>And this is the second paragraph
which has the same effect as:
<p>This is the first paragraph</p><p>And this is the second paragraph</p>
But it's always better to put the ending tags in, because not doing so can produce the wrong formatting in some cases. The command "b" emboldens text, and "i" italicized text. When you combine the two, you get bold italicized text. Here,
<b>this is bold</b><i>this is italic</i>
displays bold text followed by italicized text, but
<b>this is bold<i>this is italic
displays bold text followed by bold italicized text, because the bold formatting is not ended.
Finally, case in tags doesn't matter. So the tags "<title>", "<TiTle>", and "<TITLE>" all mean the same thing.
A web page is composed of three parts: a DOCTYPE declaration (often omitted), a header, and a body. The language it is written in is called HTML. Here is the structure of a web page; you will change the parts in italics.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>replace with your document's title</title>
</head>
<body>
replace with your document's content
</body>
</html>
Many web pages omit the first two lines (the ones before "<html>". We browsers are generally smart enough to work without it, but on rare occasions you may have unexpected results. It's best to put it in.
Now let's look at some tags for your web page. The strength of web pages comes from the ability to link to other web pages. So, suppose you want to provide a link to the web page www.ucdavis.edu. In the body of your web page, put the following:
This is a link to <a href="www.ucdavis.edu">the UC Davis main web page</a>
Here, "a" is the tag, "href" is an attribute, and www.ucdavis.edu is the attribute value, in this case the web page that the text "the UC Davis main web page" is linked to. When a browser displays this, if the user clicks anywhere in the phrase "the UC Davis main web page" (which most browsers underline or display in a different color than the rest of the text), the browser will display the web page www.ucdavis.edu. Note the ending tag; it doesn't include any attributes. It tells the browser where the link ends.
Another tag is the image tag. It looks like this:
<img src="http://www.ucdavis.edu/images/common_home/home_logo_2.gif">
This causes the browser to display the image in the file, or at the web location, that is the value of the attribute "src". Note there is no ending tag; these are customarily omitted for "img".
Let's now build a very simple web page. Open Notepad (click on Start, then on All Programs, then on Accessories, then on Notepad). Type (or cut and paste) the structure of a web page (from "<!DOCTYPE" to "</html>") above into the Notepad document and save it as "index.html". Be sure you change the "Save as type" selection to "All Files"!
Now, replace the part between the "<title>" and "</title>" with "My First ECS 15 Web Page"
Your web page topic is "What do I like to do". It will have just a short introductory sentence, then a list of places you like, with links.
Start with a new element. Delete everything now between "<body>" and "</body>", but leave those tags. Put this after the beginning <body> tag:
<h1>My Favorite Things To Do</h1>
This is the heading element. The number is the level of the heading, with 1 being the top-level. You can have up to 6 levels of heading (that is, to <h6>).
Now type a short sentence or paragraph after this, like:
I like to do lots of things!
After this, you should put a list of things you like to do. An unnumbered list--sometimes called a "bulleted list"--begins with the tag "<ul>" and ends with the tag "</ul>". Each item begins with the list item tag, "<li>". Here's an example:
<ul>
<li>I like to <a href="http://www.imdb.com">go to the movies</a></li>
<li>I like to <a href="http://www.davisbikeclub.org">ride my bike</a></li>
</ul>
Notice how the list, and each of the list items, has beginning and endings tags. You should always put them in. Actually, if you omit the end list item tags "</li>", your list will be displayed properly. But don't leave off the end of list tag "</ul>", or the browser won't know when to end your list!
Also, notice that the anchor is nested within the list item tags. Overlapping tags may not work right. Avoid things like this:
<li>This is a <a href="http://www.ucdavis.edu/">poor bit of html</li></a>
Now change this into a numbered list. Replace the "<ul>" and "</ul>" with "<ol>" and "</ol>", respectively. Notice how the bullets become numbers.
To add an image to this document, find a picture you want to use, and save it in the same folder as your "index.html" file. If it is saved as "picture.jpg", add this to your document somewhere in the body:
<img src="picture.jpg">
If you want to learn more or try other things, there are three wonderful tutorials by Dave Raggett:
Please make a web page of your choosing. Name the web page file "index.html". It can be on any topic, but must contain:
You can use any program to create the web page, but we strongly recommend you use Notepad, as described above. Your index.html file must be clean and readable, that is, without unnecessary characters, tags, and formats.
To hand it in, create a ZIP file containing index.html and any pictures you include in your web page. Call that ZIP file lab5.zip. In the labs, you can use the FilZip utility to create the ZIP file. Go to Start, then to All Programs, then to Utilities, then to FilZip. In FilZip, go to File, then to New Archive, and create lab5.zip on the Desktop. Click the Add (+) button and select the files. Note that you must click two Add buttons before they are added to the archive. Save your zip file in MySpace, and also submit it to MyUCDavis.