📃 HTML#

HyperText Markup Language

C’est un format de données conçu pour représenter les pages web. Il s’agit d’un langage de balisage textuel qui peut être édité dans n’importe quel éditeur de texte. Une page web est un document HTML qui est un ensemble de balise HTML. HTML est le fond de nos documents.

Historique d’Internet#

1989 - 1992 Inspiré de SGML, titre du document, hyperliens, structuration du texte en titres, sous-titres, listes et texte brut
1993 NCSA Mosaic Début de normalisation en se basant sur les implémentations des navigateurs. Apport des images et des formulaires
1992 Netscape Nombreux éléments de mise en forme et surtout le CSS (Cascading Style Sheets)
2000 - 2006 Abandon de HTML pour XHTML (Extensible HyperText Markup Language) pour reprendre la simplification de XML
2007 - 2015 HTML5 et abandon de XHTML2
L’avenir ? HTML Living Standard

Rendering Engine

Programme qui rend le contenu balisé (HTML) avec des informations de formatage (CSS).

Document HTML#

Un document HTML est un ensemble entête et corps. Par convention l’extension est .html. Le fichier de base de tout site se nomme index.html. Un document HTML est un simple fichier contenant du texte formatté avec des balises HTML.

Avertissement

Les noms de fichiers que vous utiliserez dans tout programme informatique devront être en minuscules sans caractères spéciaux !

Quelques exemples:

index.html ✔️
Index.html ✖️
Accueil.html ✖️
accueil.html ✖️
mon_fichier.txt ✔️
Mon spuer fichier.txt ✖️
foldername ✔️
Mon dossier(1) ✖️

Anatomie d’une balise HTML#

Tout texte entre les chevrons (brackets) < et > est considéré comme une balise. <p> est une balise ouvrante, </p> est la balise fermante qui lui correspond.

Note

Les éditeurs de code reconnaissent les balises et les mettent automatiquement en couleur pour faciliter la lecture du code HTML.

Règle d’emboîtement#

Toute balise B ouverte à l’intérieur d’une balise A doit également être fermée à l’intérieur de A.

<p>Emboîtement <strong>correct</strong>!</p>
<p>Emboîtement <strong>incorrect</p>!</strong>

Attribut d’une balise#

Certaines balises en plus du contenu textuel ont besoin d’information supplémentaire (qui n’apparait pas dans le document). Cette information est donnée par des attributs, qui ont la forme nom=valeur et sont placés entre les chevrons de la balise ouvrante, après son nom.

<a href="https://ugaritic.fr/">DY.info</a>

Balise auto-fermante#

Certaines balises particulières n’attendent pas de contenu textuel. Ces balises vides n’ont donc pas de balise fermante correspondante. Il convient d’indiquer explicitement l’absence de balise fermante en ajoutant la barre oblique à la fin de la balise ouvrante.

<img src=".." alt=".." />

Important

HTML considère tous les caractères d’espacements (espaces, retours à la ligne…) comme des séparations entre mots, et les affiche comme une simple espace. Cela donne de la souplesse dans la mise en page du code HTML (notamment en utilisant l’indentation, comme en programmation).

Squelette de base HTML#

Il est constitué d’un marqueur pour identifier le type de standard en début de fichier (ligne 1), d’une balise délimitant le document (html) puis d’une entête et d’un corps.

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

L’entête head#

Sert à indiquer le titre du document des informations (meta-données) sur celui-ci (auteur, date de création, de maj, …) qui ne sont pas directement affichés des styles, des scripts, … Ce sont des informations sur le document, peu de balises y sont autorisées, son contenu ne sera jamais affiché sur la page !

Pour indiquer le titre du document on utilise la balise title et pour ajouter des informations sur le document la balise meta.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello HTML!</title>
        <meta charset='UTF-8' />
        <meta name="author" content="Samy Delahaye" />
    </head>
    <body></body>
</html>

Il existe différente normes pour coder les accents dans les chaînes de caractère, utf-8 est la plus récente. latin1 est la norme historique pour les langues occidentales. L’utilisation d’utf-8 est fortement recommandé de nos jours!

Le corps body#

Contient l’ensemble de la page qui sera visible dans le navigateur. C’est le fond de notre documents, CSS en sera la forme. Les données sont encapsulées dans des balises correpondant au type de la donnée (titre, paragraphe, image, liste, …). Il existe deux grandes familles d’élèment HTML: BLOCK et INLINE.

Les blocks#

Titres, paragraphes, listes, ou tableaux, ce sont de « grandes » structures qui contiennent d’autres structures ou élèments. Ils provoquent automatiquement une séparation verticale et prennent par défaut 100% de la largeur du document.

Les titres#

Un document typique est une séquence de titres (ou en-tête, en anglais heading), et de paragraphes. Les titres ont différents niveaux d’importance, repérables à leur typographie (et parfois à leur numérotation), et donnent une structure hiérarchique au document (en parties, sous-parties, etc.).

<h1>Title level 1</h1>
<h2>Title level 2</h2>
<h3>Title level 3</h3>
<h4>Title level 4</h4>
<h5>Title level 5</h5>
<h6>Title level 6</h6>

Les paragraphes#

Les paragraphes sont délimités par la balise <p>.

<p>In a hole in the ground there lived a hobbit.</p>
<p>Not  a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means
comfort.</p>

Listes en HTML#

Une liste est un paragraphe d’un type particulier contenant une énumération d’éléments.

Liste non ordonnée

<ul>
    <li>sucre</li>
    <li>céréales</li>
    <li>lait</li>
</ul>

Liste ordonnée

<ol>
    <li>sucre</li>
    <li>céréales</li>
    <li>lait</li>
</ol>

Liste descriptive

<dl>
    <dt>Name</dt>
    <dd>Skywalker</dd>
    <dt>Firstname</dt>
    <dd>Luke</dd>
</dl>

Note

ul signifie unordered list
ol signifie ordered list
li signifie list item
dl signifie descriptive list
dt signifie descriptive title
dd signifie descriptive data

Tableau#

Permet de représenter un tableau de données, c’est-à-dire des informations exprimées sur un tableau en deux dimensions.

<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Skywalker</td>
        </tr>
    </tbody>
</table>

Les inlines#

Hyperliens, les citations, ou images, ce sont de « petites » structures qui représentent de petits morceaux de textes ou de données. Ils sont affichés l’un après l’autre sur une ligne à l’intérieur du bloc qui les contient.

Les liens#

Représenter par la balise a, pour anchor, permet de créer des liens internes au document ou externe (vers d’autres documents).

<a href="https://ugaritic.fr" title="rendez vous sur Ugaritic.fr"> Ugaritic</a>

Les images#

Représenter par la balise img, les attributs src (source) et alt}` (alternative text) sont obligatoires.

<!-- Distant img -->
<img src="http://..." alt="Sad kitten" />
<!-- Local img -->
<img src="img/kitten.jpg" alt="Sad kitten" />

Quelques inlines utiles#

<p>The word <strong>strong</strong> is bolded.</p>
<p>The word <em>emphasize</em> is emphasized.</p>

Span et Div#

HTML fournit deux balises neutres (c.à.d. sans sémantique particulière) : <span> qui est un inline et <div> qui est un block.

Ces éléments sont utiles pour rajouter de la structuration au document, notamment en portant des classes personnalisées. Il est toutefois préférable d’utiliser une balise sémantique proche du contenu qu’une balise neutre.

Sections#

Jusqu’à HTML 4.01, la structuration en sections était laissée implicite. Depuis HTML5, on est encouragé à utiliser la balise <section>, d’autant que les anciens navigateurs l’ignoreront purement et simplement.

Utilisation des sections#

Via l’utilisation des sections, ce code html

<h1>The Skeksis</h1>

devient

<section>
    <h1>The Skeksis</h1>
</section>

<h1>The Skeksis</h1>
<h2>Description</h2>
<p>Reptilian and bird-like creatures</p>

devient

<section>
    <h1>The Skeksis</h1>
    <section>
        <h2>Description</h2>
        <p>Reptilian and bird-like creatures</p>
    </section>
</section>

Sections spécialisées#

Il existe des sections plus spécialisées, nous reviendrons sur leurs utilisations durant le chapitre sur les bonnes pratiques.

main contenu principal de la page
article contenu auto-suffisant
aside encart
header en-tête de la section parent (ou du doc)
footer pied de la section parent (ou du doc)
nav section contenant des liens (navigation)

Indication

Le W3C fournit un service de validation en ligne http://validator.w3.org, son utilisation vous est vivement recommandée.

DOM - Document Object Model#

Lors du chargement de la page, le navigateur créé un arbre DOM. Il est construit comme un arbre d’objets standard du W3C. Il s’agit d’une interface de mise à jour du contenu, structure et style de document HTML/XML.

Premier pas en HTML#

À faire

Créer un nouveau dossier TP1
Créer un fichier index.html
Pourquoi ce nom de fichier ? Avez-vous pensé à l’encodage du fichier ? Pourquoi UTF-8 ?
Créer le squelette de document HTML5 dans le fichier précédent
L’entête de notre document HTML contient deux élèments, quels sont leurs utilités ?
Quel élément correspond au corps du document ? Quel est son utilité ?
Au sein du corps du document créez les éléments suivants:
- Des titres de niveau 1 à 6
- Un paragraphe
- Une image, Quelle est l’utilité des attributs src et alt ?
- Un lien vers une page html (news.html que vous aurez au préalable créé), Quelle est l’utilité des attributs href et title ?
- Une liste désordonnée
- Une liste ordonnée
- Une liste descriptive
Nous avons mélangé des éléments de type inline et block, voyez-vous la différence entre ces deux types d’éléments ?

Astuce

Voici le squelette de tout document HTML5:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <meta charset="utf-8" />
    </head>
    <body>
    </body>
</html>

nb: un commentaire en HTML#

<!-- COMMENTAIRE -->

Mise en forme de règles#

À faire

Téléchargez le texte et mettez en forme celui-ci (comme l’exemple ci-dessus) en utilisant les balises suivantes:

<p>
<h1>
<h2>
<h3>

Note

La mise en forme sera différente, mais cherchez surtout à reproduire la structure logique du document.

Téléchargez le modèle HTML correspondant à l’exemple, et recopiez votre code à l’intérieur de la balise <body> . Ce modèle contient un lien vers la feuille de style appropriée.

Note

Dans les deux cas, ne tenez pas compte pour l’instant des mots en gras, italique et souligné.

Améliorez votre version de l’exemple ci-avant en ajoutant les balises <section>.
Reprenez votre code HTML reproduisant l’exemple ci-avant, et ajoutez les balises manquantes.
- Le rendu doit maintenant être très proche de celui de l’exemple.
Dans l’exemple ci-avant pouvez-vous identifier une liste ? Reprenez votre code HTML reproduisant cet exemple et modifiez-le en conséquence.
- Le rendu doit maintenant être identique à celui de l’exemple.

Structurons notre page#

À faire

Au sein du corps du document défini précédemment créez plusieurs articles de type actualités

Indication

Une actualité est à minima constitué d’un(e):

titre
auteur
contenu
date de publication
catégorie
miniature

Exemple d’un article en HTML#

<div>
    <h2>The Last Jedi trailer is out !</h2>
    <ul>
    <li>Written by Samy Delahaye</li>
    <li>On Thurday 21, sept. 2017</li>
    </ul>
    <p>Insert some fanboy text here !</p>
    <a href=".." title="..">Read more !</a>
</div>

Astuce

Si vous cherchez du texte de remplissage pour vos tps, je vous conseille l’excellent site fillerama

Un menu de navigation n’est rien d’autre qu’une liste de liens non ordonnée.
Créer un menu de navigation en utilisant les balises ul, li et a.
Ajouter la classe menu à la balise ul

<div class="maclass"></div>

Règles 2 (bonus)#

Si vous êtes en avance sur le reste du groupe.

Téléchargez l'archive suivante contenant une partie des règles du jeu citadelles.

Remettez le fichier de règles en forme comme précédemment. Toutefois le mot carte peut parfois être suivi de certains nom de personnage, de lieu, etc.. dans ce cas il convient de le remplacer par l’image correspondante présente dans le dossier img.

Livre dont vous êtes le héros#

Téléchargez ce fichier html. Il contient un livre dont vous êtes le héros minimaliste.

Faites en une version interactive avec des liens internes.

Chapitres dont vous êtes le héros#

Faites en une version interactive ou chaque entrée est une page HTML distincte (en utilisant ces fichiers HTML ).