Les balises HTML5
Définition : HTML5
Le HTML5, pour HyperText Markup Language 5, est une version du célèbre format HTML utilisé pour concevoir les sites Internet. Celui-ci se résume à un langage de balisage qui sert à l'écriture de l'hypertexte indispensable à la mise en forme d'une page Web. Lancée en octobre 2014, cette version HTML5 apporte de nouveaux éléments et de nouveaux attributs par rapport à la version précédente. Elle offre par exemple la possibilité de définir le contenu principal d'une page Web, d'ajouter une introduction en header, d'insérer un sous-titre à un contenu multimédia de type vidéo, etc.
Les balises et leurs attributs
Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les balises se repèrent facilement. Elles sont entourées de "chevrons", c'est-à-dire des symboles < et >, comme ceci : <balise>
On distingue deux types de balises : les balises en paires et les balises orphelines.
Définition : Les balises en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :
<titre>PPE2 CONCEPTION SITE WEB</titre>
Définition : Les balises orphelines
Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur "Insère une image ici". Une balise orpheline s'écrit comme ceci : <image />
Définition : Les attributs
Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci : <balise attribut="valeur">
A quoi ça sert ? Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher : <image nom="photo.jpg" />
Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Voltaire :
Exemple :
<citation auteur="Voltaire">
Il faut s'instruire dans la gaieté. Le savoir triste est un savoir mort.
</citation>
Structure de base d'une page HTML5
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
Les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l'on ouvre, et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture.
Exemple :
<html> <body> </body> </html> : correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.
<html> <body> </html> </body>: incorrect, les balises s'entremêlent.
Définition : <!DOCTYPE html>
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. Elle commence par un point d'exclamation.
Définition : <html> </html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page ; la balise fermante </html> se trouve tout à la fin du code !
Définition : L'en-tête <head>
L'en-tête <head> : cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que l'en-tête contient ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !
Définition : le corps <body>
Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.
Définition : <metacharset="utf-8" />
Cette balise indique l'encodage utilisé dans votre fichier .html. L'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, symboles arabes, etc.).
Définition : <title>
C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit avoir un titre qui décrit ce qu'elle contient. Il est conseillé que le titre soit assez court (moins de 100 caractères en général).Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'affiche dans l'onglet.
Définition : Commentaire HTML
Un commentaire est une balise HTML avec une forme bien spéciale :
Code : HTML <!-- Ceci est un commentaire -->
Vous pouvez le mettre où vous voulez au sein de votre code source : il n'a aucun impact sur votre page, mais vous pouvez vous en servir pour vous aider à vous repérer dans votre code source.
Lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le langage HTML propose justement la balise <p> pour délimiter les paragraphes.
<p> signifie "Début du paragraphe"
</p> signifie "Fin du paragraphe"
Le contenu du site web est entre les balises <body></body>. Il nous suffit donc de mettre notre paragraphe entre ces deux balises, et nous aurons enfin notre première vraie page web avec du texte.
<br /> est une balise orpheline qui sert juste à aller à la ligne. Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe.
Les titres
En HTML , on a le droit d'utiliser 6 niveaux de titres différents :
<h1> </h1> : En général, on s'en sert pour afficher le titre de la page.
<h2> </h2> : signifie "titre important".
<h3> </h3> : c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez).
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre pas important du tout
La balise <title> affiche le titre de la page dans la barre de titre du navigateur.
Les titres <h1> servent à créer des titres qui seront affichés dans la page web.
Les balises de mise en valeur
Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir. HTML vous propose différents moyens de mettre en valeur le texte de votre page :
<em> permet de mettre le texte en italique
<strong> permet de mettre le texte en gras
<mark> perme de surligner le texte
<center> permet de centrer le texte
Deux types de balises :Les listes à puces nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations. Nous allons découvrir ici deux types de listes à puces :
Les listes non ordonnées <ul> </ul>
Les listes ordonnées <ol> </ol>
Chaque élément de la liste est entouré par les balises <li> </li>
Définition : Lien hypertexte <a>
La balise <a> permet de créer un lien vers un site ou une page
Pour créer un lien vers un site, exemple google.fr : <a href="http://www.google.fr">Site de google</a>
Pour créer un lien vers une page exo4ppe2.html située dans le même répertoire que notre page courante : <a href="exo4ppe2">page exo4 </a>
Pour créer un lien vers une page exo8ppe2.html située dans un dossier qui se trouve "avant" dans l'arborescence, <ahref="../exo8ppe2">page exo8 </a>
Pour télécharger un fichier : <p><a href="facture.java">Télécharger le fichier</a></p>
Envoyer un mail : <a href="mailto:sghaddar@aol.com">Envoyez-moi un e-mail </a>
Définition : une ancre
Une ancre(label) est une sorte de point de repère que vous pouvez mettre dans vos pages HTML, il peut être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère.
Ça peut être n'importe quelle balise, un titre par exemple. Utilisez l'attribut id pour donner un nom à l'ancre. Cela servira ensuite à faire un lien vers cette ancre.
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.
Lien vers une ancre située dans une autre page :
Pour aller à l'ancre OpenErp situé dans le fichier exo9ppe2.html :
<a href= « exo9ppe2.html#OpenErp »>
Trois types d'images peuvent être utilisés dans les sites Web nous citons :
JPEG
GIF
PNG
Définition : Le JPEG
Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire la taille des photos, qui peuvent comporter plus de 16 millions de couleurs différentes. Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg.
Définition : Le PNG
Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire "à tout ce qui n'est pas une photo"). Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image. PNG 8 bits : 256 couleurs
PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG)
Définition : Le GIF
C'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images sont le plus souvent plus légères. Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs).Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé.
La fameuse balise qui va nous permettre d'insérer une image est la balise <img /> !
C'est une balise de type orpheline cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici.
En effet, nous n'avons pas besoin de délimiter une portion de texte, nous voulons juste insérer une image à un endroit précis.
La balise doit être accompagnée de 2 attributs obligatoires :
src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin en absolu (ex: www.site.com/fleur.png), soit mettre le chemin en relatif .
Ainsi, si votre image est dans un sous-dossier images vous devrez taper : src="images/fleur.png
alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image.
Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (ça arrive), ou sur les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour la fleur, on mettrait par exemple : alt="Une fleur".
Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>)
Exemple :
<p>
<img src="images/maphoto.jpg" alt=" Ma Photo" />
</p>
Les figures (balise HTML5)
Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page. Les figures peuvent être de différents types :
Images
Codes source
Citations
...
Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images, mais contrairement à ce qu'on pourrait croire, les figures ne sont pas forcément des images : un code source aussi illustre le texte.
En HTML5, on dispose de la balise <figure>. Voici comment on pourrait l'utiliser :
Exemple :
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
</figure>
Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende, utilisez la balise <figcaption> à l'intérieur de la balise <figure>, comme ceci :
Exemple :
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>
Un tableau simple
La première balise à connaître est<table> </table>. C'est cette balise qui permet d'indiquer le début et la fin d'un tableau.
<tr> </tr>: indique le début et la fin d'une ligne du tableau.
<td> </td>: indique le début et la fin du contenu d'une cellule.
Créer un formulaire
Lorsqu'il vous prend subitement l'envie d'insérer un formulaire dans votre page HTML, vous devez pour commencer écrire une balise<form> </form>.
C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.
Les zones de saisie basiques :
La zone de texte monoligne : comme son nom l'indique, on ne peut y écrire qu'une seule ligne. Elle sert à saisir des textes courts, par exemple un pseudo.
La zone de texte multiligne : cette zone de texte permet d'écrire une quantité importante de texte sur plusieurs lignes, par exemple une dissertation sur l'utilité du HTML dans le développement des pays d'Asie du Sud-Est (ce n'est qu'une suggestion hein...).
Pour créer une zone de texte à une ligne, on doit écrire :
<input type="text" />
Essayons donc de créer un formulaire très basique avec notre champ de texte :
Exemple :
<form method="post" action="traitement.php">
<p><input type="text" name="pseudo" /></p>
</form>
Vous pouvez facilement faire en sorte que la zone de texte se comporte comme une « zone de mot de passe », c'est-à-dire une zone où on ne voit pas à l'écran les caractères saisis. Pour créer ce type de zone de saisie, utilisez l'attribut type="password".
Pour créer un bouton d'envoi on écrira donc par exemple :
Exemple :
<input type="submit" value="Envoyer" />
Insertion d'un élément audio
En théorie, il suffit d'une simple balise pour jouer un son sur notre page :
<audio src="musique.mp3"></audio>
Ajoutons les contrôles et ce sera déjà mieux !
<audio src="hype_home.mp3" controls></audio>
Il suffit d'une simple balise<video>pour insérer une vidéo dans la page :
<video src="sintel.webm"></video>
Voici un code un peu plus complet :
Exemple :
<video src="sintel.webm" controls poster="sintel.jpg" width="600"></video>
Exemple :
Voici le premier exemple de création de site web en vidéo :
Exemple :
Voici le deuxième exemple de création de site web en vidéo :
Exemple :
Voici le troisième exemple de création de site web en vidéo :