| Web Publishing with XHTML and CSS Outline |
Here is a detailed table of contents of the course:
About this course
Objectives
Outline
Computing prerequisites
Navigation buttons
Menu tree
How will I learn?
How will I be graded?
Text input exercises
HTML text input exercises
Quiz exercises
Course calendar
How do I start?
Introduction to HTML and XHTML
What is HTML?
Brief history of markup languages
SGML
HTML
XML
XHTML
Web standards
What are tags or elements?
What are attributes?
Why use XHTML?
XHTML DTD
HTML versus XHTML
Use closing tags for all elements
Close empty elements
Always include a value with an attribute
Use quotation marks around attribute values
Use lowercase for tags
Make sure tags are nested correctly
Include a DOCTYPE declaration on every Web page
Do I need to use Cascading Style Sheets (CSS)?
Quiz
Summary
Getting started
Writing HTML
HTML editors
Viewing the source code in the browser
Naming your files
Organizing your files
Using templates
Creating or finding templates
Specifying your home page
Understanding content versus presentation
Promoting accessibility
Quiz
Summary
The structure of an XHTML document
Overview of an XHTML document
Block elements
Inline elements
Declaring the document type
Starting your file - <html>
The document head
Title
Meta information
Character encoding
Adding scripts
Adding style sheets
Inserting the content - <body>
Validating your XHTML files
Element reference
Quiz
Summary
Getting ready for the exercises
Exercise 1 – Create a basic Web page
Basic structures
Paragraphs
Quotations
Headings
Line breaks
Horizontal rules
Comments
Using markup characters in text
Quiz
Summary
Exercise 2 – Basic structures
Formatting text
Bold text
Italic text
Preformatted text
Superscripts and subscripts
Address
Computer code
Displaying changed text
Text size
Advisory tags
Deprecated elements
Elements for CSS formatting
Quiz
Summary
Exercise 3 – Text formatting
Lists
Types of lists
Bullet list
Choosing the type of bullet
Numbered list
Choosing the numbering style
Definition list
Nested list
Quiz
Summary
Exercise 4 – Lists
Graphics
Understanding Web graphics
Using graphics
Alternate text for images
Image size
Placing images on the page
Vertical image alignment
Floating images
Adding space around images
Thumbnails
Adding a border
Adding multiple links to an image
Understanding image maps
Anatomy of an image map
Creating an image map
Character entity references
Quiz
Summary
Exercise 5 – Images
Assignment one
Goals
Description
Grading
Requirements
Tools
Submitting the assignment
Links
Using links
Understanding links
Relative versus absolute links
Adding links to an image
Linking to a specific part of a page
Linking to a new browser window
Linking to protocols
Email links
Link title tool tip
Linking to audio and video files
Quiz
Summary
Exercise 6 – Links
Tables
Using tables
Simple tables
Formatting the table
Borders
Cell spacing
Aligning cell content
Table colors
Table and column width
Table captions
Column headings and footers
Column groups
Columns
Spanning rows
Spanning columns
Using non-table elements in a table
Quiz
Summary
Exercise 7 – Tables
Frames
Understanding frames
Advantages and disadvantages of frames
The frameset document
Creating a two-column frameset
Creating a two-row frameset
Linking frame pages
Nesting frames
Modifying frames with frame attributes
Quiz
Summary
Exercise 8 – Frames
Forms
Understanding forms
Collecting information using forms
GET versus POST methods
Processing forms using email
Processing forms using CGI
Finding and installing CGI scripts
Form input controls
Text input
Text areas
Checkboxes
Radio buttons
Selection menus
Upload files
Button controls
Submit button
Reset button
Push button
Tab order
Form labels
Quiz
Summary
Exercise 9 – Forms
Interactivity
Understanding scripting
Advantages and disadvantages of using scripts
Understanding events and event handlers
Common events and event handlers
Create a rollover
Using JavaScript
Locating scripts
Using internal scripts
Linking to an external script
Adding a script that opens a popup
Dynamic HTML
Getting started in DHTML
Quiz
Summary
Exercise 10 – Add JavaScript
Exercise summary
Multimedia
Multimedia issues
Audio
Video
File formats and plug-ins
Audio formats
Video formats
Animation
Java
Inserting multimedia in a Web page
The object element
Objects and MIME types
Embedding a Java applet
Embedding an audio file
Embedding a video file
Embedding a Flash movie
ActiveX control reference
Web resources on multimedia
Quiz
Summary
Test 1
Assignment two
Goals
Description
Grading
Requirements
Tools
Submitting the assignment
Intro to CSS
What are style sheets?
What is CSS?
Why is CSS valuable?
CSS standards
CSS1, CSS2 and CSS3
Software tools
Browser support
Browser default style sheet
Units of measurement
Which type of unit of measurement is best?
Color values
Validating and debugging
Quiz
Summary
CSS basics
CSS statements
Using CSS selectors, properties, and values
Using separators
Tree structure
Cascading
Inheritance
Linking CSS
Using inline CSS
Using CSS in the <head> tags
Using an external CSS file
Adding CSS comments
Using div and span elements
Quiz
Summary
Exercise 11 – Add CSS links and comments
CSS selectors
Using the type selector
Using multiple selectors
Using the universal selector
Using the CLASS selector
Using the CLASS selector generically
Using the ID selector
Quiz
Summary
Exercise 12 – Add a universal selector
Font properties
Choosing the font
Understanding generic fonts
Specifying the font size
Choosing the font style
Choosing the font weight
Choosing a small-caps font
Using the font property
Quiz
Summary
Exercise 13 – Add font properties
Additional resources
Text properties
Adding color to text
Adjusting letter-spacing
Adjusting word-spacing
Adjusting line height
Aligning text
Adjusting text indent
Applying text decoration
Quiz
Summary
Exercise 14 – Apply text formatting
Additional resources
Background properties
Changing the background color
Using images in backgrounds
Controlling the repeat of the background image
Positioning the background image
Scrolling the background image
Using the background property
Using the background-image property for graphics
Quiz
Summary
Exercise 15 – Add background properties
Additional resources
Box properties
Understanding CSS boxes
Specifying the space around an element
Adding space around images
Adding borders
Choosing the border color
Choosing the border style
Choosing the border size
Specifying margins
Quiz
Summary
Exercise 16 – Add border, margin, and padding properties
Visual layout properties
Understanding block and inline elements
Choosing the display type
Specifying the width
Specifying the height
Understanding positioning
Specifying how an element is positioned
Positioning an element on the page
Floating an element on the page
Specifying how text wraps around an element
Aligning tables
Vertical image alignment
Quiz
Summary
Exercise 17 – Positioning
Additional resources
Link and list properties
Choosing the list type
Modifying the position of the list marker
Choosing an image to replace a bullet
Using the list-style property
Changing the appearance of links
Changing the link's underline
Creating a rollover list
Quiz
Summary
Exercise 18 – Change list and link properties
Additional resources
Advanced CSS properties
Designing for print
Page breaks
Generated content
Changing the cursor
Preserving white space
Using layers
Overflow property
Clip property
Visibility
CSS for page layout
Creating columns with CSS
Determine the overall layout of the page
Give a name to each area of the page
Add a rule for the body element
Add rules for the headers
Add rules for the two columns
Add rules for the menus
Check the results
Quiz
Summary
Exercise 19
Additional resources
Test 2
Assignment three
Goals
Description
Grading
Requirements
Tools
Submitting the assignment
Assignment four
Goals
Description
Grading
Requirements
Tools
Submitting the assignment
Resources
General information
HTML-based and related specifications
HTML software
HTML elements
Attributes – common attributes