HTML 1 - Assignment 3
This week we learn about links. You will develop more web pages and link them together into a web site! Here is a list of the week's assignments:
- make and upload web site - 18 pts.
- contribute to message board - 2 pts.
Tip of the week: Use only lowercase letters and NO SPACES in your filenames!
Bad: MyFile.html
Good: myfile.html
Bad: my file.html
Good: myfile.html or my_file.html
Preparation:
-
Online lecture: - HTML 1, Week 3 - Links and File Management - play Index #9
- Text: Chapter 2
Text: Chapter 4b (pp. 138 - 164)
I strongly suggest that you do the exercises that run through the reading, especially the ones related to the lounge web site. You should start by downloading all of the example files for the entire text, so that you'll have them on your computer for future use. To download the files, go to http://www.headfirstlabs.com/books/hfhtml/index.php, scroll down a bit to where it says "Download the example files:", and click on Download the example files - "All the files in the book." If you have trouble downloading these, here is another place you can get the files you need to do the book exercises.
- Handout: Links and File Management
- PowerPoint Presentation (covered in online lecture): Week 2 Review
Validation Issues:
Important Note: One of the things about this course that frequently confuses students is that the text uses a lenient standard known as "transitional" HTML in chapters 1 through 5. After that, it switches to the more rigorous standard of "strict." However, I require you to use "strict" standards in writing your code from the beginning. To help alleviate this confusion, assignments 3 through 5 will each have a section titled "Validation Issues" to explain the differences between what you will read in the text and what you need to do when you write your code for the assignments. Here are the rules you need to understand.
- Empty elements must end with "space, slash, close-angle-bracket" instead of just "close-angle-bracket". An empty element is an element that has no content. (If you aren't sure what I mean by this, read page 100 in the text.) Examples of empty elements that you have seen in the text include the "img" element and the "br" element. Neither of these elements is required this week, so you can avoid this issue by just omitting these tags from your web pages.
If you must use the br tag, add a space and a forward slash just before the close-angle-bracket. For example, instead of
<br>
you would use
<br />
- The "target" attribute (pp. 157 - 159) is not allowed in strict XHTML. Just don't use it.
- Elements must carefully follow strict rules governing which elements can be nested inside which. Every element is categorized as either a block element or an inline element. The block elements we have seen so far are "p" and the heading elements ("h1" through "h6"). The only inline element we have studied so far is "a". (Other inline elements, such as "img", "br", "i", and "b" have popped up here and there in the text but you aren't yet responsible for them and don't need to use them in your web pages.) You cannot place inline elements or text directly inside the "body" element. All inline elements and text must be inside a block element before they can be used within the "body" element. Furthermore, neither the "p" element nor the heading elements allow other block elements to be nested inside them.
The rules get more complex as we introduce more and more elements. The rules are summarized on pp. 253 - 254 in your text. These 2 pages are probably the most important pages in your text. Get to know them.
For Credit (20 points total):
Important Note: This week you will be responsible for the following HTML elements. Do not use any elements that are not on this list.
- basic elements : html, head, body, title, and meta
- block elements: p, h1 - h6
- inline elements: a
- Create a web site with an index page (named index.html) and 2 to 4 second level pages. - 18 pts. total
I expect that most of you will use your (possibly improved) index.html file from assignment 2.1, but you can create a new one if you prefer. Again, the bottom line is that you should pick a theme for your site so that the pages work together logically. You could present your pets, your family, a good vacation, a hobby, or some other topic of interest. In Week 5 we will be including pictures in our sites, so a topic with good visuals would be nice.
At this point I suggest that you do not create any new folders, even though this is covered in the reading for this week. We will be creating new folders in Week 5.
I suggest that you use the HTML code from assignment 2.1 as a template for these (and all future) web pages. Just replace the title and the code that appears between the body tag and the /body tag...and also leave the code at the bottom of the body section that inserts the validation graphic.
Note that all text in the body of your document must be nested inside either a heading tag or a paragraph tag. There are other tags that the text can go inside, but we haven't studied any of those other tags yet.
Furthermore, the same applies to the <a> tag. This tag is an "inline" tag (more on this next week), so it must be nested inside a heading tag or a paragraph tag.
The following elements must appear somewhere on these pages:- At least 2 different heading tags - 1 pt.
- Several paragraph tags - 1 pt.
- At least 3 relative links (within your site). Your navigation bar (see below) will meet this requirement. - 3 pts.
- Absolute links to at least 2 different web pages outside your site - 3 pts.
- At least 1 jump (destination) link - 2 pts.
- At least 1 email link - 1 pt.
- Your reading this week does not cover email links, so go to this Resource Page for more information. On this page you will also find an easier way to create jump links.
In addition, the following requirements must also be met:
- Navigation bar - 4 pts.
A navigation bar is a horizontal row of links across your web page. You might separate the links with vertical bars called pipes (the key for this is just above the Enter key on the right side of your keyboard), or you can simply have space between them. Every web page must have a horizontal navigation bar at the very top that includes links to every web page in your site (including the current page!) The navigation bar must appear exactly the same on each web page, including the home page, with the links in the same order. Also, it must not change position when we switch between web pages. To do this you need to have the nav bar be the very first item after the open body tag. Write a p tag, followed by a link to the first page, then a link to the second page, and so on, and be sure to end your p tag. Copy this code to each of the other pages.
In addition, the nav bar should contain only links to other pages you have made. Do not include mailto links or links to other WWW sites. I would also like you to do one more thing with your nav bar that will make it easy on your visitors. I want you to take off the link code around the text for the page that you are on.
If we were on Page 1, the nav bar would look like this:
Page 1 | Page 2 | Page 3
Pretend we are now on Page 3. The nav bar will look like this:
Page 1 | Page 2 | Page 3
This is not to say that every well-designed web site will have this feature; however, it works well, is something you should try at least once, and it will make browsing your web sites easier for me and your fellow students, so I am requiring it of your sites.
- Page validates - 3 pts.
This means that when I click on the W3C graphic at the bottom of each of your pages, I should see a nice green bar and get the message "This Page Is Valid XHTML 1.0 Strict!" Remember that the button won't work directly until after you have uploaded your pages to the server! (In the lecture I demonstrate how to validate from home.)
- Participate in the Week 3 Discussion on the Message Board - 2 pts.