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:
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).
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.
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.
Several free tools exist with support for Ogg Vorbis audio:
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:
Finally got back to a task, here's my latest build: http://michaelmcneive.com/html5/#three
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:
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.
That is strange, ie9 is supposed to support mp3 audio:
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.
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.
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.
Google Code University seems to have a pretty good introduction to CSS.
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
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.
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.
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.
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.
Here's my example