Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).
We'll get back to that. And then the rest of the file is really very simple. There is our header, there is our audio, and there is the little form with the buttons at the bottom, and we'll show you those a little bit later as well. The first thing I want you to notice about this is that this audio control here, we have an audio container, and it contains these source tags, and each of these source tags refers to a different file with a different media type. And so we have an aac file, we have an mpeg file, and we have an ogg vorbis file.
And so those are three different encodings of the same media. And the reason for that is that different browsers support different encodings. So for example, this Firefox browser, if we come up here to the Tools menu and go into Web Developer > Web Console, we see this it failed to load the aac or the mpeg, the m4a or mp3 files, and those were the first two. And so what it did load is the ogg file. If we come back here up to the Tools menu and go to Page Info and come over here to Media, you see that song.ogg got loaded and here's the preview of it. (music playing) So we can close this, and we can close this, and let's look at the same effect here in Chrome.
In Chrome we can go in the View > Developer > Developer Tools and we can see under Resources, if we click on the Resources tab--it usually comes up at first under Console--but if you click on the Resources tab and under Frames and audio-working.html, that's our file there. You see in this XHR > song.MP3. thats the one that got loaded. And so if we come back over here into our source file, you see that that's the second one. So it wasn't able to load the aac, and instead it loaded the mp3 file.
And there are actually quite a few different things that you can do with it. So you can create your own buttons and make this all fit with the look of your website and these buttons just work. (music playing) And it works exactly the same in Firefox. (music playing) So there's a couple of other attributes.
Of course you can make much more sophisticated controls, and you've probably seen examples of that around the Internet. By providing a selection of different encodings in the source tags, it's possible to support all of the modern browsers with your audio media.
Find answers to the most frequently asked questions about HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.