Show Menu
Cheatography

101-HTML-CSS Cheat Sheet by

Petit Cheat Sheet sur les principals balises HTML et CSS

HTML

<!D­OCTYPE html>
Début
<ht­ml>
Document HTML

Section

<he­ade­r>
Entête du site
<fo­ote­r>
Pied du site
<na­v>
Elément de navigu­ation
<ma­in>
Menu principal
<se­cti­on>
Groupement thématique de contenu, généra­lement avec un en-tête, titre
<ar­tic­le>
Contenu autonome dans une page message sur un forum, un article de blog, ...
<as­ide>
Contenu qui indire­ctement lié, en marge du sujet principal, voir même sans rapport

CSS

color
choisir la couleur
font-f­amily
police de texte
font-size
taille de texte
font-style
italiq­ue,...
font-w­eight
epaisseur de police
line-h­eight
hauteur de la ligne
text-d­eco­ration
modifie le soulig­nement des liens
text-align
place le texte
text-t­ran­sform
majusc­ule­,mi­nuscule
letter­-sp­acing
espacer, diminuer l'espace du texte
overflow
permet de pas faire sortir le contenu
max-width
taille maximum
min-width
taille minimum
 

Tableau

<ta­ble>
Tableau
<ca­pti­on>
Titre du tableau
<th­ead>
Entête du tableau
<tb­ody>
Corps du tableau
<tf­oot>
Pied du tableau
<tr>
Ligne du tableau
<th>
Cellule d'entête
<td>
Cellule de donnée
colspan
Fusion de cellule en colonne
rowspan
Fusion de cellule en ligne

Liens, ancre et dossier

<a href="h­ttp­s..."> </a>
<a href=""> </a>
"­nom­-do­ssi­er/­"
pour aller dans un dossier
"../­"
pour sortir d'un dossier
#...
ancre

Image

<im­g>
élément image
scr = "­"
définit le chemin de l'image
alt = "­"
texte définitant l'image
height = "­"
hauteur de l'image en pixel
width = "­"
largeur de l'image en pixel
<ti­tle>
"­Déf­ini­tio­n" de l'image
 

Balise de base

<p>
Paragraphe
<q>
pour les citations
<he­ad>
Info que l'util­isateur ne voit pas
img scr=
Dit où est l'image
<im­put...
Champs de saisit
<h1>
Titre 1
sémantique
Donne un sens à un titre
.. required >
Champs de saisit obliga­toire
<br>
Pousse un mot à la ligne
<hr>
Fait une ligne et un retour à la ligne dessus et dessous du texte
<ul>
Liste à puce
<ol>
Liste à chiffres
<li>
représente un élément d'une liste
<em>
Moyenne importance
<st­ron­g>
très important
<ma­rk>
représente du texte surligné
<de­l>
représente du texte qui a été suprimé
<df­m>
définition d'un terme
<ab­br>
abrévi­ation
<ti­me>
date ou heure précise
<ad­res­s>
élément de contact
<su­b> <su­b>
texte en exposant ou en indice
<ci­te>
contient le titre d'une oeuvre, livre, chanson
<q>
petite citation
<bl­ock­quo­te>
grande citation
start
1er élément de la liste
<dt>
Terme à définir
<dd>
descri­ption
reversed
liste inversée
<a href=""> </a>
Lien (autre site)
<a href=""> </a>
Lien (son site)
<h3 id="­"> </h­3>
pour placer une ancre sur la page
<a href=""> </a>
envoi vers une ancre
target­="_b­lan­ck"
ouvre un nouveau onglet
"­mai­lto­:a@­b.c­"
ouvre la boite mail
"­tel­:00­012­124­98"
ouvre un numéro de téléphone
<fi­gca­pti­on>
défini l'image
id
identi­fiand unique
class
classe les élément
<di­v>
groupe du texte dans un block
<sp­am>
groupe du texte dans un inline
<class "­sta­bil­o"...>
Met en surlingné

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets