Cours HTML5 & CSS3

8/6/2019 Cours HTML5 & CSS3

1/25

Concevez votre Site Web avec

HTML5 et CSS3

Stanislas Michalak

Version du 11 dcembre 2010


2/25

Prface

Bonjour toutes et tous !

Il nest jamais facile dcrire une prface, une introduction. Le plus souvent cettepartie est lchement dlaisse par les lecteurs presss, ou est source dennui pour laplupart. Jai longuement hsit entre les diffrents choix qui soffraient moi. Raconterma vie et noyer le lecteur dans un baratin incomprhensible, dblatrer sur une visiondu web ou perdre mes lecteurs dans des mots compliqus qui nont dintrt que defaire sourire lauteur pour son sadisme dcidment constant.

Aussi je vais tcher de vous expliquer clairement ce que nous allons faire tout aulong de ce cours et pourquoi avoir choisi de vous enseigner cette mthode de conceptionplutt quune autre.

Les objectifs

Tout dabord, tudions les buts de la pdagogie que vous allez vous efforcer desuivre 1. Le plus vident est la conception dun site web, mais savez-vous pourtant ceque cest ? En voici la dfinition tire du nouveau Petit Robert de la langue franaise2010 :

Site Webi n f o r m . S e r v e u r d e d o n n e s a u q u e l o n a c c d e p a r u n

r s e a u ( n o t a m m e n t I n t e r n e t ) .

En clair, cest un ordinateur qui tourne en continu et qui est charg denvoyer lesdonnes quil contient. Par abus de langage, cest le terme que lon utilise pour dsignerles donnes de cet ordinateur. Un site web, cest donc un ensemble de donnes structu-res 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


3/25

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 principalementdeux types (pour la structuration uniquement) : html ou css (ceux-ci dsignant les deuxlangages utiliss dans ces pages). Nous allons donc au final apprendre et apprendre utiliser deux langages qui permettent daboutir nimporte quel site web. Vous pourrezainsi crer un site tel que vous lavez imagin, avec un minimum de contraintes. Nousen 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. Onpeut trouver plusieurs mthodes qui aboutissent un site web, allant de la page surFacebook au site web professionnel, tout en passant par le blog ou le logiciel de cra-tion. Toutefois, ces diffrentes options ont la fcheuse tendance limiter les liberts decration, ce que jai personnellement en horreur.

HTML et CSS sont le choix qui ma le plus convenu puisque cest celui que juti-lise tous les jours pour mes projets web personnels, que lon est pas dpendant dunestructure 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 fin prt(e) pour dmarrer cette aventure alors aprs ce petit apritif,que diriez-vous de commencer ? Bonne lecture!


4/25

iv


5/25

Premire partie

Les bases, rien que les bases

1


6/25

Chapitre 1

HTML, quest-ce que cest ?

Bienvenue dans ce tout premier chapitre. Avant dentrer dans le vif du sujet, jaipens que vous prsenter les outils que nous allons tudier ne serait pas de trop. Onapprend rarement une langue sans tudier la culture qui en dcoule. Loin de moi lidede vous faire un cour dhistoire, qui vous ennuirait plus quautre chose, mais voyezcela comme un apritif qui vous permettra de faire grande impression devant tous vosamis.

1.1 Un peu dhistoire

Dans les annes 90 fut invent Internet, un rseau mondial facilitant les changes

de donnes entre scientifiques et entre militaires travers le monde. Le seul souci, cestque le systme dchange tait trs complexe, rserv aux initis et ses utilisateurs setrouvaient drouts devant la complexit de communiquer sur un rseau cr la basepour faciliter leurs changes.

Cest dans cette optique que deux membres de lquipe du CERN 1 Tim Berners-Lee et Robert Cailliau ont cr le HTML.

FIGURE 1.1 Tim Berners-Lee et Robert Cailliau

Le HTML, les adresses web et le protocole HTTP 2, tout trois invents par cesdeux compres sont la base du World Wide Web. On retrouve tous ces attributs sur

1. Centre Europen de Recherche Nuclaire2. Hypertext Transfer Protocol

2


7/25

1.1. UN PEU DHISTOIRE 3

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 desuite 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 insuffisante et ces entreprises ne voulaient pas aban-donner 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 laconfusion.

FIGURE 1.2 Mosaic, le premier navigateur Web

partir de ce moment, les professionels du Web ont compris que sans normesinternationales, ils ne parviendraient jamais un langage commun. Cest ainsi que cesprofessionnels ont form lIETF 1 dans le but de trier cette profusion de balises afin deproposer une norme commune afin de donner la possibilit tous dcrire et de lire despages web. Ils donnrent naissance HTML 2.0, la deuxime version du HTML.

Comme laccord ntait pas global, les entreprises ont continu inventer des ba-lises personnelles, tout en utilisant la nouvelle version dHTML. Un nouveau groupede professionnels du Web, le W3C 2, dirig par Tim Berners-Lee 3, fut cr dans le butde dvelopper les possibilits du Web et de de protger les droits et la libert de sesusagers. De ce groupe naquit en 1997 deux nouvelles versions revues du HTML et en-fin 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 HTMLde gagner en souplesse. Aujourdhui, deux standards sont en dveloppement : HTML5 et xHTML 2.0, lun soutenu par les dveloppeurs de navigateurs, lautre par le W3C.

1. Internet Engeneering Task Force2. World Wide Web Consortium3. Et oui, encore lui !4. eXtensible Markup Langage


8/25

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 lesacqurir gratuitement et en restant assis confortablement sur votre fauteuil. Magnifique,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 pourcontrler votre futur travail. Son petit nom : le navigateur web. Microsoft Internet ex-plorer, Mozilla Firefox, Opera, Google chrome et leurs collgues, a ne vous dit rien ?

FIGURE 2.1 Un navigateur web : Mozilla Firefox

La fonction premire dun navigateur web est... de naviguer sur le web. En dautrestermes, cet outil permet de visualiser des pages web en convertissant le code source 3

1. Puisquil y en a un second...2. Enfin, normalement.3. Le code source est ce qui est la source dun programme ou dune page web. Cest une srie dins-

tructions permettant votre navigateur dafficher du texte format et stylis.

4


9/25

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

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 unpassage la moulinette.

FIGURE 2.2 Une page web prise tout fait au hasard et une partie de son code source.

Sachez lavenir que lon peut afficher le code source dune page web, ce qui estutile 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 pourvisualiser vos exercices.

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

Le deuxime et dernier outil dont vous aurez besoin est ncessaire tout langagede programmation : un diteur. Tout comme pour crire franais il faut une feuille depapier et un crayon 2, lditeur permet dcrire le code source des pages web. En plusvous avez de la chance, la gomme est fournie.

Il faut donc choisir... ou pas. Au fait, lditeur de votre systme dexploitation peuttrs bien suffire. Nanmoins, je me suis permis de vous dresser une petite liste des di-teurs 3 que je juge viables pour ce cours afin de faciliter vos recherches. Ce serait idiotde ne pas pouvoir suivre ce cours si vous ne trouviez pas dditeur, vous ne trouvez-pas?

1. Le fait de rsoudre les problmes de programmation, souvent dus un dysfonctionnement de linter-face chaise-clavier.

2. a na pas lair dtre si simple pour tout le monde.3. Gratuits, cela va de soi.


10/25

6 CHAPITRE 2. PANOPLIE DU DVELOPPEUR

Fig 1 : Le bloc-note Microsoft Windows

Fig 2 : gEdit


11/25

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

2.2.1 Microsoft Windows

Je vous proposerai bien le bloc-note, puisque aprs tout on peut trs bien lutiliserpour cela. Cependant, vous vous en sortirez bien mieux avec un outil conu pour vousfaciliter la tche.

Notepad++ est plutt bien fourni. Il dispose dune coloration syntaxique 1 plutt bienfournie comme la plupart de ses congnres et reconnat un bon nombre delangages de programmation (trs utile si vous compter programmer aussi dansdautres langages tel que le C , le Java ou le Python. Vous y trouverez galementtout un tas de fonctions utiles comme des macros ou lindentation automatique 2.Cela en fait un compagnon sdentaire idal, puisque lon peut lui reprocher dtreun 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 l-ger mais bien suffisant, sans fonctions superflues. Comme son congnre, il com-porte 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 duprcdent. Version normale (32 bits) : http ://www.flos-freeware.ch/zip/notepad2.zip Version 64 bits : http ://notepad2-x64.googlecode.com/files/Notepad2-4.1.24-

x86-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 etlindentation automatique, et renferment bien dautres fonctionnalits. Voici donc uneslection de la cuve que je vous propose pour suivre ce cours :

gEdit (voir figure 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, utili-sez 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.


12/25


13/25

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 prendrele temps. Du temps pour poser solidement les bases de ce que vous allez apprendre toutau long de ce cours. lattaque, donc, mais doucement.

1. Compose de deux logiciels, rappellez-vous.

9


14/25

Chapitre 4

Structurer pour mieux rgner

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

4.1 Dcoupage dune page

Au cours de ce chapitre il va falloir rflchir 2. Pour une dissertation, on prvoit unplan avec deux trois parties. Ici cest pareil, sauf que ce nest pas une dissertation, etque 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


15/25

4.1. DCOUPAGE DUNE PAGE 11

FIGURE 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 par-ties qui le composent :

Len-tte est communment nomm par son nom anglais header . Cest la tte dudocument et elle contient gnralement un logo, une bannire, ou tout du moinsle nom du site.

Lencart est particulirement utilis en typographie, vous savez, lorsquun article conti-nue dans un petit encadr pour donner plus de dtails, ou pour donner des chiffresclefs. Ici il nest utilis que pour contenir le menu et dans le but de vous le pr-senter mais je suis sr que vous trouverez plein dinformations intressantes lui donner.

Le menu (ou navigation) renferme des informations de navigation, des liens qui per-mettent daccder aux diffrentes parties du site 1. Ici on considre que ce menude 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, formu-laires et autres joyeusets que vous pourrez inventer.

Le pied-de-page porte plus souvent son nom anglais, footer , parce que cest moinslong, que les dveloppeurs sont des faignants de la pire espce et que a permetde sentendre avec le monde anglophone. Il renferme les liens utiles, administra-tifs, la licence ou le copyright et autre fourbi que vous naurez pas russi caserdans 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 serespecte. 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 .


16/25

12 CHAPITRE 4. STRUCTURER POUR MIEUX RGNER

1 2 < ! En t e t e >

3 < /header >4 < a s i d e >5 < ! E n c a r t >6 7 < ! N a v i g a t i o n >8 < /nav>9 < /a s i d e >

10 < d iv i d=" corps ">11 < ! C o r p s >12 < /di v >13 < f o o t e r >14 < ! Pieddepage >15 < /f o o t e r >

Notez que jai utilis une balise spciale ici, , car il nexiste pas de balise

spcifique au corps de la page. a ne devrait pas vous dranger plus que a si vousavez suivi le chapitre prcdent. Si vous souhaitez crer plus de parties, il vous faudrasurement utiliser cette balise.

4.2 Des titres pour intituler

Sil y a bien un autre point important dans la smantique, cest les titres. Ceux-ci permettent de sparer efficacement diffrents points de votre contenu. HTML enpropose 6 niveaux diffrents, le premier tant le titre le plus important et le siximetant le titre ltant le moins. En clair, un titre de niveau 1 est idal pour intituler lapage ; tandis quun titre de niveau 6 peut servir paragraphe.

FIGURE 4.2 Les diffrents niveaux de titres.

Au niveau des balises utiliser, cest on ne peut plus simple : se sont toutes desbalises doubles commenant par un h et se terminant par le niveau du titre (de 1 6). est par exemple un titre de niveau 1 alors que est un titre deniveau 3. Simple, non ? Testez-donc par vous mme, essayez de barioler vos essaisde titres. Il est important de pratiquer un maximum, comme toute langue. Dailleurs,


17/25

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 maintenanttemps de parler du dcoupage du corps, la zone qui renferme le contenu. Bien sr onpeut utiliser des div pour sparer les parties essentielles, mais les div nont aucunevaleur smantique. HTML5 introduit deux nouvelles balises : article et section. Lapremire continent un article, une nouvelle, un message sur un forum, bref du textesolidaire. La seconde quant--elle regroupe plusieurs balises article en thmatiques.Pour faire simple, si vos balises article contiennent des nouvelles, une balise sectionles regroupera dans une thmatique nouvelles :

1 < d iv i d=" corps ">2 < s e c t i o n i d =" n o u v e l l e s " >3 < a r t i c l e c l a s s =" c o n t e n u _ n o u v e l l e " >4 U n e n o u v e l l e5 < / a r t i c l e >6 < a r t i c l e c l a s s =" c o n t e n u _ n o u v e l l e " >7 Une a u t r e n o u v e l l e8 < / a r t i c l e >9 < /s e c t i o n >

10 < /di v >

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

FIGURE 4.3 Schma dune imbrication thmatique.

Il nous reste voir trois dernires balises avant de continuer. Vous savez bienentendu ce quest un paragraphe. Sauter des lignes en HTML naura aucune inci-dence, le texte continuera inlassablement comme si de rien tait. Essayez pour voir.Convaincu(e) ? La balise magique est facile retenir puisquil sagit de la premirelettre de paragraphe.

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.


18/25

14 CHAPITRE 4. STRUCTURER POUR MIEUX RGNER

rves. Cest une balise de type block comme les prcdentes et elle vous sera particu-

lirement utile pour la suite.La balise suivante permet de faire un retour chariot. Cest le nom utilis en impri-merie pour un simple retour la ligne. Utilisez-donc
pour revenir la ligne, dansun paragraphe.

Enfin, permet de crer un sparateur de type block. Voici une figure rcapi-tulative de ces trois balises :

FIGURE 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 premireest lemphase, cest dire laccentuation. Je ne parle pas de mettre des petits chapeauxsur tout votre texte, mais de lui donner une valeur accentue (dans le sens du contrairedattnuer), ce qui est rendu par dfaut par une mise en italique. Bien entendu, cestun choix des concepteurs des navigateurs de sentendre sur cette mise en italique. aaurait trs bien pu tre rendu autrement, et nous verrons comment lon peut changera dans la deuxime partie du cours. Retenez donc que a veut juste dire je veux que

mon texte ai une signification 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 : , comme emphasis qui est la traductionanglaise demphase. a tombe bien, a commence pareil, aucune excuse pour ne pasla retenir celle-l. Attention, pensez lutiliser dans une balise paragraphe que nousavons vu juste au dessus.

FIGURE 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 est en effet uti-liser lorsque limportance du texte est forte, lorsque vous voulez appuyer une notionou un mot parmi dautres. Le style opt est le mme encore quen typographie dimpri-merie : la graisse de police, si je puis mexprimer ainsi, cest dire lemploi de policesplus grasses, plus paisses. Cest ce que lon appelle communment le fait de mettreen gras un texte. L encore, nassociez pas strong gras 1.

FIGURE 4.6 La balise strong

1. Les rcidivistes seront svrement punis.


19/25

4.5. INDICE ET EXPOSANT 15

4.5 Indice et exposant

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

Pour mettre un texte en indice, on utilise la balise , tandis que lon pr-frera 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 surcette balise qui peut servir dans la langue franaise comme en sciences (cest peut-treune 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 etde paragraphes palpitants ; bien structurs, rangs en rang doignons grce aux diff-rentes balises de dcoupage. Il vous est aussi possible de donner de limportance autexte. Mais nous nallons pas nous arrter l. Prparez-vous dcouvrir ce qui fait lapuissance du HTML : les liens.


20/25

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 lule chapitre prcdent. Le HTML ne sarrte pas l et nous allons maintenant dcouvrirle 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 sesmembres ; 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 labalise . Il suffit de placer cette balise sur la page mre (celle do lon part)et elle nous mne vers la page fille (celle o lon va). On peut ainsi transformer touttexte en lien hypertexte.

Cette balise reoit gnralement un attribut, href, qui permet dindiquer le chemin suivre pour arriver la page fille. On adoptera donc la syntaxe suivante :

Le texte qui sert de support

au lien hypertexte.

Il existe cependant deux manires diffrentes de renseigner le chemin vers la pagefille.

16


21/25

5.2. RELATIF OU ABSOLU ? 17

5.2 Relatif ou absolu ?

5.2.1 Lien relatif

La premire mthode demande un peu de rflexion. On considre que lon se situeactuellement dans le dossier qui contient la page mre, et il va falloir retracer les tapesque lon ferait pour se retrouver dans le dossier qui contient la page fille. Pour undossier contenant ces deux pages, cest simple, il faut simplement renseigner le nomdu fichier comme ceci : Lien vers la page fille .

Cest plus complexe si les deux pages se trouvent dans deux dossiers distincts. Pourcela on utilisera les symboles ./ qui signifie l o je me trouve actuellement , .. qui signifie 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 enfin index.html)Exercez-vous en cherchant le moyen daccder aux diffrents fichiers 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 lefichier. Par chemin direct, je veux bien entendu parler du chemin que le visiteur estsens 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 fin du nom de

domaine (.fr/, .com/, etc). Le chemin vers le fichier, depuis la racine (donc considrez que vous partez

toujours de /).Voici un petit schma pour vous aider retenir ce concept pas si simple :


22/25

18 CHAPITRE 5. NOUER DES LIENS

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

5.3 Cas particuliersSachez que si vous souhaitez lier un document pdf, une image, un document texte,

etc., il suffit de procder de la mme manire. Le navigateur de visiteur se charge toutseul douvrir le document en question : magique, non ?

Il est temps maintenant de se pencher sur quelques cas particuliers qui pourrontvous tre utile.

5.3.1 Une adresse email

Il est fort probable que vous cherchiez laisser un contact entre vous et vos visi-teurs. Le plus simple dans ce cas est dutiliser un lien spcifique qui se chargera dedemander au navigateur du visiteur douvrir le client de messagerie par dfaut compor-tant, surprise, votre email en destinataire.

On utilise pour cela la commande mailto suivie de deux points et de votreadresse : Contactezmoi !.

Du reste, les proprits du lien sont les mmes quun lien normal. Je ne mtale pasplus sur le sujet, mais sachez quil est galement possible de pr-remplir le sujet ouautres informations. Prenez-garde cependant : laisser votre adresse email sur votresite 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 aunavigateur 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 porteutilise pour faire transiter des fichiers 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 !


23/25

5.4. CONCLUSION 19

On peut voir ici trois ports diffrents :

HTTP HyperText Transfert Protocol (cest le port web, regardez bien la barre dadressede votre navigateur).

FTP File Transfert Protocol. Cest le port qui permet de faire transiter des fichiers dunordinateur un serveur.

APT, ... correspond aux autres protocoles, que je ne peux pas tous numrer ici. APTen particulier est li au gestionnaire de paquets apt prsent sur les SystmesdExploitation drivs de Debian, une distribution de GNU/Linux. Ce nest paslobjet 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 do-cuments comme bien vous semble. Entrainez-vous, cest important de vous faire lesdents sur ce concept qui est la base du web. Si tout est clair, passez maintenant auchapitre suivant qui vous enseignera comment insrer des images !


24/25

Chapitre 6

Cest plus joli avec des images

Les liens, cest bien joli ; mais cest aussi rbarbatif, ennuyeux la longue (mais arvle trs utile, ne loubliez-pas !).

Je vous propose daigayer votre cration en y ajoutant... des images. Accrochez-vous sur ce chapitre, vous aurez appliquer tout ce que vous avez appris dans le cha-pitre suivant.

6.1 Diffrents types dimages

20


25/25

Table des matires

I Les bases, rien que les bases 1

1 HTML, quest-ce que cest ? 2

1.1 Un peu dhistoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Panoplie du dveloppeur 42.1 Des yeux pour voir . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Un diteur pour... euh... diter ? . . . . . . . . . . . . . . . . . . . . . 5

2.2.1 Microsoft Windows . . . . . . . . . . . . . . . . . . . . . . . 72.2.2 GNU/Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 lattaque ! 9

4 Structurer pour mieux rgner 104.1 Dcoupage dune page . . . . . . . . . . . . . . . . . . . . . . . . . 104.2 Des titres pour intituler . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.3 Dcoupage interne . . . . . . . . . . . . . . . . . . . . . . . . . . . 134.4 Mise en relief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144.5 Indice et exposant . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5 Nouer des liens 165.1 Un lien? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165.2 Relatif ou absolu ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

5.2.1 Lien relatif . . . . . . . . . . . . . . . . . . . . . . . . . . . 175.2.2 Lien absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

5.3 Cas particuliers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185.3.1 Une adresse email . . . . . . . . . . . . . . . . . . . . . . . 185.3.2 Liens spciaux . . . . . . . . . . . . . . . . . . . . . . . . . 18

5.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

6 Cest plus joli avec des images 206.1 Diffrents types dimages . . . . . . . . . . . . . . . . . . . . . . . . 20

21

Cours HTML5 & CSS3

Documents

Transcript of Cours HTML5 & CSS3