Petit Cheat Sheet sur les principals balises HTML et CSS
|
<!DOCTYPE html>
|
Début
|
|
<html>
|
Document HTML
|
|
<header>
|
Entête du site
|
|
<footer>
|
Pied du site
|
|
<nav>
|
Elément de naviguation
|
|
<main>
|
Menu principal
|
|
<section>
|
Groupement thématique de contenu, généralement avec un en-tête, titre
|
|
<article>
|
Contenu autonome dans une page message sur un forum, un article de blog, ...
|
|
<aside>
|
Contenu qui indirectement lié, en marge du sujet principal, voir même sans rapport
|
|
color
|
choisir la couleur
|
|
font-family
|
police de texte
|
|
font-size
|
taille de texte
|
|
font-style
|
italique,...
|
|
font-weight
|
epaisseur de police
|
|
line-height
|
hauteur de la ligne
|
|
text-decoration
|
modifie le soulignement des liens
|
|
text-align
|
place le texte
|
|
text-transform
|
majuscule,minuscule
|
|
letter-spacing
|
espacer, diminuer l'espace du texte
|
|
overflow
|
permet de pas faire sortir le contenu
|
|
max-width
|
taille maximum
|
|
min-width
|
taille minimum
|
|
<table>
|
Tableau
|
|
<caption>
|
Titre du tableau
|
|
<thead>
|
Entête du tableau
|
|
<tbody>
|
Corps du tableau
|
|
<tfoot>
|
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
|
|
<a href="https..."> </a>
|
|
|
<a href=""> </a>
|
|
|
"nom-dossier/"
|
pour aller dans un dossier
|
|
"../"
|
pour sortir d'un dossier
|
|
#...
|
ancre
|
|
<img>
|
é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
|
|
<title>
|
"Définition" de l'image
|
|
<p>
|
Paragraphe
|
|
<q>
|
pour les citations
|
|
<head>
|
Info que l'utilisateur ne voit pas
|
|
img scr=
|
Dit où est l'image
|
|
<imput...
|
Champs de saisit
|
|
<h1>
|
Titre 1
|
|
sémantique
|
Donne un sens à un titre
|
|
.. required >
|
Champs de saisit obligatoire
|
|
<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
|
|
<strong>
|
très important
|
|
<mark>
|
représente du texte surligné
|
|
<del>
|
représente du texte qui a été suprimé
|
|
<dfm>
|
définition d'un terme
|
|
<abbr>
|
abréviation
|
|
<time>
|
date ou heure précise
|
|
<adress>
|
élément de contact
|
|
<sub> <sub>
|
texte en exposant ou en indice
|
|
<cite>
|
contient le titre d'une oeuvre, livre, chanson
|
|
<q>
|
petite citation
|
|
<blockquote>
|
grande citation
|
|
start
|
1er élément de la liste
|
|
<dt>
|
Terme à définir
|
|
<dd>
|
description
|
|
reversed
|
liste inversée
|
|
<a href=""> </a>
|
Lien (autre site)
|
|
<a href=""> </a>
|
Lien (son site)
|
|
<h3 id=""> </h3>
|
pour placer une ancre sur la page
|
|
<a href=""> </a>
|
envoi vers une ancre
|
|
target="_blanck"
|
ouvre un nouveau onglet
|
|
"mailto:a@b.c"
|
ouvre la boite mail
|
|
"tel:0001212498"
|
ouvre un numéro de téléphone
|
|
<figcaption>
|
défini l'image
|
|
id
|
identifiand unique
|
|
class
|
classe les élément
|
|
<div>
|
groupe du texte dans un block
|
|
<spam>
|
groupe du texte dans un inline
|
|
<class "stabilo"...>
|
Met en surlingné
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
