Vous êtes sur la page 1sur 25

Concevez votre Site Web avec

HTML5 et CSS3

Stanislas Michalak Version du 11 dcembre 2010

Prface
Bonjour toutes et tous !

Il nest jamais facile dcrire une prface, une introduction. Le plus souvent cette partie est lchement dlaisse par les lecteurs presss, ou est source dennui pour la plupart. Jai longuement hsit entre les diffrents choix qui soffraient moi. Raconter ma vie et noyer le lecteur dans un baratin incomprhensible, dblatrer sur une vision du web ou perdre mes lecteurs dans des mots compliqus qui nont dintrt que de faire sourire lauteur pour son sadisme dcidment constant. Aussi je vais tcher de vous expliquer clairement ce que nous allons faire tout au long de ce cours et pourquoi avoir choisi de vous enseigner cette mthode de conception plutt quune autre.

Les objectifs

Tout dabord, tudions les buts de la pdagogie que vous allez vous efforcer de suivre 1 . Le plus vident est la conception dun site web, mais savez-vous pourtant ce que cest ? En voici la dnition tire du nouveau Petit Robert de la langue franaise 2010 : Site Web inform. Serveur de donnes auquel on accde par un rseau (notamment Internet). En clair, cest un ordinateur qui tourne en continu et qui est charg denvoyer les donnes quil contient. Par abus de langage, cest le terme que lon utilise pour dsigner les donnes de cet ordinateur. Un site web, cest donc un ensemble de donnes structures aboutissant un ou plusieurs documents appels pages web. Celles-ci se chargent
1. Et si a ne vous plat pas cest le mme prix.

ii

iii de contenir ce qui est visible par lutilisateur lorsquil demande la page concerne son navigateur. Ici notre but et dapprendre concevoir ces pages. On en distingue principalement deux types (pour la structuration uniquement) : html ou css (ceux-ci dsignant les deux langages utiliss dans ces pages). Nous allons donc au nal apprendre et apprendre utiliser deux langages qui permettent daboutir nimporte quel site web. Vous pourrez ainsi crer un site tel que vous lavez imagin, avec un minimum de contraintes. Nous en venons ainsi ma deuxime partie : pourquoi ces deux langages ?

Pourquoi HTML et CSS ?

Puisque les choix sont la mode, il est temps dexpliquer pourquoi celui-ci. On peut trouver plusieurs mthodes qui aboutissent un site web, allant de la page sur Facebook au site web professionnel, tout en passant par le blog ou le logiciel de cration. Toutefois, ces diffrentes options ont la fcheuse tendance limiter les liberts de cration, ce que jai personnellement en horreur. HTML et CSS sont le choix qui ma le plus convenu puisque cest celui que jutilise tous les jours pour mes projets web personnels, que lon est pas dpendant dune structure amene disparatre (telle une entreprise) car ce sont des langages libres et que tout vos projets de sites sont en thorie ralisables.

Vous voil donc n prt(e) pour dmarrer cette aventure alors aprs ce petit apritif, que diriez-vous de commencer ? Bonne lecture !

iv

Premire partie

Les bases, rien que les bases

Chapitre 1

HTML, quest-ce que cest ?


Bienvenue dans ce tout premier chapitre. Avant dentrer dans le vif du sujet, jai pens que vous prsenter les outils que nous allons tudier ne serait pas de trop. On apprend rarement une langue sans tudier la culture qui en dcoule. Loin de moi lide de vous faire un cour dhistoire, qui vous ennuirait plus quautre chose, mais voyez cela comme un apritif qui vous permettra de faire grande impression devant tous vos amis.

1.1

Un peu dhistoire

Dans les annes 90 fut invent Internet, un rseau mondial facilitant les changes de donnes entre scientiques et entre militaires travers le monde. Le seul souci, cest que le systme dchange tait trs complexe, rserv aux initis et ses utilisateurs se trouvaient drouts devant la complexit de communiquer sur un rseau cr la base pour faciliter leurs changes. Cest dans cette optique que deux membres de lquipe du CERN 1 Tim BernersLee et Robert Cailliau ont cr le HTML.

F IGURE 1.1 Tim Berners-Lee et Robert Cailliau Le HTML, les adresses web et le protocole HTTP 2 , tout trois invents par ces deux compres sont la base du World Wide Web. On retrouve tous ces attributs sur
1. Centre Europen de Recherche Nuclaire 2. Hypertext Transfer Protocol

1.1. UN PEU DHISTOIRE

toute page web qui se respecte (do, entre autres ladresse web commenant par http ://www ). Le premier navigateur Web a ainsi fait son apparition : Mosaic. Celui-ci a tout de suite rencontr un grand succs. En parallle, de nombreuses entreprises ont commenc trouver le rseau attractif et lutiliser comme moyen de communication. Seulement, la base du HTML sest vite avre insufsante et ces entreprises ne voulaient pas abandonner ce nouvel outil. Elles se sont ainsi mises inventer des balises personnelles, en ne sorientant que vers leurs propres besoins, jusqu ce que ce soit de nouveau la confusion.

F IGURE 1.2 Mosaic, le premier navigateur Web partir de ce moment, les professionels du Web ont compris que sans normes internationales, ils ne parviendraient jamais un langage commun. Cest ainsi que ces professionnels ont form lIETF 1 dans le but de trier cette profusion de balises an de proposer une norme commune an de donner la possibilit tous dcrire et de lire des pages web. Ils donnrent naissance HTML 2.0, la deuxime version du HTML. Comme laccord ntait pas global, les entreprises ont continu inventer des balises personnelles, tout en utilisant la nouvelle version dHTML. Un nouveau groupe de professionnels du Web, le W3C 2 , dirig par Tim Berners-Lee 3 , fut cr dans le but de dvelopper les possibilits du Web et de de protger les droits et la libert de ses usagers. De ce groupe naquit en 1997 deux nouvelles versions revues du HTML et enn acceptes par tous : HTML 3.2, puis son successeur HTML 4.0. Cest cette dernire version qui a introduit la notion de pages dynamiques. Sen est suivi plusieurs versions bases sur le langage XML 4 qui a permit HTML de gagner en souplesse. Aujourdhui, deux standards sont en dveloppement : HTML 5 et xHTML 2.0, lun soutenu par les dveloppeurs de navigateurs, lautre par le W3C.

1. 2. 3. 4.

Internet Engeneering Task Force World Wide Web Consortium Et oui, encore lui ! eXtensible Markup Langage

Chapitre 2

Panoplie du dveloppeur
Vouloir faire des sites web ne fait pas tout, encore faut-il avoir les bons outils... Seulement voil, inutile de courir la quincaillerie avant quelle ferme, vous pouvez les acqurir gratuitement et en restant assis confortablement sur votre fauteuil. Magnique, vous ne trouvez pas ?

2.1

Des yeux pour voir

Ce premier outil 1 se trouve dj sur votre ordinateur 2 et vous servira dyeux pour contrler votre futur travail. Son petit nom : le navigateur web. Microsoft Internet explorer, Mozilla Firefox, Opera, Google chrome et leurs collgues, a ne vous dit rien ?

F IGURE 2.1 Un navigateur web : Mozilla Firefox La fonction premire dun navigateur web est... de naviguer sur le web. En dautres termes, cet outil permet de visualiser des pages web en convertissant le code source 3
1. Puisquil y en a un second... 2. Enn, normalement. 3. Le code source est ce qui est la source dun programme ou dune page web. Cest une srie dinstructions permettant votre navigateur dafcher du texte format et stylis.

2.2. UN DITEUR POUR... EUH... DITER ?

en un rsultat que lon appelle communment une page web. En ralit, ces deux pages sont une seule et mme page, lune tant la source, lautre le rsultat format aprs un passage la moulinette.

F IGURE 2.2 Une page web prise tout fait au hasard et une partie de son code source. Sachez lavenir que lon peut afcher le code source dune page web, ce qui est utile en dbogage 1 . Sous Mozilla Firefox par exemple, le raccourci clavier est Ctrl + u. Pour les autres, cherchez par vous-mmes. Cet outil va donc nous tre trs utile pour visualiser vos exercices.

2.2

Un diteur pour... euh... diter ?

Le deuxime et dernier outil dont vous aurez besoin est ncessaire tout langage de programmation : un diteur. Tout comme pour crire franais il faut une feuille de papier et un crayon 2 , lditeur permet dcrire le code source des pages web. En plus vous avez de la chance, la gomme est fournie. Il faut donc choisir... ou pas. Au fait, lditeur de votre systme dexploitation peut trs bien sufre. Nanmoins, je me suis permis de vous dresser une petite liste des diteurs 3 que je juge viables pour ce cours an de faciliter vos recherches. Ce serait idiot de ne pas pouvoir suivre ce cours si vous ne trouviez pas dditeur, vous ne trouvezpas ?
1. Le fait de rsoudre les problmes de programmation, souvent dus un dysfonctionnement de linterface chaise-clavier. 2. a na pas lair dtre si simple pour tout le monde. 3. Gratuits, cela va de soi.

CHAPITRE 2. PANOPLIE DU DVELOPPEUR

Fig 1 : Le bloc-note Microsoft Windows

Fig 2 : gEdit

2.2. UN DITEUR POUR... EUH... DITER ?

2.2.1

Microsoft Windows

Je vous proposerai bien le bloc-note, puisque aprs tout on peut trs bien lutiliser pour cela. Cependant, vous vous en sortirez bien mieux avec un outil conu pour vous faciliter la tche. Notepad++ est plutt bien fourni. Il dispose dune coloration syntaxique 1 plutt bien fournie comme la plupart de ses congnres et reconnat un bon nombre de langages de programmation (trs utile si vous compter programmer aussi dans dautres langages tel que le C , le Java ou le Python. Vous y trouverez galement tout un tas de fonctions utiles comme des macros ou lindentation automatique 2 . Cela en fait un compagnon sdentaire idal, puisque lon peut lui reprocher dtre un peu lourd. Version normale (32 bits) : http ://download.tuxfamily.org/notepadplus/5.7 /npp.5.7.Installer.exe Notepad2 me semble tre son complmentaire : cest un programme beaucoup plus lger mais bien sufsant, sans fonctions superues. Comme son congnre, il comporte une coloration syntaxique bien fournie et dautres fonctions bien utiles. vous de les dcouvrir ! Il semble en outre tre le compagnon idal des nomades, transport sur une clef USB ; mais peut galement tre utilis en complment du prcdent. Version normale (32 bits) : http ://www.os-freeware.ch/zip/notepad2.zip Version 64 bits : http ://notepad2-x64.googlecode.com/les/Notepad2-4.1.24x86-64.zip

2.2.2

GNU/Linux

Ici, le bloc-note de votre environnement de bureau prfr fera amplement laffaire, que vous soyez sous Gnome, KDE ou assimils. Pour les fanatiques que la console, on peut trouver galement votre bonheur. La plupart grent la coloration syntaxique et lindentation automatique, et renferment bien dautres fonctionnalits. Voici donc une slection de la cuve que je vous propose pour suivre ce cours : gEdit (voir gure 2), lditeur de texte du bureau Gnome. Il prsente certains dfauts, mais comblera la plupart de vos attentes. Si je puis vous donner un conseil, utilisez le jeu de couleurs Tango si vous ne souhaitez pas vous fusiller les yeux. Pour les systmes bass debian, sil nest pas dj install : apt ://gedit Pour les autres : http ://sourceforge.net/projects/gedit/
1. Un systme de coloration des balises pour les distinguer du texte normal. 2. Le fait de marquer la structure du code en faisant un ou plusieurs alinas. Tout lment du code tant au mme niveau architectural se trouve avec le mme nombre dalinas.

CHAPITRE 2. PANOPLIE DU DVELOPPEUR

Kate est lquivalent de gEdit pour lenvironnement KDE. Vim ou Emacs pour les amoureux de la console. Ces deux diteurs supportent ldition du HTML et si vous choisissez dutiliser lun deux cest que vous lutilisez dj. Nanmoins, si vous voulez les tester et que ce nest pas dj fait :

Chapitre 3

lattaque !
Durant lpisode prcdent nous vous avons quip dune batterie darmement 1 dans le but de pouvoir crire et voir vos propres pages web. Il est donc temps de prendre le temps. Du temps pour poser solidement les bases de ce que vous allez apprendre tout au long de ce cours. lattaque, donc, mais doucement.

1. Compose de deux logiciels, rappellez-vous.

Chapitre 4

Structurer pour mieux rgner


Votre premire page est termine, vous pouvez plier bagages votre formation est termine. Pour ceux qui ont eu raison de ne pas se dler, que diriez-vous de continuer ? Derrire ce titre loufoque se cache une ralit proccupante pour tout bon rdacteur qui se respecte : tout auteur sait en effet que ses crits doivent suivre un ordre logique et une structure bien dnie 1 . Paragraphes, parties, titres sont quelques termes de ce que lon appelle la smantique ; et les sites web ny chappent pas ! Avis aux amateurs de lettres, linformatique nest plus rserv aux scientiques.

4.1

Dcoupage dune page

Au cours de ce chapitre il va falloir rchir 2 . Pour une dissertation, on prvoit un plan avec deux trois parties. Ici cest pareil, sauf que ce nest pas une dissertation, et que lon va tudier un plan simple en quatre parties. Voici donc un plan de site dessin larrache avec un trs bon logiciel de dessin que je vous recommande 3 :

1. Pour ceux qui ont un trou de mmoire, revoyez vos cours de franais du collge et du lyce. 2. On risque aussi de le faire assez souvent. Si vous y tes allergique... merci dtre pass. 3. GIMP. Consultez http ://fr.wikipedia.org/wiki/GIMP pour plus dinformations.

10

4.1. DCOUPAGE DUNE PAGE

11

F IGURE 4.1 Un plan de site tout ce qui a de plus basique. Sur ce fameux plan, on distingue donc en couleurs htrognes les diffrentes parties qui le composent : Len-tte est communment nomm par son nom anglais header . Cest la tte du document et elle contient gnralement un logo, une bannire, ou tout du moins le nom du site. Lencart est particulirement utilis en typographie, vous savez, lorsquun article continue dans un petit encadr pour donner plus de dtails, ou pour donner des chiffres clefs. Ici il nest utilis que pour contenir le menu et dans le but de vous le prsenter mais je suis sr que vous trouverez plein dinformations intressantes lui donner. Le menu (ou navigation) renferme des informations de navigation, des liens qui permettent daccder aux diffrentes parties du site 1 . Ici on considre que ce menu de navigation est inclus dans un encart. Le corps inclus le contenu de la page. Cest la partie qui est la plus souvent amene changer car cest l que se trouvera vos articles, images, publications, formulaires et autres joyeusets que vous pourrez inventer. Le pied-de-page porte plus souvent son nom anglais, footer , parce que cest moins long, que les dveloppeurs sont des faignants de la pire espce et que a permet de sentendre avec le monde anglophone. Il renferme les liens utiles, administratifs, la licence ou le copyright et autre fourbi que vous naurez pas russi caser dans votre page. Bien entendu, ce plan peut varier suivant la charte graphique que vous adopterez, mais ces lments sont la plupart du temps prsents dans tout bon site web qui se respecte. Si lon revient au code HTML, a donnerait ceci 2 :
1. Comme quoi ils sont partout, les liens. 2. Notez que jomets volontairement une partie du code et que lon considre que celui-ci se trouve entre les balises <body></body>.

12
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

CHAPITRE 4. STRUCTURER POUR MIEUX RGNER

< header > < ! En t e t e > < / header > <aside> < ! E n c a r t > <nav> < ! N a v i g a t i o n > < / nav> </ aside> <div id=" corps "> < ! Corps > < / div> <footer> < ! Pied depage > </ footer>

Notez que jai utilis une balise spciale ici, <div>, car il nexiste pas de balise spcique au corps de la page. a ne devrait pas vous dranger plus que a si vous avez suivi le chapitre prcdent. Si vous souhaitez crer plus de parties, il vous faudra surement utiliser cette balise.

4.2

Des titres pour intituler

Sil y a bien un autre point important dans la smantique, cest les titres. Ceuxci permettent de sparer efcacement diffrents points de votre contenu. HTML en propose 6 niveaux diffrents, le premier tant le titre le plus important et le sixime tant le titre ltant le moins. En clair, un titre de niveau 1 est idal pour intituler la page ; tandis quun titre de niveau 6 peut servir paragraphe.

F IGURE 4.2 Les diffrents niveaux de titres. Au niveau des balises utiliser, cest on ne peut plus simple : se sont toutes des balises doubles commenant par un h et se terminant par le niveau du titre (de 1 6). <h1></h1> est par exemple un titre de niveau 1 alors que <h3></h3> est un titre de niveau 3. Simple, non ? Testez-donc par vous mme, essayez de barioler vos essais de titres. Il est important de pratiquer un maximum, comme toute langue. Dailleurs,

4.3. DCOUPAGE INTERNE

13

jessayerai autant que possible de vous prparer des chapitres de travaux pratiques pour vous entrainer de faon ludique 1 .

4.3

Dcoupage interne

Nous avons dj tudi les possibilits de dcoupage de vos pages. Il est maintenant temps de parler du dcoupage du corps, la zone qui renferme le contenu. Bien sr on peut utiliser des div pour sparer les parties essentielles, mais les div nont aucune valeur smantique. HTML5 introduit deux nouvelles balises : article et section. La premire continent un article, une nouvelle, un message sur un forum, bref du texte solidaire. La seconde quant--elle regroupe plusieurs balises article en thmatiques. Pour faire simple, si vos balises article contiennent des nouvelles, une balise section les regroupera dans une thmatique nouvelles :
1 <div id=" corps "> 2 < s e c t i o n id=" n o u v e l l e s "> 3 < a r t i c l e c l a s s =" contenu_nouvelle "> 4 Une n o u v e l l e 5 </ article> 6 < a r t i c l e c l a s s =" contenu_nouvelle "> 7 Une a u t r e n o u v e l l e 8 </ article> 9 </ section> 10 < / d i v >

Ce qui donne donc, si je ressors un de mes, hum, schmas 2 :

F IGURE 4.3 Schma dune imbrication thmatique. Il nous reste voir trois dernires balises avant de continuer. Vous savez bien entendu ce quest un paragraphe. Sauter des lignes en HTML naura aucune incidence, le texte continuera inlassablement comme si de rien tait. Essayez pour voir. Convaincu(e) ? La balise magique est facile retenir puisquil sagit de la premire lettre de paragraphe. <p></p> vous permettra donc dobtenir les paragraphes de vos
1. Encore est-il que pour a il faut tre sage et le mriter. 2. Le premier qui critique ne ressort pas vivant.

14

CHAPITRE 4. STRUCTURER POUR MIEUX RGNER

rves. Cest une balise de type block comme les prcdentes et elle vous sera particulirement utile pour la suite. La balise suivante permet de faire un retour chariot. Cest le nom utilis en imprimerie pour un simple retour la ligne. Utilisez-donc <br /> pour revenir la ligne, dans un paragraphe. Enn, <hr /> permet de crer un sparateur de type block. Voici une gure rcapitulative de ces trois balises :

F IGURE 4.4 Un essai avec les trois balises prcdentes (dans lordre dapparition).

4.4

Mise en relief

Il existe deux mthodes de mise en relief de tout ou partie dun texte. La premire est lemphase, cest dire laccentuation. Je ne parle pas de mettre des petits chapeaux sur tout votre texte, mais de lui donner une valeur accentue (dans le sens du contraire dattnuer), ce qui est rendu par dfaut par une mise en italique. Bien entendu, cest un choix des concepteurs des navigateurs de sentendre sur cette mise en italique. a aurait trs bien pu tre rendu autrement, et nous verrons comment lon peut changer a dans la deuxime partie du cours. Retenez donc que a veut juste dire je veux que mon texte ai une signication particulire, une plus forte intensit auprs du lecteur et non pas je veux que mon texte soit en italique . Compris ? La balise utiliser est double : <em></em>, comme emphasis qui est la traduction anglaise demphase. a tombe bien, a commence pareil, aucune excuse pour ne pas la retenir celle-l. Attention, pensez lutiliser dans une balise paragraphe que nous avons vu juste au dessus.

F IGURE 4.5 Un exemple demphase. Voyons maintenant la seconde. Celle-ci permet une mise en relief plus corse que lemphase, sans vouloir jouer sur son nom. La balise <strong></strong> est en effet utiliser lorsque limportance du texte est forte, lorsque vous voulez appuyer une notion ou un mot parmi dautres. Le style opt est le mme encore quen typographie dimprimerie : la graisse de police, si je puis mexprimer ainsi, cest dire lemploi de polices plus grasses, plus paisses. Cest ce que lon appelle communment le fait de mettre en gras un texte. L encore, nassociez pas strong gras 1 .

F IGURE 4.6 La balise strong


1. Les rcidivistes seront svrement punis.

4.5. INDICE ET EXPOSANT

15

4.5

Indice et exposant

Voici deux autres balises qui sauront se rendre utile, puisquelles permettent de mettre du texte en indice ou en exposant. Une petite image pour illustrer :

Pour mettre un texte en indice, on utilise la balise <sub></sub>, tandis que lon prfrera <sup></sup> pour mettre un texte en exposant. Retenez sub comme submersible (donc en bas) et sup comme suprieur (donc en haut). Il ny a rien dautre savoir sur cette balise qui peut servir dans la langue franaise comme en sciences (cest peut-tre une occasion de revoir danciens copains comme la fonction carr par exemple).

4.6

Conclusion

Vous pouvez dsormais vous amuser barioler vos pages de titres loufoques et de paragraphes palpitants ; bien structurs, rangs en rang doignons grce aux diffrentes balises de dcoupage. Il vous est aussi possible de donner de limportance au texte. Mais nous nallons pas nous arrter l. Prparez-vous dcouvrir ce qui fait la puissance du HTML : les liens.

Chapitre 5

Nouer des liens


Nous avons vu prcdement que lon pouvait organiser son contenu de faon utiliser la smantique. Si vous ne savez pas ce que cest, vous navez sans doute pas lu le chapitre prcdent. Le HTML ne sarrte pas l et nous allons maintenant dcouvrir le concept qui en fait sa puissance : les liens.

5.1

Un lien ?

Vous connaissez dj bien des types de liens. Si si, je vous assure. Quelques exemples pour vous rafraichir la mmoire : dans une famille, on parle de lien de parent entre ses membres ; sur une corde, un lien permet de relier deux extrmits de cordes. En clair, un lien est une sorte de passerelle entre deux choses. Il en est de mme pour le HTML, qui permet la cration de ponts entre diffrentes pages.

En HTML, on peut crer un pont (donc un lien) entre deux pages en utilisant la balise <a></a> . Il suft de placer cette balise sur la page mre (celle do lon part) et elle nous mne vers la page lle (celle o lon va). On peut ainsi transformer tout texte en lien hypertexte. Cette balise reoit gnralement un attribut, href, qui permet dindiquer le chemin suivre pour arriver la page lle. On adoptera donc la syntaxe suivante :
<a href="chemin que l on doit suivre pour arriver sur la page lle ">Le texte qui sert de support au lien hypertexte </a>.

Il existe cependant deux manires diffrentes de renseigner le chemin vers la page lle. 16

5.2. RELATIF OU ABSOLU ?

17

5.2
5.2.1

Relatif ou absolu ?
Lien relatif

La premire mthode demande un peu de rexion. On considre que lon se situe actuellement dans le dossier qui contient la page mre, et il va falloir retracer les tapes que lon ferait pour se retrouver dans le dossier qui contient la page lle. Pour un dossier contenant ces deux pages, cest simple, il faut simplement renseigner le nom du chier comme ceci : <a href=" chier_lle . html">Lien vers la page lle </a>. Cest plus complexe si les deux pages se trouvent dans deux dossiers distincts. Pour cela on utilisera les symboles ./ qui signie l o je me trouve actuellement , .. qui signie retourner au dossier parent et / qui correspond la racine du site. Voici un petit schma si vous tes perdu :

Si lon considre que lon se trouve dans le dossier de page1.html, pour accder index.html on peut procder de deux manires diffrentes : /index.html (on part de la racine pour arriver directement index.html) ./../index.html (on part du dossier en cours, puis on recule au dossier parent et on arrive enn index.html) Exercez-vous en cherchant le moyen daccder aux diffrents chiers depuis la racine, lun ou lautre dossier.

5.2.2

Lien absolu

Un lien absolu, contrairement au lien relatif, est constitu du chemin direct vers le chier. Par chemin direct, je veux bien entendu parler du chemin que le visiteur est sens voir dans la barre dadresses de son navigateur. Tout lien absolu peut donc tre dcoup en deux parties distinctes : La racine du site, cest--dire du dbut de ladresse (le http ://) la n du nom de domaine (.fr/, .com/, etc). Le chemin vers le chier, depuis la racine (donc considrez que vous partez toujours de /). Voici un petit schma pour vous aider retenir ce concept pas si simple :

18

CHAPITRE 5. NOUER DES LIENS

En gnral, ne vous cassez pas la tte : il suft de copier tout btement le lien quindique votre navigateur pour arriver sur le chier. Quant choisir entre relatif et absolu, on prfre en gnral utiliser les premiers pour mener vers un chier interne son site, tandis que lon rserve les liens absolus aux pages web externes. 1

5.3

Cas particuliers

Sachez que si vous souhaitez lier un document pdf, une image, un document texte, etc., il suft de procder de la mme manire. Le navigateur de visiteur se charge tout seul douvrir le document en question : magique, non ? Il est temps maintenant de se pencher sur quelques cas particuliers qui pourront vous tre utile.

5.3.1

Une adresse email

Il est fort probable que vous cherchiez laisser un contact entre vous et vos visiteurs. Le plus simple dans ce cas est dutiliser un lien spcique qui se chargera de demander au navigateur du visiteur douvrir le client de messagerie par dfaut comportant, surprise, votre email en destinataire. On utilise pour cela la commande mailto suivie de deux points et de votre adresse : <a href="mailto : votre email@fournisseur.domaine">Contactezmoi !</a>. Du reste, les proprits du lien sont les mmes quun lien normal. Je ne mtale pas plus sur le sujet, mais sachez quil est galement possible de pr-remplir le sujet ou autres informations. Prenez-garde cependant : laisser votre adresse email sur votre site peut se rvler tre un aimant pourriel.

5.3.2

Liens spciaux

Dhabitude, on utilise le protocole html. Cest une mthode qui permet de dire au navigateur que lon veut ouvrir la porte (ou port) qui gre la sortie web du serveur. Il est galement possible dutiliser dautres protocoles, par exemple ftp est la porte utilise pour faire transiter des chiers dun ordinateur un autre (nous apprendrons utiliser ce protocole plus tard). Voici un petit schma pour vous reprer un peu :
1. Et oui, on peut lier une page de son site une autre dun autre site !

5.4. CONCLUSION

19

On peut voir ici trois ports diffrents : HTTP HyperText Transfert Protocol (cest le port web, regardez bien la barre dadresse de votre navigateur). FTP File Transfert Protocol. Cest le port qui permet de faire transiter des chiers dun ordinateur un serveur. APT, ... correspond aux autres protocoles, que je ne peux pas tous numrer ici. APT en particulier est li au gestionnaire de paquets apt prsent sur les Systmes dExploitation drivs de Debian, une distribution de GNU/Linux. Ce nest pas lobjet de ce cours, je marrte donc l. Pour utiliser ces diffrents ports, on utilise un marqueur spcial au dbut de ladresse : protocole en minuscules + ://. On obtient donc http :// pour le protocole HTTP, ftp :// pour le protocole FTP et ainsi de suite.

5.4

Conclusion

Vous pouvez dsormais crer tous les liens qui vous font envie, et lier vos documents comme bien vous semble. Entrainez-vous, cest important de vous faire les dents sur ce concept qui est la base du web. Si tout est clair, passez maintenant au chapitre suivant qui vous enseignera comment insrer des images !

Chapitre 6

Cest plus joli avec des images


Les liens, cest bien joli ; mais cest aussi rbarbatif, ennuyeux la longue (mais a rvle trs utile, ne loubliez-pas !). Je vous propose daigayer votre cration en y ajoutant... des images. Accrochezvous sur ce chapitre, vous aurez appliquer tout ce que vous avez appris dans le chapitre suivant.

6.1

Diffrents types dimages

20

Table des matires


I
1

Les bases, rien que les bases


HTML, quest-ce que cest ? 1.1 Un peu dhistoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . Panoplie du dveloppeur 2.1 Des yeux pour voir . . . . . . 2.2 Un diteur pour... euh... diter ? 2.2.1 Microsoft Windows . . 2.2.2 GNU/Linux . . . . . . lattaque ! Structurer pour mieux rgner 4.1 Dcoupage dune page . . 4.2 Des titres pour intituler . . 4.3 Dcoupage interne . . . . 4.4 Mise en relief . . . . . . . 4.5 Indice et exposant . . . . . 4.6 Conclusion . . . . . . . . Nouer des liens 5.1 Un lien ? . . . . . . . . . . 5.2 Relatif ou absolu ? . . . . . 5.2.1 Lien relatif . . . . 5.2.2 Lien absolu . . . . 5.3 Cas particuliers . . . . . . 5.3.1 Une adresse email 5.3.2 Liens spciaux . . 5.4 Conclusion . . . . . . . .

1
2 2 4 4 5 7 7 9 10 10 12 13 14 15 15 16 16 17 17 17 18 18 18 19 20 20

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

3 4

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

Cest plus joli avec des images 6.1 Diffrents types dimages . . . . . . . . . . . . . . . . . . . . . . . .

21