MTA html5 text_graphics_media

Building the User Interface by Using
HTML5: Text, Graphics, and Media
Lesson 2

Exam Objective Matrix
Skills/Concepts
Understanding the
Essentials of HTML
Choosing and Configuring
HTML5 Tags to Display Text
Content
HTML5 Tags to Display
Graphics
HTML5 Tags to Play Media

MTA Exam Objectives

Choose and configure HTML5 tags to display
text content. (2.1)
Choose and configure HTML5 tags to display
graphics. (2.2)
Choose and configure HTML5 tags to play
media. (2.3)

2

HTML Documents
• Hypertext Markup Language (HTML) is a
markup language
• HTML is used to mark up pieces of
content to display on a Web page
• A Web page is a type of HTML document

3

Tag Pairs
• Keywords that help to give an HTML page
structure
• Keyword is surrounded by angled brackets
• Most tags come in pairs
– Opening or start tag
– Closing or end tag

<h1>Pet Care 101</h1>

• Closing tag must have same case as
opening tag
4

Empty Tags
• Empty tags don’t require an end tag
• Examples:
– for a line break
– <hr /> for a horizontal line

5

Common HTML Tags
• <html>: Identifies the page as an HTML document
• <head>: Contains markup and code used by the

browser, such as scripts that add interactivity, and
keywords to help search engines find the page
• <title>: Displays the title of the Web page, which
appears at the top of the Web browser, usually on
the page’s tab in a tabbed browser
• <body>: Surrounds content that’s visible on the Web
page when viewed in a Web browser

6

Common HTML Tags (Continued)
• <a href=URL>: Generally used to anchor a URL to

text or an image; can create a named anchor within
a document to allow for linking to sections of the
document
• : Applies boldface to text
• <hx>: Creates a heading, which can be first level

(h1) through sixth level (h6)
• <img>: Inserts an image from a file or another Web
site
• : Defines text as a paragraph
7

Required HTML Tags
• Tags required on every Web page:
– <html>
– <head>
– <title>
– <body>

8

Elements
• A tag pair or an empty tag is also called an
element.
• An element can describe content, insert
graphics, and create hyperlinks.

9

Attributes
• Modifiers of HTML elements that provide
additional information
• Are extensions of elements
• Syntax: <tag attribute="value">

10

Creating a Link
• Example:
– <a href="http://www.example.com">This is
a link.</a>Global attribute

11

Nesting
• To place one element inside another
• Example:
– Make sure your pet has plenty of
fresh water during hot
weather.

12

Entities
• A special character, such as the dollar
symbol, the registered trademark (a capital
R within a circle), and accented letters
• Begins with an ampersand (&) and ends
with a semicolon (;)
• Examples:
– entity ® represents the registered
trademark symbol
– Its numerical code is ®
13

Entities (Continued)
• Called character encoding
• Use UTF-8 encoding whenever possible
• Add the following declaration to the head
element:
<meta charset="UTF-8">

14

Doctype
• A declaration found at the very top of
almost every HTML document
• Specifies the language or rules the page
uses

15

Doctype
• HTML 4.01 doctype example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN"
"http://www.example.com/TR/xhtml11/
DTD/xhtml11.dtd">

• HTML5 doctype:
<!doctype html>

16

Simple Web Page Markup Example
<!doctype html>
<html>
<head>
<title>78704 Pet Services</title>
</head>
<body>
Your dog is a friend for life. Why not
provide the best care possible?
</body>
</html>
17

Simple Web Page Markup Example

18

HTML 4 Text-related Elements with New
Meaning or Functionality in HTML5
• The element should now be used to offset
text without conveying importance, such as for
keywords or product names.
• The element now indicates content in an
alternate voice or mood, like spoken text.
• The element indicates strong
importance.
• The element indicates emphatic stress.
• The element should be used for small
print, like a copyright line.
19

New HTML5 Elements
• The <command> element creates a command button.
When the user clicks a command button, a
command executes.
• The element highlights text on a page,
similar to the highlighting feature in Microsoft Word.
• The <time> element displays a machine-readable
time and date, such as 10:10 A.M., CST, July 19,
2012, which is handy for blogs and calendars, and
potentially helps search engines provide better
results when time and date are part of the search
criteria.
20

Deprecation
• While new elements become available, the
W3C earmarks other elements for
eventual removal because their
functionality is no longer useful.
• Removing elements from the list of
available HTML elements is referred to as
deprecation.
• Note: The same thing applies to attributes and CSS
properties.
21

Examples of Deprecated HTML Elements
• <big>: Makes text bigger relative to the

current font size
• <center>: Center-aligns text and content
• The fix: Use CSS instead

22

Image Basics
• A raster image is made up of pixels.
– Example: A photograph
– Formats: JPG, PNG, GIF, BMP

• A vector image is made up of lines and
curves based on mathematical
expressions.
– Example: Adobe Illustrator AI file
– Formats: PNG or GIF for Web display
23

The img element
• Use img to add images to an HTML
document
• Example: <img src="images/redball.jpg"
alt="Red ball graphic" />

• The src attribute and the alt attribute are
required to be fully valid.
• The W3C requires the alt attribute for
accessibility by people with disabilities.
24

figure and figcaption Elements

• The figure element specifies the type of
figure you’re adding
• The figcaption element adds a caption to
an image on a Web page
– Can display the caption before or after the
image

25

Canvas
• Use JavaScript to draw pixel-based shapes on a
canvas
• Include color, gradients, and pattern fills
• Render text with various embellishments
• Animate objects by making them move, change
scale, and so on
• Basic syntax for the canvas element:
<canvas id="smlRectangle" height="100"
width="200"></canvas>
28

Fallback
• “Backup” content that displays if primary
content cannot
• Can be a problem with some older
browsers
– Cannot render canvas drawings or
animation, for example

• Fallback adds an image, text, or some
other HTML content within the canvas
element that displays if the drawing cannot
31

Scalable Vector Graphics (SVG)
• A language for describing 2D vector
graphics in Extensible Markup Language
(XML)
• SVG graphics referred to as objects
• SVG loads into the DOM
• Vector graphic changes size to fit screen,
whether 32-inch PC monitor or
smartphone
• SVG is not new, but HTML5 can embed
32
SVG objects in Web pages without using

When to Use Canvas Instead of SVG
• If the drawing is relatively small, use canvas.
• If the drawing requires a large number of objects,
use canvas; SVG degrades as it continually adds
objects to the DOM
• Generally, use canvas for small screens and SVG
for larger screens.
• If you must create highly detailed vector documents
that must scale well, go with SVG.
• If you are displaying real-time data output, such as
maps, map overlays, weather data, and so on, use
canvas.
35

video Element

• Enables you to incorporate videos in
HTML documents using minimal code
• Markup example:
<video src="intro.mp4" width="400"
height="300">
</video>

36

video Attributes
• poster: Displays a static image file before

the video loads
• autoplay: Start playing the video
automatically upon page load
• controls: Displays a set of controls for
playing, pausing, and stopping the video,
and controlling the volume
• loop: Repeats the video
37

audio Element

• Enables you to incorporate audio (music,
other sounds) in HTML documents using
minimal code
• Markup example:
<audio src="sample.mp3"
controls="controls">
</audio>

39

Recap
•
•
•
•
•
•
•
•
•
•
•

Tags
Elements
Attributes
Nesting
Entities
Doctype
Modified HTML 4.01 elements and new HTML5 elements
Deprecation
Figures and figure captions
Canvas and SVG
Audio and video

42

MTA html5 text_graphics_media

More Related Content

What's hot (20)

Similar to MTA html5 text_graphics_media (20)

Recently uploaded (20)

MTA html5 text_graphics_media

Editor's Notes