IT350: Web & Internet Programming

Lab 3: Bring on the Style

Introduction

Up till now, we have mainly looked at the structure of web pages. Now we will look at formatting – an important additional aspect of good web site design. The techniques used in HTML5 are cascading style sheets (CSS). For this lab, dress up your site using CSS.

Part of the role of web author is to be creative with the available tools. Again, this lab will be building on the pages you created last week. Therefore, it is highly recommended that you use a copy of the pages you created last week as the basis for this lab. At a minimum your Unit Home Page, event schedule, and form from the previous labs are required and shall be adapted to CSS. In addition, your pages should convey a set purpose, be organized in such a way that it promotes that purpose, and be visually appealing.

Since the focus in this lab is on appearance, a larger than usual portion of your grade will depend upon aesthetics.

Lab Requirements

Directory: You must create a folder on your W drive called "Lab03" (without the quotes) and store your work in that directory. You should copy your lab from last week into this directory and make changes to it here! Make sure you do not modify the files in Lab02 folder. Note: You do not have to have Lab 2 completed in order to work on this lab, but you do need your unit home page, event schedule and form!

  1. (20%) New style sheet: Create an external style sheet to contain a core set of styles used in all pages within this lab’s site. The name of the style sheet must be “styles.css” (without the quotes). At a minimum, define the following CSS properties for element(s) on your page:

    • background-color
    • color
    • margin-xxx (left, right, top, or bottom)
    • padding
    • border-style or border-color or border-width
    • text-decoration
    • text-align
    • font-size
    • font-family
    • font-weight
  2. (10%) Existing HTML pages: modify all of your existing HTML5 pages (that you have copied into the Lab03 directory) to link to the style sheet you created above. Then make any additional changes to each page so that the overall appearance is noticeably different now that the stylesheet has been added (hint: you don’t necessarily have to modify the body of your page to achieve this, though it is fine to do so). Try to make use of CSS to make your pages more attractive and more functional.

  3. (20%) New HTML5 page: Create a new page, “detail.html”, that provides details about a specific (maybe fictitious) event in your schedule. Provide a link from the schedule to the new page and ensure the new page links back to your schedule.

    Ø  In an embedded stylesheet, define at least two classes. Apply styling using those classes

    Ø  Use span and div tags in styling

    Ø  Use a floating technique to put an image on the right side of a page and have text to the left

    Ø  Use inline styling in at least 2 places.

    Ø  Use the meta element to describe your new page. (Hint: Read Chapter 2.13)

  4. (10%) A user stylesheet. Users with disabilities, such as visual disabilities, may wish to modify the presentation of web pages to make them easier to read. But beyond that, you might prefer your own fun styles overlayed on every page you visit! One way to do this is with a user style sheet. You install this in your own browser, and it is loaded with every (or just a subset) page you visit.

    1. Make a simple style sheet called userContent.css. Make it change the colors and font sizes of parts of your page. You must do color and font size, at a minimum. Have some fun, though, and play with background-color and other styles.

    2. We need to install a browser extension to manage our custom user style sheets. Instructions here are for Chrome only, but Firefox has similar extensions. Follow these steps for Chrome:
      • Visit the Stylish extension and click the blue "Add to Chrome" button. A confirmation box will appear, and ask for permission to modify your data on all webpages. Confirm the add if this is all it asks for. If it requests permissions beyond that, ask your instructor for guidance.
      • A new icon will appear in your browser, top right. Click it, and select the "manage installed styles" link.
      • Click the "Write new style" button on the right pane. This brings up an editor within the browser. It's actually a nice little editor, so feel free to create your user styles in there. However, you must copy it out and save into a file named userContent.css within your lab directory.
      • Once finished creating your style sheet, give it a name. Use the text box at the top of the left pane. Then click the "Save" button in the right pane. If you make any further edits, you must click Save.
      • You're finished! Now open a new tab and go to your lab's webpage. You should see your page change...at least some of it. Your styles might need "! important" after each rule - see question 10 below).

    3. Now make changes to your user stylesheet (if necessary) to enable you to answer the following questions:
      1. What happens if your user style sheet changes the font size of a <p> element to “x-large” but the CSS built into the page sets the font size to 5pt? Which takes effect?
      2. Is the answer different if you add ! important to the end of the font size rule in the user style sheet (with no quotes, before the “;” ending the rule)? (see http://www.w3.org/TR/CSS-access#UserControl ).
    4. Write the answers to these questions on the back of your assignment coversheet.
  5. (10%) Validation: Validate all of your HTML files and your CSS file using the appropriate W3C validator.

  6. (5%) Modify the main student page of your web site (default.htm) to add four new links to Lab03/index.html, Lab03/detail.html, Lab03/styles.css and Lab03/userContent.css. Do not remove the links to the previous labs.

  7. (15%) Aesthetics: look and feel. You will be graded based on how your webpage's appearance. It should look clean, refined, and aesthetically appealing. Things should be spaced out appropriately and evenly throughout the page. Colors should match (to the best of your personal matching ability!).

Your web page must be constructed using Notepad++ or a similar text-only editor. The use of programs such as Microsoft Word, Microsoft Frontpage, DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honor offense.

Extra Credit

For a nominal amount of extra credit do some/all of the following:

  1. Find an example of some bad use of CSS on the web – where parts of the page are unreadable, confusing, cluttered, or just plain ugly.  Add a link to this page to your default.htm page. Then, make a copy of the page (in your Lab03 directory) and modify it to improve its appearance by only changing CSS elements (whether inline, embedded, or external – make a copy of the external style sheet and modify that if appropriate). Add a link to your improved page from your default.htm page, and next to this link include a brief description of what you changed.

Deliverables

  1. Your main web page should be called "index.html" (without the quotes).
  2. Your pages should contain all of the elements described in the requirements section above.
  3. All of your files should be in a folder called "Lab03" (without the quotes) on the Web drive. You are welcome (and highly encouraged) to copy your files from last week's lab into this directory. Your instructor will assume that your web pages are viewable at http://zee.academy.usna.edu/~mXXXXXX/Lab03/index.html where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!

  4. The main student page of your web site (default.htm) must be modified to add four new links to Lab03/index.html, Lab03/detail.html, Lab03/styles.css and Lab03/userContent.css. Do not remove the links to the previous labs.

  5. (10%) Turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):
    1. A completed assignment coversheet. Your comments will help us improve the course.
    2. On the back of your coversheet, answer the two questions in requirement 4.4 above related to user style sheets, and specify the browser you used for testing (Internet Explorer, Firefox, Chrome).
    3. The first page of the output of the W3C HTML5 validator, as run on the final version of your Lab03/detail.html. This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate. Note: even though you are turning in validation results for only some of your pages, all pages are required to validate correctly.
    4. First page of the output of the CSS validator, as run on your final Lab03/styles.css file. This is a different validator, see http://jigsaw.w3.org/css-validator/ (Note: you will have to use the “File Upload” or “Direct input” option for this to work).
    5. A printout of the source to your Lab03/styles.css.
    6. A printout of the source to your Lab03/userContent.css.
    7. A printout of the source to your Lab03/detail.html file (not the rendered page that you normally see with your browser).

When finished, the structure of your web site should look like this: (items in blue shall undergo creation/modification during this lab)

            \\zee.academy.usna.edu\mXXXXXX\public_html

                        default.htm                             (main page for the course; has links to each week’s lab)

Lab01/
                       index.html

                        Lab02/
                                    index.html                 
                                    schedule.html            
                                    form.html                  

                        Lab03/
                                    index.html                  (modify to use CSS)
                                    schedule.html             (modify to use CSS)
                                    form.html                   (modify to use CSS – if you had this page from Lab 02)
                                    detail.html                  (new page with details on one of your events and additional CSS styling)
                                    styles.css                     (new stylesheet)
                                    userContent.css          (new stylesheet to be used by the user)