Scribd
Upload
2 views

Lecture 4 HTML5

This document provides an overview of HTML5, highlighting its differences from previous versions like HTML4 and XHTML, as well as its new features, advantages, and capabilities. It discusses the evolution of web standards, the introduction of semantic elements, multimedia support, and enhancements in forms and CSS. Additionally, it covers the concepts of local and session storage, and the use of the canvas and SVG for graphics on the web.

Uploaded by

shahirah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lecture 4 HTML5

This document provides an overview of HTML5, highlighting its differences from previous versions like HTML4 and XHTML, as well as its new features, advantages, and capabilities. It discusses the evolution of web standards, the introduction of semantic elements, multimedia support, and enhancements in forms and CSS. Additionally, it covers the concepts of local and session storage, and the use of the canvas and SVG for graphics on the web.

Uploaded by

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

Learning Outcomes

At the end of this lesson, students should be able to:


• identify the difference between the HTML and HTML5
• describe HTML5 new features and API
• apply HTML5 in creating Web pages
• describe the advantages of HTML5 and CSS3
approaches
INTRODUCTION TO HTML5

• HTML5 ≈ HTML 5 + CSS 3 + JavaScript


• HTML5 is a suite of tools for:
– Markup (HTML 5)
– Presentation (CSS 3)
– Interaction (DOM, Ajax, APIs)

2
What is HTML5?
• HTML5 is the newest version of HTML
• But not all browsers support all HTML5 yet

(Source: https://html5test.com/results/desktop.html)
• It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
• It adds a diverse set of new tools for the web developer to
use.
Goals of HTML5
• Support all existing web pages. With HTML5, there is no
requirement to go back and revise older websites.
• Reduce the need for external plugins and scripts to show website
content.
• Improve the semantic definition (i.e. meaning and purpose) of page
elements.
• Make the rendering of web content universal and independent of
the device being used.
• Handle web documents errors in a better and more consistent
fashion.
A Rough History of Web Standards
91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14

HTML 1 HTML 2 HTML 4 XHTML HTML 5


1
CSS 1 CSS 2 T-less D Web CSS3
2.0
JS ECMA, DOM 2 Ajax DOM,
DOM APIs

HTML 5 CSS
2004 WHATWG started 1996 – CSS 1 W3C Rec
2008 W3C Working Draft 1998 – CSS 2 W3C Rec
2012 (2010) W3C Candidate Rec 1999 – CSS 3 Proposed
2022 W3C Rec 2005 – CSS 2.1 W3C Candidate Rec
2001 – CSS 3 W3C Working Draft

WHATAG – Web Hypertext Application Technology Working Group W3C – World Wide Web Consortium
5
History of HTML
1991 HTML first published

1995 HTML 2.0


After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards


than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.

2014
2012 HTML5
Though HTML5 was published officially in
2014
2012, it has been in development since
2004.
HTML4 vs HTML5
HTML5 HTML4
HTML5 uses new structures such as drag, HTML 4 uses common structures like
drop and much more. headers , footers.
Embedded video and audio without using HTML 4 cannot embed video or audio
flash player. directly and makes use of flash player for
it.
HTML 5 is capable of handling inaccurate HTML 4 cannot handle inaccurate syntax
syntax

HTML 5 introduced many new API’s which HTML 4 has traditional API’s which does
facilitate flexibility of web pages. not include canvas and content editable
API’s.
In HTML 5, new tags and new features like In HTML 4, local storage is not possible
local storage are enhanced. and tags that can handle only one
dimension
7
8

HTML vs XHTML vs HTML5


 Document Type Declaration:
• Doctype for HTML 4.01:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01/EN”
“http://www.w3.org/TR/html4/strict.dtd”>

• Doctype for XHTML:


<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0
Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd”>

• Doctype for HTML5:


<!DOCTYPE html>
9

HTML vs XHTML vs HTML5 (cont.)


 The structural elements:
<html> <html> <html>
<head> <head> <head>
<!--head content--> <!--head content--> <!--head content-->
</head> </head> </head>
<body> <body> <body>
<!--body content--> <div id=“header”> <header>
</body> <!--content--> <!--content-->
</html> </div> </header >
<div id=“nav”> <nav>
<!--content--> <!--content-->
</div> </nav>
<div id=“section”> <section>
<!--content--> <!--content-->
</div> </section>
<div id=“aside”> <aside>
<!--content--> <!--content-->
</div> </aside>
<div id=“footer”> <footer>
<!--content--> <!--content-->
</div> </footer>
</body> </body>
</html> </html>

HTML HTML 4.01 / XHTML HTML5


10

HTML vs XHTML vs HTML5 (cont.)


 The structural elements diagram:
• HTML 4.01

• HTML5
New Elements in HTML5

<article> <figcaption> <progress>


<aside> <footer> <section>
<audio> <header> <source>
<canvas> <hgroup> <svg>
<datalist> <mark> <time>
<figure> <nav> <video>

These are just some of the new elements


introduced in HTML5. We will be exploring each of
these during this course.
Other New Features in HTML5
 Built-in audio and video support (without plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version
of CSS)
 More advanced features for web developers, such as
data storage and offline applications.
5 HTML Enhancements
• HTML
• Forms
• CSS
• Offline applications
• Local storage

13
HTML Extended
• Document Flow: div, section, article, nav,
aside, header, footer
• Audio, Video and Embed
• Canvas: paths, gradients, image manipulation,
events
• Microdata for semantics and enhanced search
engine results (Google Rich Snippets)

14
HTML5 Media Elements
Tag Description
Defines sound or music content
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<audio> <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Defines containers for external applications (like plug-ins)


<embed> <object width="400" height="50" data="bookmark.swf"></object>
<object data="audi.jpeg"></object>

Defines sources for <video> and <audio>


<source> <source src="horse.mp3" type="audio/mpeg">

<track> Defines tracks for <video> and <audio>


Defines video or movie content
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<video> <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

15
What are 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 <article> - Clearly defines its content.

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>
 <header>
 <nav>
 <section>
 <article>
 <aside>
 <figcaption>
 <figure>
 <footer>

17
HTML5 Media
• Multimedia on the web is sound, music,
videos, movies, and animations.
• HTML 5 VIDEO
• HTML 5 AUDIO
• HTML Helpers (Plug-ins)
• HTML YouTube Videos
HTML Helpers (Plug-ins)

The purpose of a plug-in is to extend the functionality of a web


browser.

Helper applications (plug-ins) are computer programs that extend the


standard 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.
HTML YouTube Videos
• To play your video on a web page, do the following:
• Upload the video onto 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
What is HTML Canvas? What is SVG?
The HTML <canvas> element is used to draw graphics, on the fly, SVG stands for Scalable Vector Graphics
via JavaScript. SVG is used to define graphics for the Web
The <canvas> element is only a container for graphics. You must SVG is a W3C recommendation
use JavaScript to actually draw the graphics. SVG has several methods for drawing paths, boxes,
Canvas has several methods for drawing paths, boxes, circles, circles, text, and graphic images.
text, and adding images. The HTML <svg> element is a container for SVG graphics.

Comparison of Canvas and SVG


The table below shows some important differences between 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 rendering
• You can save the resulting image as .png or .jpg areas (Google Maps)
• Well suited for graphic-intensive games •Slow rendering if complex (anything that uses the
DOM a lot will be slow)
•Not suited for game applications
Canvas
 The HTML <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 id="canvas" width="150" height="150">


</canvas>

function draw() {
var canvas =
document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10,10,55,50);

ctx.fillStyle = "rgb(0,0,200)";
ctx.fillRect (30,30,55,50);
}
}
22
Form Enhancements
• Placeholder text
• Specific text input: email, URL, number, search
• Slider
• Date picker
• User Agent validation

23
CSS Effects
• Rounded corners
• Gradients
• Box and text shadows
• Fonts
• Transparencies
• Multiple background images and border images
• Multiple columns and grid layout
• Box sizing
• Stroke and outlines
• Animation, movement and rotation
• Improved selectors

24
CSS Effect Example
.amazing {
border: 1px solid blue; .amazing {
color: red; border: 1px solid blue;
background-color: gold; color: red;
background-color: gold;
-webkit-border-radius: 40px;
-moz-border-radius: 40px; -webkit-border-radius: 40px;
-moz-border-radius: 40px;
Amazing CSS
border-radius: 40px;

-webkit-box-shadow: 8px 8px 6px


border-radius: 40px;

Effects
#474747;
-moz-box-shadow: 8px 8px 6px
#474747;
-webkit-box-shadow: 8px 8px 6px
#474747;
-moz-box-shadow: 8px 8px 6px
box-shadow: 8px 8px 6px #474747; #474747;
box-shadow: 8px 8px 6px #474747;
text-shadow: 8px 8px 2px #595959;
filter: dropshadow(color=#595959, text-shadow: 8px 8px 2px #595959;
offx=8, offy=8); filter: dropshadow(color=#595959,
} offx=8, offy=8);
}

http://css3generator.com/
25
CSS Timelines

http://mattbango.com/notebook/web-development/pure-css-timeline/
26
Offline Applications
<html mainfest="http://m.health.unm.edu/someapp.manifest">
…
</html>

CACHE MANIFEST
someapp.manifest #v1.01

#Explicitly cached files


CACHE:
index.html
Stylesheet.css
Images/logo.png

NETWORK:
Search.cfm
Login.cfm
/dynamicpages

FALLBACK:
/dynamicpage.cfm /static.html

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
27
Web storage
The Web Storage API defines a standard for how we can save simple data locally on a user’s computer
or device. Before the emergence of the Web Storage standard, web developers often stored user
information in cookies, or by using plugins. With Web Storage, we now have a standardized definition
for how to store up to 5MB of simple data created by our websites or web applications.

Web Storage is a great complement to Offline Web Applications, because you need somewhere to store
all that user data while you’re working offline, and Web Storage provides it.

Two kinds of storage


session Storage
Session storage lets us keep track of data specific to one window or tab. It allows us to isolate
information in each window. Even if the user is visiting the same site in two windows, each window
will have its own individual session storage object and thus have separate, distinct data.
Session storage is not persistent—it only lasts for the duration of a user’s session on a specific site (in
other words, for the time that a browser window or tab is open and viewing that site).

Local Storage
Unlike session storage, local storage allows us to save persistent data to the user’s computer, via the
browser. When a user revisits a site at a later date, any data saved to local storage can be retrieved.
Local Storage
• Beyond cookies - local storage
– Manipulated by JavaScript
– Persistent
– 5MB storage per “origin”
– Secure (no communication out of the browser)
• Session storage
– Lasts as long as the browser is open
– Each page and tab is a new session
• Browser based SQLite or IndexedDB

29
HTML Local Storage Objects
• 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 browser tab
is closed)
• Before using local storage, check browser support for localStorage and
sessionStorage.
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry,
your browser does not support Web Storage...";
}
</script>

30
Local Storage
• Web storage
window.localStorage['value'] = 'Save this!';

• Session storage
sessionStorage.useLater('fullname’, 'Garth Colasurdo');
alert("Hello " + sessionStorage.fullname);

• Database storage
var database = openDatabase("Database Name", "Database Version");
database.executeSql("SELECT * FROM test", function(result1) {
………
});

http://dev.w3.org/html5/webstorage/
31
Geolocation
The first new API we’ll cover is geolocation. Geolocation allows your visitors to share their current
location.
Depending on how they’re visiting your site, their location may be determined by any of the following:
■ IP address
■ wireless network connection
■ cell tower
■ GPS hardware on the device

Privacy Concerns

Not everyone will want to share their location with you, as there are privacy concerns
inherent to this information. Thus, your visitors must opt in to share their location.
Nothing will be passed along to your site or web application unless the user agrees.
The decision is made via a prompt at the top of the browser. The following figure
shows how this prompt looks like in Chrome.
With geolocation, you can determine the user’s current position. You can also be notified of changes to
their position, which could be used, for example, in a web application that provided real-time driving
directions.

Geolocation: methods

These different tasks are controlled through the three methods currently available
in the Geolocation API:

■ getCurrentPosition
■ watchPosition
■ clearPosition
Web Worker
• JavaScript is a single threaded by design.
• We cannot execute multiple scripts in parallel, because
anything we ask the browser to do will be processed in
sequences.
• When executing scripts in an HTML page, the page
becomes unresponsive until the script is finished.
• Web Workers are introduced to solve this problem. It
introduces functionality that resembles threads.
• With Web Workers, we can load scripts and make them
run in the background, independent from the main
thread.
• A Web Worker script cannot lock up or affect the main thread.
This means, we can do a CPU intensive processing while still
allowing the user to keep using the application or game.
• A web worker is a JavaScript that runs in the background,
independently of other scripts, without affecting the performance
of the page. You can continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in the
background.
• Web Workers add thread-like functionality to JavaScript.
• We can now spawn a worker that runs independently of the main
script.
• Main script communicates with worker via messages.
35

Markup Elements
 New elements in HTML 5 :
Tag Description
For external content, like text from a news-article, blog,
<article>
forum, or any other content from an external source
For content aside from the content it is placed in. The aside
<aside>
content should be related to the surrounding content
<command> A button, or a radiobutton, or a checkbox
For describing details about a document, or parts of a
<details>
document
<summary> A caption, or summary, inside the details element
For grouping a section of stand-alone content, could be a
<figure>
video
<figcaption> The caption of the figure section
36

Markup Elements (cont.)


Tag Description
For a footer of a document or section, could include the
<footer> name of the author, the date of the document, contact
information, or copyright information
For an introduction of a document or section, could include
<header>
navigation
For a section of headings, using <h1> to <h6>, where the
<hgroup> largest is the main heading of the section, and the others are
sub-headings
<mark> For text that should be highlighted
For a measurement, used only if the maximum and minimum
<meter>
values are known
<nav> For a section of navigation
<progress> The state of a work in progress
37

Markup Elements (cont.)


 New media elements in HTML 5 :
Tag Description
For multimedia content, sounds, music or other audio
<audio>
streams
For video content, such as a movie clip or other video
<video>
streams
For media resources for media elements, defined inside
<source>
video or audio elements

 Canvas element in HTML 5 :


Tag Description
<canvas> For making graphics with a script
38

Markup Elements (cont.)


 New form elements in HTML 5 :
Tag Description

<datalist> A list of options for input values


<keygen> Generate keys to authenticate users
For different types of output, such as output written by a
<output>
script
39

MARKUP ELEMENTS (cont.)


 New input type attribute values in HTML 5 :
Tag Description
tel The input value is of type telephone number
search The input field is a search field
url The input value is a URL
email The input value is one or more email addresses
datetime The input value is a date and/or time
date The input value is a date
month The input value is a month
week The input value is a week
time The input value is of type time
datetime-local The input value is a local date/time
number The input value is a number
range The input value is a number in a given range
color The input value is a hexadecimal color, like #FF8800
Advantages of HTML5 &
CSS3 approaches
Cost Effective Multi-Platform Development
• A single batch of code can be used across platforms, devices and
different markets
• As a result:
• Lower development and maintenance costs
• Current best practice for cross platform (e.g. iOS & Android)
application development
• Allow a hybrid approach whereby web standards are followed
within a native application ‘wrapper’ that can be placed in the
iOS or Android store. Example: LinkedIn application – which is
a mobile website but widely considered as a great ‘app’ but it
is not an ‘app’.
Good Page Ranking
• If the foundation of a website is not semantically accurate (i.e.
unreadable, non-standard based code), the page will not get a
good rank by search engines
• If your page is not well structured HTML, easily readable by the
Search Engine, in a logical document structure, Search Engine
Optimization (SEO) will make no difference to rankings
• HTML5’s new elements can be relied on when sites are being re-
indexed on search engines, as specific mark-up features of
HTML5 are of value when search engine results pages (SERPs)
are being calculated
Offline Browsing
• In a similar way that ‘apps’ can be used offline, without an
internet connection, HTML5 supports local storage of web
application code and content, through the offline application
cache.
• This is a tremendous advantage to businesses, like
publishers, who can provide an offline web experience for
readers on the move.
• The offline cache also produces significant performance
enhancements as more of the site or system code and
content is accessed quickly, locally.
Consistency across multiple browsers
• Not all browsers support all web pages or web applications,
however, the implementation of HTML5 and CSS3 helps the
designer to create a compatible site or system within all
browsers
Better mobile access to Business Intelligence
• Future development of HTML5 applications may lead to
better access to business intelligence as all devices that are
compatible with HTML5 will have the same ability to collect,
collate and use data using standard (cross device) browser
based analytics tools
Extension of video to a wide range of platforms
• HTML5 has native video support and can be directly built in
to the supporting browsers which allow faster, high-quality
video’s to be distributed.
• The inclusion of direct video content on a web page can also
impact positively on SEO, as it is unique, engaging and
therefore is included in ‘quality content’ that search engines
are looking to send users to.
Geolocation
• HTML5 supports geolocation.
• Once a user opts to share their location an HTML5
application can use the user's location.
• This can be of primary importance when developing location
based services or apps.
A better user experience
• HTML5 offers a wider range of design and presentation tools
across media types, giving the developers greater scope to
produce a better web sites and web applications.
• This is vital from a business point of view, as user
engagement and retention is key to increased site and
system use and conversion.
• Creating an accessible and usable site or system means that
users will be more likely to engage.

You might also like