Advanced HTML

Introduction

This hands on Web programming class provides a thorough introduction into the creation of a Website using HTML, CSS and JavaScript. Starting with thorough coverage of HTML and Cascading Style Sheets (CSS), the course progresses to the implementation of dynamic client-side content using JavaScript. HTML topics include use of HTML5 semantic tags, block-level and inline elements, creating links, different types of lists, creation of tables and forms. Students will learn to attach CSS to a page using several different techniques, CSS selectors and pseudo-classes, CSS box model, and a variety of CSS2.1 properties. JavaScript topics include adding JavaScript to a Webpage, use of dialogs to interact with the user and JavaScript intrinsic objects such as Date, Array and Math. Students will also be introduced to the Document Object Model (DOM), creation of functions, event handling, form validation, JSON and Ajax. Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency.

LEARNING POINTS

  • Creating a valid HTML document
  • Using various tags to markup text
  • Creating and using CSS to format the appearance of an HTML document
  • Defining element, id, class and attribute selectors to change the appearance of elements in a document
  • Creating different types of lists in an HTML page
  • Displaying images on a Web page
  • Creating hyperlinks using text or images
  • Using the <a> tag to create anchors in a page
  • Displaying information using an HTML table
  • Including forms in an HTML document
  • Including JavaScript in a Web page
  •  Using the Document Object Model (DOM) to access the HTML elements on the page dynamically
  • Using JavaScript objects effectively, including the window object and the navigator object
  • Creating and using variables
  • Using event handlers to handle user-triggered events
  • Using JavaScript to validate forms
  • Using conditional constructs and loops
  • Debugging JavaScript code
  • Working with JSON objects
  • Using Ajax to make asynchronous calls to a Web server

TM_M1_GridBanner_v1_NoCTA

Enquire

Job Oriented coursecrash course

COURSE DETAIL

HTML Fundamentals

  • HTTP Requests and Responses
  • Static vs. Dynamic Pages
  • Tag and Attribute Fundamentals
  • Document Structure

o    Understanding <DOCTYPE>

o    Creating a Page Title

o    Indicating the Character Set

o    <head> and <body> Tags

Structuring an HTML Document

  • Adding Headings
  • Adding Paragraphs
  • Working with the <div> Tag
  • Adding Quotes to a Page
  • HTML5 Semantic Tags

o    <header>, <footer>, <nav>, <article>, <section>

  • Defining Hyperlinks

Formatting Text

  • Using Inline Tags

o    <b>, <i>, <strong>, <em>

  • Using the <span> and <mark> Tags
  • Defining Inline Styles

o    Changing Text Color

o    Changing Font Characteristics

o    Changing Horizontal Alignment

  • Using Character Entities

Introduction to Cascading Style Sheets (CSS)

  • Overview of Cascading Style Sheets (CSS)
  • Creating CSS Rules
  • Setting CSS Properties

o    Working with Colors

o    Units of Measurement (px, em, %)

o    Working with Fonts

  • Defining Type Selectors
  • Defining Class and ID Selectors
  • Using Attribute Selectors
  • Grouping and Combining Selectors
  • Linking to External Style Sheets
  • Embedded Style Sheets
  • Overriding Styles with !important

Controlling Text and Backgrounds with CSS

  • Text-Related Properties

o    text-decoration, color, line-height

  • Font-Related Properties

o    font-family, font-size, font-weight

  • Background-Related Properties

o    background-color, background-image, background-position

CSS Box Model

  • Positioning Elements

o    Static, Absolute and Relative

o    Controlling z-index

o    Floating and Clearing Elements

  • Visual Effects

o    Setting visibility and display

o    Using overflow and clip Properties

o    Setting Vertical Alignment

  • Box-Related Properties

o    margin, padding, border

  • Setting the Size of an Element

Additional CSS Topics

  • Relational Selectors

o    Descendant

o    Direct-Child

o    General Sibling

o    Adjacent Sibling

  • Pseudo-Classes and Elements

o    Styling Links with :link, :visited, :active, :hover

o    Adding Content with :before and :after

  • Creating Printer-Friendly Pages

Working with Lists

  • Types of Lists

o    Ordered Lists

o    Unordered Lists

o    Description Lists

  • Creating List Items Using the <li> Tag
  • Creating Nested Lists
  • Using CSS to Style a List
  • Using Lists to Create a Navigation Menu

Adding Images to a Page

  • Discussion of Common Image Formats
  • Displaying Images on a Web Page

o    Using src and alt Attributes

o    Sizing an Image using width and height Attributes

  • Common Uses of Images

o    Image Thumbnails

o    Favicons

o    Image Rollovers

  • Working with Client-Side Image Maps

Displaying Information in Tables

  • Adding Tables to a Page
  • Working with <table>, <tr>, <td>, <th> and <caption>Elements
  • Creating Nested Tables
  • Using CSS to Style a Table

o    Controlling Table Borders

o    border-collapse and border-spacing Properties

  • Using rowspan and colspan Attributes

Working with HTML Forms

  • Defining a Form
  • Common Form Attributes

o    action

o    method

o    enctype

  • Understanding Form Submission
  • Adding <label> and <fieldset> Elements
  • Single-line and Multi-line Text Fields
  • Radio Buttons and Checkboxes
  • Dropdown and Selection Lists
  • Submit, Reset and Push Buttons
  • Controlling Form Layout Using CSS and Tables

Overview of Client-Side JavaScript

  • Including JavaScript in a Page

o    Using the <script> Tag

o    Referencing an External Script File

o    Using an Event Handler

o    Using a URL

  • Evolution of the JavaScript Language
  • Common Misconceptions About JavaScript

JavaScript Fundamentals

  • Adding Comments
  • Debugging JavaScript Code
  • Declaring Variables with and without var
  • Local vs. Global Variables
  • Using JavaScript Primitive Types

o    String, Number and Boolean

o    undefined

o    null

  • Performing Data Conversions
  • Interacting with the User

o    alert

o    prompt

o    confirm

  • Using Strict Mode
  • Working with JavaScript Operators

o    Arithmetic Operators

o    Assignment Operators

  • Using the Math and Date Objects

Controlling Flow

  • Conditional Constructs

o    if else

o    switch

  • Looping Contructs

o    do while

o    while

o    for

o    for in

  • Branching Statements

o    break

o    continue

  • Equality and Identity Operators
  • Logical and Comparison Operators

Working with Strings, Numbers and Arrays

  • Creating String Objects
  • Using String Methods

o    Searching within a String

o    Returning a Substring

o    Converting Character Case

  • Creating Number Objects
  • Formatting Numbers
  • Creating Arrays

o    Using the Array Constructor

o    Using Literal Notation

  • Accessing Array Elements
  • Common Array Methods
  • Defining and Using Associative Arrays
  • Predefined Object Arrays

Implementing Functions

  • Declaring Functions
  • Invoking Functions
  • Named and Anonymous Functions
  • Passing Arguments
  • Local vs. Global Variables
  • Returning Values from a Function
  • The this Keyword
  • Explaining Closures

Browser Object Model

  • Overview of the Browser Object Model
  • Using the window Object

o    Opening and Closing Windows

o    Using Timers

o    Passing Data Between Windows

  • Using the document Object

o    Writing to the Webpage

o    Accessing Properties of the Document

  • navigator Object
  • location Object
  • screen Object

Introduction to the Document Object Model (DOM)

  • Selecting DOM Elements

o    getElementById

o    getElementsByTagName

o    getElementsByName

o    getElementsByClassName

o    querySelector

o    querySelectorAll

  • Modifying Page Content with the DOM
  • Manipulating CSS using JavaScript

Event Handling in JavaScript

  • Overview of JavaScript Events

o    Identifying Differences Between Browsers

o    The event Object

o    Event Capturing and Bubbling

  • Adding Event Handlers

o    Traditional (Inline) Model

o    Registering Events in JavaScript

o    addEventListener

o    attachEvent

  • Mouse and Keyboard Events
  • Preventing Default Behavior
  • Cancelling Events

Working with Forms

  • Accessing Forms from JavaScript
  • Working with Form Elements
  • Validating Form Fields

o    Checking Required Fields

o    Checking Length of Input

  • Cancelling Form Submission

Using Regular Expressions

  • Overview of Regular Expressions
  • Using Regular Expressions in JavaScript

o    Creating an RegExp Object

o    Using i and g Flags

  • Validating Strings with Regular Expressions
  • Using Backreferences

Working with JavaScript Objects and JSON

  • Understanding Objects
  • Defining Custom Objects

o    Object Literal Notation

o    Defining Properties and Methods

o    Creating a Constructor

  • Extending an Existing Object with prototype
  • Using the in and instance of Operators
  • Overview of JSON
  • Using JSON.stringify and JSON.parse

Using Ajax

  • Overview of Ajax
  • The XMLHttpRequest Object
  • Configuring an Ajax Request
  • Handling Errors on readystatechange
  • Using JSON with Ajax
  • Creating a "Hint" Feature with Ajax

Our Live Work In Core PHP