Annexe HTML5 V
Eléments de 1er niveau Conteneurs
<html> Représente la racine d'un document HTML. <span> Regroupe des éléments dans un bloc de contenu.
<head> Conteneur de métadonnées placé entre la balise <div> Grouper plusieurs éléments Html de type block.
<html> et la balise <body>. Définit un cadre en ligne.
<body> Définit le corps du document. <iframe>
Attributs : src, name.
Eléments -tête
<link> Définit la relation entre le document actuel et une Listes
ressource externe. <ul> Définit une liste à puces.
Attributs : href, rel , type Définit une liste ordonnée.
<ol>
<meta> Définit les métadonnées du document. Attributs : reversed, type, start.
Attributs : charset, name, content. <li> Définit un élément dans une liste.
<script> Intègre un script côté client (JavaScript).
Attributs : src, type.
<style> Définit les informations de style (CSS) pour un Tableau
document. <table> Définit un tableau.
Attributs : type, media.
< thead>
<title> Définit le titre du document.
<tbody>
Eléments < tfoot> tableau.
<header> Conteneur pour le <caption> Définit une légende de tableau.
ensemble de liens de navigation. <tr> Définit une ligne dans un tableau.
<nav> Définit un ensemble de liens de navigation. <th> Définit une cellule d'en-tête dans un tableau.
<footer> Définit un pied de page pour un document ou une <td> Définit une cellule dans un tableau.
section.
<section> Définit une section dans un document.
<article> Spécifie un contenu indépendant et autonome. Evènements
<aside> Définit un contenu en dehors du contenu principal. onblur Se déclenche au moment où l'élément perd le focus.
Souvent placé sous forme de barre latérale. onclick Se déclenche lors sur élément.
<main> Définit le contenu principal d'un document.
onfocus Se déclenche au moment où l'élément obtient le
focus.
Eléments de structuration de texte et média oninput Se déclenche dès que la valeur d'un élément a
<cite> changé.
<p> Définit un paragraphe. onload Se déclenche lorsque la page est complètement
chargée.
<source> Spécifie plusieurs ressources multimédias pour les
onmouseover Se déclenche lorsque le pointeur de la souris
éléments multimédias.
Attributs : src, type, media.
onmouseout Se déclenche lorsque le pointeur de la souris sort
<hn> Définit un titre de niveau n (de 1 à 6).
Définit une rupture thématique sous forme de ligne onplay
<hr>
horizontale. audio/vidéo commence.
Intègre une image. onpause Se déclenche lorsqu un élément audio/vidéo est
<img>
Attributs : src, alt. mis en pause.
Spécifie un conteneur autonome qui peut contenir onsubmit Se déclenche lorsqu'un formulaire est soumis.
<figure>
divers éléments.
onchange
<figcaption> Définit une légende pour un élément <figure>.
modifiée.
Intégrer du contenu sonore dans un document. onkeydown se déclenche lorsqu'une touche du clavier est
<audio>
Attributs : controls, src. pressée.
Intègre du contenu vidéo dans un document. onkeyup Se déclenche lorsqu'une touche est relâchée.
<video>
Attributs : controls, src.
href.
<a>
Attributs : href, target.
<br> Définit un retour à la ligne. Attributs globaux
Définit les coordonnées de l'auteur/propriétaire d'un class Spécifie un nom de classe pour un élément.
<address>
document ou d'un article. hidden Renseigne la visibilité d'un élément.
<output> id Spécifie un identifiant unique pour un élément HTML.
Définit le texte qui doit être marqué ou mis en Spécifie la langue du contenu de l'élément.
<mark> lang
surbrillance.
Spécifie des détails supplémentaires que style Spécifie un style en ligne.
<details> peut ouvrir et fermer à la demande. Spécifie des informations supplémentaires sur un
title
Attribut : open. élément.
<summary> Définit un en-tête visible pour l'élément <details>.
V2025
Eléments de formulaire
Attribut Valeurs possibles
Crée un formulaire HTML. action
<form>
method "get" , "post"
target "_self "_blank", "_parent", "_top "iframeName"
Regroupe des éléments liés dans
<fieldset>
un formulaire.
Définit une légende pour
<legend>
l'élément <fieldset>.
Définit un libellé pour un élément
<label>
graphique.
Attributs
Types d'élément Attributs génériques
spécifiques
button, reset, submit name, value, disabled
name, value, placeholder,
text, email, tel
readonly, required, disabled, list
<input> Définit un champ de saisie. name, value, placeholder,
password
readonly, required, disabled
name, value, readonly, required,
number, range min, max
disabled
date, time name, value, required, disabled min, max
checkbox, radio name, value, required, disabled Checked
Définit une zone de saisie de texte Attributs : name , cols, rows, readonly , required , disabled , placeholder,
<textarea> multilignes. maxlength.
<select> Définit une liste déroulante.
Spécifie une liste d'options
<datalist> prédéfinies connectée à un
élément <input>.
Définit une option dans une liste Attribut : selected
<option>
de sélection.
Annexe CSS3 V2025
Sélecteurs Propriétés des tableaux
* Sélectionne tous les éléments. Définit la façon de disposer les cellules, lignes et
table-layout
element Sélectionne tous les éléments de type element. colonnes tableau.
Cible un élément en fonction de la valeur de border-collapse Définit si les bordures des cellules sont
#id
son attribut id. fusionnées ou séparées (separate ; collapse).
Cible les éléments en fonction de la valeur de
.class Propriétés des boîtes
leur attributs class.
width Définit la largeur d'un élément.
element[attr] attr.
height Définit la hauteur d'un élément.
Cible les éléments en fonction de la valeur de
element[attr=valeur] Spécifie le type de la méthode de positionnement
attr.
Cible tous les éléments de type element en position utilisée pour un élément (absolute ; fixed ;
[Link] relative ; static ; sticky).
fonction de la valeur de leur attributs class.
a:link Cible tous les liens non visités. Place/Fait flotter un élément dans un conteneur
float
a:visited Cible tous liens visités. (left ; right ; none).
Propriété abrégée qui définit la marge intérieure
a:hover padding
survole avec le pointeur de la souris.
a:active Cible tous les liens activés. margin Définit les marges d'un élément.
box-shadow
Remarque: pour grouper plusieurs sélecteurs dans une règle, il suffit de les
lister en les séparant par des virgules « , ».
Spécifie le comportement d'affichage d'un élément
display
(inline ; block ; inline-block).
Propriétés de mise en forme du texte Spécifie la position verticale, par rapport au haut,
top
Spécifie les noms de polices possibles par ordre de d'un élément positionné.
font-family
préférence. Spécifie la position verticale, par rapport au bas,
bottom
d'un élément positionné.
font-weight
doivent être affichés (bold ; bolder ; lighter). Spécifie la position horizontale, par rapport à la
left
font-style Spécifie le style d'un texte (italic). gauche, d'un élément positionné.
font-size Spécifie la taille d'une police. Spécifie la position horizontale, par rapport à la
right
Super-propriété de font. Combine font-family, font- droite, d'un élément positionné.
font Spécifie le comportement du contenu
weight, font-style, font-size.
left ; overflow déborde de la boîte d'un élément (visible ;
text-align hidden ; clip ; scroll ; auto).
center ; right ; justify).
text-shadow Définit une ombre au texte. opacity Définit le niveau de transparence.
Spécifie la façon de Propriétés des bordures
text-
texte en majuscules ou en minuscules (uppercase ; border-color Définit la couleur des bordures d'un élément.
transform
lowercase ; capitalize). border-style Définit le style des bordures d'un élément.
color Spécifie la couleur du texte. border-radius
Propriétés des listes Définit la largeur des bordures d'un élément
border-width
Définit le type de marqueur éléments de liste (medium ; thin ; thick ; valeur en px).
list-style-type Super-propriété de bordure. Combine border-
(circle; square ; upper-roman ; lower-alpha). border
Spécifie la position des marqueurs d'éléments color, border-style, border-width, border-radius.
list-style-position
outside ; inside). Transition
Spécifie une image comme marqueur d'éléments Spécifie le délai nécessaire avant que la
list-style-image transition-delay
de liste. transition commence.
Super-propriété de liste. Combine list-style-type, transition-duration Spécifie la durée de la transition.
list-style
list-style-position, list-style-image. Spécifie les propriétés CSS sur lesquelles
transition-property
-plan l'effet de transition sera appliqué.
background-color Définit la couleur d'arrière-plan d'un élément. Super-propriété de transition. Combine
transition transition-property, transition-duration et
Définit une image d'arrière-plan pour un
background-image transition-delay.
élément.
Définit la façon dont une image arrière-plan est Animation
background-repeat
répétée (repeat ; repeat-x ; repeat-y). @keyframes: Spécifie les états clés de l'animation.
background-size -plan. animation-name Spécifie le nom de l'animation.
Super- -plan. Combine Spécifie le délai nécessaire avant que
animation-delay
background-color, background-image, l .
background animation-duration Spécifie .
background-repeat
background-size. animation-iteration- Spécifie le nombre de répétition de
count l'animation.
Transformation animation-direction définit la direction de l'animation
Applique un effet de transformation 2D ou 3D à un Super-propriété de . Combine
transform
élément (rotate(), skew(), scale(), translate()). animation-name , animation-duration,
animation
Propriétés des images animation-delay, animation-iteration-count
Définit des filtres sur un élément (blur() ; grayscale() ; et animation-direction.
filter
invert()).
Important : pour exprimer les mesures des dimensions, se limiter
aux unités (pixel et %).
Annexe JS V 2025
Opérateurs logiques
&& ET abs(x) Retourne la valeur absolue. length Propriété qui
|| OU sqrt(x) Retourne la racine carrée. représente le
! NON round(x) s
trunc(x) dans un tableau.
nombre en retirant sa partie décimale. Pour créer un tableau, utiliser les
Opérateurs de comparaison
random() Retourne un réel aléatoire dans [0, 1[. littéraux de tableau [ ].
== Egal
!= Différent
> Supérieur à Les chaînes de caractères
> Supérieur ou égal à + Opérateur de concaténation.
< Inférieur [Link] Propriété qui retourne la longueur de ch.
<= Inférieur ou égal à [Link](ch [,p]) Retourne la position de la 1ère occurrence de
ch1dans ch, en effectuant la recherche à partir de la
Opérateurs arithmétiques position p (sinon -1).
+ Addition [Link](ch1 [,p]) Retourne la position de la dernière occurrence de
- Soustraction ch1dans ch à partir de la position p.
* Multiplication [Link](d, f) Retourne une sous-chaîne de ch de la position d à
/ Division la position f (non incluse).
% Reste de la division [Link](ch1, ch2) Retourne une chaîne dans laquelle la 1ère
euclidienne occurrence de ch1 dans ch est remplacée par ch2.
[Link]() Convertit tous les caractères de ch en minuscules.
Méthodes pour afficher une sortie*
alert() Affiche un message [Link]() Convertit tous les caractères de ch en majuscules.
dans une boîte de [Link]() Supprime tous les espaces existants au début et à la
dialogue. fin de ch.
[Link]() Affiche directement [Link] Retourne une chaîne formée par la concaténation
dans le document des résultats de conversion des codes ASCII passés
HTML. en paramètres.
*Pour afficher/modifier un contenu ch est un objet String
dynamique, on peut utiliser la propriété
innerHTML élément HTML.
new Date() Retourne la date courante.
Méthode pour saisir une entrée
prompt() Affiche une boîte de dialogue new Date(ch) Retourne un objet Date à partir d'une chaîne de caractères ch
avec une zone de saisie. représentant une date.
[Link]() Retourne le jour du mois (entre 1 et 31).
Fonctions/Méthodes JS [Link]() Retourne le numéro du mois (entre 1 et 11).
isNaN(ch) Retourne true si
[Link]() chiffres.
pas convertible en [Link]() Retourne une chaîne de caractères représentant la date d.
un nombre, sinon d est un objet Date.
retourne false.
Number(ch) Convertit une chaîne
ch en un nombre*. Modification du contenu, des attributs ou des styles des éléments HTML
parseFloat(ch) Convertit une chaîne [Link] = valeur
ch en un réel.
parseInt(ch [,b]) Convertit une chaîne Se limiter à la manipulation des attributs value, checked, disabled, readonly, src, muted.
ch en un entier [Link]été =
exprimé dans la base valeur
b. Se limiter à la manipulation des propriétés color, background, border, font, width, height.
String(a) Convertit la valeur a
en une chaîne. element.méthode() Effectue une action sur un élément HTML.
* possible, la Se limiter à la manipulation des méthodes play() , pause().
fonction retourne NaN.
Pour une liste déroulante (<select>), utiliser la propriété selectedIndex pour récupérer l'indice
de l'option sélectionnée.
Méthodes pour sélectionner des
éléments HTML
[Link]()
permet de sélectionner un
élément unique en fonction de
son identifiant.
[Link]()
permet de sélectionner tous les
éléments ayant le même nom.
V2025
Annexe SQL V2025
Type de données
INT Entier
DECIMAL Réel NOT NULL Interdit une valeur nulle.
CHAR Chaîne de caractères de longueur fixe. DEFAULT Attribut une valeur par défaut.
Chaîne de caractères de longueur variable dont la Spécifie que les valeurs de la colonne doivent
VARCHAR CHECK
longueur maximale fixée. respecter une condition.
TEXT Chaîne de caractères de longueur variable. PRIMARY KEY Définit une clé primaire.
DATE Date. UNIQUE
TIME Temps. FOREIGN KEY Définit une clé étrangère.
DATETIME Date et Heure.
REFERENCES
table.
ON UPDATE Met à jour la clé étrangère en cas de mise à jour
Opérateurs de comparaison CASCADE de la clé primaire.
= Égale à Supprime automatiquement tous les
<> Différent de ON DELETE enregistrements de la table fille suite à la
> Supérieur à CASCADE
< Inférieur à de la table mère.
>= Supérieur ou égale à
<= Inférieur ou égale à Définition des données
IN Dans CREATE DATABASE nom Crée une base de données.
BETWEEN Supprime une base de
DROP DATABASE nom
LIKE Recherche de motif/valeur. données.
IS Filtre les résultats contenant la valeur NULL. CREATE TABLE table1 (
colonne1 type [contrainte],
Crée une table.
Opérateurs logiques
AND ET
ALTER TABLE table1 Ajoute une colonne à une
OR OU
ADD colonne type [contrainte] table.
NOT NON
ALTER TABLE table1
Supprime une colonne.
DROP colonne
Fonctions définies sur le type date ALTER TABLE table1
DATE() ALTER* colonne type colonne.
contenant une valeur au format DATE ou ALTER TABLE table1
DATETIME. RENAME** nom1 TO nom2 colonne.
DAY ( ) Retourne le jour. ALTER TABLE table1 Ajoute une contrainte sur
MONTH ( ) Retourne le mois. ADD CONSTRAINT [nom] contrainte
YEAR ( ) ALTER TABLE table1
Supprime une contrainte.
NOW ( ) DROP CONSTRAINT nom
ADDDATE() Ajoute un nombre de jours ou un intervalle de ALTER TABLE table1 Active/Désactive une
temps à une date. ENABLE/ DISABLE CONSTRAINT nom contrainte.
DATEDIFF() Retourne la différence entre deux dates en jours. DROP TABLE table1 Supprime une table.
* on peut utiliser MODIFY au lieu de ALTER.
** on peut utiliser CHANGE au lieu de RENAME.
AVG ( ) Retourne la moyenne.
COUNT ( ) Retourne le nombre
MAX ( ) Retourne le maximum.
MIN ( ) Retourne le minimum.
SUM ( ) Retourne la somme.
Manipulation des données
SELECT [DISTINCT] expression [, col, ... ou *] [[AS] alias] Spécification des colonnes du résultat.
FROM table1 [[AS] alias] [, table2, ...] Spécification des tables
[WHERE condition] Condition
[GROUP BY critère] Organisation du résultat en groupes.
[HAVING condition]
[ORDER BY expression [ASC/DESC]] Tri du résultat.
INSERT INTO table [(liste colonnes)]
Insertion des données dans une table.
VALUES (liste valeurs)
UPDATE table1
SET colonne = expression
[WHERE condition]
DELETE FROM table1
[WHERE condition]