HTML 5

HTML 5
New in HTML5
The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
The character encoding (charset) declaration is also
very simple:
<meta charset="UTF-8">
New HTML5 elements

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>.
HTML5 API's
The most interesting new API's are:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML 5 Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
New Elements to HTML
<!DOCTYPE html>
<html>
<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html> Demo
HTML 5 Skeleton
HTML5 Semantic Elements

Semantics means (from Ancient Greek), is the study of
meaning.
Semantic elements are elements with a meaning.
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.
Semantic Elements in HTML5
Semantic Elements in HTML5

HTML5 offers new semantic elements to define different parts of a web page:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML5 <section> Element

The <section> element defines a section in a document.
According to W3C's HTML5 documentation: "A section is a
thematic grouping of content, typically with a heading."
A Web site's home page could be split into sections for
introduction, content, and contact information.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Demo
HTML5 <article> Element

The <article> element specifies independent, selfcontained content.
An article should make sense on its own, and it should
be possible to read it independently from the rest of the
web site.
Examples of where an <article> element can be used:
Forum post
Blog post
Newspaper article
HTML5 <article> Element

<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of
our planet's natural environment,
and build a future in which humans live in
harmony with nature.</p>
</article>
Demo
Nesting Semantic Elements

the <article> element defines a complete, selfcontained block of related elements.
The <section> element is defined as a block of related
elements.
HTML pages with <section> elements containing
<article> elements, and <article> elements containing
<sections> elements
<section> elements containing <section> elements,
and <article> elements containing <article> elements.
HTML5 <header> Element

The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
The following example defines a header for an article:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural
environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Demo
HTML5 <footer> Element

The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing
element.
A footer typically contains the author of the document, copyright
information, links to terms of use, contact information, etc.
You can have several <footer> elements in one document.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a
href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer> Demo
HTML5 <nav> Element

The <nav> element defines a set of navigation
links.
The <nav> element is intended for large blocks of
navigation links. However, not all links in a document
should be inside a <nav> element!
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> DEMO
HTML5 <aside> Element

The <aside> element defines some content aside
from the content it is placed in (like a sidebar).
The aside content should be related to the surrounding
content.
<p>My family and I visited The Epcot center this
summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney
World, Florida.</p>
</aside>
HTML5 <figure> and <figcaption> Elements

In books and newspapers, it is common to have captions with
images.
The purpose of a caption is to add a visual explanation to an image.
With HTML5, images and captions can be grouped together in
<figure> elements:
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock"
width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
Demo
HTML <details> Tag

The <details> tag specifies additional details that the user can view or hide
on demand.
The <details> tag can be used to create an interactive widget that the user
can open and close. Any sort of content can be put inside the <details> tag.
The content of a <details> element should not be visible unless the open
attribute is set.
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of
the company Refsnes Data.</p>
</details> Demo
HTML <main> Tag

The <main> tag specifies the main content of a
document.
The content inside the <main> element should be
unique to the document.
It should not contain any content that is repeated
across documents such as sidebars, navigation links,
copyright information, site logos, and search forms.
Note: There must not be more than one <main>
element in a document. The <main> element must NOT
be a descendent of an <article>, <aside>, <footer>,
<header>, or <nav> element.
HTML <main> Tag

<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main> Demo
HTML <mark> Tag

The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight parts of
your text.
<p>Do not forget to buy <mark>milk</mark>
today.</p>
Demo
Why Semantic HTML5

Elements?
Why Semantic HTML5 Elements?

With HTML4, developers used their own favorite attribute names
to style page elements:
header, top, bottom, footer, menu, navigation, main, container,
content, article, sidebar, topnav,
This made it impossible for search engines to identify the correct
web page content.
With HTML5 elements like: <header> <footer> <nav> <section>
<article>, this will become easier.
According to the W3C, a Semantic Web:
"Allows data to be shared and reused across applications,
enterprises, and communities."
HTML Media
HTML5 Video
The HTML5 <video> element specifies a standard way
to embed a video in a web page.
controls attribute adds video controls, like play, pause,
and volume.
<video width="320" height="240" autoplay>
<source src="clipcanvas_14348_offline.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
HTML Video - Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for
the <video> element.
This allows you to load, play, and pause videos, as well
as setting duration and volume.
There are also DOM events that can notify you when a
video begins to play, is paused, etc.
PLAY
The HTML <audio> Element

To play an audio file in HTML, use the <audio>
element:
<audio controls>
<source src="Kalimba.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
controls attribute adds audio controls, like play, pause,
and volume.
Text between the <audio> and </audio> tags will
display in browsers that do not support the <audio>
element.
HTML Graphics
HTML Canvas Tag

The HTML canvas element provides HTML a bitmapped
surface to work with.
It is used to draw graphics on the web page.
The HTML 5 <canvas> tag is used to draw graphics
using scripting language like JavaScript.
The <canvas> element is only a container for
graphics, you must need a scripting language to
draw the graphics.
The <canvas> element allows for dynamic and scriptable
rendering of 2D shapes and bitmap images.
How to create a HTML canvas?

A canvas is a rectangle like area on an HTML page. It is
specified with canvas element.
By default, the <canvas> element has no border and no
content, it is like a container.
<canvasid="mycanvas"width="200"height="
100"></canvas>
Demo
HTML Canvas Drawing

Step 1: Find the Canvas Element
First of all, you must find find the <canvas> element.
This is done by using the HTML DOM method getElementById():
var canvas = document.getElementById("myCanvas");
Step 2: Create a Drawing Object
Secondly, you need a drawing object for the canvas.
The canvas context is a built-in HTML object, with properties and
methods for drawing.
You create a canvas drawing object by calling the canvas method
getContext("2d"):
var ctx = canvas.getContext("2d");
HTML Canvas Drawing

Step 3: Draw on the Canvas
Finally, you can draw on the canvas.
Set the fill style of the drawing object to the color red:
ctx.fillStyle = "#FF0000";
The fillStyle property can be a CSS color, a gradient, or
a pattern. The default is #000000 (black).
The fillRect(x,y,width,height) method draws a
rectangle, filled with the fill style, on the canvas.
ctx.fillRect(0,0,150,75);
HTML Canvas Drawing

Demo
HTML Canvas Coordinates

The HTML canvas is two-dimensional.
The upper-left corner of the canvas has the coordinates
(0,0)
fillRect(0,0,150,75).
This means: Start at the upper-left corner (0,0) and
draw a 150 x 75 pixels rectangle.
Draw a Line
To draw a straight line on a canvas, you use these
methods:
moveTo(x,y) defines the starting point of the line
lineTo(x,y) defines the ending point of the line
Demo
Draw a Circle
To draw a circle on a canvas, you use the following
methods:
beginPath();
arc(x,y,r,start,stop)
DEMO
HTML Canvas Gradients

The fillStyle property is used to define a fill-color (or
gradient) for the drawing
Demo
Gradients can be used to fill rectangles, circles, lines,
text, etc.
Shapes on the canvas are not limited to solid colors.
There are two different types of gradients:
createLinearGradient(x,y,x1,y1) - Creates a linear
gradient
createRadialGradient(x,y,r,x1,y1,r1) - Creates a
radial/circular gradient
HTML Canvas Gradients

Once we have a gradient object, we must add two or more color
stops.
The addColorStop() method specifies the color stops, and its
position along the gradient. Gradient positions can be anywhere
between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the
gradient, and then draw the shape, like a rectangle, text, or a
line.
Using createLinearGradient()
Demo
Demo
HTML Canvas Text

To draw text on a canvas, the most important property
and methods are:
font - defines the font properties for the text
strokeText(text,x,y) - Draws text on the canvas
fillText(text,x,y) - Draws "filled" text on the
canvas
Demo
Demo
Demo
HTML Canvas Images

To draw an image on a canvas, use the following
method:
drawImage(image,x,y)
Demo
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 integrates with other W3C standards such as the
DOM and XSL
Differences Between SVG and

Canvas
SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, with a JavaScript.
In SVG, each drawn shape is remembered as an object.
If attributes of an SVG object are changed, the browser
can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the
graphic is drawn, it is forgotten by the browser. If its
position should be changed, the entire scene needs to
be redrawn, including any objects that might have been
covered by the graphic.
Embed SVG Directly Into HTML

Pages
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG Shapes
SVG has some predefined shape elements that can be
used by developers:
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
SVG Rectangle - <rect>

<rect width="300" height="100"
style="fill:rgb(0,0,255);strokewidth:3;stroke:rgb(0,0,0)" />
</svg>
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;strokewidth:5;opacity:0.5" />
SVG Circle - <circle>

<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black"
stroke-width="3" fill="red" />
</svg>
cx and cy attributes define the x and y coordinates of
the center of the circle
SVG Ellipse - <ellipse>

The <ellipse> element is used to create an ellipse.
An ellipse is closely related to a circle.
The difference is that an ellipse has an x and a y radius
that differs from each other, while a circle has equal x
and y radius
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
SVG Ellipse - <ellipse>

style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
style="fill:yellow" />
</svg>
The cx attribute defines the x coordinate of the center of the ellipse
The cy attribute defines the y coordinate of the center of the ellipse
The rx attribute defines the horizontal radius
The ry attribute defines the vertical radius
SVG <line>
The <line> element is used to create a line
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
SVG Polygon - <polygon>

The <polygon> element is used to create a graphic that contains at
least three sides.
Polygons are made of straight lines, and the shape is "closed"

<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fillrule:nonzero;" />
</svg>
SVG Polyline - <polyline>

The <polyline> element is used to create any shape
that consists of only straight lines
<polyline points="20,20 40,25 60,40 80,120
120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
<polyline points="0,40 40,40 40,80 80,80 80,120
120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
SVG Path - <path>

The <path> element is used to define a path.
The following commands are available for path data:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bzier curve
T = smooth quadratic Bzier curveto
A = elliptical Arc
Z = closepath
All of the commands above can also be expressed with lower letters.
Capital letters means absolutely positioned, lower cases means
relatively positioned.
SVG Path - <path>

<path d="M150 0 L75 200 L225 200 Z" />
</svg>
SVG Text - <text>

The <text> element is used to define a text.
<text x="0" y="15" fill="red">I love SVG!
</text>
</svg>
SVG Stroke Properties

SVG offers a wide range of stroke properties.
stroke
stroke-width
stroke-linecap
stroke-dasharray
All the stroke properties can be applied to any kind of

lines, text and outlines of elements like a circle.
SVG stroke Property

The stroke property defines the color of a line, text or
outline of an element
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="blue" d="M5 40 l215 0" />
<path stroke="black" d="M5 60 l215 0" />
</g>
</svg>
SVG stroke-width Property

The stroke-width property defines the thickness of a
line, text or outline of an element
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
</g>
</svg>
SVG stroke-linecap Property

The stroke-linecap property defines different types of
endings to an open path
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215
0" />
<path stroke-linecap="round" d="M5 40 l215
0" />
<path stroke-linecap="square" d="M5 60 l215
0" />
</g>
</svg>
SVG stroke-dasharray Property

The stroke-dasharray property is used to create dashed
lines
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215
0" />
<path stroke-dasharray="10,10" d="M5 40
l215 0" />
<path stroke-dasharray="20,10,5,5,5,10"
d="M5 60 l215 0" />
</g>
</svg>

HTML 5

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML 5

Загружено:

Авторское право:

Доступные форматы

HTML 5

New HTML5 elements

New Elements to HTML

HTML5 Semantic Elements

Semantic Elements in HTML5

Semantic Elements in HTML5

HTML5 <section> Element

HTML5 <article> Element

HTML5 <article> Element

Nesting Semantic Elements

HTML5 <header> Element

HTML5 <footer> Element

HTML5 <nav> Element

HTML5 <aside> Element

HTML5 <figure> and <figcaption> Elements

HTML <details> Tag

HTML <main> Tag

HTML <main> Tag

HTML <mark> Tag

Why Semantic HTML5

Why Semantic HTML5 Elements?

HTML Video - Methods, Properties, and Events

The HTML <audio> Element

HTML Canvas Tag

How to create a HTML canvas?

HTML Canvas Drawing

HTML Canvas Drawing

HTML Canvas Drawing

HTML Canvas Coordinates

HTML Canvas Gradients

HTML Canvas Gradients

HTML Canvas Text

HTML Canvas Images

Differences Between SVG and

Embed SVG Directly Into HTML

SVG Rectangle - <rect>

SVG Circle - <circle>

SVG Ellipse - <ellipse>

SVG Ellipse - <ellipse>

The cx attribute defines the x coordinate of the center of the ellipse

The cy attribute defines the y coordinate of the center of the ellipse

The rx attribute defines the horizontal radius

The ry attribute defines the vertical radius

SVG Polygon - <polygon>

<svg height="210" width="500">

SVG Polyline - <polyline>

SVG Path - <path>

SVG Path - <path>

SVG Text - <text>

SVG Stroke Properties

All the stroke properties can be applied to any kind of

SVG stroke Property

SVG stroke-width Property

SVG stroke-linecap Property

SVG stroke-dasharray Property

Вам также может понравиться