Travail réalisé : sara ait bihi

# HTML5 : La nouvelle norme !

informations utiles(W3C)

## contact

TEST CSS

## tutoriel HTML5

w3c

# HTML5 le futur de l'internet

Avant de commencer,il faudra télécharger le navigateur Opéra pour voir le rendu des nouvelles balises de HTML5.

- ( + )Présentation
  HTML 5 se base sur les nouvelles technologies (navigateurs Web, standards utilisés...). Il intègre le référencement universel qui permet aux moteurs de recherche de proposer à l'internaute un panel de documents multimédia, et plus seulement des pages Web. Pour cela, les balises HTML 5 précisent le contenu des éléments.
  HTML5 reprend la majorité des éléments de HTML4. Cependant HTML5 définit aussi nombre de nouveaux éléments qui sont de nouvelles balises sémantiques.
  L'intérêt des balises sémantiques est d'une part d'obtenir une meilleure lisibilité du code, mais également de spécifier certains éléments au lieu d'utiliser un élément générique tel que div.
  Cette aspect est très utile aux crawlers des moteurs de recherche, tels que Yahoo ou Google.
  - ( + )Balise pour structurer un documents
    - ( + ) section

      ##### + code

      Cette balise découpe le contenu en section

      identifie un bloc de contenu pour structurer la page par sections thématiques. Elle peut contenir des titres (hn), des paragraphes (p), un entête (header) et/ou un pied de page (footer).

    - ( + ) article

      ##### + code

      Cette balise encadre un morceau de texte

      indique un contenu indépendant de la page, par exemple un post sur un forum ou un blog. Il est possible d'imbriquer plusieurs balises

      , dans le cas de commentaires. Son utilisation reste encore complexe et devrait être précisée dans les prochaines versions du document HTML 5.
    - ( + ) aside

      ##### + code

      Cette balise étend le contenu

      Elle précise que le contenu de la section est thématiquement lié au reste de la page, mais qu’il est néanmoins possible de le séparer de la structure de la page. Cet élément est généralement représenté comme un encadré sur la page. La balise

      est souvent lié la publication d’articles connexes, d’archives ou encore de publicités ciblées, sans pour autant intégrer ces à-côtés aux articles placés dans la page.

    ces trois balises(aside, article et section) servent à mettre un encart sur le côté et découper un document en plusieurs morceaux

    - ( + ) header

      ##### + code

      Cette balise définit l'en-tête d'une section à savoir le haut de page

    - ( + ) footer

      ##### + code

      Cette balise définit un pied de page (il est possible de pied de page en haut et vice versa)

  - ( + )Balise pour contenu embarqué
    - ( + ) figure

      ##### + code

      Cette Balise délimite un contenu média avec sa légende et son titre par exemple.

      - legend : comme son nom l'indique cette balise sert à indiquer une légende
        cite : cette balise sert à insérer une citation
    - ( + ) canvas

      ##### + code

      ##### exemple canvas (2)

      ##### + code

      ##### exemple canvas (3)

      ##### + code

      Cette Balise sert à dessiner et afficher des formes géométriques

    - ( + ) video

      Cette Balise est spécifié pour tous les contenu vidéo

      HTML 5 proposera une alternative grâce à ses balises <>video<> et <>audio<>. Par exemple, pour la vidéo on pourra définir :
      * la source
      * les dimensions
      * l'image de preload
      * le type de fichier
      * des contrôles
      * ...

    - ( + ) audio

      Cette Balise est spécifié pour tous les contenu audio

  - ( + )Balise pour formulaire
    - ( + ) output

      Elle sert à définir le résultat d'un processus, par exemple celui d'un script

      Un champ de sortie pour les formulaires (par exemple "" <>output name="result" onforminput="value = a.value + b.value">0 "" affichera la somme des champs a et b).

    - ( + ) form

      ##### + code

      Cette Balise sert à génerer des formulaires plus évolué que la version précédente

    - ( + ) exemple de formulaire

      ##### + code

  - ( + )Balise pour la mise en page
    - ( + ) pre

      ##### + code

      Cette Balise sert à afficher le texte tel qu il est écrit sur un document text

    - ( + ) var

      ##### + code

      Cette Balise permet de mettre en valeur une variable

    - ( + ) dialog / dt / dd

      ##### + code

      On se sert de cette balise pour les conversations(une sorte de DL)

      - dialog : mettre en avant une conversation
        dt : précise le nom du locuteur
        dd : précise les paroles du locuteur
    - ( + ) dfn

      ##### + code

      Balise pour les définitions

    - ( + ) time

      ##### + code

      Balise utilisée pour le temps et l'heure

    - ( + ) meter

      ##### + code

      Cette Balise contient une valeur fractionnaire ou scalaire dont on connaît l'intervalle de valeurs possibles

    - ( + ) progress

      ##### + code

      Cette Balise indique le niveau d'avancement d'une tâche.

      Les attributs de cette balise sont encore un peu flous

  - ( + )Balises mises aux oubliettes par html5
    - basefont
      big
      center
      font
      s
      strike
      tt
      u
      frame
      frameset
      noframes