La Création Web HTML en 7 Jours

SAVOIR RAPIDE - COLLECTION DEVELOPPEMENT WEB
La Cration Web HTML en 7 jours!
Version 1.0
2009 Editions Savoir Rapide (savoir-rapide.com)
La Cration Web HTML en 7 jours ! contient les 7 premires leons du cours complet La
conception web avec Html. Vous pouvez obtenir ce cours sur le site savoir-rapide.com.
Table des Matires

Dbuter avec HTML ...................................................................................................................................... 3
Mise en forme du texte............................................................................................................................... 9
Paragraphes et images............................................................................................................................. 15
Listes et liens ................................................................................................................................................ 21
Les tableaux (1)............................................................................................................................................ 26
Les tableaux (2)............................................................................................................................................ 31
Les tableaux (3)............................................................................................................................................ 38
LEON 1
Leon
DEBUTER AVEC HTML
1
Dbuter avec HTML
es pages web sont des fichiers textes classiques avec des extensions en .htm ou .html. Elles
contiennent un code appel langage hyper texte ("Hyper Text Mark-up Language). Quand il est
interprt par des navigateurs comme Internet Explorer, Firefox, Google Chrome ou dautres, il
est affich comme une page web habituelle.
Pour crer une page web html vous avez deux options :
Vous pouvez utiliser un diteur de pages web comme FrontPage de Microsoft,

Dreamweaver dAdobe ou des logiciels semblables. Ces logiciels fonctionnent comme
Word : vous crivez du texte, insrez des graphiques et sauvegardez le document comme
une page html. Un logiciel de cration de pages web va gnrer du code html et le
sauvegarder dans un fichier de type html. Crer des pages web est assez facile avec ce
type de logiciels, mais si vous souhaitez crer des pages, dynamiques, professionnelles au
design raffin, ce nest pas une solution efficace : un dveloppeur web professionnel doit
matriser le code html lui-mme.
Lautre option est dtudier le code html et dcrire des pages web avec un simple diteur
de texte type notepad. Comme dj indiqu, votre code sera affich comme une page web
par un navigateur internet. Par la suite, aprs avoir appris le langage html et gagn en
confiance, vous pourrez utiliser des logiciels de cration comme Dreamweaver pour
acclrer le processus. Cest cette deuxime option qui est choisie dans ce livret.
Trois raisons pour crire directement du code HTML
Si vous souhaitez crer des pages web professionnelles, utiliser uniquement des logiciels
ddition de pages web ne sera pas suffisant comme vu plus haut. Vous devez tre laise
avec le langage html pour faire de petites modifications dans le code automatiquement
gnr par ces logiciels. Le code produit par ces programmes est souvent volumineux et
embrouill ; le maintenir est donc assez ardu. Il vous faudra donc le modifier et
loptimiser, ou mme lcrire directement.
Si vous vous voulez crer des pages web dynamiques (pages web qui saffichent
diffremment chaque connexion) vous devez connatre le langage html car il vous
faudra faire un peu de programmation.
DEBUTER AVEC HTML
LEON 1
Si vous souhaitez utiliser des formulaires pour recueillir des informations envoyer
votre serveur (lordinateur qui hberge votre site web) et ensuite retourner des pages vers
le navigateur, la connaissance du code html est indispensable.
Premire page web

Pour les leons qui vont suivre vous naurez besoin que dun simple diteur de texte pour crire
le code html. Le bloc-notes de Windows (accessible au menu dmarrer accessoires) fera trs
bien laffaire. Il vous faudra aussi un navigateur comme Internet Explorer, Firefox ou Google
Chrome. Dans la suite de ce cours on suppose que vous travaillez sous Windows
9X/NT/2000/XP/Vista ; navigateur dsignera un logiciel comme Firefox, Internet Explorer ou
Google Chrome.
Ouvrez le bloc-notes et tapez le code suivant :
Exemple 1-1 : page 1-1.html.
<HTML>
Bonjour!
</HTML>
Maintenant, sauvegardez le texte sous le nom "page1-1.html" (onglet Fichier puis "Enregistrer
Sous"). Le bloc-notes ajoute par dfaut chaque fichier quil sauvegarde une extension ".txt".
Pour vous assurer que le fichier sera sauv avec une extension ".html" vous devez modifier le
Type en "Tous les fichiers" dans la fentre "Enregistrer sous"(figure 1.0) et taper le nom page11.html comme ci-dessous :
Figure 1.0 : sauvegarder un fichier sous format html.
DEBUTER AVEC HTML
LEON 1
Vous pouvez aussi faire : clic bouton droit Nouveau, Document texte, ensuite ouvrir
"Nouveau Document Texte.txt". Une fois le texte entr, enregistrez le fichier normalement et
changez le nom en "page 1-1.html" ( la question "voulez vous vraiment modifier lextension",
rpondre oui).
Pour afficher ce fichier html, ouvrer lexplorateur Windows et double-cliquez sur le fichier. Vous
devez voir apparatre votre premire page web dans votre navigateur Internet (figure 1.1).
Figure 1.1 : voici ce qui doit apparatre dans votre navigateur Internet.
Les symboles <HTML> et </HTML> sont appels tags (ou balises). Le premier est un tag de
dbut le second un tag de fin. Les tags sont lquivalent des commandes dans les langages de
programmation. Le tag <HTML> indique au navigateur le dbut du code HTML et le tag
</HTML> signale sa fin. En gnral on ne place pas le texte directement entre les tags
<HTML> et </HTML> (comme on le verra dans le paragraphe suivant) mais pour ce premier
exemple on peut se le permettre.
Len-tte en HTML
Chaque page html doit avoir un en-tte (header). Len-tte contient des informations importantes
sur la page. On utilise des tags varis pour les diffrentes parties de len-tte qui est spcifi par
les tags <HEAD> et </HEAD> :
<HTML>
<HEAD>
.
</HEAD>
</HTML>
On place ensuite les informations de len-tte entre les tags <HEAD> et </HEAD>.
DEBUTER AVEC HTML
LEON 1
Une des parties les plus importantes de len-tte est le titre; cest le petit texte qui apparat dans la
barre de titre de la fentre du navigateur. Ainsi un document html aura la forme suivante :
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>
</HTML>
Le corps de la page web

Aprs len-tte il faut un corps (body) notre page Web ; dans ce corps on placera le contenu de
la page web. Logiquement nous utiliserons les tags suivants :
<BODY>
</BODY>
Le corps de la page se situe juste aprs le tag de fin de len-tte. Entrez le code html suivant dans
le Bloc-notes et sauvegardez-le sous le nom le fichier "page1-2.html". Ensuite affichez le fichier
html dans votre navigateur en double-cliquant sur le fichier.
Exemple 1-2 : page1-2.html.
<HTML>
<HEAD>
<TITLE>La page Web de mon entreprise</TITLE>
</HEAD>
<BODY>
Bienvenue sur notre page Web.
</BODY>
</HTML>
DEBUTER AVEC HTML
LEON 1
Figure 1.2 : le fichier page1-2.html vu par Firefox. Remarquez le titre de la fentre La page Web de mon entreprise.
Si vous le souhaitez vous pouvez modifier la couleur du fond de votre page web en modifiant le
tag <BODY> comme ceci :
<BODY BGCOLOR="#00FF00">
</BODY>
Cela changera la couleur du fond de page en vert. Chaque couleur est la combinaison des trois
couleurs principales : rouge, vert et bleu. Le format HTML utilis pour spcifier la couleur est
#RRVVBB. Dans ce format, RR correspond la valeur du composant rouge en hexadcimal ;
VV et BB sont respectivement les valeurs des composants vert et bleu.
Les nombres hexadcimaux de deux chiffres sont compris entre 00 et FF (0 et 255 en format
dcimal). Donc quand nous crivons 00FF00 nous indiquons le choix rouge=0, vert=255 et
bleu=0 ; le rsultat obtenu est donc un vert pur.
Vous pouvez de la sorte afficher 16 millions de couleurs diffrentes. Retenez cependant que tous
les ordinateurs ne seront pas forcment capables dafficher toutes ces couleurs avec des nuances
marques.
Les images darrire plan
A la place dune couleur on peut utiliser une image comme arrire plan. Il faut pour cela modifier
le tag <BODY> pour y inclure le nom dun fichier image. Supposons que nous avons un fichier
"image1.gif" et que nous voulons lutiliser comme arrire plan. Le fichier image doit se situer dans
le mme dossier que notre fichier html, sinon le navigateur ne pourra pas le trouver. Sil se trouve
dans un dossier diffrent vous devez indiquer le chemin exact du fichier image.
<HTML>
<HEAD>
<TITLE>La page Web de mon entreprise</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
Bienvenue sur notre page Web.
</BODY>
</HTML>
DEBUTER AVEC HTML
LEON 1
Figure 1.3 : le fichier page1-3.html vu par Firefox ; le texte de la page et limage sur tout larrire plan.
Exercices
Important : Vous ne devez pas utiliser de logiciel de cration web comme FrontPage,
Expression ou Dreamweaver. Vous devez travailler sur le code en utilisant un simple
diteur de texte.
1. Crez un fichier html pour une page web simple, qui affiche du texte et utilise une
image comme arrire plan.
2. Modifiez le code de lexercice 1, pour avoir du bleu la place de limage darrire
plan.
3. Faites une liste de tous les tags utiliss dans cette leon. Dcrivez-les brivement.
LEON 2
Leon
LA MISE EN FORME DU TEXTE
2
Mise en forme du texte
omme dans le prsent livret, le texte des pages web peut avoir des styles varis et utiliser
diffrentes polices et tailles. Dans cette leon nous allons tudier les techniques de mise en forme
du texte.
Modifier le style du texte
En html, on peut facilement faire apparatre du texte en italique, gras ou soulign, en encadrant le
texte vis par des tags spcifiques. Encadrer le texte avec <B></B> le fera apparatre en gras,
avec <I></I> on aura de litalique, et pour le soulign on utilisera <U></U>.
<BODY>
Ceci est trs<B> important </B>
</BODY>
Lexemple 2-1 suivant, nous montre le code pour du texte en gras, italique, soulign ou toute
combinaison de ces diffrents styles.
Exemple 2-1: page2-1.html.
<HTML>
<HEAD>
<TITLE>Exemple 1, Leon 2</TITLE>
</HEAD>
<BODY>
<B>Ce texte est en gras</B><br>
<I>alors quici il est en italique</I><br>
<U>et celui-ci est soulign.</U><br>
<B><I>Regardez, cest gras et en italique.</I></B>
</BODY>
</HTML>
Vous avez bien sr remarqu les tags <BR> la fin des trois premires lignes du code ci-dessus.
Appuyer sur la touche Enter, nous fait bien passer la ligne dans le code, mais dans la page
rsultante affiche par le navigateur, il ny aura pas de passage la ligne. Pour cela il faut utiliser le
LEON 2
tag <BR> dans notre code. Remarquez aussi que le tag <BR> est lun des rares tags qui na pas
de tag de fin.
Figure 2-1 : textes en gras, italique et soulign.
Les tags imbriqus

Dans le paragraphe prcdent nous avons vu une ligne de code avec des tags imbriqus :
<B><I>Regardez, cest gras et en italique.</I></B>
Quand vous utilisez des tags imbriqus vous devez vous assurez quils ne se chevauchent pas lun
lautre. Ils doivent tre correctement imbriqus.
Les polices largeur fixe
Les polices classiques utilisent des largeurs diffrentes pour les lettres. Par exemple la lettre w
une largeur plus importante que la lettre i.
Il peut tre utile dutiliser une police o toutes les lettres ont la mme largeur. Si par exemple
vous devez crer un tableau de chiffres et avoir des colonnes de nombres exactement les unes
sous les autres, ce type de police fera laffaire.
Pour forcer le navigateur utiliser une police largeur fixe, il faut insrer le texte entre des tags
de type <TT></TT> (TT quivaut "Typewriter Texte").
Figure 2-2 : police normale et police largeur fixe.
10
LEON 2
Modifier les polices et leur taille

On peut changer les polices et leurs tailles en utilisant les tags <FONT></FONT>. Le tag
FONT possde quelques paramtres (ou attributs) qui spcifient le nom de la police, sa taille, sa
couleur etc.
Taille de la police
Pour changer la taille de la police dans un texte, insrez le entre des tags <FONT> :
<FONT SIZE=n>...</font>
Ci-dessus la taille de la police est n; elle doit tre comprise entre 1 et 7. Si vous tapez un texte
sans spcifier sa taille, elle sera de 3 par dfaut.
<HTML>
<HEAD>
<TITLE>Exemple 2, Leon
</HEAD>
<BODY>
<FONT SIZE=1>Ce texte a
</BODY>
</HTML>
2</TITLE>
une
une
une
une
une
une
une
taille
taille
taille
taille
taille
taille
taille
de
de
de
de
de
de
de
1</FONT><br>
2</FONT><br>
3</FONT><br>
4</FONT><br>
5</FONT><br>
6</FONT><br>
7</FONT><br>
Figure 2-3 : diffrentes tailles de police.
11
LEON 2
Le type de police
On peut spcifier diffrents types de police en indiquant leur nom dans un tag <FONT>.
<FONT FACE="Font nom de la police">...</FONT>

<HTML>
<HEAD>
<TITLE>Exemple 3, Leon 2</TITLE>
</HEAD>
<BODY>
<FONT FACE="ARIAL">Ce texte est en police Arial</FONT><br>
<FONT FACE="IMPACT">Ce texte est en police Impact</FONT><br>
</BODY>
</HTML>
Vous pouvez essayer dautres polices et observer les diffrences. Retenez juste que les pages web
sont affiches par des systmes dexploitations et navigateurs diffrents et parfois mme par des
tlphones portables. Par consquent vous devez choisir des polices parmi les plus rpandues.
Vous pouvez aussi utiliser une liste de polices dans le tag <FONT>. De cette faon si un
navigateur ne connat pas une police, il essaiera la suivante dans la liste :
<FONT Face="Arial,HELVATICA">...</FONT>
Modifier la couleur des polices

Dans les leons prcdentes nous avons appris modifier la couleur de fond dune page web. Ici
nous allons voir comment modifier la couleur du texte dune page. Etudiez lexemple suivant :
<HTML>
<HEAD>
<TITLE>Exemple 4, leon 2</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">Ce texte est en rouge.</FONT><br>
<FONT COLOR="#00FF00">Ce texte est en vert.</FONT><br>
<FONT COLOR="#0000FF">Ce texte est en bleu.</FONT><br>
</BODY>
</HTML>
On a utilis diffrentes couleurs pour chaque ligne du texte. Le format des couleurs a dj t
dcrit la leon prcdente. Essayer diffrentes combinaisons dans le code ci-dessus et observez
leurs effets.
Combiner les attributs de la police
12
LEON 2
Comme vous le devinez, on peut aisment combiner les diffrents attributs du tag <FONT>
pour produire diffrents effets. Et nous avons aussi vu plus haut que lon peut imbriquer les
diffrents tags. Lexemple ci-dessous est donc parfaitement correct en langage html :
<B><I><FONT SIZE="5" FACE="IMPACT" COLOR="#00FF00">
Une ligne verte, en gras et italique avec une police Impact
</FONT></I></B>
Modifier la couleur par dfaut de la police

Chaque navigateur possde ses propres paramtres par dfaut pour le texte, les liens, les liens
visits et les liens actifs. La couleur du texte est le noir en gnral. Les liens sont bleu etc. Pour
changer ces couleurs par dfauts, vous pouvez modifier les attributs du tag <BODY> comme cidessous :
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#00FF00"
ALINK="#FF0000">
...
</BODY>
BGCOLOR : couleur de fond de la page web.

TEXT : couleur du texte.
LINK : couleur dun lien.
VLINK : couleur dun lien visit.
ALINK : couleur dun lien actif.
Vous retiendrez plus facilement ces tags si vous les utilisez et pratiquez un peu. Faire les exercices
est le minimum que vous puissiez faire. Vous pouvez aussi crer vos propres pages web pour
vous exercer.
Exercices
Important : Vous ne devez pas utiliser de logiciels de cration comme FrontPage,
diteur de texte.
1. Ecrivez une page html qui utilise du texte avec les styles suivants dans des lignes
diffrentes :
Italique et gras
Italique et soulign
Gras et soulign
2. Composez une page web contenant le mot "l
enoms
uperlon
g"
comme unique mot. Chaque caractre du mot aura une taille diffrente. Le
premier caractre aura une taille de 1. Les suivants une taille de 2 7. A partir du
13
LEON 2
8ime caractre, utilisez de nouveau la taille 7 en dcroissant jusquau dernier

caractre (il aura une taille de 1).
3. Ecrivez une page html qui affiche 9 lignes de couleurs diffrentes. Prcisez la
couleur de chaque ligne dans le texte de la ligne.
14
LEON 3
Leon
PARAGRAPHES ET IMAGES
3
Paragraphes et images
ur une page web le texte est gnralement organis en paragraphes. Ces pages peuvent aussi
contenir des images et des photos. Dans cette leon nous allons apprendre organiser des
paragraphes, et ajouter des images une page web. Nous avons prcdemment utilis le tag
<BR> pour passer la ligne. Ici nous allons voir comment diviser le texte en paragraphes.
Les paragraphes
Un paragraphe commence par une nouvelle ligne prcde dune ligne vide. Le tag utilis pour
spcifier un paragraphe est <P> </P>. Il est possible dimbriquer dautres tags dans un tag
paragraphe. Par exemple les tags de police, <FONT>, peuvent tre utiliss dans les paragraphes.
<p>Premier paragraphe</p>
<p>Second paragraphe</p>
Dans les leons prcdentes nous avons rencontr le tag <TT></TT>. Il existe un autre tag
qui fonctionne presque identiquement, le tag <PRE></PRE>. La seule diffrence est que le
texte entre des tag <PRE> na pas besoin du tag <BR> pour passer la ligne : le texte entre les
tags <PRE> passe la ligne dans le navigateur quand on passe la ligne dans le code html.
Espaces entre les mots
Le navigateur naffichera pas plus dun espace entre les mots mme si vous en avez plac
plusieurs dans le code. Si vous souhaitez afficher plus dun espace entre deux mots, vous devez
utiliser un symbole spcial : " " ( utiliser sans les guillemets) qui apparatra comme un
espace dans le navigateur :
<BODY>
Ici
nous
avons
supplmentaires
</BODY>
insr

15
espaces
LEON 3
Alignement des paragraphes

Pour aligner le texte au centre, droite ou gauche de la page web. on utilise le paramtre "align"
dans le tag <P>.
<HTML>
<HEAD>
<TITLE>Exemple 3-1</TITLE>
</HEAD>
<BODY>
<P ALIGN="left">Vous pouvez aligner le texte gauche.</P>
<P ALIGN="center">Vous pouvez aligner le texte au centre.</P>
<P ALIGN="right"> Vous pouvez aligner le texte droite.</P>
</BODY>
</HTML>
Figure 3-1 : alignement des Paragraphes.
Renfoncement du texte
Si vous devez renfoncer le texte des deux cts de la page web, vous pouvez utiliser le tag
<BLOCKQUOTE>.
<HTML>
<HEAD>
</HEAD>
<BODY>
On peut observer leffet du tag BLOCKQUOTE ci-dessous :<BR><BR>
<BLOCKQUOTE>
16
LEON 3
Si vous souhaitez souligner limportance

texte, vous pouvez utiliser ce tag.
Il renfoncera votre texte des deux cts.
</BLOCKQUOTE>
</BODY>
</HTML>
dun
paragraphe
de
votre
Figure 3-2 : le tag "blockquote".
Images dans une page web

Nous avons dj vu comment utiliser une image comme arrire plan dune page web.
<BODY BACKGROUND="image.gif">
</BODY>
Ici nous voulons ajouter une image directement sur une page web (pas sur son arrire plan). Le
tag <IMG> est utilis cet effet. Ce tag peut predre quelques paramtres comme la largeur, la
hauteur, la taille de la bordure, lalignement, le nom du fichier image etc. Le nom du fichier image
est obligatoire ; les autres paramtres sont facultatifs.
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="image1.jpg">
<B>Ceci est une image:</B><BR>
<IMG SRC="banniere.gif">
</BODY>
</HTML>
17
LEON 3
Dans cet exemple nous avons utilis une image darrire plan, une image normale et du texte.
Remarquez que le tag IMG ne possde pas de tag de fin (comme le tag <BR> vu plus haut).
Vous pouvez aussi spcifier une taille diffrente de la taille relle de votre image comme cidessous :
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="image1.gif">
Ceci est une image:<BR>
<IMG SRC="banniere.gif" WIDTH=234 HEIGHT=30>
</BODY>
</HTML>
Figure 3-3 : images en arrire plan et dans la page web elle-mme.
Alignement des images

Il est possible daligner une image dans une page web en lintroduisant dans un paragraphe qui
sera lui-mme align au centre, droite ou gauche.
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="image1.jpg">
Ceci est une image:<BR>
<P ALIGN="center"><IMG SRC="abanner.gif"></P>
18
LEON 3
</BODY>
</HTML>
On peut ajouter une bordure une image en utilisant le paramtre de bordure dans le tag
<IMG>. Ci-dessous le rsultat de ce code html :
<HTML>
<HEAD>
</HEAD>
<P ALIGN="center"><IMG SRC="banniere.gif" border=3></P>
</HTML>
Figure 3-4 : bordure autour dune image.
Des paramtres utiliss dans ce cours peuvent ne pas tre supports par certains navigateurs. Par
contre ils fonctionneront tous pour Internet Explorer, Firefox et Google Chrome qui sont les
navigateurs les plus populaires aujourdhui.
Texte de substitution pour une image
Certains navigateurs ne supportent que du texte et ne prennent pas en compte les images. Ils sont
trs rares aujourdhui (Lynx sous Unix par exemple), mais on peut penser aux utilisateurs de ces
navigateurs.
Pour rsoudre ce problme, on spcifie un texte qui sera affich la place de limage dans les
navigateurs de type texte. Il faut pour cela utiliser le paramtre ALT dans le tag <IMG> :
<IMG SRC="banniere.gif" ALT="Savoir Rapide">
19
LEON 3
Chemin dun fichier image

Dans les exemples prcdents, limage devait tre place dans le mme dossier que le fichier html.
Si notre image se trouve dans un autre dossier, nous devons ajouter un chemin relatif ou une
URL complte pour indiquer lemplacement du fichier image.
Etudions les exemples ci-dessous :
<IMG SRC="images/banniere.gif">
Dans le cas ci-dessus, limage se trouve dans le dossier "images qui est situ dans le mme
dossier que notre fichier html.
<IMG SRC="../banniere.gif">
Par contre ici, limage est place dans le dossier parent de celui qui contient notre fichier html.
Dans la leon suivante nous tudierons les liens et les listes.
Exercices
diteur de texte.
1. Utilisez des paragraphes aligns droite gauche et au centre ainsi que le tag
<blocquote> dans une mme page web.
2. Ecrivez une page html complte contenant une image centre ; entourez limage
dune bordure de taille 10.
3a. Utilisez un tag <IMG> pour un fichier image situ deux niveaux au-dessus du
dossier qui contient le fichier html.
3b. Spcifiez un tag <IMG> pour un fichier image plac dans un dossier image situ
au-dessus du dossier contenant le fichier html.
20
LEON 4
Leon
LISTES ET LIENS
4
Listes et liens
un des objets les plus commun sur une page web est le lien hypertexte. Aprs un clic sur
ce type de lien on est emmen vers une autre page. Dans cette leon nous allons apprendre les
spcifier. Puis nous verrons comment crer des listes dobjets.
Liens de type texte
Crer un lien hypertexte est trs facile, il suffit dutiliser le tag <A></A>. Quelques paramtres
sont importants pour ce tag, parmi lesquels le principal est HREF qui contient ladresse du lien.
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://www.yahoo.fr">Cliquez ici pour aller sur le site de
Yahoo</A>
</BODY>
</HTML>
Le code ci-dessus cre un lien vers le site yahoo.fr. On a bien utilis le paramtre HREF pour
spcifier la page web de destination. Le texte situ entre les tags <A> et </A> sera le texte du
lien. Aprs un clic sur ce lien, lutilisateur est redirig vers la page de destination.
Liens de type image
Au paragraphe prcdent nous avons utilis un texte comme lien. Il est possible dutiliser une
image la place du texte. Il suffit pour cela de remplacer le texte entre les tags <A> et </A> par
un tag <IMG> qui affichera une image comme vu la leon prcdente.
<HTML>
<HEAD>
</HEAD>
<BODY>
21
LISTES ET LIENS
LEON 4
Cliquez sur le limage ci-dessous pour aller sur notre site

:<BR><BR>
<A HREF="http://www.savoir-rapide.com/"><IMG SRC="logo.gif"></A>
</BODY>
</HTML>
web
Dans cet exemple, cliquer sur limage redirigera linternaute ladresse spcifie dans lattribut
HREF (limage logo.gif doit tre dans le mme dossier que le fichier html).
Si vous excutez ce code dans un navigateur, vous remarquerez une bordure bleue autour de
limage. Cette bordure est rajoute par dfaut pour tous les liens de type image. On peut la
supprimer en ajoutant un paramtre border=0 dans le tag "<A ... >".
<HTML>
<HEAD>
</HEAD>
<BODY>
Cliquez sur le limage ci-dessous pour aller sur notre site web
:<BR><BR>
<A HREF="http://www.savoir-rapide.com/"><IMG SRC="logo.gif"></A>
<BR><BR>Pas de bordure ici :<BR><BR>
<A HREF="http://www.savoir-rapide.com"><IMG SRC="logo.gif"
border=0></A>
</BODY>
</HTML>
Figure 4-1 : liens image avec et sans bordure.
22
LISTES ET LIENS
LEON 4
Liens de type emails

Certains liens dirigent linternaute vers des programmes de composition de mail type Outlook ou
Thunderbird. La partie destinataire du mail est parfois dj remplie. Etudiez lexemple ci-dessous
qui illustre la syntaxe utiliser :
<BODY>
Cliquez sur le lien ci-dessous pour nous envoyer un email <BR>
<A HREF="mailto:contact@savoir-rapide.com"> Envoyez nous un email </A>
</BODY>
On peut mme spcifier un objet pour le mail comme dans lexemple qui suit :
<HTML>
<HEAD>
</HEAD>
<BODY>
Cliquez sur le lien ci-dessous pour nous envoyer vos commentaires.<BR>
<A HREF="mailto:contact@savoir-rapide.com?subject:commentaires sur
votre site">Envoyez nous un email</A>
</BODY>
</HTML>
Les listes
Pour organiser diffrents objets sous forme de liste dans une page Web, le langage HTML utilise
les tags <UL> </UL>.
<HTML>
<HEAD>
</HEAD>
<BODY>
Voici une liste des sujets abords dans cette leon :
<UL>
<LI>Les liens de type texte
<LI>Les liens de type image
<LI>Les liens vers une adresse mail
<LI>Les listes dobjets
</UL>
</BODY>
</HTML>
23
LISTES ET LIENS
LEON 4
Figure 4-2 : les listes.
La page web obtenue affiche les diffrents objets sous forme de liste puces. Nous avons entr
les objets lists en les faisant prcder par des tags <LI> placs entre un tag <UL> de dbut et
un tag </UL> de fin. Le tag <UL> fait partie des tags spcifiques aux listes.
Si vous souhaitez identifier les objets de la liste par des nombres plutt que des puces, il vous faut
utiliser les tags <OL> la place des tags <UL> comme ci-dessous :
<OL>
<LI>Les
<LI>Les
<LI>Les
<LI>Les
</OL>
liens de type texte

liens de type image
liens vers une adresse mail
listes dobjets
Le sparateur horizontal
Un autre tag trs utile est le tag <HR> qui spcifie un sparateur horizontal dans la page web ; il
peut tre utilis pour sparer diffrents textes.
<BODY>
Premire partie
<HR>
Seconde partie
</BODY>
Le code ci-dessus produit deux lignes de texte spares par une ligne horizontale. Il est possible
de prciser quelques paramtres pour cette ligne horizontale ; on peut par exemple modifier la
largeur de la ligne sur la page web.
Ici la largeur est exprime en pourcentage :
<HR WIDTH="50%">
24
LISTES ET LIENS
LEON 4
Et ici on la spcifie en pixels :

<HR WIDTH="100">
On peut aussi spcifier lpaisseur de la ligne :

<HR size=5>
Il est bien sr possible de combiner tous ces paramtres. Les lignes cres avec le tag <HR> ont
une ombre par dfaut. On peut supprimer cette ombre en utilisant le paramtre NOSHADE :
<HR SIZE=1 NOSHADE>
Avec le paramtre "color" on peut choisir la couleur de la ligne. Ainsi la ligne spcifie ci-dessous
naura pas dombre et sera de couleur verte :
<HR color="#00FF00" NOSHADE>
Conclusion
Dans cette leon nous avons appris utiliser les liens de type texte, de type image, les liens emails,
les listes et le sparateur horizontal.
Jusquici nous avons tudi des tags html gnraux. Dans les prochaines leons nous verrons des
objets plus avancs comme les tableaux, les cadres et les formulaires.
Exercices
diteur de texte.
1. Dessinez une page avec un lien qui pointe vers le site de yahoo.fr. Centrer le lien
sur votre cran. Utilisez ce que vous avez appris sur les paragraphes dans les
leons prcdentes.
2. Modifiez lexemple prcdent pour utiliser une image comme lien qui pointera
vers le site de Yahoo. Retirez la bordure bleue autour de limage.
3. Insrez les exercices 1 et 2 dans une page unique. Sparez le lien texte du lien
image par un sparateur horizontal, de couleur verte, qui fait 50% de la largeur de
lcran.
4. Crez une page de contact pour votre page personnelle (en html). Les visiteurs de
cette page doivent pouvoir vous envoyer des commentaires par email.
5. Crez une page web qui contient une liste des diffrents cours que vous
souhaiteriez trouver sur Internet.
25
LEON 5
Leon
LES TABLEAUX (1)
5
Les tableaux (1)
n tableau est une structure de type matriciel qui contient des objets de type texte, images,
boutons, etc. Dans la plupart des sites web professionnels, les tableaux sont utiliss pour ajuster
le texte et les images mme sils ne sont pas visibles. Nous verrons plus loin comment cacher les
tableaux en mettant 0 la taille de leurs bordures.
Dessiner un tableau
Pour dessiner un tableau on utilise le tag <TABLE>. Ce tag est associ deux autres tags qui
spcifient les lignes et les colonnes du tableau : les tags TR et TD. Le tag <TR></TR> est utilis
pour crer une ligne dans le tableau. Chaque tag <TR></TR> contenu dans le tag
<TABLE></TABLE> crera une nouvelle ligne dans le tableau.
Ensuite il faut utiliser un ou plusieurs tag <TD></TD> pour crer des colonnes dans chaque
ligne.
Lexemple suivant cre un tableau deux lignes :
<TABLE>
<TR>
<TD>Premire ligne</TD>
</TR>
<TR>
<TD>Seconde ligne</TD>
</TR>
</TABLE>
Si vous affichez ce code avec un navigateur, vous ne verrez aucun tableau mais uniquement deux
lignes de texte. En fait le tableau est bien prsent mais il nest pas visible.
Le tag <TABLE> cre par dfaut un tableau avec une bordure de taille 0. Vous devez
obligatoirement utiliser un paramtre border pour spcifier une taille non nulle pour la bordure
de votre tableau, si vous voulez quil soit visible.
<TABLE BORDER=1>
<TR>
<TD>Premire ligne</TD>
26
LES TABLEAUX (1)
LEON 5
</TR>
<TR>
<TD>Seconde ligne</TD>
</TR>
</TABLE>
Spcifier la taille des tableaux

Vous pouvez spcifier la largeur dun tableau, en pourcentage de la taille de la page, ou en pixels.
Si vous choisissez 50% par exemple, le navigateur maintiendra le tableau la moiti de la
longueur de la page mme si la page est redimensionne.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE WIDTH=50% BORDER=1>
<TR>
<TD> Ligne 1, Colonne 1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 5-1 : un tableau 2 x 2.
27
LES TABLEAUX (1)
LEON 5
Vous pouvez aussi spcifier la largeur du tableau en pixels. De cette faon la largeur du tableau
sera fixe et ne variera pas si la fentre du navigateur est redimensionne.
<TABLE WIDTH=250
<TR>
<TD> Ligne 1,
<TD> Ligne 1,
</TR>
<TR>
<TD> Ligne 2,
<TD> Ligne 2,
</TR>
</TABLE>
BORDER=1>
Colonne 1</TD>
Colonne 2</TD>
Colonne 1</TD>
Colonne 2</TD>
Vous pouvez aussi spcifier une hauteur pour le tableau. La largeur et la hauteur seront divises
entre les diffrentes cellules dans les lignes et colonnes. Ainsi par exemple si la largeur est de 100
pixels et quil y a deux colonnes, chaque cellule aura une taille de 50 pixels. Retenez cependant
que si vous introduisez dans une cellule un texte plus long que la cellule, la cellule sera tendue de
faon pouvoir contenir le texte.
Alignement du texte dans les cellules
Par dfaut le texte entr dans une cellule est align gauche. Vous pouvez ajouter lune
quelconque des options du tag <TD> ci-dessous pour spcifier un alignement horizontal du
texte dans la cellule :
<TD ALIGN=CENTER> ou
<TD ALIGN=RIGHT> ou
<TD ALIGN=LEFT> (sans spcification, cest loption par dfaut)
On peut aussi dterminer lalignement vertical du texte. Il faut pour cela utiliser le paramtre
Valign avec les valeurs TOP, BOTTOM et MIDDLE (option par dfaut), qui correspondent
respectivement haut, bas et milieu
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE WIDTH=50% HEIGHT=100 BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>HAUT GAUCHE</TD>
<TD ALIGN=RIGHT VALIGN=TOP>HAUT DROIT</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>BAS GAUCHE</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>BAS DROIT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
28
LES TABLEAUX (1)
LEON 5
Figure 5-2 : un tableau 2 x 2 avec alignement du texte.
Images dans les cellules

Comme dj expliqu, les tableaux peuvent tre utilis pour placer des images des endroits
prcis. On peut insrer une image dans une cellule en introduisant un tag <IMG> entre des tags
<TD> </TD>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=4>
<TR>
<TD><IMG SRC="logo.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
29
LES TABLEAUX (1)
LEON 5
Figure 5-3 : image dans un tableau cellule unique avec bordure de taille 4.
Exercices
diteur de texte.
1. Crez un tableau similaire au tableau ci-dessous. Utilisez les mmes alignements,

et mettez en gras les titres, du tableau, des colonnes et des lignes comme cidessous.
Nom
Pierre
Jean
2.
Elves
Identifiant
Note
12895
12898
15
17
Crez un tableau 2 x 2. Insrez une image (de taille rduite) dans chaque cellule
du tableau. Ajustez les cellules de sorte que les images se rejoignent (sans aucun
espace) au centre du tableau. Fixez la largeur du tableau 50% de la largeur de la
page web. Spcifiez une valeur de 200 pixels pour sa hauteur.
30
LEON 6
Leon
LES TABLEAUX (2)
6
Les tableaux (2)
omme nous lavons vu dans la leon prcdente, les tableaux peuvent tre utiliss pour
maintenir les textes, images, boutons etc. aux endroits souhaits. Ici nous allons explorer dautres
options pour les cellules puis nous verrons comment lier diffrentes parties dune image
diffrentes adresses web.
Largeur des cellules
Nous avons dj vu comment dterminer la largeur et la hauteur dun tableau comme ci-dessous :
<HTML>
<HEAD>
<TITLE>Tableau: la largeur des colonnes nest pas spcifie</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD>HAUT GAUCHE</TD>
<TD>HAUT DROIT</TD>
</TR>
<TR>
<TD>BAS GAUCHEE</TD>
<TD>BAS DROIT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Il est aussi possible de spcifier la taille de chaque colonne du tableau, en dterminant les tailles
des cellules de la premire ligne, comme dans lexemple 6-1a suivant.
Veillez spcifier des tailles correctes : par exemple si la largeur du tableau est de 200 pixels, la
somme des largeurs des cellules devra tre de 200 pixels.
Dans le cas contraire, la page affiche variera selon le type de navigateur (Internet Explorer,
Firefox, etc.).
Exemple 6-1a : page6-1a.html.
31
LES TABLEAUX (2)
LEON 6
<HTML>
<HEAD>
<TITLE>Exemple 6-1a</TITLE>
</HEAD>
<BODY>
<TR>
<TD WIDTH=140>HAUT GAUCHE</TD>
<TD WIDTH=260>HAUT DROIT</TD>
</TR>
<TR>
<TD>BAS GAUCHE</TD>
<TD>BAS DROIT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 6-1 : premire colonne 140 pixels de long, deuxime colonne 260.
Vous pouvez aussi spcifier la largeur des cellules en pourcentage ; la somme des pourcentages
devra tre gale 100. Voir lexemple 6-1.b :
Exemple 6-1b : page6-1b.html.
<HTML>
<HEAD>
<TITLE>Exemple 6-1b</TITLE>
</HEAD>
<BODY>
<TR>
<TD WIDTH=35%>HAUT GAUCHE</TD>
<TD WIDTH=65%>HAUT DROIT</TD>
</TR>
32
LES TABLEAUX (2)
LEON 6
<TR>
<TD>BAS GAUCHE</TD>
<TD>BAS DROIT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 6-2 : premire colonne largeur 35% du tableau, deuxime colonne largeur : 65%.
Comme expliqu plus haut, aprs avoir fix la taille des cellules de la premire ligne, il est inutile
de le faire pour les lignes suivantes.
Pour dfinir une cellule vide, vous devez quand mme utiliser un tag TD et introduire ne serait-ce
quun caractre (qui indique un espace comme vu la leon 3) entre les tags
<TD></TD>. Sinon la cellule vide ne sera pas affiche correctement.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TR>
<TD WIDTH=140>HAUT GAUCHE</TD>
<TD WIDTH=260> </TD>
</TR>
<TR>
<TD> </TD>
<TD>BAS DROIT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
33
LES TABLEAUX (2)
LEON 6
Figure 6-3 : cellules vides.
Dans lexemple ci-dessus nous avons deux cellules vides mais comme nous avons spcifi les
tailles du tableau et des cellules (de la premire ligne), le tableau sera bien form, avec une
premire colonne de 160 pixels de largeur et une seconde de 260 pixels.
En effet, si on ne spcifie pas les tailles, on ne peut pas prvoir comment le tableau sera affich
par des navigateurs et modes daffichages diffrents. Nous vous conseillons donc de spcifier les
tailles de chaque tableau que vous crez. Si vous souhaitez que le tableau soit redimensionn
automatiquement avec la fentre, vous devez utiliser des pourcentages. Pour une taille fixe utilisez
les pixels.
Dans le cas dune image dans une cellule, pour ajuster exactement la cellule limage, vous devez
aussi utiliser des pixels.
Paramtre de bordure "cell padding"
Deux autres paramtres sont connatre pour les tableaux : le "Cell Padding" et le "Cell Spacing".
Le "Cell Padding" (remplissage de cellule) mesure lespace situ entre la bordure intrieure du
tableau et le contenu de la cellule (texte, image etc.). Voir lexemple ci-dessous :
Exemple 6-3 : page6-3.html
<HTML>
<HEAD>
</HEAD>
<BODY>
Fonctionnement du paramtre "Cell Padding" : <BR><BR>
<TABLE BORDER=3 CELLPADDING=20>
<TR>
34
LES TABLEAUX (2)
LEON 6
<TD>HAUT DROIT</TD>
</TR>
<TR>
<TD>BAS GAUCHE</TD>
<TD>BAS DROIT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 6-4 : "Cell Padding".
La valeur par dfaut est 1 ; c'est--dire que lespace entre le contenu de la cellule et la bordure
intrieure sera de 1 pixel. Pour supprimer cet espace vous devez positionner ce paramtre 0.
Dans lexemple ci-dessus nous avons affect 20 pixels au "Cell Padding" pour bien vous montrer
son fonctionnement (les flches ont t rajoutes limage).
Paramtre de bordure "cell spacing"
Le "Cell Spacing" (espacement de cellule) est le paramtre qui spcifie la taille de lespace entre les
bordures internes et externes du tableau.
En ralit il y a toujours deux bordures pour un tableau : la bordure interne ct contenu de la
cellule et la bordure extrieure. Pour paissir laspect de la bordure il suffit daugmenter la valeur
de ce paramtre. Sa valeur par dfaut est de 2 pixels. Si vous choisissez 0, vous aurez une bordure
trs fine.
<HTML>
<HEAD>
35
LES TABLEAUX (2)
LEON 6
</HEAD>
<BODY>
Fonctionnement du paramtre "Cell Spacing" <BR><BR>
<TABLE BORDER=3 CELLSPACING=20>
<TR>
<TD>HAUT DROIT</TD>
</TR>
<TR>
<TD>BAS GAUCHE</TD>
<TD>BAS DROIT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 6-5: "Cell Spacing".
Vous pouvez aussi utiliser ensemble "Cell Spacing" et "Cell Pading" pour obtenir leffet souhait.
Tableaux et images
Nous avons dj vu comment utiliser une image comme lien. Il est aussi possible daffecter
plusieurs destinations une mme image selon lendroit o lon clique.
Pour cela, nous pouvons dcouper notre image en autant de sections que souhaites et les insrer
dans un tableau invisible qui maintiendra les diffrentes parties cte cte. Ensuite nous
pouvons lier chaque partie de limage une adresse web diffrente.
Le "Cell Spacing" et le "Cell Pading" doivent tre positionn 0 afin dviter que des zones du
tableau apparaissent entre les diffrentes parties de limage.
36
LES TABLEAUX (2)
LEON 6
Ainsi les utilisateurs verront une image unique, mais seront redirigs vers diffrentes pages web
selon lendroit de limage o ils cliqueront.
Utiliser les programmes de traitement dimage
Pour concevoir des sites web, il vous faut bien connatre un programme ddition graphique. Il en
existe beaucoup sur le march ; par exemple Adobe Illustrator est trs professionnel et trs
puissant mais coteux. Si votre mtier est ldition graphique cela peut tre une bonne ide de
vous le procurer.
Sinon vous pouvez utiliser un logiciel gratuit et puissant nomm "Paint.NET" ; on peut le
tlcharger ladresse suivante : http://www.getpaint.net.
Les programmes ddition graphique vous permettront de dcouper vos images, dajouter des
effets, de modifier leurs tailles etc.
Dans les exercices qui suivent vous aurez besoin dun de ces logiciels pour dcouper une image
en 4.
Exercices
diteur de texte.
1. Dans les exercices de la leon prcdente, vous deviez crer un tableau 2*2 avec
des images dans chaque cellule. Les images devaient se rejoindre au centre du
tableau. Comme nous navions pas encore vu les paramtres de "Cell Spacing" et
de "Cell Pading", il y avait un petit espace entre les images.
Rcrivez cet exercice de faon ce que les images collent les unes aux autres
sans que lon puisse remarquer que ce sont des images distinctes. Dcoupez en 4
une image avec votre logiciel ddition graphique prfr et utilisez ces quatre
images pour cet exercice.
2.
Rcrivez lexercice ci-dessus de faon ce que chaque partie de limage pointe

vers une page diffrente de votre site web. Utilisez des tags <A HREF= "">
lintrieur de tags <TD></TD>.
37
LEON 7
Leon
LES TABLEAUX (3)
7
Les tableaux (3)
ans un tableau, les cellules, les lignes et le tableau lui-mme peuvent avoir des couleurs
distinctes. On peut aussi affecter une image en arrire plan au tableau en entier ou chaque
cellule.
Couleur de fond dun tableau

Les derniers navigateurs prennent en compte les couleurs de fond pour les tableaux. On spcifie
la couleur de fond dun tableau dans le tag <TABLE>. Lexemple 7-1 illustre cette option.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE width="300" BGCOLOR="#66CCFF">
<TR>
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
38
LES TABLEAUX (3)
LEON 7
Figure 7-1 : vue de lexemple 7-1.
On peut aussi affecter une couleur chaque ligne et mme chaque cellule. Pour fixer la couleur
de fond dune ligne entire, il faut utiliser loption BGCOLOR dans le tag <TR>. Dans lexemple
7-2 nous avons spcifi une couleur diffrente pour chaque ligne du tableau.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#66CCFF">
</TR>
<TR BGCOLOR="#CCFFFF">
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
39
LES TABLEAUX (3)
LEON 7
Pour fixer une couleur dans une cellule individuelle on utilise le paramtre BGCOLOR dans les
tags <TD> </TD>.
Toutes les options ci-dessus peuvent bien sr tre utilises simultanment pour obtenir leffet
voulu. Dans lexemple 7-3 suivant par exemple, nous avons choisi la valeur "#336699" pour la
premire ligne et modifi les couleurs des deux cellules de la seconde ligne.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#336699">
</TR>
<TR>
<TD width="50%" BGCOLOR="#66CCFF">C</TD>
<TD width="50%" BGCOLOR="#CCFFFF">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
40
LES TABLEAUX (3)
LEON 7
Largeur de colonne
Il est possible de fusionner deux cellules dune mme ligne. Par exemple dans un tableau 2*3 il
faut fusionner les deux premires cellules pour avoir un objet semblable celui de la figure 7-4 cidessous. COLSPAN=2 dans un tag <TD> signifie que cette colonne aura la largeur de deux
cellules.
Figure 7-4 : un tableau avec les deux premires cellules fusionnes.

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=300>
<TR>
<TD COLSPAN=2 WIDTH=100>A</TD>
<TD WIDTH=100>B</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
</BODY>
41
LES TABLEAUX (3)
LEON 7
</HTML>
Figure 7-5 : fusionner deux cellules grce au paramtre Colspan.
Sil y a trois cellules par ligne, aprs avoir fusionn les deux premires cellules dune ligne en
posant Colspan=2, nous aurons logiquement deux tags <TD> au lieu de 3 pour la ligne.
Pour la figure 7-5 ci-dessus, nous avons donc dans le code deux tags <TD> pour la premire
ligne et trois dans la seconde ligne. Naturellement si nous avons une largeur de 100 par cellule, la
cellule fusionne aura une largeur de 200.
Largeur de ligne
Ici nous voulons fusionner deux cellules dune mme colonne. Ce cas est trs semblable au
prcdent, avec la diffrence quici nous fusionnons deux cellules qui appartiennent des lignes
diffrentes. Pour cela on utilise le paramtre ROWSPAN.
Figure 7-6 : fusionner deux cellules avec le paramtre rowspan.

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=200>
<TR>
<TD ROWSPAN=2>A</TD>
42
LES TABLEAUX (3)
LEON 7
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 7-7 : fusionner deux cellules grce au paramtre rowspan.

Ici on a fusionn deux cellules en posant ROWSPAN=2. Le tableau rsultant possde deux
lignes. Le premier tag <TR> pour la premire ligne contiendra 3 cellules, do 3 tags <TD>.
Mais la seconde ligne naura que 2 cellules. En effet la premire cellule de la seconde ligne a t
fusionne avec la premire cellule de la premire ligne ; elle appartient donc maintenant la
premire ligne.
Etudiez attentivement cet exemple et essayez de comprendre le fonctionnement du paramtre
ROWSPAN. Vous pouvez ici encore utiliser ensemble diffrents tags pour obtenir des tableaux
particuliers.
Tableaux imbriqus
En html (de mme quavec Word), il est possible dinsrer un tableau dans un autre ; pour
construire des tableaux complexes vous aurez le faire assez souvent.
Par exemple supposons que vous ayez besoin dun tableau avec une bordure de taille 3 dans votre
page web. Pour fixer le tableau la position dsire, vous pouvez utiliser un autre tableau de
bordure 0. Le code des tableaux imbriqus est sans surprise :
43
LES TABLEAUX (3)
LEON 7

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border=0 width=500>
<TR>
<TD width="25%"> </TD>
<TD width="25%">
<TABLE border="2" width="100%">
<TR>
<TD width="50%">1.</TD>
<TD width="50%">HTML</TD>
</TR>
<TR>
<TD width="50%">2.</TD>
<TD width="50%">PHP</TD>
</TR>
<TR>
<TD width="50%">3.</TD>
<TD width="50%">Javascript</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Dans cet exemple, nous avons un premier tableau 1*4. Nous voulons maintenir notre tableau
principal dans la troisime colonne de faon lafficher droite de lcran. Le tableau afficher a
une bordure de taille 1, alors que le premier tableau est cach. Ci-dessous un schma de ce que
lon veut; le rsultat web est visible figure 7-9.
Figure 7-8 : un schma de ce que nous voulons faire.
44
LES TABLEAUX (3)
LEON 7
Figure 7-9 : tableaux imbriqus : le tableau externe est cach, le tableau interne visible.
Nous avons appris les bases de la cration de tableaux dans les trois prcdentes leons. Les tags
lis aux tableaux ne sont pas difficiles retenir, mais crer une page avec beaucoup de tableaux
imbriqus et complexes peut tre ardu.
Vous devez donc travailler un certain temps les tableaux pour tre en mesure de bien les utiliser.
A la prochaine leon, nous commencerons ltude des cadres.
Exercices
diteur de texte.
1. Crez un tableau 3*2 (avec deux lignes) semblable au schma ci-dessous.

Positionnez les cellules de la mme faon.
Titre du tableau
Jean
Pierre
Paul
2. Modifier lexercice prcdent de faon ce que la premire cellule ait une couleur
spcifique et que chaque cellule de la deuxime ligne ait une couleur diffrente.
3. Crez un tableau 3 colonnes et une ligne. Insrez un tableau 2*2 au centre de
lcran en utilisant le tableau prcdent de sorte que le premier tableau soit
invisible mais que le second ait une bordure de taille 3, comme dans le schma cidessous.
45

La Création Web HTML en 7 Jours

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

La Création Web HTML en 7 Jours

Transféré par

Droits d'auteur :

Formats disponibles

SAVOIR RAPIDE - COLLECTION DEVELOPPEMENT WEB

La Cration Web HTML en 7 jours!

2009 Editions Savoir Rapide (savoir-rapide.com)

Table des Matires

DEBUTER AVEC HTML

Vous pouvez utiliser un diteur de pages web comme FrontPage de Microsoft,

Trois raisons pour crire directement du code HTML

DEBUTER AVEC HTML

Premire page web

Figure 1.0 : sauvegarder un fichier sous format html.

DEBUTER AVEC HTML

DEBUTER AVEC HTML

Le corps de la page web

DEBUTER AVEC HTML

DEBUTER AVEC HTML

LA MISE EN FORME DU TEXTE

LA MISE EN FORME DU TEXTE

Figure 2-1 : textes en gras, italique et soulign.

Les tags imbriqus

Figure 2-2 : police normale et police largeur fixe.

LA MISE EN FORME DU TEXTE

Modifier les polices et leur taille

Figure 2-3 : diffrentes tailles de police.

LA MISE EN FORME DU TEXTE

Exemple 2-3 : page2-3.html.

Modifier la couleur des polices

LA MISE EN FORME DU TEXTE

Modifier la couleur par dfaut de la police

BGCOLOR : couleur de fond de la page web.

LA MISE EN FORME DU TEXTE

8ime caractre, utilisez de nouveau la taille 7 en dcroissant jusquau dernier

Alignement des paragraphes

Figure 3-1 : alignement des Paragraphes.

Si vous souhaitez souligner limportance

Figure 3-2 : le tag "blockquote".

Images dans une page web

Figure 3-3 : images en arrire plan et dans la page web elle-mme.

Alignement des images

Figure 3-4 : bordure autour dune image.

Chemin dun fichier image

Cliquez sur le limage ci-dessous pour aller sur notre site

Figure 4-1 : liens image avec et sans bordure.

Liens de type emails

Figure 4-2 : les listes.

liens de type texte

Et ici on la spcifie en pixels :

On peut aussi spcifier lpaisseur de la ligne :

LES TABLEAUX (1)

LES TABLEAUX (1)

Spcifier la taille des tableaux

Figure 5-1 : un tableau 2 x 2.

LES TABLEAUX (1)

LES TABLEAUX (1)

Figure 5-2 : un tableau 2 x 2 avec alignement du texte.

Images dans les cellules

LES TABLEAUX (1)

1. Crez un tableau similaire au tableau ci-dessous. Utilisez les mmes alignements,

LES TABLEAUX (2)

LES TABLEAUX (2)

LES TABLEAUX (2)

LES TABLEAUX (2)

Figure 6-3 : cellules vides.

LES TABLEAUX (2)

Figure 6-4 : "Cell Padding".