Table 8-1. Nine HTML5 New Media Genres and Data Format Support

New Media Asset	Supported Data Formats
Digital Imagery	JPEG, GIF, PNG8, PNG24, PNG32, WebP, BMP, PDF
Digital Audio	MP3, OGG Vorbis, WAVE, AIFF, MPEG-4, OPUS, FLAC
Digital Video	MPEG-4 AVC H.264, MPEG-H EVC H.265, WebM VP8/VP9
Digital Illustration	SVG (Scalable Vector Graphic)(also used via CSS)
Interactive 3D	WebGL or WebGL2 (<canvas> covered in Chapter 17)
Digital Painting	SVG, JPEG, GIF, PNG (8/24/32), WebP, WebM, MPEG
Visual FX (VFX)	Above Formats combined together using JavaScript
Speech Recognition	Recognizes Speech; Converts to Text (Web Speech)
Speech Synthesis	Synthesizes Speech, Using Text (Web Speech API)

Digital Imagery: Using the <img> Tag

The most widely used new media element with HTML5 is the digital image, which uses the <img> tag. It was introduced in HTML 1.2 and standardized in HTML 2.0

. Parameters include src, the digital image asset file reference parameter, as well as the
width and height parameters

and useful SEO parameters. Table 8-2 shows parameter support in HTML5.

The <img> tag

has a dozen parameters, eight of which are supported in HTML5

, and four of which have been deprecated due to the use of CSS to provide these functions. The 12 parameters are seen in Table 8-2; common usage parameters are in the first section and the less commonly used parameters are in the second section. The third section contains parameters supported in previous HTML versions, which you use CSS

to implement in HTML5. You can use these parameters in legacy HTML4 or prior HTML versions such as HTML3.2, HTML 2.0, and XHTML 1.0 and 1.1.

If you want to master digital image compositing terms, principles, workflows, and fundamentals, check out Digital Image Compositing Fundamentals (Apress, 2015).

The following is an example of a
digital image asset

using the <img> tag with the src parameter:

<img src="imagename.jpg" />

To optimize a digital image asset for SEO purposes, you use the
alt parameter

, as shown in the following example HTML5 markup:

<img src="imagename.jpg" alt="Image Description Using Keywords for SEO" />

To scale a digital image asset, you use with the
width and height parameters

, as shown in following example:

<img src="imgname.jpg" width="400" height="300"/> <!-- Scale Down Image -->

Make sure to scale your image by a power of 2. Thus, your source image for the preceding markup should be 800 × 600, or 1600 × 1200 in physical pixel resolution. Always scale down not up!

To allow a digital image asset to be legally accessed from a third-party website, use the
crossorigin parameter

(as covered in Chapter 4), as shown in the following HTML5 markup:

<img src="imagename.jpg" crossorigin="use-credentials" />

To further optimize a digital image asset for SEO, using the
longdesc parameter

, you should utilize this following HTML5 markup, which provides the URL reference to a keyword-optimized description that you create using HTML5:

<img src="imgname.jpg" longdesc="http://www.serverlocation.com/desc.html"/>

To define a
client-side digital image map asset

with the USEMAP parameter, you would utilize the following HTML5 markup:

<img src="imagename.jpg" usemap="#mapname" width="640" height="480" />
     <map >
          <area shape="rect" coords="10,10,640,240" href="URL" alt="SEO" />
          <area shape="circle" coords="320,360,120" href="URL" alt="SEO" />
     </map>

This provides the id reference to your <map> element definition, which contains <area> element definitions that define areas within your client-side image map.

To specify a digital image asset using
server-side image mapping

, use an
ismap parameter

, as shown in the following HTML5 markup:

<img src="imagename.jpg" alt="Image Description: SEO Keywords" ismap />

Next, let’s look at digital audio assets and the HTML5 <audio> tag.

Digital Audio: Using the <audio> Tag

Your next most

widely used new media element in HTML5 is digital audio, which uses the <audio> tag. This is new to HTML5 and it is not in previous versions of HTML. Parameters include the src, which references a digital audio asset file name, and controls, which adds the audio transport user interface feature. Table 8-3 shows the <audio> tag parameters supported in HTML5, with the two most important parameters in the top section, the most commonly used options in a middle section, with seldom used options in the bottom section of the table.

This <audio> tag has seven

parameters. These can be seen in Table 8-3 in the first section (common usage parameters) and in the second section (three less frequently used parameters). The third section of the table contains parameters that are supported but are not recommended for use unless absolutely needed. The reason for this is that autoplay bothers many users, and an autobuffer takes up system resources that may not even be used if the user chooses not to hit the transport play button.

If you want to master digital audio editing terminology, principles, workflows, data footprint optimization, compositing and fundamentals, you check out my Digital Audio Editing Fundamentals (Apress, 2015).

To create a digital audio asset, use the <audio> tag with the controls parameter, <source> child tags, and noaudio message (like noscript), using this following HTML5 markup structure:

<audio controls>
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
     ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>

Using more than one <source> tag provides “fallback” file format support choices for the HTML5 platform that you are using, in case the first audio codec choice is not supported by the HTML5 browser (or HTML5 operating system).

To autoplay a digital image asset using the autoplay parameter, you would utilize the following HTML5 markup:

<audio controls autoplay>
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
     ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>

To loop the digital audio asset using the loop parameter, you should utilize the following HTML5 markup:

<audio controls loop>
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
     ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>

To preload a digital audio asset, use a preload parameter with the auto setting, utilizing this following HTML5 markup:

<audio controls preload="auto">
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
     ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>

To preload only digital audio metadata, use the preload parameter with a metadata setting, using this HTML5 markup:

<audio controls preload="metadata">
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag! </audio>

To prevent any pre-loading of your digital audio assets, use the preload parameter with the none setting, utilizing this following HTML5 markup:

<audio controls preload="none">
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag! </audio>                                                                      

Next, let’s take a look at the digital video <video> tag.

Digital Video: Using the <video> Tag

Your next most widely used new media element in HTML5 is digital video, which uses the <video> tag. This is new to HTML5 and is not in previous versions of HTML. Parameters include the src, which references a
digital audio asset file name, and controls

, which adds the
video transport user interface

feature, and width and height, in case you wish to “downsample” or scale down your digital video asset (using a factor of 2 or 4). Table 8-4 shows the <video> tag parameters supported in HTML5 with the four most important parameters in the top section, the four most commonly used options in the middle section, and two less frequently used options listed in the bottom section.

The <video> tag has ten

parameters. These are seen in Table 8-4 in the first section (common usage parameters) and in the second section (four less frequently utilized parameters).

If you want to master digital video editing terminology, principles, workflows, data footprint optimization, compositing, and fundamentals, check out the Digital Video Editing Fundamentals (Apress, 2015).

To create a
digital video asset

, use the <video> tag with the controls parameter, width and height parameters, three <source> child tags, and a novideo message (like a noscript), as shown in the following HTML5 markup structure:

<video width="400" height="300" controls>
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

Using more than one <source> tag provides “fallback” file format support choices for the HTML5 platform that you are using, in case the first video codec choice is not supported by that particular HTML5 browser (or operating system).

To autoplay a digital video asset, you use the
autoplay parameter

, as shown in the following HTML5 markup:

<video width="400" height="300" controls autoplay>
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

To loop a digital video asset, you use the
loop parameter

, as shown in the following HTML5 markup:

<video width="400" height="300" controls loop>
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

To preload a digital video asset, you use the
preload parameter

with the auto setting, as shown in the following HTML5 markup:

<video width="400" height="300" controls preload="auto">
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

As with the <audio> tag preload parameter, you can set a preload value to none or to only load the metadata.

In case you are wondering what
metadata

is, it includes information about the audio or video asset, such as the title, the name of the artist, and information about the music (or video) content.

To display an image during video buffering, use a
poster parameter

set to reference your digital image asset’s file name, as shown in the following HTML5 markup:

<video width="400" height="300" controls poster="posterimagename.png">
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

Next, let’s look at the digital illustration

<svg> tag and its child tags (which allow you to define illustration).

Digital Illustration: Using the <svg> Tag

Your next most widely used new media element in HTML5 is digital illustration, which uses the <svg> tag. It is also new in HTML5, meaning it was not included in previous versions of HTML. CSS is the most popular way to apply the power of svg, especially a plethora of special effects to apply to the vector element components of your HTML5 applications, including text, buttons, or vector illustrations. A number of new media software packages can generate SVG XML data

, including Inkscape, GIMP, CorelDRAW, OpenOffice Draw, and Adobe Illustrator, to name just a few.

SVG tag parameters include width and height for your SVG digital illustration definition, as well as child tags, used to define SVG elements, which add features to digital illustration assets. SVG is based on XML, and SVG uses XML tags, which as you now know is compatible with HTML5 now that SVG support has been added. This is exciting for HTML5 developers, as vector support allows digital illustrators to create impressive
interactive 2D artwork

as well as visually exciting special effects for users.

Table 8-5 shows some of the SVG tag’s child tag elements

that are supported in HTML5. They also have their own parameters, such as fill, stroke, and color, and so forth, as you will see in some of the markup examples in this section. I cannot discuss SVG in detail in this book, because it is a topic in and unto itself. That said, the W3C’s decision to add SVG support to HTML5 was easy due to shared SGML markup language origins.

The <svg> tag has

many child tags and parameters, all of which are supported in HTML5 and are typically accessed using CSS to implement the digital illustration functions.

Some of the more often used SVG elements are seen in Table 8-5. The first section contains the basic shapes and the second section contains other useful vector design elements.

If you wanted to master digital illustration (SVG) terms as well as core SVG XML principles, SVG XML markup workflow, and SVG fundamentals, check out my Digital Illustration Fundamentals (Apress, 2015) title. In this book, I show readers how to create (and optimize) SVG assets using GIMP and Inkscape, so the book bridges digital imaging and digital illustration software with HTML5. The book also has chapters covering Android, Java and JavaFX code, HTML5 markup, XML, CSS, and cross-platform (cross-device) publishing.

To create a digital illustration asset, use the <svg> tag with the
width and height parameters

and with a child tag that defines an SVG circle shape, as shown in the following HTML5 markup:

<svg width="640" height="480">
   <circle cx="0" cy="0" r="25" fill="blue" stroke="red" stroke-width="4">
</svg>

To create an SVG
rounded rectangle

, utilize the following HTML5 markup, which includes parameters for rx (radius x) and ry (radius y):

<svg width="640" height="480">
   <rect x="20" y="20" rx="10" ry="10" width="200" height="200"
         style="fill:yellow; stroke:purple; stroke-width:6; opacity:0.5" />
</svg>

Notice the
style parameter

, which contains in-line CSS3 style information

, which is more common for styling SVG illustrations.

Next, let’s look at the other new media areas that can be simulated using features in HTML5.

Interactive 3D: Using a <canvas> Tag and WebGL

We are going to

spend an entire chapter on advanced drawing for HTML5 using the <canvas> tag, which is how you implement interactive 3D, or i3D. This advanced new media area requires a special API called WebGL, which uses OpenGL. WebGL2 is due out in 2016. It brings the visual impact of OpenGL to HTML5. We’ll go over all of this in Chapter 17. (I just wanted to put it in context in this chapter with the other new media genres.)

Digital Painting

: Digital Painting using JavaScript

Digital painting is a combination of digital imaging, vector illustration, particle systems, and digital video. SVG is moving towards adding digital painting features, but you can use JavaScript and CSS3 with HTML5 to simulate digital painting now. This is an advanced area beyond the tag markup focus of this book, but if you want to learn more about digital painting, you should check out Digital Painting Techniques (Apress, 2016). In this book, I show readers how to create (and optimize) digital painting assets using Corel Painter 2016, GIMP, and Inkscape, which bridges digital imaging and digital illustration software with HTML5. This book has chapters covering data footprint optimization, Android, JavaScript, Java 8 and JavaFX coding, HTML5 markup, as well as cross-platform and cross-device new media content publishing.

Visual Effects

: Creating VFX using JavaScript

Other advanced new media genres, such as visual effects, or VFX, can also be simulated using advanced JavaScript programming in conjunction with CSS3, WebGL2, and HTML5 tags. This is an advanced area beyond the tag markup focus of this book, but if you want to learn more about visual effects, you should check out Visual Effects Fundamentals (Apress, 2016). In this book, I show the readers how to create (and optimize) visual effects assets using BlackMagic Fusion and GIMP, so it bridges digital imaging, digital video, digital audio, and digital illustration software with HTML5. The book goes over data footprint optimization, Android, Java 8 and JavaFX coding, HTML5 markup, and cross-platform and cross-device publishing.

Web Speech

: Speech Synthesis and Recognition

Finally, let’s take a quick look at speech recognition and speech synthesis, which were recently added to HTML5 browsers Google Chrome and Apple Safari using the Web Speech API. Expect Firefox to add it as well since it is moving to support iTVs and smartphones. Opera is also doing the same. The future of new media is looking bright for HTML5-based platforms and browsers, which is especially exciting for multimedia producers. For an example of how speech recognition and speech synthesis work in Google Chrome, visit
https://www.google.com/intl/en/chrome/demos/speech.html
.