PAGE WEB BASIQUE
Le HTML définit le contenu de chaque page Web sur Internet. En «marquant» votre contenu brut avec des balises HTML, vous indiquez aux navigateurs Web comment vous souhaitez que différentes parties de votre contenu soient affichées. La création d’un document HTML avec un contenu correctement balisé est la première étape du développement d’une page Web.
Dans ce chapitre, nous allons créer notre première page Web. Elle ne ressemblera pas à grand chose car il n’y aura pas de mise en forme CSS, mais il servira d’introduction aux éléments HTML.
Nous travaillerons tous avec les mêmes types de contenu (rubriques, paragraphes, listes, etc.), nous allons les définir un peu plus explicitement avec le language HTML.
Installation
Commençons par créer un nouveau projet page-web-basique. Ensuite, créez un nouveau fichier appelé basics.html dans ce dossier. Ce fichier HTML représente une page Web unique, et c’est là que nous mettrons tout notre code pour ce chapitre.
N’oubliez pas que le flux de travail de base pour les développeurs web est d’éditer du HTML dans leur éditeur de texte et de voir ces changements dans un navigateur Web, donc c’est exactement ce que vous devriez faire pour chaque section de ce chapitre.
Structure d’une page Web
Ajoutez le balisage HTML suivant à notre fichier basics.html. C’est le point de départ pour chaque page Web que vous allez produire. En règle générale, vous utiliserez un template de base pour éviter de réécrire toutes les parties redondantes, mais pour le moment, nous nous concentrerons sur le HTML brut.
Ensuite notre page web doit être entièrment enveloppée dans les balises <html>. La balise <html> est appelée « balise d’ouverture » , et </html> est appelée « balise de fermeture ». Tout le contenu à l’intérieur de ces balises est considéré comme des éléments HTML qui seront afficher dans la page lorsque le navigateur l’aura « traduite ».
<!DOCTYPE html>
<html>
<head>
<!-- Les Metadatas sont ici -->
</head>
<body>
<!-- Le contenu est ici -->
</body>
</html>
À l’intérieur de l’élément <html>, nous avons deux autres éléments appelés <head> et <body>. L’entête d’une page Web contient toutes ses métadonnées, comme le titre de la page, toutes les feuilles de style CSS et autres éléments nécessaires pour rendre la page, mais vous ne voulez pas nécessairement que l’utilisateur le voit. La majeure partie de notre balisage HTML sera à l’intérieur de l’élément <body>, qui représente le contenu visible de la page. Notez que l’ouverture de notre page dans un navigateur Web n’indiquera rien, puisqu’il a un <body> vide.
Le but de la division <head>/<body> sera plus clair dans quelques chapitres après avoir commencé à travailler avec CSS.
Notez également la syntaxe du commentaire HTML dans l’extrait ci-dessus. Tout ce qui commence par <!-- et fini par --> sera complètement ignoré par le navigateur. Ceci est utile pour documenter votre code.
Titre de la page
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>Lorsque vous rechargez la page dans votre navigateur, vous devriez toujours voir une page vide, mais vous verrez également marqué Internet c’est facile! dans l’onglet du navigateur:
Notez comment toutes les balises HTML de notre page Web sont soigneusement imbriquées. Il est très important de s’assurer qu’il n’y a pas d’éléments chevauchants. Par exemple, l’élément <title> est censé être à l’intérieur de <head>, donc vous ne voudriez jamais ajouter </head> avant la balise </title>:
<!-- (Ne jamais faire ça) -->
<head>
<title>Interneting Is Easy!</head>
</title>Les paragraphes
Maintenant que le titre de la page est en place essayon d’ajouter un élément visible dans la page. La balise <p> indique que tout le texte en son sein est un paragraphe distinct. Essayez d’ajouter l’élément suivant <p> dans le corps de notre page web:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile</title>
</head>
<body>
<p>D'abord un premier paragraphe</p>
</body>
</html>Vous devriez maintenant pouvoir voir du contenu sur la page. Encore une fois, puisqu’il s’agit d’un contenu que nous voulons afficher, il faut qu’il passe dans l’élément <body>, pas dans <head>.
Notez également comment les éléments <p> et <title>
sont indentés deux fois, tandis que <body> et<head> ont indentés une fois. C’est façon de faire constitue une bonne pratique, elle rend votre code HTML plus facile à lire pour d’autres développeurs (ou pour vous-même si vous revenez dans 5 mois et que vous voulez changer quelque chose).
Les titres de section
HTML fournit six niveaux de titres de section, et les éléments correspondants sont:<h1>, <h2>, <h3>,
… , <h6>. Plus le nombre est élevé, moins le titre est important.
Le premier titre d’une page devrait être <h1>,
ajoutons en un au dessus de notre <p>. Il est très commun que le <h1> soit le même que le<title> du document, c’est le cas ici:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
</body>
</html>Par défaut, les navigateurs interprètent les titres moins important avec une plus petite taille de fonte. Par exemple, essayons d’inclure un titre de second niveau et voyons ce qui ce passe:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
<h2>Titre 2</h2>
<p>Il y a 6 niveaux possible de titres</p>
</body>
</html>On devrait obtenir un résulat qui ressemble à ça:
Les titres sont la principale façon de marquer différentes sections de votre contenu. Ils définissent le contour de votre page Web que les humains et les moteurs de recherche voient, il faut donc choisir leur contenu de façon pertinente afin d’obtenir une page Web de haute qualité.
Listes non ordonnées
Chaque fois que l’on entoure un morceau de texte avec des balises HTML, on ajoute une nouvelle signification à ce texte. En incluant du contenu dans les balises <ul> on indique au navigateur que tout ce qui est à l’intérieur doit être rendu comme une «liste non ordonnée». Pour désigner des éléments individuels dans cette liste, vous les enveloppons dans les balises <li> , de la manière suivante:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
<h2>Titre 2</h2>
<p>Il y a 6 niveaux possible de titres</p>
<h2>Listes</h2>
<p>Ceci est une liste non ordonnée</p>
<ul>
<li>Un élément</li>
<li>Un autre</li>
<li>Encore un autre</li>
</ul>
</body>
</html>Après avoir ajouté ce balisage à l’élément <body> (sous le contenu existant), vous devriez voir une liste à puces avec une puce dédiée à chaque élément <li>:
La spécification HTML définit des règles strictes sur les éléments qui peuvent entrer dans d’autres éléments. Dans ce cas, les éléments <ul> ne contiennent que des éléments <li> .
<!-- Ne faites jamais ça ! -->
<ul>
<p>Un élément de liste</p>
</ul>
<!-- Faite cela -->
<ul>
<li><p>Un élément de liste</p></li>
</ul>Comment savons-nous que <ul> n’accepte que les éléments<li> et que <li> permet des paragraphes imbriqués? Parce que Mozilla Developer Network (MDN) le dit. MDN est une excellente référence du language HTML. Quand vous n’êtes pas sûr d’un élément, n’hésitez pas à consulter MDN web Docs
Listes ordonnées
Avec une liste non ordonnée, réorganiser les éléments <li> ne doit pas modifier la signification de la liste. Si la séquence des éléments de la liste est importante, vous devez utiliser une «liste ordonnée» à la place. Pour créer une liste ordonnée, modifiez simplement l’élément parent <ul> par<ol>. Ajoutez le contenu suivant à la section Lists de basics.html:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
<h2>Titre 2</h2>
<p>Il y a 6 niveaux possible de titres</p>
<h2>Listes</h2>
<p>Ceci est une liste non ordonnée</p>
<ul>
<li>Un élément</li>
<li>Un autre</li>
<li>Encore un autre</li>
</ul>
<p>Voici à quoi ressemble une liste ordonnée:</p>
<ol>
<li>Element 1</li>
<li>Deuxième éléments</li>
<li>Troisième élément</li>
</ol>
</body>
</html>Lorsque vous rechargez la page dans votre navigateur, vous constaterez que le navigateur a automatiquement incrémenté le compte pour chaque élément <li> . Dans la partie CSS de notre cours , nous allons apprendre comment changer le type de numéros affiché.
La différence entre une liste non ordonnée et une liste ordonnée peut sembler stupide, mais elle a vraiment une importance pour les navigateurs Web, les moteurs de recherche et, bien sûr, les utilisteurs humains. Il est également plus facile de les utiliser que de numéroter manuellement chaque élément de liste.
Les procédures étape par étape, comme les recettes, les instructions et même les tableaux de contenu, sont de bons candidats pour les listes commandées, tandis que les listes <ul> sont meilleures pour représenter les inventaires d’articles, les fonctionnalités du produit, les comparaisons pro / con et les menus de navigation.
Les éléments d’Emphase
Jusqu’à présent, nous n’avons travaillé que avec des éléments de niveau de «bloc» (également appelés «contenu de flux»). L’autre type majeur de contenu sont les éléments en « ligne » ou « contenu de phrasé », qui sont traités un peu différemment. Les éléments de niveau de bloc sont toujours dessinés sur une nouvelle ligne, tandis que les éléments en ligne peuvent affecter des sections de texte n’importe où dans une ligne.
Par exemple, <p> est un élément de niveau de bloc, tandis que <em> est un élément en ligne qui affecte une partie du texte à l’ intérieur d’un paragraphe. Il est généralement affiché en italique. Essayez d’ajouter un élément <em> dans notre page d’exemple:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
<h2>Titre 2</h2>
<p>Il y a 6 niveaux possible de titres</p>
<h2>Listes</h2>
<p>Ceci est une liste non ordonnée</p>
<ul>
<li>Un élément</li>
<li>Un autre</li>
<li>Encore un autre</li>
</ul>
<p>Voici à quoi ressemble une liste ordonnée:</p>
<ol>
<li>Element 1</li>
<li>Deuxième éléments</li>
<li>Troisième élément</li>
</ol>
<h2>Les éléments Inline</h2>
<p><em>Parfois</em>, vous devez attirer l'attention sur un mot ou une phrase.</p>
</body>
</html>La partie enveloppée dans les balises <em> devrait être représentée en italique, comme indiqué ci-dessous. Notez comment une partie seulement d’une ligne a été affectée, ce qui est caractéristique des éléments en ligne. Dans le chapitre « Modèle de boîte » , nous découvrirons comment les éléments en ligne et en bloc peuvent avoir un impact dramatique sur le design d’une page web.
L’ élément Strong
Si vous voulez être plus emphatique qu’une étiquette <em> , vous pouvez utiliser <strong> . C’est un élément en ligne comme <em> , et ressemble à ceci:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
<h2>Titre 2</h2>
<p>Il y a 6 niveaux possible de titres</p>
<h2>Listes</h2>
<p>Ceci est une liste non ordonnée</p>
<ul>
<li>Un élément</li>
<li>Un autre</li>
<li>Encore un autre</li>
</ul>
<p>Voici à quoi ressemble une liste ordonnée:</p>
<ol>
<li>Element 1</li>
<li>Deuxième éléments</li>
<li>Troisième élément</li>
</ol>
<h2>Les éléments Inline</h2>
<p><em>Parfois</em>, vous devez attirer l'attention sur un mot ou une phrase.</p>
<p>D'autres fois vous devez faire porter une <strong>forte</strong>ly attention sur un mot.</p>
</body>
</html>Il doit être rendu en caractères gras, de la manière suivante:
Pour attirer encore plus d’attention sur votre espace de texte, vous pouvez imbriquer un élément <strong> dans un élément <em> (ou vice versa). Cela vous donnera du texte à la fois gras et souligné:
Structure vs Présentation
Vous vous demandez peut-être pourquoi nous utilisons les termes «accentuation» et «fort» au lieu de «italique» et «gras». Cela nous amène à une distinction importante entre HTML et CSS. Le balisage HTML devrait fournir des informations sémantiques sur votre contenu – pas des informations de présentation . En d’autres termes, HTML devrait définir la structure de votre document, laissant son apparence à CSS.
Les éléments pseudo-obsolètes <b> et <i> sont des exemples classiques de ceci. Ils représentaient respectivement « gras » et « italique », mais HTML5 a tenté de créer une séparation claire entre la structure d’un document et sa présentation. Ainsi, <i> été remplacé par <em> , car le texte souligné peut être affiché de toutes sortes, en plus d’être en italique (par exemple, dans une police différente, une couleur différente ou une taille plus grande). Idem pour <b> et <strong>.
Comme nous allons le découvrir dans le chapitre sur le CSS , nous pouvons modifier le rendu par défaut du navigateur des éléments <strong> et <em> . Cela confirme le fait que nous ne devrions pas l’appeler en italique ou en gras dans le HTML, cela doit être fait au niveau du CSS.
Les éléments HTML « vides »
Les balises HTML que nous avons rencontrées jusqu’ici enveloppent le contenu du texte (p. Ex., <p> ) ou d’autres éléments HTML (par exemple, <ol> ). Ce n’est pas le cas pour tous les éléments HTML. Certaines d’entre elles peuvent être « vides » ou « auto-fermé ». Les sauts de ligne et les règles horizontales sont les éléments vides les plus courants que vous trouverez.
Sauts de ligne
Le HTML condense les espaces consécutifs, les tabulations ou les nouvelles lignes (ensemble appelés « espaces ») dans un espace unique. Pour voir de quoi je parle, ajoutez la section suivante à votre fichier basics.html
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
<h2>Titre 2</h2>
<p>Il y a 6 niveaux possible de titres</p>
<h2>Listes</h2>
<p>Ceci est une liste non ordonnée</p>
<ul>
<li>Un élément</li>
<li>Un autre</li>
<li>Encore un autre</li>
</ul>
<p>Voici à quoi ressemble une liste ordonnée:</p>
<ol>
<li>Element 1</li>
<li>Deuxième éléments</li>
<li>Troisième élément</li>
</ol>
<h2>Les éléments Inline</h2>
<p><em>Parfois</em>, vous devez attirer l'attention sur un mot ou une phrase.</p>
<p>D'autres fois vous devez faire porter une <strong>forte</strong>ly attention sur un mot.</p>
<h2>Eléments Vide</h2>
<p>Merci d'avoir suivi jusqu'au bout. Vous devriez mieux connaitre le HTML maintenant</p>
<p>Cordialement,
David FLOUTIER</p>
</body>
</html>La nouvelle ligne après Cordialement dans l’extrait ci-dessus sera transformée en un espace au lieu d’afficher comme une rupture de ligne
Pour dire au navigateur que nous voulons un saut de ligne, nous devons utiliser l’élément <br/> comme ceci:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
<h2>Titre 2</h2>
<p>Il y a 6 niveaux possible de titres</p>
<h2>Listes</h2>
<p>Ceci est une liste non ordonnée</p>
<ul>
<li>Un élément</li>
<li>Un autre</li>
<li>Encore un autre</li>
</ul>
<p>Voici à quoi ressemble une liste ordonnée:</p>
<ol>
<li>Element 1</li>
<li>Deuxième éléments</li>
<li>Troisième élément</li>
</ol>
<h2>Les éléments Inline</h2>
<p><em>Parfois</em>, vous devez attirer l'attention sur un mot ou une phrase.</p>
<p>D'autres fois vous devez faire porter une <strong>forte</strong>ly attention sur un mot.</p>
<h2>Eléments Vide</h2>
<p>Merci d'avoir suivi jusqu'au bout. Vous devriez mieux connaitre le HTML maintenant</p>
<p>Cordialement,<br>
David FLOUTIER</p>
</body>
</html>Cependant, veillez à ne pas abuser de la balise <br/>. Vous ne devriez pas l’utiliser, par exemple, pour ajouter un tas d’espace entre les paragraphes.
Comme indiqué dans la section précédente, ce type d’information de présentation devrait être défini dans votre CSS au lieu de votre HTML.
Règle Horizontale
L’élément <hr/> est une « règle horizontale », qui représente une pause thématique. La transition d’une scène d’une histoire à la suivante ou entre la fin d’une lettre et un post-scriptum sont de bons exemples quand une règle horizontale peut être appropriée. Par exemple:
<!DOCTYPE html>
<html>
<head>
<title>Internet c'est facile!</title>
</head>
<body>
<h1>Internet c'est facile !</h1>
<p>D'abord un premier paragraphe.</p>
<h2>Titre 2</h2>
<p>Il y a 6 niveaux possible de titres</p>
<h2>Listes</h2>
<p>Ceci est une liste non ordonnée</p>
<ul>
<li>Un élément</li>
<li>Un autre</li>
<li>Encore un autre</li>
</ul>
<p>Voici à quoi ressemble une liste ordonnée:</p>
<ol>
<li>Element 1</li>
<li>Deuxième éléments</li>
<li>Troisième élément</li>
</ol>
<h2>Les éléments Inline</h2>
<p><em>Parfois</em>, vous devez attirer l'attention sur un mot ou une phrase.</p>
<p>D'autres fois vous devez faire porter une <strong>forte</strong>ly attention sur un mot.</p>
<h2>Eléments Vide</h2>
<p>Merci d'avoir suivi jusqu'au bout. Vous devriez mieux connaitre le HTML maintenant</p>
<p>Cordialement,<br>
David FLOUTIER</p>
<hr/>
<p>P.S. Cette page est très moche mais on l'améliorer avec du CSS très bientôt.</p>
</body>
</html>L’un des thèmes de ce chapitre a été la séparation du contenu (HTML) de la présentation (CSS) et <hr/> n’est pas différent. Comme <em> et <strong> , il a une apparence par défaut (une ligne horizontale), mais une fois que nous commençons à travailler avec CSS, nous pourrons le rendre de nombreuses manières.
Comme <br/>, <hr/> devrait avoir un sens, ne l’utilisez pas lorsque vous souhaitez simplement afficher une ligne. Pour cela, on utilisera la propriété border du language CSS, dont nous discuterons dans quelques chapitres.
Résumé
Les pages Web sont constituées d’éléments HTML, chaque élément ajoute un sens différent au texte qu’il contient, et les éléments peuvent être imbriqués l’un dans l’autre.
Ce que nous avons fait dans ce chapitre est toujours la première étape du processus de développement web: vous devez définir ce que vous voulez dire (HTML) avant de définir comment vous voulez le dire (CSS). J’espère que le fichier basics.html que nous avons créé dans ce chapitre vous servira de référence rapide aux éléments HTML de base. Voici à quoi il devrait ressembler:
L’avantage du HTML c’est qu’il est très flexible. Vous pouvez l’afficher dans une page Web, un appareil mobile, une tablette ou un papier imprimé, chacun avec des mises en page différentes. Vous pouvez même re-styler plusieurs documents simplement en changeant une seule ligne de CSS.
Dans le prochain chapitre, nous compléterons notre savoir en HTML avec les autres éléments que vous rencontrerez quotidiennement: les liens et les images. Pour les éléments les plus obscurs, vous pouvez explorer la Référence des éléments HTML – MDN.