Internet: Conception de page Web avec FrontPage

Avant de commencer

Ceci est ma première page sur la conception de pages Web en utilisant

Microsoft FrontPage. Puisque je dois sortir rapidement ce document, je me
base sur la page de conception de pages Web en utilisant Netscape
Composer. Les concepts de base sont les mêmes. Cependant, FrontPage
offre beaucoup plus d'options pour une page Web ainsi que la possibilité
de gérer un site Web au complet. Donc, voici mon premier effort sur
FrontPage.

Il y a un point important que je veuille vous rappeler. Il est préférable que

le nom des documents, des images et tout autres documents placés dans
le site Web soit en minuscule. De plus, le nom ne doit pas avoir d'espaces
ou de caractères spéciaux tel que des accents ou de soulignés. Bien que
cela fonctionnerait bien sur votre ordinateur, il y a de bonnes chance que
cela ne fonctionne pas sur le serveur sur lequel vous allez déposer votre
site Web. Ceux-ci sont plus sensibles aux accents et comprennent
différemment les espaces que votre ordinateur personnel.

Pour pouvoir suivre cet exercice, vous devez premièrement avoir sur un
ordinateur Microsoft FrontPage. Les images que vous voyez sur cette page
proviennent de FrontPage XP. Les versions précédentes sont légèrement
différentes. Aussi, pour les exercices de cette page, vous devez copier sur
une disquette des images suivantes: [Link] pour l'image qui sera
insérer dans la page Web, [Link] pour l'image de fond de la page
Web, [Link] pour l'image qui servira de bouton de navigation. Il vous
faudra aussi la présentation [Link] pour l'exercice. Ceci est pour
démontrer comment télécharger un fichier autre qu'une page Web.
Cliquez sur les liens bleus et sauvegardez ces images sur une disquette.
Plus tard, ces images et document seront importés sur le site Web en
développement.

Introduction

Que retrouve-t-on sur une page Web?

o du texte
o des images
o des lignes séparatrices
o des liens hypertextes
o des boutons de navigation
o des tableaux
o un fond de page ayant un motif ou une image
 o des cadres ou des "frames"
o des formulaires
o de la programmation (perl, java, javascript, xml ...)

FrontPage est capable de couvrir tout cela et beaucoup plus. Par exemple,
il est aussi capable de gérer un site Web, d'apporter des changements au
site au complet rapidement, d'ajouter des formulaires qui donne accès à
des bases de données, d'ajouter de l'animation et encore plus. Ces options
seront couvertes dans une version ultérieure de cette page. Pour le
moment, on se concentre que sur les éléments de base. Pour commencer,
il faut ouvrir le programme Microsoft FrontPage.

Ouvrir une nouvelle page Web ou un nouveau site Web? Cela dépend de
vos besoins. Pour les besoins de cet exercice, nous allons premièrement
créer un dossier dans lequel sera déposé un site Web. Vous pourrez
ensuite importer autant d'éléments ( pages Web, images, programmation
et autres documents ) que vous voudrez dans ce dossier.

OU

Appuyez sur le triangle pointant vers le bas à la droite du bouton

nouveau.
De la liste des options, sélectionnez Web.
OU
Du volet Microsoft, sous la section Créer, sélectionnez l'option Créer à
partir d'un modèle.

Le volet Microsoft est une nouveauté pour la version XP. Comme les barres
d'outils, il offre la possibilité d'accomplir des tâches fréquemment
demandées. Si le volet Microsoft n'est pas visible à la droite de l'écran,
vous pouvez l'activer en tout temps à partir du menu Afficher et
sélectionner les options Barres d'outils et Volet Microsoft.
De la liste des types de sites Web déjà préparés, vous pouvez choisir celui
qui répond le mieux à vos besoins. Vous pouvez aussi changer l'endroit où
le dossier sera créé en appuyant sur le bouton Parcourir.

Pour les besoins de l'exercice, sélectionnez l'option Site Web Normal.

Appuyez sur le bouton OK.

Microsoft FrontPage va se charger de créer un dossier dans lequel vous

pourrez déposer les pages Web, les images et les autres documents qui
composeront votre site Web. Pour mieux gérer le contenu de ce dossier, il
est possible de créer d'autres dossiers pour regrouper des éléments
semblables à un seul endroit. C'est pour cela qu'il y a déjà un dossier
nommé "images" qui a été créé pour regrouper toutes les images de votre
site. Vous pouvez ajouter d'autres dossiers ou gérer les fichiers du site à
partir de la section Dossier qui est affiché à la gauche de l'écran.
Il y a aussi déjà une page Web vide qui s'appelle "[Link]". La
convention sur les serveurs sur lequel vous allez déposer votre site veut
que la page principale de votre site, ou la page d'introduction si vous
voulez soit nommée ainsi. Certains serveurs pointilleux veulent que le nom
soit "[Link]". Assurez-vous que cette page soit toujours présente et
qu'elle représente page d'introduction de votre site. À partir de celle-ci, les
Internautes pourront naviguer sur tous les éléments de votre site.

L'exercice qui suit consiste à ajouter certains éléments à cette page. Plus
tard, vous pourrez ajouter vos propres pages et construire le site comme
vous le désirez.

Si la page [Link] n'est pas là.

Appuyez sur le bouton Nouveau.

OU
Du volet Microsoft, sous la section Créer, sélectionnez l'option Page
vierge.

Du menu Fichier, sélectionnez l'option Enregistrer sous.

Enregistrer le document vide sous le nom [Link] .

Si le dossier image n'existe pas et désirez le créer.

Du menu Fichier, sélectionnez les options Nouveau et Dossier.

Donnez le nom images au nouveau dossier.
Appuyez sur la touche Entrée.

Environnement de FrontPage

Avant d'entrer dans l'exercice, il est préférable de voir les options qu'offre
FrontPage pour créer et gérer un site Web. Voici donc une courte liste de
ces éléments.

Page Permet de voir les pages Web sur lesquels

vous travaillez
en ce moment. Plusieurs pages peuvent
être ouvert en
même temps. Pour passer d'une page Web à
une autre, il
suffit de cliquer l'onglet du document.
Dossier Permet de gérer les pages Web, images et
autres
éléments qui se retrouve sur le site:
ajouter des dossiers,
ajouter, renommer et supprimer tout éléments
du site.
 Rapports Offre une synthèse du site. Certains rapports
sont très
utiles.
Navigation Permet de voir la structure du site à partir
de la page
principale.
Liens hypertexte Permet de voir les liens entre les
différentes pages
du site.
Tâches Énonce la liste des tâches à accomplir pour
avancer le site
Web.

Les vues possibles d'une page Web sont dans le coin inférieur gauche de
l'écran. Il y a la vue Normale, HTML et aperçu. Le mode normal vous
permet de modifier le contenu de la page. Le mode HTML vous permet de
voir le texte et les instructions qui composent votre page Web en format
HTML (HyperText Markup Language) . Vous pouvez aussi apporter des
changements à une page Web dans ce mode. Il est parfois intéressant de
changer des options directement à partir du code HTML. Le mode Aperçu
vous donne une idée du résultat final.

Un nouvel élément de la version XP d'Office et de FrontPage est le volet

Microsoft. Il permet de réaliser certaines opérations fréquentes à partir de
celui-ci. Les flèches à la gauche vous permettent de voir les diverses faces
du volet. Il y a aussi le bouton ayant un triangle pointant vers le bas à la
droite qui vous donne d'autres options.

Importer les images ou d'autres fichiers

Avant de pouvoir ajouter des éléments aux pages Web du site, il est très
préférable d'importer ces éléments dans le site Web. La gestion du site est
nettement améliorée quand tous les éléments se retrouvent dans un
dossier Web. Le prochain exercice consiste d'importer les images
mentionnées au début de cette page dans le dossier "image" du site.
Avant d'importer, il faut sélectionner le dossier dans lequel les éléments
seront déposés.
 Du volet Affichage, sélectionner Dossiers.
Sélectionnez le dossier images.

Vous pouvez maintenant importer des éléments à votre site dans ce

dossier.

Du menu Fichier, sélectionnez l'option Importer.

Cette fenêtre va apparaître et vous donner la liste des éléments que vous
avez choisi d'importer. Pour le moment, elle est vide.

Appuyez sur le bouton Ajouter un fichier.

La prochaine partie présume que les éléments à ajouter sont sur une
disquette. Mais ces fichiers peuvent aussi bien provenir d'un autre dossier
sur votre ordinateur ou même à partir du World Wide Web (depuis un site
Web) si vous êtes connecté à l'Internet.
 De la case Rechercher dans, sélectionnez le bon lecteur (disquette,
disque dur, lecteur Zip, CD-ROM, module de mémoire ...) dans lequel se
retrouve les fichiers voulus.
Sélectionnez le dossier dans lequel se retrouve les fichiers voulus.
Sélectionnez les fichiers voulus.

Pour sélectionnez plusieurs documents à la fois, vous avez deux options.

Vous pouvez cliquer sur le premier fichier, garder un doigt sur la touche
MAJ ( Shift ) et sélectionner le dernier fichier de votre choix. Tous les
fichiers entre ces deux seront aussi sélectionnés. Vous pouvez aussi
choisir des fichiers de façon plus sélective en gardant un doigt sur la
touche CTRL tout en sélectionnant les fichiers.

Une fois que vous avez choisi les fichiers, appuyez sur le bouton Ouvrir.
FrontPage va vous retourner à la fenêtre d'importation. Vous pouvez
choisir d'autres fichiers situés dans d'autres lecteurs ou d'autres dossiers.
Vous pouvez même aller chercher des fichiers sur le World Wide Web en
appuyant sur le bouton Depuis le site Web.

Une fois que vous avez choisi tous les fichiers que vous voulez importer,
appuyez sur le bouton OK.

Les images ont été recopiées dans le dossier images. Vous pourrez
ensuite les insérer dans les pages Web de votre choix.

Vous pouvez aussi importer des fichiers à partir de l'Internet. La prochaine

partie consiste à importer le fichier [Link] que vous avez choisi au
début de ce document dans le dossier Web à partir de l'Internet. Ceci
implique que votre ordinateur est présentement connecté à l'Internet. Si
cela n'est pas le cas, vous pouvez toujours lire cette section et être prêt
quand vous devrez importer un fichier. Placez le fichier [Link] dans
la "racine" ou le dossier principal du dossier Web.

Mais il faut faire attention à l'option d'importation. Elle peut vous apporter
des problèmes légaux. Vous ne pouvez pas importer tout ce que vous
voulez de l'Internet. Vous allez y retrouver beaucoup de matériel qui ont
des droits d'auteur, tel ce site Web, ou des images avec des marques de
commerce. Il est important d'avoir l'autorisation d'une personne
responsable avant d'importer et d'utiliser un élément d'un autre site. En
cas de doute, n'importez pas.

Sélectionnez la "racine" du dossier (c:\Mes documents\Mes ...)

Du menu Fichier, sélectionnez l'option Importer.
De la fenêtre Importer, appuyez sur le bouton Depuis le site Web.
L'assistant d'importation vous permet de choisir des fichiers à partir de
votre ordinateur ou à partir de l'Internet. Mais il faut que l'ordinateur soit
connecté pour pouvoir chercher les fichiers.

Pour l'importation, sélectionnez l'option Depuis un site World Wide

Web.
De la case Emplacement, entrez l'adresse suivante:
[Link] .
Appuyez sur le bouton Suivant >.
L'assistant vous permet de choisir un dossier sur un site sur l'Internet.
Cependant, si ce dossier contient plusieurs fichiers ou d'autres sous-
dossiers, ceux-ci pourraient aussi être importé. C'est pour cette raison que
je vous demande d'importer un fichier, [Link], au lieu du contenu
d'un dossier au complet. Le dossier contient 33 fichiers pour un total de 27
MO! Soyez certain de prendre juste ce que vous avez besoin. Sinon,
l'importation de fichiers que vous n'avez pas besoin peut prendre
beaucoup de temps.

Appuyez sur le bouton Terminer.

FrontPage va prendre quelques instants pour importer le document ou les

dossiers que vous avez demandés.
Le document que vous avez demandé est maintenant dans votre dossier.
Il y a plus d'options sur la gestion des fichiers et du dossier Web un peu
plus loin sur cette page.

Maintenant que vous connaissez un peu plus l'environnement FrontPage, il

est temps de se mettre au travail. La suite consiste à créer une page Web
et de couvrir les éléments qui devraient y être.

Le texte

Il ne faut jamais oublier que l'élément le plus important d'une page Web
est son contenu. Une tonne d'images et d'effets spéciaux ne remplacera
jamais un texte clairement écrit. La prochaine partie montre quelques-
unes des possibilités pour améliorer la présentation du texte.

Écrivez le texte suivant: Ceci est ma première page Web.

Appuyez deux fois sur la touche Entrée.

Même si l'élément le plus important est le texte, il est toujours possible de

changer sa présentation pour le rendre plus agréable ou plus informatif.
Pour cette raison, il y a une barre d'outils dans FrontPage qui facilite la
présentation du texte.

Si la barre d'outils mise en forme n'est pas affichée, vous pouvez l'activer
à partir du menu Affichage avec les options Barres d'outils et Mise en
forme.

Sur cette barre d'outils, vous retrouverez les outils pour changer la
présentation du texte et plus.

Mais il y a plus. Cette barre d'outils vous offre aussi la possibilité de

préparer une liste "non ordonnée", sans chiffres, ainsi qu'une liste
ordonnée. Le prochain exercice consiste à créer une liste non ordonnée.

Du la barre d'outils Mise en forme, appuyez sur le bouton .

Vous pouvez maintenant commencer à écrire votre liste.

 Écrivez: Liste de points.
Appuyez sur la touche Entrée.
Écrivez: Pratique pour de courtes listes.
Appuyez sur la touche Entrée.
Écrivez: Très concis.
Appuyez sur la touche Entrée.

Il reste qu'à terminer la liste.

Appuyez sur la touche Entrée pour commencer une nouvelle ligne.

Du la barre d'outils appuyez sur le bouton .

OU
Appuyez une seconde fois sur la touche Entrée.

La liste est maintenant terminée. Elle devrait ressembler à ceci.

o Liste de points.
o Pratique pour de courtes listes.
o Très concis.

Le format HTML offre une manière d'aligner du texte. Les boutons et

servent à donner ou retirer un retrait d'un paragraphe. La dernière option
sert à aligner un paragraphe de texte. Il est possible de l'aligner sur la
bordure de gauche ou de droite ou de centrer le paragraphe.

Il y a encore plus d'options dans le menu Format pour changer la

présentation du texte.

Sélectionnez la première phrase de la page Web (Ceci est ma première

page Web).

Du menu Format, sélectionnez l'option Police.

À partir de cette fenêtre, vous pouvez changer la présentation du texte de
votre page. Il vous est possible de changer la police de caractère, sa taille,
sa couleur ainsi que de mettre d'autres options de présentation. Le
prochain exercice consiste à changer un peu la présentation de la phrase.

De la liste des polices de caractères, sélectionnez la police Times New

Roman.
Changez la couleur à bleu foncé.
Changez le style de police à Gras.
Changez la taille de la police de caractère à 6 (24 points).
Appuyez sur le bouton OK.

Voici ce qui devrait être le résultat.

Faîtes attention à votre choix de polices de caractères. Bien que vous

puissiez avoir un grand choix de polices sur votre ordinateur, cela ne veut
pas pour autant dire que les lecteurs de votre site les ont aussi. Certains
logiciels ajoutent des polices de caractères à votre ordinateur. C'est
surtout des polices de "fantaisie" qu'il faut se douter. Si l'ordinateur du
lecteur ne retrouve pas la police, il va essayer de retrouver une police
"équivalente". L'affichage de votre page Web peut être très différente de
ce que vous aviez imaginé. Utilisez des polices de caractères populaires
tel que Time NewRoman et Arial.

Les images

Sans vouloir retirer l'importance du texte, l'un des éléments qui ont rendu
le World Wide Web si populaire est sa capacité d'afficher des images. Mais
attention! Le Web accepte seulement trois formats d'images: gif, jpeg et
png. Pour plus de détails sur les trois formats d'images, cliquez ici pour
retourner à la page précédente à la section sur les images. Assurez-vous
que les images que vous voulez utiliser soient dans l'un de ces formats.
Sinon, vous devrez utiliser un logiciel pour la conception d'images tel que
Photoshop, PaintShop Pro et plusieurs autres pour convertir votre image
dans l'un des formats acceptés. Si vous insérez une image qui n'est pas
dans l'un de ces formats, FrontPage va vous avertir et essayer de le
convertir s'il est capable. Une fenêtre va apparaître avec les options. Vous
la verrez un peu plus loin sur cette page.

Le prochain exercice consiste à placer des images sur la page Web ainsi
que pour le fond de l'écran. Vous devrez auparavant avoir copié les
fichiers demandés au début de cette page dans le dossier images du site
Web. La procédure qui suit présume que vous prendrez les images
requises à partir de ce dossier.

Appuyez sur le bouton .

OU
Du menu Insertion, sélectionnez les options Image et À partir du
fichier.

Pour choisir l'image

Attention!
Avant d'insérer une image sur une page Web, il faut d'abord l'avoir créé
ou l'avoir trouvé parmi une collection d'images sur disque compact ou sur
l'Internet. Assurez-vous qu'il n'y a pas de droits d'auteurs ou une marque
déposée sur l'image que vous voulez utiliser. Si vous n'êtes pas certain, ne
l'utilisez pas.

De l'option Regarder dans, sélectionnez le dossier où se trouve le

fichier. Pour cet exercice, c'est le dossier images.
De la liste des images du répertoire, sélectionnez le fichier de l'image.
Pour l'exercice, sélectionnez le fichier [Link] .
Appuyez sur le bouton Insérer.

L'image suivante va apparaître.

Du bas de l'écran, appuyez sur le bouton .

Comme vous pouvez le remarquer, cette image est animée. C'est une
collection d'images l'une derrière l'autre qui donne l'effet d'animation. Il
existe plusieurs petits logiciels qui vous aident à concevoir une image
animée. Il y a même sur ce site la page animé.htm qui a d'autres
exemples.

Pour revenir à l'édition de la page Web, appuyez sur le bouton .

La partie de l'image avait aussi deux autres options.

Pour voir ces options ou pour modifier les options de l'image:

Faites un double-clic sur l'image.

OU
Cliquez sur l'image.
Du menu Format, sélectionnez l'option Propriétés.
OU
Appuyez sur les touches Alt et Entrée.

FrontPage vous offre plusieurs options sur les images. Il y a premièrement

l'habillage. Sans habillage, il y aura seulement une ligne de texte à côté de
l'image. Avec un habillage de gauche ou de droite, l'image sera sur l'une
des bordures de la page. Mais il sera possible d'écrire plusieurs lignes de
texte autour de celle-ci. Mais ces options HTML ne permettent pas d'avoir
une image au milieu de la page et d'avoir plusieurs lignes de texte. Une
façon de contourner ce problème est de créer un tableau de trois
colonnes. Placez l'image au milieu et écrivez le texte dans les cellules de
gauche et de droite.

On peut aussi à partir de cette fenêtre aligner l'image et de déterminer

l'espacement entre l'image et les autres éléments de la page.
Généralement, il est préférable de laisser un espace. Mais il arrive ou il est
préférable d'avoir plusieurs images collées l'une après l'autre. Par
exemple, il est préférable de coller les images d'une barre de navigation
comme vous avez au début et à la fin de cette page Web.

Il est aussi préférable de spécifier la taille de l'image. Cela permet au

navigateur de pages Web de réserver l'espace requis pour l'image tout en
continuant d'afficher l'image autour de celle-ci. Le navigateur insère les
images un peu plus tard au lieu de faire attendre le lecteur qui peut lire le
texte. L'élément le plus important d'une page Web est toujours le texte. Il
devrait avoir la priorité.

Un autre point intéressant est qu'il vous est permis de changer la taille de
l'image; de l'agrandir ou de la réduire. Par exemple, changez la taille de
l'image à 100 pixels de largeur par 70 de hauteur. Constatez le résultat.

Pour les besoins de l'exercice, sélectionnez les options tel que sur l'image
ci-dessus.
Sélectionnez l'onglet Général.

De cette fenêtre, vous pouvez déterminer l'endroit où se situe l'image sur

le site. Vous pouvez aussi modifier l'image si vous avez auparavant
déterminé quel éditeur d'images FrontPage doit se référer. Vous pouvez
déterminer l'éditeur à partir du menu Outils et les options Options et
Configurer les éditeurs. L'option paramètre permet d'ajouter des
descriptions à l'images ou des instructions HTML.
FrontPage reconnaît que l'image actuelle est en format GIF. Le logiciel
reconnaît ce format ainsi que JPEG. Bien qu'il ne l'indique pas, FrontPage
reconnaît aussi le troisième format disponible PNG (Portable Network
Graphic).

Il y a aussi l'option d'insérer une image à basse résolution, plus petite et

plus rapide à charger que l'image finale. Avec la rapidité des lignes de
communication, cette option est de moins en moins utilisé.

L'option texte devrait toujours être utilisé. C'est du texte que vous ajoutez
pour décrire l'image. Ceci est très pratique au lecteur si l'image n'apparaît
pas. Au moins, celui-ci aura une description. Ceci est aussi très utilise pour
les internautes non-voyants qui n'ont pas d'autres moyen de reconnaître
l'image que par votre description.

Il est aussi possible d'insérer un lien hypertexte. L'option cadre de

destination vous permet d'envoyer le lien vers une autre section du cadre.
FrontPage vous permet d'avoir des cadres qui séparent l'écran en
plusieurs sections. Chacune peut afficher une page Web. Donc, vous
pouvez avoir plusieurs pages Web à l'écran et l'espace qu'ils utilisent est
déterminé par le cadre. Vous pouvez faire des liens qui transfert la page
Web ;à afficher dans un autre cadre. Il faut inscrire le nom du cadre dans
cette case.

Sélectionnez l'onglet Vidéo.

Vous pouvez aussi insérer des présentations multimédia.
Malheureusement, je n'ai pas eu l'opportunité d'essayer.

Appuyez sur le bouton OK.

Insérer une image pour le fond de la page Web.

Le prochain exercice consiste à insérer une image pour le fond de la page

Web. Il est recommandé de bien choisir le fond de page pour faciliter la
lecture du texte. S'il y a peu de contraste entre le texte et le fond, le texte
sera difficile à lire.

Du menu Format, sélectionnez l'option Arrière-plan.

OU
Du menu Fichier, sélectionnez l'option Propriétés.
Sélectionnez l'onglet Arrière-plan.

Cette fenêtre vous donne toutes les options pour contrôler le fond de page
ainsi que les couleurs du texte. La prochaine partie consiste d'ajouter une
image pour le fond de la page.

Sélectionnez l'option Image d'arrière-plan.

La fenêtre suivante va apparaître.

 Pour les besoins de l'exercice, sélectionnez l'image [Link] .
Appuyez sur le bouton Ouvrir.

L'image est sélectionnée.

Il est aussi possible de déterminer la couleur de fond au lieu de mettre une
image. Si vous sélectionnez les deux options, l'image va remplacer la
couleur d'arrière-plan. Vous pouvez aussi changer la couleur des liens de
toute la page, des liens que le lecteur a déjà visité et lorsque vous cliquez
sur le lien. Afin d'accélérer la sélection des options, FrontPage peut aller
lire les informations d'une page Web que vous avez préparé avec l'option
Utiliser les informations d'arrière-plan d'une autre page.

Appuyez sur le bouton OK.

Vous remarquerez que le fond de la page est maintenant le motif bleu de

l'image que vous avez sélectionné. Il existe plusieurs logiciels pour
concevoir des fonds de pages. Il y a encore plus d'images déjà préparées
sur le World Wide Web que vous pouvez utiliser. Il suffit de chercher un
peu.

Les lignes horizontales

Les lignes horizontales sont utilisées pour séparer les différentes parties
d'un document.

Après avoir inséré une image, appuyez sur le bouton.

OU
Du menu Insertion, sélectionnez l'option Trait horizontal.

Une ligne horizontale va s'insérer à la longueur de l'écran.

Pour modifier la ligne, faites un double-clic sur la ligne horizontale.

OU
Cliquez sur la ligne.
Du menu Format, sélectionnez l'option Propriétés.
OU
Appuyez sur les touches Alt et Entrée.
 Modifier les options à ceux affichée de l'image ci-dessus.
Appuyez sur le bouton OK.

La ligne horizontale va changer de forme et de couleur selon les options

que vous avez choisi. Voici une liste des options avec une courte
description.

Comme la plupart des éléments d'une page HTML, la largeur peut être
déterminé de deux façon: selon le pourcentage de l'écran ou en pixels.

Les liens

L'élément qui différencie le World Wide Web des autres services de

l'Internet (courrier électronique, FTP, IRC, Newsgroups ...) est sa capacité
d'avoir des liens hypertextes. Il y a cependant plusieurs types de liens:

Lien externe: lien à une autre page Web ou à un autre site.

Lien interne: Le terme en anglais est un "bookmark". Word utilise le
terme "signet" et Netscape utilise le terme "Marqueur". Le cours ADM1421
utilise le terme "lien interne". C'est un lien à un autre endroit sur la même
page Web qui est présentement à l'écran.
Lien à des adresses de courrier électronique.
Lien à des serveurs ftp, des serveurs gopher ou des newsgroups qui sont
d'autres services de l'Internet.
Lien à des documents.

Heureusement, le concept pour créer un lien est toujours le même. Les

prochains exercices consistent à créer des liens à différents éléments de
page Web.
Lien à une page Web

Le premier exercice consiste à créer un lien à la page principale de

l'université du Québec à Montréal.

Faites un bloc avec le mot Ceci de la première ligne de la page Web.

Appuyez sur le bouton .
OU
Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
Appuyez sur les touches Ctrl et K.

La fenêtre pour créer des liens sur du texte apparaît. La première partie
indique sur quel texte le lien sera placé. Dans ce cas, il s'agit du texte
Ceci. Dans la case Adresse, il faut indiquer l'adresse de la page Web, ainsi
que son signet si nécessaire.

Dans la case Adresse, écrivez l'adresse suivante: [Link]

.

Appuyez sur le bouton Info-bulle.

En plus de créer un lien, FrontPage vous permet d'ajouter une description
au lien. Le lecteur de la page aura une meilleure idée de ce qui va arriver
lorsqu'il va sélectionner le lien.

Dans la case Texte de l'Info-bulle, entrez le texte suivant: Site de

l'UQÀM .
Appuyez sur le bouton OK.

Il y a maintenant un lien sur le mot "Ceci" qui vous amènera à la page

principale de l'Université du Québec à Montréal (UQÀM) lorsque vous
cliquerez sur ce lien.

Il faut cependant faire attention à l'adresse que l'on donne au lien. Si le

lien est pour une autre page Web du même site, il est préférable d'écrire
seulement le nom de la page ([Link] par exemple).

Cependant, si la page Web est sur un autre site, vous n'avez pas le choix
d'écrire l'adresse complète. Cette adresse commence toujours par http://
qui est le nom du service pour le World Wide Web (HyperText Transfert
Protocol). Ensuite il y a le nom du serveur où se trouve cette page. Pour
l'exemple, il s'agit de [Link] . Pour terminer, il y a le nom de la
page Web.

S'il n'est pas indiqué, le navigateur va automatiquement chercher le

fichier [Link] . C'est généralement un fichier caché qui contient la
liste des fichiers du répertoire (ou dossier). Il vous est cependant possible
de sauvegarder un fichier sous ce nom. Celle-ci sera dont la page par
défaut et devrait donc être la page principale du site. C'est d'ailleurs le cas
pour ce site.

Lien à un signet.

Le prochain exercice consiste à créer un lien à une autre partie de la

même page Web. C'est aussi appelé un "bookmark" en anglais aussi
appelé un signet ou un lien interne. Il faut premièrement placer un signet
sur la page pour ensuite créer un lien sur celui-ci.

Placez le curseur à la fin de la page Web.

Appuyez sur la touche Entrée une trentaine de fois.

Ceci est pour s'assurer que le début de la page Web ne soit pas visible en
même temps sur l'écran. Le lien sera sur cette première ligne. Il faut
maintenant écrire un peu de texte avant d'insérer le signet.

Écrivez le texte suivant: Ceci est la fin de la page Web.

Du menu Insertion, sélectionnez l'option Signet.

OU
Appuyez sur les touches CTRL et G.
Il faut maintenant donner un nom représentatif au signet. Afin de ne pas
donner un même nom à deux signets, vous avez en dessous la liste des
signets dans cette page. Puisque c'est le premier signet la liste est
présentement vide.

Dans la case Nom du signet, écrivez fin.

Appuyez sur le bouton OK.

L'icone suivant va apparaître pour indiquer qu'il y a un signet à cet

endroit.

Pour modifier le signet:

Sélectionnez l'icone.
Du menu Format, sélectionnez l'option Propriétés.
OU
Appuyez sur les touches Alt et Entrée.

Maintenant que le signet est inséré, la prochaine étape consiste à créer un

lien sur celui-ci.

Placez le curseur sur la première ligne de la page Web.

Faites un bloc avec le mot Web.
Appuyez sur le bouton .
OU
Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
Appuyez sur les touches Ctrl et K.

La fenêtre des liens va s'ouvrir.

 Du volet des liens hypertexte, sélectionnez l'option Emplacement dans
ce document.
De la liste des signets disponibles, sélectionnez le signet fin.
Appuyez sur le bouton OK.

La prochaine fois que vous cliquerez sur le lien, il se rendra à la fin de la

page Web. Vous pouvez mettre plusieurs signets pour vous rendre à
plusieurs endroits sur une même page Web; même le début.

Lien au courrier électronique

Il est aussi possible de créer un lien sur une adresse de courrier

électronique. Le prochain exercice consiste à créer un lien à votre adresse
de courrier électronique. Si vous ne connaissez pas ou n'avez pas
d'adresse de courrier électronique, utilisez l'adresse fictive suivante :
[Link]@[Link] .

Écrivez le texte suivant : Vous pouvez me rejoindre à l'adresse

suivante : [Link]@[Link] .
Faites un bloc avec l'adresse de courrier électronique.

Appuyez sur le bouton .

OU
Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
Appuyez sur les touches Ctrl et K.

La fenêtre pour les liens va s'ouvrir.

 Du volet des liens hypertexte, sélectionnez l'option Adresse
électronique.
Dans la case Adresse électronique, entrez l'adresse fictive donnée
auparavant ([Link]@[Link]).

FrontPage va automatiquement ajouter le texte "[Link] devant l'adresse

de courriel. Ceci est pour faire la distinction entre un lien à une page Web,
un lien Internet et une adresse de courriel. Vous pouvez aussi déterminer
à l'avance le sujet du message dans la case Objet.

Appuyez sur le bouton OK.

Votre page Web a maintenant un lien à une adresse de courrier

électronique. Mais attention! Ce lien fonctionnera seulement si le lecteur
de la page a entré certaines informations dans le navigateur tel que : son
nom, son adresse de courrier électronique, le nom de son serveur de
courrier électronique et son numéro de compte. Certains navigateurs vous
permettent aussi d'entrer votre mot de passe à l'avance.

La raison est simple, il est impossible d'envoyer sur l'Internet des

messages " anonymes ". Donc, ses informations sont nécessaires. C'est
aussi pour cette raison que l'on écrit généralement l'adresse de courrier
électronique et qu'on crée un lien sur celui-ci. Si le lecteur ne peut pas ou
ne veut pas entrer ses coordonnées, il peut toujours écrire l'adresse pour
lui envoyer un message un peu plus tard.

Lien à un document

Un navigateur est normalement seulement capable d'ouvrir un fichier de

format HTML, une page Web ainsi que les images de format .GIF, .JPG et "
PNG . Il y a cependant quelques exceptions. Les navigateurs peuvent
s'améliorer avec des " plug-ins "; des logiciels qui ajoutent des
fonctionnalités aux navigateurs. Par exemple, Acrobat Reader permet
d'ouvrir des fichiers de format .PDF. Le module FLASH de Macromedia
permet de voir des animations sur des pages Web. Il y a aussi des
modules complémentaires pour voir des mondes virtuels (en 3
dimensions) ou avoir de la musique, de la vidéo etc. Pour tout autre genre
de fichier, le navigateur va vous demander s'il doit l'ouvrir avec l'un des
logiciels installés sur l'ordinateur ou sauvegarder le document sur une
disquette ou un disque dur.

Le prochain exercice consiste à créer un lien sur une présentation

PowerPoint. Mais le concept s'applique pour tout genre de document.

Écrivez le texte suivant : Ceci est un lien à un document.

Faites un bloc avec le mot document.
Appuyez sur le bouton .
OU
Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
Appuyez sur les touches Ctrl et K.

Dans la case des liens, écrivez le nom du document. Pour les besoins de
l'exercice, écrivez : [Link] .
Appuyez sur le bouton OK.

Au moment où vous cliquerez sur ce lien à partir d'un navigateur, celui-ci

vous demandera s'il doit ouvrir ou sauvegarder le document.

Pour terminer la section sur les liens, il faut mentionner qu'il est possible
de créer des liens vers d'autres services de l'Internet. Vous pouvez créer
des liens à des serveurs ftp [Link] à des serveur gopher
gopher://nomduserveurgopher, à des newgroups
ne[Link] Il suffit d'écrire dans la case des liens le
nom du service (ftp, gopher, news) suivi de ":// " et l'adresse du serveur ou
du newsgroup. Voici quelques exemples.

[Link]
gopher://
ne[Link]

Les boutons de navigation

Un bouton de navigation est en fait qu'une image pertinente avec un lien.

Que veut-on dire par une image pertinente? C'est une image qui incite le
lecteur de la page à appuyer sur celle-ci pour avoir une action: se déplacer
vers une autre page, un autre lieu, ouvrir un document, un lien de courrier
électronique ou un autre service. Au bas de chacune des pages Web de ce
site, il y a des boutons de navigation pour se déplacer d'une page à
l'autre. Aussi, la page principale de ce site contient une image qui vous
permet d'accéder à plusieurs pages Web. L'option de pouvoir créer des
liens sur des parties d'images s'appelle en anglais un "imagemap". Cette
option n'est pas disponible dans FrontPage.

Le prochain exercice consiste à insérer un bouton de navigation sur votre

page Web. En fait, une image avec un lien.

Appuyez sur le bouton.

OU
Du menu Insertion, sélectionnez les options Image et À partir d'un
fichier.
Sélectionnez le lecteur où se trouve l'image recherchée. Pour l'exercice,
sélectionnez le lecteur A (disquette 3½).
Sélectionnez le répertoire (ou dossier) où se trouve le fichier. Pour cet
exercice, il n'y en a pas.
De la liste des images du répertoire, sélectionnez le fichier de l'image.
Pour l'exercice, sélectionnez le fichier [Link] .
Appuyez sur le bouton OK.

Vous pouvez ajuster les propriétés de l'image à votre choix.

L'image suivante va apparaître.

Il reste que mettre un lien sur cette image.

Cliquez sur l'image.

Appuyez sur le bouton .

OU
Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
Appuyez sur les touches Ctrl et K.
 Dans la case Lien to page, entrez l'adresse suivante:
[Link] .
Appuyez sur le bouton OK.

En plus de se rendre à la page Web, on aurait pu se rendre à un endroit

spécifique de la page marqué par les signets.

Lien sur une partie d'une image: imagemap

En plus d'être capable d'avoir des liens sur du texte et des images, il est
aussi possible d'avoir des liens sur des parties d'images. Cela s'appelle un
"imagemap". Sur la barre d'outils d'images, il y a les outils nécessaires
pour "activer" une partie d'une image en lien. Il faut premièrement avoir
une image. La prochaine partie de la page consiste à prendre une image
parmi ceux offert par Office pour ensuite créer un imagemap sur lequel il y
a aura des liens hypertextes.

Du menu Insertion, sélectionnez les options Image et Image Clipart.

Le volet Microsoft devrait apparaître à la droite de l'écran et vous offrir
une recherche sur une image qui pourrait répondre à vos besoins. Vous
pouvez aussi filtrer les sections pour rechercher seulement les sections
que vous avez besoin. S'il n'y a pas de résultats intéressants, vous pouvez
toujours rechercher parmi la bibliothèque multimédia en ligne si vous
pouvez vous connecter à l'Internet.

Dans la case Rechercher le texte, entrez le texte animal.

Appuyez sur le bouton Rechercher.
 Cliquez sur l'image désirée.
OU
Appuyez sur le bouton à la droite de l'image.
Sélectionnez l'option Insérer.

L'image va s'insérer à l'endroit où se trouve le curseur à ce moment.

Cliquez sur l'image.

La barre d'outils Images va apparaître. Elle offre des options pour gérer les
images ainsi que pour créer des liens sur des parties d'images. Il y a trois
types de formes que vous pouvez choisir: rectangulaire, circulaire ou
polygonale. Les trois types de formes seront utilisés sur l'image.

De la barre d'outils Images, sélectionnez l'option .

 Encadrez la cage d'animal.

Dès que vous avez relâché le bouton gauche de la souris, la fenêtre des
liens hypertexte va apparaître. Comme vous l'avez plus tôt sur cette page,
vous pouvez créer un lien sur une page Web, un lien à l'intérieur de la
page, un courriel ou un autre service.

Dans la case Adresse: entrez l'adresse du site Web suivant:

[Link] .
Appuyez sur le bouton OK.

Le prochain exercice consiste à utiliser la forme circulaire.

De la barre d'outils Images, sélectionnez l'option .

Placez le pointeur au milieu de la forme que vous voulez encadrer.

En gardant un doigt sur le bouton gauche de la souris, déterminez le
diamètre de la forme que vous avez besoin.
Dès que vous relâchez le bouton de la souris, la fenêtre des liens
hypertexte va apparaître.

Dans la case Adresse, entrez l'adresse de votre choix.

Appuyez sur le bouton OK.

Il reste la forme polygonale. La prochaine partie consiste à encadrer de

plusieurs points la petite fille et son chat. Vous pouvez mettre autant de
points que vous voulez. Il suffit de cliquer avec le bouton gauche de la
souris pour placer les points où vous voulez. Le denier point pour encadrer
l'image doit toucher le premier que vous avez fait. Une autre façon de
terminer l'encadrement est de faire un double-clic. Le dernier point va
rejoindre le premier pour terminer l'encadrement.

De la barre d'outils Images, sélectionnez l'option .

Encadrez l'image avec autant que points que vous juger nécessaire.

Pour terminer l'encadrement, n'oubliez pas de toucher le premier point ou

de faire un double-clic.

Dès que l'encadrement est terminé, la fenêtre des liens hypertexte va

apparaître.

Dans la case Adresse, entrez l'adresse de votre choix.

Appuyez sur le bouton OK.

Vous avez placé les types de formes de liens possibles sur une même
image. Selon la situation, vous pouvez maintenant utiliser la forme qui
répondra le mieux à vos besoins.

Une petite note au sujet des images de la librairie Office. Ces images ne
sont pas dans les formats permis sur le World Wide Web ( GIF, JPEG, PNG ).
Donc, au moment d'enregistrer votre page Web, FrontPage va vous
demander de convertir les images dans l'un de ces formats.
N'oubliez pas de donner un nom approprié à l'image au lieu de celui fourni
par FrontPage.

Une fois que vous êtes satisfait de toutes les options, appuyez sur le
bouton OK.

Les tableaux

Très souvent, les tableaux sont utilisés pour afficher de l'information pour
informer ou pour comparer. Mais, dans le format HTML, ils ont aussi une
autre fonction: pouvoir aligner des colonnes de texte. En effet, les pages
Web n'ont pas de commandes pour les colonnes ou les tabulations. Mais il
est possible d'utiliser les cellules d'un tableau pour simuler des colonnes. Il
ne faut pas oublier de ne pas mettre un contour pour que l'effet soit
complet.

Le prochain exercice consiste à créer un petit tableau avec plusieurs des

options disponibles. Pour commencer, il faut créer un tableau de trois
colonnes par trois lignes. Voici deux façons de réaliser le tableau initial.
Aussi, ce tableau doit être limité à 400 pixels de largeur.

Appuyez sur le bouton .

 En gardant un doigt sur le bouton gauche de la souris, sélectionnez trois
colonnes et trois lignes.
Une fois sélectionnée, relâchez le bouton gauche de la souris.

Le tableau est créé. Mais il prend toute la largeur de l'écran. Il faut

modifier quelques options dans les propriétés du tableau.

Du menu Tableau, sélectionnez les options Propriétés du tableau et

Tableau.

Sélectionnez les options tel que l'image ci-dessus.

Appuyez sur le bouton OK.

OU
Du menu Tableau, sélectionnez les options Insérer et Tableau.

La fenêtre suivante va apparaître.

 Sélectionnez les options tel que l'image ci-dessus.
Appuyez sur le bouton OK.

Après toutes ces options pour composer le tableau, voici le résultat.

Du menu Tableau, sélectionnez les options Insérer et Légende.

Une ligne supplémentaire va apparaître au-dessus du tableau dans lequel

vous pourrez entrer une description.

Les prochains exercices consisteront à personnaliser le tableau pour

mieux répondre aux besoins ainsi que pour vous démontrer ses autres
possibilités.

Écrire le texte dans la case d'introduction

Écrivez le texte suivant dans la case de la légende: Activités de la

journée.

Changer la largeur d'une colonne.

À sa conception, FrontPage donne une largeur identique à toutes les

colonnes du tableau. Le prochain exercice consiste à changer la largeur de
chacune des colonnes du tableau.
 Placez le curseur dans la première cellule du tableau.
Du menu Tableau, sélectionnez les options Sélectionner et Colonne.
Du menu Tableau, sélectionnez les options Propriétés du tableau et
Cellule.

Sélectionnez les options tel que l'image ci-dessus.

Appuyez sur le bouton OK.

La première colonne du tableau aura maintenant une largeur de 200

pixels. Mais vous ne verrez pas l'effet immédiatement à cause des options
des autres colonnes. Il faut maintenant répéter cette opération pour la
deuxième et troisième colonne du tableau. Cependant, leur largeur des
deux autres colonnes sera de 100 pixels et non de 200 comme pour la
première colonne. Voici les opérations:

Placez le curseur dans une cellule de la deuxième colonne du tableau.

Du menu Tableau, sélectionnez les options Sélectionner et Colonne.
Du menu Tableau, sélectionnez les options Propriétés du tableau et
Cellule.
De la fenêtre des propriétés des cellules, changez la largeur à 100.
Assurez-vous que l'unité de mesure est En pixels.
Appuyez sur le bouton OK.

Et maintenant, pour la troisième colonne du tableau.

Placez le curseur dans une cellule de la deuxième colonne du tableau.

Du menu Tableau, sélectionnez les options Sélectionner et Colonne.
 Du menu Tableau, sélectionnez les options Propriétés du tableau et
Cellule.
De la fenêtre des propriétés des cellules, changez la largeur à 100.
Assurez-vous que l'unité de mesure est En pixels.
Appuyez sur le bouton OK.

Insérer une rangée dans le tableau

Pour avoir assez d'espace pour écrire tout le texte dans le tableau, il faut
ajouter une ligne supplémentaire.

Placez le pointeur dans n'importe quelle cellule de la première ligne.

Du menu Tableau, sélectionnez les options Insérer et Lignes ou
colonnes.

Sélectionnez les options tel que l'image ci-dessus.

Appuyez sur le bouton OK.

La rangée va s'insérer en dessous de la ligne où se trouve présentement le

curseur.

Fusionner plusieurs cellules

Contrairement à d'autres éditeurs de pages Web, FrontPage "fusionne"

plusieurs cellules ensemble. Cependant, le logiciel vous cache un peu la
réalité. En format HTML, il faut supprimer les cellules inutiles pour ensuite
"étendre" une cellule par dessus plusieurs lignes ou colonnes. En code
HTML, le résultat est le même. Mais il est plus facile de comprendre et
d'utiliser "fusionner" des cellules que d'en "étendre" une.

Sélectionnez toutes les cellules de la première ligne du tableau.

 Du menu Tableau, sélectionnez l'option Fusionner les cellules.

Ceci est intéressant pour écrire des titres ou de longues descriptions.

Fusionner peut aussi s'appliquer autant aux colonnes et aux lignes.

Changer la couleur d'une cellule

Placez le pointeur dans la première cellule du tableau.

Du menu Tableau, sélectionnez les options Propriétés et Cellule.

Sous la section Arrière-plan, sélectionnez la couleur et l'option Autres

couleurs.
Cette fenêtre va apparaître et vous offrir une palette de couleurs. Mais il
possible de choisir parmi une palette de 16 millions de couleurs.

Appuyez sur le bouton Personnaliser.

Vous pouvez choisir parmi les couleurs de base ou cliquer dans la zone des
couleurs. Vous pouvez aussi changer l'intensité en déplaçant le triangle à
la droite de la barre de luminosité. Mais l'élément le plus important est la
sélection RGB pour rouge, vert et bleu: les trois couleurs de base avec la
lumière. Il est possible de combiner les trois couleurs de bases en
changeant les valeurs de ceux-ci entre 0 et 255. En tout, il y a plus de 16
millions de combinaisons possibles.

Pour les besoins de la démonstration:

Entrez la valeur 255 dans la case Rouge.

Entrez la valeur 102 dans la case Vert.
Entrez la valeur 102 dans la case Bleu.
Appuyez sur le bouton OK.

Vous remarquerez que FrontPage a entré une valeur en hexadécimale

dans la case Valeur. Celle-ci varie de 0 à F (16 valeurs possibles). Avec
deux caractères, il est possible d'avoir 256 combinaisons pour une
couleur. Avec 6 caractères, deux pour le rouge, le vert et le bleu, c'est 16
millions de combinaisons possibles.

Appuyez sur le bouton OK.

À par de la première ligne fusionnée, sélectionnez la première colonne du

tableau.
Sous la section Arrière-plan, sélectionnez la couleur et l'option Autres
couleurs.
Entrez le texte suivant dans la case Valeur: FFCC33 .
Appuyez sur le bouton OK.

Sélectionnez les autres cellules du tableau.

Sous la section Arrière-plan, sélectionnez la couleur et l'option Autres
couleurs.
Entrez le texte suivant dans la case Valeur: FFFF99 .
Appuyez sur le bouton OK.

Comme vous venez de l'accomplir, chaque cellule peut avoir une couleur
de fond différente. Si vous voulez pratiquer les éléments que vous venez
de voir, essayer de répliquer le tableau suivant.

Même tableau à partir de Netscape Communicator.

Certaines cellules du tableau ci-dessus n'apparaissent pas parce ce que le
contenu des cellules est vide. Il suffit de mettre un espace dans les
cellules vides pour qu'elle apparaisse.

Les propriétés de la page Web

Comme pour le texte, les images, les liens et les autres éléments de la
page Web, la page Web a elle aussi ses propres caractéristiques ou
propriétés. La partie qui suit consiste à vous démontrer ces propriétés et
comment en prendre avantage.

Du menu Fichier, sélectionnez l'option Propriétés.

Si cela n'est pas déjà fait, sélectionnez l'onglet Général.

L'écran suivant va apparaître.

La case titre vous permet de donner un titre à votre page Web. Celui-ci va
apparaître dans la barre titre du navigateur de pages Web au haut de
l'écran.

Sélectionnez l'onglet Arrière-plan.

Cette fenêtre a déjà été décrite plus tôt sur cette page. Elle vous permet
de déterminer le fond de page, ou l'arrière-plan, ainsi que la couleur du
texte et des liens.

Cependant, il faut faire attention de ne pas choisir en aucun moment la

couleur blanche pour le texte ordinaire. Ceci peut donner une belle page
Web. Mais, au moment de l'impression de la page Web, le navigateur
n'imprime pas le fond de la page. Et surtout, le texte en blanc ne sort pas
sur une feuille blanche. Donc, la page Web que l'utilisateur aurait voulu
garder en référence n'est pas imprimable si la couleur du texte est
blanche. Il est toujours possible au lecteur de désactiver les couleurs
prédéterminées par le concepteur (voir préférences et polices de
caractères pour ). Mais ceci rend la tâche du lecteur plus difficile pour rien.

Sélectionnez l'onglet Marges.

Sélectionnez l'onglet Personnaliser.

De la section Variables utilisateur, appuyez sur le bouton Ajouter.

L'une des variables utiliser par les sites de recherche tel que Google,
Altavista, MSN et plusieurs autres s'appelle keyword. On ajoute les mots-
clés qui décrient le contenu de la page Web. Ces mots doivent être
séparés par une virgule sans espaces.

Appuyez sur le bouton OK.

Cette variable sera ajoutée à la page Web. Une autre variable intéressante
pour les sites de recherche s'appelle Description. Vous pouvez ensuite
entrer une courte description de votre page jusqu'à 256 caractères. Les
outils de recherche vont afficher la description en même temps que le
résultat de la recherche.

D'autres variables intéressantes sont Author pour donner le nom du

concepteur de la page Web. Il y a aussi Copyright pour donner le nom de
la compagnie ainsi que l'année de la mise en place des droits.
Généralement, c'est l'année de la création de la page Web. Il y a aussi la
variable Classification pour aider les sites de recherche à classifier votre
page Web parmi leurs catégories (Internet, ordinateurs, éducation ...).
Pour vous donner une idée des catégories des sites de recherche, allez à
la page principale de ces sites. Vous verrez leurs catégories et pourrez
ensuite décider dans laquelle votre page Web serait mieux située.

Ces commandes supplémentaires pour décrire une page ou pour ajouter

des actions s'appellent des META Tags. Vous retrouverez une liste plus
complète à la page des codes HTML sous la section Meta Tags ainsi que
leurs possibilités.

Sélectionnez l'onglet Langue.

L'option de langue permet aussi aux outils de recherche de déterminer la
langue utilisée dans le document. Les options de codage HTML aide le
navigateur à afficher la bonne série de caractères. Cela pourrait bien être
en occidental, arabique, asiatique ou autre.

Sélectionnez l'onglet Groupe de travail.

L'un des avantages de FrontPage est d'être capable de développer un site
Web en groupe. Chaque membre peut contribuer à sa façon. Cependant, il
faut être capable de coordonner les actions des membres et d'assigner
des tâches à chacun. Malheureusement, je n'ai pas eu le temps
d'approfondir cette section.

Sauvegarder la page Web

Le résultat tout ce travail est d'être capable de sauvegarder vos pages

Web pour ensuite les "publier" sur l'Internet. Cette partie de la page
consiste simplement à sauvegarder le résultat de tous les exercices que
vous avez accompli jusqu'à présent. Ceci vous permettra ensuite de voir le
résultat et de transférer le tout à un répertoire qui sera accessible à tous
les lecteurs de pages Web.

Du menu Fichier, sélectionnez l'option Enregistrer sous.

Après avoir choisi le lecteur et le répertoire dans lequel vous allez

sauvegarder votre page Web, il est temps de donner un nom à votre page
Web.

Pour les besoins de l'exercice, entrez dans la case Nom: [Link].

Appuyez sur le bouton Enregistrer.

Ouvrir un site Web

 Du menu Fichier, sélectionnez les options Ouvrir et Site Web.
Sélectionnez le dossier où se retrouve votre site Web.

Aperçu de la page Web.

Voir le résultat de la page Web est important. Ceci est votre chance de
voir votre résultat et comment les lecteurs vont interpréter votre page
Web. C'est aussi le temps de voir les défauts de la page et de les corriger
avant que le grand public la voie.

FrontPage va possiblement vous demander de sauvegarder la page si vous

avez apporté des corrections. Vous devez sauvegarder vos modifications
avant de pouvoir continuer. Une fois que vous verrez la page, vous
pourrez vérifier quelques points.

Du menu Fichier, sélectionnez l'option Aperçu dans le navigateur.

Sur l'ordinateur sur lequel je travaille, les deux navigateurs les plus
populaires sont plus installés. FrontPage demande dans quel logiciel je
veux avoir l'aperçu de la page Web ainsi que sa résolution d'écran. Je vous
suggère très fortement d'essayer vos pages dans les deux à des
résolutions différentes. Vous pourriez avoir des surprises autrement.

Vérifiez le fonctionnement des liens: le mot "Ceci" à la page principale de

l'UQÀM, le mot "Page" à la fin de la page Web et le bouton de navigation à
la page de conception de page Web avec FrontPage.
Vérifiez l'alignement de l'image à la droite de l'écran.
Vérifiez la présentation du tableau.

Si le résultat n'est pas ce que vous attendiez, revérifiez les instructions de

cette page et apportez les corrections si nécessaire.

Publier la page Web

Il reste la dernière étape; celle de publier la page Web pour que le public
puisse la voir. Mais auparavant, il faut que vous ayez un compte qui soit
disponible au public. Sinon, cela est impossible de transférer votre page
Web et les images pour les rendre disponibles à tous.

Entrez l'adresse de votre site Web.

Si vous n'êtes pas certain de l'adresse, vous pouvez utiliser l'option

Parcourir.

Appuyez sur le bouton OK.

Mon serveur ne supporte par les extensions FrontPage. Donc, il m'est

impossible d'aller plus loin. Si vous voulez vraiment utiliser l'option de
publication de FrontPage, il faut que vous vous assurer que votre
fournisseur d'accès à l'Internet (FAI) supporte les extensions FrontPage.
Ceux-ci l'annonce généralement dans leurs promotions.

Vous pouvez toujours le service FTP pour transférer les fichiers et les
dossiers de votre site Web à votre répertoire public. Je vous recommande
d'utiliser la procédure de transfert de fichiers en utilisant WS-FTP.

Problème
FrontPage a de la difficulté avec les liens à des pages d'adresses relatives.
Le problème des liens n'apparaît pas lorsque vous avez un lien à une
adresse absolue, qui commence par un [Link] mais une adresse d'une
autre page Web qui se retrouve pas dans le même dossier ou le même
lecteur que sur la page que vous travailler en ce moment. C'est pour cela
qu'il est préférable de regrouper tous les documents du site dans un
même dossier. Ce dossier peut avoir des sous dossier tel que pour les
images ou autres dossiers de votre choix.

Au moment de commencer à travailler sur votre site, sélectionnez du

menu Fichier l'option Ouvrir site Web, sélectionnez le dossier dans lequel
se retrouve tous vos documents et appuyez sur le bouton Ouvrir. Si vous
devez ajouter des documents, pages Web, images ou autres éléments
provenant de l'extérieur, il est préférable d'utiliser l'option importer sous
le menu Fichier. Cette option a déjà été expliquée au début de ce
document.

Avantage

Mais le regroupement des éléments qui composent votre site Web a aussi
ces avantages. Il est plus avantageux de gérer le site de cette façon. Voici
un petit exemple.

Renommer un fichier

Du volet Affichage, sélectionner Dossiers.

Sélectionnez le dossier images.
Sélectionnez l'image [Link] .

Appuyez sur le bouton droit de la souris.

Du menu contextuel, sélectionnez l'option Renommer.
OU
Cliquez une seconde fois sur le fichier.

Vous pourrez ensuite changer le nom du document.

Changez le nom à [Link] .

Appuyez sur la touche Entrée.

Je vous rappelle que le noms des fichiers ne doivent pas avoir d'espaces,
d'accents, de caractères spéciaux tel que _+-; ou des majuscules.
 Appuyez sur le bouton Oui.

FrontPage va prendre quelques instants pour mettre à jour tous les

documents. Le logiciel va aussi vous demander d'apporter des
changements si vous déplacez ou retirez des documents . Ceci vous rend
la gestion du site plus simple.

Vérifier les liens

Une autre option avantageuse de FrontPage est de vous permettre de

vérifier tous les liens de votre site et de vous aviser si ces liens ne
fonctionnent pas. Il n'y a rien de plus frustrant pour un utilisateur que de
se retrouver devant un lien qui ne fonctionne pas.

Du volet Affichage, sélectionnez l'option Rapports.

De la liste des rapports, sélectionnez les options Problèmes et Liens

hypertexte rompus.

OU
 Du menu Affichage, sélectionnez les options Rapports, Problèmes et
Liens hypertexte rompus.

La première fois, FrontPage va vous demander de confirmer la vérification

des liens.

Appuyez sur le bouton Oui.

Les formulaires

Il y a des moments ou les Internautes qui voudraient vous contacter ne

peuvent pas le faire par courrier électronique (courriel). Il y a aussi des
moments ou vous voulez recevoir de l'information mais sous une forme
structuré. Les formulaires sont parfait pour ces situations. Les prochains
exercices consistent à créer un formulaire avec plusieurs des éléments
que l'on peut y retrouver.
 Du menu Insertion, sélectionnez les options Formulaire et
Formulaire.

Un cadre va apparaître avec les bouton pour envoyer le formulaire ou pour

vider son contenu et recommencer. Le formulaire est présentement vide.
Vous devez agrandir ce cadre pour ajouter tous les champs que vous
aurez besoin dans le formulaire.

Placez le pointeur devant le bouton Envoyer.

Appuyez sur la touche Entrée.

La formulaire a été agrandi un peu. Vous pouvez commencer à mettre des

éléments de votre formulaire et continuer à l'agrandir au besoin.

Placez le pointeur au début du formulaire.

Entrez le texte Nom et un espace.

Il faut entrer le premier champ du formulaire. Cela sera une zone de texte
qui va conserver le nom de la personne qui envoie le formulaire.

Zone de texte

Du menu Insertion, sélectionnez les options Formulaire et Zone de

texte.
La zone des texte va apparaître à côté du texte nom. FrontPage vous offre
plusieurs façons de changer les propriétés de ce champ.

Faites un double-clic à l'intérieur du champ.

OU
Sélectionnez le champ.
Du menu Format, sélectionnez l'option Propriétés.
OU
Appuyez sur les touches Alt et Entrée.
OU
Appuyez sur le bouton droit de la souris.
Du menu contextuel, sélectionnez l'option Propriétés du champ de
formulaire.

Dans la case Nom, entrez le texte Nom.

Vous pouvez aussi entrer du texte que l'usager pourra conserver ou

changer selon le besoin dans la case Valeur initiale. Vous devez aussi
changer la taille de la zone pour pouvoir entrer un peu plus de texte.
Initialement la valeur est à 20 caractères. Mais vous pouvez le changer en
tout temps. L'option Champ mot de passe permet de cacher ce que vous
écrivez en replaçant le texte par des astérisques (*). Vous pouvez aussi
changer l'orientation de l'entrée de texte. Cela est surtout pratique pour
des numéros de téléphone.

Changer la valeur de la case Largeur en caractères à 25.

Il y a encore quelques propriétés que vous pouvez changer.

Appuyez sur le bouton Style.

Du bouton Format, sélectionnez l'option Police.
Il vous est possible par exemple de changer la police de caractère ainsi
que d'autres options.

De la case Police, sélectionnez la police de caractère Arial.

Appuyez sur le bouton OK.

C'est la police de caractère Arial qui sera utilisé pour afficher le contenu de
cette zone de texte. Cela va permettre de la distinguer du reste du
formulaire.

Pour revenir aux propriétés du champ, appuyez encore une fois sur le
bouton OK.

FrontPage vous offre encore quelques options que vous ne retrouvez pas
dans plusieurs autres éditeurs de sites Web.

Appuyez sur le bouton Valider.

Vous pouvez aussi entrer des critères que l'Internaute doit respecter pour
que le formulaire soit accepté. Le contenu doit être seulement du texte ou
des chiffres. Le contenu de la zone de texte doit avoir un certain nombre
de caractères ou celui-ci doit être entre certaines valeurs (0 à 100 par
exemple).

Appuyez sur le bouton OK.

Il est maintenant le temps d'ajouter une seconde zone de texte au

formulaire.

Entrez le texte Courriel suivi d'un espace.

Du menu Insertion, sélectionnez les options Formulaire et Zone de
texte.

L'adresse de courrier électronique est souvent demandé dans un

formulaire. Le Webmestre, gestionnaire du site Web, ou une personne
responsable dans l'entreprise pourra ensuite contacter l'Internaute pour lui
répondre ou pour avoir plus d'informations.

Dans la case Nom, entrez Courriel.

Chaque variable du formulaire doit avoir un nom distict.

Dans la case Largeur en caractères, entrez 30.

Appuyez sur le bouton OK.
Appuyez sur la touche Entrée.
Le prochain élément du formulaire sera un groupe d'option. Plusieurs
options sont offerts à l'Internaute. Il y peu prendre qu'un choix du groupe.
La case d'option, auparavant appelé le bouton radio, sera utilisé en
combinaison avec le groupe d'option. Vous pouvez utiliser la case à cocher
ou la case d'option seul ou avec un groupe d'option. Pour que cela
fonctionne, il faut que les cases d'option ou les cases à cocher soient à
l'intérieur de la zone de groupe.

Entrez le texte Avez-vous déjà créer un formulaire?

Appuyez sur la touche Entrée.

Zone de groupe

Du menu Insertion, sélectionnez les options Formulaire et Zone de

groupe.

Placez le pointeur dans la zone de groupe.

Du menu Insertion, sélectionnez les options Formulaire et Case
d'option.

Il faut maintenant changer les propriétés de ce champ.

Faites un double-clic à l'intérieur du champ.

OU
Sélectionnez le champ.
Du menu Format, sélectionnez l'option Propriétés.
OU
Appuyez sur les touches Alt et Entrée.
OU
Appuyez sur le bouton droit de la souris.
Du menu contextuel, sélectionnez l'option Propriétés du champ de
formulaire.
 Dans la case Nom du groupe, entrez le texte Formulaire.
Dans la case Valeur, entrez le texte Jamais.

Le contenu du champ valeur est ce qui vous sera transmit dans le

formulaire. Il faut que champ champ du groupe ait une valeur différente.

Pour l'Ordre de tabulation, sélectionné l'option Sélectionnée.

Ce champ sera la valeur initiale du groupe. L'internaute pourra toujours la

changé si désiré.

Appuyez sur le bouton OK.

Entrez le texte Jamais et un espace.

Il faut encore entrer deux autres champ dans ce groupe.

Assurez-vous que le pointeur soit au bout de la zone de groupe.

Du menu Insertion, sélectionnez les options Formulaire et Case
d'option.
Sélectionnez les propriétés du champ.
Dans la case Nom du groupe, entrez le texte Formulaire.
Dans la case Valeur, entrez le texte 1 fois.
Appuyez sur le bouton OK.
Entrez le texte une fois et un espace.

Assurez-vous que le pointeur soit au bout de la zone de groupe.

Du menu Insertion, sélectionnez les options Formulaire et Case
d'option.
Sélectionnez les propriétés du champ.
Dans la case Nom du groupe, entrez le texte Formulaire.
Dans la case Valeur, entrez le texte Plusieurs fois.
Appuyez sur le bouton OK.
Entrez le texte plusieurs fois et un espace.

Placez le pointeur à l'extérieur de la zone de groupe.

Appuyez sur la touche Entrée.

Liste déroulante
Le prochain élément qui sera introduit dans le formulaire sera une liste
déroulante. Il permet à l'Internaute de choisir parmi une liste sans que
celle-ci prend beaucoup d'espace sur le formulaire. Ceci est encor eplus
apprécié lorsque la liste est longue.

Entrez le texte Quel est votre niveau de connaissances en

informatique?
Appuyez sur les touches MAJ (Shift) et Entrée.

Du menu Insertion, sélectionnez les options Formulaire et Zone de

liste déroulante.

Il faut maintenant changer les propriétés du champ.

Faites un double-clic à l'intérieur du champ.

OU
Sélectionnez le champ.
Du menu Format, sélectionnez l'option Propriétés.
OU
Appuyez sur les touches Alt et Entrée.
OU
Appuyez sur le bouton droit de la souris.
Du menu contextuel, sélectionnez l'option Propriétés du champ de
formulaire.
Le contenu de la liste est présentement vide. Il faut maintenant écrire le
texte ainsi que les valeurs qui seront dans la liste déroulante.

Appuyez sur le bouton Ajouter.

Dans la case Choix, entrez le texte Débutant.

C'est le texte qui sera inscrit dans la liste. À moins que vous le changez,
cela sera aussi la valeur. Il peut arriver que l'on veut une bonne
description suivi d'une valeur simple; sans description.

Assurez-vous que l'option de l'État initial soit Sélectionné.

Appuyez sur le bouton OK.

Il faut entrer toutes les valeurs requises pour cette liste déroulante.

Appuyez sur le bouton Ajouter.

Dans la case Choix, entrez le texte Intermédiaire.
Appuyez sur le bouton OK.

Appuyez sur le bouton Ajouter.

Dans la case Choix, entrez le texte Avancé.
Appuyez sur le bouton OK.

Appuyez sur le bouton Ajouter.

Dans la case Choix, entrez le texte Expert.
Appuyez sur le bouton OK.
La liste est complétée. Vou pouvez toujours revenir dans la liste et
changer les valeurs à votre choix.

Appuyez sur le bouton OK.

Appuyez sur la touche Entrée.

Bouton crochet

Le prochain exercice consiste à ajouter des boutons crochets dans le

formulaire tel que dans l'exemple ci-dessous. Il faudra auparavant insérer
un tableau d'une ligne et de deux colonnes pour simuler des colonnes. Il
ne faudra pas non plus oublier de changer les propriétés de chacun des
boutons crochets.

En dessous de la liste déroulante, entrez le texte suivant: Quels sont les

thèmes de ce site que vous avez lus?
Appuyez sur la touche Entrée.

Avant de pouvoir insérer les boutons crochets, il faut avant créer un

tableau.

Du menu Tableau, sélectionnez les options Insérer et Tableau.

Dans la case Lignes, entrez la valeur 1.

Dans la case Colonnes, entrez la valeur 2.
Dans la case Taille de bordure, entrez la valeur 0.
Activez l'option Spécifier la largeur.
Entrez la valeur 200 dans la case en dessous.
 Spécifiez l'option En pixels.
Appuyez sur le bouton OK.

Le tableau est maintenant créé. La prochaine étape consiste à mettre des

boutons crochets dans ces deux cellules.

Placez le pointeur dans la première cellule du tableau.

Du menu Insertion, sélectionnez les options Formulaire et Case à
cocher.
Faites un double-clic sur la case à cocher.

Il faut changer les propriétés de la case à cocher.

Dans la case Nom, entrez le texte Word.

Dans la case Valeur, entrez le texte Oui.
Assurez-vous que l'option État initial soit Non activée.
Appuyez sur le bouton OK.

Placez un espace et écrivez Word.

Appuyez sur les touches MAJ (Shift) et Entrée.

Ajoutez des boutons crochets pour les champs Excel et Access.

Placez le pointeur dans la seconde cellule et ajouter des bouton crochets
pour les champs PowerPoint, Internet et Informatique.

Le résultat devrait ressembler à ceci.

Espace de texte

Une autre façon d'avoir de l'information des Internautes est de laisser un

espace de texte pour recevoir des commentaires.

Entrez le texte suivant Avez-vous des commentaires sur ce site?

Appuyez sur le touches MAJ (Shift) et Entrée.
Du menu Insertion, sélectionnez les options Formulaire et Espace de
texte.
 Faites un double-clic à l'intérieur du champ.
OU
Sélectionnez le champ.
Du menu Format, sélectionnez l'option Propriétés.
OU
Appuyez sur les touches Alt et Entrée.
OU
Appuyez sur le bouton droit de la souris.
Du menu contextuel, sélectionnez l'option Propriétés du champ de
formulaire.

Dans la case Nom, entrez le texte Commentaires.

Dans la case Largeur en caractères, entrez 50.
Dans la case Nombre de lignes, entrez 6.
Appuyez sur le bouton OK.

Le formulaire est complété. Vous pouvez le déposer sur votre site Web et
commencer à recevoir des commentaires de Internautes.

Créer un cadre

Un cadre, ou "frame" en anglais, est une page Web spéciale qui sépare
l'écran en plusieurs parties. Certaines parties peuvent changer tandis que
d'autres, comme un menu ou une barre de navigation, restent le même.
Les prochains exercices consistent à créer un cadre, changer ces options
ainsi que les deux pages Web initiales pour ce cadre.
Du menu Fichier, sélectionnez les options Nouveau/Nouvelles et Page
ou Site Web.

Le volet des tâches va apparaitre à la droite de l'écran.

De la section Créer à partir d'un modèle, sélectionnez l'option

Modèles de pages.

Sélectionnez l'onglet Cadres.

FrontPage offre plusieurs modèles de cadres selon la situation. L'aperçu

dans le coin inférieur droit vous donne une idée du cadre.

De la liste des cadres possibles, sélectionnez Division verticale.

Appuyez sur le bouton OK.
Le cadre va séparer l'écran en deux parties; celle de gauche et de droite.
Contrairement aux pages Web, un cadre ne contient pas de texte ou
d'images. Le cadre conserve seulement l'information sur la séparation de
l'écran et les pages qui devrait initialement être dans cette page.
FrontPage vous offre donc l'option de créer une nouvelle page qui sera
inséré dans le cadre ou de choisir une page qui existe déjà. Pour les
besoins de cet exercice, deux nouvelles pages seront créées. La première,
qui sera dans le cadre de gauche, aura le menu pour naviguer à travers le
site. La seconde page sera la page d'acceuil du site. Si vous voulez que
votre page d'introduction au site soit la page cadre, vous devrez l'appelez
[Link].

Placez le pointeur dans la case de gauche.

Appuyez sur le bouton droit de la souris.
Du menu contextuel, sélectionnez l'option Propriété du cadre.

Il faut premièrement donner un nom au cadre. Par défaut, FrontPage

donne aux cadres les noms gauche et droite. Mais cela n'est pas
représentatif de son contenu.
 Dans la case Nom, entrez le texte Menu.

Il y a d,autres options qui peuvent être déterminé pour le cadre.

Laissez la case Page initiale vide.

Il est possible de déterminer quel sera la page qui sera initialement placé
dans le cadre. Mais une nouvelle page sera créer dans quelques instants
avec le menu de navigation pour le site.

Changez la largeur du cadre à 170 pixels.

Appuyez sur le bouton OK.

Le prochain exercice consiste à créer la page ayant le menu de navigation

du site.

De la case de gauche, appuyez sur le bouton Nouvelle Page.

Cette page contiendra le menu de navigation avec des liens vers les
sections principales du site. Pour faciliter la tâche, il y aura seulement un
peu de texte avec des liens.

Entrez le texte suivant: MENU.

Appuyez sur la touche Entrée.
Entrez le texte suivant: Accueil.
Appuyez sur les touches MAJ (Shift) et Entrée.
Entrez le texte suivant: Autre page.
Appuyez sur la touche MAJ (Shift) et Entrée.
Entrez le texte suivant: Quitter le cadre.
Appuyez sur la touche Entrée.

Cela suffira pour l'instant. On reviendra plus tard pour ajouter des liens.

De la case de droite, appuyez sur le bouton Nouvelle Page.

Cette page contiendra les informations de la page d'accueil du site. Pour

cet exercice, elle contiendra qu'un peu de texte et des liens.

Entrez le texte suivant: Pade d'accueil.

Appuyez sur la touche Entrée.
Entrez le texte suivant: Liens vers d'autres pages.
Appuyez sur la touche Entrée.
Entrez le texte suivant: Autre page.
Appuyez sur la touche MAJ (Shift) et Entrée.
Entrez le texte suivant: Quitter le cadre.
Appuyez sur la touche Entrée.

Placez le pointeur dans la case de gauche (menu).

Modifier le cadre

Lien vers un autre cadre.

Retour au menu

Lien vers nouvelle page.

Comment retirer le cadre.

Le cadre reste actif jusqu'à ce qu'il soit désactivé.

Planifier un projet
o Visiter des exemples de projets.

o Planifier votre projet. Voici des

sites qui vous aideront : Planifier
votre site Web, Conseils de
conception, Règles de base à
respecter

1. Sur une feuille de papier, dessiner la page portail et les pages

annexes.
Établir sur papier le plan de construction dans un tableau.

Déterminer le nombres de colonnes et de lignes.

Déterminer les cellules à fusionner ou à fractionner
Créer une page web avec l'éditeur

Allez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons créer
notre site dans un éditeur de texte. Vous avez dû en installer suite à mes
conseils dans le premier chapitre : qu'il s'appelle Notepad++, PSpad, jEdit,
vim, TextWrangler... peu importe. Ces logiciels ont un but très simple :
vous permettre d'écrire du texte !

Dans la suite de ce cours, je travaillerai sous Notepad++. Je vais donc

l'ouvrir :

Bon, qu'est-ce qu'on fait maintenant ? Qu'est-ce qu'on écrit sur cette
feuille blanche ?

On va faire un petit essai. Je vous invite à écrire ce qui vous passe par la
tête :

Vous pouvez écrire les mêmes phrases que moi ou ce que vous voulez ; le
but est d'écrire quelque chose.

Maintenant, enregistrons ce fichier. Pour ça, c'est très simple : comme

dans tous les programmes, vous avez un menu Fichier / Enregistrer. Une
boîte de dialogue vous demande où enregistrer le fichier et sous quel nom.
Enregistrez-le où vous voulez. Donnez au fichier le nom que vous voulez,
en terminant par .html, par exemple : [Link].
Je vous recommande de créer un nouveau dossier dans vos documents qui
contiendra les fichiers de votre site. Pour ma part j'ai créé un dossier test
dans lequel j'ai mis mon fichier [Link].

Ouvrez maintenant l'explorateur de fichiers dans le dossier où vous avez

enregistré votre page. Vous y verrez le fichier que vous venez de créer :
L'apparence du fichier dépend de votre navigateur web par défaut. Ici,
l'icône est celle de Google Chrome, mon navigateur par défaut, mais le
fichier a peut-être une autre icône chez vous. Voici par exemple l'icône qui
apparaît selon que votre navigateur principal est Firefox ou Internet
Explorer :

Double-cliquez simplement sur ce fichier et... votre navigateur s'ouvre en

affichant le texte que vous avez écrit !

Ca ne marche pas bien on dirait ! Tout le texte s'affiche sur la même ligne
alors qu'on avait écrit 2 lignes de texte différentes !?

En effet, bien vu !
Le texte s'affiche sur la même ligne alors qu'on avait demandé à l'écrire
sur 2 lignes différentes. Que se passe-t-il ?

En fait, pour créer une page web il ne suffit pas simplement de taper du
texte comme on vient de le faire. En plus de ce texte, il faut aussi écrire ce
qu'on appelle des balises, qui vont donner des instructions à l'ordinateur
comme "aller à la ligne", "afficher une image", etc.

Les balises et leurs attributs

Bon, tout ça était trop facile. Evidemment, il a fallu que ces satanés
informaticiens s'en mêlent et compliquent les choses. Il ne suffit pas
"simplement" d'écrire du texte dans l'éditeur, il faut aussi donner des
instructions à l'ordinateur. En HTML, on passe pour cela par des balises.

Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci
sont invisibles à l'écran pour vos visiteurs, mais elles permettent à
l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de "chevrons",
c'est-à-dire des symboles < et >, comme ceci : <balise>

À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte autour

d'elles. Elles veulent dire par exemple : "Ceci est le titre de la page", "Ceci
est une image", "Ceci est un paragraphe de texte", etc.

On distingue deux types de balises : les balises en paires et les balises

orphelines.

Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi

elles ressemblent :

Code : HTML - Sélectionner

<titre>Ceci est un
1
titre</titre>

On distingue une balise ouvrante (<titre>) et une balise fermante

(</titre>) qui indique que le titre se termine. Cela signifie pour l'ordinateur
que tout ce qui n'est pas entre ces deux balises... n'est pas un titre.

Code : HTML - Sélectionner

Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est
1
pas un titre
Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un

endroit précis (par exemple une image). Il n'est pas nécessaire de
délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur
"Insère une image ici".

Une balise orpheline s'écrit comme ceci :

Code : HTML - Sélectionner

<image /
1
>

Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement

<image>. Néanmoins, pour ne pas confondre avec le premier type de
balise, les webmasters recommandent de rajouter ce / (slash) à la fin de la
balise. Vous me verrez donc mettre un / aux balises orphelines et je vous
recommande de faire de même, c'est une bonne pratique.

Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter
pour donner des informations supplémentaires. L'attribut se place après le
nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :

Code : HTML - Sélectionner

<balise
1
attribut="valeur">

A quoi ça sert ? Prenons la balise <image /> que nous venons de voir.
Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui
indique le nom de l'image à afficher :

Code : HTML - Sélectionner

<image nom="[Link]"
1
/>

L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le

fichier [Link].

Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs
que dans la balise ouvrante et pas dans la balise fermante. Par exemple,
ce code indique que la citation est de Neil Armstrong et qu'elle date du 21
Juillet 1969 :

Code : HTML - Sélectionner

<citation auteur="Neil Armstrong" date="21/07/1969">
1
C'est un petit pas pour l'homme un bond de géant pour l
2
´humanité.
3
</citation>

Toutes les balises que nous venons de voir sont fictives. Les vraies balises
ont des noms en anglais (eh oui !), nous allons les découvrir dans la suite
de ce cours.
Retour en haut

Structure de base d'une page HTML5

Reprenons notre éditeur de texte (dans mon cas Notepad++). Je vous

invite à copier-coller le code source ci-dessous dans Notepad++. Ce code
correspond à la base d'une page web en HTML5 :

Code : HTML - Sélectionner

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8"
5 />
6 <title>Titre</title>
7 </head>
8
9 <body>
10 </body>
11 </html>

J'ai mis des espaces au début de certaines lignes pour "décaler" les
balises. Ce n'est pas obligatoire et ça n'a aucun impact sur l'affichage de
la page, mais ça permet de rendre le code source plus lisible. On appelle
ça l'indentation. Dans votre éditeur, il suffit d'appuyer sur la touche Tab
pour avoir le même résultat.

Copié dans Notepad++, cela donne :

Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis.
Par exemple, la balise <html> est la première que l'on ouvre, et c'est
aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les
balises doivent être fermées dans le sens inverse de leur ouverture. Un
exemple :

o <html><body></body></html> : correct. Une balise qui est

ouverte à l'intérieur d'une autre doit aussi être fermée à
l'intérieur.
o <html><body></html></body> : incorrect, les balises
s'entremêlent.

Euh, on pourrait avoir des explications sur toutes les balises que l'on vient
de copier dans notre éditeur m'sieur ?

Bien sûr, c'est demandé si gentiment.

Ne prenez pas peur en voyant toutes ces balises d'un coup, je vais vous
expliquer leur rôle !

Le doctype

Code : HTML - Sélectionner

<!DOCTYPE
1
html>

La toute première ligne s'appelle le doctype. Elle est indispensable car

c'est elle qui indique qu'il s'agit bien d'une page web HTML.
Ce n'est pas vraiment une balise comme les autres (elle commence par un
point d'exclamation), vous pouvez considérer que c'est un peu l'exception
qui confirme la règle (ça commence bien ).

Cette ligne du doctype était autrefois incroyablement complexe. Il était

impossible de la retenir de tête. Pour XHTML 1.0, il fallait écrire :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
Pour HTML5, il a été décidé de la simplifier, pour le plus grand bonheur des
webmasters. Quand vous voyez une balise doctype courte (<!DOCTYPE
html>), cela signifie que la page est écrite en HTML5.

La balise <html>

Code : HTML - Sélectionner

 <html>
1
2
3
</
4
html>

C'est la balise principale du code. Elle englobe tout le contenu de votre

page. Comme vous pouvez le voir, la balise fermante </html> se trouve
tout à la fin du code !

L'en-tête <head> et le corps <body>

Une page web est constituée de 2 parties :

o L'en-tête <head> : cette section donne quelques informations

générales sur la page, comme son titre, l'encodage (pour la
gestion des caractères spéciaux), etc. Cette section est
généralement assez courte. Les informations que l'en-tête
contient ne sont pas affichées sur la page, ce sont simplement
des informations générales à destination de l'ordinateur. Elles
sont cependant très importantes !
o Le corps <body> : c'est là que se trouve la partie principale de
la page. Tout ce que nous écrirons ici sera affiché à l'écran.
C'est à l'intérieur du corps que nous écrirons la majeure partie
de notre code.

Pour le moment, le corps est vide (nous y reviendrons plus loin).

Intéressons-nous par contre aux deux balises contenues dans l'en-tête...

L'encodage (charset)

Code : HTML - Sélectionner

<meta charset="utf-8"
1
/>

Cette balise indique l'encodage utilisé dans votre fichier .html.

Sans rentrer dans les détails, car cela pourrait vite devenir compliqué,
l'encodage indique la façon dont le fichier est enregistré. C'est lui qui
détermine comment les caractères spéciaux vont s'afficher (accents,
idéogrammes chinois et japonais, symboles arabes, etc.).
Il y a plusieurs techniques d'encodage aux noms bizarres utilisées en
fonction des langues : ISO-8859-1, OEM 775, Windows-1253... Un seul
cependant devrait être utilisé aujourd'hui autant que possible : UTF-8.
Cette méthode d'encodage permet d'afficher sans aucun problème
pratiquement tous les symboles de toutes les langues de notre planète !
C'est pour cela que j'ai indiqué utf-8 dans cette balise.

Il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est le cas le
plus souvent sous Linux par défaut, mais sous Windows il faut
généralement le dire au logiciel.

Sous Notepad++, allez dans le menu Encodage > Encoder en UTF-

8 (sans BOM) pour que votre fichier soit enregistré en UTF-8 dès le début.
Cela ne s'applique qu'au fichier actuellement ouvert.
Pour ne pas avoir à le faire pour chaque nouveau fichier, je vous conseille
d'aller dans le menu Paramétrage > Préférences, onglet
Nouveau document/Dossier. Sélectionnez UTF-8 sans BOM dans la liste.

Si vous avez un problème d'affichage des accents plus tard sur votre page
web, c'est qu'il y a un problème avec l'encodage. Vérifiez que la balise
indique bien UTF-8 et que votre fichier est enregistré en UTF-8 (votre
éditeur de texte est capable de vous le dire, Notepad++ le fait dans le
menu Encodage).

Le titre principal de la page

Code : HTML - Sélectionner

<title
1
>

C'est le titre de votre page, probablement l'élément le plus important !

Toute page doit avoir un titre qui décrit ce qu'elle contient.
Il est conseillé que le titre soit assez court (moins de 100 caractères en
général).

Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent
dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans
votre navigateur. Vous verrez que le titre s'affiche dans l'onglet :
Il faut savoir que le titre apparaît aussi dans les résultats de recherche,
comme ici sur Google :

Autant vous dire que bien choisir son titre est important !
Retour en haut

Les commentaires
Nous avons appris à créer notre première vraie page HTML dans ce
chapitre. Avant de terminer, j'aimerais vous présenter le principe des
commentaires.

Un commentaire en HTML est un texte qui sert simplement de mémo. Il

n'est pas affiché, il n'est pas lu par l'ordinateur, ça ne change rien à
l'affichage de la page.

Bref, ça ne sert à rien ?

Eh bien si !
Ca sert pour vous et les personnes qui liront le code source de votre page.
Vous pouvez utiliser les commentaires pour laisser des indications sur le
fonctionnement de votre page.

Quel intérêt ? Cela vous permettra de vous souvenir comment fonctionne

votre page si vous revenez sur votre code source après un long moment
d'absence. Ne rigolez pas, ça arrive à tous les webmasters.

Insérer un commentaire

Un commentaire est une balise HTML avec une forme bien spéciale :

Code : HTML - Sélectionner

<!-- Ceci est un commentaire
1
-->

Vous pouvez le mettre où vous voulez au sein de votre code source : il n'a
aucun impact sur votre page, mais vous pouvez vous en servir pour vous
aider à vous repérer dans votre code source (surtout s'il est long).

Code : HTML - Sélectionner

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!-- En-tête de la page
5 -->
6 <meta charset="utf-8"
7 />
8 <title>Titre</title>
9 </head>
10
11 <body>
12 <!-- Corps de la page --
 >
</body>
</html>

Tout le monde peut voir vos commentaires... et tout votre code

HTML !

Terminons par une remarque importante : tout le monde peut voir le

code HTML de votre page une fois celle-ci mise en ligne sur le Web. Il
suffit de faire un clic droit sur la page et de sélectionner "Afficher le code
source de la page" (l'intitulé peut changer selon votre navigateur) :

Le code source s'affiche alors :

Vous pouvez tester sur n'importe quel site web, ça marche ! Garanti à
100%. Cela s'explique assez facilement : le navigateur doit obtenir le code
HTML pour savoir ce qu'il faut afficher. Le code HTML de tous les sites est
donc public.

La morale de l'histoire ? Tout le monde pourra voir votre code HTML et

vous ne pouvez pas l'empêcher. Par conséquent, ne mettez pas
d'informations sensibles comme des mots de passe dans les
commentaires... et soignez votre code source, car je pourrai venir vérifier
si vous avez bien suivi mon tutoriel à la lettre !

Ne prenez pas peur en regardant le code de certains sites web s'il vous
paraît long ou ne pas respecter les mêmes règles que celles que je vous
présente dans ce tutoriel. Tous les sites ne sont pas écrits en HTML5 (loin
de là), et parfois certains webmasters écrivent très mal leur code, ce ne
sont pas toujours des exemples à suivre !
Retour en haut

Q.C.M.

Quelle balise permet d'indiquer le titre de la page web ?

o <title>
o <titre>
o <titke>

A l'intérieur de quelles autres balises la balise <meta> se trouve-t-elle ?

o <body> et </body>
o <title> et </title>
o <head> et </head>
Laquelle de ces balises est un commentaire ?

o <!-- Commentaire -->

o <-- Commentaire -->
o <!-- Commentaire >

Lequel de ces encodages de fichier est recommandé ?

o utf-8
o iso-8859-1
o windows-1253

Laquelle de ces balises correspond au corps de la page ?

<html>
<body>
<head>

Les paragraphes

La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait
à l'intérieur de paragraphes. Le langage HTML propose justement la balise
<p> pour délimiter les paragraphes.

Code : HTML - Sélectionner

<p>Bonjour et bienvenue sur mon site !
1
</p>

o <p> signifie "Début du paragraphe"

o </p> signifie "Fin du paragraphe"

Comme je vous l'ai dit dans le chapitre précédent, on écrit le contenu de

notre site web entre les balises <body></body>. Il nous suffit donc de
mettre notre paragraphe entre ces deux balises, et nous aurons enfin
notre première vraie page web avec du texte !

Je reprends donc exactement le même code que dans le chapitre

précédent, et j'y ajoute mon paragraphe :

Code : HTML - Sélectionner

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
 <title>Paragraphes</title>
5
</head>
6
7
<body>
8
<p>Bonjour et bienvenue sur mon site !
9
</p>
10
</body>
11
</html>

Essayer !

Essayez, vous allez voir le résultat !

Bon, ok c'est pas encore le nirvana, mais c'est un bon début.

Mais ne nous arrêtons pas en si bon chemin. Nous allons voir maintenant
quelque chose d'un peu particulier en HTML : le saut de lignes. Ça a l'air
simple, mais pourtant ça ne fonctionne pas vraiment comme dans un
traitement de texte habituel...

Sauter une ligne

En HTML, si vous appuyez sur la touche Entrée, ça ne crée pas une

nouvelle ligne comme vous en avez l'habitude. Essayez donc ce code :

Code : HTML - Sélectionner

<!DOCTYPE html>
<html>
1
<head>
2
<meta charset="utf-8" />
3
<title>Essais de sauts de ligne</title>
4
</head>
5
6
<body>
7
<p>
8
Bonjour et bienvenue sur mon site !
9
Ceci est mon premier test, alors soyez indulgents s'il vous plaît,
10
j'apprends petit à petit comment ça marche.
11
Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours
12
quand j'aurai appris un peu plus de choses, je vous assure que vous
13
allez être surpris !
14
</p>
15
</body>
</html>

Essayer !
Tout est sur la même ligne alors qu'on est pourtant allé à la ligne dans
notre code ! Taper frénétiquement sur la touche Entrée dans l'éditeur de
texte ne sert donc strictement à rien.

Comme vous devez vous en douter, il y a pourtant bien un moyen de faire

des sauts de ligne en HTML.

En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit

d'utiliser une deuxième balise <p>.
Votre code HTML devrait donc être au final rempli de balises de
paragraphe !

Un exemple :

Code : HTML - Sélectionner

<html>
1 <head>
2 <meta charset="utf-8" />
3 <title>Paragraphes</title>
4 </head>
5
6 <body>
7 <p>
8 Bonjour et bienvenue sur mon site !
9 Ceci est mon premier test, alors soyez indulgents s'il vous plaît,
10 j'apprends petit à petit comment ça marche.
11 </p>
12 <p>
13 Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours
14 quand j'aurai appris un peu plus de choses, je vous assure que vous
15 allez être surpris !
16 </p>
17 </body>
</html>

Essayer !

Oui, mais si je veux juste aller à la ligne dans un paragraphe, et non pas
sauter une ligne ?

Eh bien devinez quoi : il existe une balise "Aller à la ligne" !

C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la
ligne : <br />. Vous devez obligatoirement la mettre à l'intérieur d'un
paragraphe.
Voici comment l'utiliser dans un code :

Code : HTML - Sélectionner

<html>
1 <head>
2 <meta charset="utf-8" />
3 <title>Sauts de ligne</title>
4 </head>
5
6 <body>
7 <p>
8 Bonjour et bienvenue sur mon site !<br />
9 Ceci est mon premier test, alors soyez indulgents s'il vous plaît,
10 j'apprends petit à petit comment ça marche.
11 </p>
12 <p>
13 Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours
14 quand j'aurai appris un peu plus de choses, je vous assure que vous
15 allez être surpris !
16 </p>
17 </body>
</html>

Essayer !

Vous pouvez théoriquement mettre plusieurs balises <br /> d'affilée pour
faire plusieurs sauts de lignes, mais on considère que c'est une mauvaise
pratique qui rend le code délicat à maintenir. Pour décaler un texte avec
plus de précision, on utilisera le CSS, ce langage qui vient compléter le
HTML et dont je vous parlerai un peu plus loin.

Donc c'est compris ?

 <p> </p> : pour organiser son texte en paragraphes.

 <br /> : pour aller à la ligne.

Maintenant qu'on sait écrire des paragraphes, voyons voir comment on

crée des titres.
Retour en haut

Les titres

Lorsque le contenu de votre page va s'étoffer avec de nombreux

paragraphes, cela va devenir difficile pour vos visiteurs de se repérer.
C'est là que les titres deviennent utiles.
En HTML on est verni, on a le droit d'utiliser 6 niveaux de titres différents.
Je veux dire par là qu'on peut dire "Ceci est un titre très important", "Ceci
est un titre un peu moins important", "Ceci est un titre encore moins
important", etc. On a donc 6 balises de titre différentes :

<h1> </h1> : signifie "titre très important". En général, on s'en sert

pour afficher le titre de la page au début de celle-ci.
<h2> </h2> : signifie "titre important".
<h3> </h3> : pareil, c'est un titre un peu moins important (on peut
dire un "sous-titre" si vous voulez).
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment, mais alors là vraiment pas important
du tout.

Attention : ne confondez pas avec la balise <title> ! La balise <title>

affiche le titre de la page dans la barre de titre du navigateur comme nous
l'avons vu. Les titres <h1> et compagnie eux, servent à créer des titres
qui seront affichés dans la page web.

Ne vous laissez pas impressionner par toutes ces balises. En fait, 6

niveaux de titres, c'est beaucoup. Dans la pratique, personnellement, je
n'utilise que les balises <h1>, <h2> et <h3>, et très rarement les autres
(je n'ai pas souvent besoin de 6 niveaux de titres différents ). Votre
navigateur affiche le titre très important en très gros, le titre un peu moins
important en un peu moins gros, etc.

Ne choisissez pas votre balise de titre en fonction de la taille qu'elle

procure au texte ! Il faut impérativement bien structurer sa page en
commençant par un titre de niveau 1 (<h1>), puis un titre de niveau 2
(<h2>), etc. Il ne devrait pas y avoir de sous-titre sans titre principal !
Si vous voulez modifier la taille du texte, sachez que nous apprendrons à
faire ceci en CSS un peu plus tard.

Essayez de faire une page web avec des titres pour voir ce que ça donne :

Code : HTML - Sélectionner

1 <html>
2 <head>
3 <meta charset="utf-8" />
4 <title>Niveaux de titres</title>
5 </head>
6
7 <body>
8 <h1>Titre super important</h1>
 <h2>Titre important</h2>
9 <h3>Titre un peu moins important (sous-
10 titre)</h3>
11
12 <h4>Titre pas trop important</h4>
13 <h5>Titre pas important</h5>
14 <h6>Titre vraiment pas important du
15 tout</h6>
16 </body>
</html>

Essayer !

Allez, je vous donne un exemple d'utilisation des titres dans une page web
(vous allez voir que je ne me sers pas de toutes les balises) :

Code : HTML - Sélectionner

1 <html>
2 <head>
3 <meta charset="utf-8" />
4 <title>Présentation du Site du Zéro</title>
5 </head>
6
7 <body>
8 <h1>Bienvenue sur le Site du Zéro !</h1>
9
10 <p>
11 Bonjour et bienvenue sur mon site : le Site du Zéro.<br />
12 Le Site du Zéro, qu'est-ce que c'est ?
13 </p>
14
15 <h2>Des cours pour débutants</h2>
16
17 <p>
18 Le Site du Zéro vous propose des cours (tutoriels) destinés aux
19 débutants : aucune connaissance n'est requise pour lire ces cours !
20 </p>
21 <p>
22 Vous pourrez ainsi apprendre, sans rien y connaître auparavant, à
23 créer un site web, à programmer, à construire des mondes en 3D !
24 </p>
25
26 <h2>Une communauté active</h2>
27
28 <p>
29 Vous avez un problème, un élément du cours que vous ne
30 comprenez pas ? Vous avez besoin d'aide pour créer votre site ?<br />
31 Rendez-vous sur les forums ! Vous y découvrirez que vous n'êtes
pas le seul dans ce cas, et vous trouverez très certainement quelqu'un
 qui vous aidera aimablement à résoudre votre problème.
</p>
</body>
</html>

Essayer !

Voilà une page web qui prend forme !

Oui mais moi je veux centrer mon titre, l'écrire en rouge et le souligner !

Nous ferons tout cela lorsque nous apprendrons le CSS (dès la deuxième
partie du cours). Il faut savoir que <h1> ne signifie pas "Times New
Roman, taille 16 pt", mais "Titre important".

Grâce au langage CSS, vous pourrez dire "Je veux que mes titres
importants soient centrés, rouges et soulignés". Pour le moment, en HTML,
nous ne faisons que structurer notre page. Nous rédigeons le contenu
avant de nous amuser à le mettre en forme.
Retour en haut

La mise en valeur

Au sein de vos paragraphes, certains mots sont parfois plus importants

que d'autres et vous aimeriez les faire ressortir. HTML vous propose
différents moyens de mettre en valeur le texte de votre page.

Mettre un peu en valeur

Pour mettre un peu en valeur votre texte, vous devez utiliser la balise
<em> </em>.
Son utilisation est très simple : entourez les mots à mettre en valeur par
ces balises, et c'est bon ! Je reprends un peu l'exemple de tout à l'heure,
et j'y mets quelques mots en évidence :

Code : HTML - Sélectionner

1 <html>
2 <head>
3 <meta charset="utf-8" />
4 <title>Emphase</title>
5 </head>
6
7 <body>
8 <p>
9 Bonjour et bienvenue sur mon site !<br />
10
Ceci est mon premier test, alors <em>soyez indulgents</em> s'il
11
vous plaît, j'apprends petit à petit comment ça marche.
12
</p>
13
</body>
14
</html>

Essayer !

Comme vous pouvez le voir, utiliser la balise <em> a pour conséquence

de mettre le texte en italique. En fait, c'est le navigateur qui choisit
comment afficher les mots. On lui dit que les mots sont assez importants
et pour faire ressortir cette information, il change l'apparence du texte en
utilisant l'italique.

Mettre bien en valeur

Pour mettre un texte bien en valeur, on utilise la balise <strong> qui

signifie "fort", ou "important" si vous préférez. Elle s'utilise exactement de
la même manière que <em> :

Code : HTML - Sélectionner

<html>
1 <head>
2 <meta charset="utf-8" />
3 <title>Forte emphase</title>
4 </head>
5
6 <body>
7 <p>
8 Bonjour et bienvenue sur mon site !<br />
9
10 Ceci est mon premier test, alors <strong>soyez
11 indulgents</strong> s'il vous plaît, j'apprends petit à petit comment ça
12 marche.
13 </p>
14 </body>
</html>

Essayer !

Vous voyez sûrement le texte s'afficher en gras. Là encore, le gras n'est

qu'une conséquence. Le navigateur a choisi d'afficher en gras les mots
importants pour les faire plus ressortir.
La balise <strong> ne signifie pas "mettre en gras" mais "important". On
pourra décider plus tard en CSS d'afficher les mots "importants" d'une
autre façon que le gras si on le souhaite.

Marquer le texte

La balise <mark> permet de faire ressortir visuellement une portion de

texte. Le texte n'est pas forcément considéré comme important mais on
veut qu'il se distingue bien du reste du texte. Cela peut être utile pour
faire ressortir un texte pertinent après une recherche sur votre site par
exemple.

Code : HTML - Sélectionner

<html>
1
<head>
2
<meta charset="utf-8" />
3
<title>Marquage du texte</title>
4
</head>
5
6
<body>
7
<p>
8
Bonjour et bienvenue sur mon site !<br />
9
10
Ceci est mon premier test, alors <mark>soyez indulgents</mark>
11
s'il vous plaît, j'apprends petit à petit comment ça marche.
12
</p>
13
</body>
14
</html>

Essayer !

Par défaut, <mark> a pour effet de surligner le texte. On pourra changer

l'affichage en CSS (décider de surligner dans une autre couleur, décider
d'encadrer le texte, etc.). C'est le même principe que ce que je vous disais
pour les balises précédentes : elles indiquent le sens des mots et non pas
comment ceux-ci doivent s'afficher.

N'oubliez pas : HTML pour le fond, CSS pour la forme

Je vais peut-être vous sembler un peu lourd mais il est très important
qu'on se comprenne bien, car les débutants font souvent la même grosse
erreur à ce stade. Ils ont vu les balises <em>, <strong>, <mark>... et ils
se disent : "Chouette, j'ai découvert comment mettre en italique, en gras
et comment surligner du texte en HTML !".

Et pourtant... ce n'est pas à ça que servent ces balises ! Je sais, je sais,

vous allez me dire "Oui mais quand j'utilise <strong> le texte apparaît en
gras, donc c'est pour mettre en gras.", et pourtant, c'est une erreur de
croire que cette balise sert à ça.

Le rôle des balises est d'indiquer le sens du texte. Ainsi, <strong> indique
à l'ordinateur "Ce texte est important". C'est tout.
Et pour montrer que le texte est important, l'ordinateur décide de le
mettre en gras (mais il pourrait aussi bien l'écrire en rouge !). La plupart
des navigateurs affichent les textes importants en gras, mais rien ne les y
oblige.

Je ne comprends pas. À quoi ça sert que l'ordinateur sache qu'un texte est
important ?
Il n'est pas si intelligent pour comprendre !

Détrompez-vous ! De nombreux programmes analysent les codes source

des pages web, à commencer par les robots de moteurs de recherche. Ces
robots parcourent le web en lisant le code HTML de tous les sites. C'est le
cas des robots de Google et de Bing par exemple. Les mots-clés
"importants" ont tendance à avoir plus de valeur à leurs yeux, donc si
quelqu'un fait une recherche sur ces mots il a plus de chances de tomber
sur votre site.
Bien entendu c'est une explication grossière, et il ne faut pas croire
qu'utiliser la balise <strong> à tout-va améliorera votre référencement. Il
faut simplement faire confiance aux ordinateurs : ils comprennent ce
qu'un texte "important" veut dire et peuvent se servir de cette
information.

Mais alors, comment on fait pour mettre spécifiquement en gras, pour

écrire en rouge, et tout et tout ?

Tout cela se fait en CSS. Souvenez-vous :

Le HTML définit le fond (contenu, logique des éléments)

Le CSS définit la forme (apparence)

Nous verrons le CSS plus loin, pour l'instant nous nous concentrons sur le
HTML et ses balises, qui ont chacune un sens particulier.
Retour en haut

Les listes à puces

Les listes à puces nous permettent souvent de mieux structurer notre
texte et d'ordonner nos informations.
Nous allons découvrir ici deux types de listes à puces :

Les listes non ordonnées

Les listes ordonnées

Liste non ordonnée

Une liste non ordonnée ressemble à ceci :

Fraises
Framboises
Cerises

C'est un système qui nous permet de faire une liste d'éléments, sans
notion d'ordre (il n'y a pas de "premier" ni de "dernier"). Créer une liste à
puces non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que
l'on referme un peu plus loin avec un </ul>.
Commencez donc à taper ceci :

Code : HTML - Sélectionner

<ul></
1
ul>

Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments

de la liste entre 2 balises <li></li>. Toutes ces balises doivent se trouver
entre <ul> et </ul>. Vous allez comprendre de suite avec cet exemple :

Code : HTML - Sélectionner

1 <ul>
2 <li>Fraises</li>
3 <li>Framboises</li>
4 <li>Cerises</li>
5 </ul>

Notez que la liste doit être placée à l'intérieur de <body></body>. Je ne

mets pas tout le code de la page à partir de maintenant pour rester lisible.

Essayer !

Retenez donc ces deux balises :

 <ul></ul> délimite toute la liste.
<li></li> délimite un élément de la liste (une puce).

Vous pouvez mettre autant d'éléments que vous voulez dans la liste à
puces, vous n'êtes pas limités à 3 éléments bien entendu.

Et voilà, vous savez créer une liste à puce non ordonnée ! Pas si dur une
fois qu'on a compris comment imbriquer les balises.

Pour ceux qui ont besoin de faire des listes complexes, sachez que vous
pouvez imbriquer des listes à puces (créer une liste à puces dans une liste
à puces). Si vous voulez faire ça, ouvrez une seconde balise <ul> à
l'intérieur d'un élément <li></li>.
Si vous fermez les balises dans le bon ordre, vous n'aurez pas de
problème. Attention néanmoins, cette technique est un peu compliquée à
maîtriser.

Liste ordonnée

Une liste ordonnée fonctionne de la même façon, seule une balise

change : il faut remplacer <ul></ul> par <ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises
<li></li> pour délimiter les éléments.

L'ordre dans lequel vous mettez les éléments de la liste est important. Le
premier <li></li> sera l'élément n°1, le second sera le n°2 etc...

Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité

de cet exemple :

Code : HTML - Sélectionner

<h1>Ma journée</h1>
1
2
<ol>
3
<li>Je me lève</li>
4
<li>Je mange et je bois</li>
5
<li>Je retourne me
6
coucher</li>
7
</ol>

Essayer !
Par rapport à l'exemple précédent, tout ce qu'on a eu à changer est donc
la balise <ol>.

Pour information, il existe un troisième type de liste, beaucoup plus rare :

la liste de définitions. Elle fait intervenir les balises <dl> (pour délimiter la
liste), <dd> (pour délimiter un terme) et <dt> (pour délimiter la définition
de ce terme).

Un lien vers un autre site

Il est facile de reconnaître les liens sur une page : ils sont écrits d'une
façon différente (par défaut en bleu souligné) et un curseur en forme de
main apparaît lorsqu'on pointe dessus.

Je vous propose d'essayer de faire le lien suivant qui amène vers le Site du
Zéro :

Pour faire un lien, la balise que nous allons utiliser est très simple à retenir
: <a>. Il faut cependant lui ajouter un attribut, href, pour indiquer vers
quelle page on souhaite amener.

Voici un lien qui amène vers le Site du Zéro, situé à l'adresse

[Link] :

Code : HTML - Sélectionner

<a href="[Link] du
1
Zéro</a>

Nous allons placer ce lien au sein d'un paragraphe. Voici donc comment
reproduire l'exemple de l'image précédente :

Code : HTML - Sélectionner

<p>Bonjour. Souhaitez-vous visiter le <a
1
href="[Link] du Zéro</a> ?<br />
2
C'est un bon site ! ;-)</p>

Essayer !

Par défaut, le lien s'affiche en bleu souligné. Si vous avez déjà visité la
page, le lien s'affiche en violet.
Nous verrons comment changer cette apparence lorsque nous étudierons
le CSS.

Si vous voulez faire un lien vers un autre site, il suffit donc de copier son
adresse (on parle d'URL) en [Link] Notez que certains liens commencent
parfois par https:// (sites sécurisés) ou d'autres préfixes ([Link]

Si vous faites un lien vers un site qui comporte une adresse un peu bizarre
avec des &, comme :
[Link]
... Vous devrez remplacer tous les & par &amp; dans votre lien comme
ceci :
[Link]
Vous ne verrez pas la différence, mais cela est nécessaire pour avoir une
page web correctement construite en HTML5.

Les liens que nous venons de voir sont appelés liens absolus, car on
indique l'adresse complète. Nous allons maintenant voir que l'on peut
écrire les liens d'une façon un peu différente, ce qui va nous être utile
pour faire des liens entre les pages de notre site.
Retour en haut

Un lien vers une autre page de son site

Nous venons d'apprendre à créer des liens vers des sites déjà existants.
Mais je suis sûr que vous aimeriez faire des liens entre les différentes
pages de votre site, non ?

Oui, justement, comment je fais pour faire un lien vers une autre page de
mon site ? Je ne connais pas son adresse en [Link] je commence à peine
à créer mon site là ! Je n'ai pas d'adresse.

En effet, pour le moment vous êtes en train de créer votre site sur votre
ordinateur. Vous êtes le seul à pouvoir le voir, et il n'a pas encore
"d'adresse web" qui commence en http:// comme la plupart des sites.
Heureusement, cela ne va pas nous empêcher de travailler.

Deux pages situées dans un même dossier

Pour commencer, nous allons créer 2 fichiers correspondant à 2 pages

HTML différentes. Comme je suis très inspiré, je vous propose de les
appeler [Link] et [Link]. Nous aurons donc ces 2 fichiers sur
notre disque dans le même dossier :
Comment faire un lien de la page 1 vers la page 2, sans avoir d'adresse en
http:// ? En fait, c'est facile : si les deux fichiers sont situés dans le même
dossier, il suffit d'écrire simplement le nom du fichier vers lequel on veut
amener. Par exemple : <a href="[Link]">. On dit que c'est un lien
relatif.

Voici le code que nous allons utiliser dans nos fichiers [Link] et
[Link].

[Link]

Code : HTML - Sélectionner

<p>Bonjour. Souhaitez-vous visiter <a href="[Link]">la page
1
2</a> ?</p>

[Link]

La page 2 (page d'arrivée) affichera simplement un message pour indiquer

que l'on est bien arrivé sur la page 2 :
 Code : HTML - Sélectionner
<h1>Bienvenue sur la page 2 !
1
</h1>

Essayer !

Le lien ci-dessous ouvre [Link] :

Essayer !

Deux pages situées dans des dossiers différents

Les choses se corsent un petit peu si les pages sont situées dans des
dossiers différents. Idéalement, elles ne devraient pas être trop loin l'une
de l'autre (dans un sous-dossier par exemple).

Imaginons que [Link] se trouve dans un sous-dossier appelé

contenu :

Le fichier [Link] se trouve à l'intérieur du dossier contenu

Dans ce cas de figure, il va falloir faire un lien comme ceci :

Code : HTML - Sélectionner

<a
1 href="contenu/[Link]"
>

S'il y avait plusieurs sous-dossiers, on écrirait ceci :

Code : HTML - Sélectionner

<a
1 href="contenu/autredossier/[Link]
">

Et si le fichier ne se trouve pas dans un sous-dossier mais dans un dossier

"parent", on fait comment ?

Si votre fichier cible est placé dans un dossier qui se trouve "avant" dans
l’arborescence, il faut écrire deux points comme ceci :

Code : HTML - Sélectionner

<a
1
href="../[Link]">

Résumé en images

Les liens relatifs ne sont pas bien compliqués à utiliser une fois qu'on a
compris le principe. Il suffit de regarder dans quel "niveau de dossier" se
trouve votre fichier cible pour savoir comment écrire votre lien :
Retour en haut

Un lien vers une ancre

Une ancre est une sorte de point de repère que vous pouvez mettre dans
vos grosses pages HTML.
En effet, si votre page est très grande il peut être utile de faire un lien
amenant plus bas dans la même page pour que le visiteur puisse sauter
directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va
alors servir de repère. Ce peut être n'importe quelle balise, un titre par
exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira
ensuite pour faire un lien vers cette ancre. Par exemple :

Code : HTML - Sélectionner

<h2
1
id="mon_ancre">Titre</h2>
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois
l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :

Code : HTML - Sélectionner

<a href="#mon_ancre">Aller vers
1
l'ancre</a>

Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans
la même page (à condition que la page comporte suffisamment de texte
pour que les barres de défilement se déplacent automatiquement).
Voici un exemple de page comportant beaucoup de texte et utilisant les
ancres (j'ai mis n'importe quoi dans le texte pour remplir ):

Code : HTML - Sélectionner

<h1>Ma grande page</h1>
1
<p>
2
Aller directement à la partie traitant
3
de :<br />
4
<a href="#cuisine">La cuisine</a><br
5
/>
6
<a href="#rollers">Les rollers</a><br
7
/>
8
<a href="#arc">Le tir à l'arc</a><br />
9
</p>
10
<h2 id="cuisine">La cuisine</h2>
11
12
<p>... (beaucoup de texte) ...</p>
13
14
<h2 id="rollers">Les rollers</h2>
15
16
<p>... (beaucoup de texte) ...</p>
17
18
<h2 id="arc">Le tir à l'arc</h2>
19
<p>... (beaucoup de texte) ...</p>

Essayer !

S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas
assez de texte. Dans ce cas, vous pouvez soit rajouter du blabla dans la
page pour qu'il y ait (encore) plus de texte, ou bien réduire la taille de la
fenêtre de votre navigateur pour faire apparaître les barres de défilement
sur le côté.

L'attribut id sert à donner un nom "unique" à une balise, pour s'en servir
de repère. Et, croyez-moi, vous n'avez pas fini d'entendre parler de cet
attribut. Ici, on s'en sert pour faire un lien vers une ancre, mais en CSS
cela nous sera très utile pour "repérer" une balise précise, vous verrez.
Evitez cependant de créer des id avec des espaces ou des caractères
spéciaux, utilisez simplement des lettres et chiffres dans la mesure du
possible pour que cela soit reconnu par tous les navigateurs.

Lien vers une ancre située dans une autre page

Alors là je vous préviens, on va faire le Mégamix !

L'idée, c'est de faire un lien qui ouvre une nouvelle page ET qui amène
directement à une ancre située plus bas sur cette page.
En pratique c'est assez simple à faire : il suffit de taper le nom de la page,
suivi d'un dièse (#), suivi du nom de l'ancre.

Par exemple : <a href="[Link]#rollers">

... vous amènera sur la page [Link], directement au niveau de

l'ancre appelée "rollers".

Voici une page qui contient 3 liens, chacun amenant vers une des ancres
de la page de l'exemple précédent :

Code : HTML - Sélectionner

<h1>Le Mégamix</h1>
<p>
1 Rendez-vous quelque part sur une autre
2 page :<br />
3 <a href="[Link]#cuisine">La
4 cuisine</a><br />
5 <a href="[Link]#rollers">Les
6 rollers</a><br />
7 <a href="[Link]#arc">Le tir à
l'arc</a><br />
</p>

Essayer !

Retour en haut

Cas pratiques d'utilisation des liens

Je vais essayer de vous montrer ici quelques cas pratiques d'utilisation des
liens. Par exemple, saviez-vous qu'il est très facile de faire des liens qui
lancent un téléchargement ? Qui créent un nouvel e-mail ? Qui ouvrent
une nouvelle fenêtre ?
Non ? Eh bien nous allons voir tout ça ici.

Un lien qui affiche une infobulle au survol

Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on
pointe sur le lien. Cet attribut est facultatif.

Vous aurez un résultat ressemblant à ceci :

La bulle d'aide peut être utile pour informer le visiteur avant même qu'il
n'ait cliqué sur le lien.
Voici comment reproduire ce résultat :

Code : HTML - Sélectionner

<p>Bonjour. Souhaitez-vous visiter le <a
1 href="[Link] title="Réservé aux débutants">Site
du Zéro</a> ?</p>

Essayer !

Un lien qui ouvre une nouvelle fenêtre

Il est possible de "forcer" l'ouverture d'un lien dans une nouvelle fenêtre.
Pour cela, on rajoutera target="_blank" à la balise <a> :

Code : HTML - Sélectionner

<p>Bonjour. Souhaitez-vous visiter le <a
1 href="[Link] target="_blank">Site du Zéro</a> ?
2 <br />
Le site s'affichera dans une autre fenêtre.</p>

Essayer !
Selon la configuration du navigateur, la page s'affichera dans une nouvelle
fenêtre ou un nouvel onglet. Vous ne pouvez pas choisir entre l'ouverture
d'une nouvelle fenêtre ou d'un nouvel onglet.

Notez cependant qu'il est déconseillé d'abuser de cette technique car elle
perturbe la navigation. Le visiteur lui-même peut décider s'il veut ouvrir le
lien dans une nouvelle fenêtre. Il fera Maj + Clic sur le lien pour ouvrir
dans une nouvelle fenêtre, ou Ctrl + Clic pour ouvrir dans un nouvel
onglet.

Un lien pour envoyer un e-mail

Si vous voulez que vos visiteurs puissent vous envoyer un mail, vous
pouvez utiliser des liens de type "mailto". Rien ne change au niveau de la
balise, vous devez simplement modifier la valeur de l'attribut href comme
ceci :

Code : HTML - Sélectionner

<p><a href="[Link] un e-mail !
1
</a></p>

Essayer !

Il suffit donc de faire commencer le lien par "[Link] et d'écrire l'adresse

e-mail où on peut vous contacter. Si vous cliquez sur le lien, un nouveau
message vide s'ouvre, prêt à être envoyé à votre adresse e-mail.

Un lien pour télécharger un fichier

Beaucoup d'entre vous se demandent comment ça se passe pour le

téléchargement d'un fichier... En fait, il faut faire exactement comme si
vous faisiez un lien vers une page web, mais en indiquant cette fois le nom
du fichier à télécharger.

Par exemple, supposez que vous vouliez faire télécharger [Link].

Placez simplement ce fichier dans le même dossier que votre page web
(ou dans un sous-dossier) et faites un lien vers ce fichier :

Code : HTML - Sélectionner

<p><a href="[Link]">Télécharger le
1
fichier</a></p>
C'est tout ! Le navigateur, voyant qu'il ne s'agit pas d'une page web à
afficher, va lancer la procédure de téléchargement lorsqu'on cliquera sur
le lien.
Retour en haut

Q.C.M.

"[Link] est un lien...

 Relatif
 Absolu
 Ni l'un, ni l'autre

Ma page "[Link]" se trouve dans le répertoire "c:\site\[Link]",

et ma page [Link] se trouve dans "c:\site\documents\travaux\
[Link]". Lequel de ces liens est le bon ?

<a href="documents/travaux/[Link]">
<a href="site/documents/travaux/[Link]">
<a href="[Link]">

Ma page "[Link]" se trouve dans le répertoire "c:\site\[Link]" et

je fais un lien vers "../[Link]". Où se trouve [Link] ?

c:\dossier\[Link]
c:\..\[Link]
c:\[Link]

Quel attribut permet d'afficher une bulle d'aide sur un lien ?

href
id
title

Que fait le lien suivant ?

Code : HTML - Sélectionner

<a
1 href="[Link]#coquelicot"
>

Il ouvre la page [Link] et nous amène directement à l'ancre

"coquelicot".
Il ouvre la page [Link] et nous amène à l'ancre "fleurs"
Il ouvre la page [Link] et nous amène à l'ancre appelée
"#coquelicot"
Statistiques de réponses au QCM

Retour en haut
En résumé donc, on distingue 2 types de liens :

Les liens vers d'autres pages, de loin les plus courants.

Les liens vers des ancres, pour amener plus bas sur une même page.

Il y a aussi, comme vous l'avez vu, la possibilité de faire des liens qui
amènent vers une ancre située sur une autre page. Bref, vous avez
l'embarras du choix.

Les différents formats d'images

Savez-vous ce qu'est un format d'image ?

Quand vous avez une image "entre les mains", vous avez la possibilité de
l'enregistrer dans plusieurs "formats" différents. Le poids (en Ko, voire en
Mo) de l'image sera plus ou moins élevé selon le format choisi, et la
qualité de l'image va changer.

Par exemple, le logiciel de dessin Paint (même si c'est loin d'être le

meilleur) vous propose de choisir entre plusieurs formats lorsque vous
enregistrez une image :

Certains formats sont plus adaptés que d'autres selon l'image (photo,
dessin, image animée...). Notre but ici est de faire le tour des différents
formats que l'on utilise sur le web, pour que vous les connaissiez et
sachiez choisir celui qui convient le mieux à votre image. Rassurez-vous, il
n'y a pas beaucoup de formats différents, ça ne sera donc pas bien long.
Toutes les images diffusées sur Internet ont un point commun : elles sont
compressées. Cela veut dire que l'ordinateur fait des calculs pour
qu'elles soient moins lourdes et donc plus rapides à charger.

Le JPEG

Les images au format JPEG (Joint Photographic Expert Group) sont très
répandues sur le Web. Ce format est conçu pour réduire la taille des
photos, qui peuvent comporter plus de 16 millions de couleurs différentes.

Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg.

Voici un exemple d'image au format JPEG :

[Link]

Notez que le JPEG détériore un peu la qualité de l'image d'une façon

généralement imperceptible. C'est ce qui le rend si efficace pour réduire le
poids des photos.
Quand il s'agit d'une photo, on ne peut généralement pas détecter la perte
de qualité. Par contre, si ce n'est pas une photo, vous risquez de voir
l'image un peu "baver". Dans ce cas, il vaut mieux utiliser le format PNG.

Le PNG

Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce

format est adapté à la plupart des graphiques (je serais tenté de dire "à
tout ce qui n'est pas une photo"). Le PNG a deux gros avantages : il peut
être rendu transparent et il n'altère pas la qualité de l'image.

Le PNG a été inventé pour concurrencer un autre format, le GIF, à l'époque

où il fallait payer des royalties pour pouvoir utiliser des GIF. Depuis, le PNG
a bien évolué et c'est devenu le format le plus puissant pour enregistrer la
plupart des images.

Le PNG existe en 2 versions, en fonction du nombre de couleurs que doit

comporter l'image :

o PNG 8 bits : 256 couleurs

o PNG 24 bits : 16 millions de couleurs (autant qu'une image
JPEG)

Voici une image PNG en 24 bits, la célèbre mascotte Zozor du Site du Zéro
:

[Link]

Une vieille version d'Internet Explorer (IE6) ne peut pas afficher

correctement les images PNG 24 bits transparentes. Ce navigateur tend à
être de moins en moins utilisé, mais gardez quand même cette
information en tête.

Au fait, si le PNG 24 bits peut afficher autant de couleurs qu'une image

JPEG, et qu'en plus il peut être rendu transparent sans modifier la qualité
de l'image... quel est l'intérêt du JPEG ?

La compression du JPEG est plus puissante sur les photos. Une photo
enregistrée en JPEG se chargera toujours beaucoup plus vite que si elle
était enregistrée en PNG. Je vous conseille donc toujours de réserver le
format JPEG aux photos.
Le GIF

C'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste
très utilisé par habitude). Aujourd'hui, le PNG est globalement bien
meilleur que le GIF : les images sont le plus souvent plus légères et la
transparence est de meilleure qualité. Je vous recommande donc d'utiliser
le PNG autant que possible.

Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à
plusieurs millions de couleurs).

Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il

peut être animé. Exemple :

[Link]

Il existe un format adapté à chaque image

Si on résume, voici quel format adopter en fonction de l'image que vous

avez :

Une photo : utilisez un JPEG.

N'importe quel graphique avec peu de couleurs (moins de 256)
: utilisez un PNG 8 bits, ou éventuellement un GIF.
N'importe quel graphique avec beaucoup de couleurs : utilisez
un PNG 24 bits.
Une image animée : utilisez un GIF animé.

Les erreurs à éviter

Bannissez les autres formats

Les autres formats non cités ici, comme le format BITMAP (*.bmp) sont à
bannir car bien souvent ils ne sont pas compressés, donc trop gros. Ils ne
sont pas du tout adaptés au web. On peut en mettre sur son site, mais le
chargement sera vraiment extrêmement long !
Choisissez bien le nom de votre image

Si vous voulez éviter des problèmes, prenez l'habitude d'enregistrer vos

fichiers avec des noms en minuscules, sans espaces ni accents. Par
exemple : mon_image.png.

Vous pouvez remplacer les espaces par le caractère "underscore" comme

je l'ai fait : _ .
Retour en haut

Insérer une image

Revenons maintenant au code HTML pour découvrir comment placer des

images dans nos pages web !

Insertion d'une image

Quelle est la fameuse balise qui va nous permettre d'insérer une image ? Il
s'agit de... <img /> !

C'est une balise de type orpheline (comme <br />). Cela veut dire qu'on
n'a pas besoin de l'écrire en deux exemplaires comme la plupart des
autres balises que nous avons vues jusqu'ici. En effet, nous n'avons pas
besoin de délimiter une portion de texte, nous voulons juste insérer une
image à un endroit précis.

La balise doit être accompagnée de 2 attributs obligatoires :

o src : il permet d'indiquer où se trouve l'image que l'on veut

insérer. Vous pouvez soit mettre un chemin en absolu (ex. :
[Link] soit mettre le chemin en relatif
(ce qu'on fait le plus souvent). Ainsi, si votre image est dans
un sous-dossier images vous devrez taper :
src="images/[Link]"
o alt : cela signifie "texte alternatif". On doit toujours indiquer
un texte alternatif à l'image, c'est-à-dire un court texte qui
décrit ce que contient l'image. Ce texte sera affiché à la place
de l'image si celle-ci ne peut pas être téléchargée (ça arrive),
ou sur les navigateurs de personnes handicapées (non-
voyants) qui ne peuvent malheureusement pas "voir" l'image.
Cela aide aussi les robots des moteurs de recherche pour les
recherches d'images. Pour la fleur, on mettrait par exemple :
alt="Une fleur".
Les images doivent se trouver obligatoirement à l'intérieur d'un
paragraphe (<p></p>). Voici un exemple d'insertion d'image :

Code : HTML - Sélectionner

<p>
1
Voici une photo que j'ai prise lors de mes dernières vacances à la
2
montagne :<br />
3
<img src="images/[Link]" alt="Photo de montagne" />
4
</p>

Essayer !

Bref, l'insertion d'image est quelque chose de très facile pour peu qu'on
sache indiquer où se trouve l'image, comme on avait appris à le faire avec
les liens.
La plus grosse "difficulté" (si on peut appeler ça une difficulté) consiste à
choisir le bon format d'image. Ici, c'est une photo donc c'est évidemment
le format JPEG qu'on utilise.

Je le répète : évitez à tout prix les accents, majuscules et espaces dans

vos noms de fichiers et de dossiers. Voici un chemin qui va poser
problème :
"Images du site/Image toute bê[Link]"
Il faudrait supprimer les espaces (ou les remplacer par le symbole "_"),
supprimer les accents et tout mettre en minuscules comme ceci :
"images_du_site/image_toute_bete.jpg"
Sachez donc que si votre image ne s'affiche pas, c'est très certainement
parce que le chemin est incorrect ! Simplifiez au maximum vos noms de
fichiers et de dossiers et tout ira bien.

Ajouter une infobulle

L'attribut fait pour afficher une bulle d'aide est le même que pour les
liens : il s'agit de title. Cet attribut est facultatif (contrairement à alt).

Voici ce que ça peut donner :

Code : HTML - Sélectionner

<p>
1 Voici une photo que j'ai prise lors de mes dernières vacances à la
2 montagne :<br />
3 <img src="images/[Link]" alt="Photo de montagne"
4 title="C'est beau les Alpes quand même !" />
</p>
Survolez la photo avec la souris pour voir l'infobulle apparaître.

Essayer !

Miniature cliquable

Si votre image est très grosse, il est conseillé d'en afficher la miniature sur
votre site. Ajoutez ensuite un lien sur cette miniature pour que vos
visiteurs puissent afficher l'image en taille originale.

Il existe des millions de logiciels permettant de créer des miniatures

d'images. J'utilise personnellement Easy Thumbnails. Je vais ainsi disposer
de 2 versions de ma photo : la miniature et l'image d'origine.

Je les place toutes les deux dans un dossier appelé img par exemple.
J'affiche la version montagne_mini.jpg sur ma page et je fais un lien vers
[Link] pour que l'image agrandie s'affiche lorsqu'on clique sur la
miniature.

Voici le code HTML que je vais utiliser pour cela :

Code : HTML - Sélectionner

<p>
1 Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !
2 <br />
3 <a href="img/[Link]"><img src="img/montagne_mini.jpg"
4 alt="Photo de montagne" title="Cliquez pour agrandir" /></a>
</p>

Essayer !

Parfois, certains navigateurs choisissent d'afficher un cadre bleu (ou

violet) pas très esthétique autour de votre image cliquable.
Heureusement, nous pourrons retirer ce cadre grâce au CSS dans peu de
temps.
Retour en haut

Les figures

Au cours de la lecture de ce tutoriel, vous avez déjà rencontré plusieurs

fois des figures. Ce sont des éléments qui viennent enrichir le texte pour
compléter les informations de la page.

Les figures peuvent être de différents types :

 Images
 Codes source
 Citations
 ...

Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous
intéresser aux images, mais contrairement à ce qu'on pourrait croire, les
figures ne sont pas forcément des images : un code source aussi illustre le
texte.

Création d'une figure

Reprenons par exemple cette capture d'écran du premier chapitre :

Le logiciel Bloc-Notes

En HTML5, on dispose de la balise <figure>. Voici comment on pourrait

l'utiliser :

Code : HTML - Sélectionner

<figure>
1
<img src="images/[Link]" alt="Bloc-
2
Notes" />
3
</figure>

Une figure est le plus souvent accompagnée d'une légende. Pour ajouter
une légende, utilisez la balise <figcaption> à l'intérieur de la balise
<figure>, comme ceci :

Code : HTML - Sélectionner

<figure>
1 <img src="images/[Link]" alt="Bloc-
2 Notes" />
3 <figcaption>Le logiciel Bloc-
4 Notes</figcaption>
</figure>

Essayer !
Bien comprendre le rôle des figures

Un peu plus tôt dans ce chapitre, je vous ai dit que les images devaient
être situées dans des paragraphes (placées à l'intérieur d'une balise
<p></p>). Ce n'est pas tout à fait vrai.

Si vous faites de votre image une figure, l'image peut être située en-
dehors d'un paragraphe.

Code : HTML - Sélectionner

<p>Connaissez-vous le logiciel Bloc-Notes ? On peut faire des sites web
1
avec !</p>
2
3
<figure>
4
<img src="images/[Link]" alt="Bloc-Notes" />
5
<figcaption>Le logiciel Bloc-Notes</figcaption>
6
</figure>

Je ne vois pas vraiment de changement. Quand dois-je placer mon image

dans un paragraphe et quand dois-je la placer dans une figure ?

Bonne question ! Tout dépend de ce que votre image apporte au texte :

o Si elle n'apporte aucune information (c'est juste une

illustration pour décorer) : placez l'image dans un paragraphe.
o Si elle apporte une information : placez l'image dans une
figure.

La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu'elle
indique à l'ordinateur que l'image a du sens et qu'elle est importante pour
la bonne compréhension du texte. Cela peut permettre à un programme
de récupérer toutes les figures du texte et de les référencer dans une
table des figures par exemple.

Enfin, sachez qu'une figure peut très bien comporter plusieurs images.
Voici un cas où cela se justifie :

Code : HTML - Sélectionner

<figure>
1
<img src="images/[Link]" alt="Logo Internet
2
Explorer" />
3
<img src="images/[Link]" alt="Logo Mozilla Firefox" />
4
<img src="images/[Link]" alt="Logo Google Chrome" />
5
<figcaption>Logos des différents navigateurs</figcaption>
6
</figure>
Retour en haut

Q.C.M.

Lequel de ces formats d'image n'est pas à utiliser sur Internet ?

o png
o bmp
o jpeg

Lequel de ces formats ne supporte pas la transparence ?

o gif
o png
o jpeg

Quel attribut permet d'indiquer où se trouve l'image à insérer ?

o title
o src
o alt

Quel attribut permet d'afficher une bulle d'aide ?

title
src
alt

Dans quel cas doit-on placer l'image dans une figure ?

Quand l'image apporte une information en complément du texte

Quand l'image est décorative
Quand l'image est très volumineuse

Statistiques de réponses au QCM

Retour en haut
Vous savez maintenant insérer des images dans vos pages web !

Saviez-vous qu'avec HTML5 on peut aussi insérer très facilement des

vidéos et des extraits audio dans ses pages ? Auparavant, il était
obligatoire d'utiliser des plugins assez lourds comme Flash, mais
désormais, c'est simple comme une balise. Vous verrez tout ça dans l'un
des chapitres suivants !
La petite histoire du CSS

Je vous avais averti dès le début de ce cours : nous allons apprendre deux
langages. Nous avons déjà bien entamé notre découverte du HTML, même
s'il reste encore de nombreuses choses à apprendre (nous y reviendrons
dans quelques chapitres). En revanche, il est temps maintenant de nous
intéresser au CSS.

CSS (Cascading Style Sheets), c'est cet autre langage qui vient compléter
le HTML.
Vous vous souvenez de son rôle ? Gérer la mise en forme de votre
site.

Petit rappel : à quoi sert CSS ?

CSS ? C'est lui qui vous permet de choisir la couleur de votre texte.
Lui qui vous permet de sélectionner la police utilisée sur votre site.
Lui encore qui permet de définir la taille du texte, les bordures, le fond...

Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous
pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur,
que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc.

Souvenez-vous de ce petit schéma que nous avions vu dès le premier

chapitre :
Grâce au HTML, nous avons pu rédiger le contenu de notre site, mais c'est
brut de décoffrage. Le CSS le complète pour mettre tout cela en forme et
donner au contenu l'apparence que l'on souhaite.

CSS : des débuts difficiles

Il faut savoir qu'au tout début du Web, CSS n'existait pas. En fait, au
départ, il n'y avait que le langage HTML.
Le HTML est né en 1991, et CSS est né en 1996. Alors, vous vous dites
sûrement : comment faisait-on la mise en forme de 1991 à 1996 ? Eh bien,
uniquement en HTML ! Il y avait en effet des balises HTML dédiée à la mise
en forme. <font color="#aab1c3"> par exemple, permettait de définir la
couleur du texte.

Cependant, les pages HTML commençaient à devenir assez complexes. Il y

avait de plus en plus de balises et c'était un joyeux mélange entre le fond
et la forme, qui rendait la mise à jour des pages web de plus en plus
complexe. C'est pour cela que l'on a créé le langage CSS.
Cependant, le CSS n'a pas été adopté par les webmasters immédiatement,
loin de là. Il fallait se défaire de certaines mauvaises habitudes, et ça a
pris du temps. Encore aujourd'hui on peut trouver des sites web avec des
vieilles balises HTML de mise en forme qui n'existent plus, comme
<font> !

CSS : le support des navigateurs

Tout comme le HTML, le CSS a évolué. Je vous avais indiqué qu'il y avait 4
versions importantes de CSS :

CSS 1
CSS 2.0
CSS 2.1
CSS 3

En fait, la version CSS 3 n'est pas encore totalement finalisée (ce n'est pas
encore une version officielle). Cependant, elle est bien avancée et déjà
bien supportée par de nombreux navigateurs aujourd'hui, ce qui fait qu'on
peut déjà s'en servir.
Il serait dommage de passer à côté, car CSS 3 ajoute de nombreuses
fonctionnalités à CSS (il y a le double de fonctionnalités par rapport à CSS
2.1 !). Nous nous baserons donc dans ce cours sur CSS 3, qui reprend et
complète la plupart des fonctionnalités de CSS 2.1.

Ce sont les navigateurs web qui font le travail le plus complexe : ils
doivent lire le code CSS et comprendre comment afficher la page.

Au début des années 2000, Internet Explorer était le navigateur le plus

répandu, mais son support du CSS est resté longtemps assez médiocre
(pour ne pas dire carrément mauvais ). C'était la grande époque de la
version 6 (IE6), hélas encore utilisée par une petite partie des internautes
aujourd'hui (heureusement, cette proportion tend à diminuer).

Depuis, de nombreux navigateurs sont arrivés et ont chahuté Internet

Explorer : Mozilla Firefox bien sûr, mais aussi Google Chrome. Et je ne
vous parle pas du succès des Mac et iPhone avec leur navigateur Safari.
Cela a incité Microsoft a réagir, qui a publié (après une longue période
d'inactivité) IE 7, puis IE 8 et IE 9. On parle déjà de IE 10.

Bon ton cours d'histoire c'est bien joli, mais en quoi ça me concerne
aujourd'hui ?

Que faut-il retenir de tout ça ? Que les navigateurs ne connaissent pas

toutes les propriétés CSS qui existent. Plus le navigateur est vieux, moins
il connaît de fonctionnalités CSS.

Je vais vous présenter dans ce cours un certain nombre de fonctionnalités

de CSS qui ne fonctionnent pas forcément sur les navigateurs les plus
vieux. Je ne peux pas l'éviter, c'est comme ça : aucun navigateur ne
connaît parfaitement toutes les fonctionnalités CSS de toute façon ! Au
pire, si le navigateur ne connaît pas une fonctionnalité de CSS, il l'ignore
et ne met pas en forme, mais ça ne fait pas planter votre page, ce qui fait
que celle-ci sera toujours lisible.

Je vous recommande fortement de mettre dans vos favoris les sites web
[Link] et [Link] qui affichent des tables de
compatibilité des fonctionnalités de HTML et CSS en fonction des différents
navigateurs (et de leurs différentes versions). Regardez en particulier les
tables de compatibilité pour CSS de [Link].

Table de compatibilité CSS de [Link]

Retour en haut

Où écrit-on le CSS ?

Vous avez le choix, car on peut écrire du code en langage CSS à 3 endroits
différents :

Dans un fichier .css (méthode la plus recommandée) ;

Dans l'en-tête <head> du fichier HTML ;
Directement dans les balises du fichier HTML via un attribut style
(méthode la moins recommandée) ;

Je vais vous présenter ces 3 méthodes, mais sachez d'ores et déjà que la
première... est la meilleure.

Dans un fichier .css (recommandé)

Comme je viens de vous le dire, le plus souvent on écrit du code CSS dans
un fichier spécial ayant l'extension .css (contrairement aux fichiers HTML
qui ont l'extension .html). C'est la méthode la plus pratique et la plus
flexible. Ca nous évite de tout mélanger dans un même fichier. J'utiliserai
cette technique tout au long de la suite de ce cours.

Commençons à pratiquer dès maintenant ! On va partir du fichier HTML

suivant :

Code : HTML - Sélectionner

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="[Link]" />
6 <title>Premiers tests du CSS</title>
7 </head>
8
9 <body>
10 <h1>Mon super site</h1>
11 <p>Bonjour et bienvenue sur mon site !</p>
12 <p>Pour le moment, mon site est un peu <em>vide</em>.
13 Patientez encore un peu !</p>
14 </body>
15 </html>

Vous noterez la ligne <link rel="stylesheet" href="[Link]" /> : c'est elle

qui indique que ce fichier HTML va être associé à un fichier appelé
[Link] qui va gérer sa mise en forme.

Enregistrez ce fichier avec le nom que vous voulez (par exemple

[Link]). Pour le moment, rien d'extraordinaire à part la nouvelle balise
que nous avons ajoutée.

Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par
exemple Notepad++) et copiez-y ce bout de code CSS (rassurez-vous je
vous expliquerai ce qu'il veut dire tout à l'heure) :

Code : CSS - Sélectionner

p
1
{
2
color:
3
blue;
4
}

Pour activer la coloration du code dans Notepad++, allez dans le menu

Langage > C > CSS.
Enregistrez le fichier en lui donnant un nom qui se termine par .css,
comme [Link]. Placez ce fichier .css dans le même dossier que votre
fichier .html.

Dans Notepad++, vous devriez voir quelque chose comme ça :

Dans votre explorateur de fichiers, vous devriez les voir placés côte à
côte. D'un côté le .html, de l'autre le .css :
Ouvrez maintenant votre fichier [Link] dans votre navigateur pour
l'essayer, comme vous le faites d'habitude. Regardez, c'est magique : vos
paragraphes sont écrits en bleu !
Essayer !

Il est inutile d'ouvrir directement le fichier [Link] dans le navigateur. Il

faut ouvrir le fichier [Link] (il fera automatiquement appel au fichier
[Link]).

Dans l'en-tête <head> du fichier HTML

Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML :
cela consiste à insérer le code CSS directement dans une balise <style> à
l'intérieur de l'en-tête <head>.

Voici comment on peut obtenir exactement le même résultat avec un seul

fichier .html qui contient le code CSS :

Code : HTML - Sélectionner

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style>
6 p
7 {
8 color: blue;
9 }
10 </style>
11 <title>Premiers tests du CSS</title>
12 </head>
13
14 <body>
15 <h1>Mon super site</h1>
16 <p>Bonjour et bienvenue sur mon site !</p>
17 <p>Pour le moment, mon site est un peu <em>vide</em>.
18 Patientez encore un peu !</p>
19 </body>
20 </html>

Testez, vous verrez que le résultat est le même :

Essayer !

Directement dans les balises (non recommandé)

Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un

attribut style à n'importe quelle balise. Vous insèrerez votre code CSS
directement dans cet attribut :

Code : HTML - Sélectionner

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Premiers tests du CSS</title>
6 </head>
7
8 <body>
9 <h1>Mon super site</h1>
10
11 <p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
12 <p>Pour le moment, mon site est un peu <em>vide</em>.
13 Patientez encore un peu !</p>
14 </body>
 </html>

Cette fois, seule la balise du premier paragraphe qui contient le code CSS
sera colorée en bleu :

Essayer !

Quelle méthode choisir ?

Je trouve que la première méthode que tu recommandes est plus

compliquée que les deux autres ! Pourquoi nous conseilles-tu de créer 2
fichiers, j'étais bien moi avec juste un fichier .html !

Je vous recommande fortement de prendre l'habitude de travailler avec la

première méthode parce que c'est celle utilisée par la majorité des
webmasters... Pourquoi ?
Pour le moment, vous faites vos tests dans un seul fichier HTML.
Cependant, votre site sera plus tard constitué de plusieurs pages HTML, on
est d'accord ?
Imaginez : si vous placez le code CSS directement dans le fichier HTML, il
faudra copier ce code dans tous les fichiers HTML de votre site ! Et si
demain vous changez d'avis, par exemple si vous voulez que vos
paragraphes soient écrits en rouge et non en bleu, il faudra modifier
chaque fichier HTML un à un !

Le code CSS est répété dans chaque fichier HTML : pas pratique !

Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire
cette instruction qu'une seule fois pour tout votre site !

Le code CSS est indiqué une fois pour toutes dans un fichier CSS : c'est
plus simple !
Retour en haut

Appliquer un style : sélectionner une balise

Maintenant que nous savons où placer le code CSS, intéressons-nous à ce
code de plus près. Je vous ai donné, sans vous l'expliquer, un premier bout
de code CSS :

Code : CSS - Sélectionner

p
1
{
2
color:
3
blue;
4
}

Dans un code CSS comme celui-ci, on trouve 3 éléments différents :

o Des noms de balises : on écrit les noms des balises dont on

veut modifier l'apparence. Par exemple, si je veux modifier
l'apparence de tous les paragraphes <p>, je dois écrire p.
o Des propriétés CSS : les "effets de style" de la page sont
rangés dans des propriétés. Il y a par exemple la propriété
color qui permet d'indiquer la couleur du texte, font-size qui
permet d'indiquer la taille du texte, etc. Il y a beaucoup de
propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai
pas à les connaître toutes par cœur (sauf s'il me prend une
envie sadique de vous faire souffrir ).
o Les valeurs : à chaque propriété CSS on doit indiquer une
valeur. Par exemple, pour la couleur, il faut indiquer le nom de
la couleur. Pour la taille, il faut indiquer quelle taille on veut,
etc.

Schématiquement, une feuille de style CSS ressemble donc à ça :

Code : CSS - Sélectionner

1 balise1
2 {
3 propriete:
4 valeur;
5 propriete:
6 valeur;
7 propriete:
8 valeur;
9 }
10
11 balise2
12 {
13 propriete:
14 valeur;
 propriete:
valeur;
propriete:
valeur;
15 propriete:
16 valeur;
17 }
18
19 balise3
{
propriete:
valeur;
}

Vous repérez sur ce schéma les balises, propriétés et valeurs dont je viens
de vous parler.

Comme vous le voyez, on écrit le nom de la balise (par exemple h1), et on

ouvre des accolades pour y mettre les propriétés et valeurs que l'on veut à
l'intérieur. On peut mettre autant de propriétés que l'on veut à l'intérieur
des accolades. Chaque propriété est suivie du symbole "deux-points" (:)
puis de sa valeur correspondante. Enfin, chaque ligne se termine par un
point-virgule (;).

Je vous apprendrai de nombreuses propriétés dans les chapitres suivants.

Pour le moment, on va juste changer la couleur pour s'entraîner dans nos
exemples.

Le code CSS que nous avons utilisé jusqu'ici :

Code : CSS - Sélectionner

p
1
{
2
color:
3
blue;
4
}

... signifie donc en français : "Je veux que tous mes paragraphes soient
écrits en bleu.". Il donne ce résultat à l'écran :
Essayez de changer le nom de la balise affectée par le code CSS. Par
exemple, si j'écris h1, c'est le titre qui sera écrit en bleu. Modifiez votre
fichier [Link] comme ceci :

Code : CSS - Sélectionner

h1
1
{
2
color:
3
blue;
4
}

Maintenant, ouvrez à nouveau votre page HTML (souvenez-vous, on ouvre

la page HTML dans le navigateur, pas le fichier CSS !) : vous devriez voir
son titre s'afficher en bleu !
Appliquer un style à plusieurs balises

Prenons le code CSS suivant :

Code : CSS - Sélectionner

h1
1{
2 color:
3 blue;
4}
5
6 em
7{
8 color:
9 blue;
}
Il signifie que nos titres <h1> et nos textes importants <em> doivent
s'afficher en bleu. Par contre, c'est un peu répétitif, vous ne trouvez pas ?

Heureusement, il existe un moyen en CSS d'aller plus vite si les 2 balises

doivent avoir la même présentation. Il suffit de combiner la déclaration en
séparant les noms des balises par une virgule comme ceci :

Code : CSS - Sélectionner

h1, em
1
{
2
color:
3
blue;
4
}

Cela signifie : "Je veux que le texte de mes <h1> et <em> soit écrit en
bleu".

Vous pouvez indiquer autant de balises à la suite que vous le désirez.

Des commentaires dans du CSS

Comme en HTML, il est possible de mettre des commentaires. Les
commentaires ne seront pas affichés, ils servent simplement à indiquer
des informations pour vous, par exemple pour vous y retrouver dans un
looong fichier CSS.

D'ailleurs, vous allez vous en rendre compte, en général le fichier HTML

est assez petit, et la feuille CSS assez grande (si elle contient tous les
éléments de style de votre site, c'est un peu normal). Notez qu'il est
possible de créer plusieurs fichiers CSS pour son site si vous ressentez le
besoin de séparer un peu votre code CSS (en fonction des différentes
sections de votre site par exemple).

... De quoi on parlait déjà ? Ah oui, les commentaires en CSS.

Donc, pour faire un commentaire, c'est facile ! Tapez /*, suivi de votre
commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par
exemple :

Code : CSS - Sélectionner

1 /*
2 [Link]
3 ---------
4
Par Mathieu Nebra
5
*/
6
7 p
8 {
9 color: blue; /* Les paragraphes seront
10 bleus */
11 }

Il est possible que j'utilise les commentaires dans la suite du cours pour
vous donner des explications à l'intérieur même des fichiers .css.
Retour en haut

Appliquer un style : class et id

Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique

que TOUS les paragraphes soient écrits par exemple en bleu.
Comment faire pour que seulement certains paragraphes soient écrits
d'une manière différente ? On pourrait placer notre code CSS dans un
attribut style sur la balise que l'on vise (c'est la technique que je vous ai
présentée un peu plus tôt), mais comme je vous l'ai dit ce n'est pas
recommandé (il vaut mieux utiliser un fichier CSS externe).
Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui
fonctionnent sur toutes les balises :

o L'attribut class
o L'attribut id

Que les choses soient claires dès le début : les attributs class et id sont
quasiment identiques. Il y a seulement une petite différence que je vous
dévoilerai plus bas.
Pour le moment et pour faire simple, on ne va s'intéresser qu'à l'attribut
class.

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur
n'importe quelle balise, aussi bien titre que paragraphe, image, etc.

Code : HTML - Sélectionner

<h1 class="">
1
</h1>
2
<p class=""></p>
3
<img class="" />

Oui mais que met-on comme valeur à l'attribut class ?

En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que
vous voulez, tant que le nom commence par une lettre.

Par exemple, je vais donner la classe introduction à mon premier

paragraphe :

Code : HTML - Sélectionner

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="[Link]" />
6 <title>Premiers tests du CSS</title>
7 </head>
8
9 <body>
10 <h1>Mon super site</h1>
11 <p class="introduction">Bonjour et bienvenue sur mon site !</p>
12 <p>Pour le moment, mon site est un peu <em>vide</em>.
13 Patientez encore un peu !</p>
14 </body>
15 </html>
Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom :
introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour
dire : "Je veux que seules les balises qui ont comme nom introduction
soient affichées en bleu".

Pour faire ça en CSS, indiquez le nom de votre classe en commençant par

un point, comme ceci :

Code : CSS - Sélectionner

.introductio
1n
2{
3 color:
4 blue;
}

Testez le résultat : seul votre paragraphe appelé "introduction" va

s'afficher en bleu !
Et l'attribut id alors ?

Lui, il fonctionne exactement de la même manière que class, à un détail

près : il ne peut être utilisé qu'une fois dans le code.

Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile
si vous faites du Javascript plus tard pour reconnaître certaines balises.
D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens
(pour réaliser des ancres).

En pratique, nous ne mettrons des id que sur des éléments qui sont
uniques sur votre page, comme par exemple le logo :

Code : HTML - Sélectionner

<img src="images/[Link]" alt="Logo du site"
1
id="logo" />

Si vous utilisez des id, dans le CSS il faudra faire précéder le nom de l'id
par un dièse (#) :

Code : CSS - Sélectionner

#logo
1
{
2
/* Indiquez les propriétés CSS
3
ici */
4
}

Je ne vous propose pas de le tester, ça fonctionne exactement comme

class.

Si vous vous emmêlez les pinceaux entre class et id retenez que 2 balises
peuvent avoir le même nom avec l'attribut class. Un nom d'id doit en
revanche être unique dans la page HTML.

Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à
certains mots qui ne sont pas à l'origine entourés par des balises.

En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne

pouvez donc en mettre que sur une balise. Par exemple, si je veux
modifier uniquement "bienvenue" dans le paragraphe suivant :
 Code : HTML - Sélectionner
<p>Bonjour et bienvenue sur mon site !
1
</p>

Ça serait facile à faire s'il y avait une balise autour de "bienvenue",

malheureusement il n'y en a pas. Heureusement, on a inventé... la balise-
qui-sert-à-rien.

En fait, on a inventé 2 balises dites universelles qui n'ont aucune

signification particulière (elles n'indiquent pas que le mot est important
par exemple). Il y a une petite (mais importante !) différence entre ces
deux balises :

<span> </span> : c'est une balise de type inline. C'est une balise
que l'on place au sein d'un paragraphe de texte, pour sélectionner certains
mots uniquement. Les balises <strong> et <em> sont de la même
famille. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle
dont nous allons nous servir pour colorer "bienvenue".
<div> </div> : c'est une balise de type block qui entoure un bloc de
texte. Les balises de la même famille sont <p>, <h1>, etc. Ces balises ont
quelque chose en commun : elles créent un nouveau "bloc" dans la page,
et provoquent donc obligatoirement un retour à la ligne. <div> est une
balise fréquemment utilisée dans la construction d'un design, comme nous
le verrons plus tard.

Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la

met autour de "bienvenue", on lui rajoute une classe (du nom qu'on veut),
on crée le CSS et c'est gagné !

Code : HTML - Sélectionner

<p>Bonjour et <span class="salutations">bienvenue</span> sur mon
1
site !</p>

Code : CSS - Sélectionner

.salutations
1
{
2
color:
3
blue;
4
}
Appliquer un style : les sélecteurs avancés

En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la
forme. Pour cibler (on dit "sélectionner") les éléments de la page à
modifier, on utilise ce qu'on appelle des sélecteurs. Vous en avez déjà
utilisé un peu plus tôt dans ce chapitre, résumons-les pour commencer.

Les sélecteurs que vous connaissez déjà

Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus
couramment utilisés. Il faut les connaître par coeur. Commençons par la
base de la base :

Code : CSS - Sélectionner

1p
2{
3
4}
... signifie "Je veux affecter tous les paragraphes". Après, c'est à vous de
dire ce que vous faites à ces paragraphes (vous les écrivez en bleu par
exemple).

Nous avons aussi vu :

Code : CSS - Sélectionner

h1,
1
em
2
{
3
4
}

... qui signifie "Tous les titres et textes importants". Nous avons
sélectionné deux balises d'un coup.

Et enfin, nous avons vu comment sélectionner des balises précises à qui

nous avons donné un nom grâce aux attributs class et id :

Code : CSS - Sélectionner

.clas
1
s
2
{
3
4
}
5
6
#id
7
{
8
9
}

Vous savez quoi ? Il existe des dizaines d'autres façons de cibler des
balises en CSS ! Nous n'allons pas toutes les voir, car il y en a beaucoup et
certaines sont complexes, mais voici déjà de quoi vous permettre d'être
plus efficaces en CSS !

Les sélecteurs avancés

* : sélecteur universel

Code : CSS - Sélectionner

1*
2{
3
4}

Sélectionne toutes les balises sans exception. On l'appelle le sélecteur

universel.

A B : une balise contenue dans une autre

Code : CSS - Sélectionner

h3
1
em
2
{
3
4
}

Sélectionne toutes les balises <em> situées à l'intérieur d'une balise

<h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balise.

Exemple de code HTML correspondant :

Code : HTML - Sélectionner

<h3>Titre avec <em>texte
1
important</em></h3>

A + B : une balise qui en suit une autre

Code : CSS - Sélectionner

h3 +
1
p
2
{
3
4
}

Sélectionne la première balise <p> située après un titre <h3>.

Exemple :

Code : HTML - Sélectionner

1 <h3>Titre</h3>
2
 <p>Paragraphe</
3
p>

A[attribut] : une balise qui possède un attribut

Code : CSS - Sélectionner

a[title
1
]
2
{
3
4
}

Sélectionne tous les liens <a> qui possèdent un attribut title.

Exemple :

Code : HTML - Sélectionner

<a href="[Link]
1
title="Infobulle">

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

Code : CSS - Sélectionner

a[title="Cliquez
1
ici"]
2
{
3
4
}

Idem, mais l'attribut doit en plus avoir exactement pour valeur "Cliquez
ici".

Exemple :

Code : HTML - Sélectionner

<a href="[Link] title="Cliquez
1
ici">

A[attribut*="Valeur"] : une balise, un attribut et une valeur

 Code : CSS - Sélectionner
a[title*="ici
1
"]
2
{
3
4
}

Idem, l'attribut doit cette fois contenir dans sa valeur le mot "ici" (peu
importe sa position).

Exemple :

Code : HTML - Sélectionner

<a href="[Link] title="Quelque part
1
par ici">

D’autres sélecteurs existent !

Je ne vous ai présenté qu'une partie des sélecteurs CSS ici, mais sachez
qu'il en existe beaucoup d'autres. Si vous voulez une liste complète, vous
pouvez vous renseigner directement à la source : sur le site du W3C !
C'est très complet.

Sachez que nous découvrirons certains de ces autres sélecteurs dans la

suite de ce cours !
Retour en haut

Q.C.M.

Laquelle de ces méthodes est la plus recommandée pour mettre du CSS ?

Tapez le CSS entre les balises <head></head> à l'aide de la balise

<style>
Taper le CSS dans un fichier .css
Taper le CSS dans un attribut "style" ajouté aux balises

Quels attributs sont nécessaires sur la balise <link /> pour lier la page
HTML à un fichier CSS ?

rel et type
href et rel
title et href
Combien de propriétés peut-on appliquer à une balise ?

o De 1 à 10
o De 0 à 10
o Autant qu'on veut

Que signifie ce bout de CSS ?

Code : CSS - Sélectionner

strong
1
{
2
color:
3
blue;
4
}

Mettre tous les textes considérés comme importants en bleu

Agrandir tous les textes considérés comme importants
Mettre en gras tous les textes en bleu

Comment faire pour demander à ce qu'un style s'applique à tous les

titres ?

o h1, h6
o h1, h2, h3, h4, h5, h6
o h1 h2 h3 h4 h5 h6

Lequel de ces textes n'est ni un commentaire CSS, ni un commentaire

HTML ?

o /* Je suis un commentaire */
o <!-- Non c'est moi le commentaire ! -->
o <! Vous vous méprenez, c'est moi ! -->

Quelle est la particularité des id par rapport aux class ?

 Ils ne peuvent être mis que sur des balises de titre

 On ne peut donner un nom d'id qu'une seule fois, tandis qu'on peut
répéter un nom de class plusieurs fois
 Les id ne fonctionnent que sur des balises de type block, tandis que
class fonctionne sur des balises de type inline

Laquelle de ces balises n'est pas une balise universelle ?

o <block>
o <div>
o <span>
Statistiques de réponses au QCM

Que de nouveautés, que de nouveautés...

Eh oui, le CSS est un langage "à part", les règles ne sont pas les mêmes.
Mais comme vous pouvez le voir, HTML et CSS sont très liés, et on peut
difficilement concevoir l'un sans l'autre.

Toutes les nouvelles notions que je vous ai apprises dans ce chapitre sont
importantes, aussi prenez votre temps pour bien les assimiler. Rien ne
presse, personne ne vous oblige à passer au chapitre suivant (à moins que
vous ayez fait un pari stupide avec des amis du genre "Tu n'arriveras pas
à apprendre à créer un site web en 2 jours").

Si tant de nouveautés d'un seul coup vous font un peu peur, ne vous
affolez pas pour autant : le plus dur c'est toujours d'apprendre "les bases".
Or, c'est justement ce qu'on vient de faire. Tout le reste devrait couler de
source à partir de maintenant.

Dans le prochain chapitre, nous allons découvrir un nombre important de

propriétés CSS. Car pour le moment, à part écrire notre texte en bleu, on
ne sait rien faire de bien palpitant.