This is a draft cheat sheet. It is a work in progress and is not finished yet.
Partage du code
<code> |
ligne de code |
< |
<kbd> |
raccourci clavier |
<pre> |
bloc de code |
Balise/élément de base
<html> |
Document HTML |
<header> |
Entête du document |
<body> |
Le corps du document |
<head> |
Information du document que l'utilisateur ne vois pas |
<meta name = |
méta-information |
<style> |
<link> |
<script> |
<p> |
Paragraphe |
<h1> |
Titre |
<!DOCTYPE html> |
Type de document (ici html) |
<titre> |
Titre de la page Web |
Attributs(Paramètre d'un élément) HTML
<input type= |
chant de saisi |
<br> |
saut de ligne |
<wbr> |
couper des longs mots |
<ol> |
liste numérotée (order list) |
<ul> |
liste a puce (unordered list) |
<dl> |
Liste de définition (definition list) |
<hr> |
saut de section |
<li> |
Elément de liste (list item) |
<dt> |
Terme à définir (definition term) |
<dd> |
Description (definition description) |
sections HTML 5
<header> |
Entête du site ou d'une section |
<footer> |
Pied du site ou d'une section |
<nav> |
Eléments de navigation, menu, pagination, ... |
<main> |
Contenu 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 |
|
|
citation
<cite> |
titre d'un élement culturel (film, livre, ect...) |
<q> |
citation courte |
<blockquote> |
citation longue |
Tableaux
<table> |
Tableau |
<caption> |
Titre du tableau |
<thead> |
Entête du tableau |
<th> |
cellule de tableau |
<tbody> |
Corps du tableau |
<td> |
cellule de donné |
<tfoot> |
Pied du tableau |
<tr> |
ligne de tableau |
liens et ancres
Liens absolus |
<a href="http://www.google.ch">Google </a> Pour aller sur un autre site |
Liens relatifs |
<a href="pages/contact.html">Me contacter </a> Pour aller sur une autre page de son site |
Ancre |
<h3 id="histoire-suisse">Histoire Suisse</h3> Pour placer un repère, ancre, dans une page |
Liens internes |
<a href="#histoire-suisse">Voir Histoire Suisse</a> Pour se déplacer vers un ancre de la page |
Cible du lien |
L'attribut target permet de définir la cible du lien |
mot
sémentique |
donner un sens au titre |
Balise De Mise en forme
Ne jamais utiliser HTML pour la mise en forme ou le style |
Ex. <b> <i> <u> etc... |
<b> |
gras |
<i> |
italic |
<u> |
soulighé |
Sémantique |
sens des phrases |
<em> |
moyenne importance |
<strong> |
trés important |
<mark> |
mettre en évidence un text |
<del> |
représenter un élément supprimer |
|
|
autre
éditeur HTML WYSIWYG |
what you see is what you get |
images
<img> |
élément image |
src="" |
attribut qui définit le chemin de l'image <img src="vador.jpg"> |
alt="" |
texte alternatif décrivant l'image <img src="vador.jpg" alt="Photo de Dark Vador"> |
height="" |
hauteur de l'image en px ou % |
width="" |
largeur de l'image en px ou % |
|
