snt
Sciences Numériques et Technologie en classe de seconde au Lycée Saint-Exupéry de La Rochelle.
LES BASES DU
Au programme :
1 Introduction
1.1 Les éléments HTML
1.2 Les balises
1.3 Les attributs
1.4 Commenter, indenter
1.5 Les outils
3 Principales balises HTML
3.1 Texte
3.2 Listes
3.3 Liens
3.4 Images
3.5 Tableaux
3.5 Vidéo & Audio
4 Balises supplémentaires
4.1 Attributs id et class
4.2 Éléments de type bloc ou en-ligne
4.3 Éléments div et span
4.4 Iframes
2 Structure globale d’une
page en HTML
HTML est l’abréviation de HyperText Markup Language.
C’est un langage qui utilise des balises (markup) pour structurer le contenu des pages Web. le mot HyperText fait référence aux liens qui permettent notamment de passer d’une page à l’autre.
1 Introduction :
HTML utilise des éléments pour décrire la structure des pages : un paragraphe (élément p) des titres d’importances diverses (éléments h1 à h6), un lien (élément a), une image (élément img)... Chaque élément a un sens pour le navigateur qui doit afficher la page. On parle de structuration sémantique.
1.1 Les éléments HTML
Les balises qui délimitent les éléments vont généralement par paire, une balise ouvrante et une balise fermante comme le montre l’exemple ci-dessous :
1.2 Les balises
<p> Un paragraphe </p>
élément p
une balise ouvrante & une balise fermante.
Certains éléments comme br (saut de ligne) n’ont pas de contenu et ne nécessitent donc pas de balise fermante.
Maître corbeau, sur un arbre perché,<br>
Tenait en son bec un fromage.<br>
Les balises s’imbriquent selon la règle suivante : le dernier élément ouvert est le premier à refermer.
<em>Ces mots sont <strong>très</strong> importants</em>.Un attribut, placé dans la balise ouvrante d’un élément, vient compléter ce dernier en ajoutant des informations sur son contenu. Il est constitué d’un nom et d’une valeur encadrée de guillemets ou d’apostrophes. Par exemple, dans le cas d’un lien, on utilise l’attribut dont le nom est href (hypertext reference) et dont la valeur est la cible du lien.
1.3 Les attributs
<a href="https://google.fr">Lien vers Google </a>
attribut href
nom
valeur
Pour une meilleure lisibilité et une plus grande clarté, il est vivement conseillé de commenter son code. Cela favorise le travail collaboratif et devient indispensable pour un projet de taille conséquente. Les commentaires présents dans le code source d’une page sont destinés aux développeurs et ne sont pas affichés dans le navigateur.
1.4 Commenter, indenter
<!-- un commentaire en HTML -->
Indenter son code consiste à ajouter une tabulation ou des espaces à l’ouverture de chaque nouvelle balise à l’intérieur d’un élément. Cela permet de bien hiérarchiser son code et de voir immédiatement quel élément est imbriqué dans quel autre.
<section>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</section>Pour écrire du code HTML il suffit d’un simple éditeur de texte. Parmi les nombreux candidats mon choix s’est porté sur Brackets (Page de téléchargement : http://brackets.io/). Open source, développé par Adobe, il est léger et agréable à utiliser.
1.5 Les outils
Nous utiliserons également les outils de développement intégrés aux navigateurs comme Chrome ou Firefox. Ils permettent d’inspecter les éléments d’une page et d’en analyser la structure.
Il existe enfin des outils en ligne comme freeformatter.com qui peuvent aider au formatage du code et d’autres qui permettent de vérifier si la syntaxe du code est correcte : http://validator.w3.org/.
2. Structure globale d’une page en HTML
<!DOCTYPE html>
<html>
<head>
<!-- en-tête de la page -->
<meta charset="utf-8">
<title>Titre de la page.</title>
</head>
<body>
<!-- corps de la page -->
</body>
</html>Une page web commence par un doctype qui indique au navigateur le type du document qu’il va afficher, ici html.
<!DOCTYPE html>
<html>
<head>
<!-- en-tête de la page -->
<meta charset="utf-8">
<title>Titre de la page.</title>
</head>
<body>
<!-- corps de la page -->
</body>
</html>On trouve ensuite l’élément html qui va contenir toute la page.
<!DOCTYPE html>
<html>
<head>
<!-- en-tête de la page -->
<meta charset="utf-8">
<title>Titre de la page.</title>
</head>
<body>
<!-- corps de la page -->
</body>
</html>Une page est constituée d’un en-tête, l’élément head et d’un corps, l’élément body.
<!DOCTYPE html>
<html>
<head>
<!-- en-tête de la page -->
<meta charset="utf-8">
<title>Titre de la page.</title>
</head>
<body>
<!-- corps de la page -->
</body>
</html>L'élément head contient des informations utiles au navigateur comme le titre de la page, ainsi que le type d’encodage utilisé, ici utf-8 (adapté aux langues latines). Il contiendra également le lien vers la ou les feuille(s) de styles et éventuellement vers des scripts ainsi que d’autres meta-data... Les informations contenues dans l’élément head ne sont pas affichées dans le navigateur.
L’élément body englobe pour sa part l’intégralité du contenu visible de la page (paragraphes, images, tableaux, formulaires...).
3 Principales balises HTML
3.1 Texte
| Balise | Description |
|---|---|
| <p> <h1> <h2> <h3> <h4> <h5> <h6> <strong> <em> <mark> |
Paragraphe Titre de niveau 1 Titre de niveau 2 Titre de niveau 3 Titre de niveau 4 Titre de niveau 5 Titre de niveau 6 Mise en valeur forte Mise en valeur normale Mise en valeur visuelle |
| Balise | Description |
|---|---|
| <sup> <sub> <br> <hr> <blockquote> <q> |
Exposant Indice Passage à la ligne Ligne horizontale Long bloc de citation Citation |
<h1>Titre principal</h1>
<h3>Sous-titre</h3>
<p>Un texte <em>formaté</em> en<br>
<strong>HTML</strong>.</p>
<hr>
<blockquote cite="http://oops.io">
<p>Une citation issue de OOPS.</p>
</blockquote>
<p>f<sub>1</sub>(x)=x<sup>2</sup>-3</p>Code HTML :
Titre principal
Sous-titre
Un texte formaté en
HTML.
Une citation issue de OOPS.
f1(x)=x2- 3
Résultat :
3.2 Listes
| Balise | Description |
|---|---|
| <ul> <ol> <li> |
Liste non ordonnée Liste ordonnée Item d’une liste |
<ol> <!-- une liste ordonnée -->
<li>Pommes</li>
<li>Oranges</li>
</ol>- Pommes
- Oranges
3.3 Liens
| Balise | Description |
|---|---|
| <a> | Lien |
<p>Coder sur le site <a href="https://www.codecademy.com/fr/tracks/web">Codecademy</a>.</p>Pour créer un lien on peut comme dans l’exemple du paragraphe 1.3 utiliser un chemin absolu ; on place dans l’attribut href, l’adresse du site ou de la page ciblée :
Pour des liens entre plusieurs pages d’un même site on utilise des chemins relatifs.
<p>Ceci est un <a href="page2.html">lien</a> vers la page2.</p>1er cas : Les deux pages sont dans un même dossier.
Si par exemple vous souhaitez créer dans la page1 un lien qui pointe vers la page2, il suffit d’écrire :
<p>Ceci est un <a href="contenu/page2.html">lien</a> vers la page2.</p>2ème cas : Les deux pages sont dans des dossiers différents.
Si vous souhaitez à nouveau créer un lien dans la page1 qui pointe vers la page2, il faut écrire à présent :
Par exemple, si la page2 se trouve dans un sous-dossier appelé contenu :
<p>Ceci est un <a href="../page2.html">lien</a> vers la page2.</p>Si à présent la page2, toujours cible du lien, se trouve dans le dossier parent de celui qui contient la page1 on écrira :
Pour résumer :
(source des images du 3.3 : OpenClassrooms)
Pour créer un lien qui déclenche l’envoi d’un mail, on modifie la valeur de l’attribut href comme dans l’exemple suivant :
<a href="mailto:bubule@gmail.com">Contactez-moi !</a>Enfin, pour créer un lien qui cible un fichier à télécharger, on procède de la même façon.
Par exemple, pour proposer à vos visiteurs de télécharger le fichier document.pdf situé dans le même dossier
que votre page :
<a href="document.pdf">Télécharger le document au format pdf.</a>Si le fichier document.pdf est situé sur internet, dans un sous-dossier contenu ou dans un dossier parent on modifie le chemin comme précédemment.
3.4 Images
Les principaux formats d’image utilisés sur le web sont le JPG, le PNG, le GIF et le SVG.
- JPG : Permet de compresser les photos sans trop perdre en qualité.
- PNG : A l’avantage de permettre les fonds transparents (logos, icônes...).
- GIF : Images animées notamment.
- SVG : Images vectorielles que l’on peut redimensionner sans perte de qualité.
Pour insérer une image, on utilise, l’élément img, systématiquement accompagné de deux attributs : src (source : adresse de l’image) et alt (texte alternatif).
Si pour une raison quelconque l’image ne peut pas s’afficher, le visiteur verra le texte alternatif. Cet attribut obligatoire est notamment indispensable pour les personnes non-voyantes qui se servent de lecteur d’écran. Ces appareils lisent les textes alternatifs pour décrire l’information contenue dans les images. Si celles-ci sont purement décoratives, il est d’usage d’écrire un alt "vide". C’est une question d’accessibilité.
Comme l’élément br, img ne nécessite pas de balise fermante.
Par exemple, pour insérer l’image avatar.png située dans le même dossier que la page on écrit :
<img src="avatar.png" alt="mon avatar">Si l’image avatar.png est située dans le sous-dossier contenu :
<img src="contenu/avatar.png" alt="mon avatar">Si l’image avatar.png est située sur internet :
<img src="http://monsite.com/images/avatar.png" alt="mon avatar">Il est possible de préciser les dimensions d’une image à l’aide des attributs width (largeur) et height (hauteur) dont les valeurs sont exprimées en px :
<img src="avatar.png" alt="mon avatar" width="42" height="42">Pour ajouter une légende à une image on utilise les éléments figure et figcaption :
<figure>
<img src="images/xiaomi.png" alt="le nouveau MI A1" />
<figcaption>Le premier smartphone qui embarque Android One</figcaption>
</figure>
Résultat :
Grâce aux CSS on peut améliorer le resultat, notamment en changeant la police de caractère et en centrant la légende...
Enfin, pour mettre un lien sur une image, on insère un élément img dans un élément a :
<a href="images/big_avatar.png"><img src="avatar.png" alt="mon avatar" width="42" height="42"></a>3.5 Tableaux
| Balise | Description |
|---|---|
| <table> <tr> <td> <th> |
Tableau Ligne Cellule Cellule d’en-tête |
<!-- un tableau sans bordure -->
<table>
<tr>
<th>Lui</th>
<th>Elle</th>
</tr>
<tr>
<td>Stan</td>
<td>Sarah</td>
</tr>
<tr>
<td>38 ans</td>
<td>26 ans</td>
</tr>
<tr>
<td>New York</td>
<td>Boston</td>
</tr>
</table>
Nous allons utiliser des styles CSS, pour donner des bordures à notre tableau. Nous en étudierons les bases en détail dans le prochain chapitre.
Pour cela on écrit des règles CSS dans un fichier styles.css que l’on lie au fichier html en ajoutant le code suivant dans l’élément head de la page :
<link rel="stylesheet" href="styles.css">La structure globale d’une page en HTML devient :
<!DOCTYPE html>
<html>
<head>
<!-- en-tête de la page -->
<meta charset="utf-8">
<title>Titre de la page.</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- corps de la page -->
</body>
</html>Code CSS :
table { /* le tableau */
border-collapse: collapse;
/* Bordures collées */
}
td, th { /* Les cellules */
border: 1px solid black;
}L’élément caption permet de donner un titre au tableau :
<table>
<caption>Le duo de choc</caption>
<tr>
<th>Lui</th>
<th>Elle</th>
</tr>
<tr>
<td>Stan</td>
<td>Sarah</td>
</tr>
<tr>
<td>38 ans</td>
<td>26 ans</td>
</tr>
<tr>
<td>New York</td>
<td>Boston</td>
</tr>
</table>
<table>
<tr>
<th>Lui</th>
<th>Elle</th>
</tr>
<tr>
<td>Stan</td>
<td>Sarah</td>
</tr>
<tr>
<td>38 ans</td>
<td rowspan="2">26 ans</td>
</tr>
<tr>
<td>New York</td>
</tr>
</table>Il est possible de regrouper des cellules à l’aide des attributs rowspan et colspan :
<table>
<tr>
<th>Lui</th>
<th>Elle</th>
</tr>
<tr>
<td>Stan</td>
<td>Sarah</td>
</tr>
<tr>
<td>38 ans</td>
<td>26 ans</td>
</tr>
<tr>
<td colspan="2">New York</td>
</tr>
</table>
3.6 Vidéo & Audio
Les 3 formats de vidéo utilisés pour le web sont le MP4 (H.264), le WebM, et le OGG. Pour insérer une vidéo on utilise l’élément video accompagné comme pour une image de l’attribut src (dans l’exemple ci-dessous le fichier video.mp4 est placé dans un sous-dossier nommé video).
<video src="video/video.mp4" autoplay poster="images/vignette.jpg"></video>Les autres attributs utilisés sont :
- autoplay : la vidéo se joue automatiquement au chargement de la page (cet attribut comme controls et loop n’a pas besoin de valeur).
- poster : affiche une image pendant que la vidéo se charge ou avant que l’utilisateur ne la joue.
- controls : ajoute les options de lecture.
- width et height : définissent les dimensions du lecteur.
- preload : indique au navigateur de télécharger la vidéo au chargement de la page.
- loop : la vidéo se joue en boucle.
- muted : le son est coupé par défaut.
Il est possible d'indiquer plusieurs sources afin de s'assurer d'une compatibilité maximale avec les différents navigateurs. Vous pouvez de même ajouter un texte entre les balises video qui sera affiché en cas d'impossibilité pour le navigateur de lire la vidéo.
<video width="640" height="480" controls muted loop>
<source src="medias/ma_video.mp4" type="video/mp4">
<source src="medias/ma_video.webm" type="video/webm">
<source src="medias/ma_video.ogv" type="video/ogg">
Description de ma vidéo.
</video>3.6 Audio\ 3.7 Code : En construction...
4 Balises supplémentaires
4.1 Attributs id et class
- L’attribut id permet d’identifier de manière unique un élément HTML (deux éléments ne peuvent pas avoir le même id). On l’utilise notamment pour appliquer des styles à l’élément ou pour le cibler avec un lien.
Par exemple Un long texte sur une page peut s’accompagner d’un menu de navigation entre les différents paragraphes. On attribut un id à chaque paragraphe :
<p id="part1">Ceci est le premier paragraphe.</p>On créé ensuite des liens de type ancre (vers une partie spécifique de la page où se trouve le lien) à l’aide d’un # :
<p><a href="#part1">lien vers le premier paragraphe</a></p> - L’attribut class permet de classer des éléments (contrairement aux id, plusieurs éléments peuvent avoir la même classe), le plus souvent pour leur attribuer un ou plusieurs style(s) commun(s).
Par exemple, pour avoir plusieurs paragraphes écrits en rouge, on leur attribue la classe "rouge" :
<p class="rouge">Ceci est un paragraphe écrit en rouge.</p>
<p class="rouge">Ceci est un autre paragraphe écrit en rouge.</p>On définit ensuite le ou les style(s) CSS à appliquer à cette classe à l’aide d’un point :
.rouge {
color : red;
}En construction...
HTML v 2.0
By snt
HTML v 2.0
Les bases du langage HTML
