Computer Science 180
Web Design

Fall 2011, Siena College

Home     Syllabus     Schedule

In this lab, you will learn about and utilize the current HTML/XHTML standards and will learn some additional CSS techniques.

In recognition of the upcoming exam (during lab next week!) you should be able to come close to finishing this during the lab meeting. All but the last couple of items may be done with a partner, if you wish.

(X)HTML and Validation

We have not been particularly specific about which version of the HTML standard our documents are using. We will change that today. There are two current standards: HTML 4.01 and XHTML 1.0. Within each, there are three options: Strict, Transitional, and Frameset.

To understand these options, recall that there are some HTML elements that have been deprecated - that is, removed from the standard. When using the Strict options, these elements are not permitted. When using Transitional, all HTML elements other than those associated with frames, which we will not use this semester anyway, are permitted. In fact, the only elements we have used which are not permitted in Strict are <center> and <font>, each of which can easily be replaced with styles.

So there are just two document formats we will consider: HTML 4.01 Strict, and XHTML 1.0 Strict.

Please read the HTML vs XHTML pages at w3schools.com. Read the page that comes up and the next two that come up when you click on "Next Chapter" (the pages titled "XHTML Syntax" and "XHTML Doctypes"). Read carefully and ask questions if you have any, because you will be responsible for the content of these three pages for the first exam. Take the quiz at the end.

Unless otherwise specified, all pages you create from this time forward should use the XHTML 1.0 Strict document type.

To ensure that your documents comply with the standards to be considered valid XHTML 1.0 Strict, you should submit each document you develop to the official W3C Markup Validation Service at http://validator.w3.org. Submission to the validation service resulting in no warnings or errors will be part of the grading criteria for all documents you submit from this time forward.

Practicing with XHTML and Validation

The page linked below is an XHTML document from a web page for a ficticious computer company:

sample_with_errors.html

Thanks to Dr. Breimer for the example.

While this document should display nicely in your browser, it contains a number of errors. Browsers try hard to do their best in the face of poor input documents, but we will aim to do better and to produce error-free documents.

Save a copy of this document in your folder for today's lab then upload it to your space on the course server. Submit the URI for validation to see what errors come up. Correct these errors and upload again. Continue until your document no longer generates any errors or warnings from the validator.

Place a link to your validated document on your main index (everyone should make the link, even if working with a partner).

More Practice with Styles

Save the style sheet sample.css for the document you just validated to your folder for this lab and upload it to your space on the course server.

Record your answers to the questions in this section to submit in an email when you are finished.

Creating a main container page

The following code will make your page look more like a page:

body {
  background-color: #999999;
}
div#main_container {
  width: 750px;
  margin: 10px auto;
  background-color: #FFFFFF;
}

Insert the code into your sample.css file, save, upload, and then view your page.

Q1. 10px is the top and bottom margin. auto is the left and right margin. What do you think auto means?

Styling the website title

div#header {
  background-color: #99CCCC;
  padding: 10px;
  border: 5px ridge #6699CC;
}

div#header h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 36px;
  font-weight: normal;
  text-shadow: #446688 4px 3px 5px;
  letter-spacing: 5px;
  color: #003366;
  margin: 15px 25px 0px;
  border-bottom: 2px solid #446688;
  width: 700px;
}

div#header h2 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 3px;
  color: #446688;
  margin: -3px 0px 0px 250px;
  border-bottom: none;
}

Insert the code into your sample.css file, save, upload, and then view your page.

Q2. What is the border style of the header <div>?

Q3. What do the values 4px 3px and 5px specify in the text-shadow property?

Q4. What do the four values mean for the margin property?

Q5. Why is the <h2> so far to the right?

Q6. The <h2> has a -3px top margin; Why do you think this is included?

Transforming a list into a horizontal menu

#website_menu {
  padding-top: 10px;
  background-color: #3366CC;
}
#website_menu ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
}

#website_menu ul li {
  margin-left: 0;
  margin-bottom: 0;
  padding: 5px 15px 2px;
  list-style: none;
  float: left;
  width: 120px;
  height: 30px;
  background-color: #3366CC;
  text-align: center;
}
#website_menu ul li a {
  color: #FFFFFF;
}

#website_menu ul li.selected {
  background-color: #FFFFFF;
  list-style: none;
  display: inline;
}

#website_menu ul li.selected a {
  color: #003366;
}

#main_content {
  padding: 15px;
  clear: left;
}

Insert the code into your sample.css file, save, upload, and then view your page.

Q7. The unordered list displays inline instead of block, which is the default display for lists. What is the difference between block and inline?

Q8. The <li> creates a bullet by default. Which property removes the bullet?

Q9. Notice that the <li> floats left. Change it to float right. Describe how this changes the menu's appearance.

Q10. The default color for hyperlinks, i.e., the <a> tag, is blue. Notice that this is overridden to be white, i.e., #FFFFFF. Why doesn't this change the other hyperlinks on the page, specifically the product categories menu?

Q11. The # symbol selects the id attribute. What does the . (dot) symbol select?

Creating logical boxes

div.notebook_info {
  border: 1px dashed #AAAAAA;
  padding: 0px 10px 10px;
  background-color: #DDDDFF;
  width: 500px;
  margin-bottom: 10px;
  font-size: 13px;
}
div.notebook_info h3 {
  margin: 0px -10px;
  padding: 5px 10px;
  background-color: #CCCCFF;
}
div.notebook_info h4 {
  margin: 8px 0px 0px;
  color: #333333;
  font-size: 12px;
}
div.description p {
  font-size: 12px;
  margin: 0px;
  text-indent: 10px;
}
div.details p {
  font-size: 10px;
  margin: 6px 0px;
}

Insert the code into your sample.css file, save, upload, and then view your page.

Q12. The code above decorates each notebook_info <div> so it looks like a nice box with a header. We also style the description and details <div>s. Notice that this does not style the featured product <div>. Why does the code above not change the paragraph in the featured product section?

The float property

div#products_menu {
  float: right;
}

Insert the code into your sample.css file, save, upload, and then view your page.

Q13. Based on what just happened to the products menu, what do you think the float property does?

Now copy the file float.html to your lab folder. No need to upload it to the server - you may work on it right from your local copy. But do bring it up in a browser.

Q14. Describe what you see when the page is rendered.

Unless we specify otherwise, a <div> element displays as block, which means they take up all the available horizontal space of the outer container. If the outer container was the <body>, then they would take up the entire width of the browser window.

Next, add a property to each box's style:

  display: inline;

and reload the page.

Q15. Describe how the rendered page changes.

The inline value for the display property makes the element (in this case a <div>) have the width of its contents. This is called a "left-to-right flow".

Now change the style of each box to use a block display with a fixed width:

  display: block;
  width: 200px;

and reload the page.

Q16. Describe how the rendered page changes.

Add a float property to each box's style:

  float: left;

and reload the page.

Q17. Describe how the rendered page changes. Pay special attention to the border of the outer container.

Note that setting the float property to left overrides the block property's effect on the width.

We can fix the problem with the border by making the outer container <div> also float left. Do this.

Q18. Describe how the rendered page changes. Again, focus on the border of the outer container.

Now, adjust the widths of your boxes and container so that all 4 boxes fit perfectly inside the outer container in a single row.

Then, make the pink box float right instead of left.

Q19. Describe how the redndering of the page changes.

Now, make the light blue box float right also.

Q20. Describe how the redndering of the page changes.

Finally, using changes to the float properties of the boxes only (i.e., do not change the order of the <div>s in the XHTML), make the page display in one line, from left to right, box 2, then box 4, then box 3, and finally box 1.

Add your name(s) as a comment at the top of the file (inside the <html> element, but before you start the <body> element). Save this final version of float.html and submit it by email. You need not upload this one to the server or link to it from your main index.

Better Main Index and "About Me" Pages

Please work individually on these final tasks.

1. Update your main index page (the one that comes up when you visit your main URI for the course, http://yourname.sienacs.com), to use the XHTML 1.0 Strict document format and to use some styles to improve its appearance. Your page should pass through the validator with no warnings or errors.
2. Create a new and improved "About Me" page like the one you did for the first lab. You may use your previous one as a starting point or start fresh. Your page should use the XHTML 1.0 Strict document format and some styles to improve its appearance. Your page should pass through the validator with no warnings or errors.

Submitting Your Work

Before 1:30 PM, Monday, October 10, 2011, submit your files for grading. There are three things you need to do to complete the submission: (i) make sure your pages are uploaded properly to the class web space and are available at your URI, (ii) update your main index on the class web space to have links to all documents you have created for this lab, and (iii) email a copy of your files to me at jteresco AT siena.edu. If you worked with a partner on any items, you need only upload to the account of one of the team members, but each team member should link to the pages on his or her own main index.

Grading Sheet

This lab is worth 30 points, which are distributed as follows: