HTML puissance 5!

L'architecture d'une page HTML:

le doctype :
première ligne pour definir un document HTML en version 5.
le head :
Partie déclarative non affichée du fichier, elle comprend les balises Title, meta, les appels de scripts css et js additionnels.
le body :
contient le code qui génère la page dans le navigateur client.
<element></element> :
élément HTML composé d'un couple de balises ouvrante et fermante,
<element /> :
balise de type orpheline, ne nécessite pas de fermeture,
Structure_fichier_html
Structure minimale en HTML5

Les balises structurantes :

<header> </header>:
délimite une zone d'entête,
<nav> </nav>:
zone regroupant les liens de navigation,
<section> </section>:
délimite une section d'affichage,
<aside> </aside>:
délimite une zone latérale d'affichage,
<footer> </footer>:
délimite une zone de pied de page,
<p> </p>:
délimite un paragraphe,
<br/> :
c'est une balise orpheline qui ajoute un retour à la ligne,
<hx> </hx>:
balises titres, x de 1 à 6 par ordre d'importance. h1 pour le titre principal, h2 pour un sous-titre, etc..
<em></em>:
mise en valeur faible d'un mot, d'une phrase,
<strong></strong>:
mise en valeur plus importante,
Structure d'une page HTML5

Les listes:

<ul> </ul> :
liste non ordonnée (à puce),
<ol> </ol> :
liste ordonnée (numérotée),

les éléments des listes ul et ol :

  • <li></li>:
  • délimite un élément de liste ul et ol,
<dl></dl>:
liste descriptive,

les éléments des listes dl :

  1. <dt></dt>: nom de l'élément,
  2. <dd></dd>: description de l'élément.

Les liens:

<a href="http://lien_externe.html"></a>:
lien absolu qui référence un lien externe à la page,
<a href="[chemin/]ma_page_interne.html"></a>:
lien relatif qui référence un lien interne,
<a href="#"></a>:
lien vide,
<a href="#Ancre"></a>:
lien qui référence une ancre de la page en cours,
<a href="[chemin/]ma_page_interne.html#Ancre"></a>:
lien relatif vers une ancre d'un lien interne,
<a href="mailto:"monAdresse@mail"></a>:
lien vers une adresse mail,
<a href="fic_download.zip"></a>:
lien de téléchargement du fichier fic_download.zip,
Attributs des liens:
title :
affiche une info-bulle au survol de la souris,
target="_blanck" :
ouvre le lien dans une nouvelle fenetre,

Les images:

Trois formats principaux suivant l'usage:
  • JPEG : format léger adapté aux images,
  • PNG : pour les graphiques hors images, codage en 8 et 24 bits qui n'altère pas la qualité d'image et permet les effets de transparence,
  • GIF : pour les images animées,
<img> :
balise orpheline pour insérer une image,
  • src="chemin": attribut indique l'adresse de l'image
  • alt ="description" : attribut texte alternatif et descriptif de l'image. Apparait lorsque l'image ne peut pas etre affichée,
  • title="message" : affichage infobulle.
Pour une image "lourde", on peut afficher une miniature (thumbnails) et ajouter un lien vers l'image en taille réelle. exemple:
<a href="GrandeImage.jpg"> <img src="vignette.png"> exemple lien thumbnail
Les figures:
Les figures sont des éléments qui viennent agrémenter un texte.
Une figure peut prendre la forme d'une image, d'un code source, d'une citation, etc..

<figure></figure>: balises de création, Attributs des liens:

Les tableaux:

<table> </table> :
Balises création de tableau
caption :
donner une courte légende au tableau,
<thead></thead> :
pour afficher le nom des colonnes,
<tbody></tbody> :
corps du tableau avec les cellules contenant les données,
<tfoot></tfoot> :
footer du tableau,
Structure d'un tableau