HTML5 AND CSS3

OVERVIEW

Building Strategic Influence in Matrix Organizations

This course imparts learning on HTML5 and discovers how to incorporate its countless features in web pages and applications.

This training is to ensure smooth knowledge transfer for basic to HTML5 advanced topics like Layouts, Forms, Offline Support, Geolocation, Audio and Video graphics, Communication APIs, Storage, JavaScript Web-Workers and others.

WHAT YOU'LL LEARN

Why you shouldn't miss this course

By the end of this course, participants will have the leadership toolkit to shape and steer GenAI portfolios across their organization.

01Use HTML5 Markup

02Use the HTML5 JavaScript APIs

03Understand current browser support for the various HTML5 features

04Understand how to emulate certain HTML5 features in older browsers

05Learn best practices for using HTML5

PREREQUISITES

Recommended experience

CURRICULUM

Structured for
Strategic Application

W3C and W3C Members
What is Web?

Introduction to HTML
Parts of HTML Document
Editors
Basic
Elements
Attributes
Headings
Basics
Paragraphs
Formatting
Links
Head
CSS
Images
Tables
JavaScript
HTML XHTML
HTML4 Drawbacks

HTML5 HISTORY
New Features and groups
Backward Compatibility
Power of HTML5
m or mobi or touch domains
Common Terms in HTML5

The DOCTYPE
Character Encoding

<acronym>
<basefont>
<applet>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<s>
<u>
<isindex>
<noframes>
<strike>
<tt>
<xmp>

New Semantic/Structural Elements
<article>
<aside>
<bdi>
<command>
<details>
<dialog>
<summary>
<figure>
<figcaption>
<footer>
<header>
<mark>
<meter>
<nav>
<progress>
<ruby>
<rt>
<rp>
<section>
<time>
<wbr>

What is Canvas?
Creating a Canvas
Canvas Coordinates
Canvas – Paths
Canvas – Text
Canvas – Gradients
Canvas – Images

What is SVG?
Advantages of SVG
Differences in Canvas and SVG
Comparison in Canvas and SVG

Introduction
Make an Element Draggable
What to Drag? Where to Drop?

Introduction to Geolocation
Locating User’s Position
Handling Errors and Rejections
The getCurrentPosition()
Geolocation object

Introduction to HTML5 Video
Video on the Web
How HTML5 Video Works
Video Formats and Browser Support
HTML5 Video Tags

Introduction to HTML5 Audio
Audio on the Web
How HTML5 Audio Works
Audio Formats and Browser Support
HTML5 Audio Tags

Introduction to Input types
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

<datalist>
<keygen>
<output>

New attributes for <form> and <input>New attributes for <form>:
Autocomplete
novalidate

Introduction
What are Semantic Elements?
Non-semantic elements: <div> and <span>
Semantic elements: <form>, <table>, and <img>
New Semantic Elements in HTML5
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

What is HTML5 Web Storage?
Browser Support in HTML5
Objects
- The localStorage
- The sessionStorage

What is Application Cache?
Basics of Cache Manifest
Cache Manifest in HTML5

Web Worker in HTML5
Checking Web Worker Support
Creating Web Worker Files
Terminating Web Worker

One Way Messaging
Browser Support
The EventSource Object

New Media Elements
<audio>
<video>
<source>
<embed>
<track>

resize
box-sizing
outline-offset

CSS Basics
CSS Introduction
CSS Syntax, CSS Id, Class and CSS Styling, Styling Backgrounds
Styling Text, Styling Fonts, Links, Styling Lists and Styling Tables
CSS Border

Introduction
Using MathML Characters
Matrix Presentation
Math Formulas

What is Multimedia?
Browser Support
Multimedia Formats
Video Formats
Sound Formats

Introduction
CSS3 Modules
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

border-radius
box-shadow
border-image

@font-face Rule
font-stretch
font-weight

text-shadow
word-wrap

background-size
background-origin

How does it Work?
Browser Support
2D Transforms
translate()
rotate()
scale()
skew()
matrix()

rotateX()
rotateY()

resize
box-sizing
outline-offset

column-count
column-gap
column-rule

CSS3 @keyframes Rule
Browser Support
Animation, animation-duration

How does it work?
Transition-property, duration and delay

RECOMMENDED PARTICIPANT SETUP

This course follows Cognixia's AI-first,
hands-on learning model

Access to sanitized process maps, KPI definitions, candidate initiative lists, and basic cost baselines (time, cycle time, error or rework rates)

INTERESTED IN THIS COURSE?

Let's Connect

Speak with a Cognixia specialist about enrollment options, custom cohorts for your leadership team, or tailored delivery formats for your organization.

✓

Response within 1 business day

✓

Available in 5 delivery formats globally

✓

Volume pricing for teams of 10+

Get in touch

One of our specialists will contact you within one business day.

WHY COGNIXIA

Why Cognixia for This Course

KEEP EXPLORING

Mapped Official Learning

Leadership

Change Management for AI-Augmented Organizations

Equip enterprise leaders to drive culture, skills, policy, and operating-model change required for sustainable Generative AI adoption at scale.