Communiquer, collaborer, échanger à l'ère numérique
Introduction aux langages HTML et CSS
Retour sur vos réalisations
Syntaxe — balises
Balise ouvrante : <p> | balise fermante : </p>
Principe 1 : toute balise ouverte doit être fermée !
mon contenu
Syntaxe — balises
Principe 2 : Les éléments peuvent s’imbriquer, mais pas se chevaucher !
<p>Mon contenu avec du texte en <i>italique</i></p>
<p>Mon contenu avec du texte en <i>italique</p></i>
Syntaxe — balises
Principe 2 : Les éléments peuvent s’imbriquer, mais pas se chevaucher !
✅ <p>Mon contenu avec du texte en <i>italique</i></p>
❌ <p>Mon contenu avec du texte en <i>italique</p></i>
Syntaxe — attributs
Un attribut est une paire nom-valeur associée à la balise ouvrante d’un élément.
Lorem ipsum…
Syntaxe — attributs
<p id="monId">Lorem ipsum…</p>
<p id=monId>Lorem ipsum…</p>
<pid=monId>Lorem ipsum…</p>
<p>Lorem ipsum…</p id=monId>
La valeur id ne prend pas d’espace : ✅ id="monId" | ❌ id="mon Id"
Syntaxe — attributs
✅ <p id="monId">Lorem ipsum…</p>
❌ <p id=monId>Lorem ipsum…</p>
❌ <pid=monId>Lorem ipsum…</p>
❌ <p>Lorem ipsum…</p id=monId>
La valeur id ne prend pas d’espace : ✅ id="monId" | ❌ id="mon Id"
Confusion dans l’utilisation des balises
La balise <head> contient les métadonnées et est placée avant le <body>
La balise <header> indique l’en-tête du document et est placée dans le <body>
La balise <title> précise le titre du document, dans la barre des onglets. Elle est placée dans l’élément <head>
Les balises <h1> à <h6> indiquent des niveaux de titre dans un document. Elles sont utilisées dans le <body> et certains sous-éléments de ce dernier (<div>, <article>, <section>, etc.).
Structuration du contenu et balisage sémantique
Le langage HTML permet de structurer du contenu pour publier sur le web.
Il contient un grand nombre de balises dites sémantiques c’est-à-dire qu’elles apportent une indication sur le type de données qu’elles contiennent.
Utilisez-les !
Langages descriptifs
SGML
Un langage de balisage descriptif est un langage qui se contente de décrire des données, sans nécessairement avoir un objectif de traitement.
Dans les années 80, Charles Goldfarb, un ancien ingénieur de chez IBM, met au point le langage SGML (Standard Generalized Markup Language) pour la représentation des données contenues dans un document. SGML ne prend pas en compte les systèmes utilisés pour la saisie et le traitement, ni des solutions de publication.
SGML est un métalangage qui introduit la notion de DTD (Document Type Definition) qui permet de décrire un modèle de document.
Un document SGML se compose de 3 parties : une DTD, une ou plusieurs feuilles de style et une instance
L’application la plus connue de SGML est HTML. Toutefois, contrairement à SGML, HTML mélange des balises sémantiques et des balises de présentation.
Un petit exercice de balisage…
Alan Turing
23 juin 1912 à Londres (Royaume-Uni) - 7 juin 1954 à Wilmslow (Royaume-Uni)
Alan Mathison Turing est un mathématicien et cryptologue britannique, auteur de travaux qui fondent scientifiquement l'informatique.
Un petit exercice de balisage…
<html>
<head/>
<body>
Alan Turing
23 juin 1912 à Londres (Royaume-Uni) -
7 juin 1954 à Wilmslow (Royaume-Uni)
Alan Mathison Turing est un mathématicien
et cryptologue britannique, auteur de travaux
qui fondent scientifiquement l'informatique.
</body>
</html>
Un petit exercice de balisage…
Alan Turing
23 juin 1912 à Londres (Royaume-Uni) - 7 juin 1954 à Wilmslow (Royaume-Uni)
Alan Mathison Turing est un mathématicien et cryptologue britannique, auteur de travaux qui fondent scientifiquement l'informatique.
Un petit exercice de balisage…
<notice>
Alan Turing
23 juin 1912 à
Londres (Royaume-Uni) -
7 juin 1954 à
Wilmslow (Royaume-Uni)
Alan Mathison Turing est un
mathématicien et
cryptologue britannique,
auteur de travaux qui fondent scientifiquement
l'informatique.
</notice>
Un petit exercice de balisage…
3 étapes
- on identifie des données
- on choisit des balises
- on balise le texte (encodage)
Avantages
- distinction contenu/forme
- facilite les traitements des textes encodés
- excellent format pivot (portabilité des documents)
Les limites de SGML
- Complexe à mettre en œuvre (nécessite la déclaration d’une DTD)
- Peu adapté à l’édition sur le Web
- Prise en charge limitée des jeux de caractères internationaux…
XML
En 1998 naît XML afin de régler les difficultés posées par SGML. XML se veut plus simple à mettre en œuvre. XML se borne à définir ce qu’est un document bien formé et valide.
XML ne sert pas à afficher les données mais à les décrire.
Le nom des balises n’est pas prédéfini.
On peut utiliser un schéma (optionnel), pour définir des contraintes ou s’assurer de la consistance de l’encodage.
XML est auto-descriptif et lisible par l’homme.
Imaginez un encodage pour le testament de Pierre, Albert Giret
Ceci est mon testament
Je soussigné Pierre, Albert Giret, fils de feu Pierre, Jean Giret et de Marie Vialette, étant absolument sain de corps et d’esprit, déclare donner à ma mère Madame veuve Giret tous mes biens présents et à venir, libre à elle d’en disposer à son gré.
Daté, signé et écrit de ma main en pleine liberté aux Armées d’Orient le dix-neuf novembre mil neuf cent dix-sept (19 novembre 1917).
A. Giret caporal au 61e régiment d’infanterie 2e compagnie de mitrailleurs, Armée d’Orient.
Testament de Giret, Pierre, Albert. Lien vers le facsimile
Et avec la TEI
Structure
En-tête/titre : <head/>
Paragraphe : <p/>
Date et lieu : <dateline/>
Signature : <signed/>
Contenu
Personne : <persName/>
Lieu : <placeName/>
Organisme : <orgName/>
Date : <date />
Normalisation des dates : @when
Normalisation des types : @type