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

www.siteduzero.com

Dernire mise jour le 11/01/2012

Sommaire

1/279

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

Partie 1 : Les bases de HTML5 ........................................................................................................... 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 ....................................................................................................................................................................................... 21

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

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

Crer des liens ................................................................................................................................................................ 46Un 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 pour tlcharger un fichier ............................................................................................................................................................................ 46 48 48 49 50 52 53 53 54 54 55 55

Les images ...................................................................................................................................................................... 55Les diffrents formats d'images ................................................................................................................................................................................ 55 Le JPEG .................................................................................................................................................................................................................... 56 Le PNG ...................................................................................................................................................................................................................... 57 Le GIF ....................................................................................................................................................................................................................... 57 Il existe un format adapt chaque image ............................................................................................................................................................... 58 Les erreurs viter ................................................................................................................................................................................................... 58 Insrer une image ..................................................................................................................................................................................................... 59 Insertion d'une image ................................................................................................................................................................................................ 59 Ajouter une infobulle ................................................................................................................................................................................................. 59 Miniature cliquable .................................................................................................................................................................................................... 60 Les figures ................................................................................................................................................................................................................. 61 Cration d'une figure ................................................................................................................................................................................................. 61 Bien comprendre le rle des figures ......................................................................................................................................................................... 62

Partie 2 : Les joies de la mise en forme avec CSS ........................................................................... 64Mettre en place le CSS ................................................................................................................................................... 64La petite histoire du CSS .......................................................................................................................................................................................... 64 Petit rappel : quoi sert CSS ? ................................................................................................................................................................................. 65 CSS : des dbuts difficiles ........................................................................................................................................................................................ 65

www.siteduzero.com

Sommaire

2/27966 68 68 71 71 72 73 76 77 79 81 83 83 83 86

CSS : le support des navigateurs .............................................................................................................................................................................. O crit-on le CSS ? ................................................................................................................................................................................................. Dans un fichier .css (recommand) .......................................................................................................................................................................... Dans l'en-tte du fichier HTML ..................................................................................................................................................................... Directement dans les balises (non recommand) ..................................................................................................................................................... Quelle mthode choisir ? .......................................................................................................................................................................................... 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 ............................................................................................................................................................................................ Appliquer un style : les slecteurs avancs .............................................................................................................................................................. Les slecteurs que vous connaissez dj ................................................................................................................................................................. Les slecteurs avancs ............................................................................................................................................................................................. Dautres slecteurs existent ! ....................................................................................................................................................................................

Formatage du texte ......................................................................................................................................................... 86La taille ...................................................................................................................................................................................................................... 87 Une taille absolue ...................................................................................................................................................................................................... 87 Une valeur relative .................................................................................................................................................................................................... 88 La police .................................................................................................................................................................................................................... 90 Modifier la police utilise ........................................................................................................................................................................................... 90 Utiliser une police personnalise avec @font-face ................................................................................................................................................... 91 Italique, gras, soulign... ........................................................................................................................................................................................... 94 Mettre en italique ....................................................................................................................................................................................................... 95 Mettre en gras ........................................................................................................................................................................................................... 95 Soulignement et autres dcorations .......................................................................................................................................................................... 96 L'alignement .............................................................................................................................................................................................................. 98 Les flottants ............................................................................................................................................................................................................. 100 Faire flotter une image ............................................................................................................................................................................................ 100 Stopper un flottant ................................................................................................................................................................................................... 101

La couleur et le fond ...................................................................................................................................................... 102Couleur du texte ...................................................................................................................................................................................................... 102 Indiquer le nom de la couleur .................................................................................................................................................................................. 103 La notation hexadcimale ....................................................................................................................................................................................... 104 La mthode RGB ..................................................................................................................................................................................................... 105 Et en Bonus Track... ................................................................................................................................................................................................ 106 Couleur de fond ....................................................................................................................................................................................................... 107 Le CSS et l'hritage ................................................................................................................................................................................................ 109 Exemple d'hritage avec la balise .............................................................................................................................................................. 109 Images de fond ........................................................................................................................................................................................................ 111 Appliquer une image de fond ................................................................................................................................................................................... 111 Options disponibles pour l'image de fond ................................................................................................................................................................ 112 Combiner les proprits .......................................................................................................................................................................................... 114 Plusieurs images de fond ........................................................................................................................................................................................ 114 La transparence ....................................................................................................................................................................................................... 115 La proprit opacity ................................................................................................................................................................................................. 116 La notation RGBa .................................................................................................................................................................................................... 117

Les bordures et les ombres ........................................................................................................................................... 118Bordures standard ................................................................................................................................................................................................... 119 En haut, droite, gauche, en bas... ...................................................................................................................................................................... 119 Bordures arrondies .................................................................................................................................................................................................. 121 Les ombres ............................................................................................................................................................................................................. 124 box-shadow : les ombres des botes ....................................................................................................................................................................... 124 text-shadow : l'ombre du texte ................................................................................................................................................................................ 126

Cration d'apparences dynamiques .............................................................................................................................. 127Au survol ................................................................................................................................................................................................................. 128 Au clic et lors de la slection ................................................................................................................................................................................... 130 :active : au moment du clic ...................................................................................................................................................................................... 131 :focus : lorsque l'lment est slectionn ................................................................................................................................................................ 131 Lorsque le lien a dj t visit ............................................................................................................................................................................... 131

Partie 3 : Mise en page du site ........................................................................................................ 133Structurer sa page ......................................................................................................................................................... 133Les balises structurantes de HTML5 ....................................................................................................................................................................... : l'en-tte ................................................................................................................................................................................................. : le pied de page ....................................................................................................................................................................................... : principaux liens de navigation .................................................................................................................................................................... : une section de page ............................................................................................................................................................................. : informations complmentaires ................................................................................................................................................................ : un article indpendant ............................................................................................................................................................................ Rsum ................................................................................................................................................................................................................... Exemple concret d'utilisation des balises ................................................................................................................................................................ Assurer la compatibilit avec IE .............................................................................................................................................................................. Les balises de type block et inline ........................................................................................................................................................................... Quelques exemples ................................................................................................................................................................................................ Les balises universelles .......................................................................................................................................................................................... Respectez la smantique ! ...................................................................................................................................................................................... Les dimensions ....................................................................................................................................................................................................... Minimum et maximum ............................................................................................................................................................................................. Les marges ............................................................................................................................................................................................................. En haut, droite, gauche, en bas... Et on recommence ! .................................................................................................................................... Centrer des blocs .................................................................................................................................................................................................... 133 134 134 135 136 137 138 139 140 142 144 145 146 146 146 148 150 153 154

Le modle de bote ........................................................................................................................................................ 144

www.siteduzero.com

Informations sur le tutoriel

3/279

Quand a dpasse... ............................................................................................................................................................................................... 156 overflow : couper un bloc ........................................................................................................................................................................................ 156 word-wrap : couper les textes trop larges ............................................................................................................................................................... 158

Le positionnement en CSS ........................................................................................................................................... 159Le positionnement flottant ....................................................................................................................................................................................... Transformez vos lments avec display ................................................................................................................................................................. Le positionnement inline-block ................................................................................................................................................................................ inline-block et compatibilit Internet Explorer .......................................................................................................................................................... Les positionnements absolu, fixe et relatif .............................................................................................................................................................. Le positionnement absolu ....................................................................................................................................................................................... Le positionnement fixe ............................................................................................................................................................................................ Le positionnement relatif ......................................................................................................................................................................................... 161 165 165 168 169 170 173 174

TP : cration d'un site pas pas ................................................................................................................................... 175Maquettage du design ............................................................................................................................................................................................. 176 Organiser le contenu en HTML ............................................................................................................................................................................... 178 Mettre en forme en CSS .......................................................................................................................................................................................... 184 Les polices personnalises ..................................................................................................................................................................................... 184 Dfinition des styles principaux ............................................................................................................................................................................... 185 En-tte et liens de navigation .................................................................................................................................................................................. 186 La bannire ............................................................................................................................................................................................................. 188 Le corps ................................................................................................................................................................................................................... 190 Le pied de page ....................................................................................................................................................................................................... 192 Assurer la compatibilit avec IE .............................................................................................................................................................................. 195 Faire fonctionner les balises structurantes de HTML5 ............................................................................................................................................ 197 Rgler le positionnement inline-block ..................................................................................................................................................................... 197 Vrifier la validit ..................................................................................................................................................................................................... 199 Le code final ............................................................................................................................................................................................................ 200

Partie 4 : Fonctionnalits volues ................................................................................................. 202Les tableaux .................................................................................................................................................................. 202Un tableau simple ................................................................................................................................................................................................... 202 La ligne d'en-tte ..................................................................................................................................................................................................... 205 Titre du tableau ....................................................................................................................................................................................................... 206 Un tableau structur ................................................................................................................................................................................................ 208 Diviser un gros tableau ........................................................................................................................................................................................... 208 3, 2, 1... Fusioooon ! ................................................................................................................................................................................................ 209

Les formulaires .............................................................................................................................................................. 211Crer un formulaire ................................................................................................................................................................................................. 213 Les zones de saisie basiques ................................................................................................................................................................................. 215 Zone de texte monoligne ......................................................................................................................................................................................... 215 Les libells .............................................................................................................................................................................................................. 215 Quelques attributs supplmentaires ........................................................................................................................................................................ 216 Zone de mot de passe ............................................................................................................................................................................................ 217 Zone de texte multiligne .......................................................................................................................................................................................... 217 Les zones de saisie enrichies ................................................................................................................................................................................. 219 E-mail ...................................................................................................................................................................................................................... 219 Une URL .................................................................................................................................................................................................................. 219 Numro de tlphone .............................................................................................................................................................................................. 220 Nombre .................................................................................................................................................................................................................... 220 Un curseur ............................................................................................................................................................................................................... 221 Couleur .................................................................................................................................................................................................................... 221 Date ......................................................................................................................................................................................................................... 221 Recherche ............................................................................................................................................................................................................... 222 Les lments d'options ............................................................................................................................................................................................ 223 Les cases cocher ................................................................................................................................................................................................. 223 Les zones d'options ................................................................................................................................................................................................. 224 Les listes droulantes ............................................................................................................................................................................................. 225 Finaliser et envoyer le formulaire ............................................................................................................................................................................ 228 Regrouper les champs ............................................................................................................................................................................................ 228 Slectionner automatiquement un champ ............................................................................................................................................................... 229 Rendre un champ obligatoire .................................................................................................................................................................................. 229 Le bouton d'envoi .................................................................................................................................................................................................... 230

La vido et l'audio ......................................................................................................................................................... 231Les formats audio et vido ...................................................................................................................................................................................... Les formats audio .................................................................................................................................................................................................... Les formats vido .................................................................................................................................................................................................... Insertion d'un lment audio ................................................................................................................................................................................... Insertion d'une vido ............................................................................................................................................................................................... 232 232 232 234 235

Aller plus loin ................................................................................................................................................................. 238Du site web l'application web (Javascript, AJAX...) .............................................................................................................................................. 239 Technologies lies HTML5 (Canvas, SVG, Web Sockets...) ................................................................................................................................ 241 Les sites web dynamiques (PHP, JEE, ASP .NET...) .............................................................................................................................................. 243

Partie 5 : Annexes ........................................................................................................................... 244Envoyez votre site sur le web ....................................................................................................................................... 245Le nom de domaine ................................................................................................................................................................................................ 246 Rserver un nom de domaine ................................................................................................................................................................................. 246 L'hbergeur ............................................................................................................................................................................................................. 246 Le rle de l'hbergeur ............................................................................................................................................................................................. 248 Trouver un hbergeur .............................................................................................................................................................................................. 248 Commander un hbergement pour votre site web .................................................................................................................................................. 250 Utiliser un client FTP ............................................................................................................................................................................................... 252 Installer un client FTP .............................................................................................................................................................................................. 252

www.siteduzero.com

Informations sur le tutoriel

4/279

Configurer le client FTP ........................................................................................................................................................................................... 253 Transfrer les fichiers .............................................................................................................................................................................................. 254

Mmento des balises HTML .......................................................................................................................................... 255Balises de premier niveau ....................................................................................................................................................................................... Le code minimal d'une page HTML ......................................................................................................................................................................... Balises d'en-tte ...................................................................................................................................................................................................... Balises de structuration du texte ............................................................................................................................................................................. Balises de liste ........................................................................................................................................................................................................ Balises de tableau ................................................................................................................................................................................................... Balises de formulaire ............................................................................................................................................................................................... Balises sectionnantes ............................................................................................................................................................................................. Balises gnriques .................................................................................................................................................................................................. 256 256 256 258 260 261 263 265 265

Mmento des proprits CSS ....................................................................................................................................... 266Proprits de formatage de texte ............................................................................................................................................................................ 267 Police, taille et dcorations ..................................................................................................................................................................................... 267 Alignement .............................................................................................................................................................................................................. 268 Proprits de couleur et de fond ............................................................................................................................................................................. 269 Couleur .................................................................................................................................................................................................................... 270 Image de fond ......................................................................................................................................................................................................... 270 Proprits des botes .............................................................................................................................................................................................. 272 Dimensions ............................................................................................................................................................................................................. 272 Marges extrieures .................................................................................................................................................................................................. 272 Marges intrieures ................................................................................................................................................................................................... 272 Bordures .................................................................................................................................................................................................................. 273 Proprits de positionnement et d'affichage ........................................................................................................................................................... 274 Affichage ................................................................................................................................................................................................................. 275 Positionnement ....................................................................................................................................................................................................... 275 Proprits des listes ................................................................................................................................................................................................ 276 Proprits des tableaux ........................................................................................................................................................................................... 278 Autres proprits ..................................................................................................................................................................................................... 278

www.siteduzero.com

Apprenez crer votre site web avec HTML5 et CSS3

5/279

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 ?) Auteur : V ous 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 ! Mathieu Nebra (M@teo21) Difficult : Temps d'tude estim : 20 jours Licence :

Informations sur le tutoriel

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 ! V ous 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 ! V ous 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

Ce cours vous plat ? Si vous avez aim ce cours, vous pouvez retrouver le livre "Ralisez votre site web avec HTML5 et CSS3" du mme auteur, en vente sur le Site du Zro, en librairie et dans les boutiques en ligne. V ous y trouverez ce cours adapt au format papier avec une srie de chapitres indits. Plus d'informations

www.siteduzero.com

Partie 1 : Les bases de HTML5

6/279

Partie 1 : Les bases de HTML5V ous n'avez jamais entendu parler du HTML, ou alors seulement de faon trs vague ? Pas de panique, les explications arrivent ds le premier chapitre... et la pratique suit juste aprs ! Nous commencerons par prsenter comment les sites web fonctionnent, puis nous tlchargerons tous les programmes (gratuits) ncessaires pour bien travailler. A la fin de cette partie, vous saurez dj insrer du texte, des liens, des images et mme des vidos !

Comment fait-on pour crer des sites web ?Bonjour et bienvenue toutes et tous ! V donc le premier chapitre de ce cours pour dbutants, qui va vous apprendre crer votre site web ! oici 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 1 : Les bases de HTML5

7/279

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 consulter n'importe quel site web. V par exemple un navigateur affichant le clbre site web oici 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) 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.

www.siteduzero.com

Partie 1 : Les bases de HTML5

8/279

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 1 : Les bases de HTML5

9/279

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. V ous vous demandez srement pourquoi il faut connatre 2 langages pour crer des sites web ? Je vous rponds sans plus tarder !

www.siteduzero.com

Partie 1 : Les bases de HTML5

10/279

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 suffi non ?

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

V ous 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 1 : Les bases de HTML5

11/279

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. V premires pages ne seront donc pas les plus esthtiques, mais qu'importe ! Ca ne durera pas longtemps. os

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 ! V un trs bref historique des langages pour votre culture gnrale. oici

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 versions du HTML. Les rgles et le fonctionnement de cette version sont donns 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 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

www.siteduzero.com

Partie 1 : Les bases de HTML5

12/279

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 1 : Les bases de HTML5

13/279

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 V ous V oyez Est Ce Que V ous Obtenez) : ce sont des programmes qui se veulent trs faciles d'emploi, ils permettent de crer des sites web sans apprendre de langage particulier. 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 !

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

Sous Windowswww.siteduzero.com

Partie 1 : Les bases de HTML5Il 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.

14/279

Site web de Notepad++Prenez la version Installer et non le Zip V quoi ressemble Notepad++ lorsque vous le lancez : oici

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 1 : Les bases de HTML5

15/279

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 XV ous 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 . V quelques logiciels que vous pouvez tester : oici

www.siteduzero.com

Partie 1 : Les bases de HTML5gEdit Kate vim Emacs jEdit

16/279

www.siteduzero.com

Partie 1 : Les bases de HTML5

17/279

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. V les principaux connatre : oici 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 (Dj install sur Windows) Le navigateur de Microsoft, qui quipe tous les PC Windows. Je l'utilise frquemment pour tester mes sites web.

Safari Windows Tlchargement Le navigateur d'Apple, qui quipe tous les Mac. Mac (Dj install sur Mac OS X) Opera

Windows Mac Tlchargement Linux

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.

V un aperu de quelques-uns de ces principaux navigateurs sur la page d'accueil de Google : oici

www.siteduzero.com

Partie 1 : Les bases de HTML5

18/279

Tlcharger Google Chrome(Windows, Mac OS X et Linux)

www.siteduzero.com

Partie 1 : Les bases de HTML5

19/279

Tlcharger Firefox(Windows, Mac OS X et Linux)

www.siteduzero.com

Partie 1 : Les bases de HTML5

20/279

Tlcharger Internet Explorer(Windows uniquement, mise jour vers la dernire version) V ous remarquerez qu'ils se ressemblent tous trangement ! En revanche, sous le capot, des diffrences (parfois importantes) subsistent dans ces navigateurs...

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 et caniuse.com tiennent notamment jour une liste des fonctionnalits CSS supportes par les diffrentes versions de chaque navigateur :

www.siteduzero.com

Partie 1 : Les bases de HTML5

21/279

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

www.siteduzero.com

Partie 1 : Les bases de HTML5

22/279Safari 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 ? V ous 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 1 : Les bases de HTML5

23/279

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. V ous 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 1 : Les bases de HTML5

24/279

V ous 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 1 : Les bases de HTML5

25/279

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. V ous y verrez le fichier que vous venez de crer :

www.siteduzero.com

Partie 1 : Les bases de HTML5

26/279

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. V par exemple l'icne qui apparat selon que votre navigateur oici 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 1 : Les bases de HTML5

27/279

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 1 : Les bases de HTML5

28/279

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. V quoi elles ressemblent : oici 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. V ous me verrez donc mettre un / aux balises orphelines et je vous recommande de faire de mme, c'est une bonne pratique.

Les attributswww.siteduzero.com

Partie 1 : Les bases de HTML5

29/279

Les 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 1 : Les bases de HTML5

30/279

Structure de base d'une page HTML5Reprenons notre diteur de texte (dans mon cas Notepad++). Je vous invite copier-coller le code source ci-dessous 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 :

V ous 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 le sens inverse de leur ouverture. Un exemple :

www.siteduzero.com

Partie 1 : Les bases de HTML5

31/279

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

www.siteduzero.com

Partie 1 : Les bases de HTML5Le 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.

32/279

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'encodage 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 ind