Introduction aux langages HTML et CSS
18 octobre 2024 : Évaluation HTML (questions et réalisation d’une page Web) (± 1h - 1h30)
13 décembre 2024 : Évaluation HTML-CSS (questions et réalisation d'une feuille CSS) (± 1h - 1h30)
31 décembre 2014 : Projet web à rendre (un mini site sur un sujet de votre choix (1-3 pages max), correctement structurée et vous permettant d'explorer un ou plusieurs éléments de design avancés.
À de rares exceptions près, HTML n’est pas sensible à la casse !
Many strings in the HTML syntax (e.g. the names of elements and their attributes) are case-insensitive, but only for ASCII upper alphas and ASCII lower alphas. For convenience, in this section this is just referred to as "case-insensitive".
WATHWG, HTML Living Standard, https://html.spec.whatwg.org/multipage/syntax.html#syntax
Au tout début de HTML, on utilisait des capitales pour les noms de balises, aujourd’hui on utilise plus volontiers le bas de casse. Pour autant, les anciennes pages web s’affichent toujours dans les navigateurs, à l’image de la première !
On peut donc écrire indifféremment :
Mon paragraphe.
<P>Mon paragraphe.</P>
<p>Mon paragraphe.</P>
Certaines balises ont des :
noms courts (<p/>, <a/>, <i/>, <b/>, etc.), héritage d’une époque où il était nécessaire d’économiser les ressources informatiques…
Un PC moyen en 1990 c'est un processeur de 16 MHz, un disque dur de 80 Mo et une mémoire vive de 2 Mo.
noms longs (<video/>, <blockquote/>, <article/>, etc.) plus explicites et facilement compréhensibles par l’humain.
La taille des balises est un (relativement) bon indicateur de leur ancienneté !
Aujourd’hui, toutes les balises fonctionnent par paire : une balise ouvrante et une balise fermante ! Mais il fut un temps où l’on considérait que si une balise fermante n’était pas nécessaire, alors pourquoi en utiliser une ? C’était le cas pour <br> (saut de ligne) et <img> (image) par exemple, qui sont des balises vides, sans contenu. Avec l’arrivée de la syntaxe XML et XHTML, on a pensé qu’il était mieux d’indiquer que ces balises étaient auto-fermantes en ajoutant un slash (/).
En réalité aujourd’hui plus personne ne se préoccupe de cette question !
HTML est donc un langage robuste et résilient, qui supporte beaucoup d’abus sans pour autant rencontrer de situation bloquante empêchant, par exemple, une page de s’afficher.
Pour autant, des erreurs restent possibles qui peuvent gêner la lecture d’une ressource. Il faut donc être capable de les déboguer.
On dispose principalement de 3 outils :
Les outils du développement web sont présents dans tous les navigateurs récents. Ils permettent :
Pour y accéder :
Firefox : Outils/Outils du navigateur/Outils de développement web
Safari : Developpement/Afficher l'inspecteur web
Chrome : Afficher/Options pour les développeurs/Outils de développement
Edge : Paramètres et bien plus encore (...)/Autres outils/Outils de développement
Ou, pour tous les navigateurs, clique droit sur la page ou sur un élément et sélectionner Inspecter ou Inspecter l’élément
Le code que l'on voit est en réalité le DOM (Document Object Model) créé par le navigateur :
Valider une page web c’est s’assurer que l’on est conforme aux spécifications du W3C. Mais ce n’est pas qu’une question de syntaxe.
Un code « propre » est plus facile à lire, à maintenir et est plus performant, tout en assurant une bonne compatibilité avec tous les navigateurs.
Attention, la validation ne corrige pas tout !
Linter ou Hint, ce ne sont ni plus ni moins que des systèmes de validation intégrés à des éditeurs de texte.
Il en existe pour tous les langages (HTML, CSS, Javascript, etc.).