Concevez votre Site Web avec

HTML5 et CSS3

Stanislas Michalak Version du 11 décembre 2010

Préface
Bonjour à toutes et à tous !

Il n’est jamais facile d’écrire une préface, une introduction. Le plus souvent cette partie est lâchement délaissée par les lecteurs pressés, ou est source d’ennui pour la plupart. J’ai longuement hésité entre les différents choix qui s’offraient à moi. Raconter ma vie et noyer le lecteur dans un baratin incompréhensible, déblatérer sur une vision du web ou perdre mes lecteurs dans des mots compliqués qui n’ont d’intérêt que de faire sourire l’auteur pour son sadisme décidément constant. Aussi je vais tâcher de vous expliquer clairement ce que nous allons faire tout au long de ce cours et pourquoi avoir choisi de vous enseigner cette méthode de conception plutôt qu’une autre.

Les objectifs

Tout d’abord, étudions les buts de la pédagogie que vous allez vous efforcer de suivre 1 . Le plus évident est la conception d’un site web, mais savez-vous pourtant ce que c’est ? En voici la définition tirée du nouveau Petit Robert de la langue française 2010 : Site Web inform. Serveur de données auquel on accède par un réseau (notamment Internet). En clair, c’est un ordinateur qui tourne en continu et qui est chargé d’envoyer les données qu’il contient. Par abus de langage, c’est le terme que l’on utilise pour désigner les données de cet ordinateur. Un site web, c’est donc un ensemble de données structurées aboutissant à un ou plusieurs documents appelés pages web. Celles-ci se chargent
1. Et si ça ne vous plaît pas c’est le même prix.

ii

iii de contenir ce qui est visible par l’utilisateur lorsqu’il demande la page concernée à son navigateur. que l’on est pas dépendant d’une structure amenée à disparaître (telle une entreprise) car ce sont des langages libres et que tout vos projets de sites sont en théorie réalisables. On peut trouver plusieurs méthodes qui aboutissent à un site web. que diriez-vous de commencer ? Bonne lecture ! . Nous allons donc au final apprendre et apprendre à utiliser deux langages qui permettent d’aboutir à n’importe quel site web. ce que j’ai personnellement en horreur. tout en passant par le blog ou le logiciel de création. On en distingue principalement deux types (pour la structuration uniquement) : html ou css (ceux-ci désignant les deux langages utilisés dans ces pages). Nous en venons ainsi à ma deuxième partie : pourquoi ces deux langages ? Pourquoi HTML et CSS ? Puisque les choix sont à la mode. Vous pourrez ainsi créer un site tel que vous l’avez imaginé. Ici notre but et d’apprendre à concevoir ces pages. il est temps d’expliquer pourquoi celui-ci. ces différentes options ont la fâcheuse tendance à limiter les libertés de création. avec un minimum de contraintes. Vous voilà donc fin prêt(e) pour démarrer cette aventure alors après ce petit apéritif. allant de la page sur Facebook au site web professionnel. Toutefois. HTML et CSS sont le choix qui m’a le plus convenu puisque c’est celui que j’utilise tous les jours pour mes projets web personnels.

iv .

Première partie Les bases. rien que les bases 1 .

Le seul souci. Avant d’entrer dans le vif du sujet. les adresses web et le protocole HTTP 2 . qui vous ennuirait plus qu’autre chose. F IGURE 1. On retrouve tous ces attributs sur 1. C’est dans cette optique que deux membres de l’équipe du CERN 1 —Tim BernersLee et Robert Cailliau— ont créé le HTML. Hypertext Transfer Protocol 2 . mais voyez cela comme un apéritif qui vous permettra de faire grande impression devant tous vos amis. c’est que le système d’échange était très complexe.Chapitre 1 HTML. Loin de moi l’idée de vous faire un cour d’histoire.1 Un peu d’histoire Dans les années 90 fut inventé Internet. Centre Européen de Recherche Nucléaire 2.1 – Tim Berners-Lee et Robert Cailliau Le HTML. 1. un réseau mondial facilitant les échanges de données entre scientifiques et entre militaires à travers le monde. réservé aux initiés et ses utilisateurs se trouvaient déroutés devant la complexité de communiquer sur un réseau créé à la base pour faciliter leurs échanges. qu’est-ce que c’est ? Bienvenue dans ce tout premier chapitre. tout trois inventés par ces deux compères sont la base du World Wide Web. On apprend rarement une langue sans étudier la culture qui en découle. j’ai pensé que vous présenter les outils que nous allons étudier ne serait pas de trop.

3. dirigé par Tim Berners-Lee 3 . en ne s’orientant que vers leurs propres besoins. les entreprises ont continué à inventer des balises personnelles. la base du HTML s’est vite avérée insuffisante et ces entreprises ne voulaient pas abandonner ce nouvel outil. les professionels du Web ont compris que sans normes internationales.2. 1.1. encore lui ! eXtensible Markup Langage . De ce groupe naquit en 1997 deux nouvelles versions revues du HTML et enfin acceptées par tous : HTML 3. tout en utilisant la nouvelle version d’HTML. fut créé dans le but de développer les possibilités du Web et de de protéger les droits et la liberté de ses usagers. entre autres l’adresse web commençant par « http ://www »). UN PEU D’HISTOIRE 3 toute page web qui se respecte (d’où. 4.0. Elles se sont ainsi mises à inventer des balises personnelles. puis son successeur HTML 4. de nombreuses entreprises ont commencé à trouver le réseau attractif et à l’utiliser comme moyen de communication. Un nouveau groupe de professionnels du Web. le premier navigateur Web À partir de ce moment. deux standards sont en développement : HTML 5 et xHTML 2. le W3C 2 . Celui-ci a tout de suite rencontré un grand succès. Ils donnèrent naissance à HTML 2. 2. C’est cette dernière version qui a introduit la notion de pages dynamiques.0. En parallèle. Seulement. la deuxième version du HTML.2 – Mosaic. Aujourd’hui. ils ne parviendraient jamais à un langage commun. l’un soutenu par les développeurs de navigateurs.1. Le premier navigateur Web a ainsi fait son apparition : Mosaic. l’autre par le W3C. jusqu’à ce que ce soit de nouveau la confusion. S’en est suivi plusieurs versions basées sur le langage XML 4 qui a permit à HTML de gagner en souplesse.0. Comme l’accord n’était pas global. Internet Engeneering Task Force World Wide Web Consortium Et oui. C’est ainsi que ces professionnels ont formé l’IETF 1 dans le but de trier cette profusion de balises afin de proposer une norme commune afin de donner la possibilité à tous d’écrire et de lire des pages web. F IGURE 1.

vous pouvez les acquérir gratuitement et en restant assis confortablement sur votre fauteuil. 3.. Google chrome et leurs collègues. 2. Puisqu’il y en a un second. Le code source est ce qui est à la source d’un programme ou d’une page web. vous ne trouvez pas ? 2. de naviguer sur le web.. En d’autres termes. cet outil permet de visualiser des pages web en convertissant le code source 3 1.1 Des yeux pour voir Ce premier outil 1 se trouve déjà sur votre ordinateur 2 et vous servira d’yeux pour contrôler votre futur travail. normalement..Chapitre 2 Panoplie du développeur Vouloir faire des sites web ne fait pas tout.. C’est une série d’instructions permettant à votre navigateur d’afficher du texte formaté et stylisé. Opera. 4 . inutile de courir à la quincaillerie avant qu’elle ferme.. Microsoft Internet explorer. Enfin. encore faut-il avoir les bons outils. Seulement voilà. ça ne vous dit rien ? F IGURE 2..1 – Un navigateur web : Mozilla Firefox La fonction première d’un navigateur web est. Mozilla Firefox. Magnifique. Son petit nom : le navigateur web.

Sous Mozilla Firefox par exemple. ÉDITER ? 5 en un résultat que l’on appelle communément une page web. ce qui est utile en débogage 1 . euh.2.. EUH. F IGURE 2. En plus vous avez de la chance.. Ça n’a pas l’air d’être si simple pour tout le monde. Pour les autres. Sachez à l’avenir que l’on peut afficher le code source d’une page web. Ce serait idiot de ne pas pouvoir suivre ce cours si vous ne trouviez pas d’éditeur. l’autre le résultat formaté après un passage à la moulinette.. cela va de soi. je me suis permis de vous dresser une petite liste des éditeurs 3 que je juge viables pour ce cours afin de faciliter vos recherches. Il faut donc choisir. l’éditeur permet d’écrire le code source des pages web. 2.2 – Une page web prise tout à fait au hasard et une partie de son code source. vous ne trouvezpas ? 1. l’une étant la source. En réalité.. 2. l’éditeur de votre système d’exploitation peut très bien suffire. Le fait de résoudre les problèmes de programmation. Cet outil va donc nous être très utile pour visualiser vos exercices. la gomme est fournie...2.. cherchez par vous-mêmes. 3... Au fait. le raccourci clavier est Ctrl + u. Néanmoins. éditer ? Le deuxième et dernier outil dont vous aurez besoin est nécessaire à tout langage de programmation : un éditeur. . Tout comme pour écrire français il faut une feuille de papier et un crayon 2 .2 Un éditeur pour. ces deux pages sont une seule et même page. souvent dus à un dysfonctionnement de l’interface chaise-clavier. ou pas. Gratuits.. UN ÉDITEUR POUR.

PANOPLIE DU DÉVELOPPEUR Fig 1 : Le bloc-note Microsoft Windows Fig 2 : gEdit .6 CHAPITRE 2.

ch/zip/notepad2. Si je puis vous donner un conseil. le bloc-note de votre environnement de bureau préféré fera amplement l’affaire.. l’éditeur de texte du bureau Gnome. utilisez le jeu de couleurs Tango si vous ne souhaitez pas vous fusiller les yeux. – Version normale (32 bits) : http ://www. Il présente certains défauts.net/projects/gedit/ 1.org/notepadplus/5. KDE ou assimilés.7. puisque l’on peut lui reprocher d’être un peu lourd. Comme son congénère.googlecode.. Tout élément du code étant au même niveau architectural se trouve avec le même nombre d’alinéas. puisque après tout on peut très bien l’utiliser pour cela. Vous y trouverez également tout un tas de fonctions utiles comme des macros ou l’indentation automatique 2 . le Java ou le Python. Pour les fanatiques que la console.2 GNU/Linux Ici.1 Microsoft Windows Je vous proposerai bien le bloc-note. transporté sur une clef USB .exe Notepad2 me semble être son complémentaire : c’est un programme beaucoup plus léger mais bien suffisant.tuxfamily. ÉDITER ? 7 2.1. vous vous en sortirez bien mieux avec un outil conçu pour vous faciliter la tâche. sans fonctions superflues.2.Installer. La plupart gèrent la coloration syntaxique et l’indentation automatique. À vous de les découvrir ! Il semble en outre être le compagnon idéal des nomades.2..7 /npp.. 2.flos-freeware. Cependant.5. Voici donc une sélection de la cuvée que je vous propose pour suivre ce cours : gEdit (voir figure 2). . EUH. Le fait de marquer la structure du code en faisant un ou plusieurs alinéas. UN ÉDITEUR POUR. et renferment bien d’autres fonctionnalités.2. s’il n’est pas déjà installé : apt ://gedit – Pour les autres : http ://sourceforge. Cela en fait un compagnon sédentaire idéal. que vous soyez sous Gnome.24x86-64. Il dispose d’une coloration syntaxique 1 plutôt bien fournie comme la plupart de ses congénères et reconnaît un bon nombre de langages de programmation (très utile si vous compter programmer aussi dans d’autres langages tel que le C . mais peut également être utilisé en complément du précédent. il comporte une coloration syntaxique bien fournie et d’autres fonctions bien utiles. – Pour les systèmes basés debian. Notepad++ est plutôt bien fourni. on peut trouver également votre bonheur.com/files/Notepad2-4.2. – Version normale (32 bits) : http ://download.zip 2.zip – Version 64 bits : http ://notepad2-x64. mais comblera la plupart de vos attentes. Un système de coloration des balises pour les distinguer du texte normal.

Ces deux éditeurs supportent l’édition du HTML et si vous choisissez d’utiliser l’un deux c’est que vous l’utilisez déjà.8 CHAPITRE 2. Néanmoins. Vim ou Emacs pour les amoureux de la console. PANOPLIE DU DÉVELOPPEUR Kate est l’équivalent de gEdit pour l’environnement KDE. si vous voulez les tester et que ce n’est pas déjà fait : .

Il est donc temps de prendre le temps.Chapitre 3 À l’attaque ! Durant l’épisode précédent nous vous avons équipé d’une batterie d’armement 1 dans le but de pouvoir écrire et voir vos propres pages web. donc. rappellez-vous. 9 . mais doucement. Composée de deux logiciels. Du temps pour poser solidement les bases de ce que vous allez apprendre tout au long de ce cours. À l’attaque. 1.

titres sont quelques termes de ce que l’on appelle la sémantique . Pour ceux qui ont eu raison de ne pas se défiler. GIMP. Voici donc un plan de site dessiné à l’arrache avec un très bon logiciel de dessin que je vous recommande 3 : 1. sauf que ce n’est pas une dissertation. revoyez vos cours de français du collège et du lycée. merci d’être passé. parties.Chapitre 4 Structurer pour mieux régner Votre première page est terminée. on prévoit un plan avec deux à trois parties. 10 . Ici c’est pareil.. l’informatique n’est plus réservé aux scientifiques.wikipedia. et que l’on va étudier un plan simple en quatre parties. 3. 2. 4. et les sites web n’y échappent pas ! Avis aux amateurs de lettres. Pour ceux qui ont un trou de mémoire. On risque aussi de le faire assez souvent. Pour une dissertation..1 Découpage d’une page Au cours de ce chapitre il va falloir réfléchir 2 . Consultez http ://fr. vous pouvez plier bagages votre formation est terminée.org/wiki/GIMP pour plus d’informations. Paragraphes. Si vous y êtes allergique. que diriez-vous de continuer ? Derrière ce titre loufoque se cache une réalité préoccupante pour tout bon rédacteur qui se respecte : tout auteur sait en effet que ses écrits doivent suivre un ordre logique et une structure bien définie 1 .

L’encart est particulièrement utilisé en typographie. ce plan peut varier suivant la charte graphique que vous adopterez. lorsqu’un article continue dans un petit encadré pour donner plus de détails. Si l’on revient au code HTML. ça donnerait ceci 2 : 1. des liens qui permettent d’accéder aux différentes parties du site 1 . que les développeurs sont des faignants de la pire espèce et que ça permet de s’entendre avec le monde anglophone. les liens. mais ces éléments sont la plupart du temps présents dans tout bon site web qui se respecte. formulaires et autres joyeusetés que vous pourrez inventer.1. on distingue donc en couleurs hétérogènes les différentes parties qui le composent : L’en-tête est communément nommé par son nom anglais « header ». Ici on considère que ce menu de navigation est inclus dans un encart. Il renferme les liens utiles. vous savez. une bannière.4. Comme quoi ils sont partout. 2. la licence ou le copyright et autre fourbi que vous n’aurez pas réussi à caser dans votre page. images. Le corps inclus le contenu de la page. Le pied-de-page porte plus souvent son nom anglais. administratifs. ou pour donner des chiffres clefs. Notez que j’omets volontairement une partie du code et que l’on considère que celui-ci se trouve entre les balises <body></body>. DÉCOUPAGE D’UNE PAGE 11 F IGURE 4. .1 – Un plan de site tout ce qui a de plus basique. Bien entendu. parce que c’est moins long. Sur ce fameux plan. « footer ». publications. Le menu (ou navigation) renferme des informations de navigation. C’est la partie qui est la plus souvent amenée à changer car c’est là que se trouvera vos articles. C’est la tête du document et elle contient généralement un logo. Ici il n’est utilisé que pour contenir le menu et dans le but de vous le présenter mais je suis sûr que vous trouverez plein d’informations intéressantes à lui donner. ou tout du moins le nom du site.

HTML en propose 6 niveaux différents.2 Des titres pour intituler S’il y a bien un autre point important dans la sémantique. STRUCTURER POUR MIEUX RÉGNER < 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 −de−page −−> </ footer> Notez que j’ai utilisé une balise spéciale ici. Ceuxci permettent de séparer efficacement différents points de votre contenu. Ça ne devrait pas vous déranger plus que ça si vous avez suivi le chapitre précédent. <div>. c’est les titres. D’ailleurs. Au niveau des balises à utiliser. Si vous souhaitez créer plus de parties. car il n’existe pas de balise spécifique au corps de la page. c’est on ne peut plus simple : se sont toutes des balises doubles commençant par un h et se terminant par le niveau du titre (de 1 à 6).2 – Les différents niveaux de titres. <h1></h1> est par exemple un titre de niveau 1 alors que <h3></h3> est un titre de niveau 3. Simple. En clair. non ? Testez-donc par vous même. un titre de niveau 1 est idéal pour intituler la page . Il est important de pratiquer un maximum. comme toute langue. tandis qu’un titre de niveau 6 peut servir à paragraphe. 4. essayez de barioler vos essais de titres. le premier étant le titre le plus important et le sixième étant le titre l’étant le moins. F IGURE 4.12 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 CHAPITRE 4. . il vous faudra surement utiliser cette balise.

HTML5 introduit deux nouvelles balises : article et section. schémas 2 : F IGURE 4. Pour faire simple.3.4. hum. la zone qui renferme le contenu. Il nous reste à voir trois dernières balises avant de continuer. Bien sûr on peut utiliser des div pour séparer les parties essentielles. Encore est-il que pour ça il faut être sage et le mériter. La seconde quant-à-elle regroupe plusieurs balises article en thématiques. une nouvelle. Il est maintenant temps de parler du découpage du corps. le texte continuera inlassablement comme si de rien était. . si je ressors un de mes. Vous savez bien entendu ce qu’est un paragraphe. mais les div n’ont aucune valeur sémantique. une balise section les regroupera dans une thématique « 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. un message sur un forum. bref du texte solidaire. La première continent un article.3 – Schéma d’une imbrication thématique. 2. DÉCOUPAGE INTERNE 13 j’essayerai autant que possible de vous préparer des chapitres de travaux pratiques pour vous entrainer de façon ludique 1 . Le premier qui critique ne ressort pas vivant. 4. <p></p> vous permettra donc d’obtenir les paragraphes de vos 1. Sauter des lignes en HTML n’aura aucune incidence. Convaincu(e) ? La balise magique est facile à retenir puisqu’il s’agit de la première lettre de paragraphe. Essayez pour voir.3 Découpage interne Nous avons déjà étudié les possibilités de découpage de vos pages. si vos balises article contiennent des nouvelles.

mais de lui donner une valeur accentuée (dans le sens du contraire d’atténuer). ce qui est rendu par défaut par une mise en italique. Bien entendu. Ça tombe bien. aucune excuse pour ne pas la retenir celle-là. Ça aurait très bien pu être rendu autrement. Le style opté est le même encore qu’en typographie d’imprimerie : la graisse de police. c’est à dire l’emploi de polices plus grasses. C’est une balise de type block comme les précédentes et elle vous sera particulièrement utile pour la suite. Voyons maintenant la seconde. sans vouloir jouer sur son nom. une plus forte intensité auprès du lecteur » et non pas « je veux que mon texte soit en italique ». La balise suivante permet de faire un retour chariot.5 – Un exemple d’emphase. Voici une figure récapitulative de ces trois balises : F IGURE 4. STRUCTURER POUR MIEUX RÉGNER rêves. Je ne parle pas de mettre des petits chapeaux sur tout votre texte.4 Mise en relief Il existe deux méthodes de mise en relief de tout ou partie d’un texte. pensez à l’utiliser dans une balise paragraphe que nous avons vu juste au dessus. F IGURE 4. <hr /> permet de créer un séparateur de type block. Attention. lorsque vous voulez appuyer une notion ou un mot parmi d’autres. n’associez pas strong à gras 1 . .4 – Un essai avec les trois balises précédentes (dans l’ordre d’apparition). plus épaisses. c’est à dire l’accentuation. La balise <strong></strong> est en effet à utiliser lorsque l’importance du texte est forte. Là encore. Celle-ci permet une mise en relief plus corsée que l’emphase. si je puis m’exprimer ainsi. dans un paragraphe. et nous verrons comment l’on peut changer ça dans la deuxième partie du cours.6 – La balise strong 1. c’est un choix des concepteurs des navigateurs de s’entendre sur cette mise en italique. ça commence pareil. Compris ? La balise à utiliser est double : <em></em>. comme emphasis qui est la traduction anglaise d’emphase. C’est ce que l’on appelle communément le fait de mettre en gras un texte. C’est le nom utilisé en imprimerie pour un simple retour à la ligne. Les récidivistes seront sévèrement punis. Utilisez-donc <br /> pour revenir à la ligne. 4.14 CHAPITRE 4. F IGURE 4. Enfin. La première est l’emphase. Retenez donc que ça veut juste dire « je veux que mon texte ai une signification particulière.

Retenez sub comme submersible (donc en bas) et sup comme supérieur (donc en haut). puisqu’elles permettent de mettre du texte en indice ou en exposant. 4. on utilise la balise <sub></sub>.5. rangés en rang d’oignons grâce aux différentes balises de découpage. Une petite image pour illustrer : Pour mettre un texte en indice. bien structurés. .4. Il vous est aussi possible de donner de l’importance au texte. tandis que l’on préfèrera <sup></sup> pour mettre un texte en exposant. INDICE ET EXPOSANT 15 4. Mais nous n’allons pas nous arrêter là.5 Indice et exposant Voici deux autres balises qui sauront se rendre utile. Préparez-vous à découvrir ce qui fait la puissance du HTML : les liens.6 Conclusion Vous pouvez désormais vous amuser à barioler vos pages de titres loufoques et de paragraphes palpitants . Il n’y a rien d’autre à savoir sur cette balise qui peut servir dans la langue française comme en sciences (c’est peut-être une occasion de revoir d’anciens copains comme la fonction carré par exemple).

Il suffit de placer cette balise sur la page mère (celle d’où l’on part) et elle nous mène vers la page fille (celle où l’on va). on peut créer un pont (donc un lien) entre deux pages en utilisant la balise « <a></a> ». Si si. En HTML. href. un lien permet de relier deux extrémités de cordes. On adoptera donc la syntaxe suivante : <a href="chemin que l ’on doit suivre pour arriver sur la page fille ">Le texte qui sert de support au lien hypertexte </a>. Si vous ne savez pas ce que c’est. On peut ainsi transformer tout texte en lien hypertexte. qui permet d’indiquer le chemin à suivre pour arriver à la page fille. Cette balise reçoit généralement un attribut. un lien est une sorte de passerelle entre deux choses. on parle de lien de parenté entre ses membres .Chapitre 5 Nouer des liens Nous avons vu précédement que l’on pouvait organiser son contenu de façon à utiliser la sémantique.1 Un lien ? Vous connaissez déjà bien des types de liens. Quelques exemples pour vous rafraichir la mémoire : dans une famille. sur une corde. Il existe cependant deux manières différentes de renseigner le chemin vers la page fille. Il en est de même pour le HTML. Le HTML ne s’arrête pas là et nous allons maintenant découvrir le concept qui en fait sa puissance : les liens. qui permet la création de « ponts » entre différentes pages. 16 . je vous assure. vous n’avez sans doute pas lu le chapitre précédent. En clair. 5.

/index. je veux bien entendu parler du chemin que le visiteur est sensé voir dans la barre d’adresses de son navigateur. Pour cela on utilisera les symboles « .1 Relatif ou absolu ? Lien relatif La première méthode demande un peu de réflexion.html (on part du dossier en cours. il faut simplement renseigner le nom du fichier comme ceci : <a href=" fichier_fille . l’un ou l’autre dossier.html. Pour un dossier contenant ces deux pages. etc). C’est plus complexe si les deux pages se trouvent dans deux dossiers distincts.2. est constitué du chemin direct vers le fichier. puis on recule au dossier parent et on arrive enfin à index. html">Lien vers la page fille </a>.fr/.2 5. 5..html) Exercez-vous en cherchant le moyen d’accéder aux différents fichiers depuis la racine..html (on part de la racine pour arriver directement à index. c’est-à-dire du début de l’adresse (le http ://) à la fin du nom de domaine (.2.5. Voici un petit schéma si vous êtes perdu : Si l’on considère que l’on se trouve dans le dossier de page1. Par chemin direct. » qui signifie « retourner au dossier parent » et « / » qui correspond à la racine du site. et il va falloir retracer les étapes que l’on ferait pour se retrouver dans le dossier qui contient la page fille.2 Lien absolu Un lien absolu. RELATIF OU ABSOLU ? 17 5.html on peut procéder de deux manières différentes : – /index. Tout lien absolu peut donc être découpé en deux parties distinctes : – La racine du site. contrairement au lien relatif.html) – . Voici un petit schéma pour vous aider à retenir ce concept pas si simple : . pour accéder à index. ./. – Le chemin vers le fichier. depuis la racine (donc considérez que vous partez toujours de /). c’est simple.com/. « .2. On considère que l’on se situe actuellement dans le dossier qui contient la page mère./ » qui signifie « là où je me trouve actuellement ».

non ? Il est temps maintenant de se pencher sur quelques cas particuliers qui pourront vous être utile. tandis que l’on réserve les liens absolus aux pages web externes. votre email en destinataire.2 Liens spéciaux D’habitude. Prenez-garde cependant : laisser votre adresse email sur votre site peut se révéler être un aimant à pourriel. 5.18 CHAPITRE 5. Et oui. Je ne m’étale pas plus sur le sujet.3. une image.3 Cas particuliers Sachez que si vous souhaitez lier un document pdf. On utilise pour cela la commande « mailto » suivie de deux points et de votre adresse : <a href="mailto : votre −email@fournisseur. etc. un document texte. surprise. il suffit de procéder de la même manière. ne vous cassez pas la tête : il suffit de copier tout bêtement le lien qu’indique votre navigateur pour arriver sur le fichier. C’est une méthode qui permet de dire au navigateur que l’on veut ouvrir la porte (ou port) qui gère la sortie web du serveur.. Quant à choisir entre relatif et absolu. NOUER DES LIENS En général. Voici un petit schéma pour vous repérer un peu : 1.domaine">Contactez−moi !</a>. 5. 1 5. Le navigateur de visiteur se charge tout seul d’ouvrir le document en question : magique. par exemple « ftp » est la porte utilisée pour faire transiter des fichiers d’un ordinateur à un autre (nous apprendrons à utiliser ce protocole plus tard). on préfère en général utiliser les premiers pour mener vers un fichier interne à son site.1 Une adresse email Il est fort probable que vous cherchiez à laisser un contact entre vous et vos visiteurs.3. on peut lier une page de son site à une autre d’un autre site ! . on utilise le protocole html. les propriétés du lien sont les mêmes qu’un lien normal. Le plus simple dans ce cas est d’utiliser un lien spécifique qui se chargera de demander au navigateur du visiteur d’ouvrir le client de messagerie par défaut comportant. mais sachez qu’il est également possible de pré-remplir le sujet ou autres informations. Il est également possible d’utiliser d’autres protocoles. Du reste.

. APT en particulier est lié au gestionnaire de paquets apt présent sur les Systèmes d’Exploitation dérivés de Debian. passez maintenant au chapitre suivant qui vous enseignera comment insérer des images ! .. on utilise un marqueur spécial au début de l’adresse : protocole en minuscules + ://. Pour utiliser ces différents ports.4. correspond aux autres protocoles. regardez bien la barre d’adresse de votre navigateur). je m’arrête donc là.. que je ne peux pas tous énumérer ici.4 Conclusion Vous pouvez désormais créer tous les liens qui vous font envie. et lier vos documents comme bien vous semble. ftp :// pour le protocole FTP et ainsi de suite. une distribution de GNU/Linux. C’est le port qui permet de faire transiter des fichiers d’un ordinateur à un serveur. 5. Ce n’est pas l’objet de ce cours. FTP File Transfert Protocol.5. On obtient donc http :// pour le protocole HTTP. c’est important de vous faire les dents sur ce concept qui est à la base du web. APT. Entrainez-vous. Si tout est clair. CONCLUSION 19 On peut voir ici trois ports différents : HTTP HyperText Transfert Protocol (c’est le port web.

. ennuyeux à la longue (mais ça révèle très utile. c’est bien joli . des images. Je vous propose d’aigayer votre création en y ajoutant. ne l’oubliez-pas !). mais c’est aussi rébarbatif. Accrochezvous sur ce chapitre. vous aurez à appliquer tout ce que vous avez appris dans le chapitre suivant.Chapitre 6 C’est plus joli avec des images Les liens. 6.1 Différents types d’images 20 ..

.. .2. . . 5. . . . . . . . 4. . .4 Mise en relief . . . . . . . . . . . rien que les bases HTML. . . . . .3 Cas particuliers . . . . . .3. .3 Découpage interne . . . . . . . . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . .2 Liens spéciaux .Table des matières I 1 Les bases. . .1 Microsoft Windows . 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 Lien relatif . . . . . . 4. . . . 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 2 . . . . . . . . . 5. . . . . . . . . . . . . .1 Découpage d’une page . . . . . . . . . . . . . . . . 21 . . . . . . . . . . . . . . . . .2. . . . .. . . euh. 5. . . . . . . . . . . . . . . . . . . . . . . . .1 Une adresse email 5. . . . . . . . . . . .2 Relatif ou absolu ? . . . . .1 Un peu d’histoire . . . . . . . . . . . . . . . éditer ? 2. . . . . . . . . . . . . . . . . . . .. . . . .4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 Un lien ? . . . . 4.2. . . . . . . . . . . . . . . .2 Lien absolu . . . . . . .2 GNU/Linux . . . . . . . 5 . . . Nouer des liens 5. Panoplie du développeur 2. . . . . . . . .1 Des yeux pour voir . . . qu’est-ce que c’est ? 1. . . . . . . . . . . . 4. . . . . 6 C’est plus joli avec des images 6. . . . . .2. . . 3 4 . . . . . . . . . . . . . . . . . . .2 Des titres pour intituler . . . . . . . . . . . . . . . . . . . . . .5 Indice et exposant . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5. . . . . .3. . . . . . . . . . . . . .6 Conclusion . . . . . . . . .2 Un éditeur pour. . . . . 5. À l’attaque ! Structurer pour mieux régner 4. . . . . . . . . . . . . . . . . . . . . . . . . . .1 Différents types d’images . . . . . . . . . . . . . . .. . . . 5. . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Sign up to vote on this title
UsefulNot useful