Web Fundamentals and Design

$2,000.00


  • Virtual Classroom

  • Onsite

← Continue Searching

Duration: 5 Days

In this 5-day course, you will learn the most up-to-date methods for designing web pages using HTML 4.01 and XHTML 1.0 as established by the W3C within a Web Standards framework. Gain the skills you need to design a truly attractive and fully functional web site as you learn the fundamentals of HTML layout and design and master dynamic technologies including Cascading Style Sheets (CSS) and JavaScript.

What You Will Learn

 

  • Format and layout text in HTML and XHTML, the current standards for web pages and the preferred markup for use with CSS
  • Apply design decisions for a group of pages, ensuring a consistent look and feel and shortening the time it takes to develop and maintain the site with CSS
  • Insert and position graphics
  • Add color
  • Link to other pages and sites
  • Design data tables
  • Develop pages that are compliant with Web Accessibility standards
  • Ensure that web pages comply with the W3C standards and Web Standards framework
  • Incorporate various multimedia in your web page
  • Design simple HTML forms with simple client-side validation, allowing users a selection of input options
  • Design complex tables for layouts and data
  • Introduce the basic concept of JavaScript, including functions, objects, methods, event handlers, and an understanding of the DOM
  • Implement JavaScript to validate forms, ensuring that the user fills in the form properly
  • Review the concept of Dynamic Scripting or DOM Scripting as a whole to better understand why a dynamic web site is the future
  • Know what to do with your web pages to get them published
  • Complete a capstone project to incorporate all of the concepts within the course

Audience

 

This course is for web development professionals who would like to learn how to build or maintain a web site or intranet.

Prerequistes

 

Familiarity with web browsers and the Windows user interface.

Course Outline

 

Advanced Web Design: Layout, Forms, and Scripting

HTML Forms

  • How Forms Work: The Form Page and the Process Page
  • <form>
  • <input>
  • Size
  • Maxlength
  • Get
  • Post
  • <textarea rows="1" cols="20">
  • Radio Buttons
  • Checkboxes
  • Select Menus

Simple Client-Side Validation of Forms

Advanced Tables

  • Other Tags

<meta> Tags

  • Keywords
  • Description
  • Author
  • Generator
  • Refresh

Multimedia

  • Best Practices
  • Image Maps
  • Videos
  • Audio

Introduction to JavaScript and the Document Object Model

  • ECMAScript-262
  • The Document Object Model (DOM)

JavaScript in DOM Scripting/DHTML

Structure of JavaScript

  • window Object
  • Prompts: alert(), prompt(), confirm()
  • Nesting Quotes
  • Multiple Statements
  • link Object
  • Functions
  • Writing a function
  • Passing an argument
  • Concatenating strings and variables
  • Calling from other functions
  • getElementById
  • getElementsbyTagName
  • External File
  • Embedded
  • Inline

JavaScript Event Handlers

  • OnClick
  • OnMousover, On Mouseout
  • OnLoad, onUnLoad
  • OnSubmit
  • OnFocus, Onblur
  • value

Why DOM Scripting/DHTML?

  • Static Web Site
  • Dynamic Web Site

Concepts in Review: Dynamic Technologies: HTML, XHTML, CSS, and DOM Scripting

Capstone Project: Creating a Learning Game

Appendix A: Special Characters

Appendix B: Color Chart

Appendix C: Additional Form Element

Appendix D: Additional Tags

Appendix E: More JS Methods

Appendix F: Editing Solutions

Appendix G: Web Site Publication: An Introduction to FTP

Appendix H: What's Next? and What to Do with DOM Scripting/DHTML?

  • Client-Side Programming
  • Server-Side Programming

Appendix I: Web Sites and Resources

Introduction to (X)HTML and Markup

Marking Up Your Text

  • Paragraph tags
  • <strong> and <em> Tags
  • Heading tags
  • Lists - Unordered Lists
  • Lists - Ordered Lists
  • Lists - Definition Lists
  • <blockquote> Tags

XHTML 1.0 (and HTML 4.01)

  • History of HTML and XHTML
  • Legacy Methods
  • Browser Independence
  • Rules for Valid XHTML
  • Why Writing XHTML Is Writing HTML

Why a Web-Standards Approach?

  • What is Accessibility?
  • Introduction to Cascading Style Sheets
  • Introduction to JavaScript

Structure of an HTML Document

  • The Skeleton
  • DOCTYPEs
  • <meta http-equiv="Content-Typecontent="text/html; charset=ISO-8859-1/>
  • <html> namespace

More Marking Up Your Text

  • Block-Level vs. Inline Tags
  • Sectioning with <div> and <span>
  • Tags and Attributes
  • Empty Elements
  • Comments

Links

  • External Links
  • Absolute Links
  • Relative Links
  • Anchor Links
  • E-Mail Links

Images

  • src Attribute Like the href Attribute
  • Alt Attribute
  • GIF, JPEG, PNG

Structure of Cascading Style Sheets

  • Selector - Property - Value
  • Rules
  • External Files
  • Embedded
  • Inline
  • Understanding Inheritance and Precedence
  • Specificity
  • <link> and @import
  • @media
  • Selecting on Classes and Ids

CSS: Text and Font Properties

  • Text-Align
  • Text-Indent
  • Line-Height
  • Letter-Spacing
  • Word-Spacing
  • Text-Transform
  • Font-Family
  • Font-Style
  • Font-Weight
  • Font-Variant

CSS: Colors

  • Color Names
  • Hexidecimal Triplets
  • Hexidecimal Shortcuts
  • Decimal and Percent Equivalents

CSS: Backgrounds

  • Background-Color
  • Background-Image
  • Background-Repeat
  • Background-Attach
  • Background-Position

CSS More on Selectors

  • Descendent Nodes and Selectors
  • Pseudo-Element Selector

CSS Page Layouts

  • The CSS Box Model
  • float
  • clear
  • positioning
  • display
  • Fluid v. Fixed Width
  • Measurements

Tables

  • Data Tables
  • Colspans and Rowspans
  • Legacy Layout Tables
  • Legacy Layout Nested Tables

Concepts in Review: XHTML, CSS, JS, DOM Scripting/DHTML

Course Project: Creating an Online Resume

Appendix A: Special Characters

Appendix B: Color Chart

Appendix C: More On Accessibility

Appendix D: Legacy Frames

Appendix E: A CSS Case Study

Appendix F: Web Sites and Resources

Course Labs