Résumé

Résumé du HTML 5

Balises en paires

balise d’ouverture + texte + balise de fermeture

<title> Ceci est le titre de ma 1ère page Web </title> Balises orphelines

Ne contiennent pas de texte, n’ont pas de balise de fermeture
Utilisées pour insérer un élément à un endroit précis de la page

Exemple: Les balises images, <img> Balises avec attributs

Une balise peut avoir des attributs avec ou sans valeurs

<img src="images/blocnotes.png" alt="Bloc-Notes"> Structure de base HTML <!DOCTYPE html> <html> <head> <title>Le titre de ma page</title> </head> <body> </body> </html> Balises sémantiques

<article> : pour indiquer que c’est l’article d’un blog ou d’un journal
<section> : section de contenu – utilisé si l’on a plusieurs sections d’un document.
<nav> : liens de navigation
<header> : en-tête de la page
<footer> : pied de page
<aside> : lien indirect avec le sujet principal de la page

Balises non-sémantiques

<div> </div> : bloc de texte – généralement utilisé pour découper un document en bloc.
<span> </span> : la balise est un conteneur en ligne.

Balises titre

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> : h1 étant le niveau le titre le plus haut et h6 le sous-titre le plus bas

Balises de texte

<p></p> : paragraphe
<br> : saut de ligne
<hr> : ligne horizontale

Les commentaires

<!– Ceci est un commentaire -->

Les citations

<q> : permet d'insérer dans un texte une courte citation sans créer un nouveau bloc de contenu.
<blockquote> : permet de définir un bloc de citation relativement long.
<cite> : permet de spécifier la source d'une citation.

Balises de formatage

<u> - Texte souligné
<b> - Texte en gras
<strong> - Texte important
<i> - Texte en italique
<em> - Mettre l'accent sur le texte (emphase)
<mark> - Texte marqué
<small> - Texte plus petit
<del> - Texte supprimé
<ins> - Texte inséré
<sub> - Texte d'indice (sous la ligne de base et généralement plus petit)
<sup> - Texte en exposant

Liste non-ordonnée

<ul></ul> : : indique que c’est une liste non ordonnée
<li></li>: définit les différents élements de la liste

Liste ordonnée

<ol></ol> : : : indique que c’est une liste ordonnée
<li></li>: définit les différents élements de la liste

Ancre

Lien vers une page Web

<a href="https://www.google.ca">Google</a> Tableau

Tableau se construit ligne par ligne
Chaque ligne doit contenir la liste des cellules
<table></table> : indique que ce qui suit est un tableau
<caption></caption> : indique titre du tableau
<tr></tr> : indique que c’est une ligne du tableau
<th></th> : indique que c’est l’en-tête du tableau (1ère ligne du tableau)
<td></td> : indique que c’est une cellule/case du tableau

Tableau structuré

Division en 3 parties: en-tête, corps et pied du tableau
<thead></thead> : indique que c’est l’en-tête du tableau
<tbody></tbody>: : indique que c’est le corps tableau
<tfoot></tfoot> : indique que c’est le pied du tableau
<th></th> : indique que c’est l’en-tête du tableau (1ère ligne du tableau)
<td></td> : indique que c’est une cellule/case du tableau

Fusion de cellules

Fusion Horizontale : fusion de colonnes en utilisant colspan
Fusion Verticale; fusion de lignes en utilisant rowspan

Images

<img> : indique que l’on va insérer une image
src : indique source de l’image (i.e. où se trouve l’image)
alt : indique un texte alternatif pour décrire l’image
height et width : hauteur et largeur de l’image

Légende de média

La balise <figure> permet d'associer un élément (image, vidéo, diagramme, etc.)
La légende de la figure utilise la balise <figcaption>

Audio

<audio></audio> : indique l’insertion d’un élément de type audio
Attribut de base : src : source de l’audio
controls : indique qu’il faut la barre de défilement + boutons Lecture & Pause
loop : indique de jouer le morceau audio en boucle
autoplay : indique que le morceau audio démarrera dès le début

Vidéo

<video></video> : indique l’insertion d’un élément de type video
Attribut de base : src : source de la vidéo
poster : indique l’image à afficher en attendant que la video soit chargée
controls : indique qu’il faut la barre de défilement + boutons Lecture & Pause
width : indique la largeur du lecteur vidéo si l’on veut la modifier
height : indique la hauteur du lecteur vidéo si l’on veut la modifier
loop : indique de jouer le morceau audio en boucle
autoplay : indique que le morceau audio démarrera dès le début
muted : indique au navigateur de jouer la vidéo en mode silencieux
playsinline : spécifie de jouer la vidéo dans son cadre d’origine

Formulaire

Balise de base pour création d’un formulaire

<form></form> : indique que l’on va insérer un formulaire

Attributs de base

method : indique comment envoyer les informations

GET (par défaut) stock les informations du formulaire dans l'URL après le symbole ?.
POST envois les informations du formulaire dans la requête soumise à la page.

action : indique l’adresse de la page ou du programme qui va traiter les informations.

Input text

<input> : indique que l’on va créer une zone de texte
<label></label> : indique le libellé de la zone de texte

Attributs pour zone de texte

type : indique le type des informations saisies
name : nom de la zone de texte
id : identifiant de la zone de texte pour lier le label à la zone de texte
for : aura la même valeur que id de la zone de texte pour lier le label
readonly : champ en lecture seule
required : le champ est requis
minlength & maxlength : nombre limite de caractères
value : valeur par défaut si l’on veut mettre une valeur initiale
placeholder : explication/exemple concernant le contenu du champ

<div> <label for="pays-residence">Pays de résidence</label><br> <input type="text" id="pays-residence"> </div>

Input submit

Génère un bouton permettant de soumettre un formulaire.
<input type="submit" value="Soumettre">

Checkbox

<label> <input type="checkbox" name="olives"> Olives </label><br> <label>

Attributs pour les checkbox

checked : permet de spécifier si l'option devrait être cochée ou non
name : nom de la zone de texte
disabled : permet d'afficher en lecture seule une boite à cochée
value : valeur par défaut si l’on veut mettre une valeur initiale

Radio

<label> <input type="radio" name="pizza" value="vege"> Végétarienne</label><br> <label>

Attributs pour les Radios

checked : permet de spécifier si l'option devrait être cochée ou non
name : nom de la zone de texte
disabled : permet d'afficher en lecture seule une boite à cochée
value : valeur par défaut si l’on veut mettre une valeur initiale

Select

Attributs pour les select

multiple : permet la sélection de plusieurs options.
name : nom de la zone de texte
disabled : permet d'afficher en lecture seule une boite à cochée
value : valeur par défaut si l’on veut mettre une valeur initiale
selected : permet de spécifier si l'option devrait être sélectionnée.

Textarea

Attributs pour les textarea

cols : définit la largeur de base du textarea.
rows : définit la hauteur de base du textarea.
type : indique le type des informations saisies
name : nom de la zone de texte
id : identifiant de la zone de texte pour lier le label à la zone de texte
for : aura la même valeur que id de la zone de texte pour lier le label
readonly : champ en lecture seule
required : le champ est requis
minlength & maxlength : nombre limite de caractères
value : valeur par défaut si l’on veut mettre une valeur initiale
placeholder : explication/exemple concernant le contenu du champ

Number

Attributs pour les number

min & max : permettent de spécifier un nombre minimal et maximal à respecter.
name : nom de la zone de texte
disabled : permet d'afficher en lecture seule le champ number
step : définit le saut entre chaque valeur.

Range

Attributs pour les range

min & max : permettent de spécifier un nombre minimal et maximal à respecter.
name : nom de la zone de texte
disabled : permet d'afficher en lecture seule un widget range
step : définit le saut entre chaque valeur.

Password

Email

Tel

Attributs pour les number

inputmode="decimal" : affichent un pavé numérique agrémenté des symboles +*# sur les appareils mobile afin de simplifier la vie de l'usager.
disabled : permet d'afficher en lecture seule le champ de téléphone

Search

Date

Attributs pour les dates

min & max : permettent de spécifier une date minimale et maximale à respecter.
disabled : permet d'afficher en lecture seule un widget range

Time

Attributs pour time

min & max : permettent de spécifier une heure minimale et maximale à respecter.
disabled : permet d'afficher en lecture seule l'outil de sélection d'heure.

Color

Attributs pour color

name : nom de référence lorsque le formulaire est soumis.
value : code de la couleur par défaut.
disabled :permet d'afficher en lecture seule l'outil de sélection de couleur.