Comment démarrer ?
Vous n'avez pas besoin pour commencer à travailler sur vos pages à l'aide d'un logiciel couteux ou d'une petite application qui va tracer votre page. Pour bien faire utiliser un simple traitement de texte car l'important est d'avoir un texte brut sans aucune mise en page.
Pour Windows 10, vous pouvez utiliser le bloc- notes ou notepad en cliquant sur le bureau avec l'icône windows : Programmes, Accessoires windows, Blocs-notes.
Ce traitement de texte simple est parfait pour coder vos pages, et pour autant, vous devez vous assurez d'une chose, toujours pour votre document, enregistrez votre travail sous le "nom_de_fichier point html ou htm (.html ou .htm) par ailleurs bien vérifier que vous avez choisis l'option "tous les fichiers" et sélectionné UTF-8 comme type d'encodage (charset).
Le document HTML5 classique contient :
doctype
le doctype ou DTD ce sont les deux premières balises d'un doument html, elles comportent les informations du document, à la fois, le type du document et sa langue, en l'occurence ici le français.
ça donne ceci :
C'est ainsi que pour un doctype le plus minimal possible l'on code ainsi:
<!DOCTYPE html >
<html lang="fr" >
<head >
...
</head >
L'entête
La balise <head >... </head > que l'on appelle l'entête du document HTML5, contient les informations relatives au document. Dans l'entête l'on trouve des informations de nature très diverses, mais où ne figure pas le contenu se trouvant lui, entre les balises <body > et </body > avec l'intégralité de votre page qui apparait dans le navigateur.
- le titre du document <title >... </title >
- des déclarations ou des liens à des feuilles de style CSS
- des fonctions ou des liens venant de fichiers JavaScript
-des informations à l'intentions des moteurs de recherche
- des informations à l'intention des navigateurs
Comme le javascript est le langage par défaut;
Ainsi, pour définir un script java inclut entre les balises <head > et </head > il suffit juste de le stipuler par <script >... </script > ou bien par <script src="js/fichier.js </script >
pour les CSS
<style >... </style >
<style rel="stylesheet" href="css/style.css </style >
La balise <title >... </title > est la seule obligatoire, le titre se retrouve dans l'onglet de la page sur le navigateur comme exemple:
<title >Magasin </title >
L'encodage du document
Pour déterminer les jeux de caractères de l'alphabet utilisé dans le document HTML5 l'on utilise des encodages (le charset en anglais).
ASCII : le plus utilisé mais, il faut néanmoins encoder les caractères accentués et spéciaux du genre é pour le é, et è pour è, &euro pour €.
WINDOWS-1252: Le Jeu de caractères pour les applications windows mais il provoque souvent des problèmes de compatibilté avec les autres systèmes d'exploitation autre que windows.
ISO-8859-1: Codage par défaut dans l'europe de l'ouest et bonne compatibilté avec beaucoup de système.
UTF-8: Le meilleur et le futur, car valide quasiment dans le monde entier. c'est celui-là que nous utiliserons.
Pour coder la balise du jeu de caractère la plus compatible
Voici comment procéder :
<meta charset ="iso-8859-1 / > ou sinon
<meta charset="utf-8" / >
Notre document minimal HTML5 devient alors:
<!DOCTYPE html >
<html lang="fr" >
<head >
<title >HTML 5 </title >
<meta charset="utf-8" / >
</head >
...
La balise body
<body >
Appeller également le corps du document cette balise contient les données du documents, le contenu de la page.
Donc au final, notre page avec son entête et son corps (vide) l'on peut le coder ainsi:
<!DOCTYPE html >
<html lang="fr">
<head >
<meta charset="utf-8" / >
<title >HTML 5 </title >
</head >
<body >
...
</body >
</html >
Pour la validation du code
Votre code afin d'être bien conforme doit pour être parfait passer sour le regard d'un validateur, une sorte de site avec un logiciel qui permet de vérifier s'il ne contient aucune erreur, si le code est inccorecte il fourni à l'utilsateur un rapport qui détermine où se trouve la ou les erreurs, cependant le rapport est parfois très technique.
Il en existe plusieurs:
Le W3C le plus connu mais en anglais:
(validator.w3c.org)
Le validateur du w3 Québec
C'est un validateur en français http://www.w3qc.org/validateur
Le validateur validator.nu
http://html5.validator.nu
|