0% ont trouvé ce document utile (0 vote)
90 vues3 pages

Éléments clés d'HTML5 et CSS3

Transféré par

ahlemjammeli10
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
90 vues3 pages

Éléments clés d'HTML5 et CSS3

Transféré par

ahlemjammeli10
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Annexe HTML5

Eléments de 1er niveau Eléments de section


<html> Représente la racine d'un document HTML. <header> Conteneur pour le contenu d’introduction ou un
<head> Conteneur de métadonnées placé entre la balise ensemble de liens de navigation.
<html> et la balise <body>. <nav> Définit un ensemble de liens de navigation.
<body> Définit le corps du document. <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
<article> Spécifie un contenu indépendant et autonome.
<link> Définit la relation entre le document actuel et une
<aside> Définit un contenu en dehors du contenu principal.
ressource externe.
Souvent placé sous forme de barre latérale.
<meta> Définit les métadonnées du document.
<main> Définit le contenu principal d'un document.
<script> Intègre un script côté client (JavaScript).
<style> Définit les informations de style (CSS) pour un
document. Eléments de structuration de texte et média
<title> Définit le titre du document. <cite> Définit le titre d'une œuvre.
<p> Définit un paragraphe.
Boite <source> Spécifie plusieurs ressources multimédias pour les
<span> Regroupe des éléments dans un éléments multimédias.
bloc de contenu. <hn> Définit un titre de niveau n (de 1 à 6).
<div> Grouper plusieurs éléments Html <hr> Définit une rupture thématique sous forme de ligne
de type block. horizontale.
<iframe> Définit un cadre en ligne. <img> Intègre une image.
<figure> Spécifie un conteneur autonome qui peut contenir
Tableau divers éléments.
<figcaption> Définit une légende pour un élément <figure>.
<table> Définit un tableau.
<audio> Intégrer du contenu sonore dans un document.
<caption> Définit une légende de tableau.
<video> Intègre du contenu vidéo dans un document.
<tr> Définit une ligne dans un tableau.
<a> Définit un lien hypertexte via l’attribut href.
<th> Définit une cellule d'en-tête dans un tableau.
<br> Définit un retour à la ligne.
<td> Définit une cellule dans un tableau.
<address> Définit les coordonnées de l'auteur/propriétaire
d'un document ou d'un article.
Formulaire <mark> Définit le texte qui doit être marqué ou mis en
surbrillance.
<form> Crée un formulaire HTML. <details> Spécifie des détails supplémentaires que l’utilisateur
<fieldset> Regroupe des éléments liés dans un formulaire. peut ouvrir et fermer à la demande.
<legend> Définit une légende pour l'élément <fieldset>. <summary> Définit un en-tête visible pour l'élément <details>.
<label> Définit un libellé pour un élément graphique.
<input> Définit un champ de saisie de types : "button", "time", Listes
"checkbox", "date", "email", "image", "number",
"password", "radio", "range", "reset", "submit", "tel", <ul> Définit une liste à puces.
"text", "url". <ol> Définit une liste ordonnée.
<textarea> Définit une zone de saisie de texte multilignes. <li> Définit un élément dans une liste.
<select> Définit une liste déroulante.
<datalist> Spécifie une liste d'options prédéfinies connectée à un Evènements
élément <input>.
onblur Se déclenche au moment où l'élément perd le
<option> Définit une option dans une liste de sélection.
focus.
onclick Se déclenche lors d’un clic sur l’élément.
Attributs globaux onfocus Se déclenche au moment où l'élément obtient le
class Spécifie un nom de classe pour un élément. focus.
hidden Renseigne la visibilité d'un élément. oninput Se déclenche dès que la valeur d'un élément a
changé.
id Spécifie un identifiant unique pour un élément HTML.
onload Se déclenche lorsque la page est complètement
lang Spécifie la langue du contenu de l'élément. chargée.
style Spécifie un style en ligne. onmouseover Se déclenche lorsque le pointeur de la souris
title Spécifie des informations supplémentaires sur un survole l’élément.
élément. onsubmit Se déclenche lorsqu'un formulaire est soumis.
Annexe CSS3
Sélecteurs Propriétés des images
* Sélectionne tous les éléments. Définit des filtres sur un élément (blur() ;
element1 Sélectionne tous les éléments de type element. filter
grayscale() ; invert()).
Cible un élément en fonction de la valeur de son
#id Propriétés des tableaux
attribut id.
Cible les éléments en fonction de la valeur de leur Définit la façon de disposer les cellules,
.class table-layout
attributs class. lignes 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
[Link] fusionnées ou séparées (separate ;
la valeur de leur attributs class.
a:link Cible tous les liens non visités. collapse).
a:visited Cible tous liens visités.
Propriétés des boîtes
Cible l’élément au moment où l’utilisateur le survole
a:hover width Définit la largeur d'un élément.
avec le pointeur de la souris.
a:active Cible tous les liens activés. height Définit la hauteur d'un élément.
Spécifie le type de la méthode de
1 Il 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érieur
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-shadow Ajoute des ombres à la boîte d’un élément.
Spécifie la manière dont les caractères d’un texte
font-weight Spécifie le comportement d'affichage d'un
doivent être affichés (bold ; bolder ; lighter). display
é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-
font Spécifie la position verticale, par rapport au
weight, font-style, font-size. bottom
bas, d'un élément positionné.
Spécifie l'alignement horizontal d’un texte (left ;
text-align Spécifie la position horizontale, par rapport à la
center ; right ; justify). left
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
droite, d'un élément positionné.
text- transform
texte en majuscules ou en minuscules (uppercase ;
Spécifie le comportement du contenu lorsque il
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


Définit le type de marqueur d’éléments de liste
Propriétés des bordures
list-style-type border-color Définit la couleur des bordures d'un élément.
(circle; square ; upper-roman ; lower-alpha).
border-style Définit le style des bordures d'un élément.
Spécifie la position des marqueurs d'éléments
list-style-position Définit le rayon des coins arrondis d’un
d’une liste à puces (outside ; inside). border-radius
élément.
Spécifie une image comme marqueur d'éléments
list-style-image Définit la largeur des bordures d'un élément
de liste. border-width
(medium ; thin ; thick ; valeur en px).
Super-propriété de liste. Combine list-style-type, border Super-propriété de bordure. Combine border-
list-style
list-style-position, list-style-image. color, border-style, border-width, border-
radius.

Propriétés de couleur et de fond Transformation


background-color Définit la couleur d'arrière-plan d'un élément. Applique un effet de transformation 2D ou
Définit une image d'arrière-plan pour un transform 3D à un élément (rotate(), skew(), scale(),
background-image
élément. translate()).
Définit la façon dont une image d’arrière-plan est
background-repeat
répétée (repeat ; repeat-x ; repeat-y). Transition
background-size Spécifie la taille d’une image d'arrière-plan. Spécifie le délai nécessaire avant que la
transition-delay
Super-propriété d’arrière-plan. Combine transition commence.
background-color, background-image, transition-duration Spécifie la durée de la transition.
background
background-repeat, background-size. Spécifie les propriétés CSS sur
transition-property
lesquelles
l'effet de transition sera appliqué.
Super-propriété de transition. Combine
transition transition-property, transition-duration
et transition-delay.
Annexe SQL

Type de données Contraintes d’intégrité


INT Entier NOT NULL Interdit une valeur nulle.
DECIMAL Réel DEFAULT Attribut une valeur par défaut.
CHAR Chaîne de caractères de longueur fixe. Spécifie que les valeurs de la colonne doivent
CHECK
Chaîne de caractères de longueur variable dont respecter une condition.
VARCHAR PRIMARY KEY Définit une clé primaire.
la longueur maximale fixée.
TEXT Chaîne de caractères de longueur variable. UNIQUE Spécifie l’unicité des valeurs d’une colonne.
DATE Date. FOREIGN KEY Définit une clé étrangère.
TIME Temps. Fait référence à une clé primaire d’une autre
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 suppression de l’enregistrement
< Inférieur à correspondant 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
BETWEEN Entre deux valeurs d’un intervalle. données.
LIKE Recherche de motif/valeur. DROP DATABASE nom
Supprime une base de
IS Filtre les résultats contenant la valeur NULL. données.
CREATE TABLE table1 (
colonne1 type [contrainte],
Opérateurs logiques colonne2 type [contrainte], … Crée une table.
AND ET [[CONSTRAINT] [nom] [contrainte],
OR OU …)
NOT NON ALTER TABLE table1 Ajoute une colonne à
ADD colonne type [contrainte] une table.
ALTER TABLE table1
Supprime une colonne.
DROP colonne
Fonctions définies sur le type date ALTER TABLE table1 Modifie le type d’une
DAY ( ) Retourne le jour. ALTER* colonne type colonne.
MONTH ( ) Retourne le mois. ALTER TABLE table1 Modifie le nom d’une
YEAR ( ) Retourne l’année. RENAME** nom1 TO nom2 colonne.
NOW ( ) Retourne la date et l’heure courantes. ALTER TABLE table1
Ajoute une contrainte
ADD CONSTRAINT [nom] contrainte
sur une colonne d’une
Fonctions d’agrégation table.
AVG ( ) Retourne la moyenne. ALTER TABLE table1
Supprime une contrainte.
COUNT ( ) Retourne le nombre d’enregistrements. DROP CONSTRAINT nom
MAX ( ) Retourne le maximum. ALTER TABLE table1
Active/ Désactive
MIN ( ) Retourne le minimum. ENABLE/ DISABLE CONSTRAINT
nom une contrainte.
SUM ( ) Retourne la somme.
DROP TABLE table1 Supprime une table.
* on peut utiliser MODIFY au lieu de ALTER.
** on peut utiliser CHANGE au lieu de RENAME.

Manipulation des données


SELECT [DISTINCT] expression [, col, ... ou *] [[AS] alias] Spécifie les colonnes à afficher.
FROM table1 [[AS] alias] [, table2, ...] Spécifie les tables.
[WHERE condition] Effectue une restriction.
[GROUP BY critère] Organise le résultat en groupes.
[HAVING condition] Applique un filtre.
[ORDER BY expression [ASC/DESC]] Trie le résultat.
INSERT INTO table [(liste colonnes)]
Insère des données dans une table.
VALUES (liste valeurs)
UPDATE table1 Modifie des données d’une table.
SET colonne = expression
[WHERE condition]
DELETE FROM table1 Supprime des enregistrements d’une table.
[WHERE condition]

Vous aimerez peut-être aussi