SlideShare une entreprise Scribd logo
1  sur  56
Télécharger pour lire hors ligne
HTML5
Gaurav Jaiswal
Singsys Pte. Ltd.
What is HTML5?
What is HTML5?
HTML5 is the new standard for HTML.
The previous version of HTML was – HTML 4.01, came in 1999.
HTML5 is designed to deliver almost everything you want to do
online without requiring additional plugins. It does everything
from animation to apps, music to movies, and can also be used
to build complicated applications that run in your browser.
HTML5 is also cross-platform (it does not care whether you are
using a tablet or a smartphone, a notebook, notebook or a
Smart TV).
Differences Between
HTML4 and HTML5
Differences Between HTML4 &
HTML5
1.
2.
3.
4.
5.
6.
7.
8.
9.

HTML5 is a work in progress
Simplified Syntax
The New <canvas> Element for 2D drawings
New content-specific elements, like
<article>, <header>, <footer>, <nav>, <section>
New <menu> and <figure> Elements
New <audio> and <video> Elements
New form controls, like
calendar, date, time, email, url, search
No More <frame>, <center>, <big>, and <b>, <font>
Support for local storage
Browser Support for
HTML5
Browser Support for HTML5
HTML5 is not yet an official standard, and no browsers have full
HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet
Explorer) continue to add new HTML5 features to their latest
versions.
HTML5 Document
The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype> declaration, and it is very
simple:
<!DOCTYPE html>
Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of
required tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
HTML5 New
Elements
The New <canvas> Element
The <canvas> element is used to draw graphics, on the fly, via
scripting (usually JavaScript).
New Media Elements
Tag

Description

<audio>

Defines sound content

<video>

Defines a video or movie

<source>

Defines multiple media resources for <video> and <audio>

<embed>

Defines a container for an external application or
interactive content (a plug-in)

<track>

Defines text tracks for <video> and <audio>
New Form Elements
Tag

Description

<datalist>

Specifies a list of pre-defined option for input controls

<keygen>

Defines a key-pair generator field (for forms)

<output>

Defines the result of a calculation
New Semantic/Structural
Elements
Tag

Description

<article>

Defines an article

<aside>

Defines content aside from the page
content

<bdi>

Isolates a part of text that might be
formatted in a different direction from
other text outside it

<command>

Defines a command button that a user
can invoke

<details>

Defines additional details that the user
can view or hide

<dialog>

Defines a dialog box or window

<summary>

Defines a visible heading for a
<details> element
New Semantic/Structural
Elements
Tag

Description

<figure>

Specifies self-contained content, like
illustrations, diagrams, photos, code
listings, etc.

<figcaption>

Defines a caption for a <figure>
element

<footer>

Defines a footer for a document or
section

<header>

Defines a header for a document or
section

<mark>

Defines marked/highlighted text

<meter>

Defines a scalar measurement within a
known range (a gauge)

<nav>

Defines navigation links
New Semantic/Structural
Elements
Tag

Description

<progress>

Represents the progress of a task

<ruby>

Defines a ruby annotation (for East
Asian typography)

<rt>

Defines an explanation/pronunciation
of characters (for East Asian
typography)

<rp>

Defines what to show in browsers that
do not support ruby annotations

<section>

Defines a section in a document

<time>

Defines a date/time

<wbr>

Defines a possible line-break
Removed Elements
The following HTML 4.01 elements are removed from HTML5:
 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <tt>
HTML5 Canvas
HTML5 Canvas
The HTML5 <canvas> element is used to draw graphics, on the
fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You
must use a script to actually draw the graphics.
Canvas has several methods for drawing
paths, boxes, circles, text, and adding images.
HTML5 Inline SVG
HTML5 Inline SVG
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or
resized
Every element and every attribute in SVG files can be
animated
SVG is a W3C recommendation
SVG Advantages
Advantages of using SVG over other image formats (like JPEG
and GIF) are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and
compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed
without degradation)
Difference Between SVG &
Canvas
Canvas

SVG

Resolution dependent

Resolution independent

No support for event handlers

Support for event handlers

Poor text rendering capabilities

Best suited for applications with large
rendering areas (Google Maps)

You can save the resulting image as
.png or .jpg

Slow rendering if complex (anything
that uses the DOM a lot will be slow)

Well suited for graphic-intensive
games

Not suited for game applications
HTML5 Geolocation
HTML5 Geolocation
The HTML5 Geolocation API is used to get the geographical
position of a user.
Since this can compromise user privacy, the position is not
available unless the user approves it.
Information you get from
Geolocation API
Property

Description

coords.latitude

The latitude as a decimal number

coords.longitude

The longitude as a decimal number

coords.accuracy

The accuracy of position

coords.altitude

The altitude in meters above the mean
sea level

coords.altitudeAccuracy

The altitude accuracy of position

coords.heading

The heading as degrees clockwise
from North

coords.speed

The speed in meters per second

timestamp

The date/time of the response
HTML5 Video
HTML5 Video
Many modern websites show videos. HTML5 provides a
standard for showing them.
Video Formats and Browser
Support
Browser

MP4

WebM

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

NO
Update: Firefox 21
running on
Windows 7,
YES
Windows 8,
Windows Vista,
and Android now
supports MP4

YES

Safari

YES

NO

NO

Opera

NO

YES

YES
HTML5 Audio
HTML5 Audio
HTML5 provides a standard for playing audio files.
Audio Formats and Browser
Support
Browser

MP3

Wav

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

NO
Update: Firefox 21
running on
Windows 7,
YES
Windows 8,
Windows Vista,
and Android now
supports MP3

YES

Safari

YES

YES

NO

Opera

NO

YES

YES
HTML5 Input Types
HTML5 Input Types
HTML5 has several new input types for forms. These new features
allow better input control and validation.
 color
 Date
 datetime
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week
HTML5 Form
Elements
HTML5 Form Elements
HTML5 has the following new form elements:
<datalist>
<keygen>
<output>
HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.
The <datalist> element is used to provide an "autocomplete"
feature on <input> elements. Users will see a drop-down list of
pre-defined options as they input data.
Use the <input> element's list attribute to bind it together with
a <datalist> element.
HTML5 <keygen> Element
The purpose of the <keygen> element is to provide a secure
way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one
private and one public.
The private key is stored locally, and the public key is sent to
the server. The public key could be used to generate a client
certificate to authenticate the user in the future.
HTML5 <output>
Element
HTML5 <output> Element
The <output> element represents the result of a calculation (like
one performed by a script).
HTML5 Semantic
Elements
HTML5 Semantic Elements
A semantic element clearly describes its meaning to both the
browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells
nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> Clearly defines its content.
HTML5 Semantic Elements
HTML5 offers new semantic elements to clearly define
different parts of a web page:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
HTML5 Web Storage
HTML5 Web Storage
With HTML5, web pages can store data locally within the
user's browser.
Earlier, this was done with cookies. However, Web Storage is
more secure and faster. The data is not included with every
server request, but used ONLY when asked for. It is also
possible to store large amounts of data, without affecting the
website's performance.
The data is stored in key/value pairs, and a web page can only
access data stored by itself.
HTML5 Web Storage
There are two new objects for storing data on the client:
 localStorage - stores data with no expiration date
 sessionStorage - stores data for one session

The sessionStorage object is equal to the localStorage
object, except that it stores the data for only one session. The
data is deleted when the user closes the browser window.
HTML5 Application
Cache
HTML5 Application Cache
HTML5 introduces application cache, which means that a web
application is cached, and accessible without an internet
connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're
offline
Speed - cached resources load faster
Reduced server load - the browser will only download
updated/changed resources from the server
HTML5 Cache Manifest
Example
The example below shows an HTML document with a cache
manifest (for offline browsing):
<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>
</html>
Cache Manifest Basics
To enable application cache, include the manifest attribute in
the document's <html> tag.
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Every page with the manifest attribute specified will be cached
when the user visits it. If the manifest attribute is not specified,
the page will not be cached (unless the page is specified directly
in the manifest file).
The recommended file extension for manifest files is:
".appcache”
The Manifest File
The manifest file is a simple text file, which tells the browser
what to cache (and what to never cache).
The manifest file has three sections:
CACHE MANIFEST - Files listed under this header will be
cached after they are downloaded for the first time
NETWORK - Files listed under this header require a connection
to the server, and will never be cached
FALLBACK - Files listed under this header specifies fallback
pages if a page is inaccessible
CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
The manifest file above lists three resources: a CSS file, a GIF
image, and a JavaScript file. When the manifest file is loaded,
the browser will download the three files from the root
directory of the web site. Then, whenever the user is not
connected to the internet, the resources will still be available.
NETWORK
The NETWORK section below specifies that the file "login.asp"
should never be cached, and will not be available offline.
NETWORK:
login.asp
An asterisk can be used to indicate that all other resources/files
require an internet connection:
NETWORK:
*
FALLBACK
The FALLBACK section below specifies that "offline.html" will be
served in place of all files in the /html/ catalog, in case an
internet connection cannot be established:
FALLBACK:
/html/ /offline.html
Updating the Cache
Once an application is cached, it remains cached until one of the
following happens:
The user clears the browser's cache
The manifest file is modified (see tip below)
The application cache is programmatically updated

Contenu connexe

Tendances (20)

Html5 Basic Structure
Html5 Basic StructureHtml5 Basic Structure
Html5 Basic Structure
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html form tag
Html form tagHtml form tag
Html form tag
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
 
CSS
CSSCSS
CSS
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 

En vedette

HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012steveheffernan
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video PlayerJim Jeffers
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video PlayerBrightcove
 
Use case document for boot fitting form
Use case document for boot fitting formUse case document for boot fitting form
Use case document for boot fitting formKalai Vani
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Playersteveheffernan
 
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactiveCharles Hudson
 
How to Embed a PowerPoint Presentation Using SlideShare
How to Embed a PowerPoint Presentation Using SlideShareHow to Embed a PowerPoint Presentation Using SlideShare
How to Embed a PowerPoint Presentation Using SlideShareJoie Ocon
 
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...Edureka!
 

En vedette (10)

HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
 
Use case document for boot fitting form
Use case document for boot fitting formUse case document for boot fitting form
Use case document for boot fitting form
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
 
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactive
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
How to Embed a PowerPoint Presentation Using SlideShare
How to Embed a PowerPoint Presentation Using SlideShareHow to Embed a PowerPoint Presentation Using SlideShare
How to Embed a PowerPoint Presentation Using SlideShare
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
 

Similaire à Html5 tutorial for beginners

Similaire à Html5 tutorial for beginners (20)

HTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptxHTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptx
 
HTML5.pptx
HTML5.pptxHTML5.pptx
HTML5.pptx
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
 
HTML 5
HTML 5HTML 5
HTML 5
 
Basics of HTML5 for Phonegap
Basics of HTML5 for PhonegapBasics of HTML5 for Phonegap
Basics of HTML5 for Phonegap
 
Html5
Html5Html5
Html5
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
IRJET- HTML5 in Web Development: A New Approach
IRJET- HTML5 in Web Development: A New ApproachIRJET- HTML5 in Web Development: A New Approach
IRJET- HTML5 in Web Development: A New Approach
 
Html5
Html5Html5
Html5
 
Html5 CSS3 jQuery Basic
Html5 CSS3 jQuery BasicHtml5 CSS3 jQuery Basic
Html5 CSS3 jQuery Basic
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
Html 5
Html 5Html 5
Html 5
 
Introduction of html5
Introduction of html5Introduction of html5
Introduction of html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Dive into HTML5
Dive into HTML5Dive into HTML5
Dive into HTML5
 
HTML5 and DHTML
HTML5 and DHTMLHTML5 and DHTML
HTML5 and DHTML
 
Html 5
Html 5Html 5
Html 5
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Html5 tags
Html5 tagsHtml5 tags
Html5 tags
 

Plus de Singsys Pte Ltd

Technical Seminar Series: GIT Pull Requests Best Practices
Technical Seminar Series:  GIT Pull Requests Best PracticesTechnical Seminar Series:  GIT Pull Requests Best Practices
Technical Seminar Series: GIT Pull Requests Best PracticesSingsys Pte Ltd
 
Laravel Security Standards
Laravel Security Standards Laravel Security Standards
Laravel Security Standards Singsys Pte Ltd
 
Android OS - The Journey of most popular Operating System
Android OS - The Journey of most popular Operating SystemAndroid OS - The Journey of most popular Operating System
Android OS - The Journey of most popular Operating SystemSingsys Pte Ltd
 
How to do Memory Optimizations in Android
How to do Memory Optimizations in AndroidHow to do Memory Optimizations in Android
How to do Memory Optimizations in AndroidSingsys Pte Ltd
 
iOS Application Battery Optimization Techniques
iOS Application Battery Optimization TechniquesiOS Application Battery Optimization Techniques
iOS Application Battery Optimization TechniquesSingsys Pte Ltd
 
Android Battery optimization Android Apps
Android Battery optimization Android AppsAndroid Battery optimization Android Apps
Android Battery optimization Android AppsSingsys Pte Ltd
 
How to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy StepsHow to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy StepsSingsys Pte Ltd
 
Introduction to facebook sdk
Introduction to facebook sdkIntroduction to facebook sdk
Introduction to facebook sdkSingsys Pte Ltd
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designersSingsys Pte Ltd
 
Joomla 3 installation and management guide
Joomla 3 installation and management guideJoomla 3 installation and management guide
Joomla 3 installation and management guideSingsys Pte Ltd
 
Joomla Introduction & Installation Tutorial
Joomla Introduction & Installation TutorialJoomla Introduction & Installation Tutorial
Joomla Introduction & Installation TutorialSingsys Pte Ltd
 
Technical seo tips for web developers
Technical seo tips for web developersTechnical seo tips for web developers
Technical seo tips for web developersSingsys Pte Ltd
 
WordPress Website Design and Development
WordPress Website Design and DevelopmentWordPress Website Design and Development
WordPress Website Design and DevelopmentSingsys Pte Ltd
 
Points for Design and Development of SEO friendly websites
Points for Design and Development of SEO friendly websitesPoints for Design and Development of SEO friendly websites
Points for Design and Development of SEO friendly websitesSingsys Pte Ltd
 

Plus de Singsys Pte Ltd (20)

Technical Seminar Series: GIT Pull Requests Best Practices
Technical Seminar Series:  GIT Pull Requests Best PracticesTechnical Seminar Series:  GIT Pull Requests Best Practices
Technical Seminar Series: GIT Pull Requests Best Practices
 
Laravel Security Standards
Laravel Security Standards Laravel Security Standards
Laravel Security Standards
 
Android OS - The Journey of most popular Operating System
Android OS - The Journey of most popular Operating SystemAndroid OS - The Journey of most popular Operating System
Android OS - The Journey of most popular Operating System
 
How to do Memory Optimizations in Android
How to do Memory Optimizations in AndroidHow to do Memory Optimizations in Android
How to do Memory Optimizations in Android
 
iOS Application Battery Optimization Techniques
iOS Application Battery Optimization TechniquesiOS Application Battery Optimization Techniques
iOS Application Battery Optimization Techniques
 
Android Battery optimization Android Apps
Android Battery optimization Android AppsAndroid Battery optimization Android Apps
Android Battery optimization Android Apps
 
How to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy StepsHow to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy Steps
 
Basics of-linux
Basics of-linuxBasics of-linux
Basics of-linux
 
SoLoMo
SoLoMoSoLoMo
SoLoMo
 
Introduction to facebook sdk
Introduction to facebook sdkIntroduction to facebook sdk
Introduction to facebook sdk
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Joomla 3 installation and management guide
Joomla 3 installation and management guideJoomla 3 installation and management guide
Joomla 3 installation and management guide
 
Joomla Introduction & Installation Tutorial
Joomla Introduction & Installation TutorialJoomla Introduction & Installation Tutorial
Joomla Introduction & Installation Tutorial
 
Basic of web design
Basic of web designBasic of web design
Basic of web design
 
Embedded Technology
Embedded TechnologyEmbedded Technology
Embedded Technology
 
Java Tutorial
Java TutorialJava Tutorial
Java Tutorial
 
Technical seo tips for web developers
Technical seo tips for web developersTechnical seo tips for web developers
Technical seo tips for web developers
 
WordPress Website Design and Development
WordPress Website Design and DevelopmentWordPress Website Design and Development
WordPress Website Design and Development
 
Being a designer
Being a designerBeing a designer
Being a designer
 
Points for Design and Development of SEO friendly websites
Points for Design and Development of SEO friendly websitesPoints for Design and Development of SEO friendly websites
Points for Design and Development of SEO friendly websites
 

Dernier

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 

Dernier (20)

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 

Html5 tutorial for beginners

  • 3. What is HTML5? HTML5 is the new standard for HTML. The previous version of HTML was – HTML 4.01, came in 1999. HTML5 is designed to deliver almost everything you want to do online without requiring additional plugins. It does everything from animation to apps, music to movies, and can also be used to build complicated applications that run in your browser. HTML5 is also cross-platform (it does not care whether you are using a tablet or a smartphone, a notebook, notebook or a Smart TV).
  • 5. Differences Between HTML4 & HTML5 1. 2. 3. 4. 5. 6. 7. 8. 9. HTML5 is a work in progress Simplified Syntax The New <canvas> Element for 2D drawings New content-specific elements, like <article>, <header>, <footer>, <nav>, <section> New <menu> and <figure> Elements New <audio> and <video> Elements New form controls, like calendar, date, time, email, url, search No More <frame>, <center>, <big>, and <b>, <font> Support for local storage
  • 7. Browser Support for HTML5 HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.
  • 9. The HTML5 <!DOCTYPE> In HTML5 there is only one <!doctype> declaration, and it is very simple: <!DOCTYPE html>
  • 10. Minimum HTML5 Document Below is a simple HTML5 document, with the minimum of required tags: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
  • 12. The New <canvas> Element The <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
  • 13. New Media Elements Tag Description <audio> Defines sound content <video> Defines a video or movie <source> Defines multiple media resources for <video> and <audio> <embed> Defines a container for an external application or interactive content (a plug-in) <track> Defines text tracks for <video> and <audio>
  • 14. New Form Elements Tag Description <datalist> Specifies a list of pre-defined option for input controls <keygen> Defines a key-pair generator field (for forms) <output> Defines the result of a calculation
  • 15. New Semantic/Structural Elements Tag Description <article> Defines an article <aside> Defines content aside from the page content <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it <command> Defines a command button that a user can invoke <details> Defines additional details that the user can view or hide <dialog> Defines a dialog box or window <summary> Defines a visible heading for a <details> element
  • 16. New Semantic/Structural Elements Tag Description <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <figcaption> Defines a caption for a <figure> element <footer> Defines a footer for a document or section <header> Defines a header for a document or section <mark> Defines marked/highlighted text <meter> Defines a scalar measurement within a known range (a gauge) <nav> Defines navigation links
  • 17. New Semantic/Structural Elements Tag Description <progress> Represents the progress of a task <ruby> Defines a ruby annotation (for East Asian typography) <rt> Defines an explanation/pronunciation of characters (for East Asian typography) <rp> Defines what to show in browsers that do not support ruby annotations <section> Defines a section in a document <time> Defines a date/time <wbr> Defines a possible line-break
  • 18. Removed Elements The following HTML 4.01 elements are removed from HTML5:  <acronym>  <applet>  <basefont>  <big>  <center>  <dir>  <font>  <frame>  <frameset>  <noframes>  <strike>  <tt>
  • 20. HTML5 Canvas The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
  • 22. HTML5 Inline SVG SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation
  • 23. SVG Advantages Advantages of using SVG over other image formats (like JPEG and GIF) are: SVG images can be created and edited with any text editor SVG images can be searched, indexed, scripted, and compressed SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoomable (and the image can be zoomed without degradation)
  • 24. Difference Between SVG & Canvas Canvas SVG Resolution dependent Resolution independent No support for event handlers Support for event handlers Poor text rendering capabilities Best suited for applications with large rendering areas (Google Maps) You can save the resulting image as .png or .jpg Slow rendering if complex (anything that uses the DOM a lot will be slow) Well suited for graphic-intensive games Not suited for game applications
  • 26. HTML5 Geolocation The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.
  • 27. Information you get from Geolocation API Property Description coords.latitude The latitude as a decimal number coords.longitude The longitude as a decimal number coords.accuracy The accuracy of position coords.altitude The altitude in meters above the mean sea level coords.altitudeAccuracy The altitude accuracy of position coords.heading The heading as degrees clockwise from North coords.speed The speed in meters per second timestamp The date/time of the response
  • 29. HTML5 Video Many modern websites show videos. HTML5 provides a standard for showing them.
  • 30. Video Formats and Browser Support Browser MP4 WebM Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox NO Update: Firefox 21 running on Windows 7, YES Windows 8, Windows Vista, and Android now supports MP4 YES Safari YES NO NO Opera NO YES YES
  • 32. HTML5 Audio HTML5 provides a standard for playing audio files.
  • 33. Audio Formats and Browser Support Browser MP3 Wav Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox NO Update: Firefox 21 running on Windows 7, YES Windows 8, Windows Vista, and Android now supports MP3 YES Safari YES YES NO Opera NO YES YES
  • 35. HTML5 Input Types HTML5 has several new input types for forms. These new features allow better input control and validation.  color  Date  datetime  datetime-local  email  month  number  range  search  tel  time  url  week
  • 37. HTML5 Form Elements HTML5 has the following new form elements: <datalist> <keygen> <output>
  • 38. HTML5 <datalist> Element The <datalist> element specifies a list of pre-defined options for an <input> element. The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. Use the <input> element's list attribute to bind it together with a <datalist> element.
  • 39. HTML5 <keygen> Element The purpose of the <keygen> element is to provide a secure way to authenticate users. The <keygen> tag specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
  • 41. HTML5 <output> Element The <output> element represents the result of a calculation (like one performed by a script).
  • 43. HTML5 Semantic Elements A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <img> Clearly defines its content.
  • 44. HTML5 Semantic Elements HTML5 offers new semantic elements to clearly define different parts of a web page: <header> <nav> <section> <article> <aside> <figcaption> <figure> <footer>
  • 46. HTML5 Web Storage With HTML5, web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. The data is stored in key/value pairs, and a web page can only access data stored by itself.
  • 47. HTML5 Web Storage There are two new objects for storing data on the client:  localStorage - stores data with no expiration date  sessionStorage - stores data for one session The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.
  • 49. HTML5 Application Cache HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. Application cache gives an application three advantages: Offline browsing - users can use the application when they're offline Speed - cached resources load faster Reduced server load - the browser will only download updated/changed resources from the server
  • 50. HTML5 Cache Manifest Example The example below shows an HTML document with a cache manifest (for offline browsing): <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
  • 51. Cache Manifest Basics To enable application cache, include the manifest attribute in the document's <html> tag. <!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file). The recommended file extension for manifest files is: ".appcache”
  • 52. The Manifest File The manifest file is a simple text file, which tells the browser what to cache (and what to never cache). The manifest file has three sections: CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time NETWORK - Files listed under this header require a connection to the server, and will never be cached FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible
  • 53. CACHE MANIFEST The first line, CACHE MANIFEST, is required: CACHE MANIFEST /theme.css /logo.gif /main.js The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download the three files from the root directory of the web site. Then, whenever the user is not connected to the internet, the resources will still be available.
  • 54. NETWORK The NETWORK section below specifies that the file "login.asp" should never be cached, and will not be available offline. NETWORK: login.asp An asterisk can be used to indicate that all other resources/files require an internet connection: NETWORK: *
  • 55. FALLBACK The FALLBACK section below specifies that "offline.html" will be served in place of all files in the /html/ catalog, in case an internet connection cannot be established: FALLBACK: /html/ /offline.html
  • 56. Updating the Cache Once an application is cached, it remains cached until one of the following happens: The user clears the browser's cache The manifest file is modified (see tip below) The application cache is programmatically updated

Notes de l'éditeur

  1. Myself GauravJaiswal, I am here to represent my company Singsys Pte. Ltd.Today I am going to present my presentation entitled SoLoMo: 3 important ingredients for any mobile application.
  2. A manifest file needs to be served with the correct MIME-type, which is &quot;text/cache-manifest&quot;. Must be configured on the web server.
  3. Lines starting with a &quot;#&quot; are comment lines, but can also serve another purpose. An application&apos;s cache is only updated when its manifest file changes. If you edit an image or change a JavaScript function, those changes will not be re-cached. Updating the date and version in a comment line is one way to make the browser re-cache your files.