Lesson 1 HTML5 Essentials
What are the 3 tips for validating your markup code?
1. Do not be discouraged when you see multiple problems reported for a page. Sometimes one small flaw can cause the remaining code on the page to fail validation, even if the remaining code is actually valid. 2. When errors are reported, search through the code carefully to find the true problem. Sometimes when a validation program finds a problem, it does not report the correct cause or it may not report the cause clearly. 3. Make sure that you are validating the correct file.
Good Web page coding generally involves ensuring that the content is rendered appropriately regardless of the browser used to render it. To ensure this type of consistent, or universal, rendering, Web page developers can apply certain practices to their coding that result in universal markup. which are:
1. Follow W3C standards carefully. 2. Choose one standard version of any given language you use, and apply that standard consistently throughout your document, pages or site.
Like the <video> element, the <audio> element allows you to identify multiple sources with the <source> element to ensure various audio formats are supported. The HTML5 specification does not require a specific audio codec to be supported, but it does support three audio formats:
1. MP3 2. WAV 3. Ogg
Some functions of the HTML5 APIs include:
1. Media (audio and video). 2. Document editing. 3. Cross-document messaging. 4. MIME type and protocol handler registration. 5. Web storage.
HTML5 provides modern design techniques for the Internet while requiring fewer plug-ins. For example, HTML5 does the following:
1. Standardizes how video and audio are presented on a Web page. 2. Introduces the <video> element, which is designed to eliminate the need to install third-party plug-ins (such as those for Adobe Flash or Microsoft Silverlight). 3. Adds the <audio> element, which allows pages to seamlessly add audio files for events such as podcasts. 4. Establishes ways to enable drag-and-drop capability for Web pages without using third-party add-ons. 5. Gives developers more native tools to use on a page, such as download progress indicators, image captioning options and form validation. 6. Provides developers with a native option for offline storage, and enables applications to run as expected even without network connectivity. 7. Allows developers to retrieve the geographical location information for a Web site visitor. This technology is called geolocation. Examples include using the global positioning system (GPS) of a mobile device to determine the device's location, which allows Web services to be provided based on the client's location.
XHTML introduced syntax rules that must be followed in order for a document to validate, including the following:
1. The XHTML DOCTYPE statement is required. 2. Document structure tags are required. 3. The document must have one root element. 4. All elements and attributes must be typed in lowercase letters. 5. Each element must be properly closed, either with a separate closing tag or with a closing backslash (/), as appropriate. 6. All elements must be properly nested. 7. Attribute values must be enclosed in quotation marks.
Creating universal markup code is important for several reasons. Which are:
1. Your pages will be ensured to render in future versions of most browsers. 2. Your pages will be more scalable. This means that as you add more sophisticated content, make pages searchable or use the content in ways you have not yet imagined, you can still use markup you created without having to revise the code extensively. 3. Your pages will be more accessible to all users, including those with disabilities. You will be able to more easily make your pages compliant so that your site is available to the widest possible audience and does not present a liability to your organization.
You specify the flavor of HTML by using what document type declaration?
<!DOCTYPE>
Defines site content accompanying the main content; typically includes company services, blogs, images, tweets, and so on?
<article>
Defines content that is supplementary to the main content; typically includes advertisements or news feeds?
<aside>
Defines the bottom of the Web page; typically includes copyright and contact information?
<footer>
Defines the top of the Web page; typically includes the company logo?
<header>
The developers of HTML5 created specific elements to define the document structure. What are these 7 elements?
<header>, <footer>, <main>, <nav>, <section>, <article> and <aside>
Defines content that is directly related to the subject of the document?
<main>
Defines an area for navigation links; typically includes links to other resources on the site?
<nav>
Defines portions or areas of a document; typically consists of a group of articles or images?
<section>
Hyperlink
A set of instructions embedded within a file that calls another location in the file or a separate file when the link is clicked. The global set of linked documents across the existing Internet framework grew into what is known as the World Wide Web.
Application programming interface (API)
A source code specification that enables components of an application or program to work together to produce the desired functionality. HTML5 APIs provide an open environment for developing Web applications that does not rely on proprietary browser plug-ins.
MPEG-4 (MP4)
A streaming, digital multimedia format used to store video, audio, subtitles and still images.
geolocation
A technology that allows developers to retrieve the whereabouts of a Web site visitor.
CSS
A technology that allows greater style definition and formatting control of HTML elements.
JavaScript
A technology that provides dynamic, interactive capabilities to Web pages.
H.264
A video codec supported by HTML5-compliant browsers that does not require a plug-in; uses less battery and processing resources.
HTML 4.01 Transitional
Allowed developers to insert formatting using either CSS or traditional layout instructions.
canvas
An HTML5 API used for rendering visual images on the fly by providing a bitmap area for scripts. provides a place on a Web page (a "canvas") where developers can display graphics, animation, video and games "on the fly" (dynamically) without the need for a plug-in. By itself, canvas is a simple pixel-based drawing API that produces a bitmap image. You can draw objects on a canvas using JavaScript. You can also use it for more advanced tasks that include interactivity, such as video games, simulations, video editing or image configurations.
aside
An HTML5 element that contains content such as advertisements, highlighted resource links and other secondary content on a Web page.
article
An HTML5 element that contains main Web site content, such as company services, blogs, images and videos.
section
An HTML5 element used to define portion of a document or group of other elements.
What type of format is MP3?
Audio
What type of format is WAV?
Audio
What are the 3 HTML 4.01 flavors?
HTML 4.01 Transitional, HTML 4.01 Strict, HTML 4.01 Frameset
Ogg supported by which browsers?
Chrome, Firefox, and Opera
MP3 supported by which browsers?
Chrome, IE10, Safari, Firefox and Opera
WAV supported by which browsers?
Chrome, Safari, Firefox and Opera
<nav>
Defines an area for navigation links. Ex. A hypertext menu to access various pages of the Web site.
<aside>
Defines content that is aside from or additional to the main article content, Not just for sidebars, it can be used for any content. Ex. Not just for sidebars, it can be used for any content, Advertisements, news feeds, highlighted resource links.
<section>
Defines portions or areas of a document as necessary. Can group other element types. Ex. A group of articles or images, Any portion of the Web page document.
<article>
Defines site content accompanying the main content. Ex. Company services, news articles, blogs, images, videos, tweets, social networking posts.
<footer>
Defines the bottom of the Web page, similar to the footer in a word-processing document. Also can be contained in article, aside, nav, main and section elements to provide a footer in those areas. Ex. Site copyright, owner, contact information.
<main>
Defines the main content of the document body cannot be the child of the header, nav, article, aside or footer elements. Ex. Content is directly related to the subject of the document.
<header>
Defines the top of the Web page, similar to the header in a word-processing document. Also can be contained in article, aside, nav, main and section elements to provide a header in those areas. Ex. General topic description for the content below it, Company logo, News headlines
XHTML
Extensible HTML (XHTML) is a version of HTML that incorporates the strict syntax rules of Extensible Markup Language (XML) with the existing set of HTML 4.01 tags to create Web documents. Like HTML 4.01, XHTML has three flavors: Transitional, Strict and Frameset.
CSS is the markup language that defines page structure, hyperlinks and graphics to enable pages to render in Web browsers and other devices. (True/False)
False
HTML5 is the first version of HTML to make use of CSS. (True/False)
False
The HTML 4.01 Recommendation contained many improvements from HTML 3.2, most notably the <video> and <audio> elements. (True/False)
False
XHTML is a version of HTML that will validate without the need to follow the strict syntax rules of XML. (True/False)
False
Which 2 HTML versions are older but functional HTML standards. Some Web pages and HTML editors still contain this older code?
HTML 3.2 and HTML 4
Which HTML version contained many improvements over HTML 3.2, most notably the addition of Cascading Style Sheets (CSS) for formatting?
HTML 4
What is the latest version of HTML under development by the W3C?
HTML version 5 (HTML5)
What 2 languages are capable of creating both apps and Web pages.
HTML5 and CSS3
HTML5 family
HTML5, CSS and JavaScript as a group.
HTML5 APIs consist of the trifecta technologies which are:
HTML5, CSS and JavaScript. These technologies are used together to provide Web pages that can easily adapt to smartphones, tablets, gaming devices and smart TVs, as well as to traditional desktop computers.
Which other 3 languages are used to enhance a page?
JavaScript, JScript and VBScript.
HTML5
Markup language used for structuring and describing Web page content
HTML 4.01 Frameset
Required for pages that used HTML frames, which placed Web pages inside each other to create separate panes in the browser window.
HTML 4.01 Strict
Required the separation of presentation and content. Deprecated tags were disallowed and generated validation errors.
JavaScript
Scripting language that provides dynamic, interactive capabilities to Web pages
loop="loop"
Specifies that the audio or video file will play over and over again without stopping.
autoplay="autoplay"
Specifies that the video will automatically play immediately upon loading.
Cascading Style Sheets (CSS)
Style sheet language that provides the formatting and "look" of a Web page or document written in a markup language. CSS commands contain formatting instructions that can define the font, color and display of phrase elements used on a particular markup page.
offline storage
The ability for Web browsers and online services to download and access content and services without being connected to the Internet.
Code validation
The process of checking your code to verify that it complies with the syntax rules for your chosen standard. After you have checked your code and corrected any discrepancies, a code validator confirms that your code is compliant, and thus "validated."
What was the goal for XHTML?
To provide a bridge of backward- and forward-compatibility for HTML documents to easily adapt to XML technologies in future use. Many developers upgraded their Web page code from HTML to XHTML by applying the stricter syntax to existing code.
As with the <video> element, the controls attribute identifies the default audio controls: Play, Pause, Volume, etc. Any text enclosed within the <audio> element will appear in browsers that do not support it. (True/False)
True
CSS commands determine how HTML elements will display in Web pages. (True/False)
True
Canvas and other APIs use fewer resources than a plug-in does (such as battery power and CPU memory). This is especially important with regard to mobile devices, such as smartphones and tablets, which rely upon battery power. However, older browsers do not fully support APIs. Therefore, you should always provide alternative content or controls. The older browsers will ignore API elements (such as <canvas></canvas> tags) and will render the content that is between them. (True/False)
True
HTML5 has introduced the <video> element to provide developers with a standard method to embed video into their Web pages (see Figure 1-12). Prior to the <video> element, end-users needed browser plug-ins (such as Adobe Flash, Microsoft Silverlight or Apple QuickTime) in order to view video. Not all browsers or devices support these plug-ins, so a standardized way to include video was needed. (True/False)
True
HTML5 is designed to eliminate the need for third-party plug-ins and add-ons during Web development. (True/False)
True
What type of format is Ogg?
Video and Audio
Make sure you adopt a single W3C standard (e.g., HTML5 or XHTML) and apply it consistently so that when you validate your markup code, the code will match the DTD (standard syntax rules) that you specify. (True/False)
True
Note that code validators check your file's code for standard compliance, and some will specify problems or direct you to problem locations. However, validators do not correct the code for you — you must correct your code manually. (True/False)
True
Some popular APIs include Offline AppCache, Geolocation, Canvas and Drag-and-Drop. (True/False)
True
The DOCTYPE declaration is not required for HTML5, but it is good practice to include it for older HTML standards to tell the browser which version of HTML to expect. It is almost always written in uppercase letters by Web developers because older versions of HTML require this case-specificity. (True/False)
True
Validating your markup code is worthwhile because validated code is most likely to be interpreted accurately by the majority of user agents. As a result, you have a better chance of your pages rendering as you expect and to a larger audience. (True/False0
True
Will some older Web sites still contain code created with HTML 4.01? (True/False)
True
You can incorporate scripting languages and specialized content created with programs and technologies such as Java, ActiveX, Microsoft Silverlight and Adobe Flash into HTML5 Web pages. (True/False)
True
You use the <!DOCTYPE> declaration to specify the variant of HTML you are using to develop your Web pages. (True/False)
True
What type of format is WebM?
Video
What type of format is MP4?
Video and Audio