Learn html5

mos.bayomi@gmail.com

HTML 5 The New Standard For HTML

[New] Tags

JavaScript

<!DOCTYPE>

<!DOCTYPE>SGML(Standard

Generalized Markup Language)

<!DOCTYPE>(cont’d)

</div>

<h1>This is my Blogpost</h1>

<p>This is my first paragraph.</p>

</div>

<p>My blogroll Content.</p>

</div>

<p>My Footer Content.</p>

</div>

</header>

<h1>This is my Blogpost</h1>

<p>This is my first paragraph.</p> </section>

</article>

</div>

<p>My blogroll Content.</p>

</aside>

</div>

<p>My Footer Content.</p>

</footer>

windownavigator

modernizr_init()

Modernizr.video true

if (Modernizr.video) {

// let's play some video!

// no native video support available :(

HEADER:

<h1>Heading Text</h1>

<p> Text or images can be included here</p>

<p> Logos are frequently placed here too</p>

</header>

The <header> tag can also contain an <hgroup> tag, as shown. The <hgroup> tag

groups headings together, using the <h1> to <h6> heading levels

shown here with a main heading and a sub-heading. <header> <hgroup> <h1>Main Heading</h1> <h2>Sub-heading </h2> </hgroup> <p> Text or images can be included here</p> </header>

FOOTER:

The <footer> element contains information about a page, article, or section, such as

the author or date of the article.

As a page footer, it may contain copyright or other important legal information.

</footer>

The HTML5 specification says: ―A footer typically contains information about its

section such as

who wrote it, links to related documents, copyright data, and the like.‖

------------------------------------------------------------------------------------------------------------------

The Navigation area

<li><a href="#">About Us</a></li>

<li><a href="#">Our Products</a></li>

<li><a href="#">Contact Us</a></li>

</nav>

<menu>

<button type="button" >Thalia</button>

<button type="button">Urania</button>

<button type="button">Calliope</button>

</menu>

------------------------------------------------------------------------------------------------------------------ <section>

The <section> element is commonly misused. Most people would think of using the

section tag as a container block level element to contain a portion of the site. This is

incorrect.

The true way to use the section element is to think of it in terms of grouping specific

portions of content. Inside a section you may have multiple headings to further narrow

the focus of the section and there may be multiple sections inside a particular piece of

content.

The <section> tag—and the <article> tag, as well—can contain headers, footers, or

any other components required to complete the section. The <section> tag is for

grouping content. The content for both the <section> tag and the <article> tag usually

starts with a <header> and ends with a <footer>, with the content for the tag in

between.

The <section> tag can also contain <article> tags, just as the <article> tag can contain

the <section> tag

------------------------------------------------------------------------------------------------------------------

<section> Content </section>

</article>

------------------------------------------------------------------------------------------------------------------

<article> Content </article>

</section>

<aside>

<img src="koala.jpg" width="304" height="228"> <figcaption>Caption for the figure</figcaption>

</figure>

<aside>

Think of this tag as holding supplementary content that is not part of the flow of the

article it supplements. In magazines, asides are frequently used to highlight a point

that was made in the article itself. The <aside> tag contains content that can be

removed without affecting the information conveyed by the article, section, or page

that contains it.

<p>My family and I visited Euro Disney last year.</p>

<aside>

<h4>Disney in France</h4>

<p>Besides Euro Disney, there is a Disneyland in California.</p>

</aside>

A Form of Madness

<form>

• Input type= datetime global date-and-time input control

• input type = datetime-local local date-and-time input control

• input type = date date input control

• input type = month year-and-month input control

• input type = time time input control

• input type = week year-and-week input control

• input type = number number input control

• input type = range imprecise number-input control

• input type = email e-mail address input control

• input type = url URL input control

• input type = search search field

• input type = tel telephone-number-input field

• input type = color color-well control

Dojo jQuery UI YUI.

date, month, week, time, date + time, and

date+time–timezone.

• See Demos

How to solve the problem for browsers that doesn’t support new input types

<form>

</form>

var idate = document.getElementById("idate");

if (idate.type != "date")

$("#idate").datepicker(); // using jQuery UI

</script>

Input type Browsers

type="date"

type="month"

type="week"

type="time"

type="datetime"

type="datetime-local"

• Input.stepUp(n)

• input.stepDown(n)

• input.valueAsNumber

input.value

if (!Modernizr.inputtypes.number) {

// no native support for type="number" fields

// maybe try Dojo or some other JavaScript framework

The latest versions of Safari, Chrome, and Opera all do this.

(Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize its

onscreen keyboard for numeric input.)

All other browsers simply treat the field as type="text"

• <input type="email">

setCustomValidity().

• object.setCustomValidity("WRONG!!");

The email INPUT tag gives you a way to request email addresses in your web form.

In most web browsers, this won't look any different than a standard .

Where this field becomes important is on mobile devices that change their interface

for email address fields, such as the iPhone, iPad, and iPod.

On those devices, email form fields are given a different keyboard with things like

readily available @-key, period, and minimized spacebar.

• <input type="url">

• <input type="search">

• <input type="tel">

• <input type="color">

New form attributes and functions

placeholder

search, url, tel, email password

autocomplete

unspecified

autofocus

boolean

list datalist

</datalist>

To use this combination: 1. Create a datalistelement in your document with its id set to a unique value.

The datalist can be located anywhere in the document.

2. Populate the datalist with as many option elements as needed to represent

the full set of suggestions for values of a control.

For example, a datalist representing e-mail contacts should contain all of the contact

e-mail addresses as individual option children.

</datalist>

3. Link the input element to the datalistby setting the listattribute to a value

which is the idof the associated datalist.

required

The valueMissing Constraint

Purpose: Ensure that some value is set on this form control

Usage: Set the requiredattribute on the form control to true

Usage example: <input type="text" name="myText" required> Details: If the required attribute is set on a form control, the control will be in an

invalid state unless the user or a programmatic call sets some value to the field.

For example, a blank text field will fail a required check, but will pass as soon as any

text is entered. When blank, the valueMissing will return true.

mos.bayomi@gmail.com mos.bayomi@gmail.com

• <canvas>

What Is a Canvas?

When you use a canvas element in your web page, it creates a rectangular

area on the page.

By default, this rectangular area is 300 pixels wide and 150 pixels high, but

you can specify the exact size and set other attributes for your canvas

element.

Your Browser Doesn’t Support Canvas

</canvas>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

if (canvas.getContext)

else{ // put code for browsers that don't support canvas here}

if (Modernizr.canvas) {. . .}

else{// put code for browsers that don't support canvas here}

<head>

<!--[if IE]>

<![endif]-->

</head>

• <script type="text/javascript">

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

To programmatically use a canvas, you have to first get its

context.

You can then perform actions on the context and finally apply

those actions to the context.

You can think of making canvas modifications as similar to

database transactions: you start a transaction, perform certain

actions, and then commit the transaction.

getContext("2d")

fillStyle

fillRect(x,y,width,height)

strokeStyle fillStyle —

• strokeRect(x,y,width,height)

EXAMPLE:

function drawSquare () {

var canvas = document.getElementById('draw-square');

if (canvas.getContext) {

var context = canvas.getContext('2d');

context.fillStyle = "rgb(150,29,28)";

context.fillRect (2,2,96,96);

} else {

// put code for browsers that don't support canvas here

} </script>

The first thing this script does is find the element with the

id draw-square:

var canvas = document.getElementById('draw-square');

Then it checks to see if the browser supports the context

method on this element.

This is an easy way to make sure that your canvas will only

display on browsers that support the tag.

if (canvas.getContext) { ... }

The context is the rendering context that is used to manipulate

content that is displayed.

You should use a 2-dimensional (2d) rendering context. But in

the future, 3-dimensional context may be supported.

Once I have the context, I need to build my square with the two

lines:

context.fillStyle = "rgb(150,29,28)";

context.fillRect (2,2,96,96);

I created a square that is red (rgb(150,29,28)) and is positioned

2 pixels down and 2 pixels over and 96 pixels wide and high

(fillRect (2,2,96,96)).

Then, in the else section of my script, I can put any JavaScript I

want to display if the canvas element isn’t supported.

• fillRect(x,y,width,height):

strokeRect(x,y,width,height):

clearRect(x,y,width,height):

fillRect()

Like other 2d platforms, it uses a flat Cartesian coordinate

system with the origin (0, 0) at the top left.

Moving to the right will increase the x value, and moving

downwards will increase the y value.

Understanding how the coordinate system works is integral if

you want to have things draw in the right place.

A single unit in the coordinate system is usually equivalent to 1

pixel on the screen, so the position (24, 30) would be 24 pixels

right and 30 pixels down.

• moveTo(x,y)

• lineTo(x,y)

stroke().

• closePath():

• lineWidth = 4:

• context.lineJoin='round‘ :

• quadraticCurveTo(x1,y1, x2,y2):

X2,Y2 X1,Y1

• drawImage(image, dx, dy)

(dx, dy)

• drawImage(image, dx, dy, dw, dh)

(dx, dy).

• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

(sx, sy, sw, sh),

(dw, dh), (dx,

<img> Image

• createLinearGradient(x0,y0,x1,y1)

(x0,y0) (x1,y1).

• createRadialGradient(x0,y0,r0,x1,y1,r1)

(x0,y0) r0.

(x1,y1) r1.

addColorStop

var d_canvas = document.getElementById("d");

var context = d_canvas.getContext("2d");

var my_gradient = context.createLinearGradient(0,0,300,0);

my_gradient.addColorStop(0, "black");

my_gradient.addColorStop(1, "white");

context.fillStyle = my_gradient;

context.fillRect(0, 0, 300, 225);

</script>

var bg= new Image();

bg= "gravel.jpg";

bg.onload = function (){

context.strokeStyle=context.createPattern(bg,'repeat')

As you can see, we are still calling stroke() for our path.

However, this time we have set a strokeStyle property on the

context first, passing in the result of a call to context.createPattern. and once again the image needs

to be previously loaded in order for the canvas to perform the

operation.

The second argument is a repetition pattern that can be one of

the choices :

repeat (Default) The image is repeated in both directions

repeat-x The image is repeated only in the X dimension

repeat-y The image is repeated only in the Y dimension

no-repeat The image is displayed once and not repeated

scale(x,y)

context.rotate(angle)

context.save();

// rotation angle is specified in radians

context.rotate(1.57);

context.drawImage(myImage, 0, 0, 100, 100);

context.restore();

• fillText (text, x, y, maxwidth)

• strokeText (text, x, y, maxwidth)

Both functions take the text as well as the location at which it

should be drawn.

Optionally, a maxwidth argument can be provided to constrain

the size of the text by automatically shrinking the font to fit the

given size.

• font

• textAlign

text-align

start, end, left, right, center.

• textBaseline

top, hanging, middle, alphabetic,

ideographic, and bottom.

• textBaseline

The top of the em square is roughly at the top of the glyphs in a

font, the hanging baseline is where some glyphs like ը are

anchored, the middle is half-way between the top of the

em square and the bottom of the em square, the alphabetic

baseline is where characters like Á, ÿ, f, and Ω are anchored,

the ideographic baseline is where glyphs like 私 and

達 are anchored

and the bottom of the em square is roughly at the bottom of the

glyphsin a font.

The top and bottom of the bounding box can be far from these

baselines, due

to glyphs extending far outside the em square

context

• shadowColor

• shadowOffsetX:

• shadowOffsetY:

• shadowBlur

requestAnimFrame

window.requestAnimFrame = (function(callback) {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

})(); // call function after its declaration

function animate() {

// get canvas and its context

// clear canvas context

context.clearRect(0, 0, canvas.width, canvas.height);

// draw stuff

// request new frame

requestAnimFrame(function() {

animate();

}// end of animate function

Vector-based graphics for the Web

</svg>

</rect>

<line x1="50" y1="50" x2="150" y2="150"

style="stroke: rgb(0,127,127); stroke-width: 5;">

</line>

<circle cx="165" cy="100" r="50"

style="fill:rgb(0,255,0);">

</circle>

</svg>

<polygon points="265,50 315,150 215,150"

style="stroke: rgb(51,51,51); fill: rgb(204,204,204);

stroke-width: 5;">

</polygon>

<rect x="50" y="50" width="100" height="100"

fill="rgb(255,0,0)"></rect>

<line x1="50" y1="50" x2="150" y2="150"

stroke="rgb(0,127,127)" stroke-width="5"></line>

rect {

fill: rgb(255,0,0);

line {

stroke: rgb(0,127,127);

stroke-width: 5;

<image x="10" y="10"

width="236" height="260"

xlink:href="example.png">

</image>

xlink:href

Hi everybody , everything is OK!

</text>

No Plugin?? -- Yes -- no plugin

<audio>

– The <audio> tag identifies sound content, such as music or any other audio

streams.

– The <audio> tag has attributes that control what, when, and how audio will be played. The attributes are src, preload, controls, loop, and autoplay.

Your browser does not support the audio tag.

</audio>

– The <video> and <audio> tags can contain the <source> tag, which

defines multimedia resources for <video> and <audio>tags.

– With this element, you specify alternative video and audio files from

which the browser can then choose based on its media type or codec

support.

<p>Your browser does not support the audio tag</p>

</audio>

Browser MP3 Wav Ogg

Internet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome 6 YES YES YES

Apple Safari 5 YES YES NO

Opera 10.6 NO YES YES

<audio>

1. load():

2. play():

3. pause():

4. canPlayType(type):

1. Duration :

2. Paused:

3. ended

4. startTime

5. error

6. currentSrc :

1. autoplay :

2. loop

3. currentTime

4. controls

5. volume

6. muted

Problems, Problems, and Solutions

<embed>

• Problems:

• Problems:

– allows you to broadcast video clips or streaming visual media.

– It has all the attributes of the <audio> tag plus three more: poster, width,

and height.

– The poster attribute lets you identify an image to be used while the video is

loading or in the case when the video won't load at all.

Your browser does not support the video tag

</video>

• Problems:

<video>

1. poster :

2. width, height

3. videoWidth, videoHeight

You Are Here (And So Is Everybody Else)

navigator

navigator.geolocation

function get_location() {

navigator.geolocation.getCurrentPosition(show_map);

if (Modernizr.geolocation)

getCurrentPosition()

show_map()

getCurrentPosition(callback function)

function show_map(position) {

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

// let's show a map or do something interesting!

coords timestamp

getCurrentPosition(callback function)

(Since this is all happening asynchronously, you can’t really

know when that will happen in advance.

It might take some time for the user to read the info bar and agree to share

her location, devices with dedicated GPS hardware may take some more

time to connect to a GPS satellite, and so on.)

position.coords

Property Type Notes

coords.latitude double Decimal degrees

coords.longitude double Decimal degrees

coords.altitude doubleor null Meters above the reference ellipsoid

coords.accuracy double Meters

coords.altitudeAccuracy doubleor null Meters

coords.heading doubleor null Degrees clockwise from true north

coords.speed doubleor null Meters/second

Only three of the properties are guaranteed to be there (coords.latitude,

coords.longitude, and coords.accuracy).

The rest might come back as null, depending on the capabilities of your

device and the backend positioning server with which it communicates.

The headingand speedproperties are calculated based on the user’s

previous position, if possible.

navigator.geolocation.getCurrentPosition(

show_map, handle_error).

PositionError

code message

function handle_error(err) {

if (err.code== 1) {

// user said no!

PositionOptions

• enableHighAccuracy

• timeout

• maximumAge

Ex: navigator.geolocation.getCurrentPosition(

success_callback, error_callback, {maximumAge: 75000});

What you’re saying is that you don’t necessarily need the user’s

currentlocation.

You would be satisfied with knowing where he was 75 seconds (75000

milliseconds) ago.

watchPosition()

getCurrentPosition().

watchPosition()

clearWatch(t)

setInterval() clearInterval()

geolocation

<script

src=" http://maps.google.com/maps/api/js?sensor=false">

</script>

var map = new

google.maps.Map(document.getElementById("map_div"), myOptions);

//the div to display on , and options for map

var myOptions = {

zoom: 8, //the zoom level 0 to 21

center: new google.maps.LatLng(latitude, longitude),

//the center of map displayed

mapTypeId: google.maps.MapTypeId.ROADMAP

//Map Type

– sessionStorage localStorage

window

window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);

myFirstValue myFirstKey

getItem

alert(window.sessionStorage.getItem(‘myFirstKey’));

window.sessionStorage.myFirstKey = ‘myFirstValue’;

alert(window.sessionStorage.myFirstKey);

localStorage

sessionStorage localStorage

Values persist only as long as

the window or tab in which

they were stored

Values persist beyond window and

browser lifetimes.

Values are only visible within

the window or tab that created

Values are shared across every window

or tab

running at the same origin.

length

key(index)

• getItem(key)

• setItem(key, value)

QUOTA_EXCEEDED_ERR

• removeItem(key) :

Threads in JS

worker = new Worker("myWorker.js");

postMessage

postMessage()

worker.postMessage("a message from parent page");

postMessage()

onmessage

event.data

onmessage = function myFunction(event)

event.data;

……

postMessage('a message to the parent page');

myWorkers.js

ErrorEvent

Worker.onerror = function(e)

{…………}

Learn html5

Technology

Learn HTML5 in 5 Minutes! - Yeon Kimyeonkim.com/yeonkim.com/pdf/Learn_HTML_in_5_Minutes_Jennifer_… · Learn HTML in 5 Minutes_Jennifer Marsman.docx Page 1 of 17 Learn HTML5 in 5

Prettyman Learn PHP 7 Learn - morawa.atPrettyman Learn PHP 7 Learn PHP 7 Object-Oriented Modular Programming using HTML5, CSS3, JavaScript, XML, JSON, and MySQL — Steve Prettyman

HTML5 & JavaScript HTML5 JavaScript & HTML5 HTML5 HTML5 ...ec.nikkeibp.co.jp/item/contents/mokuji/m_229980.pdf · (JavaScript + HTML API) 72 Part2 HTML5 80 HTML5 File APIJs r Server-Sent

Html5center.sourceforge.net-Learn HTML5 in 5 Minutes

Learn HTML5 for beginners at rocket speed

html5 & css3 · 2020-03-28 · HTML5 and CSS3 are the basic knowledge that need to be learn by every webmaster Course content course packages Day 2 Introduction HTML HTML basics I

Learn HTML5: Getting Started

HTML5 Programming Cookbook - Learn Web · PDF fileHTML5 Programming Cookbook vi Preface HTML5 is a core technology markup language of the Internet used for structuring and presenting

Learn HTML5 and JavaScript for iOS : [web standards-based ...Learn HTML5 and JavaScript for iOS : [web standards-based apps for iPhone, iPad, and iPod touch ; create professional-looking

(1) Whitney Drewdocshare02.docshare.tips/files/7322/73222375.pdf · 2017-01-25 · udemy.com 75% off - Master HTML5 with Robin Nixon's HTML5 video ... Started Today! Learn Web Design

BCA I SYLLABUS - WordPress.com · 2017-09-25 · 1.Understand the meaning and syntax of different tags of HTML5 2.Learn the basic differences between HTML and HTML5 3.Understand the

Learn HTML5 Fundamentals

“HTML5”: more than just HTML5

HTML5 - (01) Visão Geral do HTML5

Hire html5 developer for html5 development and html5 game development

HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5

You Don't Have to be a Ninja to Learn HTML5!

Concentrated HTML5 & Attractive HTML5

HTML - basic tags - How to learn more. What is HTML? HyperText Markup Language HTML5: – Recommended by the W3C

Alessandro Confetti - Learn how to build decentralized and serverless html5 applications with EmbarkJS, Ethereum and IPFS - Codemotion Milan 2017