Overview of HTML5 and CSS3
This corporate training program takes participants through the introduction, features and syntax of HTML5 & CSS3. All participants will learn how to:
- Use HTML5 and CSS3 to build responsive websites that render well on a variety of devices and Work with images, including thumbnails, rollovers, and image maps
- Participants will be able to create tables and work with forms and the HTML5 validation features, Add audio and video to your pages
- They will be able use embedded fonts and format web pages for printing
- They can Use the CSS3 features for transitions, animation, transforms, and filters and also Use JavaScript and jQuery to enhance their web pages
Duration
5 Days
Prerequisite for HTML5 and CSS3
Basic computer knowledge is required for this training program. A knowledge of HTML would be a plus and would help the participant a very long way.
Course Outline for HTML5 and CSS3
HTML 5
Introduction to WEB
- W3C and W3C Members
- Why WHATWG?
- What is Web?
HTML Basics
- Introduction
- Parts in HTML Document
- Editors
- Basic
- Elements
- Attributes
- Headings
- Basics
- Paragraphs
- Formatting
- Links
- Head
- CSS
- Images
- Tables
- JavaScript
- HTML XHTML
- HTML4 Drawbacks
HTML5 Introduction
- HTML5 HISTORY
- New Features and groups
- Backward Compatibility
- Why HTML5?
- Power of HTML5:
- m or mobi or touch domains
- Common Terms in HTML5
HTML5 Syntax
- The DOCTYPE:
- Character Encoding:
Obsolete Elements/Deprecated Elements
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <isindex>
- <noframes>
- <s>
- <strike>
- <tt>
- <u>
- <xmp>
HTML5 New Elements
- 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>
HTML5 Canvas
- What is Canvas?
- Create a Canvas
- Canvas Coordinates
- Canvas – Paths
- Canvas – Text
- Canvas – Gradients
- Canvas – Images
HTML5 SVG
- What is SVG?
- SVG Advantages
- Differences Between SVG and Canvas
- Comparison of Canvas and SVG
HTML5 Drag/Drop
- Introduction
- Make an Element Draggable
- What to Drag?Where to Drop?
HTML5 Geo location
- Introduction
- Locate the User’s Position+
- Handling Errors and Rejections
- The getCurrentPosition()
- Geolocation object
HTML5 Video
- Introduction
- Video on the Web
- How It Works?
- Video Formats and Browser Support
- HTML5 Video Tags
HTML5 Audio
- Introduction
- Audio on the Web
- How It Works?
- Audio Formats and Browser Support
- HTML5 Audio Tags
HTML5 Input Types
- Introduction
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
HTML5 Form Elements
- <datalist>
- <keygen>
- <output>
HTML5 Form Attributes
- New attributes for <form> and <input>New attributes for <form>:
- autocomplete
- novalidate
New attributes for <input>
- autocomplete
- autofocus
- form, formaction
- formenctype,formmethod
- formnovalidate
- formtarget
- height and width
- list, min and max
- multiple
- pattern (regexp)
- placeholder
- required, step
HTML5 Semantic
- 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>
HTML5 Web Storage
- What is HTML5 Web Storage?
- Browser Support
- The localStorage Object
- The sessionStorage Object
HTML5 App Cache
- What is Application Cache?
- Cache Manifest Basics
- HTML5 Cache Manifest
HTML5 Web Workers
- What is a Web Worker?
- Check Web Worker Support
- Create a Web Worker File
- Terminate a Web Worker
HTML5 SSE
- One Way Messaging
- Browser Support
- The EventSource Object
HTML Media
- New Media Elements
- <audio>
- <video>
- <source>
- <embed>
- <track>
HTML Multimedia
- What is Multimedia?
- Browser Support
- Multimedia Formats
- Video Formats
- Sound Formats
HTML5 – MathML
- Introduction
- Using MathML Characters
- Matrix Presentation
- Math Formulas
CSS 3
CSS 1.0 and 2.0
- 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
CSS3
- Introduction
- CSS3 Modules
- Selectors
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
Borders
- border-radius
- box-shadow
- border-image
CSS3 Backgrounds
- background-size
- background-origin
CSS3 Text Effects
- text-shadow
- word-wrap
CSS3 Fonts
- @font-face Rule
- font-stretch
- font-weight
CSS3 2D Transforms
- How Does it Work?
- Browser Support
- 2D Transforms
- translate()
- rotate()
- scale()
- skew()
- matrix()
CSS3 3D Transforms
- rotateX()
- rotateY()
CSS3 Transitions
- How does it work?
- transition-property, duration and delay
CSS3 Animations
- CSS3 @keyframes Rule
- Browser Support
- Animation, animation-duration
CSS3 Multiple Columns
- column-count
- column-gap
- column-rule
CSS3 User Interface
- resize