HTML

Building the User Interface
with HTML5
2.1. Choose and configure HTML5 tags to display text content.
2.2. Choose and configure HTML5 tags to display graphics.
2.3. Choose and configure HTML5 tags to play media.
Agenda
HTML Media in HTML5
Basic Markup and Page Structure
Text Elements
Displaying Graphics
Canvas & SVG

Hypertext Markup
Language (HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Basic HTML</title>
</head>
<body>
<h1>This is a Basic Header</h1>
<p>This is a basic paragraph.</p>
</body>
</html>
Versions of HTML
• Throughout the 2000s, HTML 4.01 was the standard for web pages
• A strong demand for a rich web experience, including audio, video, and
interactivity led to the development of a new HTML standard
HTML5
• The World Wide Web Consortium (W3C) is the standards organization
responsible for the development of HTML5
• The HTML5 standard encompasses HTML markup tags, Cascading Style
Sheets (CSS), and JavaScript
• HTML5 is platform-independent
New with HTML5
FEATURE DESCRIPTION
Audio and video tags Embeds video on web pages using the <audio> and <video> tags
Canvas Creates space for JavaScript to draw graphics on a web page
Media queries A feature in CSS3 that detects screen size and adjusts output to fit
New application Provides access to many digital resources that can be incorporated
programming into the code of web applications
interfaces
Geolocation Uses JavaScript to detect the geographic location of a device
HTML Tags
opening tag
<!DOCTYPE html>
<head><html>
<html lang="en">

<title>Basic HTML</title>
</head> closing tag
<body>
</html>
<h1>This is a basic header</h1>
<p>This is a basic paragraph.</p>
</body>
</html>
Common HTML Tags
TAG PURPOSE
<html> identifies a page as an HTML document
<head> contains code used by the browser to add interactivity or style a
page
<title> title of a document
<body> surrounds content that is visible on a Web page
<p> paragraphs
<a href=“URL”> links
<h1> top heading
<img> images
Using Attributes
• Tags are used in combination with attributes to describe how data should be
rendered on a Web page
• Each element has a specific set of attributes that can be used with it
• Attributes are added to tags using the following syntax:
<a href="http://www.bing.com">Bing</a>
TAG ATTRIBUTE VALUE TEXT
Nesting Elements
• Creating awesome web pages requires you to combine elements, their
attributes, and engaging content
• When two or more elements apply to the same block of content, then you
have to nest tag pairs
• Nesting is the process of placing one element inside of another
parent
child
<p>I <em>love</em> taking my dog for a
walk.</p>
I love taking my dog for a walk.
Special Characters in HTML
• A special character, such as a percent sign or a copyright symbol, is known
as an entity in HTML
• Including entities in a Web page requires character encoding or the special
characters will not render
• Each special character can be reproduced using its entity name OR a

numerical code
SPECIAL DESCRIPTION ENTITY NAME CODE

CHARACTER
© Copyright © ©
$ Dollar Sign &dollar; $
% Percent Sign &percnt; %
& Ampersand & &
The DOCTYPE
• A doctype declaration is used to help a Web browser determine which rules
it should use for rendering a Web page
• In HTML 4, doctype declarations require a reference to a Document Type
Definition (DTD) and looks quite complex
• In HTML5, the doctype declaration is simpler, as shown below
<!DOCTYPE html PUBLIC

HTML 4 "-//W3C//DTD XHTML 1.1//EN"
"http://www.example.com/TR/xhtml11/DTD/
xhtml11.dtd">
HTML5 <!DOCTYPE html>

HTML5 Elements in Action
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Elements in Action</title>
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Text Elements
ELEMENT FUNCTIONALITY
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italicized text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscript text
<sup> Defines superscript text
Text Element Demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Example</title>
</head>
<body>
<h1>This is a sample page.</h1>
<p>This page includes <em>some</em> <strong>nested
elements</strong>.</p>
</body>
</html>
Text Elements with New Functionality
ELEMENT FUNCTIONALITY IN HTML 4 FUNCTIONALITY IN HTML5
<b> emphasize text by making it bold “stylistically offsets” text
<i> emphasize text by making it italic “alternate voice or mood”
<strong> N/A labels text as strong importance,
while making it appear bold
<em> N/A indicates emphatic stress, while
making it appear italic
Text Elements No Longer Used
• With the addition of new elements, DEPRECATED NEW ELEMENT
ELEMENT
W3C earmarks elements or
attributes for removal <acronym> <abbr>
<applet> <object>
<basefont> Use CSS instead
• The process of removing elements <big> Use CSS instead
is called deprecation <center> Use CSS instead
• Deprecated elements may still <dir> <ul>
render in older browsers, but best <font> Use CSS instead
practice suggests you should not
<strike> <del> or CSS instead
use them if developing for newer
browsers
Images and Graphics Raster Image
in HTML
Vector Image
Raster vs. Vector Images
Raster Images Vector Images
• Photographs are raster images • Digital illustrations are typically
• Raster file formats include JPG, vector images
PNG, GIF, and BMP • Vector images maintain quality
• Raster images pixelate when they when enlarged
are enlarged • Vector images are typically made
with advanced programs like
Photoshop or CorelDRAW, then
converted into PNG or GIF
formats (raster file types)
img Element
• Add images to a Web page using the <img> tag
• The <img> tag requires use of the src and alt attributes
• src defines the pathway for the image file, while the value of the alt
attribute makes text accessible to people with disabilities
Attributes of the img element
ATTRIBUTE VALUE DESCRIPTION
src URL Specifies the location of an image
alt Text Specifies alternate text for an image, which displays
when a user hovers their mouse pointer over it
height pixels Specifies the height of an image
width pixels Specifies the width of an image
ismap ismap Specifies an image as a server-side image map
usemap #mapname Specifies an image as a client-side image map
figure and figcaption Elements
• The img element can be used in combination with two new elements,
figure and figcaption, to organize images and provide captions
• The figure element specifies the type of figure that is being added, and
can also be used to group images side by side
• The figcaption element can be used to add captions before or after
images
<figure>
<figcaption>Who wouldn't want to take this dog for a walk?</figcaption>
<img src="dog.jpg" alt="This is a picture of my dog, Stella." title="Stella"/>
</figure>
The canvas Element
• The canvas element creates a blank container for graphics
• It’s a new element in HTML5 and you can draw graphics using JavaScript
• Canvas can is used by developers to create 2D games or animations
<canvas id="myCanvas" width=“500px" height=“300px"></canvas>
this code makes a blank container

The canvas Element in Action
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Test</title>
<script>
function f1() {
var canvas = document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,255)";
context.fillRect(10, 20, 200, 100);
}
</script>
</head>
<body onload = "f1();">
<canvas id="smlRectangle" height="100" width="200 "></canvas>
</body>
</html>
Alternative Images or Text for Older Browsers
• The canvas element won’t work on some older browsers
• To avoid problems with rendering, you should add content that will display
when a canvas drawing cannot
• The content can be an image or text
<canvas id="smlRectangle2" height="100" width="200">

<img
src="http://www.example.com/images/smlRectangle.jpg"
alt="A blue rectangle" />
</canvas>
Scalable Vector Graphics
• Scalable Vector Graphics (SVG) is a language for describing 2D graphics in
XML
• With SVG, you provide drawing instructions within your code versus using
the src attribute to point to a file
• Unlike other image types, graphics created using the svg element are
scalable
<svg height="1000px" width="1000px">

<rect id="myRect" height="100px" width="100px" fill="blue"/>
</svg>
Canvas vs. SVG
Canvas Scalable Vector Graphics
• Use for small drawings • Use for larger graphics
• Use for drawings with a lot of • Use for drawings with a small
objects in them number of objects
• Use for small screens • Use for drawings that require a
• Use for real-time data output, large number of pixels
such as maps or weather data • Use for highly detailed vector
graphics
Media in HTML5
Video Tags
• You can embed video into HTML documents using the <video> element
• Use the source attribute to point to the location of the video file
• The height and width attributes help determine how the video will appear
on a Web page
<video src=”cat_vid.mp4" height=“300” width=“400”></video>

Video Control Attributes
HTML
There are a number of other attributes
that can be used with the video tag to <video
add control of the video src=“cat_vid.mp4
width="400"
poster displays a static image before the height="300"
video loads
autoplay starts playing the video automatically poster=”meow.jpg"
upon page load
autoplay
controls displays controls for controlling the
volume, playing, pausing, and stopping controls
the video
loop plays the video on repeat
loop>
</video>
Video Formats
HTML
• A number of video formats are <video
width="400"
supported by Web browsers, including
height="300"
MP3, H.264, OGG, and WebM
poster=“meow.jpg"
• When you specify the video type, you autoplay="autoplay"
should also specify the codec controls="controls"
loop="loop">
<source
• It’s a best practice to use the <source> src=”cat_vid.mp4”
tag in combination with its type type="video/mp4" />
attribute to point to the file and specify </video>
the file type
Browser Compatibility
<video
HTML
• Not all video formats are compatible width="400"
with all browsers height="300"
• The MP4 format is the most commonly poster=“meow.jpg"
autoplay="autoplay"
used by Web browsers and mobile controls="controls"
devices loop="loop">
• To ensure that a video is compatible
<source src=”cat_vid.mp4"
with a majority of browsers and devices, type="video/mp4" />
you should use the <source> element
to include multiple formats <source src=“cat_vid.ogg”
type=‘video/ogg;
codecs=“theora, vorbis”’>
</video>
Audio Tags
• The HTML5 audio element works much like the video element
• Include the <audio> tag and a path that points to the audio file.
• You can modify the audio element using its control-related attributes,
including:
<audio src=”myaudio.mp3" controls="controls”></audio>

Audio Formats
• There are three primary formats of audio supported by Web browsers,
including:
• Not every browser supports every audio type
• You can use the source attribute to include multiple types
<audio controls>
<source src=“myaudio.mp3” type=“audio/mp3”/>
<source src=“myaudio.ogg” type=“audio/ogg”/>
</audio>
Summary
HTML Media in HTML5
Basic Markup and Page Structure
Text Elements
Displaying Graphics
Canvas & SVG

© 2015 Microsoft Corporation. All rights reserved.
•
•

HTML

Uploaded by

HTML

Uploaded by

Building the User Interface

Basic Markup and Page Structure

Canvas & SVG

Canvas Creates space for JavaScript to draw graphics on a web page

<meta charset="utf-8" />

• Attributes are added to tags using the following syntax:

• Each special character can be reproduced using its entity name OR a

SPECIAL DESCRIPTION ENTITY NAME CODE

<!DOCTYPE html PUBLIC

HTML5 <!DOCTYPE html>

• Canvas can is used by developers to create 2D games or animations

<canvas id="myCanvas" width=“500px" height=“300px"></canvas>

this code makes a blank container

<canvas id="smlRectangle2" height="100" width="200">

<svg height="1000px" width="1000px">

<video src=”cat_vid.mp4" height=“300” width=“400”></video>

<audio src=”myaudio.mp3" controls="controls”></audio>

• Not every browser supports every audio type

• You can use the source attribute to include multiple types

Basic Markup and Page Structure

Canvas & SVG

You might also like