COMP5347: Web Application Development
Week 2 Tutorial: HTML and CSS
Learning Objectives
• Get familiar with basic HTML elements
• Understand how CSS style is applied to one or a group of elements
Tasks
Download week2.zip from the eLearning site (Canvas) and extract it to a collection of start
files. This should include a base HTML file: week2.html, a simple CSS file: week2.css
and a folder called images. Your task in this week’s lab is to update the given week2.html
to make it looks similar to figure 1. You will need to update the content of the page
by adding some elements and to make changes on existing elements to let them pick up
the styles defined in the CSS file.
Open week2.html in Microsoft Expression Web to add the following elements:
• Add a section to represent the “Related Photos” after the “Description” section. This
section should display three small sized photos. When you click a related photo, a
larger version should display. The behavior is similar to that of the main photo on
the “Description” section.
• Add a link on navigation at the top of the page and make it pointing to the newly
createdsection“RelatedPhotos”section.
• Add a second review on the “Reviews” section.
The CSS file contains all necessary styles for the final version. Certain styles defined in
week2.css are ignored because the selector cannot find any element in the existing HTML
that matches the criteria. Open the file week2.css in Microsoft Expression Web to inspect
styles defined. In particular, pay attention to which rules define the following
• The style of the “Share” bar under the theme photo
• The style of the user information (e.g. “Photo by ”) on the photo and review section
Find the corresponding elements and try to update them based on the rule’s selector.
2
Figure 1: Final Version
