[ more.. ]
Reverse Animating a Movie
September 28, 2006, 11:23 am[ more.. ]
Cascading Style Sheets Tutorial and Slides
September 26, 2006, 7:20 pmStyle Sheets, or CSS for Cascading Style Sheets, are sets of rules
that allow you to control how your web document will appear in the web
browser. CSS overrides the browser's default settings for interpreting
how tags should be displayed, letting you use any HTML element
indicated by an opening and closing tag (including the
<p> tag) to apply style attributes defined either locally or in a style sheet.
Style sheets contain rules, and a rule has several component parts. The
first part of the Rule (<p> <H1>
is called
the Selector. This tells the browser which element on the page to work with. The
curly bracket pair contains the Declaration, which is comprised of a
Property (color) and a Value (#333333). Here's the basic syntax of a
rule defined:
Selector { property: value }Examples:
P {font-family: Times, 'Times New Roman', serif; font-size: 8pt; color: red; }You can specify several properties on one rule:
H1 { font-family: Times, serif; color: black; font-size: 2em; }You can group tags:
H1, H2, H3 { font-family: Times, 'Times New Roman', serif; }You can also be very specific (contextual selector). In the example below, the rule will only be applied to emphasized text inside of a Heading1 tag. <h1>Heading <em>One</em></h1>
H1 EM { font-family: Times, serif; color: maroon; font-style: italic; }To apply style sheets to an HTML document you can use a single linked (or external) style sheet. Use a single style sheet (in a separate file, saved with the .css suffix) to define multiple pages. A typical .css file is a text file containing only style rules (No javascript comments, no HTML or anything else, only CSS), as here:
P {font-family: non-serif; font-size: medium; color: red}To apply a linked .css style sheet ("stylesheetname.css" in the example below) to an HTML page, a <link> tag is added to the page header:
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}
<link rel="stylesheet" href="/pathname/stylesheetname.css" type="text/css">Creating a linked style sheet allows you to define your CSS rules in one place. Linked style sheets ease web page maintenance, reduce file size, and increase accessibility.
Why use style sheets?
- create a set of web pages with consistent appearance
- easier maintenance
- separate page structure from page appearance
- ADA compliance
- reduce web page file size
- reduce your reliance on non-standard tags such as <center> and <font>
The following CSS Tutorial Workshop and Slide Presentation, from West Virginia University, will teach you more on how to use and code web Style Sheets. The CSS workshop contains illustrated explanations and examples of the concepts being taught, followed by detailed learning activities.
Cascading Style Sheets Tutorial and Slides
- Workshop Handout [pdf, 11 pages, 145kb]
- What are style sheets?
- How CSS Works
- Why use style sheets?
- How to add style sheet rules to your web page
- Linked or External Style Sheet
- Activity 1: Apply a variety of external style sheets to the sample html file
- Inline or Local Style Sheet
- Activity 2: Add an inline style
- Embedded or Global Style Sheet
- Activity 3: Create a simple embedded style sheet
- Text Properties
- Activity 4: Add style rules to control text appearance
- Margins, Indent, Alignment
- Borders
- Shorthand properties
- Activity 5: Margins, Alignment, Indent
- Activity 6: Borders
- Class
- Pseudo-class for links
- Activity 7: Class and Pseudo-class for Links
- Validation
- Create different style sheets for print and screen
- Using Style Sheets in Dreamweaver
- References
- CSS Workshop PowerPoint Presentation
- CSS Workshop Data Files [zip]
- Validate your CSS
Introduction and Intermediate HTML Workshop Tutorials
September 25, 2006, 8:49 pmHTML stands for HyperText Markup Language, and is used for
coding and developing web pages. It consists of ASCII text with special tags. The
tags, which begin with < and end with >, are used to
define the structure and appearance of the web page document.
Here
are two HTML workshop tutorials (Introduction and an Intermediate),
from West Virginia University. They review the HTML tags, give you an explanation of the
tag, and show you how it appears on a web page. The introduction
handout shows basic HTML topics such as paragraph and heading tags,
lists, special characters, inserting hyperlinks, and images. The
intermediate HTML handout covers colors, backgrounds, fonts, horiztonal
rules, lists, tables, forms, frames, and meta tags.
HTML
Workshop Tutorials
- Introduction
to HTML
- Introduction to HTML Workshop Tutorial Handout [pdf, 9 pages, 61kb]
- Structural Tags
- Break and Paragraph Tags
- Heading Tags
- Unordered List
- Ordered List
- Blockquote
- Special Characters
- Link Tags
- Image Tags
- Email
Link Tag
- HTML Workshop Handout
[html version]
- Intermediate
HTML
- Intermediate HTML Workshop Tutorial Handout [pdf, 9 pages, 188kb]
- Centering Text
- Colors
- Background Image
- Font Tag
- Horizontal Rule options
- List options
- Tables
- Forms
- Frames
- Meta
Tags
- Intermediate HTML
Workshop Handout [html
version]
- Form Example
- Meta
Tags handout
- Backgrounds & Colors
Free HTML Video Training
September 6, 2006, 9:44 pmHere are 20 excellent new Video Training Modules
that teach you some of the
basics of coding in HTML to write and develop web pages, from learningelectric.com.
These are totally Free and will teach you all of the many of the
commonly used HTML
tags. These free Access training videos are in
Apple's QuickTime format, so you'll need to download
QuickTime for free if you don't already have it installed.
20 Free HTML
Video Training Tutorials
These
Excel tutorials cover and teach the following Excel features and
functionality:
Beginning HTML
(10 tutorials)
Using HTML Font Tags (6 tutorials)
Coding HTML Hyperlinks and Images
(4 tutorials)