Toolkit 1 Notes - Week 12

[This document was exported from Google Docs.]

TOPIC 1: Web production (very basic HTML and CSS)

TOPIC 2: Blog enhancements: FeedBurner, Site Meter, Google Analytics and Technorati

The goal of this class is not to prepare you to be a Web designer or a Web developer.

Thus my goal for you concerning HTML and CSS is to teach you enough
so that you don't MESS UP anyone else's design work.

The files for you to download are HERE: (1) Windows download, for Notepad; (2) Mac download (includes special instructions)

These files will help you review this lecture on your own.

HTML for Beginners

• Text
• HTML
• BODY
• TITLE
• P
• BR (show a street address; also poetry)
  
• H1
• H2
• (skip lists)
• A HREF
• IMG -- http://www.macloo.com/images/cat.jpg
  

Review

1. Tags enclose things: paragraphs, headings.  <tag>  stuff  </tag>
2. A few (very few) tags do not enclose: <br />  <img />
3. HTML tags are used for structure, NOT design. We had no control over design, only control over order (top to bottom, most important to least important -- e.g., H1, H2, H3).
4. If you're working with a template, you must be careful not to erase or overwrite ANY tags!
5. Use undo immediately if you mess something up.
   

• HTML
• BODY
• TITLE
• P
• BR
• H1, H2 (H3, H4, H5, H6)
• A HREF
• IMG (plus some attributes: width, height, alt)
  

CSS for Beginners

1. In-line, internal, and external methods of applying styles
2. Selectors:
   
1. HTML selectors, e.g., body, p, h1
2. Class and ID selectors (these are custom made, by the designer)
   
3. Properties, e.g., color, font-size (value of a property follows the colon)
   
4. Background (color) vs. color (font color)
   
5. Hexadecimal colors are more reliable than color words
6. [Skip quickly over text, margins and padding pages]
7. Putting It All Together -- show briefly as an example of full-blown CSS
   

Now I'm going to perform magic.

Here is my example Web page: example1.html

I have an external CSS stylesheet: web.css

I add this line in my HTML file, between the HEAD tags:

Reload the HTML page in the browser. Wow! (example2.html)

• Changed background color.
• Changed fonts.
• Changed the way links look and behave.
• Squashed everything to the left-hand edge.

But wait, there's more!

The DIV tag is HTML. It is used to provide additional structure to the HTML page.

• Use it for small or large divisions in a page.
• Style each division to suit the design needs of the page or site.
• The different divisions will be assigned different SELECTORS -- these will be class or ID selectors
• Class: Use more than once on one page.
• ID: Use once, and only once, or any given page. Example: a page footer DIV.
• One common type of DIV is a wrapper, or container, for the entire page.
  
• I have one in this CSS stylesheet: container
• When I create this DIV in the HTML document, it constrains and positions everything that it encloses.
• I have a second kind of DIV in this CSS stylesheet: inner-box
• When I create this DIV in the HTML document, it changes the background color.
• It also changes the appearance of all the H2 headings.
  

What did I do?

1. I attached (linked) the external CSS stylesheet to the HTML document. (example2.html)
2. I reloaded the HTML page in the browser.
3. I added a new DIV with the ID "container." (example3.html)
   1. DIVs are added in the HTML file.
   2. DIV properties are controlled by a selector in the CSS file.
4. I added a second new DIV, inside the first one, with the ID "inner-box." (example4.html)

These ID names ("container" and "inner-box") appear in the linked CSS stylesheet, web.css -- they are invented there. They are specified and controlled ONLY by what appears in that .css file.

In some other .css file, a selector named "container" might do entirely different things!

Review

1. CSS is used for design -- that is, color, fonts, positioning, etc.
2. CSS can be used to transform the appearance of HTML elements, such as H1 or P.
3. CSS can also be used on selected elements, such as one H2, instead of all H2s.
4. The use of the DIV tag (which is HTML) is commonly combined with CSS selectors to achieve precise control over Web page design.
5. When you are working with a template, DO NOT change the CSS or add new CSS. If you do, you'll probably mess it up.
6. An external CSS stylesheet is just a plain-text file, saved with the file extension ".css"
   
7. One .css file can be attached to all the pages in a Web site, making them all have a consistent appearance.
8. Use of an external CSS file is a very efficient way to manage Web page design and site design.
   

THE END

Mindy McAdams | University of Florida