patrickgross.
orgCours HTML
3.1. Récapitulatif.
Vous venez d'apprendre:
- Qu'une page web est structurée par les balises <html>, <head>, <body> à placer dans le bon ordre.
- Que seulement ce qui est entre <body> et </body> sera affiché.
- Qu'il est bien utile d'indenter et d'espacer le code source de votre page.
3.2. L'imbrication correcte des balises.
On ne peut pas placer nos balises de manière anarchique.
Je vais donner quelques exemples expliqués. Regardons ceci:
Ceci est correct. Alors que ceci ne l'est pas:
C'est assez évident, je crois. Non?
- Au premier paragraphe, "Bonjour!", il manque la balise fermante de ce premier paragraphe, nécessaire avant de commencer le deuxième paragraphe.
- Au deuxième paragraphe, "Et au revoir!", il y a un paragraphe imbriqué dans un paragraphe. C'est inadmissible. Un paragraphe ne peut pas contenir un paragraphe. avez-vous déjà vu un livre où un paragraphe est contenu dans une autre paragraphe? Jamais! Les paragraphes se suivent, ils ne sont jamais contenus les uns dans les autres.
- Le deuxième paragraphe, "Et au revoir!", en plus, est contenu dans le premier, puisque le premier n'a pas été fermé. Inadmissible, un outrage scandaleux.
Apprenons une nouvelle balise. La balise <i> permet de mettre une portion de texte en italique.
Ma balise <i> débute l'italique, et l'italique s'arrête lorsque je ferme ma balise avec </i>. On s'en doute, si vous ne fermez pas une balise <i> ouverte, tout le reste de la page sera en italique. Et même si c'est ce que vous vouliez, il manquera la balise de fermeture de l'italique, il y aura une balise ouverte et non fermée... Un véritable scandale!
Encore une nouvelle balise. La balise <b> permet de mettre une portion de texte en gras.
Fort bien.
Voici une chose que vous n'avez pas le droit de faire:
Ici, le crime n'est pas dans le grand titre fait avec la balise <h1>. Ceci est correct. C'est un grand titre, avec le mot "tout" en italique. Mais ensuite, vous avez une phrase, avec des gras et des italiques, dont la nature n'est pas connue: est-ce un grand titre, ou un paragraphe normal? On n'en sait rien, et cela ce n'est pas permis.
Et oui, voilà une règle à retenir: certaines balises ne sont autorisées qu'à "l'intérieur" d'autres balises.
Voilà qui serait correct:
Vous pouvez mettre du gras, de l'italique, à l'intérieur d'un paragraphe, d'un titre, mais vous ne pouvez pas avoir du texte "en dehors" de paragraphes, titres, etc...
Vous devez aussi veiller à imbriquer vos balises correctement. Ici, des mots sont à la fois en gras et en italiques, les balises pour le faire sont imbriquées, et elles sont imbriquées correctement:
Récapitulons. Essayer de trouver, pour chaque ligne de l'exemple ci-dessous, ce qui est faux:
Aucune de ces lignes n'est correcte! Utiliser des balises non permises en-dehors d'une autre, fermer une balise jamais ouverte, fermer une balise x alors qu'il aurait d'abord fallu fermer une balise y, tout cela est totalement navrant. Vraiment, cela me cause une grande peine. Mais surtout, cela vous causera une grande peine aussi: imaginez ce que le navigateur affichera à partir d'un pareil salmigondis!
2.3. Questions et réponses.
- "Quand je fais des erreurs d'imbrication, cela marche quand même, m'eme si cela ne donne pas exactement ce que je voulais. Alors, je croyais qu'en informatique. les "erreurs de syntaxe" causaient des plantures?"
Ah, vous voulez encore prendre de l'avance sur le cours du cours... Et bien soit.
Pendant longtemps, la "politique", c'était que le navigateur doit se débrouiller. Si l'auteur de la page fait des erreurs, le navigateur essaie d'afficher la page, du mieux qu'il peut. Par exemple, vous oubliez de fermer une balise, et le navigateur "devine" s'il peut, à quel endroit elle aurait du être fermée. Il "imagine" la balise manquante, il fait comme si elle était là, et dans bien des cas, ni vous ni les lecteurs de la page ne se rendent compte de l'erreur.
Par exemple, si vous oubliez de fermer un paragraphe avant d'en commencer un autre, le navigateur se doute bien que le premier aurait du être fermé avant que le deuxième ne commence. Il fait comme si vous l'aviez vraiment fermé, et tout va bien madame la marquise.
Mais dans d'autres cas, cela ne va pas si bien. Par exemple, vous vouliez juste mettre un mot en gras, mais vous avez oublié la balise de fin de gras derrière ce mot. Le navigateur n'a aucun moyen de deviner que vous vouliez seulement un seul mot en gras, il continuera donc à afficher les mots suivants en gras.
A un certain moment dans l'histoire d'HTML, des gens se sont dit que ce n'est pas une bonne chose qu'HTML soit ainsi tolérant aux erreurs. On a alors conçu une version de HTML qui n'est pas tolérante aux erreurs. Cette version de HTML oblige le navigateur à refuser d'afficher la page si elle comporte ne serait-ce qu'une seule erreur. Cet HTML intolérant, c'est XHTML.
Vous apprendrez à la fin de ce cours comment choisir, comment dire, au navigateur, si votre page est en HTML, tolérant, ou en XHTML, intolérant.
- "Qu'est-ce qui est juste? Ceci: <i><b>bla bla bla</b></i> ou celà <b><i>bla bla bla</i></b>?"
Les deux, mon colonel!
- "Tout cela m'a l'air vraiment compliqué. Maîtriser ce HTML m'a l'air assez ingrat, je n'y arriverais pas."
Mais si. Ne vous découragez pas si vite. Cette partie du cours à l'air un peu rébarbative, mais c'est fini, la suite est plus gratifiante.
Avec les exemples de la suite, ces règles d'imbrication, de fermeture des balises ouvertes, vous deviendront parfaitement naturelle. donc même si vous vous sentez un peu découragé(e) maintenant, poursuivez tout de même.
Voyons maintenant les balises permettant de faire des titres, sous-titres, sous-sous-titres, sous-sous-sous-titres et sous-sous-sous-sous-titres.
patrickgross.org
Samedi, 19 avril 2025
Précédent
Haut