HTML5
SEO
Search Engine Optimization
Three elements used to make descriptions lists
<dl>, <dt>, <dd>
Common use of a link element that provides a 'custom' feel to your web page
'favicon' adornment in the address bar
Div and span elements should only be used...
...when more specific tags don't apply
Prefix on a path that navigates up from a child to a parent folder
../
Regarding media for a web page: If you are having trouble getting the <object> & <param> elements to work properly, ______ is supported by HTML5 and may be a useful alternative
<embed>
JavaScript is at least ____ times faster than it was a decade ago
100
Expected year when the HTML5 standard will be 'stable'
2014
Expected year when the HTML5 standard will be a 'final recommendation' by the W3C
2022
Approximate max number of characters in a title element
65
Comment structure
<!-- blah blah blah -->
Syntax for html container
<!DOCTYPE html><html></html>
Write a hyperlink, that jumps to a placeholder with an id of 'top' on the home page of the site (assume you are not on that page now). The link should read "Return to Home"
<a href="index.html#top">Return to Home</a>
HTML tag to code a hyperlink
<a>
The HTML for a navigation list is best coded as a series of ____ elements within the ___ elements of an ____ list
<a> ... <li> ... unordered (<ul>)
If an ___ element links to a ____ file, the browser tries to display or play it by using the right ____ _____. To help the browser find the right one, you can use the ____ attribute to specify a ____ type
<a> ... media ... media player ... type .... MIME
Easiest way to add audio to an HTML5 page
<audio src="fileName.mp3"></audio>
Two common examples of empty tags
<br> and <img>
Using the _____ element is a good way to display YouTube videos in your web pages
<embed>
Tag for creating an image on a web page
<img>
Tag for an item within a list (either ordered or unordered)
<li>
Command to attach an external style sheet (called 'mystyles.css' to a web page
<link rel="stylesheet" href="mystyles.css">
Command to establish the characters that compose a page
<meta charset="UTF-8">
Tag for ordered lists
<ol>
Write a hyperlink, nested in a paragraph, that jumps to a placeholder with an id of 'top' on the same page as the link. The link should read "Return to top"
<p><a href="#top">Return to top</a></p>
Command to attach an external JavaScript (called 'myscripts.js' to a web page
<script src="myscripts.js"></script>
Tag for unordered lists
<ul>
Easiest way to add video to an HTML5 page
<video src="fileName.mp4"></video>
_____ refers to the qualities that make a web site accessible to users, esp disabled users
Accessibility
AAC
Advanced Audio Coding
WebKit
An open source browser engine
API
Application Programming Interfaces
A free text editor that can be used to edit HTML or CSS code
Aptana
<input type="checkbox" name="mailList" checked> In this element, 'checked' is a _____ attribute
Boolean
'codec' stands for...
COder/DECoder
You should use ____ to control the space between block elements
CSS
As of June 2012, the 5 top browers in order from best to worst in terms of their HTML5 ratings
Chrome, Opera, Firefox, Safari, Internet Explorer (IE)
Identify the error: <p>What's wrong now?<p>
Closing tag does not have a /
Making sure a page looks good on multiple browsers of various vintages
Cross-browser compatibility
An HTML document consists of two parts:
DOCTYPE declaration and document tree
Browser's internal representation of a web page
DOM
To deploy (publish) a website to the Internet, you transfer your files with a(n) ____ program
FTP (File Transfer Protocol)
Adobe's plug-in for video
Flash Player
Three common video codecs
H.264, Theora, VP8
URL
In computing, a uniform resource locator (URL) is a specific character string that constitutes a reference to an Internet resource. A URL is technically a type of uniform resource identifier (URI) but in many technical documents and verbal discussions URL is often used as a synonym for URI
Identify the error: <p>We <i>love the web</p></i>
Incorrect nesting: the <i> pair must be fully enclosed in the <p> pair
Essential coding language in HTML5
JavaScript
Sockets, Canvas, Video, Web Workers, and Local Storage are examples of ___________ ______
JavaScript APIs
LAN
Local Area Network (intranet)
A ___ type describes the contents of a media file and helps a browser determine what player to use to open it
MIME
MIME
MIME means Multipurpose Internet Mail Extensions, and refers to an official Internet standard that specifies how messages must be formatted so that they can be exchanged between different email systems. MIME is a very flexible format, permitting one to include virtually any type of file or document in an email message. Specifically, MIME messages can contain text, images, audio, video, or other application-specific data.
3 core technologies in HTML5
Markup, JavaScript APIs, and CSS
Windows' plug-in for video
Media Player
A free product that can convert one type of media to another
Miro Converter (www.mirovideoconverter.com)
Apple's plug-in for video
QuickTime
Character coding that has support for many alphabets, including non-western ones
UTF-8
The Internet consists of many
WANs
Chrome, Safari and the Android and iPhone mobile browsers are based on
WebKit
Safari and Chrome both use the _____ rendering engine
WebKit
WAN
Wide Area Network (connects two or more LANs with a router)
wma
Windows Media Audio
W3C
World Wide Web Consortium
Version of HTML that preceded HTML5
XHTML
One of the most common media types and is also the encoding standard for audio; currently used on all Apple products
aac
Ten inline elements for identifying content
abbr, cite, code, dfn, em, kbd, q, samp, strong, var
'http://www.yahoo.com/movies.html' is an example of a(n) _____ path
absolute
For images with useful content, always code a(n) _____ attribute that describes the image
alt
For images that are used solely for decoration, use this attribute, which is known as a(n) ______ attribute
alt="" empty (no space)
Character entities begin with a(n) ____ and end with a ______
ampersand (&), semicolon(;)
MIME type for a PDF
application/pdf
MIME type for a SWF
application/x-shockwave-flash
When you use the ____ element for media, you code all parameters as _____, not as <param> elements
attributes
MIME type for a MP3
audio/mpeg or audio/x-mpeg
MIME type for a WAV
audio/x-wave
Chrome, Safari, Firefox and Internet Explorer are examples of _________
browsers
An unordered list is often called a(n) ____ list
bulleted
To display special characters (often those without keyboard values, such as a 'smiley'), use ____ _____
character entities
Three common attributes for the meta tag
charset, name, and content
Software components used to 'decode' video files so they may be played
codecs
In the command: <li>bag of apples</li> the phrase 'bag of apples' is called the _____ of the element
content
Discover/correct problems in an HTML file
debug an HTML file
If you don't specify the MIME type for a file, it will be opened in the browser's _____ media player for that media type
default
Description lists were called _____ lists in HTML4, but they were renamed because you can code more than one _____ element for each ____ element
definition ...<dd>...<dt>
Fancy word to describe a code feature that has been phased out or shelved
deprecated
In addition to the required 'charset' metadata attribute, _____ and ______ attributes should be provided as well for SEO
description, keywords
Block element that lets you divide a page into divisions that can be formatted and positioned with CSS
div
'images/logo.gif' is an example of a(n) ____ path
document-relative
JavaScript method (function) that places string information into the body of a web page
document.write()
Attribute values are delimited by ______
double quotes
New _____ in HTML add semantics and structure
elements
An element without content or a closing tag
empty tag
True or false: Heading tags are the preferred way to size text.
false
True or false: The height and width attributes are primarily used to fit an image into a given space on a page.
false
Image type used for small illustrations and logos
gif
Two parts of the document tree:
head and body
Six primary HTML5 semantic elements used for structuring a page (and are supported by the modern browsers)
header, section, article, nav, aside, footer
Four other HTML5 semantic elements
hgroup, time, figure, figcaption
Attribute with the <a> tag that specifies the address you want to link to
href
Five inline elements for formatting text
i, b, sub, sup, br
Extension used for a custom icon
ico
Four core HTML attributes
id, class, title, lang
<a> is an example of a(n) _______ element
inline
Birthed in 2005, this language was created to expedite web development and is central to making web pages look good on mobile devices
jQuery
Name of the '|' symbol
pipe
A ____ is a location on a page that can be linked to
placeholder
Image type used for photographs and scans
jpeg (jpg)
Three image formats supported by most browsers
jpeg (jpg), gif, png
Always code the _____ attribute on the html element to identify the language of the page
lang
The attribute used to help a screen reader pronounce words correctly
lang
HTML code elements should be in _____ case except for the document type which is in _____ case
lower, upper
Tag used for metadata
meta
Provides information about the contents of a web document
metadata
One of the most widely-used media types for audio
mp3
To say that a browser "_______" supports a media type means that the browser doesn't require a plug-in for it.
natively
For browsers that don't support video or audio elements, you can ____ an object element within the video or audio element to play a ______ file
nest...Flash
The two main kinds of lists in HTML
ordered and unordered
Links that jump to a location on the same page use _____, created with the ____ element with the ____ attribute
placeholders...<a>...id
Image type used for high quality (many colors, gradients) where transparency is required
png
In the code for a video element, the _____ attribute lets you specify an image file to be used as a static image in place of the video that would otherwise begin playing automatically.
poster
The '#' symbol is called the _____ or ____ or ____symbol; it's fancy name is ______
pound...hash...number...octothorpe
Three tags for special types of text
pre, blockquote, address
'http://' is the _______ of a URL
protocol
A website should (must) be contained in a folder called the _____
root
The html element is the _____ element of the tree
root
'/login.html' is an example of a(n) ____ path
root-relative
Multiple attributes are separated by a(n) ______
space
Inline element that lets you identify text that can be formatted with CSS
span
Five common attributes for an image tag
src, alt, height, width, title
HTML5's new elements are a _____ of HTML 4 elements, which means older pages will continue to work in modern browsers
superset
Description lists are used to list ____ and their _____
terms ... descriptions
Running an HTML file on all of the browsers your clients may use
test an HTML file
A very important element in the head of a page that provides search engine information
title
Attribute used to provide "tooltips" when a user hovers the mouse over the element
title
Image attribute that provides a screen (tool) tip
title
True or false: The height and width attributes may be used to 'stretch' an image to a given dimension.
true
True or false: charset metadata is required for HTML5 validation
true
True or false: description terms (<dt>) can only contain text and inline elements
true
True or false: id and class names are case sensitive
true
It's a best practice to code a series of links within a(n) _______ list
unordered
To see if an HTML file passes a standard of compliance
validate an HTML file
MIME type for a MPG/MPEG
video/mpeg
Tabs, line returns and extra spaces are ____
whitespace
Useful site to check a browser's current ratings
www.html5test.com
Symbol often used to delimit phrases within a title tag's content
|
