Créer une page HTML 5
Ce petit tuto pour débutant explique comment créer une page web (en XHTML), même si vous n’y connaissez rien en informatique et programmation. A la fin de ce tutoriel, vous aurez créé une première petite page web et obtenu des connaissances de bases en XHTML.
Vous allez tout savoir (ou presque) sur les nouvelles possibilités d’HTML 5.
Gardez à l’esprit que le code HTML que vous implémentez sera interprété par le navigateur. Par conséquent, le code que vous tapez peut avoir un rendu ou un comportement différent selon le navigateur. C’est d’autant plus vrai que la balise ou l’attribut n’est pas vital, par exemple s’il ne sert pas de contrôle ou que sa non-utilisation ne provoquera pas une erreur fatale. Mais vous pouvez avoir des surprises. Donc testez votre code sur tous les navigateurs, au minimum les trois plus importants de votre marché, pour vous et votre public.
Dans cette première partie nous allons voir comment créer une page HTML 5.
Le doctype
C’est parti pour la découverte de HTML 5, et des nouvelles balises. Comment ça fonctionne? Comment l’utiliser? Il faut savoir que HTML 5 à simplifier beaucoup de choses par rapport à HTML 4.
Le doctype, c’est-à-dire la toute première balise de votre page, est unique et très simple :
<!DOCTYPE html>
Voilà, c’est tout, donc vraiment très facile.
La balise HTML
Ensuite juste en dessous, vous avez la balise HTML qui vient, donc qui indique au navigateur, qu’il s’agit d’un document HTML. Il faut savoir que la balise HTML est l’élément le plus haut à la racine du document : vous mettez doctype HTML, pour HTML 5, ensuite votre balise HTML, et vous pouvez spécifier la langue de votre document HTML.
Exemple :
<html lang="fr">
Ici, il s’agit de la langue FR pour le français. Ensuite, juste en-dessous, il y a la balise d’en-tête du document, head, qui se situe juste après la balise HTML.
L’en-tête du document
La balise head, l’en-tête du document, contient plusieurs informations sur le document : par exemple, le titre du document avec la balise title; l’appel à des feuilles de style CSS pour le design de votre site Internet; des fonctions ou des liens vers des fichiers JavaScript; des informations diverses pour les moteurs de recherche, et des informations diverses pour les navigateurs.
Il y a également les balises méta qui contiennent l’encodage, la description de la page, les mots clés, le nom de l’auteur, le copyright etc. Plusieurs informations qui renseignent la page HTML, à destination des moteurs recherches ou du navigateur.
Exemple :
<head> <title>HTML5</title> </head>
HTML5 est le titre de la page Web Pour appeler un code JavaScript, c’est encore plus simple, il suffit d’utiliser la balise script, c’est encore plus simple qu’avec HTML 4. C’est identique pour l’appel des feuilles de style CSS. Cela a encore été simplifié juste avec la balise style, c’est vraiment très simple, pour créer un document HTML 5, grâce à ces nouvelles balises, tout a été simplifié.
L’encodage (le charset) du document
Ensuite, vous pouvez définir l’encodage de votre document, la façon dont vont être convertis et affichés les caractères dans une page HTML. Notamment les caractères spéciaux et caractères accentués, ou encore les symboles euro, dollar, etc.
Exemple :
<head> <meta charset ="UTF-8"> </head>
Vous avez l’encodage ASCII, c’est un jeu de caractères très basiques, très anciens; ISO-8859-1, c’est une extension de l’encodage ASCII, très utilisé en Europe parce qu’il contient les caractères latins, les signes de ponctuation, et les symboles.
Et ensuite vous avez ISO-8859-15, c’est une version actualisée de l’ISO-8859-1, qui comprend entre autres le € supplémentaire.
Et le dernier encodage que vous allez utiliser et que nous vous conseillons très fortement, c’est l’UTF-8.
C’est un format de caractères, de codage de caractères conçu pour plusieurs langues, pour prendre en compte les caractères de plusieurs langues, son principal avantage est qu’il contient des milliers de caractères de différentes langues, qui vous permet de créer des sites Internet multilingues Français, Chinois, Arabe, tous ce que vous pouvez imaginer.
C’est pour ça que nous vous conseillons d’utiliser l’encodage UTF-8. Généralement vous verrez l’encodage ISO-8859-15, mais petit à petit les sites Internet basculent vers l’UTF-8, c’est ce que nous vous conseillons.
Le document HTML
Le premier document que vous allez créer en utilisant HTML 5, si vous ne connaissez pas, contiendra le doctype, la balise HTML avec la langue du site internet, donc FR, head pour mettre l’en-tête du document, la balise title pour définir un titre de document, meta charset pour l’encodage des caractères utilisés dans la page, on ferme la balise head.
L’en-tête fermé, vous passez à la balise body, et c’est là que vous allez mettre l’ensemble de votre texte, les images de votre page HTML, et ensuite vous fermez la balise HTML.
Soit au final :
<!DOCTYPE html> <html lang="fr"> <head> <title>Le titre de votre page</title> <meta charset="UTF-8"/> </head> <body> Ici, vous mettez le contenu de votre page </body> </html>
Au final, HTML5 a simplifié la structure de base d’une page en limitant les options.
La prochaine fois, nous verrons comment mettre en forme votre texte avec HTML.
Étiquette :ASCII, Développeur, Développeur Web, HTML 5, ISO-8859-1, ISO-8859-15, UTF-8, XHTML