XHTML - DIT 15996

Register for this course

To register call (204) 982-6633, or download the Course Registration Form (PDF) and mail or fax to:

University of Winnipeg
Division of Continuing Education
515 Portage Avenue
Winnipeg, MB Canada R3B 2E9

Phone: (204) 982-6633
Fax: (204) 944-0115

Coming Soon to Information Technology

Ethics in IT: Mar 6 - Learn more
ISSD 23 - Implementing Security: Feb 13 - Learn more
Introduction to Learning Management Systems: Feb 22 - Learn more
ISSD 24 - OLDB (Online Databases with MySQL and PHP): Feb 27 - Learn more
ISSD 24 - XML: Feb 13 - Learn more

DIT 15996

120 hours

This course currently has no upcoming scheduled dates. Please check back here soon.

This block of the ISSD program introduces the students to the basics of creating web pages. This course is actually three courses in one. It starts with basic XHTML, then goes on to CSS, giving students the tools needed to create a final project by hand. The course ends with a couple of days of Dreamweaver, showing the students how to increase their productivity with this application. The students will also be introduced to upcoming technologies such as HTML5 and CSS3.

Programs:

Internet Systems Specialist Diploma

Prerequisites

Computer and internet access at home

Unix

Outcomes:

XHTML and CSS
- Effectively use basic web technologies, like XHTML and CSS.
- Organize and structure web content on a server.
- Mark up web pages in any text editor, including XHTML elements such as paragraphs, headings, lists, images, divs, spans, fonts, forms, and tables.
- State the importance of separating structure from appearance in web pages.
- State the advantages of using CSS with XHTML.
- Use inline, embedded, imported, and linked style sheets appropriately.
- Demonstrate their understanding of CSS rules, the cascade, and inheritance.
- Use colour, length units, and text transformations.
- Describe how the box model works and how it relates to CSS.
- Correctly use XHTML and CSS coding conventions and syntax.
- Validate and troubleshoot XHTML and CSS.
Dreamweaver
- Generate web pages using the Dreamweaver work environment.
- Apply basic text formatting using Dreamweaver.
- Quickly create and modify tables and forms using Dreamweaver.
- Use Dreamweaver's built-in behaviours to create elements like pop-up menus and image rollovers.
- Demonstrate the skills needed to use Dreamweaver to work with CSS quickly and easily.
- Quickly create and modify CSS layers with Dreamweaver.

Additional Comments:

Course Format

This course follows a lecture format. During class time, we will present material, draw your attention to key points that you should pay attention to, answer questions you may have, and manage class discussions, demonstrations, and hands-on exercises.

There are often daily quizzes or assignments. It is the responsibility of the student to be on time and to get copies of any assignments missed due to absence. Missed quizzes cannot be made up, unless prior arrangements are made with the instructor and IT coordinator.

Students are strongly advised to use the reference material. For every hour of class time the student should budget a reasonable amount of self-study time to cover all the material in this course.

Only material that is covered in class lectures will be testable.

Topic Outline

Day 1
- What is the World Wide Web?
  - History of HTML
  - What is the World Wide Web?
  - Where did HTML come from?
  - User Agents (Web browsers)
- Web Site Organization
  - What is a "Target Audience"?
  - Hosting Considerations
  - Domain Names
  - Storyboarding
  - Site Structure
  - Accessibility
- Document Type Definition
  - Different "Flavours" of XHTML
  - XHTML 1.0 Transitional
  - XHTML 1.0 Strict
  - 6 Rules of XHTML
  - HTML5
Day 2
- Basic Structure
  - HTML
  - Head
  - Title
  - Body
  - Creating a Basic Web Page
- Validation
  - Code Validation
  - Spelling and Grammar
  - Links and Images
  - Load Time
  - Why is validation important?
- Basic Tags
  - Headings
  - Block Level vs. Inline Tags
  - Paragraphs
  - Physical vs. Logical Tags
  - Emphasis, Strong
  - Code, Address, Blockquote, Preformatted Text
  - Italic, Bold
  - TT, Big, Small, Sub, Sup
  - Comments
  - Horizontal Rules
  - Break
Day 3
- Lists
  - Discussion of Different Types of Lists in Typography and the Web.
  - Unordered Lists
  - Ordered Lists
  - Definition Lists
  - Menu Lists
  - Directory Lists
- Linking Documents in XHTML
  - What is a URL?
  - Pathnames: Absolute and Relative
  - The Anchor Tag (HyperText)
  - Linking Within a Page
  - Fragment Identifiers
  - Title Attribute
  - Email Links
Day 4
- Formatting
  - Special Character Entities
  - Aligning
  - Logical Divisions (DIV)
  - Span
- Colour
  - Named Colours
  - Numbered Colours
  - Colour Issues
- Images
  - Embedded and External Images
  - Height, Width, and Alt Attributes
  - Aligning Images with Text
  - Hspace, Vspace, and Border
  - Web Image Formats
Day 5
- Tables
  - Storyboarding Tables
  - Basic Table Elements
  - Sizing Options
  - Alignment
  - Cell Padding and Spacing
  - Row and Column Spanning
- Forms
  - The Form Tag
  - Testing Your Forms
  - The Input Tag
  - Text
  - RadiButtons
  - Check Boxes
  - Input Buttons
  - Text Area
  - Select Boxes
  - Organizing your Forms (Optgroup, Label, Fieldset and Legend)
  - Access Keys, Tabindex
  - Disabled and Readonly Controls
Day 6
- Introduction to CSS
  - CSS vs. HTML Formatting
  - Why Use CSS?
  - History of CSS
  - Anatomy of a Style
  - External, Embedded and Inline Styles
  - Selector Basics
  - Special Selectors
Day 7
- Working with CSS
  - CSS Selectors
  - Inheritance
  - "Cascade" of Objects
  - Units and Values
Day 8
- Text Formatting
  - Text-indent
  - Text-align
  - White-space
  - Line-height
  - Vertical-align
  - Word-spacing
  - Letter-spacing
  - Text-transform
  - Text-decoration
  - Colours and Background Colours
Day 9
- CSS and Fonts
  - Font-family
  - Font-weight
  - Font-size
  - Font-style
  - Font-variant
  - Embedded (Web) Fonts
  - Google Web Fonts
  - Compatibility Issues
Day 10
- The CSS Box Model
  - Width and Height
  - Margins
  - Padding
  - Borders
  - Width
  - Height
  - Creating a Basic Page Layout
Day 11
- CSS and Images
  - Background Images
  - Positioning Backgrounds
  - Dynamic Effects
Day 12
- CSS Lists
  - List-style-type
  - List-style-image
  - List-style-position
  - Creating Navigation Menus From Simple Lists
- CSS Layers and Positioning
  - Absolute Positioning
  - Layer Visibility
  - Cursor Effects
- Advanced Inheritance
  - Using the "Weighting" System
  - CSS Conflicts and Overrides
Day 13
- CSS3 Effects
  - Box Shadows
  - Box Corner Radius
  - Text Shadows
  - Opacity
  - Media Queries
  - Compatibility Issues
- HTML5
  - HTML5 Code Validation
  - New Tags
  - What HTML5 Can Do
  - Audio and Video
  - HTML5 Canvas
  - HTML5 Forms
Day 14
- In Class Work on Project
Day 15
- In Class Work on Project
Day 16
- Final Project Presentations
Day 17
- Test Review and Questions/Answer Period
- XHTML Final Test
Day 18
- Dreamweaver
  - Why Use Dreamweaver
  - Different Dreamweaver Versions
  - Other Web Tools
  - Dreamweaver Preferences
  - Text and Image Formatting
  - Working with CSS
Day 19
- Dreamweaver
  - Working With Tables
  - Working With Forms
  - Dreamweaver Behaviors
Day 20
- Dreamweaver
  - Site Management Tools
  - Working with Templates
  - Working with Server Side Includes
  - Setting up a Site
  - Multi-user Collaboration Tools

Notice

The contents of this page are given as a guideline only and are subject to change.