html

html

Généralités

html ou xhtml? : La norme est de plus en plus xhtml (et html5 qui suit les mêmes règles). RéféWeb est en xhtml. Ce langage est semblable au html, mais plus strict :

  • Les balises sont obligatoirement en minuscules.
  • Les guillemets sont obligatoires pour tous les attributs.
  • Toutes les balises doivent être fermées, y compris celles du type <br /> ou <img />.

Doctype : (Ne pas oublier l’attribut langue dans la balise html, pour l’accessibilité.) En html5 :

<!DOCTYPE HTML>
<html lang="fr">

En xhtml (toujours assigner à la balise <html> ses attributs obligatoires) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

Ou, en bon vieux html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="fr">

Commentaires : Les commentaires s’écrivent comme ceci :

<!-- commentaire -->

<head> :

  • Un meta pour le titre (spécifique à chaque page). Un meta pour le charset. Deux meta pour la langue. Un meta pour la description (court texte suivi). Un meta pour les mots clés (série de mots ou d’expressions séparés par des virgules).
  • Un link pour le favicon (si désiré). Un link pour la vignette (pour facebook et certains moteurs de recherche). Links pour les feuilles de style externes. Appels de javascripts externes.
  • Utiliser des adresses root, c’est plus facile (sauf pour la vignette — je crois que l’adresse absolue est préférable).
<head>
<meta name="title" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="fr" />
<meta name="language" content="fr" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="/icone-L.ico" />
<link rel="image_src" href="http://lesuicidedeladeesse.com/images/suicidedeesse_vignette.jpg" />
<link href="/css/deesse.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/jquery/jquery.js"></script>
</head>

Favicon : Créer d’abord l’icone de 16px × 16px dans Photoshop et sauvegarder en format .ico (il faut downloader un plugin). On peut aussi maintenant utiliser d’autres formats, dont .png, .gif ou même .gif animé (l’animation est visible sur Firefox). Télécharger le fichier au niveau root du site.

Il n’est plus vraiment nécessaire d’inclure la ligne suivante dans le <head> de la page html (les browsers détectent le favicon, en autant qu’il soit au root level du site) :

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  ou
<link rel="shortcut icon" href="/favicon.gif" type="image/gif" />

alt : Si un navigateur ne peut afficher une image, il affichera le texte défini par l’attribut alt. Cet attribut est obligatoire; mais si on veut, on peut le laisser vide :

<img src="images/image.jpg" alt="" />

Ancre : Lien qui pointe sur un endroit précis dans une page :

<a href="page.html#ancre">Lien qui pointe sur un texte.</a>
-------
<a name="ancre">Texte sur lequel pointe le lien.</a>

Pop-up Window : Utiliser target="_blank" pour ouvrir un lien en pop-up sans se casser la tête avec un javascript. Attention! Non valide en xhtml (en principe) — mais de nouveau au goût du jour en html5!

<a href="" target="_blank">Lien</a>

Maps : Pour créer une zone cliquable sur une image.

  • Les coordonnées pour un rectangle : x1, y1, x2, y2.
  • Les coordonnées pour un cercle : x1 du centre, x2 du centre, rayon.
<img src="images/entete.jpg" alt="" usemap="#map-onglets" />
-------
<map name="map-onglets">
  <area shape="rect" coords="321,113,439,140" href="page1.html" />
  <area shape="circle" coords="443,113,72" href="page2.html" />
</map>

Tableaux : Code d’un tableau de base. Cellspacing et cellpadding ne sont plus valides; utiliser les css. Utiliser un style inline pour les choses spécifiques comme les largeurs de colonne.

Assigner class="pair" à tous les deux <tr> pour alterner les teintes pâle et foncée d’une rangée à l’autre.

table { 
  border-spacing: 0;
  border-collapse: collapse; 
}
-------
<table>
  <thead>
    <tr>
      <th style="width: 200px;"></th>
      <th style="width: 200px;"></th>
    </tr>
  </thead>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr class="pair">
    <td></td>
    <td></td>
  </tr>
</table>