Multimedia Lab4

Al-Quds University
Faculty of Engineering
Department of Computer Engineering
Multimedia Lab
Lab#4: HTML5
Eng. Tarek Rishmawi

4.0 Lab Objectives:
This lab will introduce you to HTML5. You will learn the following:
1. How to construct a HTML5 page.

2. How to use HTML5 new elements, including Semantics, graphics, and
multimedia elements.
4.1 Introduction:
HTML5 is a core technology markup language of the Internet used for structuring
and presenting content for the World Wide Web. It is the final and complete fifth
revision of the HTML standard of the World Wide Web Consortium (W3C). The
previous version, HTML 4, was standardized in 1997. Its core aims have been to
improve the language with support for the latest multimedia while keeping it
easily readable by humans and consistently understood by computers and
devices.
While HTML5 is often compared to Adobe Flash, the two technologies are very
different. Both include features for playing audio and video within web pages,
and for using Scalable Vector Graphics. HTML5 on its own cannot be used for
animation or interactivity — it must be supplemented with CSS3 or JavaScript.
There are many Flash capabilities that have no direct counterpart in HTML5
HTML5 has been designed to deliver almost everything you'd want to do online
without requiring additional software such as browser plugins. It does
everything from animation to apps, music to movies, and can also be used to
build incredibly complicated applications that run in your browser. We've come
a long way since HTML could barely handle a simple page layout. HTML5 can be
used to write web applications that still work when you're not connected to the
Internet; to tell websites where you are physically located; to handle high
definition video; and to deliver extraordinary graphics.
All of the big name browsers - Firefox, Chrome, Safari and Opera, Mobile Safari,
Internet Explorer and Android's browser - support HTML5, but they don't all
support the same things. Firefox generally supports the widest selection of
HTML5 features, with Chrome and Safari following shortly afterwards.
HTML History
Since the early days of the web, there have been many versions of HTML:
Version Year
Tim Berners-Lee invented www 1989
Tim Berners-Lee invented HTML 1991
Dave Raggett drafted HTML+ 1993
HTML Working Group defined HTML 2.0 1995
W3C Recommended HTML 3.2 1997
W3C Recommended HTML 4.01 1999
W3C Recommended XHTML 1.0 2000
HTML5 WHATWG First Public Draft 2008
HTML5 WHATWG Living Standard 2012
HTML5 W3C Final Recommendation 2014
4.2 Creating a HTMl5 document

In this section we will take about constructing a HTML5 document and
introduce a basic HTML5 example.
The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
The character encoding (charset) declaration is:
<meta charset="UTF-8">
HTML5 basic example:

Exercise1: Type the following html code into a Text Editor and test it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Website!</title>
</head>
<body>
<h1> Hello World!</h1>
</body>
</html>
If you are a web developer, you will notice how it is become simpler to construct
a HTML page. Try it out in your favorite Text Editor!
4.3 HTML5 New Elements

The most interesting new elements are:
 New semantic elements like <header>, <footer>, <article>, and

<section>.
 New form control attributes like number, date, time, calendar, and
range.
 New graphic elements: <svg> and <canvas>.
 New multimedia elements: <audio> and <video>
4.3.1 Semantic/Structural Elements

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
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer. HTML5 offers new semantic elements
to define different parts of a web page:
 <article> Defines an article

 <aside> Defines content aside from the page content
 <details> Defines additional details that the user can view or hide
 <figure> Specifies self-contained content, like illustrations, diagrams, photos, etc.
 <footer> Defines a footer for a document or section
 <header> Specifies a header for a document or section
 <main> Specifies the main content of a document
 <mark> Defines marked/highlighted text
 <nav> Defines navigation links
 <section> Defines a section in a document
 <summary> Defines a visible heading for a <details> element
 <time> Defines a date/time
Exercise 2: Type the following html code into a Text Editor and test it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Semantics</title>
</head>
<body>
<header>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the second article. These articles could be blog
posts, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</section>
<figure>
<img width="85"
height="85"
src="image.jpg"
alt="Image alt name"
/>
<figcaption>Figure Caption!</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2015</footer>
</body>
</html>
Headers and footers are pretty self-explanatory. The nav element can be used to create a
navigation or menu bar. You can use sections and articles to group your content. Finally, the aside
element can be used for secondary content, for example, as a sidebar of related links.
4.3.2 HTML5 Multimedia Elements
Tag Description
<audio> Defines sound or music content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content
HTML5 Audio
Before HTML5, there was no standard for playing audio files on a web page. Audio files could
only be played with a plug-in (like flash). The HTML5 <audio> element specifies a standard way
to embed audio in a web page.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
The 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.
Multiple <source> elements can link to different audio files. The browser will use the first
recognized format. Supported formats are Ogg, mp3, and wav.
HTML5 Video
Before HTML5, Just like Audio, there was no standard for showing videos on a web page. Videos
could only be played with a plug-in (like flash). The HTML5 <video> element specifies a
standard way to embed a video in a web page.
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
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 browser does
not know the size of the video. The effect will be that the page will change (or flicker) while the
video loads. Text between the <video> and </video> tags will only display in browsers that do
not support the <video> element. Multiple <source> elements can link to different video files.
The browser will use the first recognized format. Supported video formats are MP4, Ogg, and
WebM.
4.3.3 HTML5 Graphics
Tag Description
<canvas> Defines graphic drawing using JavaScript
<svg> Defines graphic drawing using SVG
HTML5 Canvas:
Canvas is a medium for oil painting. On the HTML canvas, you can draw all kinds
of graphics, from simple lines, to complex graphic objects.
The HTML <canvas> element is a container for canvas
graphics. An HTML canvas is a rectangular area on an HTML
page.
Canvas has several methods for drawing paths, boxes, circles,

text, and graphic images.
<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
Exercise 6: Modify exercise5 to draw a line using JavaScript.
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
Context is a way to choose what you are going to do with your canvas. You can use getContext
for 2d (2dcanvas) or for 3d (WebGL).
HTML5 Specification say's about getContext : "Returns an object that exposes an API for
drawing on the canvas. The first argument specifies the desired API. Subsequent arguments are
handled by that API."
Exercise 7: Modify exercise6 to draw a red rectangle inside the Canvas using JavaScript. Note:
Use fillStyle and fillRect(x1,y1,x2,y2) functions.
Exercise 8: Use HTML5 canvas with JavaScript to draw a circle.
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
</script>
The beginPath() method begins a path, or resets the current path. The arc() method creates an
arc/curve , it is used to create circles, or parts of circles.
context.arc(x,y,radius,startAngle,endAngle,counterclockwise);
Post Lab:
1. Compare HTML5 Canvas and SVG, in your own words!
2. Use Canvas gradients to draw the following shape(Use any colors):
3. Use Canvas Text to draw your full name!
The answers must be written in a word document with screenshots and

submitted next week.

Multimedia Lab4

Uploaded by

Document Information

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

Multimedia Lab4

Uploaded by

Copyright:

Available Formats

Al-Quds University

Eng. Tarek Rishmawi

1. How to construct a HTML5 page.

4.2 Creating a HTMl5 document

The DOCTYPE declaration for HTML5 is very simple:

The character encoding (charset) declaration is:

HTML5 basic example:

4.3 HTML5 New Elements

 New semantic elements like <header>, <footer>, <article>, and

4.3.1 Semantic/Structural Elements

 <article> Defines an article

4.3.3 HTML5 Graphics

Canvas has several methods for drawing paths, boxes, circles,

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

Exercise 6: Modify exercise5 to draw a line using JavaScript.

Exercise 8: Use HTML5 canvas with JavaScript to draw a circle.

3. Use Canvas Text to draw your full name!

The answers must be written in a word document with screenshots and

You might also like