Project 12--Style Sheets and Templates

Make any corrections that were listed in the previous grade report.

• Read project instructions and lecture notes
• Visit the online resources and answer the self-check questions
  
  Links to:
• Answers to self-check questions.
• Lecture Notes for CSS
  
  
• Ask questions about anything that you don't understand.
• Complete the lab project and upload new and edited files to your webspace at Geocities.
• Submit project to the instructor

Adding styles to a website

You may have noticed that the pages you completed so far for your "website" have been pretty plain. It is possible to use HTML tags and properties to format within your web pages, but in today's web design world  the recommendation is to create the elements and text for your pages and THEN do the formatting. It is also suggested that you keep the HTML coding for adding the content to the page separate from the commands you use to add formatting. To accomplish this, you can create a stylesheet that has your formatting rules and then attach the stylesheet rules to your existing HTML pages by using the <link> tag. If you have a multiple-page website that you would like to have consistent formatting for, an external style sheet is the best thing to use.

Read the Lecture Notes for CSS.

Visit the w3schools website to familiarize yourself with the concept of using cascading style sheets to add formatting to a website. Go to the Home page for W3Schools, visit the Learn CSS section and use the links to visit the different pages about CSS basics. Note that on some pages, you only need to read certain sections. You are only learning the elementary BASICS for creating CSS in this project.

http://www.w3schools.com/

• Learn CSS
  • Introduction
  • Syntax
    (Just the "Syntax" section)
  • How To
    (Just the "external style sheet" section)
  • Text
    ("Set the color of text" section)
  • Font
    (Section on setting "font" and "size")
  • Margins
  • CSS Units
    (In the CSS Reference section)

Another website that may be helpful in understanding CSS:
http://spot.colorado.edu/~baileysm/tutorials/css_beginner.html
We will be using "method two" described on this page for this project.

Self-Check Questions

Based on the information at the W3Schools website, answer the following questions:

1. What does the acronym CSS stand for?
2. What are the three parts of CSS syntax?
3. In CSS syntax, what is a selector?
4. In CSS syntax, what is a property?
5. What mark of punctuation is used between the property and the value given for the property in a style rule?
   Pick one: the colon ( : ) or the semicolon ( ; )
6. What is used to surround the properties and values given in a style rule?
   Pick one: < > or { }
7. If a style rule has more than one property-value listed, what mark of punctuation is used to separate the property-value pairs?
   Pick one: the hyphen ( - ) or the semicolon ( ; )
8. When should quotes be used in property values?
   
   Using the sample style rule, answer the following questions:
   Sample:
   body {margin-left: 20%}
9. What is the selector?
10. What is the property?
11. What is the value?
    
    Sample:
    body
    {margin-left: 20%
    margin-right: 20%}
12. What mark of punctuation is missing in the above style rule and where should it be placed?
    
    Sample:
    h1 {font-family: "Comic Sans MS",sans-serif}
13. What is the selector?
14. What is the property?
15. What is the value?
    
16. Create a style rule for the horizontal rule HTML element <hr>. Set the value for the size property to 6px.
17. Create a style rule for a level 1 heading. Set the value of the color property to #FF0000.
18. Create a style rule for the paragraph. Set the value of the line-height property to 1.5em. Set the value of the text-indent property to 2em.
    
    Complete the following sentences.
    
19. A style sheet should be saved with a _______________ extension.
20. Each web page must link to the style sheet by using the _________tag.
21. The tag to link a style sheet to a web page goes inside the ___________section of the code.
22. When you give a unit of measurement for a value in a style rule, why is it important to NOT leave a space between the value and the unit of measurement? (Answer is on the CSS How To....page at w3schools.com)
    
    When using units of measurement for a value in a style rule, what do the following abbreviations represent?
23. 2em
24. 7px
25. 20pt

Practice Exercise

Visit the following online resource:
http://www.tizag.com/cssT/external.php

Follow the instructions on the web page to create an html page named index.html and a stylesheet named test.css

Lab Activity

When creating a stylesheet for a website, you look at the HTML elements that you have in your pages and then create style rules for the properties of each element. You have used the following elements that can be formatted in your web pages: body, paragraphs, headings, horizontal rules, images and links. To create a stylesheet to format a few of these elements, follow these steps:

• Open a new page in Notepad
• Save the file using the filename: styles.css
  Save the file into the same location where you have stored the other pages for this course.
  Be sure to use the .css extension when naming a stylesheet. 
• Copy and paste the following code onto the page.

body
{margin-left: 20%;
margin-right: 20%;
margin-top: 2em;
margin-bottom: 2em}

h3
{font-family: "Comic Sans MS", sans-serif;
font-size: 115%;
color: #xxxxxx}

p
{font-family: Arial, sans-serif;
font-size: 110%}

• After copying and pasting these codes into your styles.css page, you need to change the xxxxxx in the color property to a web-safe color code. Visit the web-safe color list (216 cross-platform colors) at W3Schools to choose a web-safe color code. Consider your background color when choosing colors. Make sure the color you choose will make text of the level 3 heading easy to read on top of your background color. Make sure the color you choose is a DIFFERENT color than what you used for your background color in the previous project.
• To apply the style rules you created in the file named styles.css, you must add a <link> tag to BOTH of your existing pages so that it will be connected to the rules listed on the styles.css page. Open each of your html pages from the last project and copy and paste the following tag BEFORE the ending </head> tag:
  
  <link rel="stylesheet" type="text/css" href="styles.css" />
  
• Return to your styles.css page. Add another style rule after the paragraph style rule. Create a style rule for the h2 element. h2 will be the selector. Include three property:value pairs. Each property-value pair should start on a new line. Each property-value pair should end with a semicolon (;) to separate it from the next property-value pair.
  • For the font-family property value, use Georgia, serif. (These font-family names do NOT require quotation marks because they are only one word family names. Georgia is a family name and serif is the family name for a generic font if the browser is unable to find the Georgia font on the system the user is using...)
  • For the font-size property value, choose a value between 125% and 155%.
  • For the color property value, choose a color code for the value that is different from what you chose for the other elements on the page.
• Create a style rule for the h1 element. h1 will be the selector. Include two property:value pairs:
  • For the font-size property value, choose a value between 160% and 175%.
  • For the text-align property, use center.
• When your css file is finished you should have 5 style rules (body, h3, h2, h1 and p)
• Save each of the web pages and the styles.css page.
• View them in the browser to see the formatting rules applied to your pages.
• If formatting does not appear, troubleshoot your code to see what errors you made. Check to be sure that you have made any corrections to the coding of your web pages that have been noted in past grade reports so that your code is accurate and well-formed according to the standards for XHTML 1.0. Errors in your html coding can cause problems when applying style rules to the page.
• Upload the edited html pages and the new stylesheet page to Geocities.
• View the page in the browser using the URL that you are sending me. If things are not working, check to be sure that you have uploaded your stylesheet page to Geocities.
• If you are unable to get the pages to work correctly, upload everything to Geocities and send the URL for your page to ask for help.

Quick and Easy Web Design at GeoCities!!

• Before starting this activity, select a non-animated clip art image that is small in size (9K or less). (You can use the Discovery Schools clip art gallery, but do not use the same images you used in the last project.)  You will lose points for any image larger than 9K.  You can check the size of an image by right-clicking on the image to see the popup menu.  Then click on properties.  It should give the size in bytes (9K = 9000 bytes).  
  
• Use a search engine, if necessary, to find free clip art galleries to select your image from.  Before you plan to use a clip art image in a website, it is important to read the "fine print" about the copyright of the images.  Some artists that offer "free" clip art want you to mention their website and some offer truly "free" images.  Be sure you are using images that are safe from copyright laws!  People can sue you for using their images without permission.
  
• When you locate an image, right-click on the image to download the image to your disk in the same location that you have stored your html files for this class.  When you download images, be certain that the extension on the filename is .gif or .jpg.  You will lose points for using images with different extensions. You cannot change the extension that displays for the image. You have to accept the format of the image as it is given. Be sure your image filenames end with either .gif or .jpg.  

Read through all of the directions here before you start, to familiarize yourself with the process of using a template. Depending on choices you make, the order of the directions may be different. 

I have listed the steps below only to give you a general idea of what to expect, but there may be additional steps and a few choices that are not listed here. Read the directions given on the pages you visit to help you through the steps.  If you work carefully through the directions and get it right the first time through....this activity will not take you very long!!  There are times, however, when Yahoo is being sluggish, so do not put off completing this project until the last minute.  Not being able to access Yahoo, or Yahoo running slowly is not a valid excuse for not completing the project on time.

Print these directions so when you work through the instructions in the wizard, you will have the details that I am asking for handy to look at.  Work  slowly and carefully paying close attention to detail.  

Please do not add more to the page beyond what is included in the directions or use other html tools at Geocities for this project.   

Things like animation and large graphics slow down the loading of the page and I have to view many of them!!   The primary purpose of this project is to take advantage of the template offered by Geocities, not to control the layout of the page or add fancy features.  Let the wizard do the work for you!!  Just follow the directions given and allow plenty of time.  

Ready, Set, Build!!
(Sometimes, Geocities will change the order of the steps to build a page slightly.  Read the directions and if they are somewhat different, see if you can guess the correct choices to continue through the process!)

• Go to www.Geocities.com
• Type in your Yahoo user ID and password.
• Click on the Sign in button.

• In the Getting Started section, click on "Create a Website"
• Under the Quickset Web Page
  Yahoo! Page Wizards, click on "Try Page Wizards"
• Choose one of the eight designs in the "Quick Start" group.  You will lose points if you select a design from a different group.
• As you move through the wizard, you may have to select a page theme from the eight designs shown in the Quick Start section again.
• Read the instructions for each step and click on the Next button to move to the next screen.
• As you work through the project be sure to follow the additional instructions that I have given for each step of the wizard.  They are listed below.

In STEP #1:  Enter your page title and text

Make your page title: Learning the Internet

For your text:  Compose several paragraphs of text. In the first paragraph, tell how often you use the Internet and what you use it for.  In the second paragraph, assume that someone you know has enrolled in this course for next semester. What advice would you give this student to help them successfully complete this course? In the third paragraph tell approximately how much time you spent each week on this course and tell about anything that made it difficult to get projects done on time (work hours, illness, self-discipline, lack of computer equipment at home...) In the fourth paragraph, tell about anything that helped you complete projects (fast Internet connection, text, project instructions, lecture notes, email from instructor, meeting with instructor, friends with Internet experience...) In the last paragraph tell what courses you plan to take next semester. Use complete sentences, proper grammar and spelling. You will lose points for typos!

In STEP #2:  Pick your picture

Choose the option for "Use your own image"
Use "Upload new image" button to upload the clip art that you have saved.

Having a caption is optional. If you have used an image from a clip art gallery that requests you give them credit, this is a good place to mention where the image is from.

In STEP #3:  Enter your favorite links

Replace the text that says:  “My favorite links” with: Learning HTML

Replace the Yahoo link names and web addresses that are given with the following link names and web addresses. The link name will be visible on the page.  The URL will be hidden.  Type these URLs very carefully...or use copy and paste.

(In the above link, change "yourlogin" to your login at Geocities and change the xx to your initials so that this link will really go to your movies web page at Geocities.)

In STEP #4:  Enter your information

Enter your info. You can replace the existing text “My Info” with text of your own choosing or leave the text as it is for your heading of this section of your page. 

• Include your complete name and valid email address
• Uncheck the item that says:  “Put this on my page, I’m Online now.” 

In the Naming your page screen:

• Use all lowercase with no spaces and name your page as:
• webproject-lastname   (but use your last name in place of the word lastname)
• When you see a Preview button, use it to see what your page is going to look like! Close the preview to return to the wizard.
• WRITE DOWN YOUR COMPLETE WEB ADDRESS FOR YOUR PAGE WHEN IT IS GIVEN TO YOU!
  It should be something like:
  http://www.geocities.com/yourusername/webproject-lastname.html
• Be sure to click on the DONE button before leaving the last screen of the wizard. That is what saves your page.

Short answer questions:

Use the following code to name the parts of a CSS style rule:
body {margin: 1em}

1. In the above style rule, what is the selector?
2. What is the property?
3. What is the value?
4. What is the property:value pair?
5. Write a style rule for the level 2 heading. Set the text-align property to right.
   
6. Approximately how long did it take to complete all the readings and activities for this project?
7. How would you rate the difficulty of this project compared to the other web page projects?

Send email to the instructor:

• In the email, answer the short answer questions for the Lab.
• Send the styles.css sheet as an attachment.
• Include all three URLs for the html files you have at Geocities for this project. They should be something like:
  • http://www.geocities.com/yourlogin/webproject-lastname.html
  • http://www.geocities.com/yourlogin/hometown.html
  • http://www.geocities.com/yourlogin/movies-xx.html

Each URL should be on a new line by itself. Send a copy of the email that you send me to yourself so that you can check your URLs as they will appear in email.  If you do not send them to me correctly, I will not be able to view your pages.  You will lose substantial points if I have to ask you to revise your URLs and resend....

The best way to be sure that you are sending an accurate URL is to view your page in the browser after you have uploaded it to Geocities. With the page viewing in the browser, click in the address bar of the browser where the URL of the page is being displayed. Right-click on the URL, choose COPY from the pop-up menu. Open your student email and right-click in the email window of the message you plan to send to me. Right-click and paste the URL into the email message area.

Note:

Your .css page is a plain text page of code. It will not view in the browser as a web page. If you try to view your styles.css page in the browser, it will (most likely) automatically open into a FrontPage window. If you want to view your css stylesheet without using FrontPage, you will need to open it in Notepad.