Live Chat
Monday - Friday 8am - 6pm EST Chat Now
Contact Us
Monday - Friday 8am - 8pm EST 1-866-716-6688 Other Contact Options
Checkout

Cart () Loading...

    • Quantity:
    • Delivery:
    • Dates:
    • Location:

    $

HTML5

In this course you'll learn how to create HTML5 compliant webpages based on the W3 HTML5 specification.

GK# 7318

Course Overview

TOP

HTML, or HyperText Markup Language, is used to allow the building of a webpage that can be viewed using a web browser. HTML is created by formatting text using the Markup language, which consists of a set of elements, also called tags, and attributes. In this path, you'll learn how to create HTML5 compliant webpages based on the W3 HTML5 specification.

Schedule

TOP
  • Delivery Format:
  • Date:
  • Location:
  • Access Period:

$

What You'll Learn

TOP
  • Introduction to HTML5
  • HTML5 Layout
  • HTML5 Forms
  • HTML5 APIs and Media
  • HTML5 and CSS3
  • HTML5 Layout with CSS3
  • HTML5 and Advanced CSS3
  • HTML5 and JavaScript
  • HTML5 Graphics and Canvas
  • Advanced HTML5
  • Advanced Features of JavaScript, CSS3 and HTML5

Outline

TOP
Viewing outline for:

On-Demand Outline

Introduction to HTML5

  • Select an editor that can edit an HTML5 Document
  • Configure a development environment for HTML5
  • Apply tools to validate an HTML5 Document
  • Describe the markup language used to create an HTML5 document
  • Describe how tags are used to create an HTML5 document
  • Apply the !DOCTYPE declaration to an HTML5 document
  • Define the structure of an HTML5 document
  • Create the basic head section in an HTML5 document
  • Create the basic body section in an HTML5 document
  • Create the basic document structure for an HTML5 document
  • Apply meta tags to an HTML5 document
  • Use the new meta tags introduced in HTML5
  • Create comments in HTML5
  • Describe how the paragraph tag is used in HTML5
  • Create paragraph and line break tags in an HTML5 document
  • Create heading tags in an HTML5 document
  • Describe best coding practices for HTML5
  • Describe how to space and format code in an HTML5 document
  • Describe how to create a hyperlink in HTML5
  • Use a hyperlink in an HTML5 document
  • Create an in-site hyperlink in an HTML5 document
  • Create an e-mail link in an HTML5 document
  • Specify when to use an Absolute versus a Relative link
  • Apply font styling to an HTML5 document
  • Use special characters in an HTML5 document
  • Understand how HTML5 is used to generate a web page

HTML5 Layout

  • Describe when to use block level and inline elements in HTML5
  • Describe how to use the div tag in an HTML5 document
  • Describe how to position objects in an HTML5 document
  • Describe how to use logical divisions and spans in HTML5
  • Create the basic page layout structure for an HTML5 document
  • Specify the format for a basic page layout in an HTML5 document
  • Describe how lists can be created in HTML5
  • Create a list in an HTML5 document
  • Specify how to configure a list in HTML5
  • Describe how tables can be created in HTML5
  • Create a table in an HTML5 document
  • Specify how to configure tables in HTML5
  • Apply color to an HTML5 document
  • Create clickable hotspots on an image in HTML5
  • Add images to an HTML5 document
  • Configure the size of an image in HTML5
  • Configure the way text will wrap around images in HTML5
  • Describe how the article and section tags are used in HTML5
  • Describe the difference between semantic and structural elements in HTML5
  • Specify how the address and cite tags have changed in HTML5
  • Describe how the details and summary tags are used in HTML5
  • Describe how the header and footer tags are used in HTML5
  • Describe how the figure and figcaption tags are used in HTML5
  • Specify how, and when, the nav tag should be used in HTML5
  • Add video to an HTML5 document
  • Add Flash to an HTML5 document
  • Create a border using CCS3 in an HTML5 document
  • Create a rounded border using CCS3 in an HTML5 document
  • Use the common and useful, page and data formatting elements to give your HTML5 page an intuitive layout

HTML5 Forms

  • Describe the purpose of the form tag in an HTML5 document
  • Add the form section to an HTML5 document
  • Describe form field attributes that can be used in HTML5
  • Specify how the value and name form attributes are used in HTML5
  • Create a password and textarea form field for data input with HTML5
  • Create a radio button in HTML5
  • Create a checkbox in HTML5
  • Create a drop-down list in HTML5
  • Use the color chooser attribute in HTML5
  • Use the number field in HTML5
  • Create a color input in HTML5
  • Use the color picker in HTML5
  • Add a number chooser field to an HTML5 document
  • Add a range slider to an HTML5 document
  • Add a numerical range to a range slider with HTML5
  • Use the range slider in HTML5
  • Add a calendar to an HTML5 document
  • Configure a date input field in HTML5
  • Describe how to submit HTML5 form data
  • Describe how to submit a file to a server using HTML5
  • Describe when to use the HTML5 novalidate form attribute
  • Describe the use of placeholders in HTML5 forms
  • Choose when to use required and placeholder attributes in an HTML5 document
  • Use the autocomplete form attribute in HTML5
  • Choose when a datalist would be the right container for an HTML5 document
  • Add a datalist to an HTML5 form
  • Configure email form validation in HTML5
  • Describe the basics of regular expressions and their use in HTML5
  • Apply regular expressions to form input fields in HTML5
  • Specify which field on a form will get the initial focus in an HTML5 document
  • Describe how the form input tag works in an HTML5 document
  • Describe how the action attribute can affect how a web page will act when it is submitted in HTML5
  • Describe how the target attribute can be used in HTML5
  • Describe how, and when, to set the min and max attributes for an input element in HTML5
  • Test your understanding of the various form field attributes

HTML5 APIs and Media

  • Describe how to drag and drop files using the File API in HTML5
  • Use geolocation data in an HTML5 document
  • Select elements using querySelector from within an HTML5 document
  • Select a group of elements using querySelectorAll from within an HTML5 document
  • Use the query selector tools to find the first instance of an element within an HTML5 document
  • Match multiple elements using selectors from within an HTML5 document
  • Describe how to use session storage within an HTML5 document
  • Create and use a local storage object within HTML5
  • Select files using the File API in HTML5
  • Describe the use and purpose of XML in HTML5
  • Describe the basic features of AJAX in an HTML5 document
  • Describe how to use the XMLHttpRequest API in HTML5
  • Apply XMLHttpRequest API calls to load a server file into an HTML5 web page
  • Use the XMLHttpRequest API to swap an HTML page in an HTML5 document
  • Describe the browser best practices when using HTML5
  • Describe how to check for browser support for HTML5
  • Troubleshoot issues with HTML5 documents
  • Describe how to play audio files in HTML5
  • Describe how to play video files in HTML5
  • Configure the source attribute for audio and video files in HTML5
  • Describe how to use the Audio and Video APIs in HTML5
  • Describe how to obtain time-related information in HTML5
  • Use media events in an HTML5 document
  • Configure preloading, looping, and mute settings on audio and video media in HTML5
  • Describe how dynamic sourcing of audio and video content works in HTML5
  • Describe how audio and video MIME types are set in HTML5
  • Describe how information about the playback of media can be retrieved in HTML5
  • Develop a robust, rich, and dynamic web page using HTML5 APIs and media

HTML5 and CSS3

  • Describe the relation that CSS3 has with HTML5
  • Recognize and describe the structure of the CSS3 syntax for HTML5
  • Use inline CSS3 styles in an HTML5 document
  • Add an attachment link to include a file in an HTML5 document
  • Create a CSS3 style sheet file for HTML5
  • Apply CSS3 syntax to add style to an HTML5 document
  • Use inline CSS3 in an HTML5 document
  • Add an external CSS3 style sheet to an HTML5 document
  • Describe why using an external CSS3 style sheet is better than doing it within an HTML5 document
  • Perform modifications to HTML5 tags using CSS3
  • Apply formatting to an HTML5 table in order to alternate the row colors using CSS3
  • Describe the block elements used in HTML5
  • Create styled HTML5 lists using CSS3
  • Use CSS3 to manipulate DIVs in an HTML5 document
  • Created styled HTML5 list bullets using CSS3
  • Apply CSS3 to small sections of the HTML5 web page by using SPAN tags
  • Describe how ID and class attributes added to HTML5 tags can allow for fine grain CSS3 styling
  • Create CSS styles that will apply to only an element with a given ID in an HTML5 document
  • Create CSS styles that will apply to all elements with the given class in an HTML5 document
  • Add style to a hyperlink in an HTML5 document using CSS3
  • Add CSS3 style to a hyperlink's hover and visited states in a HTML5 document
  • Use CSS3 to change the color of visited links in an HTML5 document
  • Describe how to apply a style only to the child elements, also referred to as nested elements, of an element in an HTML5 document
  • Describe how to change, add, or remove a style to a single element that already has a CSS3 style applied in an HTML5 document
  • Use CSS3 to hide or display HTML5 objects
  • Apply CSS styles to HTML pages

HTML5 Layout with CSS3

  • Apply a direction to text in an HTML5 document
  • Apply a rotation to text in an HTML5 document
  • Apply a rotation to divs in an HTML5 document
  • Add an alignment to text in an HTML5 document
  • Specify the position for text to appear in an HTML5 document
  • Specify the position for an object to appear in an HTML5 document
  • Create overlapping divs to provide visual layering in an HTML5 document
  • Describe how and when relative positioning should be used in an HTML5 document
  • Apply overlapping text to an image in an HTML5 document
  • Create a navigation bar by nesting divs in HTML5
  • Describe how to use divs and CSS3 to add basic animation to an HTML5 document
  • Create a clickable div that will act like an HTML5 button
  • Apply the necessary CSS styles in order to place divs side by side in an HTML5 document
  • Add the CSS necessary to center a div layout in an HTML5 document
  • Use CSS3 to modify a hyperlink's appearance in an HTML5 document
  • Apply vertical alignment to the content of an HTML5 div
  • Describe how to create a basic navigation menu using HTML5 divs
  • Describe how to use CSS3 to format a navigation menu in an HTML5 document
  • Apply a background image to an HTML5 div menu
  • Use CSS3 to change the mouse cursor when it is over an element in an HTML5 document
  • Describe how to apply an animation to a div image on a mouse hover in HTML5
  • Create a navigation menu using the HTML5 nav tag
  • Create a flyout menu using CSS3 and HTML5 lists
  • Apply a gradient fill to an HTML5 list
  • Use the common CSS3 formatting strategies to provide an ordered and visually pleasing layout to your HTML5 page

HTML5 and Advanced CSS3

  • Apply a transform to rotate an object in an HTML5 document
  • Distort an object using the transform matrix in an HTML5 document
  • Describe how to apply a 3D transformation to an object in an HTML5 document
  • Use a transform to position an object in HTML5
  • Add scaling to an object using a transform in HTML5
  • Apply a transform to skew an object in HTML5
  • Use a transform to add a perspective to an object in an HTML5 document
  • Describe how to use CSS3 to create an animation in HTML5
  • Create an animated picture using CSS3 in an HTML5 document
  • Describe how CSS3 animation keyframes are used in HTML5
  • Cycle the color of a div using CSS3 animation in an HTML5 document
  • Rotate objects using CSS3 animation in an HTML5 document
  • Describe some of the advanced CSS3 animation techniques available in HTML5
  • Use CSS3 to change a web site's background color in an HTML5 document
  • Use CSS3 to change a web site's background image in an HTML5 document
  • Describe how to use CSS3 styles to modify background images in an HTML5 document
  • Apply CSS3 styles to create columns and flow text in an HTML5 document
  • Describe how and when to use image alignment in HTML5
  • Describe CSS3 pseudo selectors in HTML5
  • Apply CSS3 pseudo selectors to an HTML5 document
  • Use CSS3 drop shadows in an HTML5 document
  • Apply CSS3 linear gradients in an HTML5 document
  • Create radial gradients in CSS3 in an HTML5 document
  • Create gradient text using CSS3 in an HTML5 document
  • Add transparency to objects in HTML5 using CSS3
  • Use CSS3 to change the range slider style in an HTML5 document
  • Draw triangles using CSS3 in HTML5
  • Demonstrate how to programmatically apply CSS3 transitions and animations, 2D and 3D transforms

HTML5 and JavaScript

  • Describe what JavaScript is and how it is used in the browser to manipulate HTML5
  • Navigate to a URL with a button
  • Pop up a window using JavaScript
  • Describe JavaScript alert, confirm, and prompt pop-ups
  • Describe debugging techniques
  • Describe JavaScript punctuation
  • Describe external vs. internal JavaScript
  • Include JavaScript code in an HTML5 document
  • Use JavaScript in HTML tags
  • Describe how to format JavaScript code for easy maintenance and readability in HTML5
  • Add, use, and work with variables in JavaScript and HTML5
  • Use math operators in JavaScript
  • Use conditional statements in HTML5
  • Use JavaScript for and while loops
  • Control loops using break and continue
  • Use labels with JavaScript statements
  • Use substrings with JavaScript
  • Describe JavaScript functions
  • Pass values to JavaScript functions
  • Pass HTML object information to JavaScript functions
  • Reading the content of HTML objects
  • Change the content of HTML objects
  • Access HTML classes
  • Change the class of HTML objects
  • Modify CSS3 styles using JavaScript
  • Access and change HTML tags
  • Create an Interactive and responsive HTML Page

HTML5 Graphics and Canvas

  • Describe Scalable Vector Graphics (SVG) and its use in creating high quality images in HTML5
  • Add an SVG drawing to an HTML5 page that draws a line
  • Use SVG to draw a rectangle in an HTML5 document
  • Describe how SVG can be used to make a rectangle with rounded corners in an HTML5 document
  • Use SVG to draw circles and ellipses in an HTML5 document
  • Use SVG to add polyline drawings in an HTML5 document
  • Use SVG to add text to an HTML5 document
  • Describe how to rotate SVG objects in HTML5
  • Work with SVG to place text on a path in an HTML5 document
  • Add transparency to an SVG object in an HTML5 document
  • Describe the HTML5 Canvas and why it would be used
  • Use the canvas in an HTML5 document
  • Apply size constraints to a canvas to have it fit the size of the screen in an HTML5 document
  • Describe how to move the canvas in an HTML5 document
  • Describe how to rotate the canvas in an HTML5 document
  • Use HTML5 to draw lines on the canvas
  • Use HTML5 to render text on the canvas
  • Draw rectangles on the canvas using HTML5
  • Use HTML5 to draw arcs and curves on the canvas
  • Describe how circles can be drawn to the canvas using HTML5
  • Perform canvas operations to load and display a bitmap graphic in an HTML5 document
  • Set the color of the canvas using HTML5
  • Use HTML5 to place an image on the canvas
  • Describe how gradients can be created on a canvas in an HTML5 document
  • Use HTML5 to clear the canvas
  • Work with the HTML5 canvas to track objects
  • Describe how to track mouse coordinates in an HTML5 canvas
  • Describe how to create basic animations using the HTML5 canvas
  • Perform object rotation in HTML5 canvas
  • How to add graphic on an HTML page

Advanced HTML5

  • Describe the various ways users can edit form elements in HTML5
  • Describe how content from editable form fields can be manipulated and used in HTML5
  • Use CSS3 and Sprites to animate a menu in an HTML5 document
  • Apply box-sizing properties to an element to fit boxes in an HTML5 document
  • Create a dropdown menu using CSS3 in an HTML5 document
  • Describe how to detect the browser type in HTML5
  • Describe how to detect HTML5 features that a browser supports
  • Describe how to check a browser for video support in an HTML5 document
  • Use Video Format Support detection in HTML5
  • Use HTML5 to detect canvas support in a browser
  • Describe how to detect canvas text support in HTML5
  • Use HTML5 features to design web sites that are mobile friendly
  • Describe how to detect a browser's screen resolution in HTML5
  • Describe how to detect and change screen orientation for applicable devices in HTML5
  • Use the date and time tags in an HTML5 document
  • Apply highlighting to text using the HTML5 mark tag
  • Use the keygen tag to generate a key in an HTML5 document
  • Use the wbr tag to control when a line break will occur if a line break is needed in an HTML5 document
  • Describe how to use the dialog tag in an HTML5 document
  • Describe how web storage objects are created and used in HTML5
  • Describe how to check for HTML5 File API support
  • Use the File API to read a file in HTML5
  • Use FileReader to display thumbnail images in an HTML5 document
  • Implement file and storage APIs

Advanced Features of JavaScript, CSS3 and HTML5

  • Use JavaScript to create an HTML5 document that will display the time
  • Create a Countdown timer in JavaScript that will display in an HTML5 document
  • Use JavaScript timers to delay an action from occurring in an HTML5 document
  • Create a scrolling marquee on an HTML5 document
  • Use confirm to get confirmation from a user before executing an action in HTML5
  • Describe how user input can be captured from a prompt
  • Describe how drag and drop can be used in an HTML5 document
  • Access form data
  • Validate form data
  • Add HTML elements to a web page
  • Modify form elements
  • Use CSS3 to modify the form inputs of an HTML5 document
  • Use CSS3 to add style to an HTML5 submit button
  • Describe how to insert images into an HTML5 form field using CSS3
  • Use CSS3 to change the style of an HTML5 form
  • Describe event properties and why they are used in HTML5
  • Describe the basics of the browser event model in HTML5
  • Use an event object in an HTML5 document
  • Create a second generation, or programmatically created, listener in HTML5
  • Use the meter tag in an HTML5 document
  • Use the progress tag in an HTML5 document
  • Apply CSS3 styles to a progress bar to customize it in an HTML5 document
  • Create and validate HTML5 forms

Prerequisites

TOP

The way we view the web is rapidly changing with many users moving away from the traditional desktop or laptop computers and adopting tablets and smart phones. With that changeover come many new different design challenges that developers have to take into account when they build websites. In this path, you will be introduced to the different technologies and terminologies that will start building your web designing skill sets.

Who Should Attend

TOP

Individuals with no experience with HTML who wish to learn the basics of creating a web page.

Follow-On Courses

TOP

Cascading Style Sheets, commonly referred to as CSS, are a set of formatting conventions allowing you to standardize and enhance the appearance of a web site. CSS specifications are generated by the World Wide Web Consortium (W3C) and the latest version is CSS3. Some specifications are adopted to vary extents within different browsers so cross-browser support is an important consideration with CSS3. CSS is becoming increasingly flexible and powerful but limitations in functionality can be overcome by the use of pre-processors such as Sass and Less. This path will demonstrate the implementation of CSS3 specifications and will cover how to extend CSS with Sass and Less.

With the rise of hand-held devices and mobile browsing, web applications have needed to become responsive to the specific device that is using them. This learning path demonstrates how to apply responsive design strategies. It covers the core components of responsive design - flexible grids, flexible images and media queries. It covers navigation and UI options, and the role of sensors and devices in a responsive design solution. Finally, it covers design process features and performance in responsive applications.

Course Delivery

This course is available in the following formats:

On-Demand

Train at your own pace with 24/7 access to courses that help you acquire must-have technology skills.



Request this course in a different delivery format.
Enroll