Aide mémoire HTML - CSS

1 - Documentation

HTML5

Pour chaque balise, des tutoriels avec des explications et des exemples :

http://www.w3schools.com/html/default.asp

et un référentiel accessible par ordre alphabétique :

http://www.w3schools.com/tags/default.asp

CSS3

Pour chaque code, des tutoriels avec des explications et des exemples :

http://www.w3schools.com/css/default.asp

et un référentiel accessible par ordre alphabétique :

http://www.w3schools.com/cssref/default.asp

2 - Positionnement texte sur une ligne

Pour aligner sur une même ligne un texte aligné à droite et un texte aligné à gauche :

• Exemple sans CSS:
  

<div style="float:left;">Texte aligné à gauche</div>
<div style="float:right;">Texte aligné à droite</div>
<div style="clear:both">Ligne suivante</div>

Ce qui donne :

• Exemple avec CSS
  

<style type="text/css">
.alignement_gauche { float: left; }
.alignement_droit { float : right; }
.clear { clear: both; }
</style>

Utilisation avec <p>

<p class="alignement_gauche">Texte aligné à gauche</p>
<p class="alignement_droit">Texte aligné à droite</p>
<p class="clear">Ligne suivante</p>

Ce qui donne :

Texte aligné à gauche

Texte aligné à droite

Ligne suivante

3 - Positionnement d'une image

Par défaut, une image est un élément "inline" et, en html4, l'attribut align peut-être utilisé pour la positionner :

<img align="left|right|middle|top|bottom">

En HTM5, l'attribut align est déprécié. Une solution consiste à attribuer le type block à l'image à l'aide de l'attribut display. Le code ci-dessous définit une image centrée, de largeur maximale de 80% :

img.centre { display: block; margin-right: auto; height: auto; max-width: 80%; margin-left: auto; }