Scribd
Upload
10 views31 pages

HTML5

Uploaded by

Dewang Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views31 pages

HTML5

Uploaded by

Dewang Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

HTML5

What is 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">
HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Note: The default character encoding in HTML5 is UTF-8
HTML5 new elements
• semantic elements like <header>, <footer>, <article>, and <section>.
• New attributes of form elements like number, date, time, calendar, and range.
• Graphic elements: <svg> and <canvas>.
• Multimedia elements: <audio> and <video>.
New HTML5 API's (Application Programming Interfaces)
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• HTML Web Workers
• HTML SSE
HTML5 Browser Support
• HTML5 is supported in all modern browsers.
• All browsers, old and new, automatically handle unrecognized elements as inline
elements.
• Because of this, you can "teach" older browsers to handle "unknown" HTML elements.
Define Semantic Elements as Block Elements
• HTML5 defines eight new semantic elements. All these are block-level elements.
• To secure correct behavior in older browsers, you can set the CSS display property for
these HTML elements to block:

header, section, footer, aside, nav, main, article, figure


{
display: block;
}
Add New Elements to HTML
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
The JavaScript statement document.createElement("myHero") is needed to create a new element in IE 9, and earlier.
Problem With Internet Explorer 8
• IE8 (and earlier) does not allow styling of unknown elements!
• The HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet
Explorer prior to version 9.
Syntax For HTML5Shiv
• The HTML5Shiv is placed within the <head> tag.
• The HTML5Shiv is a javascript file that is referenced in a <script> tag.
• You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>,
<section>, <aside>, <nav>, <footer>.
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
• If you do not want to download and store the HTML5Shiv on your site, you could reference the version
found on the CDN site.
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

• The HTML5Shiv script must be placed in the <head> element, after any stylesheets:
New Semantic/Structural Elements
<article> Defines an article in a document
<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
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
New Form Elements
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
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 - New Attribute Syntax
Type Example
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>

• In HTML5, all four syntaxes may be used, depending on what is needed for the
attribute.
HTML5 Graphics
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics
New Media Elements
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie
Semantic Elements
• 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 <article> - Clearly
defines its content.
HTML5 <section> Element
• The <section> element defines a section in a document.
• A home page could normally 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>
HTML5 <article> Element
• The <article> element specifies independent, self-contained 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
<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>
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.
<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>
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 may have several <footer> elements in one document.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
HTML5 <nav> Element
• The <nav> element defines a set of navigation links.
• Notice that NOT all links of a document should be inside a <nav> element. The <nav>
element is intended only for major block of navigation links.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
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>
HTML <summary> Tag
• The <summary> tag defines a visible heading for the <details> element. The heading can be
clicked to view/hide the details.
• Note: The <summary> element should be the first child element of the <details> element.
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-2018.</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>
<details> tag Attributes
open Specifies that the details should be visible (open) to the user
• The open attribute is a boolean attribute.
• When present, it specifies that the details should be visible (open) to the user.
<details open>
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 descendant of an <article>, <aside>,
<footer>, <header>, or <nav> element.
<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers
today.</p>
</main>
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></p>
• Most browsers will display the <mark> element with the following default values:
mark {
background-color: yellow;
color: black;
}
HTML <time> Tag
• The <time> tag defines a human-readable date/time.
• This element can also be used to encode dates and times in a machine-readable way so that user
agents can offer to add birthday reminders or scheduled events to the user's calendar, and search
engines can produce smarter search results.
• <time> tag Attributes
• datetime Represent a machine-readable date/time of the <time> element
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
HTML5 <figure> and <figcaption> Elements
• The purpose of a figure caption is to add a visual explanation to an image.
• In HTML5, an image and a caption can be grouped together in a <figure> element:
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

Why Semantic Elements?


• With HTML4, developers used their own id/class names to style elements: header,
top, bottom, footer, menu, navigation, main, container, content, article, sidebar,
topnav, etc.
• This made it impossible for search engines to identify the correct web page
content.
• With the new HTML5 elements (<header> <footer> <nav> <section> <article>),
this will become easier.
Setting The Viewport
• The viewport is the user's visible area of a web page. It varies with
the device, and will be smaller on a mobile phone than on a
computer screen.
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
• A <meta> viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
• The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
• The initial-scale=1.0 part sets the initial zoom level when the page is
first loaded by the browser.
HTML Graphics
HTML5 Canvas
• The HTML <canvas> element is used to draw graphics on a web page via javascript.
• The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
• Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
• A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
<canvas id="myCanvas" width="200" height="100"></canvas>
• Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define
the size of the canvas. To add a border, use the style attribute.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
What is SVG?
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation
The HTML <svg> Element
• The HTML <svg> element is a container for SVG graphics.
• SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
SVG Circle
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
SVG Rectangle
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
SVG Rounded Rectangle
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-
width:5;opacity:0.5" />
</svg>
SVG Star
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-
rule:evenodd;" />
Differences Between SVG and Canvas
• SVG is a language for describing 2D graphics in XML.
• Canvas draws 2D graphics, on the fly (with a JavaScript).
• SVG is XML based, which means that every element is available within
the SVG DOM. You can attach JavaScript event handlers for an
element.
• 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.
• Comparison of Canvas and SVG
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
• You can save the resulting image as .png rendering areas (Google Maps)
or .jpg • Slow rendering if complex (anything that
• Well suited for graphic-intensive games uses the DOM a lot will be slow)
• Not suited for game applications
HTML Multimedia
What is Multimedia?
• Multimedia comes in many different formats. It can be almost anything you can hear or see.
• Examples: Images, music, sound, videos, records, films, animations, and more.
• Web pages often contain multimedia elements of different types and formats.
HTML5 Video
• Before HTML5, a video could only be played in a browser with a plug-in (like flash).
• The HTML5 <video> element specifies a standard way to embed a video in a web page.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
• The controls attribute adds video controls, like play, pause, and volume.
• It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the
video loads.
• The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the
first recognized format.
• The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
HTML <video> Autoplay
• To start a video automatically use the autoplay attribute:
<video width="320" height="240" autoplay>
• The autoplay attribute does not work in mobile devices like iPad and iPhone.
• In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.
HTML <track> Tag
• The <track> tag specifies text tracks for media elements (<audio> and <video>).
• This element is used to specify subtitles, caption files or other files containing
text, that should be visible when the media is playing.
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
HTML5 Audio
• Before HTML5, audio files could only be played in a browser with a plug-in (like flash).
• The HTML5 <audio> element specifies a standard way to embed audio in a web page.
• The controls attribute adds audio controls, like play, pause, and volume.
• The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
• The text between the <audio> and </audio> tags will only be displayed in browsers that
do not support the <audio> element.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
• HTML5 defines DOM methods, properties, and events for the <audio> element.
• This allows you to load, play, and pause audios, as well as set duration and volume.
• There are also DOM events that can notify you when an audio begins to play, is paused,
etc.
HTML Plug-ins
• The purpose of a plug-in is to extend the functionality of a web browser.
• Examples of well-known plug-ins are Java applets.
• Plug-ins can be added to web pages with the <object> tag or the <embed> tag.
• Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank id, etc.
The <object> Element
• The <object> element is supported by all browsers.
• The <object> element defines an embedded object within an HTML document.
• It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.
<object width="400" height="50" data="bookmark.swf"></object>
• The <object> element can also be used to include HTML in HTML
<object width="100%" height="500px" data="snippet.html"></object>
<object data="audi.jpeg"></object>
The <embed> Element
• The <embed> element is supported in all major browsers.
• The <embed> element also defines an embedded object within an HTML document.
<embed width="400" height="50" src="bookmark.swf">
• Note that the <embed> element does not have a closing tag. It can not contain alternative text.
<embed width="100%" height="500px" src="snippet.html">
<embed src="audi.jpeg">
HTML YouTube Videos
• To convert your videos to different formats to make them play in all browsers.
• Converting videos to different formats can be difficult and time-consuming.
• An easier solution is to let YouTube play the videos in your web page.
YouTube Video Id
• YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.
• You can use this id, and refer to your video in the HTML code.
• Playing a YouTube Video in HTML
To play your video on a web page, do the following:
• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Add any other parameters to the URL (see below)
<iframe width="420" height="315"src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
YouTube Autoplay
• You can have your video start playing automatically when a user visits that page by
adding a simple parameter to your YouTube URL.
• Value 0 (default): The video will not play automatically when the player loads.
• Value 1: The video will play automatically when the player loads.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
YouTube Playlist
• A comma separated list of videos to play (in addition to the original URL).
YouTube Loop
• Value 0 (default): The video will play only once.
• Value 1: The video will loop (forever).
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
YouTube Controls
• Value 0: Player controls does not display.
• Value 1 (default): Player controls display.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

You might also like