Target Audience
This course is designed for the developer looking to further their web application development skills with XHTML and JavaScript. This course teaches developers how to write valid XHTML pages using the many and varied XHTML tags. The developer will learn how, using style sheets, the web pages can be presented to the user. The web pages will be tested using Internet Explorer or Netscape Navigator. Developers taking this course will also learn how to use JavaScript to transform static XHTML web pages into dynamic web pages that react to user input.
This course can be compressed into 3 days if the developer only requires a basic knowledge of JavaScript
Pre-requisites
The developer should be familiar with the host environment - either Windows NT/2000, Windows 95/98 or Windows XP. Knowledge of any programming language would be advantageous, however it is not essential. A basic knowledge of the
E-Commerce environment would be beneficial. This can be gained by attending course EC01.
Course Objectives
Whilst covering the basics of XHTML and how it is used, this course also aims to give an insight into XHTML syntax, web page presentation and JavaScript.
Issues such as XHTML syntax, valid and invalid XHTML, CSS style sheets and JavaScript are discussed.
On completion of this course the student will be able to:
-
Develop XHTML web pages using valid XHTML syntax
-
Develop XHTML web pages using images and links
-
Develop XHTML web pages using lists and tables
-
Develop XHTML web pages using image maps
-
Develop XHTML web pages using CSS style sheets
-
Develop XHTML web pages using frames
-
Develop XHTML web pages using forms
-
Develop XHTML web pages using basic JavaScript statements
-
Understand and use JavaScript statements
-
Understand and use JavaScript Operators
-
Understand and use JavaScript Methods
-
Understand and Navigate the JavaScript Document Object Model
-
Develop and process XHTML form web pages
-
Develop and process XHTML web pages containing frames
-
Develop and process XHTML web pages using cookies
Course Environment
Development will be performed using:
-
XHTML and JavaScript Source Editor
-
a text editor such as Notepad, WinEdit or TextPad
Testing Environment
-
Internet Explorer or
-
Netscape Navigator
Course Details
- XHTML SYNTAX
- XHTML Syntax
- Embedded Elements and Tags
- Start and End Tags
- Elements
- Attributes
- XHTML Page Content
- Comments
- Text and Text Appearance
- Content Based Styles
- Character References
- Text Structures
- Hyperlinks
- List, Forms and Tables
- Well Formed Documents
- DOCUMENT STRUCTURE
- The HTML, HEAD and TITLE Elements
- The HTML Element
- The HEAD Element
- The TITLE Element
- The BASE Element
- The META Element
- The BODY Element
- Colour Settings
- HEADINGS, DIVISIONS AND PARAGRAPHS
- Headings
- The H1, H2, H3, H4, H5, H6 Elements
- Grouping Elements
- The DIV Element
- Paragraphs
- The P Element
- PRECISE SPACING AND LAYOUT
- Space Handling
- Controlling and Prohibiting Line Breaks
- The BR Element
- The NOBR Element
- Floating Objects
- Floating Objects Around an Object
- Preformatted Text
- The PRE Element
- Alignment
- The CENTER Element
- The ALIGN Attribute
- Rules
- The HR Element
- The Layer Element
- CONTENT BASED STYLES
- Content Based Elements
- The ADDRESS Element
- The BLOCKQUOTE Element
- The CITE Element
- The CODE Element
- The DFN Element
- The EM Element
- The KBD Element
- The SAMP Element
- The STRONG Element
- The VAR Element
- PHYSICAL STYLES
- Physical Style Elements
- The BLINK Element
- FONTS, FONT FACE and FONT COLOR
- Font Modifier Elements
- The BASEFONT Element
- The FONT Element
- LINKS
- An Introduction to Links and Anchors
- Visiting a Linked Resource
- Links Within a Document
- The A Element
- The Syntax of Anchor Names
- LISTS
- An Introduction to Lists
- Unordered Lists
- The UL Lists Element
- Ordered Lists
- The OL ListsElement
- List Items
- The LI Element
- Definition Lists
- The DL Element
- The DT Element
- The DD Element
- TABLES
- An Introduction to Tables
- The TABLE Element
- The CAPTION Element
- Table Rows
- The TR Element
- Table Cells
- The TH Element
- The TH Element
- Table Columns
- The COLGROUP Element
- The COL Element
- Table Headers, Footers and BODY
- The THEAD Element
- The TFOOT Element
- The TBODY Element
- IMAGES AND MULTIMEDIA
- Including an Image on a Page
- The IMG Element
- Image Maps
- Client Side Image Maps
- The AREA Element
- The MAP Element
- Including an Applet on a Page
- The APPLET Element
- The BGSOUND Element
- The MARQUEE Element
- The OBJECT Element
- CSS STYLE SHEETS
- Introduction to CSS Style Sheets
- The World Wide Web Consortium (W3C)
- Style Sheets
- Inline Style Sheets
- Document Level Style Sheets - The STYLE Element
- External Style Sheets
- External Style Sheets
- Linked External Style Sheets
- Imported External Style Sheets
- Multiple Tag Style Selections
- Contextual Tag Style Selections
- Style Classes
- Regular Style Classes
- Generic Style Classes
- Style IDs
- Hiding Style Data From Web Browsers
- Style Precedence
- FRAMES
- Introduction to Frames
- Layout of Frames
- The FRAMESET ELEMENT
- Nested Frame Sets
- The FRAME Element
- Setting the Initial Conent of a Frame
- Visual Displaying of a Frame
- Specifying Target Frame Information
- Setting the Default Target for Links
- Alternative Content
- The NOFRAMES Element
- Floating Frames
- The IFRAME Element
- FORMS
- Introduction to Forms
- The FORM Element
- The GET Request
- The POST Request
- The INPUT Element
- The Input TYPE
- Text Fields
- Checkbox Fields
- Checkbox Fields with Defaults
- Radio Buttons
- Password Fields
- Hidden Fields
- Reset Buttons
- Submit Buttons
- The TEXTAREA Element
- The SELECT Element
- HTML AND XHTML
- The Extensible Hypertext Markup Language (XHTML)
- XHTML Document Type Definitions (DTDs)
- XHTML Document Creation
- DTD Declaration
- XML Namespaces
- Valid and Invalid XHTML Syntax
- REFERENCE
- CSS Reference
- XHTML Element Reference
- XHTML Attribute Reference
- Deprecated HTML Elements
- Deprecated HTML Attributes
- JAVASCRIPT BASICS
- Introduction to JavaScript
- JavaScript
- JScript
- ECMAScript
- JavaScript
- Core JavaScript
- Client Side JavaScript
- Server Side JavaScript
- Dynamic HTML
- The SCRIPT Element
- JavaScript Basics
- External JavaScript
- The Scripting Language
- The NOSCRIPT Element
- Hiding JavaScript
- Commenting Scripts
- Commenting JavaScript
- Commenting VBScript
- Commenting TCL Scripts
- Debugging Scripts
- Debugging JavaScript in Netscape
- Debugging JavaScript in Explorer
- Intrinsic Events
- The Onmouseover Event Handler
- The Onclick Event Handler
- The Alert Method
- JAVASCRIPT STRUCTURE
- Case Sensitivity
- Whitespace and Line Breaks
- Semicolons
- Comments
- Commenting within XHTML Pages
- Reserved Words
- DATA TYPES
- Numbers
- Integer Literals
- Octal Literals
- Hexadecimal Literals
- Floating Point Literals
- Special Numeric Values
- Strings
- String Literals
- Escape Sequences
- Boolean Vales
- Objects
- Object Properties
- Object Methods
- Object Instantiation
- Arrays
- Creating Arrays
- Null and Undefined
- VARIABLES
- Variable Names
- Declaring and Initialising Variables
- Variable Scope
- Global Variables
- Local Variables
- VARIABLE MANIPULATION
- Data Type Conversion
- Number to Strings
- Tostring Method
- Strings to Numbers
- Parseint Method
- Pasrefloat Method
- Isnan Method
- String Manipulation
- Cahrat Method
- Concat Method
- Escape and Unescape Methods
- Fontcolor Method
- Indexof Method
- Italics Method
- Lastindexof Method
- Slice Method
- Split Method
- Substring Method
- Tolowercase Method
- Touppercase Method
- Numeric Manipulation
- Numeric Constraints
- Isfinite Method
- Math Functions
- Boolean Manipulation
- Tostring Method
- OPERATORS
- Operators and Operands
- Operand Data Types
- String Operators
- Arithmetic Operators
- Unary Operators
- Relational Operators
- Logical Operators
- Conditional Operators
- STATEMENTS
- If / Else
- Switch
- While Lopp
- Do/While Loop
- For Loop
- Nested Loops
- For/In Loops
- Lables
- Break
- Continue
- SIMPLE SCRIPTING
- Writing HTML
- The Document.Writeln Method
- IMAGE SWAPPING
- Image Swapping
- Pre-Loading Images
- BROWSER OBJECT MODEL
- The JavaScript Browser Object Model (BOM)
- Web Page Componetns
- Object Properties
- Object Methods
- Object Events
- The Browser Object Model
- Window Object
- Navigator Object
- MimeType Object
- Plugins Object
- Screen Object
- Location Object
- History Object
- THE DOCUMENT OBJECT MODEL
- The JavaScript Document Object Model (DOM)
- WINDOW AND FRAME MANIPULATION
- Window Manipulation
- Window Features
- Communicating Between Windows
- Properties of Windows
- ARRAYS
- Arrays
- Array Properties
- Array Methods
- Arrays in the Object Model
- FUNCTIONS
- Functions
- Functions with Parameters
- Functions with Return Values
- Timing Events
- FORM HANDLING
- Form Handlers
- Field Events
- Text Field Events
- Checkbox Field Events
- Radio Button Fields Events
- Select Field Events
- COOKIES
- What Are Cookies ?
- Setting Cookies
- Reading Cookies
- Deleting Cookies
- Complicated Cooking Setting and Reading
- Session Cookies
- Multiple Cookies
- REFERENCE
- The Window Object
- Window Object Methods
- Window Object Properties
- Window Object Event Handles
- The Frame Object
- Frame Object Methods
- Frame Object Properties
- Frame Object Event Handles
- The Document Object
- Document Object Methods
- Document Object Properties
- Document Object Event Handles
Course Format
Practical sessions make up a large part of the course, allowing delegates to demonstrate and reinforce the lectures given. During these sessions the delegate will gain experience of coding and testing many different types of XHTML web pages containing features such as tables, frames, forms and CSS style sheets. Delegates will also build JavaScript into their web pages to handle forms, dynamically change web pages, set and read cookies.
Examples are used extensively, ranging from simple code snippets to full applications with complete ‘real world’ functionality. These are supplied at the start of the course and it is encouraged that the delegates execute and ‘experiment’ with these under the instructor’s guidance as they are introduced.
These examples are available to take away, along with the delegate’s own work.
The comprehensive Student Guide supplied is fully indexed serving as a useful reference tool long after the course has finished. Delegates will also be able to access a free help-line with technical questions relating to topics covered on the course.
|