Langage HTML5
Langage HTML5
Langage HTML5
Sciences El
Jadida
Technologie du Web
Département Informatique
Langage HTML5
1. Structure de base d'une page HTML5
D'abord, on commence par la création d'un document HTML ou une page Web. Pour
commencer à coder du HTML, nous n'avons besoin qu'un éditeur de texte (Sublime Text,
Notepad++, …) et un navigateur Web (Google Chrome, Mozilla Firefox, ...).
On va créer un fichier HTML qui affiche le message "Hello world" dans le navigateur web.
Tant que nous avons le système Windows sur les machines de la salle, on va éditer le code
html par l’éditeur Notepad++. Donc on écrit le code suivant et on l’enregistre sous
extension .html (pageweb.html par exemple)
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
Pour ouvrir ce fichier sur le navigateur. Il suffit d’accédez à votre fichier puis double-cliquez
dessus. Il s'ouvrira dans votre navigateur Web par défaut.
Ce code représente la structure de base d'une page HTML5 et il se compose de:
L'élément <! DOCTYPE html> est la déclaration du type de document. Il indique au
navigateur Web que ce document est un document HTML5.
L'élément <head> est un conteneur pour les balises qui fournit des informations sur le
document, par exemple, la balise <title> définit le titre du document.
L'élément <body> contient le contenu réel du document (paragraphes, liens, images,
tableaux, etc.) qui s'affiche par le navigateur Web à l'utilisateur.
Les balises <html>, <head> et <body> constituent le squelette de base de chaque page Web.
Le contenu à l'intérieur des balises <head> et </head> est invisible pour les utilisateurs à une
exception près: le texte entre les balises <title> et </title> qui s’apparaît comme le titre sur un
onglet de navigateur.
2. Balises et éléments HTML
Le HTML est écrit sous la forme d'éléments HTML constitués de balises. Chaque balise est
composée d'un mot-clé, entouré de crochets angulaires, tels que <html>, <head>, <body>,
<title>, <p>, etc.
Les balises HTML se présentent normalement par paires comme <html> et </html>. La
première balise d'une paire est souvent appelée balise d'ouverture (ou balise de début) et la
deuxième balise est appelée balise de fermeture (ou balise de fin).
Entre les balises de début et de fin, vous pouvez placer le contenu approprié. Par exemple, un
paragraphe, qui est représenté par l'élément p, serait écrit comme suit:
<p> Ceci est un paragraphe </p>
Pour afficher ce message dans la page web, il faut l’ajouter dans l’élément <body> comme
suit :
<body>
<p>Hello World!<p>
<p> Ceci est un paragraphe </p>
</body>
3. Elements
La plupart des éléments HTML sont écrits avec une balise de début (ou balise d'ouverture) et
une balise de fin (ou balise de fermeture), avec du contenu entre les deux. Les éléments
peuvent également contenir des attributs qui définissent ses propriétés supplémentaires. Par
exemple, un paragraphe, qui est représenté par l'élément p, serait écrit comme suit:
Elément
<p
class="foo">Hello
Balise Att Val contenu Balise de
fermetur
world</p>
d'ouvertu rib eur
re uts e
L'attribut style nous permet de spécifier des règles de style CSS telles que la couleur, la
police, la bordure, etc. directement dans l'élément. L’exemple suivant montre comment il
fonctionne:
<p style="color: blue;"> Ceci est un paragraphe </p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">du contenu </div>
5. Titres HTML
Organisation du contenu avec des titres
Les titres aident à définir la hiérarchie et la structure du contenu de la page Web.
HTML propose six niveaux de balises de titres de <h1> à <h6>; la balise <h1> définit le titre
le plus important, tandis que la balise <h6> définit le titre le moins important dans le
document.
Les titres <h1> sont affichés dans la plus grande police, tandis que les titres <h6> sont
affichés dans la plus petite police.
<!DOCTYPE html>
<html lang="en"> Heading level 1
<head>
<meta charset="UTF-8">
<title>Example of HTML headings
Heading level 2
tag</title>
</head> Heading level 3
<body>
<h1>Heading level 1</h1> Heading level 4
<h2>Heading level 2</h2>
<h3>Heading level 3</h3> Heading level 5
<h4>Heading level 4</h4>
<h5>Heading level 5</h5> Heading level 6
<h6>Heading level 6</h6>
</body>
</html>
6. Paragraphes HTML
Création de paragraphes
L'élément paragraphe est utilisé pour publier du texte sur les pages Web. Les paragraphes sont
définis avec la balise <p>. La balise de paragraphe est une balise très basique et généralement
la première balise dont vous aurez besoin pour publier votre texte sur les pages Web. Voila un
exemple:
<!DOCTYPE html> This is a paragraph.
<html>
<head> This is another paragraph.
<title>Creating Paragraphs in HTML</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Pour des raisons de compatibilité ascendante et de bonnes pratiques de codage, il est conseillé
d'utiliser à la fois les balises d'ouverture et de fermeture pour les paragraphes.
Création de sauts de ligne
La balise <br> est utilisée pour insérer un saut de ligne sur la page Web. Puisque le <br> est
un élément vide, il n'y a donc pas besoin de balise </br> correspondante.
<!DOCTYPE html> This is a paragraph
<html> with line break.
<head>
<title>Inserting Line Breaks in HTML</title> This is
</head>
another paragraph
<body>
<p>This is a paragraph <br> with line break.</p>
with line breaks.
<p>This is <br>another paragraph <br> with line
breaks.</p>
</body>
</html>
Création de règles horizontales
Vous pouvez utiliser la balise <hr> pour créer des règles horizontales ou des lignes afin de
séparer visuellement les sections de contenu d'une page Web. Comme <br>, la balise <hr>
est également un élément vide. Voici un exemple:
<!DOCTYPE html> This is a paragraph.
<html>
<head>
<title>Creating Horizontal Lines in HTML</title>
</head>
<body> This is another paragraph.
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
</body>
</html>
Gérer les espaces blancs
Normalement, le navigateur affichera les multiples espaces créés à l'intérieur du code HTML
en appuyant sur la touche de barre d'espacement ou sur la touche de tabulation du clavier
comme un seul espace. Les sauts de ligne multiples créés à l'intérieur du code HTML en
appuyant sur la touche Entrée sont également affichés sous la forme d'un seul espace. Les
paragraphes suivants seront affichés sur une seule ligne sans espace supplémentaire:
<!DOCTYPE html> This paragraph contains multiple spaces in the source
<html lang="en"> code.
<head>
<title>White Space Collapsing in HTML</title> This paragraph contains multiple tabs and line breaks in
</head> the source code.
<body>
<p>This paragraph contains multiple spaces
in the source code.</p>
<p>
This paragraph
Un lien ou un hyperlien est une connexion d'une ressource Web à une autre. Les liens
permettent aux utilisateurs de passer d'une page à une autre sur n'importe quel serveur dans le
monde. Un lien a deux extrémités, appelées ancres. Le lien commence à l'ancre source et
pointe vers l'ancre de destination, qui peut être n'importe quelle ressource Web, par exemple,
une image, un audio ou vidéo, un fichier PDF, un document HTML ou un élément dans le
document lui-même, etc.
Syntaxe du lien HTML
Les liens sont spécifiés en HTML à l'aide de la balise <a>.
<a href="url"> Texte du lien </a>
Tout ce qui se trouve entre la balise d'ouverture <a> et la balise de fermeture </a> devient la
partie du lien que l'utilisateur voit et clique dans un navigateur. Voici quelques exemples de
liens:
L'attribut href spécifie la cible du lien. Sa valeur peut être une URL absolue ou relative. Une
URL absolue est l'URL qui comprend toutes les parties du format d'URL, telles que le
protocole, le nom d'hôte et le chemin du document, par exemple https://www.google.com/,
https://www.example.com/form.php, etc. Tandis que les URL relatives sont des chemins
relatifs aux pages, par exemple contact.html, images/smiley.png, etc. Une URL relative
n'inclut jamais le préfixe http:// ou https://.
Définition des cibles (targets) pour les liens
L'attribut target indique au navigateur où ouvrir le document lié. Il existe quatre cibles
définies et chaque nom de cible commence par un caractère de soulignement (_):
_blank - Ouvre le document lié dans une nouvelle fenêtre ou un nouvel onglet.
_parent - Ouvre le document lié dans la fenêtre parent.
_self - Ouvre le document lié dans la même fenêtre ou onglet que le document source. Il s'agit
de la valeur par défaut, il n'est donc pas nécessaire de spécifier explicitement cette valeur.
_top - Ouvre le document lié dans la fenêtre complète du navigateur.
Pour comprendre le fonctionnement de la cible du lien voici l'exemple suivant:
<!DOCTYPE html> Google Search
<html>
<head>
<title>Setting the HTML Link's Target</title>
</head>
<body>
<p><a href="https://www.google.com/" target="_top"> Google Search
</a></p>
<p>
<a href="/examples/images/kites.jpg" target="_parent"> Tutorial Republic
<img src="/examples/images/kites-thumb.jpg" alt="kites">
</a>
</p>
<p><a href="https://www.tutorialrepublic.com/"
target="_blank">Tutorial Republic</a></p>
</body>
</html>
Si votre page Web est placée dans une iframe, vous pouvez utiliser target = "_ top" sur les
liens pour sortir de l'iframe et afficher la page cible dans la fenêtre complète du navigateur.
La création de signets est un processus en deux étapes: ajoutez d'abord l'attribut id sur
l'élément où vous voulez sauter, puis utilisez cette valeur d'attribut id précédée du signe dièse
(#) comme valeur de l'attribut href de la balise <a>, comme illustré dans l'exemple suivant:
<!DOCTYPE html>
<html>
<head>
<title>Creating Bookmarks in HTML</title>
<style>
h2 + p{
line-height: 75px; /* increase height between lines */
}
</style>
</head>
<body>
<p><a href="#sectionA">Jump to Section A</a></p>
<p><a href="#sectionB">Jump to Section B</a></p>
<p><a href="#sectionC">Jump to Section C</a></p>
Vous pouvez même accéder à une section d'une autre page Web en spécifiant l'URL de cette
page avec l'ancre (c'est-à-dire #elementId) dans l'attribut href, par exemple,
<a href="mypage.html#topicA"> Aller à TopicA </a>.
Création de liens de téléchargement
Vous pouvez également créer le lien de téléchargement de fichier exactement de la même
manière que pour placer des liens texte. Pointez simplement l'URL de destination vers le
fichier que vous souhaitez télécharger. Dans l'exemple suivant, nous avons créé les liens de
téléchargement pour les fichiers ZIP, PDF et JPG.
<!DOCTYPE html> Download Zip file
<html>
<head> Download PDF file
<title>HTML Download Links</title>
</head>
Download Image file
<body>
<p><a href="/examples/downloads/test.zip">Download Zip
file</a></p>
<p><a href="/examples/downloads/masters.pdf">Download
PDF file</a></p>
<p><a href="/examples/downloads/sample.jpg">Download
Image file</a></p>
</body>
</html>
Lorsque vous cliquez sur un lien qui pointe vers un fichier PDF ou image, le fichier n'est pas
téléchargé directement sur votre disque dur. Il ouvrira uniquement le fichier dans votre
navigateur Web. De plus, vous pouvez l'enregistrer ou le télécharger sur votre disque dur.
HTML fournit plusieurs balises que vous pouvez utiliser pour faire apparaître du texte sur vos
pages Web différemment du texte normal, par exemple, vous pouvez utiliser la balise <b>
pour mettre le texte en gras, la balise <i> pour rendre le texte en italique, balise <mark> pour
mettre en évidence le texte, balise <code> pour afficher un fragment de code informatique,
balises <ins> et <del> pour marquer les insertions et les suppressions éditoriales, etc.
L'exemple suivant illustre les balises de mise en forme les plus couramment utilisées en
action.
— Albert Einstein
<blockquote>
<p>Learn from yesterday, live for today, hope for tomorrow.
The important thing is not to stop questioning.</p>
<cite>— Albert Einstein</cite>
</blockquote>
</body>
</html>
Pour les citations en ligne courtes, vous pouvez utiliser la balise HTML <q>. La plupart des
navigateurs affichent des guillemets en ligne en entourant le texte entre guillemets.
Affichage des abréviations
Une abréviation est une forme abrégée d'un mot, d'une phrase ou d'un nom. On utilise la
balise <abbr> pour désigner une abréviation. L'attribut title est utilisé à l'intérieur de cette
balise pour fournir le développement complet de l'abréviation, qui est affichée par les
navigateurs sous la forme d'une info-bulle lorsque le curseur de la souris survole l'élément.
Voici un exemple:
<!DOCTYPE html> The W3C is the main international
<html lang="en"> standards organization for
<head> the WWW or W3. It was was
<title>Showing Abbreviations in HTML</title> founded by Tim Berners-Lee.
</head>
<body>
<p>The <abbr title="World Wide Web
Consortium">W3C</abbr> is the main international
standards organization for the <abbr title="World Wide
Web">WWW or W3</abbr>. It was was founded by Tim
Berners-Lee.</p>
</body>
</html>
Marquage des adresses de contact
Les pages Web incluent souvent des adresses de rue ou postales. HTML fournit une balise
spéciale <address> pour représenter les informations de contact (physiques et/ou numériques)
d'une personne ou d'une organisation. Voici un exemple:
<!DOCTYPE html> Lorem ipsum dolor sit amet, consectetur
<html lang="en">
<head>
adipiscing elit. Nam eu sem tempor, varius quam
<title>Formatting Addresses in HTML</title> at, luctus dui. Mauris magna metus, dapibus nec
</head> turpis vel, semper malesuada ante. Vestibulum id
<body> metus ac nisl bibendum scelerisque non non
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. purus. Suspendisse varius nibh non aliquet
Mauris magna metus, dapibus nec turpis vel, semper malesuada sagittis. In tincidunt orci sit amet elementum
ante. Vestibulum id metus ac nisl bibendum scelerisque non non vestibulum. Vivamus fermentum in arcu in
purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt
orci sit amet elementum vestibulum. Vivamus fermentum in aliquam. Quisque aliquam porta odio in fringilla.
arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu,
Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. tristique eget risus. Integer aliquet quam ut elit
Integer aliquet quam ut elit suscipit, id interdum neque porttitor.
Integer faucibus ligula.</p>
suscipit, id interdum neque porttitor. Integer
9. Styles HTML
Le HTML est assez limité lorsqu'il s'agit de la présentation d'une page Web. Il a été conçu à
l'origine comme un moyen simple de présenter des informations. CSS (Cascading Style
Sheets) a été introduit en décembre 1996 par le World Wide Web Consortium (W3C) pour
fournir une meilleure façon de styliser les éléments HTML. Avec CSS, il devient très facile de
spécifier des éléments tels que, la taille et la police des caracteres, les couleurs du texte et
des arrière-plans, l'alignement du texte et des images, la quantité d'espace entre les
éléments, la bordure et les contours des éléments, etc. d'autres propriétés coiffantes.
Les informations de style peuvent être jointes en tant que document séparé ou incorporées
dans le document HTML lui-même. Voici les trois méthodes d'implémentation des
informations de style dans un document HTML.
Style en ligne - Utilisation de l'attribut style dans la balise de début HTML.
Style incorporé - Utilisation de l'élément <style> dans la section d'en-tête du document.
Style externe - Utilisation de l'élément <link>, pointant vers un fichier CSS externe.
Styles en ligne
Les styles en ligne sont utilisés pour appliquer les règles de style uniques à un élément, en
plaçant les règles CSS directement dans la balise de début. Il peut être attaché à un élément à
l'aide de l'attribut style. L'attribut style comprend une série de paires de propriétés et de
valeurs CSS. Chaque paire propriété:valeur est séparée par un point-virgule (;), comme vous
l'écririez dans une feuille de style intégrée ou externe. Mais tout doit être sur une seule ligne,
c'est-à-dire pas de saut de ligne après le point-virgule. L'exemple suivant montre comment
définir la couleur et la taille de la police du texte:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> This is a heading
<title>Using Inline Styles in HTML</title>
</head> This is a paragraph.
<body>
<h1 style="color:red;font-size:30px;">This is a
heading</h1> This is some text.
<p style="color:green;font-size:18px;">This is a
paragraph.</p>
<div style="color:green; font-size:18px;">This is some
text.</div>
</body>
</html>
L'utilisation des styles en ligne est généralement considérée comme une mauvaise pratique.
Étant donné que les règles de style sont intégrées directement à l'intérieur de la balise html, la
présentation se mélange au contenu du document, ce qui rend la mise à jour ou la maintenance
d'un site Web très difficile.
Feuilles de style intégrées
Les feuilles de style intégrées ou internes n'affectent que le document dans lequel elles sont
incorporées. Les feuilles de style incorporées sont définies dans la section <head> d'un
document HTML à l'aide de la balise <style>. Vous pouvez définir n'importe quel nombre
d'éléments <style> dans la section <head>. L'exemple suivant montre comment les règles de
style sont incorporées dans une page Web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
This is a heading
<title>Using Embedded Style Sheet in HTML</title>
<style type="text/css">
This is a paragraph.
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Feuilles de style externes
Une feuille de style externe est idéale lorsque le style est appliqué à de nombreuses pages.
Une feuille de style externe contient toutes les règles de style dans un document distinct que
vous pouvez lier à partir de n'importe quel document HTML de votre site. Les feuilles de
style externes sont les plus flexibles car avec une feuille de style externe, vous pouvez
modifier l'apparence d'un site Web entier en mettant à jour un seul fichier. Vous pouvez
attacher des feuilles de style externes de deux manières: par liaison et importation.
Lier des feuilles de style externes
Une feuille de style externe peut être liée à un document HTML à l'aide de la balise <link>.
La balise <link> va dans la section <head>, comme illustré ici:
<!DOCTYPE html>
<html lang="en">
<head> Linking External Style Sheet
<meta charset="UTF-8">
<title>Linking External Style Sheet in HTML</title> The styles of this HTML document
<link rel="stylesheet" href="/examples/css/style.css"> are defined in linked style sheet.
</head>
<body>
<h1>Linking External Style Sheet</h1>
<p>The styles of this HTML document are defined
in linked style sheet.</p>
</body>
</html>
Vous pouvez l'utiliser de deux manières. Le moyen le plus simple est de l'utiliser dans
l'élément <style> de votre section <head>. Notez que d'autres règles CSS peuvent toujours
être incluses dans l'élément <style>.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Importing Style Sheet in HTML</title>
<style type="text/css">
@import url("/examples/css/style.css");
p{
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>The styles for this heading are defined in the imported style sheet</h1>
<p>The styles for this paragraph are defined in the embedded style sheet.</p>
</body>
</html>
Toutes les règles @import doivent apparaître au début de la feuille de style. La règle
@import peut entraîner des problèmes de performances, vous devez généralement éviter
d'importer des feuilles de style.
10. Images HTML
Insertion d'images dans des pages Web
Les images améliorent l'apparence visuelle des pages Web en les rendant plus intéressantes et
colorées. La balise <img> est utilisée pour insérer des images dans les documents HTML.
C'est un élément vide et ne contient que des attributs. La syntaxe de la balise <img> peut être
donnée avec: <img src="url" alt="some_text">
<!DOCTYPE html>
<html>
<head>
<title>Placing Images in HTML Documents</title>
</head>
<body>
<img src="/examples/images/kites.jpg" alt="Flying Kites">
<img src="/examples/images/sky.jpg" alt="Cloudy Sky">
</body>
</html>
Chaque image doit porter au moins deux attributs: l'attribut src et un attribut alt. L'attribut src
indique au navigateur où trouver l'image. Alors que l'attribut alt fournit un texte alternatif
pour l'image, s'il n'est pas disponible ou ne peut pas être affiché pour une raison quelconque.
Définition de la largeur et de la hauteur d'une image
Les attributs width et height sont utilisés pour spécifier la largeur et la hauteur d'une image.
Les valeurs de ces attributs sont interprétées en pixels par défaut.
<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
Vous pouvez également utiliser l'attribut style pour spécifier la largeur et la hauteur des
images. Il empêche les feuilles de style de modifier accidentellement la taille de l'image, car le
style en ligne a la priorité la plus élevée.
<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
Il est recommandé de spécifier à la fois les attributs de largeur et de hauteur d'une image, afin
que le navigateur puisse allouer autant d'espace pour l'image avant qu'elle ne soit téléchargée.
Sinon, le chargement de l'image peut entraîner une distorsion ou un scintillement dans la mise
en page de votre site Web.
Utilisation de l'élément d'image HTML5
Parfois, la mise à l'échelle d'une image vers le haut ou vers le bas pour l'adapter à différents
appareils (ou tailles d'écran) ne fonctionne pas comme prévu. En outre, la réduction de la
dimension de l'image à l'aide de l'attribut ou de la propriété largeur et hauteur ne réduit pas la
taille du fichier d'origine. Pour résoudre ces problèmes, HTML5 a introduit la balise
<picture> qui vous permet de définir plusieurs versions d'une image pour cibler différents
types de périphériques.
L'élément <picture> contient zéro ou plusieurs éléments <source>, chacun faisant référence à
une source d'image différente, et un élément <img> à la fin. De plus, chaque élément
<source> a l'attribut media qui spécifie une condition de média (similaire à la requête média)
utilisée par le navigateur pour déterminer quand une source particulière doit être utilisée.
Essayons un exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Specify Multiple Source for Images in HTML</title>
</head>
<body>
<picture>
<source media="(min-width: 1000px)" srcset="/examples/images/logo-large.png">
<source media="(max-width: 500px)" srcset="/examples/images/logo-small.png">
<img src="/examples/images/logo-default.png" alt="My logo">
</picture>
<p><strong>Note:</strong> Open the output in a new blank tab (Click the arrow next to
"Show Output" button) and resize the browser window to understand how it actually works.</p>
</body>
</html>
Le navigateur évaluera chaque élément <source> enfant et choisira la meilleure
correspondance parmi eux; si aucune correspondance n'est trouvée, l'URL de l'attribut src de
l'élément <img> est utilisée. En outre, la balise <img> doit être spécifiée comme le dernier
enfant de l'élément <picture>.
Travailler avec des cartes d'images
Une carte d'image vous permet de définir des points chauds sur une image qui agit comme un
lien hypertexte. L'idée de base derrière la création d'une image map est de fournir un moyen
simple de lier diverses parties d'une image sans la diviser en fichiers image séparés. Par
exemple, une carte du monde peut avoir pour chaque pays un lien hypertexte vers de plus
amples informations sur ce pays. Essayons un exemple simple pour comprendre comment
cela fonctionne réellement:
<!DOCTYPE html>
<html lang="en">
<head>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Harry Potter</td>
<td>11</td>
</tr>
</table>
</body>
</html
Les tableaux n'ont pas de bordures par défaut. Vous pouvez utiliser la propriété border pour
ajouter des bordures aux tableaux. En outre, les cellules du tableau sont juste assez grandes
pour s'adapter au contenu par défaut. Pour ajouter plus d'espace autour du contenu dans les
cellules du tableau, vous pouvez utiliser la propriété padding. Les règles de style suivantes
ajoutent une bordure de 1 pixel au tableau et 10 pixels de remplissage à ses cellules.
<!DOCTYPE html>
<html>
<head>
<title>Adding Borders and Paddings to HTML Tables</title>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>HTML Table (Default Style)</h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Harry Potter</td>
<td>11</td>
</tr>
</table>
</body>
</html>
Par défaut, les bordures autour du tableau et leurs cellules sont séparées les unes des autres.
Mais vous pouvez les réduire en un seul en utilisant la propriété border-collapse sur l'élément
<table>. De plus, le texte à l'intérieur des éléments <th> est affiché en gras, aligné
horizontalement au centre de la cellule par défaut. Pour modifier l'alignement par défaut, vous
pouvez utiliser la propriété CSS text-align. Les règles de style suivantes réduisent les
bordures du tableau et alignent le texte de l'en-tête du tableau sur la gauche.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table with Collapsed Borders</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2> Table with Collapsed Borders </h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Harry Potter</td>
<td>11</td>
</tr>
</table>
</body>
</html>
La plupart des attributs de l'élément <table> tels que border, cellpadding, cellspacing,
width, align, etc. pour styliser les apparences des tableaux dans les versions antérieures ont
été supprimés dans HTML5, évitez donc de les utiliser. Utilisez plutôt CSS pour styliser les
tableaux HTML.
Couverture (fusion) de plusieurs lignes et colonnes
La répartition vous permet d'étendre les lignes et colonnes du tableau sur plusieurs autres
lignes et colonnes. Normalement, une cellule de tableau ne peut pas passer dans l'espace en
dessous ou au-dessus d'une autre cellule de tableau. Cependant, vous pouvez utiliser les
attributs rowspan ou colspan pour couvrir plusieurs lignes ou colonnes dans un tableau.
Essayons l'exemple suivant pour comprendre le fonctionnement de colspan:
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
De même, vous pouvez utiliser l'attribut rowspan pour créer une cellule qui s'étend sur
plusieurs lignes. Essayons un exemple pour comprendre le fonctionnement de la répartition
des lignes:
<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Ajout de légendes aux tableaux
Vous pouvez spécifier une légende (ou un titre) pour vos tableaux à l'aide de l'élément
<caption>. L'élément <caption> doit être placé directement après la balise d'ouverture
<table>. Par défaut, la légende apparaît en haut du tableau, mais vous pouvez modifier sa
position à l'aide de la propriété CSS caption-side. L'exemple suivant montre comment utiliser
cet élément dans une table.
<!DOCTYPE html>
<html lang="en">
<head>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
</body>
</html>
HTML fournit une série de balises <thead>, <tbody> et <tfoot> qui vous aident à créer un
tableau plus structuré, en définissant respectivement les régions d'en-tête, de corps et de pied
de page. L'exemple suivant illustre l'utilisation de ces éléments.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table with a Header, Footer and Body</title>
<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>
</body>
</html
N'utilisez pas de tableaux pour créer des mises en page Web. Les dispositions des tableaux
sont plus lentes au rendu et très difficiles à maintenir. Il ne doit être utilisé que pour afficher
des données tabulaires.
12. Listes HTML
Les listes HTML sont utilisées pour présenter la liste d'informations de manière bien formée
et sémantique. Il existe trois types de liste différents en HTML et chacun a un but et une
signification spécifiques.
Liste non ordonnée - Utilisé pour créer une liste d'éléments associés, sans ordre particulier.
Liste ordonnée - Utilisée pour créer une liste d'articles associés, dans un ordre spécifique.
Liste de description - Utilisée pour créer une liste de termes et leurs descriptions.
Dans un élément de liste, vous pouvez placer du texte, des images, des liens, des sauts de
ligne, etc. Vous pouvez également placer une liste entière dans un élément de liste pour créer
la liste imbriquée.
Listes HTML non ordonnées
Une liste non ordonnée créée à l'aide de l'élément <ul>, et chaque élément de liste commence
par l'élément <li>. Les éléments de liste dans les listes non ordonnées sont signalés par des
puces. Voici un exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>HTML Unordered List</h2>
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
<hr>
<h2>HTML Nested Unordered List</h2>
<ul>
<li>Chocolate Cake
<ul>
<li>Chocolate Velvet Cake</li>
<li>Chocolate Lava Cake</li>
</ul>
</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
</body>
</html>
Vous pouvez également modifier le type de puce dans votre liste non ordonnée à l'aide de la
propriété CSS list-style-type. La règle de style suivante modifie le type de puce du disque par
défaut en carré:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Bullet Type in an HTML Unordered List Using CSS</title>
<style>
ul {
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
</body>
</html>
Listes ordonnées HTML
Une liste ordonnée créée à l'aide de l'élément <ol>, et chaque élément de liste commence par
l'élément <li>. Les listes ordonnées sont utilisées lorsque l'ordre des éléments de la liste est
important. Les éléments de liste dans une liste ordonnée sont marqués par des numéros. Voici
un exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>HTML Ordered List</h2>
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
<hr>
<h2>HTML Nested Ordered List</h2>
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go
<ol>
<li>Check the blind spot</li>
<li>Check surrounding for safety</li>
</ol>
</li>
</ol>
</body>
</html>
La numérotation des éléments dans une liste ordonnée commence généralement par 1.
Cependant, si vous souhaitez modifier cela, vous pouvez utiliser l'attribut start, comme
illustré dans l'exemple suivant:
<ol start="10">
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
Comme pour les listes non ordonnées, vous pouvez également utiliser la propriété CSS list-
style-type pour modifier le type de numérotation dans une liste ordonnée. La règle de style
suivante change le type de marqueur en nombres romains.
<style>
ol {
list-style-type: upper-roman;
}
</style>
Vous pouvez également utiliser l'attribut type pour modifier le type de numérotation, par ex.
type = "I". Cependant, vous devez éviter cet attribut, utilisez plutôt la propriété CSS list-
style-type.
Listes de description HTML
Une liste de description est une liste d'éléments avec une description ou une définition de
chaque élément. La liste de description est créée à l'aide de l'élément <dl>. L'élément <dl> est
utilisé en conjonction avec l'élément <dt> qui spécifie un terme, et l'élément <dd> qui
spécifie la définition du terme.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Description or Definition List</title>
</head>
<body>
<h2>HTML Definition List</h2>
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
</body>
</html>
13. Formulaires HTML
Les formulaires HTML sont nécessaires pour collecter différents types d'entrées utilisateur,
telles que le nom, l'adresse e-mail, les numéros de téléphone, les informations de carte de
crédit, etc. Les formulaires contiennent des éléments spéciaux appelés contrôles comme une
zone de saisie, des cases à cocher, des boutons radio, des boutons d'envoi, etc. Les utilisateurs
remplissent généralement un formulaire en modifiant ses contrôles, par exemple : saisir du
texte, sélectionner des éléments, etc. et soumettre ce formulaire à un serveur Web pour un
traitement ultérieur.
La balise <form> est utilisée pour créer un formulaire HTML. Voici un exemple simple de
formulaire de connexion:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Form</title>
</head>
<body>
<form action="/examples/actions/confirmation.php" method="post">
<label>Username: <input type="text" name="username"></label>
<label>Password: <input type="password" name="userpass"></label>
<input type="submit" value="Submit">
</form>
</body>
</html>
La suite décrit les différents types de contrôles que vous pouvez utiliser dans votre formulaire.
Élément d'entrée
Il s'agit de l'élément le plus couramment utilisé dans les formulaires HTML. Il vous permet de
spécifier différents types de champs de saisie utilisateur, en fonction de l'attribut type. Un
élément d'entrée peut être de type champ de texte, champ de mot de passe, case à cocher,
bouton radio, bouton d'envoi, bouton de réinitialisation, boîte de sélection de fichier, ainsi que
plusieurs nouveaux types d'entrée introduits dans HTML5. Les types d'entrée les plus
fréquemment utilisés sont décrits ci-dessous.
Champs de texte
Les champs de texte sont des zones d'une ligne qui permettent à l'utilisateur de saisir du texte.
Les contrôles de saisie de texte sur une seule ligne sont créés à l'aide d'un élément <input>,
dont l'attribut type a une valeur text. Voici un exemple de saisie de texte sur une seule ligne
utilisée pour prendre le nom d'utilisateur:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>
Champs de mot de passe
Les champs de mot de passe sont similaires aux champs de texte. La seule différence est; les
caractères dans un champ de mot de passe sont masqués, c'est-à-dire qu'ils sont affichés sous
forme d'astérisques ou de points. Ceci afin d'empêcher quelqu'un d'autre de lire le mot de
passe à l'écran. Il s'agit également de contrôles d'entrée de texte sur une seule ligne créés à
l'aide d'un élément <input> dont l'attribut type a la valeur password.
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
Bouton radio
Les boutons radio permettent à l'utilisateur de sélectionner exactement une option parmi un
ensemble d'options prédéfini. Il est créé à l'aide d'un élément <input> dont l'attribut type a la
valeur radio. Voici un exemple de boutons radio pouvant être utilisés pour collecter les
informations de sexe de l'utilisateur:
<form>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
Un iframe ou cadre inline est utilisé pour afficher des objets externes, y compris d'autres
pages Web dans une page Web. Un iframe agit à peu près comme un mini navigateur Web
dans un navigateur Web. En outre, le contenu à l'intérieur d'une iframe existe entièrement
indépendamment des éléments environnants. La syntaxe de base pour ajouter une iframe à
une page Web peut être donnée avec:
<iframe src = "URL"> </iframe>
L'URL spécifiée dans l'attribut src pointe vers l'emplacement d'un objet externe ou d'une page
Web. L'exemple suivant affiche le fichier "hello.html" dans une iframe dans le document
actuel.
<iframe src="hello.html"></iframe>
Définition de la largeur et de la hauteur d'un iFrame
Les attributs de hauteur et de largeur sont utilisés pour spécifier la hauteur et la largeur de
l'iframe.
<iframe src="hello.html" width="400" height="200"></iframe>
Vous pouvez également utiliser CSS pour définir la largeur et la hauteur d'un iframe, comme
indiqué ici:
<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>
Les valeurs d'attribut largeur et hauteur sont spécifiées en pixels par défaut, mais vous pouvez
également définir ces valeurs en pourcentage, par exemple 50%, 100%, etc. La largeur par
défaut d'une iframe est de 300 pixels, tandis que la hauteur par défaut est de 150 pixels.
Suppression de la bordure du cadre par défaut
L'iframe a une bordure autour d'elle par défaut. Cependant, si vous souhaitez modifier ou
supprimer les bordures iframe, le meilleur moyen est d'utiliser la propriété CSS border.
L'exemple suivant rendra simplement l'iframe sans aucune bordure.
<iframe src="hello.html" style="border: none;"></iframe>
De même, vous pouvez utiliser la propriété border pour ajouter les bordures de votre choix à
une iframe. L'exemple suivant rendra l'iframe avec une bordure bleue de 2 pixels.
<iframe src="hello.html" style="border: 2px solid blue;"></iframe>
Utilisation d'un iFrame comme cible de lien
Un iframe peut également être utilisé comme cible pour les hyperliens. Un iframe peut être
nommé à l'aide de l'attribut name. Cela implique que lorsqu'un lien avec un attribut cible avec
ce nom comme valeur est cliqué, la ressource liée s'ouvre dans cette iframe. Essayons un
exemple pour comprendre comment cela fonctionne essentiellement:
<iframe src="demo-page.html" name="myFrame"></iframe>
<p> <a href="https://www.tutorialrepublic.com" target="myFrame"> Open
TutorialRepublic.com </a>
</p>
Références :
1. https://www.tutorialrepublic.com/html-tutorial/
2. https://developer.mozilla.org/fr/docs/Web/Guide/HTML/HTML5
3. Jean-Pierre Vincent et Jonathan Verrecchia, « HTML5 : De la page web à
l'application web », publié par Dunod.