Class Tuesday, December 13, 2011

Grades & Favicons

1. We will review the grades to the webpage project before beginning our new stuff today.

There is one thing I want to review for everyone. Most people didn’t remember to create a favicon for their webpage. A favicon is a tiny image that is displayed to the left of the URL at the top of the page.

You can either create a favicon in Photoshop or for free online at a site like this one:

http://www.favicongenerator.com/

Please keep this in mind for future projects as creating favicons will be one of the things you’ll have to do.

More on favicons can be found here:

https://www.mhswebdesign.com/2011/10/03/favicons/

Tables

2. Yesterday you learned about how tables are created in HTML. You practiced with very basic tables. Today you will learn how to use CSS to style tables to make them more visually interesting.

Just like we’ve used internal style sheets to style the webpages you’ve practiced the past couple of months, you can use an internal style sheet to style your table. You can specify borders, background colors, table headers, etc. We will practice some of that today.

Here is an example of a table with a table header, borders, and a background color:

http://www.medfordpublicschools.org/schools/andrews-middle-school/student-services/library-and-media-center/

This table uses an internal style sheet for those style elements.

Now it’s time to practice some tables. Please click on the following links to download and save a webpage file and six images.

Please save everything in your folder.

Please open up tables continued.html in Firefox and in Notepad. You can leave the images in your folder and we will use them later.

tables continued.html

sweater-1.gif

sweater-2.gif

sweater-3.gif

sweater-4.gif

sweater-5.gif

sweater-6.gif