La Création Web HTML en 7 Jours

1

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.

2

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

DEBUTER AVEC HTML LEON 1

3

Dbuter avec HTML

Les 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.

Leon

1


4

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.

Bonjour!

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 page1-1.html comme ci-dessous :

Figure 1.0 : sauvegarder un fichier sous format html.


5

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 et 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 indique au navigateur le dbut du code HTML et le tag signale sa fin. En gnral on ne place pas le texte directement entre les tags et (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 et :

.

On place ensuite les informations de len-tte entre les tags et .


6

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 :

Titre de la page

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 :

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.

La page Web de mon entreprise

Bienvenue sur notre page Web.


7

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 comme ceci :

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 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. Exemple 1-3 : page1-3.html.

La page Web de mon entreprise

Bienvenue sur notre page Web.


8

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.

LA MISE EN FORME DU TEXTE LEON 2

9

Mise en forme du texte

Comme 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 le fera apparatre en gras, avec on aura de litalique, et pour le soulign on utilisera .

Ceci est trs important

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.

Exemple 1, Leon 2

Ce texte est en gras

alors quici il est en italique

et celui-ci est soulign.

Regardez, cest gras et en italique.

Vous avez bien sr remarqu les tags 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


10

tag dans notre code. Remarquez aussi que le tag 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 : Regardez, cest gras et en italique.

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 quivaut "Typewriter Texte").

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


11

Modifier les polices et leur taille

On peut changer les polices et leurs tailles en utilisant les tags . 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 : ...

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. Exemple 2-2 : page2-2.html.

Exemple 2, Leon 2

Ce texte a une taille de 1







Figure 2-3 : diffrentes tailles de police.


12

Le type de police

On peut spcifier diffrents types de police en indiquant leur nom dans un tag . ...

Exemple 2-3 : page2-3.html.

Exemple 3, Leon 2

Ce texte est en police Arial

Ce texte est en police Impact

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 . De cette faon si un navigateur ne connat pas une police, il essaiera la suivante dans la liste : ...

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 : Exemple 2-4 : page2-4.html.

Exemple 4, leon 2

Ce texte est en rouge.

Ce texte est en vert.

Ce texte est en bleu.

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


13

Comme vous le devinez, on peut aisment combiner les diffrents attributs du tag 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 :

Une ligne verte, en gras et italique avec une police Impact

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 comme ci-dessous :

...

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, Expression ou Dreamweaver. Vous devez travailler sur le code en utilisant un simple 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 "lenomsuperlong" 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


14

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.

PARAGRAPHES ET IMAGES LEON 3

15

Paragraphes et images

Sur 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 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 . Il est possible dimbriquer dautres tags dans un tag paragraphe. Par exemple les tags de police, , peuvent tre utiliss dans les paragraphes. Premier paragraphe

Second paragraphe

Dans les leons prcdentes nous avons rencontr le tag . Il existe un autre tag qui fonctionne presque identiquement, le tag . La seule diffrence est que le texte entre des tag na pas besoin du tag pour passer la ligne : le texte entre les tags 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 :

Ici nous avons insr 5 espaces

supplmentaires

Leon

3


16

Alignement des paragraphes

Pour aligner le texte au centre, droite ou gauche de la page web. on utilise le paramtre "align" dans le tag . Exemple 3-1 : page3-1.html.

Exemple 3-1

Vous pouvez aligner le texte gauche.

Vous pouvez aligner le texte au centre.

Vous pouvez aligner le texte droite.

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 . Exemple 3-2: page3-2.html.

Exemple 3-2

On peut observer leffet du tag BLOCKQUOTE ci-dessous :


17

Si vous souhaitez souligner limportance dun paragraphe de votre

texte, vous pouvez utiliser ce tag.

Il renfoncera votre texte des deux cts.

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.

Ici nous voulons ajouter une image directement sur une page web (pas sur son arrire plan). Le tag 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. Exemple 3-3 : page3-3.html.

Exemple 3-3

Ceci est une image:


18

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 vu plus haut). Vous pouvez aussi spcifier une taille diffrente de la taille relle de votre image comme ci-dessous : Exemple 3-4 : page3-4.html.

Exemple 3-4

Ceci est une image:

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. Exemple 3-5 : page3-5.html.

Exemple 3-5

Ceci est une image:


19

On peut ajouter une bordure une image en utilisant le paramtre de bordure dans le tag . Ci-dessous le rsultat de ce code html : Exemple 3-6 : page3-6.html.

Exemple 3-6

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 :


20

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 :

Dans le cas ci-dessus, limage se trouve dans le dossier "images qui est situ dans le mme dossier que notre fichier html.

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


1. Utilisez des paragraphes aligns droite gauche et au centre ainsi que le tag

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 pour un fichier image situ deux niveaux au-dessus du dossier qui contient le fichier html.

3b. Spcifiez un tag pour un fichier image plac dans un dossier image situ

au-dessus du dossier contenant le fichier html.

LISTES ET LIENS LEON 4

21

Listes et liens

Lun 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 . Quelques paramtres sont importants pour ce tag, parmi lesquels le principal est HREF qui contient ladresse du lien. Exemple 4-1: page4-1.html.

Exemple 4-1

Cliquez ici pour aller sur le site de

Yahoo

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 et 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 et par un tag qui affichera une image comme vu la leon prcdente.

Exemple 4-1

Leon

4


22

Cliquez sur le limage ci-dessous pour aller sur notre site 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 "". Exemple 4-2 : page4-2.html.

Exemple 4-2

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

:

Pas de bordure ici :

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


23

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 :

Cliquez sur le lien ci-dessous pour nous envoyer un email

Envoyez nous un email

On peut mme spcifier un objet pour le mail comme dans lexemple qui suit : Exemple 4-3 : page4-3.html.

Exemple 4-2

Cliquez sur le lien ci-dessous pour nous envoyer vos commentaires.

Envoyez nous un email

Les listes

Pour organiser diffrents objets sous forme de liste dans une page Web, le langage HTML utilise les tags . Exemple 4-4 : page4-4.html.

Exemple 4-4

Voici une liste des sujets abords dans cette leon :

Les liens de type texte

Les liens de type image

Les liens vers une adresse mail

Les listes dobjets


24

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 placs entre un tag de dbut et un tag de fin. Le tag 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 la place des tags comme ci-dessous :

Les liens de type texte

Les liens de type image

Les liens vers une adresse mail

Les listes dobjets

Le sparateur horizontal

Un autre tag trs utile est le tag qui spcifie un sparateur horizontal dans la page web ; il peut tre utilis pour sparer diffrents textes.

Premire partie

Seconde partie

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 :


25

Et ici on la spcifie en pixels :

On peut aussi spcifier lpaisseur de la ligne :

Il est bien sr possible de combiner tous ces paramtres. Les lignes cres avec le tag ont une ombre par dfaut. On peut supprimer cette ombre en utilisant le paramtre 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 :

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


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.

LES TABLEAUX (1) LEON 5

26

Les tableaux (1)

Un 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 . Ce tag est associ deux autres tags qui spcifient les lignes et les colonnes du tableau : les tags TR et TD. Le tag est utilis pour crer une ligne dans le tableau. Chaque tag contenu dans le tag crera une nouvelle ligne dans le tableau. Ensuite il faut utiliser un ou plusieurs tag pour crer des colonnes dans chaque ligne. Lexemple suivant cre un tableau deux lignes :

Premire ligne

Seconde ligne

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 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.

Premire ligne

Leon

5


27

Seconde ligne

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. Exemple 5-1 : page5-1.html.

Exemple 5-1

Ligne 1, Colonne 1

Ligne 1, Colonne 2

Ligne 2, Colonne 1

Ligne 2, Colonne 2

Figure 5-1 : un tableau 2 x 2.


28

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.

Ligne 1, Colonne 1

Ligne 1, Colonne 2

Ligne 2, Colonne 1

Ligne 2, Colonne 2

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 ci-dessous pour spcifier un alignement horizontal du texte dans la cellule : ou

ou

(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 Exemple 5-2 : page5-2.html.

Exemple 5-2

HAUT GAUCHE

HAUT DROIT

BAS GAUCHE

BAS DROIT


29

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 entre des tags . Exemple 5-3 : page5-3.html.

Exemple 5-3


30

Figure 5-3 : image dans un tableau cellule unique avec bordure de taille 4.

Exercices


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 ci-dessous.

Elves Nom Identifiant Note Pierre 12895 15 Jean 12898 17

2. 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.


31

Les tableaux (2)

Comme 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 :

Tableau: la largeur des colonnes nest pas spcifie

HAUT GAUCHE

HAUT DROIT

BAS GAUCHEE

BAS DROIT

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.

Leon

6


32

Exemple 6-1a

HAUT GAUCHE

HAUT DROIT

BAS GAUCHE

BAS DROIT

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.

Exemple 6-1b

HAUT GAUCHE

HAUT DROIT


33

BAS GAUCHE

BAS DROIT

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 . Sinon la cellule vide ne sera pas affiche correctement. Exemple 6-2 : page6-2.html.

Exemple 6-2

HAUT GAUCHE

BAS DROIT


34

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

Exemple 6-3

Fonctionnement du paramtre "Cell Padding" :


35

HAUT GAUCHE

HAUT DROIT

BAS GAUCHE

BAS DROIT

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. Exemple 6-4 : page6-4.html.


36

Exemple 6-4

Fonctionnement du paramtre "Cell Spacing"

HAUT GAUCHE

HAUT DROIT

BAS GAUCHE

BAS DROIT

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.


37

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


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 lintrieur de tags .


38

Les tableaux (3)

Dans 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 . Lexemple 7-1 illustre cette option. Exemple 7-1 : page7-1.html.

Exemple 7-1

A

B

C

D

Leon

7


39

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 . Dans lexemple 7-2 nous avons spcifi une couleur diffrente pour chaque ligne du tableau. Exemple 7-2 : page7-2.html.

Exemple 7-2

A

B

C

D


40


Pour fixer une couleur dans une cellule individuelle on utilise le paramtre BGCOLOR dans les tags . 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. Exemple 7-3: page7-3.html.

Exemple 7-3

A

B

C

D


41


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 ci-dessous. COLSPAN=2 dans un tag signifie que cette colonne aura la largeur de deux cellules.

Figure 7-4 : un tableau avec les deux premires cellules fusionnes.


Exemple 7-4

A

B

A

B

C


42

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 au lieu de 3 pour la ligne. Pour la figure 7-5 ci-dessus, nous avons donc dans le code deux tags 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.


Exemple 7-5

A


43

B

C

D

E

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 pour la premire ligne contiendra 3 cellules, do 3 tags . 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 :


44


Exemple 7-6

1.

HTML

2.

PHP

3.

Javascript

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.


45

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


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 ci-dessous.

La Création Web HTML en 7 Jours

Documents

Transcript of La Création Web HTML en 7 Jours