III. The new Html5 tags

Here, you will learn the new habilities related of Html5. There are some tags own by Html5 which are use in a lot of site All of them belong to the "body" tag.

  • <header> :
    Indicate the head of the web-page. It will show the main page title.

  • <nav> :
    Indicate a navigation element.

  • <aside> :
    The aside element represents a section of a page that consists of content that is related to the content around the aside element.

  • <article> :
    The article element represents a component of a page

  • <footer> :
    A footer typically contains information about its section such as who wrote it,copyright etc...

    They are not realy hard to build when you know all Html5 principle
    I hardly recommend you to test them.
    Be careful, please respect the order give to you.

    You can make how many Asside and Article tags in your page, but not in whith the other tags.
    Now, lets see the new multimedia elements of HTML5.

    1. Video Tag

    The video tag allow you top create a new reader.

    exemple d'application

    exemple d'application

    As the image tag, the src attribut indicate where is the video that you want to load. Here, my video is in .ogv format, there are three other format which work with video tags. All of them are compatible with all famous browser.

    The format are :
  • - MP4 : Working whith all apple browser (Safari, Safari Mobile) and on Google Chrome.
    Mp4 is paying format, exept in some case like a free video diffusion.
  • - OFF/THEORA: A free format, compatible with Opera, Chrome and Firefox, that you can use where you want.
  • -WEBM/VP8 : It's a format build by GooGle, avaible on Chrome Opera Firefox 4.0.

    Your main trouble will be the choice of navigator.
    How can we do the best choice?

    It's very simple!!
    You only have to put all of them into your navigator and let the visitor navigateur choice for you.

    exemple d'application

    Analysis :

    Firstable, we have to choose the dimension of the video with the width and height attributs. the controls attributs inicate that the video will never be play if the visitor don't touch the play button. You can swich it with the "autoplay = "true" " attibut if you want to start the video as soons as the page will be ready.

    Be careful:
    This tags only work with recent navigator, I hardly recommend to you to instal a new navigator if you don't !
    At least, you can use Miro Video Converter in order to convert your video.

    2.The audio Tag

    exemple d'application

    Wich this tag, you will be able to build a full MP3 player, the aspect of all player are different according to the brower.
    There, The audio tag in HTML5

    Code d'application

    Very Simple no?

    Like the video tag, controls attributs have the same function but only two format are avaible :

  • -.mp3
  • -.ogg.

    The MP3 format isn't free, and not avaible on every borwser (firefox doesn't use it for example).
    So, there is the OGG format, you only need a litle conversion nd your audio will work perfetcly.

    3.The canvas Tag

    The canvas tags is one of the novelty of HTML5, Indeed, it allow you to put directly some program in your page.
    It will create a box where all your code will be show.

    The canvas tag is a directly concurent of java.

    Application de la balise canvas

    Nevertheless, it's a programation tags, so we will only show you some example and not teach it. If you realy want to use it, i reccommend to learn C++, Java and PHP.



     1, 2, 3, 4, 5, 6, 7