Apprenez a Creer Votre Site Web Avec Html5 Et Css3

Embed Size (px)

Citation preview

Apprenez crer votre site web avec HTML5 et CSS3Par M@teo21

www.siteduzero.com

Dernire mise jour le 17/10/2011

Sommaire

1/271

SommaireSommaire ........................................................................................................................................... 1 Informations sur le tutoriel ................................................................................................................... 3 Apprenez crer votre site web avec HTML5 et CSS3 ...................................................................... 5Informations sur le tutoriel ................................................................................................................................................. 5

Partie 0 : ............................................................................................................................................. 6Comment fait-on pour crer des sites web ? .................................................................................................................... 6Comment fonctionnent les sites web ? ....................................................................................................................................................................... 6 HTML et CSS : deux langages pour crer un site web ............................................................................................................................................. 10 Le rle de HTML et CSS ........................................................................................................................................................................................... 10 Les diffrentes versions de HTML et CSS ................................................................................................................................................................ 11 L'diteur de texte ....................................................................................................................................................................................................... 12 Sous Windows .......................................................................................................................................................................................................... 13 Sous Mac OS X ......................................................................................................................................................................................................... 15 Sous Linux ................................................................................................................................................................................................................ 15 Les navigateurs ......................................................................................................................................................................................................... 16 Pourquoi le navigateur est important ........................................................................................................................................................................ 17 Les navigateurs sur ordinateur .................................................................................................................................................................................. 17 Les navigateurs sur mobile ....................................................................................................................................................................................... 19

Votre premire page web en HTML ................................................................................................................................ 20Crer une page web avec l'diteur ............................................................................................................................................................................ Les balises et leurs attributs ...................................................................................................................................................................................... Les balises ................................................................................................................................................................................................................ Les attributs ............................................................................................................................................................................................................... Structure de base d'une page HTML5 ...................................................................................................................................................................... Le doctype ................................................................................................................................................................................................................. La balise ........................................................................................................................................................................................................ L'en-tte et le corps ......................................................................................................................................................................... Les commentaires ..................................................................................................................................................................................................... Insrer un commentaire ............................................................................................................................................................................................ Tout le monde peut voir vos commentaires... et tout votre code HTML ! .................................................................................................................. 20 26 26 27 28 29 29 29 32 32 32

Organiser son texte ......................................................................................................................................................... 34Les paragraphes ....................................................................................................................................................................................................... 34 Sauter une ligne ........................................................................................................................................................................................................ 35 Les titres .................................................................................................................................................................................................................... 37 La mise en valeur ...................................................................................................................................................................................................... 39 Mettre un peu en valeur ............................................................................................................................................................................................ 40 Mettre bien en valeur ................................................................................................................................................................................................. 40 Marquer le texte ........................................................................................................................................................................................................ 41 N'oubliez pas : HTML pour le fond, CSS pour la forme ............................................................................................................................................ 41 Les listes puces ...................................................................................................................................................................................................... 43 Liste non ordonne .................................................................................................................................................................................................... 43 Liste ordonne ........................................................................................................................................................................................................... 44

Crer des liens ................................................................................................................................................................ 44Un lien vers un autre site .......................................................................................................................................................................................... Un lien vers une autre page de son site .................................................................................................................................................................... Deux pages situes dans un mme dossier ............................................................................................................................................................. Deux pages situes dans des dossiers diffrents ..................................................................................................................................................... Rsum en images ................................................................................................................................................................................................... Un lien vers une ancre .............................................................................................................................................................................................. Lien vers une ancre situe dans une autre page ...................................................................................................................................................... Cas pratiques d'utilisation des liens .......................................................................................................................................................................... Un lien qui affiche une infobulle au survol ................................................................................................................................................................. Un lien qui ouvre une nouvelle fentre ...................................................................................................................................................................... Un lien pour envoyer un e-mail ................................................................................................................................................................................. Un lien qui de tlchargement d'un fichier ................................................................................................................................................................ 45 47 47 48 49 51 52 52 53 53 54 54

Les images ...................................................................................................................................................................... 54Les diffrents formats d'images ................................................................................................................................................................................ 56 Le JPEG .................................................................................................................................................................................................................... 56 Le PNG ...................................................................................................................................................................................................................... 57 Le GIF ....................................................................................................................................................................................................................... 58 Il existe un format adapt chaque image ............................................................................................................................................................... 58 Les erreurs viter ................................................................................................................................................................................................... 58 Insrer une image ..................................................................................................................................................................................................... 60 Insertion d'une image ................................................................................................................................................................................................ 60 Ajouter une infobulle ................................................................................................................................................................................................. 60 Miniature cliquable .................................................................................................................................................................................................... 61

www.siteduzero.com

Sommaire

2/271

Les figures ................................................................................................................................................................................................................. 62 Cration d'une figure ................................................................................................................................................................................................. 63 Bien comprendre le rle des figures ......................................................................................................................................................................... 64

Partie 1 : Les joies de la mise en forme avec CSS ........................................................................... 66Mettre en place le CSS ................................................................................................................................................... 66O mettre du CSS ? .................................................................................................................................................................................................. Rsum visuel ........................................................................................................................................................................................................... Appliquer un style : slectionner une balise .............................................................................................................................................................. Appliquer un style plusieurs balises ....................................................................................................................................................................... Des commentaires dans du CSS .............................................................................................................................................................................. Appliquer un style : class et id ................................................................................................................................................................................... Les balises universelles ............................................................................................................................................................................................ Taille du texte ............................................................................................................................................................................................................ Polices ....................................................................................................................................................................................................................... Alignement ................................................................................................................................................................................................................ Alignements simples ................................................................................................................................................................................................. L'indentation .............................................................................................................................................................................................................. 66 70 73 75 76 77 80 83 85 87 88 89

Formatage du texte en CSS (partie 1/2) ......................................................................................................................... 81

Formatage du texte en CSS (partie 2/2) ......................................................................................................................... 90Effets de style ............................................................................................................................................................................................................ 91 Mettre en italique ....................................................................................................................................................................................................... 91 Mettre en gras ........................................................................................................................................................................................................... 92 Les majuscules en CSS ............................................................................................................................................................................................ 92 Un peu de dco ? ...................................................................................................................................................................................................... 93 Les couleurs .............................................................................................................................................................................................................. 95 Indiquer le nom de la couleur .................................................................................................................................................................................... 95 La notation hexadcimale ......................................................................................................................................................................................... 96 La mthode RGB ....................................................................................................................................................................................................... 97 Et en Bonus Track... .................................................................................................................................................................................................. 98 Le fond ...................................................................................................................................................................................................................... 99 La couleur de fond ................................................................................................................................................................................................... 100 L'image de fond ....................................................................................................................................................................................................... 101

Les pseudo-formats ....................................................................................................................................................... 105Des liens sympas .................................................................................................................................................................................................... 106 Au passage de la souris .......................................................................................................................................................................................... 106 Au moment du clic ................................................................................................................................................................................................... 107 Lorsque le lien est slectionn ................................................................................................................................................................................ 108 Quand la page a dj t vue... .............................................................................................................................................................................. 109 Premire lettre et premire ligne ............................................................................................................................................................................. 110 La premire lettre .................................................................................................................................................................................................... 111 La premire ligne ..................................................................................................................................................................................................... 111 Avant / Aprs ........................................................................................................................................................................................................... 112 Une image au lieu du texte ? .................................................................................................................................................................................. 113

Partie 2 : XHTML & CSS, toujours plus forts ! ................................................................................. 114Les listes puces .......................................................................................................................................................... 115Diffrents types de listes (XHTML) ......................................................................................................................................................................... 116 Liste non ordonne .................................................................................................................................................................................................. 116 Liste ordonne ......................................................................................................................................................................................................... 117 Liste de dfinitions .................................................................................................................................................................................................. 117 Dcorez vos listes (CSS) ........................................................................................................................................................................................ 118 Retrait des listes ...................................................................................................................................................................................................... 119 Reprsentation de la puce ...................................................................................................................................................................................... 120 Changer l'image de la puce ..................................................................................................................................................................................... 123

Mise en bote (partie 1/2) .............................................................................................................................................. 124Block et Inline c'est pas pareil ! ............................................................................................................................................................................... 125 Quelques exemples ................................................................................................................................................................................................ 126 Les balises universelles .......................................................................................................................................................................................... 126 Respectez la smantique ! ...................................................................................................................................................................................... 127 La taille .................................................................................................................................................................................................................... 127 Minimum et maximum ............................................................................................................................................................................................. 129 "Couper" un block avec un overflow ........................................................................................................................................................................ 129 Les bordures ........................................................................................................................................................................................................... 131 En haut, droite, gauche, en bas... ..................................................................................................................................................................... 132 Ca marche aussi sur des balises inline ! ................................................................................................................................................................. 133 Les marges .............................................................................................................................................................................................................. 135 En haut, droite, gauche, en bas... Et on recommence ! .................................................................................................................................... 136 Centrer des blocks .................................................................................................................................................................................................. 138

Mise en bote (partie 2/2) .............................................................................................................................................. 138Transformer un inline en block (et vice-versa) ........................................................................................................................................................ Les flottants ............................................................................................................................................................................................................. Faire flotter une image ............................................................................................................................................................................................ Crer une lettrine (exercice) .................................................................................................................................................................................... Stopper un flottant ................................................................................................................................................................................................... 140 142 142 143 145

www.siteduzero.com

Informations sur le tutoriel

3/271146 147 149 150

Positionnement absolu, fixe et relatif ...................................................................................................................................................................... Le positionnement absolu ....................................................................................................................................................................................... Le positionnement fixe ............................................................................................................................................................................................ Le positionnement relatif .........................................................................................................................................................................................

Crons le design de votre site web ! ............................................................................................................................. 151Bon, par quoi on commence ? ................................................................................................................................................................................ 152 Design fixe ou extensible ? ..................................................................................................................................................................................... 153 Primo, le XHTML ..................................................................................................................................................................................................... 154 La structure gnrale .............................................................................................................................................................................................. 155 L'en-tte .................................................................................................................................................................................................................. 156 Menu et sous-menus ............................................................................................................................................................................................... 157 Le corps ................................................................................................................................................................................................................... 160 Allez le dernier : le pied de page ............................................................................................................................................................................. 160 Le code XHTML final ............................................................................................................................................................................................... 161 Secundo, le CSS ..................................................................................................................................................................................................... 164 Centrer le design ..................................................................................................................................................................................................... 164 L'en-tte .................................................................................................................................................................................................................. 165 Le menu .................................................................................................................................................................................................................. 166 Le corps ................................................................................................................................................................................................................... 169 Le pied de page (et on a fini !) ................................................................................................................................................................................. 173 Attendez, c'est pas fini ! .......................................................................................................................................................................................... 175 Rappel : insrer un CSS dans le XHTML ................................................................................................................................................................ 176 Changez le CSS, changez le design ! ..................................................................................................................................................................... 176 Laissez le visiteur choisir le design ......................................................................................................................................................................... 178

Les tableaux .................................................................................................................................................................. 179Un tableau simple ................................................................................................................................................................................................... 179 La ligne d'en-tte ..................................................................................................................................................................................................... 181 Titre du tableau ....................................................................................................................................................................................................... 183 Des tableaux plus labors ..................................................................................................................................................................................... 183 Diviser un gros tableau ........................................................................................................................................................................................... 184 3, 2, 1... Fusioooon ! ................................................................................................................................................................................................ 185 Et avec un peu de CSS... ........................................................................................................................................................................................ 188 Rien qu'avec des proprits CSS connues ............................................................................................................................................................. 188 Quelques nouvelles proprits CSS ....................................................................................................................................................................... 190

Les formulaires .............................................................................................................................................................. 192Crer un formulaire ................................................................................................................................................................................................. 192 Les zones de saisie ................................................................................................................................................................................................. 194 Zone de texte une ligne ........................................................................................................................................................................................ 195 Les labels ................................................................................................................................................................................................................ 195 Quelques attributs supplmentaires ........................................................................................................................................................................ 196 Zone de mot de passe ............................................................................................................................................................................................. 197 Zone de texte multiligne .......................................................................................................................................................................................... 197 Elments d'options .................................................................................................................................................................................................. 200 Les cases cocher ................................................................................................................................................................................................. 200 Les zones d'options ................................................................................................................................................................................................. 201 Les listes droulantes ............................................................................................................................................................................................. 202 Un formulaire accessible et design ? ...................................................................................................................................................................... 205 Dfinir un ordre de tabulation .................................................................................................................................................................................. 205 Dfinir des touches de raccourci ............................................................................................................................................................................. 206 Organiser le formulaire en plusieurs zones ............................................................................................................................................................. 207 Gouache time ! ........................................................................................................................................................................................................ 208 Y'a plus qu' appuyer sur le bouton ! ...................................................................................................................................................................... 209

Et maintenant, on fait quoi ? (Conclusion) .................................................................................................................... 211L'heure du bilan a sonn ......................................................................................................................................................................................... Rsumons ce qu'on a vu ......................................................................................................................................................................................... Ce qu'on n'a pas vu ................................................................................................................................................................................................. On va quand mme pas s'arrter l ? ..................................................................................................................................................................... Un langage client : le Javascript ............................................................................................................................................................................. Un langage serveur : le PHP ................................................................................................................................................................................... 213 213 214 215 216 217

Partie 3 : Annexes ........................................................................................................................... 219Envoyez votre site sur le web ....................................................................................................................................... 220Le nom de domaine ................................................................................................................................................................................................. 220 Rserver un nom de domaine ................................................................................................................................................................................. 221 L'hbergeur ............................................................................................................................................................................................................. 222 Le rle de l'hbergeur ............................................................................................................................................................................................. 224 Trouver un hbergeur .............................................................................................................................................................................................. 224 Commander un hbergement pour votre site web .................................................................................................................................................. 227 Utiliser un client FTP ............................................................................................................................................................................................... 228 Installer un client FTP ............................................................................................................................................................................................. 229 Configurer le client FTP ........................................................................................................................................................................................... 230 Transfrer les fichiers .............................................................................................................................................................................................. 231

Gagner de l'argent grce la publicit ......................................................................................................................... 232Qu'est-ce qu'une bonne publicit ? ......................................................................................................................................................................... 234 Principe n1 : ne pas gner la navigation ............................................................................................................................................................... 234

www.siteduzero.com

Informations sur le tutoriel

4/271

Principe n2 : une publicit cible .......................................................................................................................................................................... 235 Installation d'une bannire publicitaire .................................................................................................................................................................... 236 Les avantages d'AdFever ........................................................................................................................................................................................ 236 S'inscrire AdFever ................................................................................................................................................................................................ 236 L'interface d'AdFever ............................................................................................................................................................................................... 237 Le vocabulaire de la pub ......................................................................................................................................................................................... 239 Vos questions courantes ......................................................................................................................................................................................... 241

Le W3C et les standards du web .................................................................................................................................. 242L'histoire du web ..................................................................................................................................................................................................... 243 Du HTML au XHTML ............................................................................................................................................................................................... 245 Et le CSS ? .............................................................................................................................................................................................................. 245 Votre site est-il valide ? ........................................................................................................................................................................................... 245 Le validateur XHTML ............................................................................................................................................................................................... 246 Le validateur CSS ................................................................................................................................................................................................... 248

Liste des balises XHTML ............................................................................................................................................... 249Balises de premier niveau ....................................................................................................................................................................................... Le code minimal d'une page XHTML ...................................................................................................................................................................... Balises d'en-tte ...................................................................................................................................................................................................... Balises de structuration du texte ............................................................................................................................................................................. Balises de liste ........................................................................................................................................................................................................ Balises de tableau ................................................................................................................................................................................................... Balises de formulaire ............................................................................................................................................................................................... Balises gnriques .................................................................................................................................................................................................. 249 250 251 253 254 256 256 258

Liste des proprits CSS ............................................................................................................................................... 259Proprits de formatage de texte ............................................................................................................................................................................ 260 Police, taille et dcorations ..................................................................................................................................................................................... 260 Alignement .............................................................................................................................................................................................................. 261 Proprits de couleur et de fond ............................................................................................................................................................................. 262 Couleur .................................................................................................................................................................................................................... 262 Image de fond ......................................................................................................................................................................................................... 262 Proprits des botes .............................................................................................................................................................................................. 264 Dimensions ............................................................................................................................................................................................................. 264 Marges extrieures .................................................................................................................................................................................................. 264 Marges intrieures ................................................................................................................................................................................................... 265 Bordures .................................................................................................................................................................................................................. 265 Proprits de positionnement et d'affichage ........................................................................................................................................................... 266 Affichage ................................................................................................................................................................................................................. 267 Positionnement ....................................................................................................................................................................................................... 267 Proprits des listes ................................................................................................................................................................................................ 268 Proprits des tableaux .......................................................................................................................................................................................... 270 Autres proprits ..................................................................................................................................................................................................... 270

www.siteduzero.com

Apprenez crer votre site web avec HTML5 et CSS3

5/271

Apprenez crer votre site web avec HTML5 et CSS3Vous rvez d'apprendre crer des sites web ?(mais vous avez peur que ce soit compliqu car vous dbutez ?) Vous tes au bon endroit ! Ce cours est destin aux dbutants qui ne connaissent rien la cration de sites web et qui n'attendent qu'une chose : qu'on leur explique pas pas comment tout cela fonctionne avec des mots simples et des exemples concrets !

Informations sur le tutorielAuteur : Mathieu Nebra (M@teo21) Difficult : Temps d'tude estim : 20 jours Licence :

Nous dcouvrirons dans ce cours les clbres langages HTML5 et CSS3 que l'on utilise aujourd'hui pour concevoir des sites web. Mme si ces "langages" ne signifient pas encore grand chose pour vous, rassurez-vous : tout ce que vous avez besoin de savoir sera expliqu dans ce cours ! Vous dcouvrirez notamment comment : Insrer du texte, des images et des vidos Faire des liens entre vos pages Mettre en forme en modifiant la couleur, la taille, le fond, la police... Positionner les lments du site comme bon vous semble : en-tte, menus... ... et bien plus encore ! Vous n'avez qu'une chose faire : lisez les chapitres dans l'ordre et dcouvrez le monde fascinant de la cration de sites web avec HTML5 et CSS3 !

Aperu de sites web crs l'aide des langages HTML5 et CSS3 que nous allons dcouvrir

www.siteduzero.com

Partie 0 :

6/271

Partie 0 :

Comment fait-on pour crer des sites web ?Bonjour et bienvenue toutes et tous ! Voici donc le premier chapitre de ce cours pour dbutants, qui va vous apprendre crer votre site web ! Nous allons passer quelques temps ensemble, tout dpendra de la vitesse laquelle vous apprendrez. Si vous lisez ce cours rgulirement et une bonne vitesse, vous l'aurez termin en une deux semaines. Mais si vous avez besoin d'un peu plus de temps, ne vous inquitez pas : le principal est que vous y alliez votre rythme, en prenant du bon temps de prfrence. Je me doute que vous vous posez mille questions : Quels logiciels faut-il pour crer des sites web ? Que signifient les langages HTML5 et CSS3 ? Est-ce que tout cela n'est pas trop compliqu et plutt fait pour les programmeurs ? Je vous propose de commencer par la question la plus simple mais aussi la plus importante : comment fonctionnent les sites web ?

www.siteduzero.com

Partie 0 :

7/271

Comment fonctionnent les sites web ?Comment fonctionnent les sites web ?

Non, n'ayez pas peur de poser des questions mme si vous pensez qu'elles sont "btes". Il est trs important que nous en parlions un peu avant de nous lancer fond dans la cration de sites ! Je suis certain que vous consultez des sites web tous les jours. Pour cela, vous lancez un programme appel le navigateur web en cliquant sur l'une de ces icnes :

Les navigateurs web, des programmes qui permettent d'afficher des sites web Avec le navigateur, vous pouvez consultez n'importe quel site web. Voici par exemple un navigateur affichant le clbre site web Wikipdia :

Un site web : Wikipdia Je suis sr que vous avez l'habitude d'utiliser un navigateur web ! Aujourd'hui, tout le monde sait aller sur le Web... mais qui sait vraiment comment le Web fonctionne ? Comment crer des sites web comme celui-ci ? J'ai entendu parler de HTML, de CSS, est-ce que a a un rapport avec le fonctionnement des sites web ?

Tout fait ! Il s'agit de langages informatiques qui permettent de crer des sites web. Tous les sites web sont bass sur ces langages, ils sont incontournables et universels aujourd'hui. Ils sont la base mme du Web. Le langage HTML a t invent le premier par un certain Tim Berners-Lee en 1991... Tim Berners-Lee suit encore aujourd'hui avec attention l'volution du Web. Il a cr le World Wide Web Consortium (W3C)

www.siteduzero.com

Partie 0 :qui dfinit les nouvelles versions des langages. Il a par ailleurs cr plus rcemment la World Wide Web Foundation, qui analyse et suit l'volution du Web.

8/271

Tim Berners-Lee, inventeur du Web

De nombreuses personnes confondent ( tort) Internet et le Web. Il faut savoir que le Web fait partie d'Internet. Internet est donc un grand ensemble qui comprend, entre autres : le Web, les e-mails, la messagerie instantane, etc. Tim Berners-Lee n'est donc pas l'inventeur d'Internet, c'est "seulement" l'inventeur du Web.

Les langages HTML et CSS sont la base du fonctionnement de tous les sites web. Quand vous visitez un site avec votre navigateur, il faut savoir que derrire des rouages s'activent pour permettre au site web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqu en HTML et CSS pour savoir ce qu'il doit afficher :

www.siteduzero.com

Partie 0 :

9/271

HTML et CSS sont deux "langues" qu'il faut savoir parler pour crer des sites web. C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce que vous verrez s'afficher l'cran. Vous vous demandez srement pourquoi il faut connatre 2 langages pour crer des sites web ? Je vous rponds sans plus tarder !

www.siteduzero.com

Partie 0 :

10/271

HTML et CSS : deux langages pour crer un site webPour crer un site web, on doit donner des instructions l'ordinateur. Il ne suffit pas simplement de taper le texte qu'il y aura dans son site (comme on le ferait dans un traitement de texte Word par exemple), il faut aussi indiquer o placer ce texte, insrer des images, faire des liens entre les pages, etc.

Le rle de HTML et CSSPour expliquer l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est l que les choses se corsent, parce qu'il va falloir apprendre deux langages ! Pourquoi avoir cr deux langages ? Un seul aurait suffit non ?

Vous devez vous dire que manipuler deux langages va tre deux fois plus complexe et deux fois plus long apprendre... mais non ! Je vous rassure, s'il y a deux langages c'est au contraire pour faciliter les choses. Nous allons avoir affaire deux langages qui se compltent car ils ont des rles diffrents : HTML (HyperText Markup Language) : il a fait son apparition ds 1991 lors du lancement du Web. Son rle est de grer et organiser le contenu. C'est donc en HTML que vous crirez ce que vous souhaitez que la page affiche : du texte, des liens, des images... Vous direz par exemple : "Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image afficher, etc.". CSS (Cascading Style Sheets, aussi appeles Feuilles de style) : le rle du CSS est de grer l'apparence de la page web (agencement, positionnement, dcoration, couleur, taille du texte...). Ce langage est venu complter le HTML en 1996. Vous avez peut-tre aussi entendu parler du langage XHTML. Il s'agit d'une variante du HTML qui se veut plus rigoureuse et qui est donc un peu plus dlicate manipuler. Pour faire simple, le HTML est apparu le premier en 1991. Dbut 2000, le W3C a lanc le XHTML en indiquant que ce serait l'avenir... mais le XHTML n'a pas perc comme on l'esprait. Retour aux sources en 2009 : le W3C abandonne le XHTML et dcide de revenir au HTML pour le faire voluer. Il y a beaucoup de confusion autour de ces langages, alors qu'ils se ressemblent beaucoup. Aucun n'est vraiment meilleur que l'autre, il s'agit de deux faons de faire diffrentes. Dans ce cours, nous allons travailler sur la dernire version de HTML (HTML5) qui est aujourd'hui le langage d'avenir que tout le monde est incit utiliser.

Vous pouvez trs bien crer un site web uniquement en HTML, mais celui-ci ne sera pas trs beau : l'information apparatra "brute". C'est pour cela que le langage CSS vient toujours le complter. Pour vous donner une ide, voici ce que donne la mme page sans CSS puis avec le CSS :

www.siteduzero.com

Partie 0 :

11/271

La mme page sans CSS et avec CSS Le HTML dfinit le contenu (comme vous pouvez le voir, c'est brut de dcoffrage !). Le CSS permet, lui, d'arranger le contenu et de dfinir la prsentation : couleur, image de fond, marges, taille du texte... Comme vous vous en doutez, le CSS a besoin d'une page HTML pour fonctionner. C'est pour cela que nous allons d'abord apprendre les bases du HTML avant de nous occuper de la dcoration en CSS. Vos premires pages ne seront donc pas les plus esthtiques, mais qu'importe ! Ca ne durera pas longtemps.

Les diffrentes versions de HTML et CSSAu fil du temps, les langages HTML et CSS ont beaucoup volu. Dans la toute premire version de HTML (HTML 1.0) il n'tait mme pas possible d'afficher des images ! Voici un trs bref historique des langages pour votre culture gnrale.

Les versions de HTML

HTML 1 : c'est la toute premire version cre par Tim Berners-Lee en 1991. HTML 2 : la deuxime version du HTML apparat en 1994 et se finira en 1996 avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des prochaines version du HTML. Les rgles et le fonctionnement de cette version sont donnes par le W3C (tandis que la premire version a t cre par un seul homme). HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilits au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images etc... HTML 4 : il s'agit de la version la plus rpandue de HTML (plus prcisment il s'agit de HTML 4.01). Elle apparat

www.siteduzero.com

Partie 0 :

12/271

pour la premire fois en 1998, et propose l'utilisation de frames (qui dcoupent une page web en plusieurs parties), des tableaux plus complexes, des amliorations sur les formulaires etc... Mais surtout, cette version permet pour la premire fois l'utilisation de feuilles de style, notre fameux CSS ! HTML 5 : c'est LA dernire version. Encore assez peu rpandue, elle fait beaucoup parler d'elle car elle apporte de nombreuses amliorations comme la possibilit d'inclure facilement des vidos, un meilleur agencement du contenu, de nouvelles fonctionnalits pour les formulaires, etc. C'est cette version que nous allons dcouvrir ensemble.

Les versions de CSS

CSS 1 : ds 1996, la premire version du CSS est utilisable. Elle pose les bases de ce langage qui permet de prsenter sa page web, comme les couleurs, les marges, les polices de caractres etc... CSS 2 : apparue en 1999 puis complte ensuite par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut dsormais utiliser des techniques de positionnement trs prcises qui nous permettent d'afficher des lments o on le souhaite sur la page. CSS 3 : c'est la dernire version, qui apporte des fonctionnalits particulirement attendues comme les bordures arrondies, les dgrads, les ombres, etc.

Notez que HTML5 et CSS3 ne sont pas des versions encore totalement finalises par le W3C. Cependant, mme s'il peut y avoir des changements mineurs dans ces langages, je vous recommande chaudement de commencer ds aujourd'hui avec ces nouvelles versions. Leurs apports sont nombreux et valent vraiment le coup. D'ailleurs, de nombreux sites web professionnels se construisent aujourd'hui sur ces dernires versions.

www.siteduzero.com

Partie 0 :

13/271

L'diteur de texteDe quel logiciel je vais avoir besoin pour crer mon site web ? Vais-je devoir casser ma tirelire pour acheter un logiciel trs complexe que je vais mettre des mois comprendre ?

Il existe effectivement de nombreux logiciels ddis la cration de sites web. Mais, je vous rassure, vous n'aurez pas dbourser un seul centime. Pourquoi aller chercher un logiciel payant et compliqu, alors que vous avez dj tout ce qu'il faut chez vous ? Eh oui, accrochez-vous bien parce qu'il suffit de... Bloc-Notes !

Le logiciel Bloc-Notes Incroyable mais vrai : on peut tout fait crer un site web juste avec Bloc-Notes, le logiciel d'dition de texte intgr par dfaut sur Windows. D'ailleurs, j'avoue, c'est comme cela que j'ai commenc moi-mme il y a quelques annes. Il y a cependant des logiciels plus puissants aujourd'hui et personne n'utilise vraiment Bloc-Notes. On peut classer ces logiciels de cration de site web en deux catgories : Les WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que Vous Obtenez) : ce sont des programmes qui se veulent trs faciles d'emploi, ils permettent de crer des sites web sans programmer. Parmi les plus connus d'entre eux : Nvu, Microsoft Expression Web, Dreamweaver... et mme Word ! Leur principal dfaut est la qualit du code HTML et CSS qui est automatiquement gnr par ces outils, souvent d'assez mauvaise qualit. Un bon crateur de site web doit tt ou tard connatre HTML et CSS, c'est pourquoi je ne recommande pas l'usage de ces outils. Les diteurs de texte : ce sont des programmes ddis l'criture de code. On peut en gnral les utiliser pour de multiples langages, pas seulement HTML et CSS. Ils se rvlent tre de puissants allis pour les crateurs de sites web !

Vous l'aurez compris, je vais vous inviter utiliser un diteur de texte dans ce cours. Voici quelques conseils, selon que vous tes sous Windows, Mac OS X ou Linux.

Sous Windowswww.siteduzero.com

Partie 0 :

14/271

Il existe une grande quantit d'diteurs de texte, je ne pourrai pas tous vous les prsenter. Nanmoins, je vous invite vous pencher sur Notepad++, l'un des plus utiliss d'entre eux sous Windows. Ce logiciel est simple, en franais et gratuit.

Prenez la version Installer et non le Zip Voici quoi ressemble Notepad++ lorsque vous le lancez :

Site web de Notepad++

Je vous conseille de faire la manipulation suivante : allez dans le menu "Langage" / "H" / "HTML". Cela permettra au logiciel de savoir que l'on va taper du HTML. Lorsque vous utiliserez le logiciel, il colorera votre code ce qui vous permettra de vous reprer plus facilement :

www.siteduzero.com

Partie 0 :

15/271

Pour l'instant, ne vous proccupez pas de savoir ce que signifie tout ce charabia que vous pouvez voir. Je souhaitais simplement vous donner un aperu des possibilits du logiciel.

D'autres diteurs disponibles sous Windows existent. Si Notepad++ ne vous convient pas, vous pouvez essayer : jEdit PSpad ConTEXT ... et bien d'autres si vous recherchez "Editeur de texte" sur le Web.

Sous Mac OS XVous pouvez essayer l'un des logiciels suivants : jEdit Smultron TextWrangler

Sous LinuxLes diteurs de texte sont lgion sous Linux. Certains d'entre eux sont installs par dfaut, d'autres peuvent tre tlchargs facilement avec le centre de tlchargement (sous Ubuntu notamment) ou via des commandes comme apt-get et aptitude . Voici quelques logiciels que vous pouvez tester :

www.siteduzero.com

Partie 0 :aptitude . Voici quelques logiciels que vous pouvez tester : gEdit Kate vim Emacs jEdit

16/271

www.siteduzero.com

Partie 0 :

17/271

Les navigateursPourquoi le navigateur est importantLe navigateur est le programme qui nous permet de voir les sites web. Si vous lisez ces lignes, c'est donc que votre navigateur est ouvert et que vous l'avez sous les yeux. Comme je vous l'ai expliqu plus tt, le travail du navigateur est de lire le code HTML et CSS pour afficher un rsultat visuel l'cran. Si votre code CSS dit "Les titres sont en rouge", alors le navigateur affichera les titres en rouge. Le rle du navigateur est donc essentiel ! On ne dirait pas, mais un navigateur est un programme extrmement complexe. Comprendre le code HTML et CSS n'est en effet pas une mince affaire. Le principal problme, vous vous en rendrez vite compte, c'est que les navigateurs n'affichent pas tous les sites exactement de la mme faon ! Il faudra vous y faire et prendre l'habitude de vrifier rgulirement que votre site fonctionne correctement sur la plupart des navigateurs.

Les navigateurs sur ordinateurTlchargez les navigateursIl existe de nombreux navigateurs diffrents. Voici les principaux connatre : Navigateur Google Chrome OS Windows Mac Linux Tlchargement Commentaires Le navigateur de Google, simple d'emploi et trs rapide. C'est le navigateur que j'utilise au quotidien.

Tlchargement

Mozilla Firefox

Windows Mac Tlchargement Linux

Le navigateur de la fondation Mozilla, clbre et rput. Je l'utilise frquemment pour tester mes sites web.

Internet Explorer Windows

Tlchargement Le navigateur de Microsoft, qui quipe tous les PC Windows. (Dj install sur Windows) Je l'utilise frquemment pour tester mes sites web.

Safari

Tlchargement Windows (Dj install sur Mac OS Mac X) Windows Mac Tlchargement Linux

Le navigateur d'Apple, qui quipe tous les Mac.

Opera

L'ternel outsider. Il est moins utilis mais propose de nombreuses fonctionnalits.

Il est conseill d'installer plusieurs navigateurs sur son ordinateur pour s'assurer que son site fonctionne correctement sur chacun d'eux. De manire gnrale, je conseille de tester son site web rgulirement au moins sur Google Chrome, Mozilla Firefox et Internet Explorer. Notez que Safari et Google Chrome affichent les sites web quasiment de la mme faon. Il n'est pas forcment ncessaire de tester son site sur Safari et Google Chrome, mme si c'est toujours plus sr.

www.siteduzero.com

Partie 0 :Voici un aperu de quelques-uns de ces principaux navigateurs sur la page d'accueil de Google :

18/271

Comprendre les diffrences entre navigateursComme je vous le disais plus tt, les navigateurs n'affichent pas toujours les sites web exactement de la mme faon. Pourquoi ? Cela est d au fait que les navigateurs ne connaissent pas toujours les dernires fonctionnalits de HTML et CSS. Par exemple, Internet Explorer a longtemps t en retard sur certaines fonctionnalits CSS (et paradoxalement, il a aussi t en avance sur quelques autres). Pour compliquer les choses, plusieurs versions des navigateurs co-existent : Firefox 2, Firefox 3.5, Firefox 3.6, Firefox 4 Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9 Chrome 8, Chrome 9, Chrome 10 ... Chaque version prend en charge de nouvelles fonctionnalits, mais si les utilisateurs ne mettent pas jour leurs navigateurs cela devient un problme pour les webmasters comme vous qui crez des sites web. Chrome a rsolu en grande partie le problme en mettant en place des mises jour automatiques, sans intervention de l'utilisateur. Firefox a des utilisateurs qui ne pensent pas se mettre jour, et Internet Explorer a du mal inciter se mettre jour car les dernires versions ncessitent aussi de mettre jour Windows (Internet Explorer 9 n'est pas disponible pour Windows XP par exemple). Des sites comme normansblog.de tiennent notamment jour une liste des fonctionnalits CSS supportes par les diffrentes versions de chaque navigateur :

www.siteduzero.com

Partie 0 :

19/271

Liste des fonctionnalits supportes par les navigateurs Comme vous le voyez, c'est... compliqu. Le plus gros des soucis viendra le plus souvent des anciennes versions d'Internet Explorer (IE6, IE7, IE8). Il faudra vrifier sous ces anciennes versions comment son site s'affiche... Attendez-vous des surprises ! Vrifiez surtout que votre site s'affiche sans erreurs, sans chercher obtenir exactement le mme rendu sur les vieilles versions de ces navigateurs. Il existe un programme appel IETester sous Windows. Il permet de tester son site sous diffrentes versions d'Internet Explorer. A noter que ce programme est relativement instable (il plante souvent) mais il a le mrite d'exister.

Les navigateurs sur mobileEn plus des navigateurs que je vous ai prsents, il faut savoir qu'il existe des variantes de ces navigateurs que l'on retrouve sur les tlphones portables, en particulier les smartphones. De plus en plus de personnes consultent aujourd'hui des sites web sur leur portable, il faut donc connatre un minimum le fonctionnement des navigateurs des tlphones.

www.siteduzero.com

Partie 0 :En fait, vous n'allez pas tre dpayss : la plupart des navigateurs sur smartphones sont les mmes que sur ordinateur, dans une version plus lgre adapte aux mobiles. Tout dpend du type de tlphone. iPhone : sur l'iPhone d'Apple, le navigateur utilis est Safari Mobile. Il s'agit d'une version light mais nanmoins trs complte de Safari pour ordinateur. Android : les portables sous Android bnficient du navigateur Chrome Mobile. L encore, il s'agit d'une version adapte aux mobiles. Windows Phone : sous Windows Phone, on retrouve... Internet Explorer Mobile ! Le principe est le mme que pour les prcdents navigateurs : il s'agit d'une version ddie aux mobiles. Blackberry : les Blackberry font exception, car ils ont leur propre navigateur (il n'existe pas d'quivalent sur ordinateur). Nanmoins, les versions les plus rcentes de ce navigateur se basent sur un noyau commun Safari et Chrome (il s'agit du moteur de rendu Webkit). Par consquent, l'affichage est en gnral proche de Safari et Chrome.

20/271

Safari Mobile sur iPhone

Les navigateurs pour mobiles supportent la plupart des dernires fonctionnalits de HTML et CSS. De plus, le systme de mise jour automatis des mobiles nous garantit que les utilisateurs auront le plus souvent les dernires versions. Sachez nanmoins que des diffrences existent entre ces diffrents navigateurs mobiles et qu'il est conseill de tester son site aussi sur ces appareils ! En particulier, l'cran tant beaucoup moins large, il faudra vrifier que votre site s'affiche correctement. Les tablettes tactiles sont quipes des mmes navigateurs, l'cran tant simplement plus large. Ainsi, l'iPad est quip de Safari Mobile par exemple. Ainsi se termine notre premier chapitre Nous avons fait tous les prparatifs ncessaires : nous sommes maintenant prts rdiger notre premire page en HTML dans le prochain chapitre !

Votre premire page web en HTMLCa y est, vous avez install tous les logiciels ? Vous devriez maintenant avoir un diteur de texte pour crer votre site (comme Notepad++) et plusieurs navigateurs pour le tester (Mozilla Firefox, Google Chrome, Internet Explorer...). Dans ce chapitre, nous allons commencer pratiquer ! Nous allons dcouvrir les bases du langage HTML et enregistrer notre toute premire page web ! Alors oui, bien sr, ne vous attendez pas encore raliser une page web exceptionnelle ds ce second chapitre, mais patience... a viendra !

www.siteduzero.com

Partie 0 :

21/271

Crer une page web avec l'diteurAllez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons crer notre site dans un diteur de texte. Vous avez d en installer suite mes conseils dans le premier chapitre : qu'il s'appelle Notepad++, PSpad, jEdit, vim, TextWrangler... peu importe. Ces logiciels ont un but trs simple : vous permettre d'crire du texte ! Dans la suite de ce cours, je travaillerai sous Notepad++. Je vais donc l'ouvrir :

Bon, qu'est-ce qu'on fait maintenant ? Qu'est-ce qu'on crit sur cette feuille blanche ? On va faire un petit essai. Je vous invite crire ce qui vous passe par la tte :

www.siteduzero.com

Partie 0 :

22/271

Vous pouvez crire les mmes phrases que moi ou ce que vous voulez ; le but est d'crire quelque chose. Maintenant, enregistrons ce fichier. Pour a, c'est trs simple : comme dans tous les programmes, vous avez un menu Fichier / Enregistrer. Une bote de dialogue vous demande o enregistrer le fichier et sous quel nom. Enregistrez-le o vous voulez. Donnez au fichier le nom que vous voulez, en terminant par .html, par exemple : test.html.

www.siteduzero.com

Partie 0 :

23/271

Je vous recommande de crer un nouveau dossier dans vos documents qui contiendra les fichiers de votre site. Pour ma part j'ai cr un dossier test dans lequel j'ai mis mon fichier test.html.

Ouvrez maintenant l'explorateur de fichiers dans le dossier o vous avez enregistr votre page. Vous y verrez le fichier que vous venez de crer :

www.siteduzero.com

Partie 0 :

24/271

L'apparence du fichier dpend de votre navigateur web par dfaut. Ici, l'icne est celle de Google Chrome, mon navigateur par dfaut, mais le fichier a peut-tre une autre icne chez vous. Voici par exemple l'icne qui apparat selon que votre navigateur principal est Firefox ou Internet Explorer :

Double-cliquez simplement sur ce fichier et... votre navigateur s'ouvre en affichant le texte que vous avez crit !

www.siteduzero.com

Partie 0 :

25/271

Ca ne marche pas bien on dirait ! Tout le texte s'affiche sur la mme ligne alors qu'on avait crit 2 lignes de texte diffrentes !?

En effet, bien vu ! Le texte s'affiche sur la mme ligne alors qu'on avait demand l'crire sur 2 lignes diffrentes. Que se passe-t-il ? En fait, pour crer une page web il ne suffit pas simplement de taper du texte comme on vient de le faire. En plus de ce texte, il faut aussi crire ce qu'on appelle des balises, qui vont donner des instructions l'ordinateur comme "aller la ligne", "afficher une image", etc.

www.siteduzero.com

Partie 0 :

26/271

Les balises et leurs attributsBon, tout a tait trop facile. Evidemment, il a fallu que ces satans informaticiens s'en mlent et compliquent les choses. Il ne suffit pas "simplement" d'crire du texte dans l'diteur, il faut aussi donner des instructions l'ordinateur. En HTML, on passe pour cela par des balises.

Les balisesLes pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles l'cran pour vos visiteurs, mais elles permettent l'ordinateur de comprendre ce qu'il doit afficher. Les balises se reprent facilement. Elles sont entoures de "chevrons", c'est--dire des symboles < et >, comme ceci : quoi est-ce qu'elles servent ? Elles indiquent la nature du texte autour d'elles. Elles veulent dire par exemple : "Ceci est le titre de la page", "Ceci est une image", "Ceci est un paragraphe de texte", etc. On distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises en pairesElles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici quoi elles ressemblent : Code : HTML Ceci est un titre

On distingue une balise ouvrante () et une balise fermante () qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises... n'est pas un titre. Code : HTML Ceci n'est pas un titre Ceci est un titre Ceci n'est pas un titre

Les balises orphelinesCe sont des balises qui servent le plus souvent insrer un lment un endroit prcis (par exemple une image). Il n'est pas ncessaire de dlimiter le dbut et la fin de l'image, on veut juste dire l'ordinateur "Insre une image ici". Une balise orpheline s'crit comme ceci : Code : HTML

Notez que le / de fin n'est pas obligatoire. On pourrait crire seulement . Nanmoins, pour ne pas confondre avec le premier type de balise, les webmasters recommandent de rajouter ce / (slash) la fin de la balise. Vous me verrez donc mettre un / aux balises orphelines et je vous recommande de faire de mme, c'est une bonne pratique.

www.siteduzero.com

Partie 0 :

27/271

Les attributsLes attributs sont un peu les options des balises. Ils viennent les complter pour donner des informations supplmentaires. L'attribut se place aprs le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci : Code : HTML

A quoi a sert ? Prenons la balise que nous venons de voir. Seule, elle ne sert pas grand chose. On pourrait rajouter un attribut qui indique le nom de l'image afficher : Code : HTML

L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg. Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969 : Code : HTML C'est un petit pas pour l'homme un bond de gant pour lhumanit.

Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en anglais (eh oui !), nous allons les dcouvrir dans la suite de ce cours.

www.siteduzero.com

Partie 0 :

28/271

Structure de base d'une page HTML5Reprenons notre diteur de texte (dans mon cas Notepad++). Je vous invite copier-coller le code source ci-dessus dans Notepad++. Ce code correspond la base d'une page web en HTML5 : Code : HTML Titre

J'ai mis des espaces au dbut de certaines lignes pour "dcaler" les balises. Ce n'est pas obligatoire et a n'a aucun impact sur l'affichage de la page, mais a permet de rendre le code source plus lisible. On appelle a l'indentation. Dans votre diteur, il suffit d'appuyer sur la touche Tab pour avoir le mme rsultat.

Copi dans Notepad++, cela donne :

Vous noterez que les balises s'ouvrent et se ferment dans un ordre prcis. Par exemple, la balise est la premire que l'on ouvre, et c'est aussi la dernire que l'on ferme (tout la fin du code, avec ). Les balises doivent tre fermes dans

www.siteduzero.com

Partie 0 :le sens inverse de leur ouverture. Un exemple :

29/271

: correct. Une balise qui est ouverte l'intrieur d'une autre doit aussi tre ferme l'intrieur. : incorrect, les balises s'entremlent.

Euh, on pourrait avoir des explications sur toutes les balises que l'on vient de copier dans notre diteur m'sieur ?

Bien sr, c'est demand si gentiment. Ne prenez pas peur en voyant toutes ces balises d'un coup, je vais vous expliquer leur rle !

Le doctypeCode : HTML

La toute premire ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considrer que c'est un peu l'exception qui confirme la rgle (a commence bien ). Cette ligne du doctype tait autrefois incroyablement complexe. Il tait impossible de la retenir de tte. Pour XHTML 1.0, il fallait crire : Pour HTML5, il a t dcid de la simplifier, pour le plus grand bonheur des webmasters. Quand vous voyez une balise doctype courte (), cela signifie que la page est crite en HTML5.

La balise Code : HTML

C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante se trouve tout la fin du code !

L'en-tte et le corps Une page web est constitue de 2 parties :

www.siteduzero.com

Partie 0 :

30/271

L'en-tte : cette section donne quelques informations gnrales sur la page, comme son titre, l'encodage (pour la gestion des caractres spciaux), etc. Cette section est gnralement assez courte. Les informations que l'en-tte contient ne sont pas affiches sur la page, ce sont simplement des informations gnrales destination de l'ordinateur. Elles sont cependant trs importantes ! Le corps : c'est l que se trouve la partie principale de la page. Tout ce que nous crirons ici sera affich l'cran. C'est l'intrieur du corps que nous crirons la majeure partie de notre code.

Pour le moment, le corps est vide (nous y reviendrons plus loin). Intressons-nous par contre aux deux balises contenues dans l'en-tte...

L'encodage (charset)Code : HTML

Cette balise indique l'encodage utilis dans votre fichier .html. Sans rentrer dans les dtails, car cela pourrait vite devenir compliqu, l'encodage indique la faon dont le fichier est enregistr. C'est lui qui dtermine comment les caractres spciaux vont s'afficher (accents, idogrammes chinois et japonais, symboles arabes, etc.). Il y a plusieurs techniques d'encodages aux noms bizarres utilises en fonction des langues : ISO-8859-1, OEM 775, Windows1253... Un seul cependant devrait tre utilis aujourd'hui autant que possible : UTF-8. Cette mthode d'encodage permet d'afficher sans aucun problme pratiquement tous les symboles de toutes les langues de notre plante ! C'est pour cela que j'ai indiqu utf-8 dans cette balise. Il faut aussi que votre fichier soit bien enregistr en UTF-8. C'est le cas le plus souvent sous Linux par dfaut, mais sous Windows il faut gnralement le dire au logiciel. Sous Notepad++, allez dans le menu Encodage > Encoder en UTF-8 (sans BOM) pour que votre fichier soit enregistr en UTF-8 ds le dbut. Cela ne s'applique qu'au fichier actuellement ouvert. Pour ne pas avoir le faire pour chaque nouveau fichier, je vous conseille d'aller dans le menu Paramtrage > Prfrences, onglet Nouveau document/Dossier. Slectionnez UTF-8 sans BOM dans la liste.

Si vous avez un problme d'affichage des accents plus tard sur votre page web, c'est qu'il y a un problme avec l'encodage. Vrifiez que la balise indique bien UTF-8 et que votre fichier est enregistr en UTF-8 (votre diteur de texte est capable de vous le dire, Notepad++ le fait dans le menu Encodage).

Le titre principal de la pageCode : HTML

C'est le titre de votre page, probablement l'lment le plus important ! Toute page doit avoir un titre qui dcrit ce qu'elle

www.siteduzero.com

Partie 0 :contient. Il est conseill que le titre soit assez court (moins de 100 caractres en gnral).

31/271

Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'affiche dans l'onglet :

Il faut savoir que le titre apparat aussi dans les rsultats de recherche, comme ici sur Google :

Autant vous dire que bien choisir son titre est important !

www.siteduzero.com

Partie 0 :

32/271

Les commentairesNous avons appris crer notre premire vraie page HTML dans ce chapitre. Avant de terminer, j'aimerais vous prsenter le principe des commentaires. Un commentaire en HTML est un texte qui sert simplement de mmo. Il n'est pas affich, il n'est pas lu par l'ordinateur, a ne change rien l'affichage de la page. Bref, a ne sert rien ?

Eh bien si ! Ca sert pour vous et les personnes qui liront le code source de votre page. Vous pouvez utiliser les commentaires pour laisser des indications sur le fonctionnement de votre page. Quel intrt ? Cela vous permettra de vous souvenir comment fonctionne votre page si vous revenez sur votre code source aprs un long moment d'absence. Ne rigolez pas, a arrive tous les webmasters.

Insrer un commentaireUn commentaire est une balise HTML avec une forme bien spciale : Code : HTML

Vous pouvez le mettre o vous voulez au sein de votre code source : il n'a aucun impact sur votre page, mais vous pouvez vous en servir pour vous aider vous reprer dans votre code source (surtout s'il est long). Code : HTML Titre

Tout le monde peut voir vos commentaires... et tout votre code HTML !Terminons par une remarque importante : tout le monde peut voir le code HTML de votre page une fois celle-ci mise en ligne sur le Web. Il suffit de faire un clic droit sur la page et de slectionner "Afficher le code source de la page" (l'intitul peut changer selon votre navigateur) :

www.siteduzero.com

Partie 0 :

33/271

Le code source s'affiche alors :

Vous pouvez tester sur n'importe quel site web, a marche ! Garanti 100%. Cela s'explique assez facilement : le navigateur doit obtenir le code HTML pour savoir ce qu'il faut afficher. Le code HTML de tous les sites est donc public. La morale de l'histoire ? Tout le monde pourra voir votre code HTML et vous ne pouvez pas l'empcher. Par consquent, ne mettez pas d'informations sensibles comme des mots de passe dans les commentaires... et soignez votre code source, car je pourrai venir vrifier si vous avez bien suivi mon tutoriel la lettre ! Ne prenez pas peur en regardant le code de certains sites web s'il vous parat long ou ne pas respecter les mmes rgles que celles que je vous prsente dans ce tutoriel. Tous les sites ne sont pas crits en HTML5 (loin de l), et parfois certains webmasters crivent trs mal leur code, ce ne sont pas toujours des exemples suivre ! Nous avons cr une toute premire page web, mais pour le moment celle-ci est blanche. Dans le prochain chapitre, nous allons commencer rdiger le