HTML 4 avec XHTML et CSS (chap.01-05)

13 novembre 2008

Bien. Nous sommes le jeudi 13 novembre, il est 8h30 et j’ai un peu de temps devant moi. Quelques jours, pour commencer. Il s’agit d’avancer en repartant sur des bases solides. Donc de les cimenter sans plus et plus attendre. Je m’y attelle. Ce bloc-notes voudra peut-être m’accompagner ?

Première étape :

Elizabeth Castro
HTML 4 avec XHTML et CSS
Trad. Bernard Jolivalt
Ed. CampusPress, coll. Le Programmeur, 2006

Soit ici, un certain nombre de points relevés en chemin contre l’oubli ou les mauvaises habitudes.

Chapitre 1 / Les blocs de construction d’une page web

Fermer la balise des éléments vides de contenu textuel.
Ex : <img src=”image.jpg” /> ou <br />

Utiliser comme valeur des attributs sans valeur le nom de ces attributs.
Ex : <hr noshade=”noshade” />

Préférer les valeurs de longueur relatives :
- 2em = le double de la taille de la police de l’élément ou de l’élément parent ;
- 50% = la moitié de la taille de la police de l’élément ou de l’élément parent ;
- line-height: 1,5 : l’interligne sera d’une fois et demie la taille de la police ;
- px : unité liée à la résolution de l’écran ;
- pt, mm, cm : unités absolues.

    Préférer les URL relatives aux URL absolues :
    - <a href=”fichier.html”>lien</a> si le fichier à appeler se trouve au même niveau que le fichier où est placé le lien ;
    - <a href=”dossier/fichier.html”>lien</a> si le fichier à appeler se trouve dans un dossier enfant du dossier parent du fichier où est placé le lien ;
    - <a href=”../dossier/fichier.html”>lien</a> si le fichier à appeler se trouve dans un dossier de niveau supérieur ;
    - <a href=”../../dossier/fichier.html”>lien</a> si le fichier à appeler se trouve dans un dossier de niveau encore supérieur ;
    - Dans les feuilles de style : background: url(“fond.jpg”);

    Abréviations :
    CSS : Cascading Style Sheet
    FTP : File Transfert Protocol
    HTTP : HyperText Transfert Protocol
    URL : Uniform Ressource Locator
    XHTML : Extensible HyperText Markup Language

    Chapitre 2 / Les fichiers de pages web

    Nommer “index” la page d’accueil par défaut (généralement, ou “default” sur un serveur Microsoft).

    Placer une page par défaut dans chaque dossier dont on ne souhaite pas afficher la liste des éléments.

    Chapitre 3 / La structure (X)HTML de base

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//FR” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml” lang=”fr”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Site – Titre</title>
    </head>
    <body>
    <div id=”article”>
    <h1>Titre de niveau 1</h1>
    <div id=”introduction”>
    <p id=”chapeau”>Paragraphe 1</p>
    <p class=”important”>Paragraphe 2</p>
    </div>
    <div id=”developpement”>
    <!– ci-dessous le corps de l’article –>
    <h2>Titre de niveau 2</h2>
    <h3>Titre de niveau 3</h3>
    <p>Texte <span class=”imptxt”>texte important</span> texte.</p>
    <p>Ligne 1<br />
    Ligne 2</p>
    (…)
    </div>
    </div>
    </body>
    </html>

    http://www.site.org/fichier.html#developpement pointe vers <div id=”developpement”>

    Chapitre 4 / La mise en forme de base du (X)HTML

    Gras :<b>Texte en gras</b> ou <strong>Texte en gras</strong>
    Italique : <i>Texte en italique</i> ou <em>Texte en italique</em>
    Barré : <del>Texte barré</del>
    Lignes de code : <code>Code</code>
    Citation : <blockquote>Citation</blockquote>

    Chapitre 5 / Créer des images pour le web

    Pour afficher progressivement une image de grande taille, choisir GIF entrelacé ou JPEG progressif.

    (To be continued…)

    Répondre

    Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

    Logo WordPress.com

    Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

    Twitter picture

    Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

    Photo Facebook

    Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

    Connexion à %s

    Suivre

    Get every new post delivered to your Inbox.