Petit aide-mémoire HTML/CSS

Cet aide-mémoire ne fait qu'effleurer la syntaxe (X)HTML (et CSS) et n'est là que pour donner quelques éléments pratiques pour faire des fragments de page, par exemple une annonce eBay ou un message dans un forum permettant l'usage du HTML.

Note: j'utilise ici le XHTML qui se caractérise par l'auto-fermeture de tags n'englobant pas de texte : <br/>, <hr/>, etc.
En HTML pur, on peut simplement écrire <br>, <hr>. D'autres règles peuvent être plus relâchées, comme l'omission de guillemets ou de tags fermants dans certains cas, mais c'est plus propre (lisible, cohérent), et finalement plus simple d'être rigoureux et d'appliquer les règles à la lettre.
Vous trouverez aussi la forme <br /> (avec un espace avant la barre oblique), que j'ai utilisée pendant longtemps moi aussi. J'ai abandonné cette forme qui n'était utilisée que pour être compatible avec le vieux navigateur Netscape Navigator/Communicator. Je ne pense pas qu'il y a encore beaucoup de personnes utilisant quotidiennement cette pièce de musée...

Règles

Titres

On peut utiliser les titres pour structurer une page longue :
<h1>Gros titre</h1>
<h2>Titre moyen</h2>
etc. (h1 à h6).

Paragraphes

Les paragraphes se marquent avec <p> et </p>. Une ligne est sautée entre deux paragraphes. Le style du paragraphe peut être précisé :
<p style="font-size: 18px; text-align: center;">Texte gros et centré</p>

Pour un codage rapide, on peut préciser l'aligement sans utiliser les styles :
<p align="center">Texte centré</p>.
C'est déprécié, mais bien pratique quand même (moins verbeux).

Sauts de ligne

On peut revenir à la ligne avec <br/>.

À noter que les retours à la ligne dans le code sont remplacés par des espaces, et des espaces consécutifs sont réduits à un seul espace. On peut spécifier un espace insécable avec   (non-breaking space). À noter aussi qu'il faut remplacer les & par des &, les < par des < et les > par des >

On peut tracer une ligne horizontale avec <hr/>. La largeur, l'épaisseur et la couleur peuvent être précisés : <hr size="3" width="75%" color="red">.

Mise en forme

Si l'usage des styles est à privilégier, pour mettre en valeur un mot ou une petite fraction de texte, on peut utiliser les balises <b>de gras</b> et <i>d'italiques</i>, ainsi que <small>des petits caractères</small> ou <big>des gros</big>.
De même, on peut <strike>barrer du texte</strike> ou le <u>souligner</u>, ce qui est déconseillé vu que l'internaute associe ce style aux liens...
Pour certains effets, on peut utiliser <sup>l'exposant</sup> et <sub>l'indice</sub>, ou une police à <tt>chasse fixe</tt> (typewriter text/texte de machine à écrire)

Une mise en valeur plus fine est possible avec la balise <span style="instructions CSS">Texte de style différent</span>.

À noter que ces mises en forme (en ligne : inline) peuvent se cumuler : Le texte <big>peut être gros avec une <i>partie en italiques</i>, voire en <b><i>gras italiques</i></b>, il faut juste fermer les balises dans l'ordre inverse</big> de leur ouverture (imbriquer les balises, ne pas les croiser).

Listes

Il est possible de faire des listes ordonnées <ol> ie. numérotées automatiquement ou non-ordonnées (avec des puces) <ul>. À l'intérieur de ces balises, on met les items de liste marqués avec <li>.
Par exemple :
<ol>
<li>Un item</li>
<li>Un autre item</li>
<li>Un dernier item</li>
</ol>
<ul>
<li>Un item</li>
<li>Un autre item</li>
<li>Un dernier item</li>
</ul>

Liens et images

Les liens sont les nerfs du Web, sans eux, HTML et HTTP ne seraient pas HT (hypertext)...
Ils peuvent être relatifs (à la page courante) ou absolus (pour référencer une page d'un autre site).

Un lien est fait avec la balise <a href="http://www.w3c.org" title="Le site des standards du Web">texte affiché</a> ou
en relatif : <a href="fabriquants/MimPI.html" title="Fabriquant hollandais">Mim Pi</a>

L'attribut title est optionnel mais recommandé. Avec certains browsers il s'affiche dans une info-bulle.

Les images peuvent aussi être référencées en relatif ou absolu :
<img src="http://www.w3c.org/images/logo.png" alt="Texte W3C en typo spéciale" title="Logo W3C" width="80" height="80"/>
<img src="../images/logo.png" alt="Texte W3C en typo spéciale" title="Logo W3C" width="80" height="80"/>

Seul l'attribut src est obligatoire. Il est bon de préciser les dimensions de l'image, par exemple pour éviter l'effet d'accordéon lors du chargement d'une page : le browser n'affiche qu'une place minimale pour les images et met à jour les dimensions au fur et à mesure qu'il charge les images, donnant une page à géométrie variable assez peu agréable à voir.

De même, en précisant alt (description de l'image destinée à la remplacer si elle devait manquer) et title (légende de l'image), on améliore sa sémantique, on aide les moteurs de recherche et les utilisateurs, surtout s'ils utilisent un browser purement textuel ou un module de lecture à haute voix.

On peut utiliser une image en guise de lien :
<a href="http://www.w3c.org" title="Le site des standards du Web"><img src="../images/logo.png" alt="Texte W3C en typo spéciale" title="Logo W3C" width="80" height="80"/></a> il sera entouré d'une bordure de la couleur des liens. Cette bordure peut être supprimée (par exemple pour un bouton) avec l'attribut : border="0"

Exemples

Pour <h1>, <h2> et <h3>, voir les titres de cette page.

Les paragraphes sont utilisés abondamment dans la page, et là =>
j'ai fait un saut de ligne (br).

Texte gros et centré

Voilà une ligne de séparation <hr/> :

et une autre hauteur augmentée mais à largeur réduite et couleur modifiée :

(à la moitié de la fenêtre : <hr size="5" width="50%"/>).

On peut utiliser les balises de gras (b) et d'italiques (i), ainsi que des petits caractères (small) ou des gros (big). De même, on peut ~~barrer du texte (strike)~~ ou le souligner (u).
Pour certains effets, on peut utiliser ^{l'exposant (sup)} et _{l'indice (sub)}, ou une police à chasse fixe (tt) (typewriter text/texte de machine à écrire).

Usage des listes :
Ordonnées (ol) :

Un item numéroté
Un autre item numéroté
Un dernier item numéroté

Et non-ordonnées (ul) :

Un item à puce
Un autre item à puce
Un dernier item à puce

Les deux sont très pratiques... Et peuvent être mixés à volonté :

Un item à puce
Un autre item à puce
1. Un item numéroté
2. - Un item à puce
  - Un autre item à puce
  - Un dernier item à puce
3. Un autre item numéroté
4. Un dernier item numéroté
Un dernier item à puce

On peut aller très loin comme ça...

Un lien est fait avec la balise texte affiché ou en relatif : Mim Pi

Du texte avant, l'image : Arbre HTML et du texte après.

Image avec un lien : ou sans la bordure marquant le lien : en utilisant l'attribut border="0".

Usage des styles

Éviter l'usage de <font>, qui est déprécié. Utiliser plutôt les styles :

Code	Exemple
`font: Verdana, Arial, Helvetica, sans-serif;` ou `font: 'Times New Roman', Times, serif;` ou `font: 'Lucida Handwriting', Boulevard, cursive;` ou `font: 'Andale Mono', Courier, monospace;` ou `font: 'Comic Sans MS', Curly, fantasy;`	Exemple ou Exemple ou Exemple ou Exemple ou Exemple
`font-size: 18px;` ou `font-size: 20pt;`	Exemple ou Exemple
`font-weight: bold;` (ou normal) ou `font-style: italic;` (ou normal) ou `text-decoration: overline;` ou `text-decoration: line-through;` ou `text-decoration: underline;` (ou none) ou `text-transform: capitalize;` ou `text-transform: uppercase;` ou `text-transform: lowercase;` (ou none)	Exemple ou Exemple ou Exemple ou Exemple ou Exemple ou eXeMPLe bIgArrÉ ou eXeMPLe bIgArrÉ ou eXeMPLe bIgArrÉ none: eXeMPLe bIgArrÉ
Regroupage des styles : `font: 10px/12px Times, serif;` ou `font: small-caps large fantasy;` ou `font: smaller/90% Tahoma, sans-serif;` ou `font: italic bold 1em/1.5em monospace;` Note : la deuxième taille est l'interlignage. Seules la taille et la famille sont obligatoires ici.	Exemple ou Exemple ou Exemple ou Exemple
`color: red;` ou `color: #F08540;` ou `color: #F84;` (similaire (=#FF8844), plus compact, moins précis)	Exemple ou Exemple ou Exemple
`background-color: yellow;` ou `background-color: #85F040;` ou `background-color: #8F4;`	Exemple ou Exemple ou Exemple
`border: 1px red solid;` ou `border: 5px #057 dotted;`	Exemple ou Exemple
`font: 12px/8px serif;` ou `font: 12px/12px serif;` ou `font: 12px/16px serif;`	Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases. ou Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases. ou Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases.
`text-align: left;` ou `text-align: right;` ou `text-align: center;` ou `text-align: justify;`	Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases. ou Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases. ou Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases. ou Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases.
`text-indent: 0;` ou `text-indent: 20px;` ou `text-indent: -5%; margin-left: 5%;`	Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases. ou Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases. ou Exemple de paragraphe avec style d'alignement, d'indentation et d'interlignage. Il y a là deux phrases.