Langage HTML5

Télécharger au format docx, pdf ou txt
Télécharger au format docx, pdf ou txt
Vous êtes sur la page 1sur 30

Faculté des

Sciences El
Jadida

Technologie du Web

Prof. Mohamed NABIL

Département Informatique

Année Universitaire 2020/2021


Langage HTML5 FSJ-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>

Mohamed NABIL 1 2020/2021


Langage HTML5 FSJ-département informatique

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

 Insensibilité à la casse dans les balises et attributs HTML


En HTML, les noms de balises et d'attributs ne sont pas sensibles à la casse. Cela signifie la
balise <P>, et la balise <p> définit la même chose en HTML qui est un paragraphe.
 Éléments HTML vides
Les éléments vides (également appelés éléments à fermeture automatique ou éléments vides)
ne sont pas des balises conteneurs.
Un exemple typique d'élément vide est l'élément <br>, qui représente un saut de ligne.
Certains autres éléments vides courants sont <img>, <input>, <link>, <meta>, <hr>, etc.
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">
 Imbrication d'éléments HTML
Placer un élément dans un autre s'appelle l'imbrication. Un élément imbriqué, également
appelé élément enfant, peut également être un élément parent si d'autres éléments y sont
imbriqués.
L'exemple suivant montre certains éléments imbriqués dans l'élément <p>.
<p>Here is some <b>bold</b> text</p>

Mohamed NABIL 2 2020/2021


Langage HTML5 FSJ-département informatique

<p>Here is some <em>emphasized</em> text</p>


<p>Here is some <mark>highlighted</mark> text</p>
Les balises HTML doivent être imbriquées dans le bon ordre. Ils doivent être fermés dans
l'ordre inverse de leur définition, ce qui signifie que la dernière balise ouverte doit être fermée
en premier.
 Commentaires en HTML
Les commentaires sont généralement ajoutés dans le but de rendre le code source plus facile à
comprendre. Cela peut aider d'autres développeurs à comprendre ce que vous essayez de faire
avec le HTML. Les commentaires ne sont pas affichés dans le navigateur.
Un commentaire HTML commence par <! - et se termine par ->, comme illustré dans
l'exemple suivant:
<! - Ceci est un commentaire HTML ->
<! - Ceci est un commentaire HTML sur plusieurs lignes
qui s'étend sur plus d'une ligne ->
Vous pouvez également commenter une partie de votre code HTML à des fins de débogage,
comme suit:
<! - Masquer cette image pour la tester
<img src = "images / smiley.png" alt = "Smiley">
->
 Types d'éléments HTML
Les éléments peuvent être placés dans deux groupes distincts: les éléments de niveau bloc et
les éléments de niveau en ligne. Les premiers constituent la structure du document, tandis
que les seconds habillent le contenu d'un bloc.
Les éléments de niveau bloc les plus couramment utilisés sont <div>, <p>, <h1> à <h6>,
<form>, <ol>, <ul>, <li>, etc. Alors que les éléments de niveau en ligne couramment utilisés
sont <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, etc.
4. Attributs HTML

Les attributs définissent des caractéristiques ou propriétés supplémentaires de l'élément telles


que la largeur et la hauteur d'une image. Les attributs sont toujours spécifiés dans la balise de
début (ou balise d'ouverture) et se composent généralement de paires nom/valeur comme
name = "value".
De plus, certains attributs sont requis pour certains éléments. Par exemple, une balise <img>
doit contenir un attribut src et alt. Voila des exemples d'utilisation des attributs:
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">
Il existe plusieurs attributs dans HTML5 qui ne se composent pas de paires nom/valeur mais
se composent uniquement de nom. Ces attributs sont appelés attributs booléens. Des

Mohamed NABIL 3 2020/2021


Langage HTML5 FSJ-département informatique

exemples d'attributs booléens couramment utilisés sont checked, disabled, readonly,


required, etc. les exemples suivants montrent ce cas :
<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>
Les valeurs d'attribut sont généralement insensibles à la casse, à l'exception de certaines
valeurs d'attribut, comme les attributs id et class.
Il existe certains attributs, tels que id, title, class, style, etc. que vous pouvez utiliser sur la
majorité des éléments HTML. La section suivante décrit leurs utilisations.
 L'attribut id
L'attribut id est utilisé pour donner un nom ou un identifiant unique à un élément dans un
document. Cela facilite la sélection de l'élément en utilisant CSS ou JavaScript.
<input type="text" id="firstName">
<div id="container">Du contenu</div>
<p id="infoText">Ceci est un paragraphe.</p>
L'identifiant d'un élément doit être unique dans un seul document. Aucun élément d'un même
document ne peut être nommé avec le même identifiant et chaque élément ne peut avoir qu'un
seul identifiant.
 L'attribut class
Comme l'attribut id, l'attribut class est également utilisé pour identifier les éléments. Mais
contrairement à id, l'attribut class n'a pas besoin d'être unique dans le document. Cela signifie
que vous pouvez appliquer le même attribut class à plusieurs éléments dans un document,
comme dans l'exemple suivant:
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>
Comme l'attribut class peut être appliqué à plusieurs éléments, par conséquent, toutes les
règles de style écrites dans cet attribut class seront appliquées à tous les éléments ayant cet
attribut class.
 L'attribut title
L'attribut title à utiliser pour fournir un texte d'avertissement sur un élément ou son contenu.
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Click to view a larger image"> <img
src="images/kites-thumb.jpg" alt="kites">
</a>
La valeur de l'attribut title est affichée sous forme d'infobulle par les navigateurs Web lorsque
l'utilisateur place le curseur de la souris sur l'élément.
 L'attribut style

Mohamed NABIL 4 2020/2021


Langage HTML5 FSJ-département informatique

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>

Mohamed NABIL 5 2020/2021


Langage HTML5 FSJ-département informatique

</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

Mohamed NABIL 6 2020/2021


Langage HTML5 FSJ-département informatique

contains multiple tabs and line breaks


in the source code.
</p>
</body>
</html>
Insérez &nbsp; pour créer des espaces consécutifs supplémentaires, tout en insérant la balise
<br> pour créer des sauts de ligne sur vos pages Web, comme illustré dans l'exemple suivant:

<!DOCTYPE html> This paragraph has multiple spaces.


<html >
<head> This paragraph has multiple
<title>Preserving White Space in HTML</title>
</head> line
<body>
<p>This paragraph has multiple &nbsp;&nbsp;&nbsp; spaces.</p>
breaks.
<p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>
</body>
</html>
 Définition du texte préformaté
Parfois, utiliser &nbsp;, <br> pour gérer les espaces n'est pas très pratique. Vous pouvez
également utiliser la balise <pre> pour afficher les espaces, les tabulations, les sauts de ligne,
etc. exactement tels qu'ils sont écrits dans le fichier HTML. Il est très utile pour présenter un
texte dans lequel les espaces et les sauts de ligne sont importants comme le poème ou le code.
L'exemple suivant affichera le texte dans le navigateur tel qu'il est dans le code source:
<!DOCTYPE html> Twinkle, twinkle, little star,
<html> How I wonder what you are!
<head> Up above the world so high,
<title>HTML Preformatted Text</title> Like a diamond in the sky.
</head>
<body>
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
</body>
</html>
7. Liens HTML

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:

Mohamed NABIL 7 2020/2021


Langage HTML5 FSJ-département informatique

<!DOCTYPE html> Google Search


<html>
<head>
<title>Creating Links in HTML</title>
</head>
<body>
<p><a href="https://www.google.com/" target="_blank"> Google
Search </a></p>
<p>
<a href="/examples/images/kites.jpg"> Tutorial Republic
<img src="/examples/images/kites-thumb.jpg" alt="kites">
</a>
</p>
<p><a href="https://www.tutorialrepublic.com/">Tutorial
Republic</a></p>
</body>
</html>

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.

Mohamed NABIL 8 2020/2021


Langage HTML5 FSJ-département informatique

 Création d'ancres de signets


Vous pouvez également créer des ancres de signet pour permettre aux utilisateurs d'accéder à
une section spécifique d'une page Web. Les signets sont particulièrement utiles si vous avez
une très longue page Web.

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>

<h2 id="sectionA">Section A</h2>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius
quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.
Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh
non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in
arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at
bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque
porttitor. Integer faucibus ligula. Quis quam ut magna consequat faucibus. Pellentesque eget
nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at
mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus
auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel
congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum
viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et
diam tristique, accumsan nunc eu, hendrerit tellus.</p>

<h2 id="sectionB">Section B</h2>


<p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel,
porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam
in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet
mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt
risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis
a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id
pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id. Fusce enim arcu, interdum vel
metus dignissim, venenatis feugiat purus. Nulla posuere orci ut leo sodales, sed cursus dolor
ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Etiam sit amet quam orci. Nulla sollicitudin lectus eget posuere venenatis. Sed

Mohamed NABIL 9 2020/2021


Langage HTML5 FSJ-département informatique

vestibulum elementum sagittis. Quisque tristique tortor quis feugiat sollicitudin. Ut


pellentesque luctus vulputate. Ut at odio ac erat blandit vehicula ut eget urna. In hac
habitasse platea dictumst. Nullam ut iaculis nibh, eget eleifend elit.</p>

<h2 id="sectionC">Section C</h2>


<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse
ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra
tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra
interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus
congue vestibulum ligula sed consequat.Enim arcu, interdum vel metus dignissim, venenatis
feugiat purus. Nulla posuere orci ut leo sodales, sed cursus dolor ornare. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet quam orci.
Nulla sollicitudin lectus eget posuere venenatis. Sed vestibulum elementum sagittis. Quisque
tristique tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at odio ac erat
blandit vehicula ut eget urna. In hac habitasse platea dictumst. Nullam ut iaculis nibh, eget
eleifend elit. Curabitur ligula justo, dapibus non ligula tristique, dapibus tristique nulla.
Aliquam pulvinar dapibus eros, rutrum pretium urna iaculis ut. Nam est est, tempus id
egestas et, viverra in dui. Aliquam gravida orci tortor, sed congue justo ornare vel. Cras in
quam consectetur eros varius scelerisque. Ut vel fermentum purus. Nullam interdum blandit
turpis, id pellentesque massa feugiat at. Ut sed lectus lectus. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Nulla rutrum, ante quis convallis
ultricies, magna quam rhoncus erat, in lacinia libero magna a ipsum.</p>
</body>
</html>

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.

Mohamed NABIL 10 2020/2021


Langage HTML5 FSJ-département informatique

8. Formatage de texte HTML

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.

<!DOCTYPE html> This is bold text.


<html lang="en">
<head> This is strongly important text.
<title>Formatting Text in HTML</title>
</head> This is italic text.
<body>
<p>This is <b>bold text</b>.</p> This is emphasized text.
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p> This is highlighted text.
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p> This is computer code.
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p> This is smaller text.
<p>This is <sub>subscript</sub> and <sup>superscript</sup>
text.</p> This is subscript and superscript text.
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p><p>This is <b>bold This is deleted text.
text</b>.</p>
</body> This is inserted text.
</html>
This is bold text.

 Différence entre les balises <strong> et <b>


Les balises <strong> et <b> rendent le texte inclus dans une police en gras par défaut, mais la
balise <strong> indique que son contenu a une grande importance, tandis que la balise <b>
est simplement utilisée pour attirer l'attention du lecteur sans transmettre toute importance
particulière.
 Différence entre les balises <em> et <i>
De même, les balises <em> et <i> rendent le texte inclus en italique par défaut, mais la balise
<em> indique que son contenu a mis l'accent sur le texte environnant, tandis que la balise <i>
est utilisée pour le balisage texte qui est détaché du texte normal pour des raisons de lisibilité,
comme un terme technique, une phrase idiomatique d'une autre langue, une pensée, etc.
 Mise en forme des citations
Vous pouvez facilement formater les blocs de citation d'autres sources avec la balise HTML
<blockquote>. Les blockquotes sont généralement affichés avec des marges en retrait à
gauche et à droite, avec un petit espace supplémentaire ajouté au-dessus et en dessous.
l’exemple suivant montre comment cela fonctionne:
<!DOCTYPE html> Learn from
<html lang="en"> yesterday, live for

Mohamed NABIL 11 2020/2021


Langage HTML5 FSJ-département informatique

<head> today, hope for


<title>HTML Block Quotations</title> tomorrow. The
</head> important thing is not
<body> to stop questioning.

— Albert Einstein
<blockquote>
<p>Learn from yesterday, live for today, hope for tomorrow.
The important thing is not to stop questioning.</p>
<cite>&mdash; 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

Mohamed NABIL 12 2020/2021


Langage HTML5 FSJ-département informatique

<address> faucibus ligula.


Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA Mozilla Foundation
</address> 331 E. Evelyn Avenue
</body>
</html> Mountain View, CA 94041, USA

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

Mohamed NABIL 13 2020/2021


Langage HTML5 FSJ-département informatique

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>

Importation de feuilles de style externes


La règle @import est une autre façon de charger une feuille de style externe. L'instruction
@import indique au navigateur de charger une feuille de style externe et de l’utiliser.

Mohamed NABIL 14 2020/2021


Langage HTML5 FSJ-département informatique

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">

Mohamed NABIL 15 2020/2021


Langage HTML5 FSJ-département informatique

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>

Mohamed NABIL 16 2020/2021


Langage HTML5 FSJ-département informatique

<title>Creating Image Maps in HTML</title>


</head>
<body>
<img src="/examples/images/objects.png" usemap="#objects" alt="Objects">
<map name="objects">
<area shape="circle" coords="137,231,71" href="/examples/html/clock.html" alt="Clock">
<area shape="poly" coords="363,146,273,302,452,300" href="/examples/html/sign.html"
alt="Sign">
<area shape="rect" coords="520,160,641,302" href="/examples/html/book.html" alt="Book">
</map>
</body>
</html>
L'attribut name de la balise <map> est utilisé pour référencer la carte à partir de la balise
<img> en utilisant son attribut usemap. La balise <area> est utilisée à l'intérieur de l'élément
<map> pour définir les zones cliquables sur une image. Vous pouvez définir n'importe quel
nombre de zones cliquables dans une image.
La carte image ne doit pas être utilisée pour la navigation sur le site Web. Ils ne sont pas
adaptés aux moteurs de recherche. Une utilisation valide d'une carte image est avec une carte
géographique.
De nombreux outils en ligne permettent de créer des images cartographiques. Certains
éditeurs avancés comme Adobe Dreamweaver fournissent également un ensemble d'outils
permettant de créer facilement des images cartographiques.
11. Tableaux HTML
 Création de tableaux en HTML
Le tableau HTML vous permet d'organiser les données en lignes et en colonnes. Ils sont
couramment utilisés pour afficher des données tabulaires telles que les listes de produits, les
détails des clients, les rapports financiers, etc. Vous pouvez créer un tableaux à l'aide de
l'élément <table>. À l'intérieur de l'élément <table>, vous pouvez utiliser les éléments <tr>
pour créer des lignes, et pour créer des colonnes à l'intérieur d'une ligne, vous pouvez utiliser
les éléments <td>. Vous pouvez également définir une cellule comme en-tête d'un groupe de
cellules de tableau à l'aide de l'élément <th>. L'exemple suivant illustre la structure la plus
élémentaire d'une table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating Tables in HTML</title>
</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>

Mohamed NABIL 17 2020/2021


Langage HTML5 FSJ-département informatique

<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>

Mohamed NABIL 18 2020/2021


Langage HTML5 FSJ-département informatique

</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>

Mohamed NABIL 19 2020/2021


Langage HTML5 FSJ-département informatique

</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>

Mohamed NABIL 20 2020/2021


Langage HTML5 FSJ-département informatique

<title>Adding a Caption to the HTML Table</title>


<style>
table {
width: 300px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
table.secondary caption {
caption-side: bottom;
}
</style>
</head>
<body>
<h2>Table with Caption at the Top</h2>
<table>
<caption>Users Info</caption>
<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>
</table>

<h2>Table with Caption at the Bottom</h2>


<table class="secondary">
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>

Mohamed NABIL 21 2020/2021


Langage HTML5 FSJ-département informatique

</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>

Mohamed NABIL 22 2020/2021


Langage HTML5 FSJ-département informatique

</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>

Mohamed NABIL 23 2020/2021


Langage HTML5 FSJ-département informatique

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>

Mohamed NABIL 24 2020/2021


Langage HTML5 FSJ-département informatique

</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.

Mohamed NABIL 25 2020/2021


Langage HTML5 FSJ-département informatique

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>

Mohamed NABIL 26 2020/2021


Langage HTML5 FSJ-département informatique

<input type="radio" name="gender" id="female">


<label for="female">Female</label>
</form>
Cases à cocher
Les cases à cocher permettent à l'utilisateur de sélectionner une ou plusieurs options 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 checkbox. Voici un exemple de cases à cocher qui peuvent être utilisées pour collecter
des informations sur les loisirs de l'utilisateur:
<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>
Si vous souhaitez sélectionner un bouton radio ou une case à cocher par défaut, vous pouvez
ajouter l'attribut coché à l'élément d'entrée, comme <input type = "checkbox" checked>.
Boîte de sélection de fichier
Les champs de fichier permettent à un utilisateur de rechercher un fichier local et de l'envoyer
en tant que pièce jointe avec les données du formulaire. Les navigateurs Web tels que Google
Chrome et Firefox affichent un champ de saisie de sélection de fichier avec un bouton
Parcourir qui permet à l'utilisateur de naviguer sur le disque dur local et de sélectionner un
fichier. Ceci est également créé à l'aide d'un élément <input>, dont la valeur d'attribut type est
définie sur file.
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
Textarea
Textarea est un contrôle de saisie de texte sur plusieurs lignes qui permet à un utilisateur de
saisir plus d'une ligne de texte. Les contrôles de saisie de texte multiligne sont créés à l'aide
d'un élément <textarea>.
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>
Sélectionner des cases
Une zone de sélection est une liste déroulante d'options qui permet à l'utilisateur de
sélectionner une ou plusieurs options dans une liste déroulante d'options. La boîte de sélection
est créée à l'aide de l'élément <select> et de l'élément <option>. Les éléments <option> dans
l'élément <select> définissent chaque élément de liste.
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>

Mohamed NABIL 27 2020/2021


Langage HTML5 FSJ-département informatique

Boutons d'envoi et de réinitialisation


Un bouton d'envoi est utilisé pour envoyer les données du formulaire à un serveur Web.
Lorsque vous cliquez sur le bouton d'envoi, les données du formulaire sont envoyées au
fichier spécifié dans l'attribut d'action du formulaire pour traiter les données soumises. Un
bouton de réinitialisation réinitialise tous les contrôles de formulaires aux valeurs par défaut.
<form action="action.php" method="post">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Vous pouvez également créer des boutons à l'aide de l'élément <button>. Les boutons créés
avec l'élément <button> fonctionnent comme les boutons créés avec l'élément d'entrée, mais
ils offrent des possibilités de rendu plus riches en permettant l'incorporation d'autres éléments
HTML.
Regroupement des contrôles de formulaire
Vous regroupez également les contrôles et les étiquettes liés de manière logique dans un
formulaire Web à l'aide de l'élément <legend>. Le regroupement des contrôles de formulaire
en catégories permet aux utilisateurs de localiser plus facilement un contrôle, ce qui rend le
formulaire plus convivial. Essayons l'exemple suivant pour voir comment cela fonctionne:
<form>
<fieldset>
<legend>Contact Details</legend>
<label>Email Address: <input type="email" name="email"></label>
<label>Phone Number: <input type="text" name="phone"></label>
</fieldset>
</form>
Attributs de formulaire fréquemment utilisés
Le tableau suivant répertorie les attributs des éléments de formulaire les plus fréquemment
utilisés:
attributs Description
nom Spécifie le nom du formulaire.
action Spécifie l'URL du programme ou du script sur le serveur Web qui
sera utilisé pour traiter les informations soumises via le formulaire.
method Spécifie la méthode HTTP utilisée pour envoyer les données au
serveur Web par le navigateur. La valeur peut être soit get (par
défaut) et post.
target Spécifie où afficher la réponse reçue après l'envoi du formulaire.
Les valeurs possibles sont _blank, _self, _parent et _top.
enctype Spécifie comment les données du formulaire doivent être codées
lors de la soumission du formulaire au serveur. Applicable
uniquement lorsque la valeur de l'attribut de méthode est post.

L'attribut name représente le nom du formulaire dans la collection de formulaires. Sa valeur


doit être unique parmi les formulaires d'un document et ne doit pas être une chaîne vide.
Toutes les données envoyées via la méthode Get sont visibles dans la barre d'adresse du
navigateur. Mais, les données envoyées par Post ne sont pas visibles pour l'utilisateur.
14. HTML iFrame

Mohamed NABIL 28 2020/2021


Langage HTML5 FSJ-département informatique

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.

Mohamed NABIL 29 2020/2021

Vous aimerez peut-être aussi