La structure d’une page HTML
La structure d’une page HTML est précise. Il faut que certaines balises soient présentes pour que la page est un sens et soit interprété au mieux par tous les navigateurs. Il faut savoir qu’il existe plusieurs version d’HTML. A l’heure ou j’écris ces lignes, nous sommes dans HTML5.
Pour construire une page html, il vous faut déjà une page avec comme extension .html. Par exemple une page mapage.html.
NB : il est possible de faire des pages HTML sur forumactif. Si vous utilisez cette solution, pas besoin de créer un fichier, vous pouvez mettre votre code dedans. Cependant je vous conseille de quand même créer un fichier, tester votre code et quand il vous convient, le mettre sur forumactif, la méthode est moins contraignante pour tester votre code.
Pour voir votre code, rien de plus simple, double-cliquez sur le fichier créé qui s’ouvrira dans votre navigateur par défaut.
Donc une fois votre rendu affiché (pour le moment la page est blanche c’est normal) et votre fichier ouvert dans un éditeur de code (pax exemple notepad++ ou sublim text), on va commencer à construire votre page internet.
Avant toute chose, il faut savoir que les balises utilisées ne seront pas visible et n’auront aucun impact visuel sur votre site internet. Ce n’est pas pour autant qu’elles ne sont pas importantes.
Bien, donc, première étape c’est d’indiquer quelle version on utilise. Comme l’ère du temps est dans l’HTML5, c’est celui-ci que l’on va déclarer. Rien de plus simple, il suffit de marquer ceci dans votre page :
- Code:
-
<!DOCTYPE html>
Une fois ceci fait, il vous faut indiquer que vous êtes en train d’écrire dans du HTML, il va falloir donc écrire la balise suivante
- Code:
-
<html></html>
Tout le code qui va suivre sera donc à placer entre ces deux balises !
Une fois cette étape passée, il faut savoir que la balise contient 2 “sections” définies par deux balises. La première va donner des information pour le navigateur, va permettre de charger le javascript, le css. Ce sont des information non visibles directement sur la page mais importantes. La deuxième partie contient elle le contenu de la page, ce qui va s’afficher.
- Code:
-
Afin de simplifier l’écriture des balises dans les textes, je vais utiliser la nomenclature suivante : pour les balises qui nécessitent une balise de fermeture je ne marquerai que la balise ouvrante. Pax exemple quand je voudrai parler de la balise <div></div> je marquerais <div>. Pour les balises auto-fermante, je les écrirai sans attributs, avec le slash à la fin, par exemple pour la balise image, je la noterai comme ceci : <img/>. Ainsi vous pourrez savoir si je parle d’une balise qui a besoin d’une balise de fermeture ou non.
La Balise
head - Code:
-
<head>
Correspond à la première section dont j’ai parlé plus haut. Tout le code que je vais vous indiquer dans cette section sera à placer dans cette balise.
head peut contenir plusieurs balises, mais généralement on retrouve les même. Certaines sont presque “obligatoires” (je noterai un petit ** à côté). Je vais vous indiquer les plus fréquentes.
- Code:
-
* <title> ** : Permet de donner un nom à votre page. C’est le texte qui s'affiche dans votre onglet, en haut de votre navigateur
* <meta charset="UTF-8" /> ** : La balise meta, bien qu’elle peut être utilisée avec d’autres attributs, est souvent utilisée avec l’attribut charset. Il permet de définir l’encodage de votre page. Ça vous évitera d’avoir des caractères bizarres à la place de vos accents dans votre texte.
* <meta name="description" content="Votre description" /> : C’est pour aider votre page à être affiché dans les moteurs de recherche type Google.
Pour les suivantes, c’est un peu particulier car il y a deux options, selon si vous voulez mettre le CSS ou le Javascript directement dans la page ou si vous utilisez d’autre fichiers ou des sources externe.
Le cas du Javascript :
Si vous mettez directement le javascript dans la page, la balise va s’écrire ainsi :
- Code:
-
<script type=”text/javascript”>
// votre code
</script>
Si vous utilisez un autre fichier ou une source externe, la balise va par exemple s’écrire ainsi :
- Code:
-
<script type="text/javascript" src="monfichier.js"></script>
Le cas du CSS
Si vous mettez votre CSS directement dans votre page, la balise va s’afficher ainsi :
- Code:
-
<style type=”text/css”>
/* votre code */
</style>
Si vous utilisez un autre fichier ou une source externe, la balise va par exemple s’écrire ainsi :
- Code:
-
<link rel="stylesheet" type="text/css" href="monfichier.css" />
La Balise
body - Code:
-
<body>
Contient tout ce qui va être affiché dans votre site internet !
En général, il y a également plusieurs balises qui sont récurrentes dans la balise
body, mais cela dépend de ce que vous affichez sur la page. Avec l’HTML5, il a de nouvelles balises sémantiques qui sont arrivées et qui nous permettent de structurer au mieux votre page internet.
- Code:
-
* <header> : à ne pas confondre avec la balise <head>. On met dedans tout ce qui touche au “Début d’une page”, qui ne change généralement pas quand on a un site avec plusieurs pages. Elle contient généralement le logo et la navigation.
* <section> : généralement il y a une balise <section> par zone de contenu différencié par page. Par exemple sur un forum, chaque grosse catégorie est une section.
* <footer> : contient généralement les informations que l’on retrouve en bas de page, souvent les crédits, les informations de contact.
* <hn> : je regroupe ici les balises <h1>, <h2>, <h3>... Ce sont les balises de titres. Attention il ne faut avoir qu’un seul <h1> par page. Et respecter un ordre logique. Ne mettez pas une balise <h1>, puis une <h2> suivit d’une <h4>, il manque ici le <h3>.
* <p> : c’est une balise de paragraphe, mettez vos textes dedans.
Conseils
Pour construire au mieux votre page internet je vous conseille d’y aller par étape et de fermer immédiatement toute balise que vous ouvrez, pour éviter de vous perdre et évitez d’oublier d’en fermer une.
De plus je vous conseille fortement d’indenter votre code. C’est à dire de mettre des tabulations à chaque fois que vous écrivez une balise à l’intérieur d’une autre.
Ah, et pour vous même je vous conseille de mettre des commentaires dans votre code. parce que si vous devez le reprendre 4 ou 5 mois plus tard, vous risquez de ne plus comprendre ce que vous avez fait.
Exemple de code de page internet :
- Code:
-
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<meta charset="UTF-8" />
</head>
<body>
<section>
<h1>Titre 1 de la page</h1>
<p>Le contenu</p>
</section>
</body>
</html>
Exercice :
Voici un petit exercice pour voir si vous avez compris comment construire une page internet. Essayez si vous pouvez de ne pas regarder l’exemple ni la solution avant de tenter.
Créez une page avec comme title : “Ma page perso”, comme titre 1 : “Mon titre principal”, comme deuxième titre : “Mon titre secondaire”. Comme contenu : “J’aime les pommes”. Un footer qui contient une balise d’un lien vers gc-universe (vous avez libre choix du texte affiché).
Solution :
- Code:
-
<!DOCTYPE html>
<html>
<head>
<title>Ma page perso</title>
<meta charset="UTF-8" />
</head>
<body>
<section>
<h1>Mon titre principal</h1>
<h2>Mon titre secondaire</h2>
<p>J’aime les pommes</p>
</section>
<footer>
<a href=”http://gc-universe.forumactif.com/”>Un site trop cool !</a>
</footer>
</body>
</html>
Accueil 
Sujet: Cours page HTML 
