Scribd
Importer
4 vues7 pages

Éléments fondamentaux du HTML5

Transféré par

toukabenali12
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
4 vues7 pages

Éléments fondamentaux du HTML5

Transféré par

toukabenali12
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

<label> Définit un libellé pour un élément graphique.

<input> Définit un champ de saisie de types : "button",


Annexe HTML5 "time", "checkbox", "date", "email", "image",
"number", "password", "radio", "range", "reset",
Eléments de 1er niveau "submit", "tel", "text", "url".

<html> Représente la racine d'un document HTML. <textare Définit une zone de saisie de texte multilignes.
a>
<head> Conteneur de métadonnées placé entre la
balise <html> et la balise <body>. <select> Définit une liste déroulante.

<body> Définit le corps du document. <datalist Spécifie une liste d'options prédéfinies connectée à
> un élément <input>.

<option> Définit une option dans une liste de sélection.

Eléments d’en-tête

<link> Définit la relation entre le document actuel et


une ressource externe. Attributs globaux

<meta> Définit les métadonnées du document. class Spécifie un nom de classe pour un élément.

<script> Intègre un script côté client (JavaScript). hidden Renseigne la visibilité d'un élément.

<style> Définit les informations de style (CSS) pour id Spécifie un identifiant unique pour un élément HTML.
un document.
lang Spécifie la langue du contenu de l'élément.
<title> Définit le titre du document.
style Spécifie un style en ligne.

title Spécifie des informations supplémentaires sur


un élément.
Boite

<span> Regroupe des éléments dans un


bloc de contenu.
Eléments de section
<div> Grouper plusieurs éléments Html
de type block. <header Conteneur pour le contenu d’introduction ou
> un ensemble de liens de navigation.
<iframe> Définit un cadre en ligne.
<nav> Définit un ensemble de liens de navigation.

<footer Définit un pied de page pour un document ou


> une section.
Tableau
<section Définit une section dans un document.
<table> Définit un tableau. >

<caption Définit une légende de tableau. <article Spécifie un contenu indépendant et autonome.
> >

<tr> Définit une ligne dans un tableau. <aside> Définit un contenu en dehors du contenu
principal. Souvent placé sous forme de barre
latérale.
<th> Définit une cellule d'en-tête dans un tableau.
<main> Définit le contenu principal d'un document.
<td> Définit une cellule dans un tableau.

Formulaire Eléments de structuration de texte et média

<cite> Définit le titre d'une œuvre.


<form> Crée un formulaire HTML.
<p> Définit un paragraphe.
<fieldset Regroupe des éléments liés dans un formulaire.
>
<source> Spécifie plusieurs ressources multimédias pour
les éléments multimédias.
<legend> Définit une légende pour l'élément <fieldset>.
<hn> Définit un titre de niveau n (de 1 à 6).

<hr> Définit une rupture thématique sous forme de


ligne horizontale.
Annexe CSS3
<img> Intègre une image.
Sélecteurs
<figure> Spécifie un conteneur autonome qui peut
contenir divers éléments. * Sélectionne tous les éléments.

<figcaptio Définit une légende pour un élément <figure>. element1 Sélectionne tous les éléments de type element.
n>
#id Cible un élément en fonction de la valeur de
<audio> Intégrer du contenu sonore dans un document. son attribut id.

<video> Intègre du contenu vidéo dans un document. .class Cible les éléments en fonction de la valeur de
leur attributs class.
<a> Définit un lien hypertexte via l’attribut href.
[Link] Cible tous les éléments de type element en fonction
<br> Définit un retour à la ligne. de la valeur de leur attributs class.

<address> Définit les coordonnées de a:link Cible tous les liens non visités.
l'auteur/propriétaire d'un document ou d'un
article. a:visited Cible tous liens visités.

<mark> Définit le texte qui doit être marqué ou mis a:hover Cible l’élément au moment où l’utilisateur le
en surbrillance. survole avec le pointeur de la souris.

<details> Spécifie des détails supplémentaires que a:active Cible tous les liens activés.
l’utilisateur peut ouvrir et fermer à la demande.

<summary Définit un en-tête visible pour l'élément <details>.


> 1
Il est possible de cibler plusieurs element de différents types en les séparant par
des virgules « , ».

Propriétés de mise en forme du texte


Listes font-family Spécifie les noms de polices possibles par ordre
de préférence.
<ul> Définit une liste à puces.
font-weight Spécifie la manière dont les caractères d’un
<ol> Définit une liste ordonnée. texte doivent être affichés (bold ; bolder ;
lighter).
<li> Définit un élément dans une liste.
font-style Spécifie le style d'un texte (italic).

font-size Spécifie la taille d'une police.


Evènements font Super-propriété de font. Combine font-family,
font weight, font-style, font-size.
onblur Se déclenche au moment où l'élément
perd le focus. text-align Spécifie l'alignement horizontal d’un texte
(left ; center ; right ; justify).
onclick Se déclenche lors d’un clic sur l’élément.
text-shadow Définit une ombre au texte.
onfocus Se déclenche au moment où l'élément
obtient le focus.
text Spécifie la façon de transformer les caractères
transform d’un texte en majuscules ou en minuscules
oninput Se déclenche dès que la valeur d'un
élément a changé. (uppercase ; lowercase ; capitalize).

onload Se déclenche lorsque la page est color Spécifie la couleur du texte.


complètement chargée.

onmouseove Se déclenche lorsque le pointeur de la


r souris survole l’élément.
Propriétés des listes
onsubmit Se déclenche lorsqu'un formulaire est soumis.
list-style-type Définit le type de marqueur d’éléments de
liste (circle; square ; upper-roman ;
lower-alpha).
list-style-position Spécifie la position des marqueurs box-shadow Ajoute des ombres à la boîte d’un élément.
d'éléments d’une liste à puces (outside ;
inside). display Spécifie le comportement d'affichage
d'un élément (inline ; block ;
list-style-image Spécifie une image comme marqueur inline-block).
d'éléments de liste.
top Spécifie la position verticale, par rapport
list-style Super-propriété de liste. Combine au haut, d'un élément positionné.
list-style-type, list-style-position,
list-style-image. bottom Spécifie la position verticale, par rapport
au bas, d'un élément positionné.

left Spécifie la position horizontale, par rapport à


la gauche, d'un élément positionné.
Propriétés de couleur et de fond
right Spécifie la position horizontale, par rapport à
background-color Définit la couleur d'arrière-plan d'un élément. la droite, d'un élément positionné.

background-image Définit une image d'arrière-plan pour overflow Spécifie le comportement du contenu
un élément. lorsque il déborde de la boîte d'un élément
(visible ; hidden ; clip ; scroll ; auto).
background-repeat Définit la façon dont une image d’arrière-plan
est répétée (repeat ; repeat-x ; repeat-y). opacity Définit le niveau de transparence.

background-size Spécifie la taille d’une image d'arrière-plan.

background Super-propriété d’arrière-plan.


Combine background-color, Propriétés des bordures
background-image,
background-repeat border-color Définit la couleur des bordures d'un élément.
background-size.
border-style Définit le style des bordures d'un élément.

border-radius Définit le rayon des coins arrondis


d’un élément.
Propriétés des images
border-width Définit la largeur des bordures d'un
filter Définit des filtres sur un élément élément (medium ; thin ; thick ; valeur
(blur() ; grayscale() ; invert()). en px).

border Super-propriété de bordure. Combine


border color, border-style, border-width,
border
Propriétés des tableaux
Transformat radius.
table-layout Définit la façon de disposer les cellules,
ion
lignes et colonnes d’un tableau.
transform Applique un effet de transformation 2D ou
border-collapse Définit si les bordures des cellules sont 3D à un élément (rotate(), skew(), scale(),
fusionnées ou séparées (separate ; translate()).
collapse).

Transition
Propriétés des boîtes
transition-delay Spécifie le délai nécessaire avant
width Définit la largeur d'un élément. que la transition commence.
height Définit la hauteur d'un élément.
transition-duration Spécifie la durée de la transition.
position Spécifie le type de la méthode de
transition-property Spécifie les propriétés CSS sur
positionnement utilisée pour un
lesquelles l'effet de transition sera
élément (absolute ; fixed ; relative ;
appliqué.
static ; sticky).
transition Super-propriété de transition. Combine
padding Propriété abrégée qui définit la marge
transition-property, transition-duration
intérieur d’un élément des 4 cotés.
et transition-delay.
margin Définit les marges d'un élément.
Annexe
JavaScript
!= différent de L'objet Date
Opérateurs logiques Méthodes de l'objet Math (Math.) abs() Date()* Crée un nouvel objet Date.
&& ET Retourne la valeur absolue. sqrt() Retourne la [Link]() Retourne le jour du mois (entre 1 et
31).
|| OU racine carrée. round() Retourne l'entier le plus
[Link]() Retourne le numéro du mois.
! NON proche.

trunc() Retourne la troncature entière d'un [Link]() Retourne la valeur de l'année sur
nombre en retirant sa partie 4 chiffres.
Opérateurs de comparaison == égal à décimale. [Link]() Modifie le numéro du jour du mois.
random() Retourne un réel aléatoire dans [0, 1[
Modifie le numéro du
[Link]() mois.
> supérieur à la dernière occurence de
ch1
<
>= supérieur ou égal à Méthodes pour afficher une sortie* dans ch à partir de la
la position p.
inférieur à
[Link](p,l) Retourne une sous-chaîne
<= inférieur ou égal à Les chaînes de caractères commençant à la position
p et de longueur l.
ch. length Propriété qui retourne la longueur
de ch. [Link]() Modifie la valeur de l'année.
Opérateurs arithmétiques
[Link] (p) Retourne le caractère [Link]() Retourne une chaîne de caractères
d'indice p. représentant la date d.
+ addition
[Link] (ch1, p) Retourne la position de la
1ère occurrence de ch1
- soustraction * Pour obtenir un objet Date et non pas une
dans ch, effectuant la
chaîne de caractères, il faut utiliser l'opérateur
* multiplication recherche à partir de la
new. d est un objet Date.
position p (sinon -1 ).
/ division
[Link](ch1,p) Retourne la position de
% modulo
la propriété innerHTML d'un Remplace, dans ch,
élément HTML toutes les occurrences de ch1
par ch2.

Méthode pour saisir une Convertit tous les


entrée caractères de ch en minuscule.
Convertit tous les
prompt() Affiche une boite de
caractères de ch en
dialogue avec une zone de
majuscule.
saisie.
Supprime tous les
[Link](ch1,ch2) espaces existant au début et à
la fin de ch.
alert() Affiche un message dans
une boîte de dialogue. [Link]()
[Link]() Affiche Fonctions JS
document [Link] (num1, ...,
directement dans le numN)
[Link]()
HTML. Retourne une chaîne formée
par la
*
Pour afficher un contenu concaténation des
dynamiquement, on peut utiliser [Link]()
isNaN(a) Retourne vrai si l'argument a n'est des codes* passés en
pas un nombre, sinon paramètres.
elle retourne faux. [Link](p) Retourne le code du
caractère à la position
Number(ch) Convertit une chaîne ch en p.
un nombre.*
ch est un objet String.
parseFloat(ch) Convertit une chaîne ch en * code UTF-16.
réel.*
résultats de conversion
ch en entier exprimé
dans la base b.*
parseInt(ch,b)
Convertit une chaîne
String(a) Convertit la valeur a en
chaîne.
*
Si la conversion n'est pas possible, la
fonction retourne NaN.

Type d'objets

Annexe PHP Fonctions sur les chaînes de caractères


passé comme argument. Retourne le code
int Entier chr()
ASCII du 1er caractère de l'argument.
float Réel ord()
Retourne la longueur d'une chaîne.
string Chaîne de caractères bool Booléen strlen()
Retourne le caractère dont le code ASCII est
argument dans le 1er.
array Tableau
strcmp() Retourne le résultat de comparaison de deux chaînes
(-1,0,1).

Opérateurs de transtypage str_replace() Remplace, dans une chaîne , toutes les occurrences
d'un motif par un autre.
(int) Convertit une variable en entier. (float) Convertit une variable
strtolower() Convertit tous les caractères d'une chaîne en
en réel. (string) Convertit une variable en chaîne. (bool) Convertit
minuscule. strtoupper() Convertit tous les caractères d'une chaîne
une variable en booléen. (array) Convertit une variable en
en majuscule.
tableau.
substr() Retourne une sous-chaîne. trim() Supprime tous les espaces existants au début et à la fin de
ème la chaîne.
strpos() Retourne la position de la première occurrence du 2
Fonctions de Date/Heure Fonctions sur les tableaux
Opérateurs logiques
Vérifie la validité d'une date. d'une liste de valeurs.
&& Et
|| Ou Formate une date et la retourne count() Retourne le nombre
Opérateurs de comparaison
sous forme de chaîne. d'éléments d'un tableau.
! Non checkdate() date()
Retourne l'heure actuelle en
nombre de seconde. Structures de langage
time()
array() Crée un tableau à partir
strtotime() Transforme une chaîne contenant
== égal à *
une date en timestamp Fonctions PHP pour MySQL *
<> différent de < inférieur à <= inférieur ou .
* timestamp: nombre de secondes écoulées echo Affiche une ou plusieurs expressions.
égal > supérieur
entre une date donnée et le
1er janvier 1970 à 00:00:00.
MySQL.
mysql_connect() Etablit une connexion un serveur .
mysql_select_db() Sélectionne une base de données MySQL.

>= supérieur ou égal


mysql_query() serveur MySQL.
Envoie une requête SQL à un
Opérateurs arithmétiques + addition ql_num_rows()
tableau indexé. mys Retourne le nombre de lignes dans un
- soustraction
jeu de résultat. opération MySQL.
* multiplication / division
mysql_affected_rows() Retourne le nombre de lignes affectées par la
% modulo
mysql_close() Ferme la connexion au serveur MYSQL. dernière mysql_error() Retourne une chaîne décrivant la dernière erreur.
mysql_fetch_array() Retourne une ligne de résultat sous forme de tableau.

mysql_fetch_row() Retourne une ligne de résultat MySQL sous forme de

* = affectation
Autres opérateurs Il est possible d'utiliser les fonctions équivalentes fournies par
l’extension mysqli (interface procédurale).

.concaténation Fonctions diverses

Variables superglobales
rand() Retourne un nombre passées au script courant via les le script courant.
paramètres d'URL. isset()
Fonctions mathématiques aléatoire. Vérifie si une variable est
Tableau associatif des valeurs définie.
abs() Retourne la valeur absolue. $_GET $_POST
passées au script courant via le
protocole HTTP et la méthode require() inclut et exécute le fichier
sqrt() Retourne la racine carrée.
spécifié en argument.
POST.
round() Retourne la valeur arrondie.
Tableau associatif des valeurs die() Affiche un message et termine

Fonctions définies sur le type date


Annexe SQL DAY ( ) Retourne le jour.
Type de données
MONTH ( ) Retourne le mois.
INT Entier
YEAR ( ) Retourne l’année.
DECIMAL Réel
NOW ( ) Retourne la date et l’heure courantes.
CHAR Chaîne de caractères de longueur fixe.

VARCHAR Chaîne de caractères de longueur variable dont


la longueur maximale fixée.
Fonctions d’agrégation
TEXT Chaîne de caractères de longueur variable.
AVG ( ) Retourne la moyenne.
DATE Date.
COUNT ( ) Retourne le nombre d’enregistrements.
TIME Temps.
MAX ( ) Retourne le maximum.

MIN ( ) Retourne le minimum.

SUM ( ) Retourne la somme.


Opérateurs de comparaison

= Égale à

<> Différent de Contraintes d’intégrité


> Supérieur à
NOT NULL Interdit une valeur nulle.
< Inférieur à
DEFAULT Attribut une valeur par défaut.
>= Supérieur ou égale à
CHECK Spécifie que les valeurs de la colonne
doivent respecter une condition.
<= Inférieur ou égale à

IN Dans PRIMARY KEY Définit une clé primaire.

BETWEEN Entre deux valeurs d’un intervalle. UNIQUE Spécifie l’unicité des valeurs d’une colonne.

LIKE Recherche de motif/valeur. FOREIGN KEY Définit une clé étrangère.

IS Filtre les résultats contenant la valeur NULL. REFERENCES Fait référence à une clé primaire d’une
autre table.

ON UPDATE Met à jour la clé étrangère en cas de mise à


CASCADE jour de la clé primaire.
Opérateurs logiques
ON DELETE Supprime automatiquement tous les
AND ET CASCADE enregistrements de la table fille suite à la
suppression de l’enregistrement
OR OU correspondant de la table mère.

NOT NON
Définition des données ALTER TABLE table1 Modifie le nom d’une
RENAME** nom1 TO nom2 colonne.
CREATE DATABASE nom Crée une base de données.
ALTER TABLE table1 Ajoute une contrainte
DROP DATABASE nom Supprime une base de ADD CONSTRAINT [nom] sur une colonne d’une
données. contrainte table.

CREATE TABLE table1 ( Crée une table. ALTER TABLE table1 Supprime une contrainte.
colonne1 type [contrainte], DROP CONSTRAINT nom
colonne2 type [contrainte], …
[[CONSTRAINT] [nom] ALTER TABLE table1 Active/ Désactive une
[contrainte], … ) ENABLE/ DISABLE contrainte.
CONSTRAINT nom
ALTER TABLE table1 Ajoute une colonne à
ADD colonne type [contrainte] une table. DROP TABLE table1 Supprime une table.

ALTER TABLE table1 Supprime une colonne.


DROP colonne
* on peut utiliser MODIFY au lieu de ALTER.
ALTER TABLE table1 Modifie le type d’une ** on peut utiliser CHANGE au lieu de RENAME.
ALTER* colonne type colonne.

Manipulation des données

SELECT [DISTINCT] expression [, col, ... ou *] [[AS] Spécifie les colonnes à afficher.
alias] 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