# Bloc 1 - Web-Front end Fiche 1 - Notions de base HTML
# Bloc 1 – WebFront-End
sources : fiches récapitulatives David Roumanet - enseignant en STS SIO Grenoble
## Fiche récapitulative – Notions essentielles HTML
Le code HTML d'une page permet de spécifier **l’ordre d’affichage des éléments**. Le flux d’un document pourrait se définir comme étant le comportement naturel d’affichage des éléments d’une page web, ces éléments se succèdent dans l’ordre où ils sont déclarés dans le code HTML.
Le code CSS correspond à la mise en page du HTML. Le flux courant (HTML sans mise en page) est constitué par les éléments de type bloc qui s’affichent les uns sous les autres, selon l’ordre indiqué dans le code HTML.
## 1. Rôle du HTML et du CSS
La notion de flux est essentielle pour bien maîtriser toutes les subtilités du positionnement en css. A l’écran, les différents éléments viennent se positionner de gauche à droite puis de haut en bas (dans le sens de lecture occidental direction:ltr):
Le flux correspond à l’écoulement des informations (ou données) dans le processus d’interprétation des navigateurs.
Le **HTML** sert à **structurer le contenu** d’une page web. Il définit l’ordre et la nature des éléments (titres, paragraphes, images, liens, tableaux…).
Un fichier HTML contient des informations que le navigateur ne doit pas afficher mais interpréter. Ces informations sont lisibles dans un éditeur de texte. On utilise les symboles `<` et `>` pour encadrer les instructions destinées au navigateur.
Le **CSS** s’occupe exclusivement de la **mise en forme** (couleurs, tailles, positionnement, responsive design).
```HTML
< >
```
👉 Principe fondamental :
L'ensemble (symboles de délimitation `<``>` et l'instruction) est appelé balise. Chaque balise ouverte doit être fermée pour créer un bloc. La balise fermante contient le symbole `/` devant l'instruction.
* HTML = **sens et structure**
* CSS = **apparence**
```HTML
<html>
</html>
```
La page web est décrite comme un document web dès la première ligne. Selon la version de HTML utilisé, il existe deux déclarations :
XHTML (pseudo-HTML4)
## 2. Notion de flux HTML
```HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
HTML5 (version recommandée)
```HTML
<!DOCTYPE html>
```
Par défaut, le navigateur affiche les éléments HTML selon le **flux normal du document** :
Ensuite, deux sections sont présentes :
- L'entête HTML : cette section contient principalement des informations sur la page.
- Le corps HTML : ici, c'est le contenu de la page à afficher à l'utilisateur.
* de **haut en bas**
* de **gauche à droite** (sens de lecture occidental)
Les éléments de type **block** (ex : `<div>`, `<p>`, `<h1>`) s’empilent verticalement.
Les éléments de type **inline** (ex : `<span>`, `<a>`, `<strong>`) s’insèrent dans le texte.
Il en résulte le code (minimum) suivant :
➡️ La maîtrise du flux est indispensable pour comprendre le positionnement en CSS.
```HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
```
L'objectif de cette ficher est de fournir les informations sur les balises qu'on peut insérer dans les deux sections `head` et `body`).
## 3. Balises HTML : principe général
Une balise est une instruction donnée au navigateur, encadrée par `<` et `>`.
## Section `head`
La section `<head> </head>` contient les informations pour le navigateur mais aussi pour les moteurs de recherches. Elle n'est pas visible par l'utilisateur.
Dans leurs algorithmes, Google, Bing, Yahoo utilisent les informations contenues dans cette section pour classer et mémoriser les pages. Alors, certes, ce n'est pas grand-chose dans le référencement, mais c'est la première à bien respecter.
* Balise ouvrante : `<html>`
* Balise fermante : `</html>`
### Balise `title`
La première information est le titre de la page.
Toute balise ouverte doit être fermée (sauf exceptions comme `<meta>` ou `<img>`).
```HTML
<title>Bonjour</title>
```
En l'absence d'autres balises, les moteurs de recherches utilisent le contenu de cette balise.
## 4. Structure minimale d’un document HTML5
### Les balises `meta`
HTML5 est aujourd’hui la **norme recommandée**.
Le préfixe `meta` vient du grec et signifie "au-delà". Le format est `<meta xxxxx="yyyyyy">`.
Ces balises n'ont pas de balises de fermeture.
L'idée des balises méta est de pouvoir donner des informations "au-delà de la page", c'est-à-dire impossible à déduire à partir du contenu de la page. Les balises méta n'ont donc pas d'affichage.
#### Balise `meta charset`
Cette balise est à mettre obligatoirement, elle détermine comment le texte contenu dans la page sera interprété par le navigateur.
En effet, entre l'ASCII, l'ANSI (ISO) et maintenant UTF-8, les navigateurs peuvent ne pas afficher correctement les caractères spéciaux, et notamment, les accents.
Cependant, la norme actuelle la plus pratique est le codage en UTF-8. Voici la balise correspondante en HTML 5 :
Il est recommandé de placer la balise `meta charset` dès le début de la section `<head>` car cette dernière peut déjà contenir des caractères utilisant l'encodage spécifié.
#### Balise `meta name`
Encore un sous-ensemble contenant plusieurs propriétés :
-`meta name="author"` pour spécifier l'auteur de la page
-`meta name="description"` pour décrire le contenu de la page (un résumé que les moteurs de recherche affichent)
-`meta name="keywords"` contiendra les mots-clés de la page pour les moteurs de recherche. Cette balise est obsolète, les moteurs analysant le contenu des pages et en ressortent le thème et la fréquence statistique des mots.
-`meta name="generator"` définit l'outil utilisé pour générer la page. C'est notamment le cas pour les CMS.
-`meta name="robots"` donne des instructions pour les robots des moteurs de recherches. On peut par exemple demander qu'une page ne soit pas indexée : `<meta name="robots" content="noindex">`. Cependant, il y a d'autres alternatives (comme le fichier `robots.txt` à la racine du site
Vous trouverez un article sur les balises `meta` sur le site [alsacreations](https://www.alsacreations.com/article/lire/628-balises-meta.html).
#### Balise `meta name viewport`
La balise `meta name="viewport"` est devenue incontournable depuis que les surfaces d'affichage des tablettes et smartphones ont rendues la gestion des pages web plus complexe.
Entre les différents formats d'affichage des constructeurs et le fait de pouvoir pivoter l'affichage de 90°, tout en continuant à afficher sur des navigateurs d'ordinateurs (l'écran FullHD ne reflète pas la taille de la fenêtre du navigateur) relève effectivement du casse-tête.
L'avantage est de pouvoir, en HTML5, donner des instructions relatives à la taille et à l’échelle du viewport aux navigateurs mobiles afin que les différents éléments d’une page s’affichent au mieux.
<meta name="description" content="démonstration des balises HTML en module SI6"> <meta name="keywords" content="HTML, balise, XML, JavaScript"> <title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
...
</head>
<body>
...
<!-- Le reste du contenu -->
...
</body>
</html>
```
Je vous recommande de consulter, aussi, la page [alsacreations](https://www.alsacreations.com/article/lire/1374-html5-structure-globale-document.html) qui fournit des informations sur la création de pages, notamment des liens vers des sites qui fournissent des modèles (templates).
## Section Body
Commençons par les balises de mise en forme dans HTML. Ces balises seront ensuite référencées dans le code CSS pour la mise en page.
### Les balises titre (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`)
Comme sous Microsoft Office ou LibreOffice, ces balises constituent les titres de la page, de manière hiérarchique.
Le code suivant
```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple de titres</title>
<title>Titre de la page</title>
</head>
<body>
<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<h3>Titre sous-titre secondaire</h3>
<h4>Titre sous-sous titre</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
<!-- Contenu visible -->
</body>
</html>
```
affiche
## 5. Section `<head>` (informations non visibles)
### Les balises paragraphe (`p` et `br`)
La section `<head>` contient des informations destinées au **navigateur** et aux **moteurs de recherche**.
La balise `<p>` et son terminateur `</p>` délimitent un paragraphe. Cela signifie notamment un saut de ligne automatique entre chaque paragraphe. La balise `<br/>` ordonne un simple retour à la ligne.
### Balises indispensables
Le code suivant
***`<meta charset="utf-8">`** : encodage des caractères (obligatoire)
***`<title>`** : titre de la page (onglet + SEO)
***`<meta name="viewport">`** : adaptation mobile
```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple de paragraphe</title>
</head>
<body>
<h1>Les paragraphes et sauts de ligne</h1>
<p>Ceci est un paragraphe</p>
<p>Ceci est un autre paragraphe<br/>avec un retour à la ligne.</p> <p>Et enfin, voici un dernier paragraphe.</p>
</body>
</html>
```
donne le résultat
Attention, un style sur la balise `<br/>` ne sert à rien (c'est une balise de fin).
### Les balises de forme (`b`, `strong`, `i`, `u`)
D'apparence similaire, les deux balises `<b>` et `<strong>` donnent de l'importance à un texte. Cependant, sur une lecture vocale, `strong` augmentera la force de prononciation, là où `b` n'agit que pour mettre du texte en gras.
La balise `<b>` signifie gras (_bold_ en anglais) et nécessite un terminateur `</b>`.
La balise `<strong>` signifie _fort_ et nécessite un terminateur `<strong>`.
La balise `<i>` et sa terminaison `</i>` affiche un texte en italique.
La balise `<u>` et sa terminaison `</u>` affiche un texte souligné (_underline_ ).
Exemple :
```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple de paragraphe</title>
</head>
<body>
<h1>Les paragraphes et sauts de ligne</h1>
<p>Ceci est un paragraphe</p>
<p>Ceci est un autre paragraphe<br/>avec un retour à la ligne.</p> <p>Et enfin, voici un dernier paragraphe.</p>
Il existe d'autres balises pour la mise en forme en HTML :
-`<sup>` et `</sup>` pour mettre un texte en exposant. Exemple : E = MC<sup>2</sup>.
-`<sub>` et `</sub>` pour mettre un texte en indice. Exemple : H<sub>2</sub>O.
-`<pre>` et `</pre>` pour un paragraphe formaté. Un effet similaire avec `<tt>` et `</tt>` s'applique à un texte dans un paragraphe.
-`<strike>` et `</strike>` pour barrer un texte. Exemple : ceci est <strike>barré</strike>.
### Balises utiles
*`author` : auteur de la page
*`description` : résumé affiché par les moteurs de recherche
### Balises tableaux
## 6. HTML4 vs HTML5 : structure sémantique
Les tableaux sont (étaient) très utilisés pour afficher des informations en les triant avec un formatage propre. Avant l'arrivée de CSS, ils étaient employés pour formater les pages web.
### Principe
***HTML4** : structure basée sur des `<div>` génériques
***HTML5** : structure basée sur des **balises sémantiques**
Les balises d'un tableau sont `<table>` et `</table>` : à l'intérieur, il faut définir les colonnes et les lignes. `<caption>` et `</caption>` permettent de donner une ligne de titre au tableau, `<tr>` et `</tr>` définissent une ligne (_table raw_).
`<td>` et `</td>` définissent les divisions en colonnes (_table division_)
| HTML4 | HTML5 |
| -- | -- |
| `<div id="header">` | `<header>` |
| `<div id="menu">` | `<nav>` |
| `<div class="post">` | `<article>` |
| `<div id="footer">` | `<footer>` |
Les lignes contiennent plusieurs colonnes (au minimum, une) et non l'inverse. Cela implique que les balises `<tr>` contiennent les balises `<td>` : `<tr> <td>col1</td> <td>col1</td> </tr>`
Il est possible d'utiliser `<th>` et `</th>` pour les entêtes de colonnes, permettant un formatage d'entête.
### Avantages HTML5
Il y a aussi des paramètres à placer dans la balise `<table>` pour obtenir des espaces et des bordures différentes (les propriétés sont cumulables dans la même ligne) :
-`<table border=1>` affiche une bordure de un pixel
-`<table cellspacing=0>` supprime les espaces entre les cellules
-`<table width=400>` affiche un tableau ayant 400 pixels de large
* Code plus lisible
* Meilleure accessibilité
* Meilleur référencement
* Respect des bonnes pratiques
Pour bien maîtriser l'agencement des balises, visitez le site http://cyberzoide.developpez.com/html/table.php3
👉 Les `<div>` restent autorisées, mais **pas pour structurer la page principale**.
Il existe d'autres balises comme `<thead>`, `<tbody>` et `<tfoot>`, consultez la page [d'OpenClassroom](https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-tableaux-1) sur le sujet.
### Titres
De même, il est possible de créer des cellules de tailles différentes avec les attributs `colspan` et `rawspan`.
-`<td colspan=2>` occupe 2 colonnes sur la même ligne. Dans l'exemple ci-contre, la cellule grise.
-`<th rowspan=2>` occupe 2 lignes sur la même colonne. Dans l'exemple ci-contre, les cellules vertes et roses.
`<h1>` à `<h6>` définissent une hiérarchie logique (comme un plan de document).
⚠️ Un seul `<h1>` par page (en général).
Vous trouverez plus d'exemples sur https://html.com/tables/rowspan-colspan/
### Les liens
Lorsqu'il est nécessaire de cliquer pour aller sur une autre page, on parle de lien.
### Paragraphes et retours à la ligne
```HTML
<a href="http://www.ac-clermont.fr">lien vers rectorat</a>
```
*`<p>` : paragraphe
*`<br>` : retour à la ligne (sans mise en forme)
Il est possible de créer des liens, qui pointent vers section à l'intérieur d'une même (et longue) page.
```HTML
<h2 id="C4">Chapitre 4 – Les liens<h2>
<p>blabla bla</p>
...
<h2 id="C5">Chapitre 5 – les retours</h2>
voici le lien vers <a href="#C4">Chapitre 4</a>
```
Si vous devez pointer une section depuis une autre page, il suffit de préciser la page destination :
```HTML
voici le lien vers <a href="pageCours.html#C4">Chapitre 4</a>
```
Le lien peut également pointer une adresse de courrier électronique.
### Mise en valeur du texte
```HTML
voici le lien vers <a href="mailto:jp@wanaskype.de">JP HALDERMAN</a>
```
*`<strong>` : importance forte (sémantique)
*`<em>` : emphase
*`<b>`, `<i>` : mise en forme visuelle uniquement
Deux dernières astuces à propos des liens : la première est qu'il est possible d'utiliser une image à la place d'un texte à cliquer, la seconde est qu'il est possible d'ouvrir le lien dans une nouvelle page cible.
Celui-ci ouvrira le site W3School dans un nouvel onglet ou une nouvelle fenêtre, grâce à l'attribut `target`.
### Les images
Les images utilisent la balise `<img>` et `</img>`. Il est recommandé d'ajouter l'attribut `alt` pour afficher un texte alternatif (si l'image ne s'affiche pas ou bien si l'utilisateur est malvoyant et utilise un système de description audio).
Un procédé d'encodage (`base64`) permet également de stocker l'image dans le fichier HTML (plutôt que dans le même répertoire). Ce procédé augmente le poids (octets) de l'image, à réserver à de petites images, uniques.
Pour les vidéos ou les musiques, il s'agit de balises HTML5. Il suffit d'écrire le code suivant pour intégrer un player audio ou vidéo directement dans la page :
Les attributs `width` et `height` sont optionnels, comme l'attribut controls qui affiche une barre de contrôle de lecture de la vidéo. La balise autoplay sert à démarrer automatiqement un média.
Les listes sont souvent utilisées pour les **menus**.
### Les listes
Il est possible d'utiliser des puces d'énumération ou bien une numérotation automatique). La balise `<ul>` signifie _unordered_ et `<ol>` signifie _ordered_. Voici les deux formes :
Liste non-numérotées (à puces)
### Tableaux (données uniquement)
```HTML
<ul>
<li>Café</li>
<li>Thé</li>
<li>Chocolat</li>
</ul>
```
qui donne
<ul>
<li>Café</li>
<li>Thé</li>
<li>Chocolat</li>
</ul>
Liste numérotées
```HTML
<ol>
<li>Café</li>
<li>Thé</li>
<li>Chocolat</li>
</ol>
```html
<table>
<caption>Titre</caption>
<tr><th>Nom</th><th>Ville</th></tr>
<tr><td>Batman</td><td>Gotham</td></tr>
</table>
```
<ol>
<li>Café</li>
<li>Thé</li>
<li>Chocolat</li>
</ol>
⚠️ Les tableaux ne servent **pas** à faire la mise en page.
Il est utile de préparer le travail qui sera fait en CSS : les listes sont souvent utilisées comme des menus cliquables.
Il est possible (en HTML) d'avoir différents types pour les deux méthodes : des puces carrées, des numérotations romaines, etc.
Voici un lien utile : http://cyberzoide.developpez.com/html/list.php3
### Les balises conteneurs (`div`, `span`)
### Conteneurs
Il existe des balises de type conteneur : par défaut, elles n'affectent pas la présentation des données, mais elles permettent certaines interactions avec les CSS. Ces balises sont `<div> </div>` et `<span> </span>`.
*`<div>` : bloc
*`<span>` : inline
Tandis que `<div>` est un conteneur qui occupe la largeur de la page (c'est un bloc dont la largeur est 100% de la page par défaut), `<span>` s'insère dans un flux texte : on peut donc placer plusieurs conteneurs `<span>` les uns à la suite des autres.
Utilisés comme supports pour le CSS.
Pour `<div>` c'est une balise typée "block" tandis que `<span>` est typée "inline".
### La balise canevas (`canvas`)
Cette balise permet de créer une surface de dessin (surface de rendu).
Un canevas n'a que deux paramètres, `width` et `height` (outre les attributs `id`, `class`, `name`).
## 8. Balises HTML5 multimédia
Ensuite, il est possible de dessiner sur ce canevas avec JavaScript : leur fonctionnement étudié dans la fiche récapitulative JavaScript.
Voici la déclaration de la zone canevas avec les balises `<canvas> </canvas>` :
