LOGO For Immediate Assistance Call 855-211-9361

Open Enrollment

Web Fundamentals & Design (106)

Price: $1,750.00

Call for availability 855-211-9361

PB Tech's Web Fundamentals and Design Capstone Series teaches students 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. Students learn the fundamentals of HTML layout and design. Then, by introducing dynamic technologies including Cascading Style Sheets and JavaScript, students gain the skills they need to design a truly attractive and fully functional website. Our training is virtual live instructor led courses, complete with exercises, colleague collaboration, and one-on-one chat with the instructor.

Course Overview

By the end of the class students will be able to:

  • 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
  • Insure that Web pages comply with the W3C standards and Web Standards framework
  • Incorporate various multimedia to 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 concept of Dynamic Scripting or DOMScripting as a whole to better understand why a dynamic website 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

Courses in this Capstone series include:

  • 101: Introduction to HTML, XHTML, and Cascading Style Sheets
  • 102 Advanced Web Design: Layout, Forms, and Scripting

Students can choose to enroll in this 5-day course or choose to attend classes individually. By enrolling in the Capstone Series instead of the individual courses, students benefit from a $100 savings off the total tuition. Students who successfully complete the class exercises and/or Capstone project will receive the PB Tech Certification along with real-world sample code.

Prerequisites

Familiarity with Web browsers and the Windows user interface

Touch typing skills are required

Course Outline

  • 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
    • <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: Websites and Resources

  • 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>
    • 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
  • 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 Website
    • Dynamic Website
  • 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