Source
- HTML 4.01 Specification. Version du 27 mars 2018 / Groupe W3C, D. Ragget. W3C, 1999. At : http://www.w3.org/TR/html-4-01 [HTML][Consultation le 22 décembre 2023].
HTML, HEAD, TITLE, etc.) et balises correspondantes (<HTML> … </HTML>) en HTML.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> < HTML > < HEAD > < TITLE > My first document</ TITLE > < BODY > < P > Hello World!</ P > </ BODY > </ HTML >
Script / W3C. In : HTML 4.01 Specification. Version du 27 mars 2018 / Groupe W3C, D. Ragget. W3C, 1999. At : http://www.w3.org/TR/html-4-01 [HTML][Consultation le 22 décembre 2023], section 7.1 (Introduction to the structure of an HTML document).
On SGML and HTML (1)
SGML is a system for defining markup languages. […] HTML is one example of a markup language.
…
An SGML application is generally characterized by […] a document type definition (i). The DTD [Document Type Definition] defines the syntax of markup constructs [elements/attributes/character references].
- Voir Document Type Definition. In : [1]. At : http://www.w3.org/document-type-definition [HTML][Consultation le 23 juillet 2014].
An SGML document type definition declares element types that represent structures or desired behavior. HTML includes element types that represent paragraphs, hypertext links, lists, tables, images, etc. Each element type declaration generally describes three parts: a start tag, content, and an end tag.
Elements may have associated properties, called attributes, which may have values.
Character references are numeric or symbolic names for characters that may be included in an HTML document.
SGML et HTML
Le SGML (Standard Generalized Markup Language) est un langage de balisage générique qui permet de créer toutes sortes de langages (de balisage) spécifiques : ici, le langage HTML (Hypertext Markup Language), qu'on utilisera pour créer des documents HTML, en d'autres termes, des pages Web.
Déclaration et utilisation des éléments de structure
SGML servira à déclarer (dans un document appelé DTD, voir infra) les éléments de structure qu'on aura d'utiliser dans les documents HTML. Ci-dessous, la traduction de cette correspondance entre éléments déclarés et éléments utilisés :
-
Déclaration, en SGML, des éléments de base
html,headetbody:<!ELEMENThtml (head ,body) >Cet extrait de code signifie que les documents HTML devront faire intervenir les éléments
html,headetbody, et que l'élémenthtmlsera le parent des élémentsheadetbody. -
Utilisation en HTML des éléments déclarés en SGML :
< html > < head > …</ head > < body > …</ body > </ html > Chacun des trois éléments considérés,
html,headetbody, donne lieu à un jeu de balises associant balise d'ouverture (<html>,<head>,<body>) et balise de fermeture (</html>,</head>,</body>: on relèvera l'ajout de la barre oblique pour faire la différence). Enfants de l'élémenthtml, les élémentsheadetbodyverront leurs balises respectives enchâssées dans celles de l'élémenthtml.
Pour intégrer titre de page et paragraphe, on fera appel aux éléments h1 et p qu'on aura, selon les règles définies dans la DTD, à placer sous l'élément body, entre <body> et </body> :
< html >
< head > … </ head >
< body >
< h1 > … </ h1 >
< p > … </ p >
</ body >
</ html >
SGML et DTD
La DTD (Document Type Definition) est le document SGML dans lequel sera définie la grammaire des documents HTML, avec la liste complète et des éléments et des attributs à considérer, plus celle des références à utiliser pour les caractères spéciaux (voir infra).
DTD et attributs
La DTD indiquent les attributs à considérer pour chacun des d'éléments. Ces attributs, qui serviront à fixer le comportement desdits éléments, seront valorisés dans les documents HTML.
Pour un élément donné h2, avec lequel on souhaiterait utiliser l'attribut class, afin d'exploiter la classe section_niveau_ii, le code s'écrira de la manière suivante :
< h2 class = "section_niveau_ii" > … </ h2 > Remarque.— C'est dans cette classe section_niveau_ii, en règle générale définie dans un fichier à part appelé feuille de style, qu'on fera appel aux propriétés qu'il conviendra de personnaliser : la police, la couleur, le corps (c'est-à-dire la taille du texte), etc.
DTD et références
La DTD indiquent les références à utiliser pour les caractères qui ne sont pas intégrables directement.
Exemples :
- Les références
«(left angle quote) et»(right angle quote) représentent les guillemets ouvrant («) et fermant (»). - La référence
(non-breaking space) représente l'espace insécable (qu'on ajoutera avant les deux-points, notamment, pour que ceux-ci restent attachés aux mots qui les précèdent). - La référence
<(less than) représente le signe « < ».
DTD et types d'éléments
La DTD fournit des éléments, qui en réalité ne sont que des types d'éléments. C'est dans les documents HTML qu'interviendront les véritables éléments, instances des types d'éléments définis dans la DTD.
Un document donné dans lequel seront intégrés trois en-têtes de section et trois paragraphes (un par en-tête), fera intervenir en tout six éléments, (trois éléments h2, autant d'éléments p) renvoyant aux deux seuls types d'éléments déclarés dans la DTD, h2 et p.
Les six éléments, qui dans le document HTML se présenteront de la manière suivante :
< h2 > 1er en-tête de section</ h2 >
< p > 1er paragraphe</ p >
< h2 > 2e en-tête de section</ h2 >
< p > 2e paragraphe</ p >
< h2 > 3e en-tête de section</ h2 >
< p > 3e paragraphe</ p >
SGML et notion d'entité
Le SGML fait intervenir la notion d'entité avec : d'une part, les entités dites générales (general entities), qui permettent d'appeler (depuis le document) un contenu défini dans la DTD ; d'autre part, les entités de paramétrage (parameter entities), qui elles, ne sont opérantes qu'à l'intérieur de la DTD.
SGML et mécanismes de référencement
SGML fait intervenir des mécanismes de référencement des caractères qui sont soit numériques soit symboliques. Le référencement numérique (character reference) charge les caractères à partir de leur point de code. Le référencement symbolique (entity reference) permet lui de les charger à partir d'un nom symbolique (1) (plus facile à retenir).
HTML Document Representation
The "charset" parameter identifies a character encoding, which is a method of converting a sequence of bytes into a sequence of characters. [...] Servers send HTML documents to user agents as a stream of bytes; user agents interpret them as a sequence of characters.
Numeric character references specify the code position of a character in the document character set.
…
å(in decimal) represents the letter "a" with a small circle above it.
Character entity references use symbolic names so that authors need not remember code positions. For example, the character entity reference
årefers to the lowercase "a" character topped with a ring; "å" is easier to remember thanå.
C'est la spécification du jeu de caractères à utiliser, dans la page HTML, qui permet au navigateur de décoder l'information.
Block-level and Inline Elements
Generally, Block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not.
On retiendra que les éléments de bloc sont des conteneurs qui servent à définir l'architecture des pages tandis que les éléments de ligne serviront eux à formater les contenus (texte et images notamment).
Deux éléments de bloc (resp. de ligne) voisins, c'est-à-dire codés l'un après l'autre dans le document HTML, viendront s'afficher l'un en dessous (resp. à côté) de l'autre dans la page Web correspondante.
The Global Structure of an HTML Document (1)
Il faut distinguer les éléments les plus structurants :
html(2) ;head(3) ;title(4) ;meta(5) ;- et
body(6) ;
présents dans tout document ; de ceux qui, en dessous des éléments susmentionnés (sur le plan logique), viendront structurer les contenus présentés à l'utilisateur final :
- tant sur le plan matériel : avec l'élément
div(7) ; - que sur le plan logique : avec les en-têtes (
h1,h2,h3…) (8).
