Annexe HTML5
Eléments de 1er niveau
<html> Représente la racine d'un document HTML. Eléments de section
<head> Conteneur de métadonnées placé entre la balise <header Conteneur pour le contenu d’introduction ou un
<html> et la balise <body>. > ensemble de liens de navigation.
<body> Définit le corps du document. <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.
Eléments d’en-tête >
<link> Définit la relation entre le document actuel et une <article> Spécifie un contenu indépendant et autonome.
ressource externe. <aside> Définit un contenu en dehors du contenu principal.
<meta> Définit les métadonnées du document. Souvent placé sous forme de barre latérale.
<script Intègre un script côté client (JavaScript). <main> Définit le contenu principal d'un document.
>
<style> Définit les informations de style (CSS) pour un document. Eléments de structuration de texte et
<title> Définit le titre du document.
média
<cite> Définit le titre d'une œuvre.
Boite
<p> Définit un paragraphe.
<span> Regroupe des éléments dans un bloc de contenu.
<source> Spécifie plusieurs ressources multimédias
<div> Grouper plusieurs éléments Html de type block. pour les éléments multimédias.
<iframe Définit un cadre en ligne. <hn> Définit un titre de niveau n (de 1 à 6).
> <hr> Définit une rupture thématique sous forme de
ligne horizontale.
<img Intègre une image.
Tableau <figure> Spécifie un conteneur autonome qui peut
<table> Définit un tableau. contenir divers éléments.
<caption Définit une légende de tableau. <figcaption Définit une légende pour un élément <figure>.
> >
<tr> Définit une ligne dans un tableau. <audio> Intégrer du contenu sonore dans un document.
<th> Définit une cellule d'en-tête dans un tableau. <video> Intègre du contenu vidéo dans un document.
<td> Définit une cellule dans un tableau. <a> Définit un lien hypertexte via l’attribut href.
<br> Définit un retour à la ligne.
Formulaire <address> Définit les coordonnées de l'auteur/propriétaire
<form> Crée un formulaire HTML. d'un document ou d'un article.
<fieldset> Regroupe des éléments liés dans un formulaire. <mark> Définit le texte qui doit être marqué ou mis en
surbrillance.
<legend> Définit une légende pour l'élément <fieldset>.
<details> Spécifie des détails supplémentaires que
<label> Déf init un libellé pour un élément graphique. l’utilisateur
<input> Définit un champ de saisie de types : "button", peut ouvrir et fermer à la demande.
"time", "checkbox", "date", "email", "image", <summary> Définit un en-tête visible pour l'élément <details>.
"number", "password", "radio", "range", "reset",
"submit", "tel", "text", "url".
<textarea> Définit une zone de saisie de texte multi lignes. Listes
<select> Définit une liste déroulante. <ul> Définit une liste à puces.
<datalist> Spécifie une liste d'options prédéfinies connectée à <ol> Définit une liste ordonnée.
un élément <input>.
<li> Définit un élément dans une liste.
<option> Définit une option dans une liste de sélection.
Attributs globaux
Evènements
class Spécifie un nom de classe pour un élément.
onblur Se déclenche au moment où l'élément perd le
hidden Renseigne la visibilité d'un élément. focus.
id Spécifie un identifiant unique pour un élément HTML. Onclick Se déclenche lors d’un clic sur l’élément.
lang Spécifie la langue du contenu de l'élément. onfocus Se déclenche au moment où l'élément obtient
style Spécifie un style en ligne. le focus.
title Spécifie des informations supplémentaires sur un Oninput Se déclenche dès que la valeur d'un élément a
élément. 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.
onsubmit Se déclenche lorsqu'un formulaire est soumis.
www.digitalclass.tn 2022-2023
Annexe Java Script
Sélecteurs Propriétés des images
* Sélectionne tous les éléments. Définit des filtres sur un élément (blur() ;
filter
element1 Sélectionne tous les éléments de type element. grayscale() ; invert()).
Cible un élément en fonction de la valeur de son
#id
Attribut id. Propriétés des tableaux
Cible les éléments en fonction de la valeur de leur Définit la façon de disposer les cellules, lignes
.class table-layout
Attributs class. et colonnes d’un tableau.
Cible tous les éléments de type element en fonction de border-collapse Définit si les bordures des cellules sont
element.class
la valeur de leur attribut class. fusionnées ou séparées (separate ; collapse).
a:linkCible tous les liens non visités.
a:visited Cible tous liens visités. Propriétés des boîtes
Cible l’élément au moment où l’utilisateur le survole width Définit la largeur d'un élément.
a:hover
avec le pointeur de la souris. height Définit la hauteur d'un élément.
a:active Cible tous les liens activés. Spécifie le type de la méthode de
1Il est possible de cibler plusieurs element de différents types en les séparant par des position positionnement utilisée pour un élément
virgules «,». (absolute ; fixed ; relative ; static ; sticky).
Propriété abrégée qui définit la marge intérieure
Propriétés de mise en forme du texte padding
d’un élément des 4 cotés.
Spécifie les noms de polices possibles par ordre de margin Définit les marges d'un élément.
font-family
préférence. box-shadowAjo ute des ombres à la boîte d’un élément.
Spécifie la manière dont les caractères d’un texte Spécifie le comportement d'affichage d'un
font-weight display
doivent être affichés (bold ; bolder ; lighter). élément (inline ; block ; inline-block).
font-style Spécifie le style d'un texte (italic). Spécifie la position verticale, par rapport au
font-size Spécifie la taille d'une police. top
haut, d'un élément positionné.
Super-propriété de font. Combine font-family, font- Spécifie la position verticale, par rapport au
font bottom
weight, font-style, font-size. bas, d'un élément positionné.
Spécifie l'alignement horizontal d’un texte (left ; Spécifie la position horizontale, par rapport à la
text-align left
Center ; right ; justify). gauche, d'un élément positionné.
text-shadow Définit une ombre au texte. Spécifie la position horizontale, par rapport à la
Spécifie la façon de transformer les caractères d’un right
text- droite, d'un élément positionné.
texte en majuscules ou en minuscules (uppercase ; Spécifie le comportement du contenu lorsque il
transform
lowercase ; capitalize). overflow déborde de la boîte d'un élément (visible;
color Spécifie la couleur du texte. Hidden ; clip ; scroll ; auto).
opacity Définit le niveau de transparence.
Propriétés des listes
Propriétés des bordures
Définit le type de marqueur d’éléments de liste
list-style-type border-color Définit la couleur des bordures d'un élément.
(circle ; square ; upper-roman ; lower-alpha).
Spécifie la position des marqueurs d'éléments border-style Définit le style des bordures d'un élément.
list-style-position Définit le rayon des coins arrondis d’un
d’une liste à puces (outside ; inside). border-radius
Spécifie une image comme marqueur d'éléments élément.
list-style-image Définit la largeur des bordures d'un élément
de liste. border-width
Super-propriété de liste. Combine list-style-type, (medium ; thin ; thick ; valeur en px).
list-style Super-propriété de bordure. Combine border-
list-style-position, list-style-image. border
width, border-color, border-style.
border color, border-style, border-width, border-
Transformation
radius.
Propriétés de couleur et de fond Applique un effet de transformation 2D ou 3D à
background-color transform un élément (rotate() , skew() , scale(),
Définit la couleur d'arrière-plan d'un élément.
translate()).
Définit une image d'arrière-plan pour un
background-image
élément.
Définit la façon dont une image d’arrière-plan est Transition
background-repeat
répétée (repeat ; repeat-x ; repeat-y). Spécifie le délai nécessaire avant que la
Spécifie la taille d’une image d'arrière-plan. transition-delay
background-size transition commence.
Super-propriété d’arrière-plan. Combine transition-durationSp écifie la durée de la transition.
background-color, background-image, Spécifie les propriétés CSS sur lesquelles
background transition-property
background-repeat background-size. l'effet de transition sera appliqué.
Super-propriété de transition. Combine
transition transition-property, transition-duration et
transition-delay.
www.digitalclass.tn 2022-2023
Annexe Java Script
Opérateurs logiques Méthodes de l'objet Math (Math.) L'objet Date
&& ET Abs() Retourne la valeur absolue. Date() * Crée un nouvel objet Date.
OU Retourne la racine carrée d.getDate() Retourne le jour du mois
|| sqrt()
(entre 1 et 31).
NON
! Retourne l'entier le plus proche. d.getMonth() Retourne le numéro du
round()
mois.
Opérateurs de comparaison Retourne la troncature entière d.getFullYear() Retourne la valeur de
trunc()
== Egal à d'un nombre en retirant sa partie l'année sur 4 chiffres
Différent de décimale. d.setDate() Modifie le numéro du jour
!= Retourne un réel aléatoire dans du mois.
Supérieur à random()
> [0, 1[ d.setMonth() Modifie le numéro du
supérieur ou égal à mois.
>= Les chaînes de caractères d.setFullYear() Modifie la valeur de
inférieur à ch. length Propriété qui retourne la l'année
<
inférieur ou égal à longueur de ch. d.toString() Retourne une chaîne de
<= Retourne le caractère d'indice caractères représentant la
ch.charAt (p) date d.
p.
Méthodes pour afficher une sortie * * Pour obtenir un objet Date et non pas une
Retourne la position de la 1 ère
Alert() Affiche un message ch.indexOf (ch1, p) chaîne de caractères, il faut utiliser
occurrence de ch1 dans ch,
dans une boîte de l'opérateur new.
effectuant la recherche à partir
dialogue. d est un objet Date.
de la position p (sinon -1 ).
Affiche directement
document.write() Retourne la position de la
dans le document ch. lastIndexOf(ch1,p)
dernière occurrence de ch1
HTML.
dans ch à partir de la position
*Pour afficher un contenu p.
dynamiquement, on peut utiliser la
Retourne une sous-chaîne
propriété innerHTML d'un élément HTML ch.substr(p,l)
commençant à la position p et
Méthode pour saisir une entrée de longueur l.
prompt() Remplace, dans ch, toutes les
Affiche une boite de ch. replace (ch1,ch2)
occurrences de ch1 par ch2.
dialogue avec une zone de
saisie. Convertit tous les caractères de
ch. toLowerCase()
ch en minuscule.
Convertit tous les caractères de
Fonctions JS ch. toUpperCase()
ch en majuscule.
isNaN(a) Retourne vrai si Supprime tous les espaces
l'argument a n'est pas ch.trim()
existant au début et à la fin de
un nombre, sinon elle ch.
retourne faux.
Retourne une chaîne formée
Convertit une chaîne ch String.fromCharCode
Number(ch) par la concaténation des
en un nombre. * (num1, ..., numN)
résultats de conversion des
Convertit une chaîne ch codes * passés en paramètres.
parseFloat(ch)
en réel. * Retourne le code du caractère
Convertit une chaîne ch ch.charCodeAt(p)
parseInt(ch,b) à la position p.
en entier exprimé dans ch est un objet String.
la base b. * * code UTF-16.
Convertit la valeur a en
String(a)
chaîne.
* Si la conversion n'est pas possible, la
fonction retourne NaN.
www.digitalclass.tn 2022-2023
