ANNEXE HTML 5

Rôle
Balise
Les éléments de l’entête
<meta name="viewport" content="width=device- La fenêtre d'affichage varie en fonction de l'appareil et sera
width, initial-scale=1.0"> plus petite sur un téléphone mobile que sur un écran
d'ordinateur.
<meta charset="utf-8"> Spécifie le codage des caractères pour le document
HTML.Qui couvre presque tous les caractères et symboles
du monde !
<link rel=”stylesheet” href=”style.css”> Permet de relier avec la page CSS
<script></<script> Intègre du code JavaScript
<style></style> Intègre du code CSS
<title> </title> Contient le titre de la page
Mise en forme du texte
<p> </p> Début et fin du paragraphe

<br> Saut de ligne

<hr> Dessiner un Trait

<h1> </h1> Créer des titres (taille de 1 à 6)

.
.
.
<h6> </h6>
<mark> </mark> Mettre le texte en valeur : coloré en jaune

<ul> <ul <ul Listes non ordonnées ou listes à puces

<li> </li> type="square"> type="circle"> ▪
</ul> <li> </li> <li> </li> ▪
</ul> </ul>
<ol> <ol type="A" > <ol type="I" > Liste ordonnée
<li> </li> <li> </li> <li> </li> 1. A.
</ol> </ol> </ol> 2. B.
3. C.
Avec les attributs : type, reversed , start.
Eléments de structurations
<iframe title="google" width="300" Représente un contexte de navigation imbriqué qui permet
height="200" src="http://www.google.fr"> en fait d'obtenir une page HTML intégrée dans la page
</iframe> courante.
Extrait de l’œuvre <cite> le père Goriot </cite> Ajout du titre d’une œuvre, d’un film etc…
Résultat : Extrait de l’œuvre le père Goriot
<details> Spécifie des détails supplémentaires que l’utilisateur peut
<summary>Copyright 1999-2011.</summary> ouvrir et fermer à la demande.
<p>Ces images sont sous copyright (...)</p> Avec Attribut : open si on veut que les détails soient
</details> ouverts lors de chargement
Résultat :

1
<iframe title="google" width="300" Représente un contexte de navigation imbriqué qui permet
height="200" src="http://www.google.fr"> en fait d'obtenir une page HTML intégrée dans la page
</iframe> courante.
Groupement
<div id="calque"> La balise <div> est utilisée pour regrouper des éléments
<h3>Titre ou en-tête</h3> sous forme de bloc et ainsi pouvoir les formater en CSS.
<p>Ceci est un paragraphe. </p> (balise de type block).
</div>
<span> Ceci est un <span> paragraphe. </span></p> La balise <span> est utilisée pour pouvoir placer une
partie d’un texte ou d’un paragraphe et ainsi pouvoir les
formater en CSS. (balise de type inline).
Tableau
<table> <table>…</table> La définition d'un tableau
<thead> <tr>…</tr> La définition d'une ligne
<tr> <th>Month</th> <th>Savings</th> </tr> <th>…</th> l'en-tête du tableau
</thead> <td>…</td> La définition d'une cellule
<caption>titre du tableau
<tbody>
< thead> Définit l’entête d’un tableau.
<tr> <td>January</td> <td>$100</td> </tr> <tbody> Définit le corps d’un tableau.
<tr> <td>February</td> <td>$80</td> </tr> < tfoot> Définit le pied d’un tableau.
</tbody> -
<tfoot>
<tr> <td>Sum</td> <td>$180</td> </tr>
</tfoot>
</table>

Liens
Informations de contact
<address> indique des informations de contact pour une personne
<a href="mailto: SI@gmail.com"> SI@gmail.com </a> Résultat :
Anis@gmail.com
<a href="tel:21699777888">(+216)777888 </a> (+216) 99_777888
</address>
Liens externes
<a href ="adresse" title =" titre" Lien hypertexte pointant vers un document en spécifiant
target="_blank"> texte du lien </a> l'url.
Liens internes
La création d'un signet : Lien menant vers un emplacement au sein du document
<a name= "nom du signet "> texte </a>
La création du lien interne :
<a href= " #nom du signet "> texte </a>

Insertion de médias
<img src ="adresse" > Insertion d’une image
o src ="adresse" : définit l'adresse
o alt ="texte":l'info bulle sur l'image
<figure> Permet d’insérer une figure (figure) avec une légende
<img src="elephant.jpg" alt="Elephant at sunset"> (figcaption).
<figcaption>An elephant at sunset </figcaption>
</figure>

<audio controls="controls" > Permet d’insérer une séquence sonore.

2
<source src ="adresse">
</audio>
<video controls="controls" Permet d’insérer une séquence vidéo.
<source src ="adresse.mp4 "> Muted : Indique au lecteur de désactiver le son de la
</video > vidéo.

Attributs globaux
class : Spécifie un nom de classe pour un élément.
hidden : Renseigne la visibilité d'un élément.
id : Spécifie un identifiant unique pour un élément HTML.
lang : Spécifie la langue du contenu de l'élément.
style : Spécifie un style en ligne.
title :Spécifie des informations supplémentaires sur un élément.
Structures semantiques
<header> Conteneur pour le contenu d’introduction ou un ensemble de liens de navigation.
<nav> Définit un ensemble de liens de navigation.
<footer> Définit un pied de page pour un document ou une section.
<section> Définit une section dans un document.
<article> Spécifie un contenu indépendant et autonome.
<aside> Définit un contenu en dehors du contenu principal. Souvent placé sous forme de barre latérale.
<main> Définit le contenu principal d'un document.
Evènements
onblur :Se déclenche au moment où l'élément perd le focus.
onclick :Se déclenche lors d’un clic sur l’élément.
Onfocus :Se déclenche au moment où l'élément obtient le focus.
oninput :Se déclenche dès que la valeur d'un élément a changé.
Onload :Se déclenche lorsque la page est complètement chargée.
onmouseover :Se déclenche lorsque le pointeur de la souris survole l’élément.
onmouseout :Se déclenche lorsque le pointeur de la souris sort de l’élément.
onplay :Se déclenche lorsque la lecture d’un fichier audio/vidéo commence.
onpause :Se déclenche lorsqu’ un élément audio/vidéo est mis en pause.
onsubmit :Se déclenche lorsqu'un formulaire est soumis.
onchange :Se déclenche lorsque la valeur d’un élément est modifiée.
onkeydown :se déclenche lorsqu'une touche du clavier est pressée.
onkeyup Se déclenche lorsqu'une touche est relâchée.

Les formulaires

3
Type Résultat Aperçu
<input type= ″text ″> Un champ texte sur une seule ligne.

<input type= ″checkbox ″> Case à cocher

<input type= ″date ″> Champ permettant de choisir une
date
<input type= ″email ″> Champ permettant de saisir une
adresse email
<input type= ″number ″> Un contrôle qui permet de saisir un
nombre.
<input type= ″password ″> Un champ texte sur une seule ligne
dont la valeur est masqué.
<input type= ″radio ″> Bouton radio
<input type= ″range ″> Champs intervalle

<input type= ″tel ″> Un contrôle pour saisir un numéro

de téléphone.
<input type= ″time ″> Un contrôle qui permet de saisir
l’heure
<input type= ″url ″> Un champ permettant de saisir une
adresse URL.
<input type= ″button ″> Un bouton
<input type= ″reset Un bouton permettant de
réinitialiser le contenu du
formulaire.
<input type= ″submit ″> Un bouton permettant d’envoyer le
formulaire
<textarea>Avec les attributs : name , Zone de texte multiligne
cols, rows, readonly , required , disabled
, placeholder, maxlength.
<input type="text" list="gouv"> Permet de créer une liste avancée.
<datalist id="gouv">
<option> tunis 1</option>
<option> tunis 2</option>
<option> Ben Arous</option>
</datalist>
<select> Définit une liste déroulante
<option selected> tunis 1</option>
<option> tunis 2</option>
<option> Ben Arous</option>
</select>
<fieldset> <fieldset> est utilisé pour regrouper
<legend>Vos coordonnées </legend> les données associées dans un
<label>Civilité : </label> formulaire.
<input type="radio" name="cv" >M <legend> définit une légende pour
<input type="radio" name="cv"> Mme l'élément <fieldset>.
<input type="radio" name="cv">Mlle <label> Définit un libellé pour un
</fieldset> élément graphique

<FORM action= "" method="" Représente un formulaire

target="" >