Cet article est montre la base pour créer une bonne structure HTML.
En tant qu’hébergeur, nous avons souvent à répondre aux mêmes questions : comment modifier mon site; comment ajouter un formulaire; etc. Alors nous avons décidé de commencer à écrire des blogues informatifs sur les bases d’un site internet.
On utilise généralement un éditeur de texte pour modifier le langage HTML. Il est possible de modifier un page HTML avec le bloc-notes de l’ordinateur. Néanmoins, il existe plusieurs éditeurs de texte spécialisé qui rendra le codage en HTML beaucoup plus simple. Voici deux éditeurs de texte populaire pour coder :
La Syntaxe :
Les éléments
L’HTML (HyperText Markup Language) est un langage de balisage. Il donne la structure d’une pas web à l’aide d’une structure bien précise.
Un élément servira à indiquer, à encadrer ce dont on définit.
Pour créer un élément, on ouvre une balise en encadrant sont type, entre le contenu et ensuite on ferme la balise.
Exemple :
<p>Du texte dans un paragraphe</p>
Il existe des éléments vides, ceux-ci ont une balise « autofermant ». Par exemple:
<input />
Les attributs
Chaque élément peut avoir des attributs qui s’y rattachent.
Les attributs se retrouveront sur la balise ouvrante.
Certains attributs ont une signification particulière dans le langage HTML, mais d’autres attributs peuvent aussi être ajoutés à notre guise pour nos données des informations supplémentaires sur l’élément
<a href="https://www.cstjean.qc.ca/" data-toggle=1>Cégep</a> <input disabled="disabled" />
Structure HTML de base
Un document HTML (ou page web) est généralement composé de deux sections: la tête et le corps. Commençons par un exemple avec la structure HTML de base :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
Bonjour à tous!
</body>
</html>Présentement, le tout peut vous sembler un peu mélangeant, mais en vérité, c’est très simple à comprendre.
La première ligne signifie que nous allons créer un document HTML5.
Ensuite, le restant de notre document doit être à l’intérieur des balises HTML. C’est pourquoi il doit débuter par <html> et se terminer par </html>.
Ceci est la façon d’indiquer au navigateur qu’il s’agit d’un document HTML. Ensuite, vous devez refermer chaque balise qu’avez ouvert. Pour la fermer, vous devez ajouter le caractère « / » devant le nom de la balise.
Dirigeons-nous vers les deux grandes sections d’une page internet. Pour débuter, nous avons la tête du document. À cet endroit, vous pouvez inscrire plusieurs informations relatives au site pour aider les moteurs de recherche à comprendre ce qu’il voit, ce que nous allons expliquer dans une autre leçon. Dans l’exemple plus haut, nous avons seulement inscrit le titre du site entre la balise « title ». Remarquez comment nous refermons la balise après avoir inscrit le titre.
Le Titre
Le titre d’un site sert à deux choses. La première, c’est le nom que vous voyez apparaître sur l’onglet de la page que vous consultez dans votre navigateur. La deuxième concerne principalement les moteurs de recherche! Quand le lien de votre site apparaîtra dans les moteurs de recherche, c’est ce titre que les gens vont voir en premier.
<title>Mon Site Web</title>
La deuxième section est le corps de votre page. C’est à cet endroit que tout le contenu visible devra être inséré.
Il faut placer le contenu d’un site est inclus dans la balise « body ». À l’intérieur du corps du document, vous avez une multitude de balises disponibles pour la mise en page de votre document. En ce moment, nous allons porter seulement attention aux titres (à ne pas confondre avec le titre dans la tête du message) et ses paragraphes.
Le corps du message
Le paragraphe
On commence avec les paragraphes. Ils insèrent des blocs de textes. Ils doivent être contenus à l’intérieur de la balise « p ». Vous pouvez en placer autant que vous le désirez à l’intérieur d’une page internet. Voici un exemple :
<p>je suis un texte qui est contenu à l’intérieur d’un bloc paragraphe.</p>
C’est bien d’avoir des paragraphes, mais pour la navigation du lecteur, il n’y a rien de tel qu’indiquer quelques titres. Dans le monde du HTML, il y a six types de titres définis par les balises « h1 », « h2 », « h3 », « h4 », « h5 », « h6 ». Plus l’indice du titre est petit, plus il aura de l’importance.
Note: Pour maximiser vos chances dans les moteurs de recherche, il est fortement conseillé de toujours utiliser une balise « h1 » par page. Celle-ci doit être semblable au titre que vous avez placé dans l’en-tête de notre document HTML. Pour les autres, il n’y a pas de limite.
Maintenant, voici ce que le code ressemble si nous appliquons ces nouvelles connaissances :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon Site Web</title>
</head>
<body>
<h1>Mon Site Web</h1>
<h2>Intro</h2>
<p>C’est un plaisir de vous accueillir sur notre nouveau site web!</p>
<h2>Au revoir</h2>
<p>Revenez nous voir bientôt! Ce fut un plaisir!</p>
</body>
</html>Voir la leçon sur la structure HTML sur YouTube
Laisser un commentaire