LIS 390W1A :: Lab 8: Writing More HTML

Expected Knowledge

We have already covered a fair amount of material in this class. Because the lecture topics have been a bit scattered in order to cover the wide range of background knowledge that you will need to understand how HTML works fully, here is a list of things which I expect you all to know by next week. The quiz you will be taking on Wednesday of next week will cover a subset of the topics on this list, in addition to the material we will be covering this week and Monday of next week. Also, I expect you to use this knowledge when you complete your labs, and when you do your major assignments.

Note: this is not a comprehensive list of everything I hope you have learned in this class. Rather, it is a list of things I expect to see reflected in your work, and in your thinking in this class. For example, I hope that you have learned about the HTTP protocol. But I do not expect that you will have any occasion to demonstrate that knowledge in this or future assignments.

Know the Client Server model (covered in week 2).
Understand the importance of standards (covered primarily in lecture, all weeks, and is something we will keep returning to). This includes:
- Understanding the tradeoffs between adhering to standards, and using new innovations that have not yet been encoded in standards.
- Understanding when strict adherence to standards is not pragmatically possible due to how web browsers are implemented.
- Understanding that, if you are writing a web page that is even semi-professional in nature such as a personal home page (prospective employers will google your name; they will also check out your facebook and myspace profiles for that matter), it is best to adhere to standards as much as pragmatically possible because it raises the likelihood that it will be accessible to all who have an interest in reading it.
Understand File systems, URLs (how to read them), etc. (covered over several weeks, but especially in week 4).
HTML document form (covered in the lab writeups since week 1).
- In particular, this means knowing the general form:
```
<!DOCTYPE>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
					
```
- It also means knowing which tags belong in which sections (e.g., the <meta> tag and the <title> tag belong in the <head> section, the <p> tag and the <ul> tag belong in the <body> section, etc.)
Understand the distinction between descriptive/structural markup and procedural/presentatioinal markup:
- In particular, you should be able to give a verbal or written account of the difference, and you should be able to classify all the HTML tags you know into either category.
Understand the tag, element, attribute, & value distinction.
- The following is a tag:
```
<img src="bob.jpg" alt="A picture of Bob's head"></img>
					
```
  In this tag:
  
  "img" is the element (technically, it's the element name)
  
  "src" and "alt" are attributes
  
  "bob.jpg" is the value of the "src" attribute, and "A picture of Bob's head" is the value of the "alt" attribute.
Develop good markup practice:
- All XHTML tags must be closed (covered since week 1).
- Use good indentation practices both to remind yourself of the tree structure of HTML documents so that you make fewer errors, and to make your code readable to others who might have occasion to look at your source code.
- Use only HTML tags which provide structural/descriptive markup if at all possible.
- Use HTML tags in a manner which accords to their stated purpose. I.e., use definition lists for lists of definitions, tables for tables, etc. Use alternative or generic tags instead of tags with specific meanings if you want to accomplish a certain presentational goal.
Be able to write out a DOM/OHCO tree for any arbitrary snippet of HTML code, and be able to translate a DOM/OHCO tree into its corresponding HTML code (covered in week 5).

If you do not know everything in this list, then you need to make an appointment to talk to me outside of class, or learn it from your fellow students, friends of yours, readings on the web, etc. I will not be taking any more class time to cover these materials (except as otherwise noted).

Assignment

This lab is an exercise in writing your own HTML page from scratch. It is up to you to decide what the organization is, how the content should be structured, etc. You are required to follow good markup practice as defined above. You are required to include certain tags in order to demonstrate that you have learned how to use them properly. And you are required to answer certain questions. Aside from these requirements, how you encode the assignment is up to you. Feel free to experiment with the structure of your response, with new tags you are learning, etc. The responses do not need to be placed in a list.

The first purpose of this assignment is to ensure that you are learning how to use the HTML tags we are covering in class. Therefore, the following tags must be included somewhere in the page:

<img> - include an image of some sort. If you don't have any images, then find one on the internet that is licensed to be used in such a class project (and follow the terms of the license). Most Creative Commons licenses grant you such permission. To find appropriate images, you might want to check out the following links:
<pre>
<span> - it is likely that you will use this tag in a pretty arbitrary manner; that's ok. Just make sure you use it properly (e.g.: not <span><p>Look at my spanned paragraph!</p></span>)
<div> - use this tag to divide up your page into logical divisions of text.
<em>
<meta> - you must add at least one more meta tag in addition to the standard required "Content-Type" meta tag. See Ian Graham's Introduction to HTML: Meta Tag page for some examples of other uses of meta tags.
<blockquote>

In addition, you must use attributes with at least three different elements. Good candidates include the <img> element, the <div> element (use the "class" standard attribute to specify what the meaningful divisions of text are which you are enclosing), and the <blockquote> element.

The other purpose of this assingment is to obtain feedback from you about what you have learned so far and how well the class is going, and the questions you are required to answer relate to this purpose. You may not feel comfortable answering some of these questions, or you may wish to elaborate on your answers anonymously. Feel free to refrain from answering any particular question (though please answer the first question at least). In class I will be designating one of your fellow students to collect anonymous feedback. Please send that student the feedback so that they can compile it together and send it to me as a chunk.

Give a brief summary of the most interesting thing(s) you have learned so far. This does not have to include every last detail, but should demonstrate that you learned something.
- This question is might be a good candidate for using the <blockquote> element if you quote from the class website or your previous work, and the <pre> element to show some HTML you coded, or some commands you typed into the command line.
How do you think the class is going so far? Do you feel the pace is too fast, too slow?
- If you want, illustrate your feelings with an appropriate image or two.
Do you have any suggestions for how the class can be improved? If so, what are they?
What is the best aspect of the class so far?
What is the worst aspect of the class so far?
What (if anything) would you like to spend more time on?
What (if anything) do you believe was a waste of time?
How do you feel about the organization of the class? What would you do differently?

To complete this assignment, you may find the following links useful:

Submission

To submit this assignment upload the HTML file into either Netfiles or the GSLIS I: drive and then send me a URL.

Grading Criteria

Out of 25 points total.

Following good markup practice: 3 points
Correct HTML: 2 points
Including and correct use of each required tag: 2 points each (14 points total)
Including and using correctly attributes on three tags: 1 point each (3 points)
Quality of writing in question answers: 3 points

Navigation Menus

GSLIS & UIUC Links

General Course Links

Frequently Used Course Links

LIS 390W1A - Lab 8: Writing More HTML

Expected Knowledge

Assignment

Submission

Grading Criteria