Images...

Résumé

Le savoir-faire du webmestre sans prérequis

Dès votre premier site, adoptez les bons outils et les meilleures méthodes de conception web. Grâce à l’alliance des langages piliers du Web que sont XHTML et CSS, respecter les derniers standards du W3C, rendre son site accessible à tous, en assurer la compatibilité avec tous les navigateurs (Internet Explorer, Mozilla Firefox, Safari, Google Chrome…), est à la portée des débutants.

Créer un site web de qualité ? un jeu d’enfant !

→ Acquérez d’emblée les bons réflexes des webmestres

→ Concevez une charte graphique souple et élégante grâce aux feuilles de style CSS

...

...

ÉDITIONS EYROLLES

61, bd Saint-Germain

75240 Paris Cedex 05

www.editions-eyrolles.com...

Collection « Accès libre »

Pour que l’informatique soit un outil, pas un ennemi !

Bien rédiger pour le Web… et améliorer son référencement naturel
I. CANIVET.

N°12433, 2009, 412 pages.

Lisibilité des sites web. Des choix typographiques au design d’information.

M.-V. BLOND, O. MARCELLIN, M. ZERBIB.

N°12426, 2009, 326 pages.

Ergonomie web. Pour des sites web efficaces.

A. BOUCHER.

N°12479, 2e édition, 2009, 458 pages.

Conversion web. Améliorer ses taux de conversion web.

S. ROUKINE. préface de P. KOSCIUSKO-MORIZET.

...

À mon petit cousin Thomas ;-)

...

Préface

Internet et le Web se démocratisent et pénètrent notre quotidien, créent de nouveaux besoins et deviennent de formidables supports d’échange et de communication, où chacun peut s’exprimer, réaliser son site web pour son plaisir, pour ses besoins professionnels, pour partager une passion, pour défendre une cause, ou pour toute autre motivation.

Aujourd’hui, combien de sites sur le Web sont-ils des sites personnels ? Combien de professionnels ont-ils commencé, en parfaits débutants, par un site « amateur » ? À force de naviguer sur la Toile, peut-être avez-vous envie de franchir le pas, et de créer votre propre site. Ou peut-être avez-vous déjà une page personnelle, et vous souhaitez dépasser cette première étape ? Ou peut-être encore utilisez-vous déjà un outil de publication, et vous voudriez à présent acquérir une meilleure maîtrise de vos pages ?

Dans ce cas, peut-être vous êtes-vous déjà demandé, par exemple :

• Oui, mais, par où commencer ?

• Que faut-il apprendre ?

• J’ai déjà regardé du code, ça semble trop compliqué.

• Vous savez, moi et la technique, ça fait deux…

• Je n’ai jamais eu le temps de me plonger là-dedans.

Si vous entrez dans l’une ou l’autre de ces catégories, voici un livre qui répondra à vos attentes. Pour tout dire, c’est le livre que j’aurais aimé avoir entre les mains il y a une douzaine d’années, quand j’ai découvert le Web et que j’ai fait mes premières armes de créateur de site. Et je dois l’avouer : devenu un professionnel, et ayant, depuis, souvent publié moi-même sur les techniques modernes de conception de sites, c’est aussi un peu celui que j’aurais aimé écrire, si j’avais été suffisamment disponible (et pédagogue).

Mathieu Nebra comble enfin ce vieux fossé entre la confusion qu’entraînent de très nombreuses « initiations aux pages Web » existantes, plus ou moins simples ou complètes (quand elles ne sont pas foncièrement erronées ou tout simplement dépassées), et les publications de qualité plus poussées, mais s’adressant à un public averti.

Bien sûr, il existe aussi depuis longtemps des solutions pour ne pas avoir à mettre le nez dans la technique et le code des sites web, en s’en remettant à des logiciels qui vont coder à votre place, à la manière d’un traitement de texte. Ce n’est résolument pas la voie suivie ici, et avec raison : pour maîtriser un site de qualité, il faut en effet constamment faire des choix techniques pour lesquels ces outils peuvent être une aide précieuse, mais uniquement une aide qui ne remplacera pas votre propre compétence. En effet, ces logiciels ne savent pas encore prendre à notre place des décisions pertinentes quand celles-ci affectent la signification de notre contenu web (sa sémantique, selon le terme consacré). En outre, ces solutions, tout comme les pages personnelles offertes par les fournisseurs d’accès Internet, brident souvent la liberté du créateur. Et si vous avez décidé de faire un site web, vous avez certainement envie de pouvoir vous y exprimer à votre guise.

Faire un site, c’est donc devoir soulever le capot, s’intéresser au moteur, et mettre les mains dans le cambouis. Mais il faut pouvoir se former à ces pratiques : on ne s’improvise pas mécanicien en un jour.

Alors, apprendre à coder… Oui, mais dans quels formats ? Selon quelles règles ? Que ne faut-il surtout pas manquer pour créer des pages robustes, accessibles, faciles à maintenir et à faire évoluer ? Des pages qui passent dans tous les navigateurs ? Qui soient une base aux...

Avant-propos

« Ce qui se conçoit bien s’énonce clairement… »

...

...

Un site web, comment ça marche ?

...

Comment ? Vous savez déjà comment un site web fonctionne ? Détrompez-vous ! Ce n’est pas parce que vous savez naviguer sur le Web à la perfection que vous savez pour autant comment il marche et comment il a été conçu. Or, si vous voulez vous prétendre « webmaster » (c’est-à-dire créateur de site web), un minimum de culture générale est nécessaire.

Dans ce chapitre, nous allons répondre aux questions suivantes :

• Que signifient les mots XHTML et CSS ?

• Quels sont les programmes qui permettent de naviguer sur un site ?

• Quels sont les programmes qui permettent d’en créer un ?

XHTML et CSS : les langages du Web

Vous vous demandez peut-être d’où les informaticiens tirent ce chic pour inventer des acronymes imprononçables qui effraient les débutants ?

Pas de panique ! Derrière ces mots barbares que sont « XHTML » et « CSS » se cache… la clé de cet ouvrage, ni plus ni moins ! En effet, pour créer un site web, on doit parler...

...

Comment démarrer sa première page web ?

...

Nous y sommes. Après avoir préparé le terrain dans le premier chapitre, nous démarrons ici sans plus tarder la création de notre première page.

À la lecture de ces lignes, vous devriez avoir déjà installé un éditeur de texte (à moins que vous ne préfériez vous contenter du Bloc-notes). Durant tout cet ouvrage, nous utiliserons l’éditeur Notepad++. Vous pouvez toutefois en utiliser un autre sans souci, cela n’aura pas d’influence sur la création de votre site.

B.A.-BA Qu’appelle-t-on « page web » ?

Les pages web sont des documents informatiques qui peuvent contenir du texte, des images, des tableaux, des formulaires et d’autres éléments multimédias. Elles sont créées par les webmasters à l’aide des langages XHTML et CSS, et sont visualisées par les internautes grâce à un navigateur web, tel Firefox.

...

...

Baliser le texte de sa page

...

À ce stade, vous devriez être capable de créer une page web blanche constituée du code XHTML minimal. Voyons maintenant comment baliser le contenu de notre page afin qu’il s’affiche avec des paragraphes et des titres. Nous verrons également les principales balises de mise en forme qui mettront en exergue certains éléments de notre texte.

Comme nous l’avons vu au chapitre précédent, nous allons placer le contenu du site à l’intérieur des balises <body></body>. Cela sera valable tout au long de cet ouvrage.

JARGON En local

Les fichiers de votre site sont pour le moment stockés sur le disque dur de votre ordinateur. Cela signifie que seul vous pouvez accéder au site que vous êtes en train...

...

Un site, ça crée des liens !

...

Les liens hypertextes sont l’invention géniale qui est à la base du Web. Aujourd’hui, tout le monde y est familier : quand on voit que le pointeur de sa souris se transforme en main, on sait qu’il s’agit d’un lien qui va nous amener sur une autre page (voir figure 4-1).

Figure 4–1 Un lien hypertexte

C’est précisément ce que nous allons apprendre à faire dans ce chapitre.

Il faut savoir qu’on a la possibilité de faire deux types de liens :

...

...

Insérer des images

Lors de la...

Avec des images, votre page paraîtra plus attirante et sera plus agréable à lire. Au-delà de l’aspect purement décoratif, les images permettent de donner une identité visuelle au site (avec le logo du site) et peuvent même constituer le centre de l’information.

Sur un ordinateur, il existe plusieurs formats d’image, c’est-à-dire plusieurs façons différentes de coder une même image. Certains sont plus adaptés que d’autres selon l’utilisation qui en sera faite. Nous allons dans un premier temps voir quels sont les formats d’image utilisés sur le Web et comment choisir le bon format. En effet, un mauvais choix peut considérablement détériorer votre image ou la rendre plus « lourde », donc bien plus longue à télécharger pour vos visiteurs.

Les formats d’image du Web

Le saviez-vous ? Si les pages web sont parfois longues à charger, ce n’est pas parce qu’elles contiennent beaucoup de texte mais plutôt à cause des images. Par exemple, une simple photo de 120 Ko correspond à 120...

...

CSS, le langage de mise en page du Web

Les pages web que nous...

Pour le moment, nous n’avons travaillé qu’avec un seul langage : le XHTML. Il est temps d’introduire un nouveau langage appelé CSS. Il est assez différent du XHTML, mais vous allez vite vous rendre compte que les deux sont complémentaires.

Il est en théorie possible de faire un site uniquement en XHTML. D’ailleurs, c’est exactement ce que nous avons fait jusqu’à présent. Le problème, c’est que la présentation du site laissait à désirer. Heureusement que le CSS est là pour embellir tout ça !

On peut faire de nombreuses choses grâce au CSS : changer la couleur du texte ou du fond, changer la police, la taille, etc. Nous allons apprendre à faire tout cela dans ce chapitre et les suivants.

ALLER PLUS LOIN CSS et ses versions

Tout comme le HTML et le XHTML, le CSS a connu plusieurs versions. La dernière en date est CSS 2.1. Une nouvelle version, CSS 3, est actuellement en cours de discussion et devrait apporter un nombre conséquent de nouveautés dont...

...

Mettre en forme son texte

Les chapitres 7 et 8 vont vous dévoiler de nombreuses propriétés CSS. Nous nous...

Commençons par un bref rappel sur le fonctionnement du langage CSS. Un code CSS est constitué de plusieurs « blocs », chacun ayant la forme suivante :

selecteur

{

propriete: valeur;

propriete: valeur;

propriete: valeur;

}

...

...

Un peu de déco : couleur et fond

Ce...

La couleur du texte

Il fut un temps, aux débuts du Web, où les meilleurs ordinateurs géraient rarement plus de 256 couleurs… Aujourd’hui, vous savez probablement que la plupart des ordinateurs sont capables d’afficher des millions, voire des milliards de couleurs (4 294 967 296 pour être précis). Nous sommes arrivés à un stade où il n’est pas nécessaire d’en afficher davantage, car l’œil humain ne peut en discerner plus.

Le langage CSS vous offre un large choix de couleurs et il ne tient qu’à vous de les utiliser au mieux. Ce choix ne devra pas être fait à la légère. En effet, les couleurs ont une symbolique : elles déterminent l’ambiance de votre site et forment son identité visuelle (charte graphique, hiérarchisation des informations et des pages les unes par rapport aux autres, etc.).

Vous souvenez-vous des différentes unités existantes permettant d’indiquer la taille du texte ? Eh bien avec les couleurs, c’est la même chose : il y a plusieurs façons d’indiquer une couleur. Nous allons passer en revue ces techniques une par une.

Tout d’abord, il faut vous présenter la propriété CSS permettant de changer la couleur du texte. Il s’agit de color. On peut l’utiliser comme ceci pour changer par exemple la couleur de nos paragraphes :

p

{

...

...

Les listes à puces : pour un site web structuré

Précieuses...

Commençons par le commencement : savez-vous ce qu’est une liste à puces ? Si vous avez déjà fait du traitement de texte, cela devrait vous dire quelque chose.

Il existe trois types différents de listes à puces :

• Les listes non ordonnées : ce sont les listes à puces les plus couramment utilisées. Cette liste est d’ailleurs une liste non ordonnée.

• Les listes ordonnées : chaque élément de la liste commence...

...

Les tableaux : synthétiser ses informations

Tout comme les listes à puces, les tableaux permettent de structurer les données. On y a souvent recours lorsqu’on doit synthétiser...

...

Les formulaires : recueillir l’avis de ses visiteurs

Le Web n’est pas qu’une...

...