CSS : on reprend tout à zéro !

Par Joe Gillespie

Cet article est le premier d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.

Introduction

Si l'idée d'utiliser des Feuilles de Styles en Cascade vous effraie, tranquillisez-vous. Le fait d'utiliser un ordinateur peut être terrifiant pour quelqu'un qui le découvre pour la première fois, mais après un certain temps, on n'y pense plus. Le tout, c'est d'y aller par petites étapes au départ, et c'est ce que je compte faire dans cette série de tutoriels. Une étape à la fois !

Que vous utilisiez un éditeur WYSIWYG sans jamais vous occuper du code source qu'il y a derrière, ou même si vous n'avez jamais créé la moindre page Web, ce tutoriel va vous mettre dans la bonne direction.
Je pars du principe que vous ne savez rien, ou pas grand-chose, de la façon dont on monte une page Web. Il s'agit vraiment de « tout reprendre à zéro ! »

De quoi aurez-vous besoin?

De rien de particulier. Si vous avez un éditeur de page web, très bien. Sinon, vous pouvez utiliser n'importe quel éditeur de texte : Bloc-Notes sur un PC, ou alors SimpleText ou TextEdit sur un Mac. Si vous utilisez déjà DreamWeaver ou GoLive, sachez que nous allons utiliser le mode « source. »

Pas de panique ! Un éditeur graphique n'est pas essentiel, parce que je ne vais pas trop m'occuper de graphiques pour commencer.

Ah, vous aurez besoin d'un navigateur, ça va sans dire. En fait, je recommanderais de prendre plusieurs navigateurs différents. Si vous ne disposez que d'Explorer, vous devriez également prendre Mozilla ou d'autres dans cette liste des Nouveaux Navigateursétablie en février 2004 et non remise à jour, NdT ).

Si vous voulez télécharger vos pages vers un serveur Web, vous aurez besoin d'un programme FTP standard, mais ne vous en inquiétez pas pour l'instant, tout va être fait sur votre ordinateur.

Première étape : une page de base

Avant toute chose, il nous faut une page Web de base. Voici la page Web la plus simple possible.


<html>
 <head>
 </head>
 <body>
Voici ma page Web
 </body>
</html>

Nous avons ici trois ensembles de « balises »; les balises vont généralement par paires, mais pas toujours. Celle qui englobe toute la page est la paire de balises <html>...</html>. La première <html> est la « balise ouvrante », et la « balise fermante » est identique sauf qu'elle a un caractère de barre oblique entre le < et le html>.

À l'intérieur de la balise html se trouvent deux autres paires de balises.

La partie <head>...</head> contient des informations qui ne vont pas se voir sur votre page Web, la plus importante étant le titre qui apparaît dans la barre de titre de votre navigateur. Il faut insérer le titre de votre page entre une paire de balises de titre comme ceci...

<html>
<head>
<title>Ma page</title>
</head>
<body>
Voici le contenu de ma page Web !
</body>
</html>

La paire de balises <body>...</body> contient l'intégralité de votre page Web, le texte, les images, les animations Flash, tout ce que vous voulez. Vous pouvez soit taper le code dans votre éditeur de texte ou dans la fenêtre « source » d'un éditeur WYSIWYG, soit le copier-coller à partir d'ici.

Mon HTMLéphant, moyen mnémotechnique visuel pour l'ordre des balises
Voici mon HTMLéphant. Bon d'accord, ce n'est pas très original, mais au moins vous vous en souviendrez !

Donc, vous voilà avec une page Web qui fonctionnera dans n'importe quel navigateur (une fois que vous l'aurez enregistrée). Appelez-la « index.html », parce que c'est le nom de la première page sur tous les sites Web. Vous pouvez enregistrer le fichier n'importe où sur le disque dur de votre ordinateur, mais pour que les choses restent bien en ordre, créez un nouveau dossier pour y ranger vos pages Web.

La façon normale d'ouvrir votre page dans le navigateur est d'utiliser la commande « Ouvrir » dans le menu « Fichier » du navigateur, mais il y a un moyen plus rapide. Créez un raccourci pour votre fichier ou copiez-le, et placez-le sur le bureau. À partir de là, vous n'aurez qu'à faire glisser à la souris l'icône de votre fichier vers la fenêtre du navigateur, et votre page apparaîtra dans toute sa splendeur ! Elle devrait ressembler à ceci.

Bien qu'elle soit merveilleuse, il manque à votre page web un ingrédient essentiel : du contenu. Ça ne rime pas à grand-chose d'avoir une page Web si elle ne dit rien d'intéressant (en-dehors de « Voici le contenu de ma page Web ! »), mais c'est votre affaire.

Quel que soit le contenu, il devra être inclus entre la paire de balises <body>...</body> pour que le navigateur l'affiche.

Tant qu'on se contente de placer un texte dans une page Web nue comme ici, il n'a ni structure, ni style. Quand je parle de structure, je veux dire que les mots vont de gauche à droite et de haut en bas sans autre mise en valeur que l'ordre dans lequel ils apparaissent. Il est plus logique de regrouper ces mots et ces phrases en paragraphes, titres, sous-titres : bref, vous voyez, les trucs de base qu'on vous a appris à l'école.

Les navigateurs ignorent les retours à la ligne ou les paragraphes que vous avez dans votre texte brut. Ils ignorent aussi les tabulations, et si vous avez placé plus d'un espace entre deux mots, ils ignoreront également les espaces supplémentaires.

Il est utile, dans presque tous les textes, d'avoir un titre, un sous-titre, quelques paragraphes distincts et peut-être une signature à la fin.

Dans le HTML, le mécanisme permettant de faire ceci est fourni par encore d'autre balises de mise en forme.

On crée un paragraphe en incluant du texte au sein d'une paire de balises <p>...</p>. Un paragraphe en HTML, c'est tout simplement un bloc de texte d'une ou plusieurs phrases avec un petit bout d'espace pour le séparer du suivant : exactement comme ici.

Pour les titres, il y a six différents degrés de mise en valeur, qui vont du plus élevé <h1>...</h1> jusqu'au plus bas <h6>...</h6>. Ils ressemblent à ceci...

Voici un titre h1

Voici un titre h2

Voici un titre h3

Voici un titre h4

Voici un titre h5
Voici un titre h6

Comme vous le voyez, leur taille diminue quand la valeur de leur chiffre augmente, le <h4> faisant à peu près la même taille que la « petite » police du texte que vous lisez ici. <h5> et <h6> sont plus petits, mais en caractères gras.

Il existe une poignée d'autres petites astuces qui permettent de jouer avec le texte pour mettre en valeurs certains mots ou expressions. Plutôt que de penser à leur aspect, réfléchissez à leur fonction réelle.

Le caractère gras est une version plus lourde de la police de texte, et se marque par <b>...</b>. Toutefois, le mot « gras » est un terme de style pour l'impression, et sur le Web il est préférable d'utiliser <strong>...</strong>. Même si cela revient au même sur votre écran, le HTML doit aussi fonctionner sur d'autres supports. Les logiciels qui lisent les pages Web aux personnes malvoyantes comprendront ce strong et le prononceront avec la force nécessaire.

L'italique s'applique, vous l'aurez deviné, grâce à <i>...</i>. Là aussi, avec HTML, mieux vaut ne pas utiliser ce style visuel mais plutôt <em>...</em>. On obtient ainsi un effet d'italique quel que soit l'outil qui reproduit le texte.

Le soulignement peut s'effectuer avec la paire de balises <u>...</u> mais un soulignement dans une page Web a un sens particulier. Il sert généralement à indiquer un lien. Mieux vaut ne pas utiliser le soulignement comme mode de mise en valeur, cela peut créer une confusion pour les lecteurs.

L'autre balise importante est le retour à la ligne <br>. Contrairement aux autres balises, celle-ci ne requiert pas de balise fermante, qui n'aurait pas beaucoup de sens d'ailleurs : où la mettrait-on ?

En utilisant ces balises de mise en forme de base, le texte commence à prendre forme. Il devient plus proche de ce que vous pourriez produire avec un traitement de texte.

Cette page de base aura sans doute un aspect différent dans d'autres navigateurs et sur d'autres ordinateurs. Chaque navigateur a un ensemble de styles par défaut, et sauf instruction contraire de votre part, il utilisera ces données par défaut. Pour ignorer ces styles par défaut, nous allons tout simplement produire nos propres styles qui seront regroupés dans une « feuille de styles » collective.

Épisode 2 »

Fiche technique

À propos de l'auteur

Joe Gillespie est un web designer qui partage ses passions pour le design, les CSS et la typographie depuis 8 ans sur son site Web Page Design for Designers. Il a pris sa retraite du Web cette année, au terme de 80 publications mensuelles. Dommage pour nous !

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2014 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site