HTML 5 Introduction

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Multimedia

Three main types of multimedia exist on the web images, audio, and video. HTML5 has three tags to include, or embed, these elements into a web page:

  • <img>
  • <audio>
  • <video>

Images

The image tag <img> has one required attribute and several optional attributes. The image tag requires an image source attribute to be present. It is also important that images also provide alternate text so that all users can be aware of the image content.

<img src="http://example.com/image.webp" alt="Example image." />

Images can be given additional attributes including width, height, and a couple of attributes relating to image maps (images with specific interactive areas).

Open image formats include PNG, JPEG, and WebP.

The GIMP is a free photo manipulation tool that you can use to create and edit images for your web pages and even create web layouts. Inkscape is a vector graphics (i.e. SVG) illustrator that can be used to create images, web pages, layouts, and other vector based projects.

Audio

The <audio> tag is new  in HTML5. It gives designers a standard way to include audio in a page. The <audio> tag has several parameters the most important of which is source:

<audio src="file.ogg">Text for browsers that do not support the audio tag.</audio>

Other  attributes for the <audio> tag include autoplay, controls, loop, and preload.

Ogg Vorbis is an open format for web audio and is supported by Mozilla Firefox, Google Chrome, and Opera.

Several free tools exist with support for Ogg Vorbis audio:

Video

The <video> tag is also new in HTML5. We can now insert video into a web page without the need for third party plugins! The source attribute is key to the video tag:

<video src="video.ogv">Text for browsers without support for the video tag.</video>

Additional attributes for the <video> tag include audio, autoplay, controls, height, loop, poster, preload, and width.

Ogg Theora and WebM are open formats for Internet video both of which work on Mozilla Firefox, Google Chrome, Chromium, Konqueror, and Opera. Several free tools exist to convert new and existing video to Ogg Theora and/or WebM including:

It is possible to offer alternative formats for browsers that do not support Ogg Theora or WebM. To do this, you nest multiple <source> tags within a <video> tag as such:

<video>
  <source src="file.ogv" type="video/ogg" />
  <source src="file.webm" type="video/webm" />
  <source src="file.mp4" type="video/mp4" />
  Text or markup to display if the video does not play.
</video>

There are also several video hosting/streaming communities that support open formats:

Further information:

Task Discussion


  • alcinoe   Nov. 16, 2011, 1:37 a.m.

    Here's mine:

    http://www.alcinoe.us/HTML5/Multimedia.html

  • Anonym   Nov. 16, 2011, 3:11 a.m.
    In Reply To:   alcinoe   Nov. 16, 2011, 1:37 a.m.

    Nice design.  I like your color scheme.  yes

  • alcinoe   Nov. 18, 2011, 6:10 a.m.
    In Reply To:   Anonym   Nov. 16, 2011, 3:11 a.m.

    Thanks, Demian

  • Claudio Pinho   Nov. 8, 2011, 9:48 a.m.

    Hi people! Posting now my multimedia task:

    Click here.

    Best regards,

    Claudio Pinho.

  • Mike   Nov. 1, 2011, 12:04 a.m.

    Finally got back to a task, here's my latest build: http://michaelmcneive.com/html5/#three

    Few notes:

    • Used the Image 2 ways, one as a  IMG element and the other as a CSSbackground image.
    • Found an online converter to convert my mp4 video to OGG. Super helpful, otherwise you have to use something like terminal command line to convert it. Not much fun, really. http://www.online-convert.com/
    • Finally added the audio mp3 src as well as a fallback.
  • Stavros   Oct. 11, 2011, 5:46 p.m.

    I have done some work with the diferent types of audio and video files. Unfortunately ie9 failed to play any. On the other hand, google chrome played every possible variation. Safari only supported mp4 (video) and mp3 (audio) and firefox played ogv and webm (video) and ogg (audio).

    I also used table to put a header (th tag), change border (border attribute), alignment (align attribute), merge cells in the same row or on the same column (rowspan colspan) and changed color of text (style attribute)

    I wish had more time to try other browsers too. (I also own an Android mobile phone and an iphone 3g I could test).

    Here are the results to this link:

    http://dl.dropbox.com/u/4230190/courses/multimedia.html

  • joe palmer   Oct. 11, 2011, 8:21 p.m.
    In Reply To:   Stavros   Oct. 11, 2011, 5:46 p.m.

    Ha ha, like that link!

    It is bewildering what all one learns to get good at this stuff, yet the user agents do what they want with the standards, accepting or ignoring. Competiton, matter of time before they change. Old saying, grow or die. Nice work Stavro.

  • Stavros   Oct. 12, 2011, 8:31 a.m.
    In Reply To:   joe palmer   Oct. 11, 2011, 8:21 p.m.

    Thanx alot Joe. On this kind of learning method a little encourangement is all you need.

  • alcinoe   Nov. 15, 2011, 9:20 p.m.
    In Reply To:   Stavros   Oct. 11, 2011, 5:46 p.m.

    That is strange, ie9 is supposed to support mp3 audio:

    http://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_video_audio

  • Logan   Sept. 21, 2011, 4:02 p.m.

    If I were to use an .ogg or .ogv file in an audio or video tag, would Internet Explorer users not be able to view that file?

  • Brylie Oxley   Sept. 23, 2011, 12:37 a.m.
    In Reply To:   Logan   Sept. 21, 2011, 4:02 p.m.

    Good question Logan smiley

    I added an example to the task above showing how to provide multiple video formats for broader compatibility.

    Thanks!

  • Mike   Nov. 1, 2011, 9:18 a.m.
    In Reply To:   Brylie Oxley   Sept. 23, 2011, 12:37 a.m.

    You should do the same for Audio (Add MP3 Fallback). It's important for those learning mark-up for the first time to realize that sometimes you need to use a fallback, whether it's additional src elements or Javascript to make modern elements work correct in IE and older browsers.

  • Dar   Sept. 1, 2011, 1:12 p.m.

    http://etherpad.mozilla.org:9000/basicmarkup

    I figured I'd just work on the same pad since I just made it. Good to look at the same markup over and over, noo?

    I am slightly confused over ogg files - can I just convert files to ogg?

  • joe palmer   Sept. 2, 2011, 8:30 a.m.
    In Reply To:   Dar   Sept. 1, 2011, 1:12 p.m.

    Sure can

    http://www.google.com/search?q=how+to+make+a+ogg+file&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

  • skullkandy09   Aug. 20, 2011, 1:40 p.m.

    Here is my HTML with audio and a picture - I couldn't find a video. I also wanted to know is there is a way to access the local files of a computer to embed in the html. Also how do you cite copyright etc. in HTML? Is there a special tag?

  • Anonym   July 11, 2011, 10:23 p.m.

     

    https://github.com/DamionKing/P2PU/blob/master/HTML5/Multimedia.html

  • Anonym   July 11, 2011, 10:21 p.m.

     

    https://github.com/DamionKing/P2PU/blob/master/HTML5/Multimedia.html

  • Rezaul   June 27, 2011, 12:15 a.m.

    http://htmlpad.org/Rezaul/
  • Rezaul   June 25, 2011, 9:13 a.m.

    Hi,

    Would anyone explain me why controls, preload, loop etc. are important and how they work? Plz provide some links to learn about them if possible.

    Thanks.

  • Anonym   June 25, 2011, 1:50 p.m.
    In Reply To:   Rezaul   June 25, 2011, 9:13 a.m.

    controls, preload, loop etc are all attributes for the video and audio tags.  Attributes are keywords used by HTML to add function to the code.  Most HTML tags have some type of attribute.  At W3Schools you can look up any tag and find out all of its attributes and their functions.  I hope this is helpful.

  • Rezaul   June 26, 2011, 11:27 p.m.
    In Reply To:   Anonym   June 25, 2011, 1:50 p.m.

    Thanks a lot Norbert. It was indeed very helpful.

  • Lallo Vigil   June 28, 2011, 6:47 p.m.
    In Reply To:   Anonym   June 25, 2011, 1:50 p.m.

    I know a lot of people like W3Schools, but I guess a lot of their stuff is incorrect. Here is a Web site called W3Fools that explains why they're bad and also has other Websites that follow standards. I use W3Schools for stuff and gave a link to it in a post and everyone yelled, so I just wanted you to beaware.

  • Rezaul   June 29, 2011, 1:14 a.m.
    In Reply To:   Lallo Vigil   June 28, 2011, 6:47 p.m.

    I think htmldog is a good website for those who are really interested to learn web design

  • (aleb   June 29, 2011, 1:45 p.m.
    In Reply To:   Lallo Vigil   June 28, 2011, 6:47 p.m.

    I do trust Paul Irish. I have noticed mistakes on W3schools website too.

  • Anonym   June 30, 2011, 2:43 p.m.
    In Reply To:   (aleb   June 29, 2011, 1:45 p.m.

    Any ideas where I can find a CSS3 tutorial then cause my only hope was W3Schools...

  • chetankjain   June 30, 2011, 3:41 p.m.
    In Reply To:   Anonym   June 30, 2011, 2:43 p.m.

    Hi,

    Check out

    http://www.css3.com/

    http://net.tutsplus.com/category/tutorials/html-css-techniques/

     

    br

    chetan

  • Anonym   June 30, 2011, 4:10 p.m.
    In Reply To:   chetankjain   June 30, 2011, 3:41 p.m.

    The first website looks cool but the second is amazing thank you!

  • (aleb   June 30, 2011, 4:42 p.m.
    In Reply To:   Anonym   June 30, 2011, 2:43 p.m.

    Wesley,

    W3Schools are getting better and are taking feedback on errors found and actually correcting them now. However, there are a few sites such as http://www.css3.info/category/tutorials/

    What are you attempting to learn in CSS3? We may can help you here on P2PU. Anyway, here is one site I really, really like: http://www.css3files.com/

    Let us know what you're trying to do and we may can help.

    Thanks,

    (aleb

  • Anonym   June 30, 2011, 4:50 p.m.
    In Reply To:   (aleb   June 30, 2011, 4:42 p.m.

    I am attempting to learn the whole thing not just bits and pieces I suppose.

  • olen   July 1, 2011, 12:36 p.m.
    In Reply To:   Anonym   June 30, 2011, 2:43 p.m.

    Google Code University seems to have a pretty good introduction to CSS.

    http://code.google.com/edu/submissions/html-css-javascript/#html 

  • Randi Miller   June 20, 2011, 2:14 a.m.

    http://htmlpad.org/randimiller-2/

  • yasna   June 19, 2011, 9:06 p.m.

    Hi guys!

    I need your help. My problem is I can not link the video.ogv. The label will not let me on my website. I'll be doing something wrong?. I will appreciate your contributions.
    indeed, this is my page     http://htmlpad.org/openzo/

  • Anonym   June 19, 2011, 11:50 p.m.
    In Reply To:   yasna   June 19, 2011, 9:06 p.m.

    You need to close your brackets.  Currently you have <video src="www.website.org/video.ogv"</video>

    This needs to be <video src="www.website.org/video.ogv"></video>

  • yasna   June 20, 2011, 12:31 a.m.
    In Reply To:   Anonym   June 19, 2011, 11:50 p.m.

    Hey!

    The reason: Typing problems!. I didn't notice to closing Tag. Thanks for you early help! :D

     

    The webpage ready! (incluided Video)

    http://htmlpad.org/openzo/

  • Ryan T   June 18, 2011, 9:19 p.m.

    For this project I am creating content about open internet and net neutrality.  Its a little disjointed at this point, I'm sure, but it will evolve as we go.  Please check it out!

    Surfing the Interweb

  • vicks711   June 19, 2011, 2:32 p.m.
    In Reply To:   Ryan T   June 18, 2011, 9:19 p.m.

    Hey nice work!!!

  • Denis   June 18, 2011, 2:01 p.m.

    I have a question for a teacher. Is there such?

    Is it possible to use local files for "src" attribute? I mean something like this: <audio src="file:///home/myname/sample.ogg">

    i'm using firefox 4 browser.

  • Anonym   June 18, 2011, 2:23 p.m.
    In Reply To:   Denis   June 18, 2011, 2:01 p.m.

    it is possible to use local files, but it is generally frowned upon to use any absolute path unless it is necessary.  If you are linking/using content that is part of your website you should have the content in the same folder wherever it is. So for example if your webpage is index.html and you have a media folder inside of your site folder it would be <audio src="media/sample.ogg"> If this is not clear let me know and I will do my best to clarify.

    For examples below html file is at C:/users/name/HTML5/index.html

    Absolute Path: a path based on the highest level. i.e. C:/users/name/HTML5/media/sample.ogg

    Relative Path: a path based on the location of the file.  i.e. media/sample.ogg

  • Denis   June 18, 2011, 3:07 p.m.
    In Reply To:   Anonym   June 18, 2011, 2:23 p.m.

    thanks, it's clear about absolut and relative path.

    i'll try to explain my problem in more detail. I've made a page at http://htmlpad.org/psea/ and use "file:///home/psea/sample.ogg"  value for a src attribute for a audio tag and the browser don't play the file. But when i put "file:///home/psea/sample.ogg" to address bar the browser play it.

  • Anonym   June 18, 2011, 3:49 p.m.
    In Reply To:   Denis   June 18, 2011, 3:07 p.m.

    The problem seems to be that you are using forward slashes (/) instead of backslashes (\), although I will stress once again when you are developing a webpage for the internet all of your file paths to content on your website should be relative and the entire website should be contained within one folder.  I will explain this in better detail in a task soon.

  • Denis   June 19, 2011, 5:31 a.m.
    In Reply To:   Anonym   June 18, 2011, 3:49 p.m.

    I've read your task about absolute and relative path. But in my question is not the case. When we are talking about relative path we should specify relavite to what. In article you are talking about index.html. And another files is relative to index.html. The index.html and the sample.jpg is located on the same computer for example wikipedia.org. But what if index.html located on one computer at the internet (lets take htmlpad.org/psea) but file we want to access via src attribute is located on user's computer (where browser runs)? So we can't use here relavite path because our webpage (index.html) and file we want to access are on different computers. In short is it possible to access files (via src attribute) located on users computer (where the browser run) from the html page located on some computer at the Internet?

    ps very sorry for my english. i try all my best.

  • Anonym   June 19, 2011, 11:40 a.m.
    In Reply To:   Denis   June 19, 2011, 5:31 a.m.

    Your english is fine don't worry.  In regards to your question.  HTML URLs can only be used to access files on the same computer as your HTML file and other files on the internet.  Due to security and the differences in operating systems you can not use the src attribute to access files on the user's computer unless the webpage is local (on your computer not the internet).  I hope this clears things up.  I will update this in the task.

    Currently there is no way to access a user's files without using another language such as PHP or Javascript. That is out of scope for this course.

  • aaron wheeler   June 18, 2011, 12:22 a.m.
    http://htmlpad.org/multimedia

    I wanted the audio to repeat but couldn't get the 'loop' attribute to work.

  • Anonym   June 12, 2011, 2:23 p.m.

    I recommond learning the attributes available for all the tags.  Continuation of past tasks: http://htmlpad.org/snipe/

  • Sedmikrasky   June 7, 2011, 6:43 p.m.

    Here's my example

    http://nurianadalrovira.bz.cm/p2pu/html5/03_multimedia.html

     

    Cheers