Gepubliceerd op il y a 16 minutes

S’initier au HTML5 et au CSS

Une page HTML est simplement un fichier texte. Elle est composée de texte « brut ». Cela signifie qu’elle ne doit contenir aucun code relatif à la numérotation des pages, à l’interligne, etc. Les traitements de texte tels que Microsoft Word ne conviennent donc pas comme éditeurs HTML. Comme les documents HTML sont constitués de texte brut, ils sont indépendants de la plateforme. Cela signifie que vous pouvez les créer, les consulter et les modifier sur n’importe quel système informatique ou appareil mobile. Un serveur web et un navigateur web doivent savoir qu’ils ont affaire à un fichier HTML et non à un simple fichier texte. C’est pourquoi les fichiers HTML portent l’extension .html. On rencontre parfois l’extension .htm. Elle date de l’époque où Windows ne pouvait pas gérer les extensions de plus de trois caractères. Techniquement, il n’y a aucune différence. Un fichier texte brut avec l’extension .html s’affiche dans un navigateur, mais vous ne voyez que le texte brut. Le fichier ne contient aucune indication sur la structure ou la signification du texte. Pour indiquer qu’un texte est un titre ou un lien hypertexte, il faut le marquer (le baliser). C’est à cela que sert le langage HTML.

Éléments, balises et texte

Les concepts clés du HTML sont l’élément, la balise et le texte. La norme HTML comprend plus d’une centaine d’éléments. Ces éléments permettent de décrire le contenu d’un document web, afin que le navigateur sache comment le traiter. Plus précisément, vous décrivez le document à l’intention de l’agent utilisateur. Dans ce contexte, un agent utilisateur désigne un logiciel intégré au navigateur qui traduit un document envoyé par le serveur web en quelque chose que l’on peut voir, entendre ou ressentir. Le support peut être un écran, un logiciel de lecture à voix haute ou un lecteur de braille. Le moteur de rendu ou moteur de mise en page assure l’affichage final dans le navigateur.

Structure d’un élément

Un exemple permettra de mieux comprendre :

<a href= »https://www.handboek-html-css.nl »>Guide pratique HTML5 et CSS</a>

Il s’agit d’un élément, un élément de lien hypertexte pour être précis. Vous pouvez voir les éléments suivants :

• de openingstag <a href= »https://www.handboek-html-css.nl »>

• het HTML-element a

• het attribuut href met de waarde https://www.handboek-html-css.nl

• de tekst Handboek HTML5 en CSS

• de sluittag </a>

Un élément HTML est composé de balises et de texte.

L’élément « hyperlien » n’est pas un élément vide ; il contient du texte et possède une balise de fermeture. Sans texte, il serait d’ailleurs inutile, car on ne verrait pas l’élément à l’écran. Sur quoi faudrait-il alors cliquer pour suivre l’hyperlien ? L’élément « image » est un exemple d’élément vide :

Il n’y a qu’une balise d’ouverture, sans texte ni balise de fermeture. La balise est auto-fermante. Elle comporte toutefois plusieurs attributs qui, dans cet exemple, indiquent où se trouve l’image (src, abréviation de « source ») et quelles sont ses dimensions (height et width). L’attribut alt décrit ce que l’on voit et est un attribut obligatoire de l’élément img.

D’autres exemples d’éléments vides sont <br>, <hr> et <wbr>. Ils servent à marquer une fin de ligne, une séparation entre des sections et le point où un mot peut être coupé. Vous les retrouverez au fil du livre.

Chaque balise se compose de deux crochets < et > entre lesquels figure le nom de l’élément. Grâce à ces crochets, l’élément est reconnu comme une balise et n’est pas considéré comme du texte brut. Si vous oubliez un crochet, le navigateur ne reconnaîtra pas le texte comme une balise et le résultat affiché à l’écran ne correspondra pas à ce que vous attendiez. Une balise de fermeture contient toujours une barre oblique / et le nom de l’élément, comme </a>. Un élément vide n’a pas de balise de fermeture.

Élément ou balise ?

Un élément n’est pas la même chose qu’une balise, mais ces deux termes sont souvent utilisés de manière interchangeable. La balise est l’élément entre crochets, par exemple <h1>. Les balises indiquent le début et la fin d’un élément. Un élément correspond à l’ensemble constitué de la balise d’ouverture, du texte et de la balise de fermeture (à l’exception des éléments vides). Mais le nom seul, tel que « a » ou « img », est également appelé élément. Le HTML dispose d’une balise spéciale pour les commentaires. Tout ce qui se trouve entre <!– et –> est ignoré.

Imbrication d’éléments

Nous avons vu précédemment que les éléments peuvent également contenir d’autres éléments. En voici un exemple :

<img src= »zonnebloemen.jpg » alt= »Zonnebloemen in bloei. »

width= »960″ height= »640″>

</a>

Ici, l’élément <a> englobe l’élément <img>. Ce code génère un lien hypertexte contenant une image. Si vous cliquez sur l’image, vous serez redirigé vers la destination définie dans l’attribut href de l’élément <a>. L’image est le lien hypertexte lui-même.

Lettres minuscules

Vous avez peut-être remarqué que tout le code précédent est écrit en minuscules. Il aurait tout aussi bien pu être écrit entièrement en majuscules ou en mélangeant majuscules et minuscules. Le HTML ne fait pas la distinction entre majuscules et minuscules : les majuscules ont la même signification que les minuscules. Bien que vous puissiez mélanger majuscules et minuscules, cela n’est pas recommandé pour préserver la lisibilité de votre code. Il est de bonne pratique (et recommandé) d’écrire tout votre code HTML en minuscules. La recommandation d’utiliser systématiquement des minuscules comporte une seule exception. Il est de bonne pratique d’écrire la première balise en majuscules : <!DOCTYPE html>. Le DOCTYPE sera expliqué plus loin.

Fermer dans le bon ordre

Vous venez de voir un exemple d’élément qui englobe un autre élément. L’élément img est imbriqué dans l’élément a. Les documents HTML regorgent de ce genre de constructions. Il y a une chose très importante à retenir : vous devez fermer les éléments dans le bon ordre. Ce n’est pas difficile. Fermez toujours en premier l’élément qui a été ouvert en dernier. Observez l’extrait suivant et vous comprendrez clairement ce qu’il faut faire :

<p>Découvrez tout sur <i>la norme <abbr>HTML 5</abbr></i>.</p>

Dans la section suivante, vous verrez que ce principe ne s’applique pas seulement au sein d’un paragraphe, mais qu’il peut s’étendre sur plusieurs lignes de code. Si vous ne fermez pas un bloc de code au bon endroit, l’affichage de la page peut être très différent de ce qui était prévu.

Code indenté

Le retrait des blocs de code permet de voir plus clairement si les éléments sont correctement imbriqués et s’ils sont bien fermés. Pour les éléments de texte situés sur une seule ligne, ce n’est pas une très bonne idée, mais pour les paragraphes et autres blocs, cela s’avère très utile. Vous trouverez un exemple dans la figure 2.4.

[image : h02_04]

Attributs

Vous avez déjà vu quelques attributs, par exemple href, src, width, height et alt. Les balises HTML indiquent au navigateur la signification du texte qu’elles encadrent, mais il est souvent utile de fournir des informations supplémentaires au navigateur ou à l’utilisateur. C’est pourquoi de nombreux éléments permettent de spécifier des caractéristiques supplémentaires. Ces caractéristiques supplémentaires sont appelées « attributs ». Prenons l’exemple d’un lien hypertexte. Avec le seul élément `a`, le navigateur ne sait rien de plus que le fait qu’il s’agit d’une ancre (anchor), mais avec l’attribut `href`, il devient un lien hypertexte avec une destination :

Un attribut se compose souvent – mais pas toujours – d’un nom et d’une valeur :

• In dit geval is de naam het attribuut href.

• De waarde van het attribuut is https://www.handboek-html-css.nl.

Caractéristiques des attributs

Les attributs servent à étendre les fonctionnalités des éléments. Ils présentent les caractéristiques suivantes :

• Elementen kunnen geen, een of meer attributen hebben.

• Attributen worden altijd in de openingstag opgegeven. Zodra de browser een element herkent, probeert deze ook de toegevoegde attributen te interpreteren.

• Het attribuut wordt met een spatie gescheiden van de elementnaam.

• Attributen mogen in hoofdletters, kleine letters of een mix daarvan worden geschreven. Advies: kies één stijl en volg die consequent. Het is goed gebruik om attributen, net als tags, in kleine letters te schrijven.

• Een element kan meer attributen bevatten die elk een bepaald kenmerk beschrijven. De attributen worden met spaties van elkaar gescheiden.

• Tussen de naam en de waarde van het attribuut staan geen spaties. Een goede notatie is dus href= »https://www.w3.org ».

• Fout is href = “https://www.w3.org”.

• De waarde van attributen mag tussen geen, dubbele of enkele aanhalingstekens worden gezet. Dit is goed: href= »https://www.w3.org », en dit: href=’https://www.w3.org’ en dit ook: href=https://www.w3.org. Aan jou de keus. Het is gebruikelijk om in HTML dubbele aanhalingstekens toe te passen.

• Als de waarde van een attribuut spaties bevat, zijn de aanhalingstekens verplicht. Een voorbeeld is het opschrift (het attribuut value) van een verzendknop in een formulier: value= »Verzend het formulier ».

• Sommige elementen hebben booleaanse attributen. Een booleaans attribuut is een soort aan-uitschakelaar. Als het attribuut er is, is de waarde van toepassing; is het attribuut er niet, dan geldt het ook niet. Een voorbeeld is een verplicht in te vullen (required) veld in een formulier:

Ce champ de saisie de type « e-mail » doit être renseigné pour pouvoir envoyer le formulaire, car l’attribut « required » a été ajouté. Un attribut booléen peut également s’écrire « required= » » » ou « required= »required » ».

• Andere elementen zijn enumeratief, wat betekent dat ze juist wel een waarde moeten hebben: true, false of lege string (“”):

Les bases d’un document HTML

Un document HTML minimal présente une structure particulièrement simple :

<!DOCTYPE html>

<head>

<title>De basis van een HTML 5-document</title>

</head>

<body>

<!– hier komt de zichtbare inhoud –>

</body>

</html>

Emmet : insérer rapidement des extraits de code

Vous pouvez recopier ce code dans votre éditeur et l’enregistrer comme fichier de base pour chaque nouveau fichier HTML que vous créez. Cependant, un outil pourrait s’avérer plus pratique. La plupart des éditeurs prennent en charge Emmet, avec ou sans extension. Emmet (emmet.io) est un outil destiné aux développeurs qui permet d’insérer des fragments de code dans votre fichier à l’aide de raccourcis clavier. Dans Emmet, le modèle HTML complet est accessible via le raccourci !+Tab : dans un fichier vide, tapez le point d’exclamation et appuyez sur la touche Tab. Dans Visual Studio Code, Emmet est disponible sans plug-in. Bien sûr, c’est en tapant soi-même le plus de code possible que l’on apprend le mieux, mais Emmet peut vous épargner beaucoup de répétitions fastidieuses. De plus, vous devez tout d’abord comprendre le fonctionnement du HTML, sinon vous ne saurez pas quelles commandes donner à Emmet.

Même si tous les éléments du modèle ne sont pas obligatoires, il est pratique de les inclure dans un document HTML. Les éléments sont présentés ci-après dans l’ordre où ils apparaissent. Vous pouvez consulter ce document dans le navigateur, mais vous ne verrez rien d’autre que la poussière sur votre écran. La partie visible d’un site web se trouve dans le corps (body), qui est vide.

<!DOCTYPE html>

DOCTYPE indique le type du document. Dans le cas du HTML, c’est très simple : le type est « html ». La déclaration n’est pas sensible à la casse, mais il est pratique d’écrire « DOCTYPE » en majuscules et « html » en minuscules. Il est important de spécifier le type de document correct. Cela indique au navigateur à quel type de document il doit s’attendre, afin qu’il puisse fonctionner en mode standard. Cela signifie que tout le code HTML et CSS est traité conformément aux spécifications.

C’est ici que commence véritablement le document. L’attribut « lang » n’est pas obligatoire, mais il est indispensable si votre page web est lue à voix haute par un logiciel de lecture d’écran (screenreader), souvent utilisé par les personnes malvoyantes. De même, les fonctionnalités liées à la langue (vérification orthographique, césure) ne fonctionnent correctement que si la langue est correctement configurée. Le paramètre de langue joue également un rôle dans les moteurs de recherche. <html> est ce qu’on appelle la racine du document. C’est l’élément qui englobe tous les autres éléments.

<head>

Na de openingstag <html> volgt altijd de verplichte headsectie van het document. Hiervoor is het element <head>…</head> ontworpen. De sectie <head> is een belangrijk deel van het HTML-document. In deze sectie moet je onder meer de titel van het document opgeven. De titel is het enige zichtbare onderdeel van de <head> (zie hierna). De <head> kan zo klein zijn als in het voorbeeld, maar kan ook een waslijst aan meta-elementen en verwijzingen naar stylesheets en scriptbestanden bevatten. Deze worden niet in de pagina getoond, maar zijn wel belangrijk als achtergrondinformatie of hulpmiddel voor de werking van de pagina. Bekijk als voorbeeld eens de <head> van smashingmagazine.com.

L’élément <meta> peut comporter différents attributs, mais « charset » est le seul que vous deviez vraiment utiliser. Cet attribut détermine le jeu de caractères à partir duquel le navigateur doit extraire les lettres, les chiffres, les signes de ponctuation et autres.

L’attribut « name » peut être utilisé pour ajouter des informations complémentaires sur la page, qui peuvent notamment être utiles aux moteurs de recherche. Voici comment fournir une description et des mots-clés :

La description s’affiche dans les résultats de recherche Google. Les mots-clés avaient autrefois une grande importance pour les moteurs de recherche, mais en raison d’abus, on ne leur accorde plus beaucoup d’importance. Ils ne contribuent pas à améliorer le classement de votre page dans les résultats de recherche.

Balises méta comprises par Google

Pour améliorer la visibilité de votre site web, il est utile de tenir compte des recommandations de Google concernant les balises méta. Vous trouverez plus d’informations sur developers.google.com/search/docs/advanced/crawling/special-tags.

<title>

Le titre de la page est défini dans les balises <head> de la page. Pour cela, on utilise l’élément <title>. Le titre est obligatoire et il est recommandé de choisir un titre logique qui décrive au mieux le contenu de la page. Le titre s’affiche dans la barre de titre ou sur l’onglet du navigateur et est utilisé par de nombreux moteurs de recherche, conjointement avec la description, pour indexer les pages. Sur Google, vous verrez d’abord le titre, puis, juste en dessous, la description de la page ; il s’agit donc d’informations importantes. Bien choisies, elles peuvent inciter les internautes à consulter votre page.

En résumé

• een titel is verplicht;

• een webdocument mag maar één titel hebben;

• deze <title> moet altijd in de sectie <head>…</head> staan;

• in een titel kunnen geen andere elementen worden gebruikt.

<link>

L’élément <link> n’est pas obligatoire, mais tout simplement indispensable car il permet (entre autres) d’établir un lien vers le fichier contenant les caractéristiques de mise en forme du document HTML : la feuille de style CSS. Dans l’exemple de base, cela se présente ainsi : <link rel= »stylesheet » href= »css/styles.css »>. Ici, l’attribut obligatoire « rel » indique la nature de la relation avec le fichier externe : une feuille de style. L’attribut « href » indique l’emplacement de ce fichier. Dans cet exemple, il se trouve sur le serveur web, dans le dossier « css ».

<body>

Après l’en-tête, vous pouvez placer tout le reste du texte, des images et des codes dans la partie centrale, le « corps » de la page web. C’est là que vous mettez en forme la page proprement dite. Il n’est donc pas surprenant que cette partie soit encadrée par les balises <body> et </body>. C’est à l’intérieur de celles-ci que s’écrit le contenu de la page. Vous en apprendrez davantage à ce sujet dans la suite de cet ouvrage.

Structure de la page

La rédaction d’une page HTML commence par une réflexion sur sa structure. Celle-ci vous détourne généralement du contenu, même s’il existe bien sûr toujours une structure générale (comme l’en-tête, le corps et le pied de page). Cependant, ce n’est qu’une fois que vous connaissez la signification du contenu que vous savez de quels éléments vous avez besoin pour le structurer. Le terme « sémantique » (semantics) revient souvent dans le contexte du HTML. Un exemple : ce livre contient des chapitres, des paragraphes et des sous-paragraphes. Le texte est divisé en paragraphes, listes et apartés (conseil ou remarque). En d’autres termes : chaque partie du texte a une signification qui influence la structure de ce livre (le « site web »). Ne vous précipitez pas tout de suite sur la mise en forme de ces éléments, car si vous voyez bien qu’une ligne de texte en gras de 16 points au-dessus d’un texte normal de 9 points doit être un titre, un appareil ne tire pas cette conclusion. Cet appareil a besoin d’un code qui indique ce qu’est un titre et ce qu’est un paragraphe. Encore une fois, il s’agit ici de sémantique : la signification des éléments pour la structure. Vous devez la considérer de manière totalement indépendante de l’apparence de ces éléments.

Le modèle de contenu du HTML

Selon les anciennes normes HTML, un élément est soit de niveau bloc (block level), soit de niveau ligne (inline level). Lors de l’affichage dans un navigateur, un élément de niveau bloc commence sur une nouvelle ligne et ne peut être suivi d’aucun autre élément. Il commence et se termine donc par un saut de ligne (return). On peut citer comme exemples un titre <h2>, l’élément de paragraphe <p> ou un <article>. Un élément de niveau ligne ne comporte pas de saut de ligne et se trouve par définition à l’intérieur d’un élément de niveau bloc, comme dans : <p>Je souligne <strong>l’importance</strong> de ceci.</p>.

Dans le HTML moderne, cette distinction n’existe plus, car elle concerne la présentation et, comme cela a été souligné à plusieurs reprises, cela ne fait pas partie des missions du HTML. C’est pourquoi la notion de « modèle de contenu » a été introduite. Le modèle de contenu décrit le contenu attendu d’un élément. Voici quelques exemples :

• de inhoud van een element <h1> moet een koptekst zijn die slaat op de inhoud van de bijbehorende sectie (de hele pagina of een artikel);

• een element <table> moet gegevens in een raster tonen;

• een element <video> wordt gebruikt om een clip af te spelen. Het is niet bedoeld om op een pagina over beeld en geluid de paragraaf over video ermee af te bakenen.

De cette manière, tous les éléments sont classés dans zéro ou plusieurs catégories qui indiquent quel contenu est attendu lorsque vous utilisez cet élément. Aucune indication n’est donnée sur la façon dont cet élément s’affiche dans le navigateur. C’est à vous de décider si vous souhaitez qu’un titre apparaisse séparément au-dessus du texte ou qu’il soit affiché sur la même ligne. Dans les deux cas, le titre doit toutefois s’inscrire logiquement dans cette section.

Manuel HTML 5 & CSS, 7e édition

Cet article est un chapitre tiré du « Manuel HTML 5 & CSS, 7e édition » de Peter Doolaard. Le HTML et le CSS sont des éléments indispensables du Web. Sans HTML, il n’y a pas de page Web, et sans CSS, tout reste terne et sans couleur. Dans cette septième édition entièrement mise à jour du Manuel HTML & CSS, vous apprendrez à utiliser efficacement ces deux langages. Vous commencerez par le HTML : la structuration et le balisage du contenu, tels que les titres, le texte, les listes, les formulaires et le multimédia. Vous créerez ensuite, grâce au CSS, un design épuré, allant des couleurs et de la typographie aux mises en page complexes avec grid et flexbox. Vous bénéficierez d’explications actualisées sur le HTML, le CSS et les dernières techniques web telles que les « container queries ». Des exemples pratiques clairs et des exemples de code en ligne vous apporteront des éclairages supplémentaires.

Cet ouvrage publié par Van Duuren Media est notamment disponible chez Standaard Boekhandel au prix de 44,99 euros.

Inscrivez-vous à notre newsletter et recevez chaque semaine le meilleur de Clickx dans votre boîte mail.