Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

HTML 5 COURSE SYLLABUS

Overview: HTML5 is a standard for structuring and presenting content on the Web. It incorporates features
such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet
applications without the need for third party APIs and browser plug-ins.

Course Objectives:
 HTML5 comes with many new content-specific elements, like article, footer, header, nav, section.
 Improvements to HTML web forms where new attributes have been introduced for input tag with
support for form controls like calendar, date, time, email, url, search etc…
 Introduction of canvas, which supports a two-dimensional drawing surface that you can program with
JavaScript.
 Embedding audio or video to web pages without third-party plugins.
 Choice to the visitors to share their physical location with your web application.(Geo Location)
 CSS Support for additional selectors, Drop shadows, Rounded corners, multiple backgrounds,
Gradients, Animation, Transparency and many more…
 The CSS3 specification is still under development by W3C. However, many of the new CSS3 properties
have been implemented in modern browsers like New Selectors, Backgrounds and Borders, Gradient
Effects, Text Effects and Fonts, Transformations, Transitions, Animations, Multiple Column Layout.

Pre-requisite / Target Audience:

 basic understanding of html and its tags

Module 1: HTML5 Introduction

In this module, you will learn the evolution of html5. HTML5 is the latest standard for HTML. HTML5 was
designed to replace both HTML 4, XHTML, and the HTML DOM Level 2.
 Limitations of HTML 4
 Introduction and Advantages of HTML 5
 First HTML5 Document
 Overview of New Features of HTML5
 List of HTML 4.01 elements removed from HTML5:

Module 2: Page Layout Semantic Elements

In this module, you will learn what semantic elements is and how to use it. A semantic element clearly
describes its meaning to both the browser and the developer.
 Header

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

 Navigation
 Section & Articles
 Footer
 Aside and more…

Module 3: HTML5 Web Forms

In this module, you will learn about html web forms, HTML form on a web page allows a user to enter data
that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out
the forms using checkboxes, radio buttons, or text fields.
 HTML 5 Global Attributes
 Displaying a Search Input Field
 Contact Information Input Fields
 Utilizing Date and Time Input Fields
 Number Inputs
 Selecting from a Range of Numbers
 Selecting Colors
 Creating an Editable Drop-Down
 Requiring a Form Field
 Autofocusing a Form Field
 Displaying Placeholder Text
 Disabling Autocomplete
 Restricting Values

Module 4: Canvas API

In this module you will learn about canvas, The HTML <canvas> element is used to draw graphics, on the fly,
via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw
the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. Overview
of HTML5 Canvas
 History
 What Is a Canvas?
 Canvas Coordinates
 Registering the Canvas dimensions
 Drawing on Canvas with paths, curves etc.
 Working with Solid colors, Gradients & Transparency
 Importing External Images & Setting the background
 Working with Color & Geometrical transformations
 Creating graphs & charts

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

 Working with Text

 Animating a Vertical Bar-Chart
 Fine tune animation with Acceleration & Easing.
 Working with Pixel Data
 CSS and Canvas
 Create High-Res, Retina-Display-Ready Media with Canvas
 Clipping Canvas drawings & saving them to a file.
 When Not to Use Canvas
 Fallback Content
 Implementing Canvas Security
 Ensuring backward compatibility Support of Canvas API to older versions of browsers

Module 5: SVG API

In this module you will learn about svg, svg stands for Scalable Vector Graphics and it is an SVG viewer then
renders a language for describing 2D-graphics and graphical applications in XML and the XML. SVG is mostly
useful for vector type diagrams like Pie charts; Two-dimensional graphs in an X, Y coordinate system etc.
 Overview of SVG
 Understanding SVG
 Scalable Graphics
 Creating 2D Graphics with SVG
 Adding SVG to a Page
 Simple Shapes
 Transforming SVG Elements
 Reusing Content
 Patterns and Gradients
 SVG Paths
 Using SVG Text
 Putting the Scene Together
 Building an Interactive Application with SVG
 Adding the CSS Styles
 Ensuring backward compatibility Support of SVG API to older versions of browsers

Module 6: HTML5 Media (Video & Audio)

In this module you will learn multimedia. HTML5 introduced two new elements that include playback
functionality for supported media formats. The audio element can be used to add audio content to a web
page.

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

 Adding Video & Audio to a page

 Supported Audio & Video formats
 Audio & Video codecs
 Loss & Lossless compression
 Media specific attributes Vs Global attributes
 Deployment challenges on Mobiles
 Converting Audio & Video to supported formats using open source & commercial software
 Using a Frame grabber
 Custom Controls, Seek bar, Progress bar with Javascript & CSS
 Applying CSS skins & transforms
 Working with multiple tracks, Subtitles & Captions with Captionator, Player & the Lean back Player
 Integrating Video with Canvas & SVG
 Applying Visual filters using Canvas & SVG
 Debugging, Browser support.
 Licensing issues.
 Ensuring backward compatibility Support of Media API’s to older versions of browsers

Module 7: Web Storage API

In this module you will learn web storage, web storage sometimes known as DOM storage (Document Object
Model storage), provides web application software methods and protocols used for storing data in a web
browser Goodbye cookies introducing Web Storage
 Browser Support
 Local Vs Session storage
 Using the HTML5 Web Storage API
 Setting and Retrieving Values
 Storing forms & caching events with local storage
 Storing & Accessing JSON data.
 Communicating Web Storage Updates
 Data Security
 Need more storage space - exploring Web SQL Database API & Indexed DB
 Creating a Grocery List with Web SQL DB
 Ensuring backward compatibility Support of Web Storage API to older versions of browsers

Module 8: Geolocation

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

In this module, you will learn about geolocation. Geolocation is the identification or estimation of the real-
world geographic location of an object, such as a radar source, mobile phone, or Internet-connected computer
terminal. Comparing Geolocation techniques in the past & modern day Geolocation
 Understanding the pillars of Geolocation. i.e., GPS/ IP Address/ Cell IDs/ Wi-Fi and Bluetooth
 LBS (Location based services)
 Mobile & Augmented reality applications, which consume geolocation service.
 Understanding Latitude, Longitude, Speed, Course & Accuracy
 Getting you current location
 Browser compatibility & Fallbacks.
 Reverse geocoding
 Mapping location
 Getting Distance & Directions between two places.
 Following a moving location
 Combing geolocation with google maps
 Triggering the Privacy Protection Mechanism
 Saving Geographical information
 Geolocation usage – Geo Marketing, Geo social, Geo tagging, Geo social, Geo tagging & Geo
applications.
 Building a Real-Time Application with HTML5 Geolocation
 Ensuring backward compatibility Support of Geolocation API to older versions of browsers

Module 9: Web Workers

In this module, you will learn about web worker. A web worker is a JavaScript that runs in the background
without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting
things, etc., while the web worker runs in the background.

 What are web workers?

 Possibilities & Limitations of web workers
 Inline, Dedicated & Shared Workers
 Creating a worker, Assign roles & deploying the same.
 Leveraging a Shared Worker
 Worker support in modern browsers
 Managing multiple workers
 Parsing data with workers
 Perform Heavy array computations
 Using timers in conjunction with worker

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

 Work with pixel manipulations

 Make twitter JSONP requests
 Connect to share workers at same time with multiple browser windows
 Transferable objects
 Debugging Your Workers
 Ensuring backward compatibility Support of Web Workers API to older versions of browsers

Module 10: HTML5-Server Sent Events

Server-sent events is a standard describing how servers can initiate data transmission towards clients once an
initial client connection has been established. They are commonly used to send message updates or
continuous data streams to a browser client and designed to enhance native, cross-browser streaming through
a JavaScript API called Event Source.

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

CSS 3 COURSE SYLLABUS

Overview: CSS (Cascading Style Sheets) consist of a set of formatting rules that we use to control the layout
and appearance of the content on a web page. One best feature of CSS is that you can store all the CSS rules in
one document, keep that document separate from the HTML content, and link the two together. CSS3 offers
some new and exciting features to enhance the appearance of the website. CSS3 makes it easier for the
designers that will make the visitors go crazy over them to be implemented.
Pre-requisite / Target Audience:
 basic understanding of html and its tags

Module 1: INTRODUCING CSS3

In this module you will learn about css3, CSS3 is the latest upgrade in CSS levels. By Using CSS3, you can easily
use old CSS element as well. There are a lot of new modules has been added in CSS3.But we must know that
CSS3 is still under development and will be completed after sometimes.But most of its elements implemented
in all major browsers. It has New Text effects .It has Transition effects. It has Animation effects and many other
things.
 What CSS3 Is and How It Came to Be
 A Brief History of CSS3
 CSS3 Is Modular
 Module Status and the Recommendation Process
 CSS3 Is Not HTML5
 Let’s Get Started: Introducing the Syntax
 Browser-Specific Prefixes
 Future-Proofing Experimental CSS
 Getting Started

Module 2: BORDER AND BOX EFFECTS

In this module, you will learn this is the great incrementation in CSS3, We can add rounded border to any of
the HTML elements. We don't need to use photoshop anymore for rounded corners. border-radius Shorthand
 Differences in Implementation Across Browsers
 Using Images for Borders
 Multicolored Borders
 Adding Drop Shadows
 Border and Box Effects: Browser Support

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

Module 3: BACKGROUND IMAGES AND OTHER DECORATIVE

In this module, here we will learn how to set background-image and its properties to develop. The
background-image property in CSS applies a graphic (e.g. PNG, SVG, JPG, GIF, WEBP) or gradient to the
background of an element. There are two different types of images you can include with CSS: regular images
and gradients.
 PROPERTIES
 Background Images
 Multiple Background Images
 Background Size
 Background Clip and Origin
 background-repeat
 Background Image Clipping
 Image Masks
 Background Images: Browser Support

Module 4:2D TRANSFORMATIONS

In this module, you will learn about transformation .transformation is an effect that lets an element change
shape, size and position.
 The transform Property
 rotate
 Position in Document Flow
 transform-origin
 translate
 skew
 scale
 Multiple Transformations
 Transforming Elements with Matrices
 Reflections with WebKit
 2D Transformations: Browser Support
3D TRANSFORMATIONS
 3D Elements in CSS
 Transform Style
 The Transformation Functions
 Rotation Around an Axis
 Translation Along the Axis
 Scaling

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

 The Transformation Matrix

 Perspective
 The perspective and perspective-origin Properties
 The Transformation Origin
 Showing or Hiding the Backface
 3D Transformations: Browser Support

Module 5: TRANSITIONS AND ANIMATIONS

In this module, By the Help of Transition Property of CSS3, We can transit our element in hover status.
Actually you can display the hover effects in the transitive way or animated way. Animation is another and
power full technique in CSS3; by using it, we can animate any element in frames.
 Transitions
 Property
 Duration
 Timing Function
 Delay
 Shorthand
 The Complete Transition Example
 Multiple Transitions
 Triggers
 More Complex Animations
 Key Frames
 Animation Properties
 The Complete Animations Example
 Multiple Animations
 Transitions and Animations: Browser Support

Module 6: CSS3-Multi Column Layout

In this module, using css3 we can divide columns into multiple parts according to web page viewport. Let’s
check how to do multiple column layout
 CSS3 Multi-column Properties
 CSS3 Create Multiple Columns
 CSS3 Specify the Gap Between Columns
 CSS3 Column Rules
 How Many Columns an Element Should Span
 The Column Width

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com
Deccansoft Software Services-Microsoft Silver Learning Partner Html5 Syllabus

 CSS3 Multi-columns Properties

Module 7: MEDIA QUERIES

In this module, Media Queries are a key component of responsive design, which make it possible for CSS to
adapt based on various parameters or device characteristics. The @media at-rule is used to conditionally apply
styles to a document.The Advantages of Media Queries
 Syntax
 Media Features
 Width and Height
 Device Width and Height
 Using Media Queries in the Real World
 Orientation
 Aspect Ratio
 Pixel Ratio
 Multiple Media Features
 Mozilla-Specific Media Features
 Media Queries: Browser Support
At the end of the course, participants will be able to get:
1. Create Web Page with HTML(5) & CSS(3)
2. How to set Headers , Paragraph for web page
3. How to set pages for webpage
4. Create animation elements
5. How to create a responsive website for all devices such as(Mobile,Tablet,Computer)
6. How to create Box and set Positions for elements
7. How To create buttons and use for pages or send forms
8. How to create to insert Video and Audio in webpage
9. How to create Vertical,Horizontal,Dropdown Navigation Bar(menus)
10. Create attractive differents Forms
11. How to create Circle,Thumbnail and set Text on images

Block No: 402, Saptagiri Towers, Begumpet Main Road, Hyderabad - 500 016, TELANGANA,
+91 80083 27000, [email protected], http://www.deccansoft.com