Mettre la date et, en sous-titre,

sur la feuille double « Internet et le Web » :

Création de pages Web

Langage HTML
I- Questions préliminaires
Créez un dossier « SNT » dans votre espace personnel.
Vous y enregistrerez, au fur et à mesure, tous les documents pdf
que je vous donnerai.
Commencez par enregistrer ceux déjà partagés dans Pronote pour
la SNT.

Créez un sous-dossier « WEB » qui contiendra votre travail sur ce

cours.

Observez d'abord
Créez dans le dossier WEB un sous-dossier « site 0 » et enregistrez-y
une page Web contenant du texte et des images.
Attention : on souhaite l’enregistrement complet de la page, ne pas
confondre avec un raccourci vers le site : dans ce cas, il y a une petite
flèche sur l’icône.
Observez ce que contient le dossier « site 0 » et décrivez son contenu
sur votre feuille double.
Vérifier que tout y est ou recommencez… il faut parfois un peu de temps
pour tout télécharger.

Réponse possible :
Il comprend au moins un fichier html (avec l’extension : .htm) et un ou
plusieurs dossiers contenant tous les éléments utiles à la construction de
la page : titre, images, photos, boutons, …
Ouvrez ces dossiers et déterminez ce qu’ils contiennent en observant les
extensions des fichiers ou, à défaut, les « types » dans la description des
fichiers.

II - Création de pages, préparatifs

Il faut d'abord définir l'emplacement du site sur le disque dur.
Créez dans le dossier « WEB » un sous-dossier « site 1 » et un sous-
dossiers « images ».
Rechercher 2 images sur le Web, au format jpg, enregistrez-les dans le
sous-dossier « images » et renommez-les : 10 et 20.

Le dossier "site 1" devra contenir tous les éléments composant vos
pages, et tous les liens devront être créés relativement à lui.

Création d'une page avec le Bloc-notes

Ouvrir le Bloc-notes :
Menu Démarrer - Programmes – Accessoires (ou Accessories) – Bloc-
Note ou à défaut ouvrir NotePad.

Tapez le texte suivant (c'est du code html) :

Enregistrez ce fichier sous le nom « essai » dans le dossier « Site 1 »
en lui attribuant l'extension : htm
Son nom sera donc « essai.htm ».
Pour l’enregistrement, bien sélectionner « tous les fichiers » pour
que l’extension .htm soit prise en compte !
Il faudra l’ouvrir dans le Bloc-Note par un clic-droit si ça ne fonctionne
pas.

S’il y a encore des problèmes d’enregistrement, ça arrive quelquefois :

utilisez le logiciel NotePad à la place du Bloc-Note.

Ouvrez maintenant le fichier essai.htm dans le navigateur, de préférence

Mozilla.
Avec Chrome, le code source sera plus difficilement accessible.
Où figure le titre "Exemples de balises" ?
Faites un clic droit et sélectionnez « Code Source de la page » ou
« Affichage – Source ».
Que retrouvez-vous ?
Si « Affichage » n’apparaît pas, clic droit sur la barre de titre de la fenêtre
et afficher « Menu ».

Retournez sur fichier « essai.htm » et, à l’aide d’un clic droit,

sélectionnez : « Ouvrir avec… Bloc-Notes ».

Après la balise : </B>, ajouter la balise : <BR>

Enregistrez, toujours sous le nom « essai.htm ».
Continuez de répondre aux questions sur la feuille double :
Que s'est-il passé dans la page ?
Il faudra "Actualiser" la page pour voir des changements, on pourra
actualiser par « Ctrl F5 ».

Avant la balise : </body>, ajouter la balise : <HR>

Que s'est-il passé ?
Et si on avait ajouté à la place de <HR> :
<HR width=100> ?
Quelle est la traduction de « width » en anglais ?
Et si on avait ajouté à la place :
<HR width=100 align=left> ?

N'oubliez pas les espaces, pensez à enregistrer le nouveau texte et à

actualiser le navigateur, qui rechargera alors la page.

Images :
Avant la balise : </body>, ajouter les balises :
<img src="Images/10.jpg"/>
<img src="Images/20.jpg"/>
Qu’observez-vous ?
Le langage html permet de décrire la structure d'un document Web.
Une balise est un code que l'on glisse dans le texte entre des
marqueurs : < > pour indiquer par exemple que le texte doit être
affiché en gras.
On pourrait décrire ainsi le fonctionnement des balises :

Texte courant <balise> texte affecté par la balise </balise> suite du texte

Entrer des lignes de code à la main, c'était la lourde tâche des créateurs
de sites aux débuts du Web… Maintenant, grâce à des éditeurs
wysiwyg : what you see is what you get de pages html, c'est inutile
pour la majorité des utilisateurs.
Le code html est toujours accessible et on peut facilement basculer d'un
mode à l'autre.
Il est parfois utile de connaître un minimum de langage html, pour
intégrer un petit programme écrit en JavaScript par exemple, qui
permettra d'insérer la date et l'heure sur le site… ou diverses autres
applications. De tels programmes sont téléchargeables sur Internet.
Les balises utilisées ici, corrigé :
Le premier fichier est :
<html>
<head>
<title>Exemples de balises</title>
</head>
<body>
<B>Ce texte est en gras.</B>
<I>Ce texte est en italique.</I>
</body>
</html>

Le dernier fichier est :

<html>
<head>
<title>Exemples de balises</title>
</head>
<body>
<B>Ce texte est en gras.</B>
<BR>
<I>Ce texte est en italique.</I>
<HR width=100 align=left>
<img src="Images/10.jpg"/>
<img src="Images/20.jpg"/>
</body>
</html>
 III - Création d’un mini site
Glacier Blanc --- > Glacier Noir
Je vous fais d’abord travailler sur un exemple.
Ici chacun travaille individuellement dans son dossier personnel, et si
vous avez travaillé par groupe de 2 lors d’une heure en classe complète,
il faudra sauvegarder chacun son travail.

Je vous proposer un site tout fait, volontairement très simple, que vous
pourrez utiliser ensuite pour réaliser le vôtre :
« MON SITE Le Glacier Blanc »

Vous commencerez par le transformer en un site :

« MON SITE Le Glacier Noir »
avec des photos collectées sur Internet.

Vous chercherez rapidement des photos du glacier noir sur Internet.

Vous changerez tous les liens du site fourni pour les diriger vers les
pages adéquates.

Le site « Le Glacier Blanc » est zippé, compressé.

Il faudra le dézippé en double-cliquant sur le fichier et en le copiant (par
glisser-déplacer ou clic-droit copier puis coller) dans votre dossier « SNT
/ Internet Le Web ».
Ensuite, vous modifierez toutes les parties, transformant « Glacier
Blanc » en « Glacier Noir », en changeant les photos.
 C’est parti !
Commencez par mettre votre NOM et votre Prénom en haut et à
gauche de la première page du site.
Pour enregistrer le Bloc-Notes sous format htm :
« Fichier »
« Enregistrer sous »
Sélectionner : « Tous les fichiers »
puis mettre le nom que vous voulez
sans oublier d’ajouter l’extension : « .htm »
On pourra aussi utiliser NotePad++ ou bien NotePad.
Pour retrouver votre code source à partir de votre page html :
Utiliser Mozilla et par clic-droit dans la page sélectionnez :
« Code source »
Au travail, ce site sera évalué et tout doit fonctionner :
ne sabotez pas les liens initiaux !
faites attention et procédez par étapes, observez au fur et à mesure que
vos changement fonctionnent.

Votre dossier et vos pages ressembleront au site fourni, toute

mention « Glacier Blanc » sera simplement remplacée par « Glacier
Noir » et les photos et liens seront changés pour des photos et
liens concernant le Glacier Noir !

Attention, la première page html que vous créerez se nommera :

Index.html
C’est la page qui s’affichera en premier, par défaut, à l’ouverture du site.
 IV - Création d’un mini site :
A vous de jouer !

Mettez-vous seul ou par groupes de 2 élèves…

d’un même demi-groupe de SNT !
Choisissez un thème et créez votre mini site en tenant compte des
indications données précédemment.

ATTENTION !
CHAQUE MEMBRE DU GROUPE SAUVEGARDERA
LA TOTALITE DU SITE A CHAQUE SEANCE !

Ne pas passer trop de temps en classe au choix d’un sujet.

Conserver l’arborescence et la structure du site : Le Glacier Blanc.
Le télécharger à nouveau pour le modifier et remplacer ses données,
- juste ce qu’il faut ! - pour construire le nouveau site sans altérer les
liens déjà existants, qui fonctionnent et qu’il est inutile de modifier… mais
il ne devra bien sûr plus subsister aucune trace de « Glacier Blanc ».

Si l’on a le temps, on pourra agrémenter le site avec d’autres pages et

liens, peaufiner la charte graphique avec un fichier css…

Evaluation : tout doit fonctionner ! Ne massacrez pas le site initial !

Votre site sera placé dans le dossier SNT et aura pour nom :
Mon site : ici le titre de votre site Elève 1 Elève 2
avec le nom du ou des élèves participants, 2 maximum.
Devront figurer au moins dans votre site :

- 2 pages html
- le titre de la page
- en dessous de ce titre et à gauche vos noms sur la page principale
- le titre principal, un sous-titre, des textes de couleurs et de tailles
différentes
- un lien d’une page à l’autre
- un lien qui conduit à l’intérieur de la même page
- un lien vers une page Web extérieure au site
- une image
- une image cliquable

… c’est-à-dire tout ce qui figure déjà dans le site :

« Glacier Blanc »
Vous repartirez de lui pour travailler, en changeant tous les éléments.

Attention !
Tous vos liens devront fonctionner, même si vous placez votre site sur
un autre ordinateur ou sur une clé : vérifiez-le !

NE PAS HESITER A FAIRE DES SAUVEGARDES régulière, avant de

repartir sur d’autre modifications : copier votre site dans un dossier
« Sauvegardes ».
Le site devra être original, et l’aspect de départ devra être personnalisé :
couleur, titre en gras, etc.
Consultez les balises de la fin de ce document pour agrémenter votre
site.
Ressources pour élaborer ces pages :

• On travaille bien les parties précédentes, le début de cette

activité, on les revoit si nécessaire !

• On utilise les balises déjà rencontrées, notamment pour les liens

et images.

• On utilise la liste des balises dans l’annexe ci-dessous.

• On peut chercher des informations complémentaires sur Internet,

par exemple sur le site w3school :
https://www.w3schools.com

Je ne vous demande pas ici de connaître des balises par cœur mais de
savoir qu’elles existent et de savoir les modifier et d’être capable de
retrouver leur principe de fonctionnement.
 V- Les feuilles de style
jsfiddle.net

Partie à travailler avec soin afin que vous puissiez utiliser ces balises
ultérieurement.

Nous allons nous intéresser à un acteur fondamental du développement

Web,
le couple :
HTML + CSS
Hypertext Markup Language
Cascading Style Sheets

L’Hypertext Markup Language est un langage de balisage conçu pour

représenter les pages Web. Il permet de structurer sémantiquement et
de mettre en forme le contenu des pages, d’inclure des liens hypertextes
– d’où son nom -, des ressources multimédias : images, formulaires de
saisie, programmes informatiques.
Il permet de créer des documents interopérables avec des équipements
très variés de manière conforme aux exigences de l’accessibilité du Web.
Il est souvent utilisé conjointement avec des langages de programmation :
JavaScript par exemple, et des formats de présentation : feuilles de style
en cascade.

Grâce au HTML on peut, dans un navigateur Web ou browser :

Firefox, Chrome, Opera, …
afficher du texte, des images, proposer des hyperliens : liens vers
d'autres pages Web, afficher des formulaires, des vidéos grâce à la
dernière version du HTML, l'HTML5.
HTML n'est pas un langage de programmation (comme le Python par
exemple), ici, pas question de conditions, de boucles…
C'est un langage de description.

Après avoir lancé votre navigateur Web, tapez dans la barre d'adresse :
http://jsfiddle.net/
Vous devriez voir apparaître ceci :

Nous allons pour l'instant uniquement utiliser la fenêtre « HTML » et la

fenêtre « Result ».
1 - Écrire ou copier/coller le code HTML suivant
dans la fenêtre « HTML » :
<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?
</p>

Qu'est-ce qui s'affiche dans la fenêtre

« Result », après avoir cliqué sur « Run » ?

Comme déjà évoqué ci-dessus, en HTML tout est une histoire de balise
que l'on ouvre et que l'on ferme.

• Une balise ouvrante est de la forme <nom_de_la_balise>

• Les balises fermantes sont de la forme </nom_de_la_balise>
En observant attentivement le code, vous devriez forcément remarquer
que toute balise ouverte doit être refermée à un moment ou un autre. La
balise ouvrante et la balise fermante peuvent être sur la même ligne ou
pas, cela n'a aucune importance, la seule question à se poser ici est : ai-
je bien refermé toutes les balises que j'ai ouvertes ?

Une structure du type :

<balise1>
<balise2>
</balise1>
</balise2>
est interdite, la balise2 a été ouverte après la balise1, elle devra
donc être refermée avant la balise1.
En revanche, l'enchaînement suivant est correct :
<balise1>
<balise2>
</balise2>
</balise1>
Notez que dans notre exemple nous respectons bien cette
règle « d'imbrication » des balises avec la balise <p> et la
balise <strong>.
Il est important de comprendre que chaque balise a une signification qu'il
faut bien respecter (on parle de la sémantique des balises).

Exemples de balises
• Par exemple le texte situé entre la balise ouvrante et fermante <h1>
est obligatoirement un titre important (il existe des balises <h2>,
<h3>......qui sont aussi des titres, mais des titres moins importants
(sous-titre)).
• La balise <p> permet de définir des paragraphes.
• La balise <strong> permet de mettre en évidence (gras) un élément
important.

Il existe des balises qui sont à la fois ouvrantes et fermantes

<balise/>
• La balise permettant de sauter une ligne, la balise <br/>

Les attributs
Il est possible d'ajouter des éléments à une balise ouvrante, on parle
d'attribut. Une balise peut contenir plusieurs attributs :
<ma_balise attribut_1= "valeur_1" attribut_2="valeur_2">
Il existe beaucoup d'attributs différents, nous allons nous contenter de 2
exemples :

• attribut id (id pour identifiant)

• class
Nous verrons l’intérêt de ces attributs dans l'activité suivante.
2 - Écrire ou copier/coller le code HTML :
<h1>Ceci est un titre</h1>
<h2 class="titre_1">Ceci est un sous titre</h2>
<p id="para_1">Ceci est un <strong>paragraphe</strong>. Avez-vous bi
en compris ?</p>
Qu'est-ce qui s'affiche dans la fenêtre « Result » ?

Le HTML n'a pas été conçu pour gérer la mise en page -

même s’il sait le faire – mais pour gérer du contenu et de la
sémantique.
Pour tout ce qui concerne la mise en page et l'aspect
« décoratif » (on parle du « style » de la page), on utilise le CSS
(Cascading Style Sheets).

Dans JSFIDDLE, il est possible d'écrire du CSS dans la fenêtre en haut à

gauche.
3. Écrire ou copier/coller le code HTML :
<h1>Ceci est un titre</h1>
<h2>Ceci est un sous titre</h2>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?
</p>

4. Écrire ou copier/coller le code CSS suivant

dans la fenêtre « CSS » :
h1
{
text-align: center;
background-color: red;
}
h2
{
font-family: Verdana;
font-style: italic;
color: green;
}
Qu'est-ce qui s'affiche dans la fenêtre « Result » ?

Dans l'exemple du « À faire vous-même 3 », les propriétés "text-align" et

"background-color" seront appliquées au contenu de toutes les balises de
type h1 (avec respectivement les valeurs "center" et "red")…
5. Écrire ou copier/coller le code HTML :
<h1>Ceci est un titre</h1>
<h2>Ceci est un sous titre</h2>
<p id="para_1">Ceci est un <strong>paragraphe</strong>. Avez-vous bi
en compris ?</p>

6. Écrire ou copier/coller le code CSS suivant :

#para_1
{
font-style: italic;
color: green;
}
Qu'est-ce qui s'affiche dans la fenêtre « Result » ?
Que remarquez-vous ?

Il est donc possible de cibler un paragraphe et pas un autre en utilisant l'id

du paragraphe (en CSS l'id se traduisant par le signe "#").
Il est aussi possible d'utiliser l'attribut class à la place de l'id.
Dans le CSS on utilisera le point ". "à la place du "#".
La différence entre "id" et "class" n'est pas très importante.

• L'attribut "class" permet de donner le même nom à plusieurs reprises

dans une même page.
Si nous avions eu un 3e paragraphe, nous aurions pu avoir :
<p class="para_1">Voici un 3e paragraphe</p>
mais nous n'aurions pas pu avoir :
<p id="para_1"> Voici un 3e paragraphe </p>
car le nom "para_1" a déjà été utilisé pour le 1er paragraphe.
JSFIDDLE est un très bel outil, mais il ne peut pas être utilisé
pour la réalisation d'un vrai site Internet ou d'une vraie
application Web.

VI - Fichier CSS
Nous allons créer 2 fichiers :

• Un fichier qui contiendra du HTML : index.html

• Un fichier qui contiendra du CSS : style.css

Avec Notepad

À l'aide d'un éditeur de texte par exemple, créer un nouveau

fichier.
Sauvegardez-le en précisant son nom, par exemple "index.html".

Écrire ou copier/coller le code suivant dans votre éditeur de

texte (sans oublier de sauvegarder) :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous
bien compris ?</p>
</body>
</html>
Testez votre code à l'aide d'un navigateur Web (Firefox ou
Chrome) en “double-cliquant” sur le fichier index.html
Qu'est-ce que vous obtenez ?

Dans l'exemple vous reconnaissez le code se trouvant entre les

balises <body> :
<body>
......
</body>
Tout votre code HTML devra se trouver entre ces 2
balises.
Le reste des balises devraient vous êtes inconnues. Passons-les en revue
:

• La première ligne <!doctype html> permet d'indiquer au navigateur

que nous utiliserons la dernière version du HTML, le fameux HTML5.

• La balise <html> est obligatoire,

• L'attribut lang="fr" permet d'indiquer au navigateur que nous

utiliserons le français pour écrire notre page.

• Les balises <head>...</head> délimitent ce que l'on appelle l'en-

tête.
L'en-tête contient, dans notre exemple, deux balises :
o la balise <meta charset="utf-8"> qui permet de définir
l'encodage des caractères (utf-8)

o La balise <title> qui définit le titre de la page (attention ce titre

ne s'affiche pas dans le navigateur, ne pas confondre avec la
balise <h1>).
Toujours à l'aide de l’éditeur de texte, vous allez créer un fichier qui va
contenir le CSS de notre page (par exemple style.css).
Complétez ce fichier à l'aide du code suivant :

h1
{
text-align: center;
background-color: red;
}
p
{
font-family: Verdana;
font-style: italic;
color: green;
}
Pour l'instant notre CSS ne sera pas appliqué à notre page, pour ce faire,
il faut modifier notre code HTML en ajoutant une ligne qui va permettre
d'associer notre code CSS à notre page.

Modifiez le code HTML avec la ligne suivante :

<link rel="stylesheet" href="style.css">

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous
bien compris ?</p>
</body>
</html>
Testez votre code à l'aide d'un navigateur Web en “double-
cliquant” sur le fichier index.html :
Qu'est-ce que vous obtenez ?

Dans l'exemple que nous venons de voir, les fichiers "index.html" et

"style.css" se trouvent dans le même dossier. Il est souvent utile de placer
les fichiers CSS dans un dossier "CSS". Il faudra alors modifier le code
HTML en conséquence :

<link rel="stylesheet" href="CSS/style.css">

Quelques balises courantes
• La balise "a"
<a href="mon_autre_page.html">Cliquez ici pour vous rendre sur mon
autre page</a>
La balise "a" permet de créer des liens hypertextes, ce sont ces liens
hypertextes qui vous permettent de "voyager" entre les pages d'un site ou
entre les sites. Les liens hypertextes sont par défaut soulignés et de
couleur bleue (modifiable grâce au CSS). La balise a possède un attribut
"href" qui a pour valeur le chemin du fichier que l'on cherche à atteindre
ou l'adresse du site cible (exemple : <a
href="http://www.google.fr">Cliquez ici pour vous rendre sur
google.fr</a>). Entre la balise ouvrante et fermante, on trouve le texte qui
s'affichera à l'écran (c'est ce texte qui est souligné et de couleur bleue).La
balise peut sans problème se trouver en plein milieu d'un paragraphe.

• La balise "img"
Comme vous devez déjà vous en douter, la balise image sert à insérer
des......images :
<img src="mon_image.jpg" alt="avion"/>
la balise img est à la fois ouvrante et fermante comme la balise "br".
Elle possède 2 attributs :

• "src" qui doit être égal au nom du fichier image (ou au chemin si le
fichier image se trouve dans un autre dossier).
• "alt" qui doit être égal à une description de votre image (cet attribut
est utilisé notamment par les systèmes de description des pages
Web utilisées par les non-voyants), il faut donc systématiquement
renseigner cet attribut.

• Les balises "form", "input" et "button"

Les formulaires sont des éléments importants des sites Internet, ils
permettent à l'utilisateur de transmettre des informations. Un formulaire
devra être délimité par une balise "form" (même si ce n'est pas une
obligation) :
 <form>
....
</form>
Il existe différentes balises permettant de construire un formulaire,
notamment la balise "input". Cette balise possède un attribut "type" qui lui
permet de jouer des rôles très différents.

La balise "button" nous sera aussi d'une grande utilité.

Créez un fichier html contenant le code suivant :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
<form>
<p>voici un champ de texte : <input type="text"/><
/p>
<p>voici une checkbox <input type="checkbox"/><
/p>
<button>Cliquez ici !</button>
</form>
</body>
</html>
Testez votre code à l'aide d'un navigateur Web en “double-
cliquant” sur le fichier html que vous venez de créer.
Qu'est-ce que vous obtenez ?
 • Les balises "div" et "span"

Ces deux balises sont très utilisées, surtout la balise "div", pourtant il
faudrait autant que possible les éviter parce qu'elles n'ont aucune
signification particulière, ce sont des balises dites "génériques" qui servent
à organiser la page, à regrouper plusieurs balises dans une même entité.

2 balises génériques : "div" est une balise de type "block" et "span" est
une balise de type "inline".

L'ordre des balises dans le code HTML a une grande importance. Les
balises sont affichées les unes après les autres, on parle du flux normal
de la page.

C'est ici qu'entrent en jeu les balises de type "block" et les balises de type
"inline" :

• Les contenus des balises de type "block" (p, div,h1,...) se placent

sur la page Web les uns en dessous des autres.
• Les contenus des balises de type "inline" (strong, img, span, a) se
placent sur la page Web les uns à côté des autres.

C’est-à-dire qu’une balise de type "block" prend toute la largeur de la page

alors qu'une balise de type "inline" prend juste la largeur qui lui est
nécessaire.
Créez un fichier html contenant le code suivant :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
<div>div est une balise de type "block"</div>
<p>la balise p est une autre balise de type block</p>
<span>En revanche, span est une balise de type "inline"<
/span>
<a href="www.google.fr">Et voici une autre balise de type
"inline"</a>
<h1>h1 est bien une balise de type "block"</h1>
<span>la malheureuse balise span est "obligée" de se pla
cer en dessous</span>
</body>
</html>
Testez votre code.
Qu'est-ce que vous obtenez ?
Application sur le site personnel que vous avez déjà
créé, seul ou en groupe de deux :

Agrémentez-le avec une page css.

Définir un style, le modifier.

 ANNEXE
La liste des balises
HTML5
Balise Description
<!– … –> Définit un commentaire
<!DOCTYPE> Définit le type du document
<a> Définit un lien
<abbr> Définit une abréviation
<address> Définit une adresse
<area> Définit une zone à l’intérieur d’une image
<article> Définit un article
<aside> Définit une partie latérale au contenu
<audio> Définit un fichier audio
<b> Texte en gras
<base> Définit une URL de base pour tous les liens de la page
<bdo> Définit la direction du texte
<blockquote> Définit une longue citation
<body> Définit le corps de la page
<br> Saut de ligne
<button> Définit un bouton cliquable
<canvas> Définit un graphique
<caption> Légende du tableau
<cite> Définit une citation
<code> Mise en forme d’un texte en code informatique
<col> Définit une colonne d’un tableau
<colgroup> Définit un groupe de colonne pour un tableau
<command> Définit un bouton de commande
<datalist> Définit une liste d’options
<dd> Définition d’un terme
<del> Définit un texte supprimé
<details> Définit les détails d’un élément
<dfn> Définition
<div> Définit un calque ou une section
<dl> Liste de définition
<dt> Définition d’un terme
<em> Mise en exergue d’un texte – italique
<embed> Définit un contenu extérieur (audio, vidéo …)
<fieldset> Regroupe plusieurs éléments d’un formulaire
<figcaption> Légende d’un groupe d’élément multimédia
<figure> Définit un groupe d’élément multimédia
<footer> Définit le bas d’un section ou d’une page
<form> Définit un formulaire
<h1> to <h6> Définit un titre par degré importance de 1 à 6
<head> Définit l’en-tête d’un document
<header> Définit le haut d’une section ou d’une page
<hgroup> Regroupe les informations du haut d’une page ou section
<hr> Barre horizontale
<html> Définit un document html
<i> Texte en italique
<iframe> Introduit un page html dans une frame
<img> Définit une image
<input> Définit un champ
<ins> Définit un texte insérer
<keygen> Générateur de clé pour un formulaire
<kbd> Raccourcis ou touche du clavier
<label> Légende d’un groupe d’élément de formulaire
<legend> Titre d’un groupe d’élément d’un formulaire
<li> Élément d’une liste
<link> Définit les relations entre les documents
<map> Définit une carte
<mark> Mise en valeur d’un mot ou d’un texte – Texte marqué
<math> Définit une formule mathématique
<menu> Définit un menu en liste
<meta> Définit des informations relatives au document
<meter> Définit une unité de mesure
<nav> Définit un groupe de liens de navigation
<noscript> Définit une alternative au script non supporté
<object> Définit un objet du contenu extérieur multimédia
<ol> Définit une liste ordonné
<optgroup> Regroupe d’une liste d »option dans un formulaire
<option> Option d’une liste dans un formulaire
<output> Définit un type de sortie
<p> Définit un paragraphe
<param> Définit les paramètres d’un objet
<pre> Texte pré-formaté
<progress> Définit une progression
<q> Définit une courte citation
<rp> Annotation ruby si le script n’est pas supporté
<rt> Annotation ruby d’explication
<ruby> Définit une annotation en ruby
<samp> Définit un échantillon de code
<script> Définit un script
<section> Définit une section
<select> Définit une liste sélectionnable
<small> Minimise l’importance d’un texte
<source> Définit la source d’un contenu multimédia
<span> Définit une section de type inline
<strong> Mise en exergue d’un texte – Texte en Gras
<style> Définit un style CSS
<sub> Mise en indice d’un texte
<summary> Définit l’en-tête des détails d’un document ou section
<sup> Mise en exposant d’un texte
<svg> Définit une image vectorielle
<table> Définit un tableau
<tbody> Définit le corps d’un tableau
<td> Définit une cellule d’un tableau
<textarea> Définit une zone de texte
<tfoot> Définit le bas d’un tableau
<th> Définit une cellule d’en-tête d’un tableau
<thead> Définit le haut d’un tableau
<time> Définit une unité de temps
<title> Définit le titre d’un document
<tr> Définit une ligne de tableau
<track> Définit une unité de temps pour les éléments <audio> et
<video>.
<ul> Définit une liste non-ordonné
<var> Définit une variable
<video> Définit une vidéo
<wbr> Définit un possible retour à la ligne