HTML Charset : Definire: Encoding: What's New!!!

HTML5 Documentatie si Notite
Definire : <!DOCTYPE html>

Encoding: <meta charset="UTF-8">
Whats new!!!
New semantic elements like <header>, <footer>, <article>, and <section>.

New form controls like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
All elements are considered as being displayed BLOCK.

header, section, footer, aside, nav, main, article, figure {
display: block;
}
IE Support with THE SHIV

New Elements added :

<article>
Defines an article in the document
<aside>
Defines content aside from the page content
<dialog>
Defines a dialog box or window
<figcaption>
Defines a caption for a <figure> element
<figure>
Defines self-contained content, like illustrations, diagrams, photos, code

listings, etc.
<footer>
Defines a footer for the document or a section
<header>
Defines a header for the document or a section
<nav>
Defines navigation links in the document
<section>
Defines a section in the document
New Input Types
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
New Input Attributes
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
HTML5 Semantics
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.
With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become
easier for search engines to identify the correct web page content.
HTML5 API
1. HTML5 Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
browser.";
x.innerHTML = "Geolocation is not supported by this
Main idea is to use getCurrentPosition() in order to get the position. You can pass a parameter
in the callback in order to be called when position is gathered with success.
Callback needs to be have a parameter called position -> there will be stored the position
(coordinates).
Position attributes :
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
2.HTML5 Drag and Drop

Example of use case when you want to drag an image and drop it inside a div.
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
-
Make an element draggable use : draggable=true

Use ondragstart event and set the data type and value for dragged data
event.dataTransfer.setData(text, ev.target.id). In this case data type is text and value is

the id of dragged element
- The ondragover event specifies where the dragged data can be dropped. To
allow a drop, first you need to preventDefault behaviour like event.preventDefault();.
- Use ondrop event and get the data type and value. event.dataTransfer.getData()
3. HTML5 Web Storage.

With local storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request.
Local storage is more secure, and large amounts of data can be stored locally, without affecting
website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred
to the server.
HTML local storage provides two objects for storing data on the client:
window.localStorage - stores data with no expiration date

window.sessionStorage - stores data for one session (data is lost when the tab is
closed)
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
4. HTML5 Caching
Application cache gives an application three advantages:
1. Offline browsing - users can use the application when they're offline
2. Speed - cached resources load faster
3. Reduced server load - the browser will only download updated/changed
resources from the server
<!DOCTYPE HTML>
<html manifest="demo.appcache">
File demo.appcache is explained below :
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
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
5.HTML5 Web Workers.

w = new Worker("demo_workers.js");
Add an "onmessage" event listener to the web worker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
w.terminate(); - terminate a Worker.
w = undefined; - reuse the Worker.

HTML Charset : Definire: Encoding: What's New!!!

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Charset : Definire: Encoding: What's New!!!

Uploaded by

Copyright:

Available Formats

HTML5 Documentatie si Notite

Definire : <!DOCTYPE html>

New semantic elements like <header>, <footer>, <article>, and <section>.

All elements are considered as being displayed BLOCK.

New Elements added :

Defines an article in the document

Defines content aside from the page content

Defines a dialog box or window

Defines a caption for a <figure> element

Defines self-contained content, like illustrations, diagrams, photos, code

Defines a footer for the document or a section

Defines a header for the document or a section

Defines navigation links in the document

Defines a section in the document

New Input Types

New Input Attributes

x.innerHTML = "Geolocation is not supported by this

The latitude as a decimal number

The longitude as a decimal number

The accuracy of position

The altitude in meters above the mean sea level

The altitude accuracy of position

The heading as degrees clockwise from North

The speed in meters per second

The date/time of the response

2.HTML5 Drag and Drop

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Make an element draggable use : draggable=true

event.dataTransfer.setData(text, ev.target.id). In this case data type is text and value is

3. HTML5 Web Storage.

window.localStorage - stores data with no expiration date

The user clears the browser's cache

5.HTML5 Web Workers.

You might also like