HTML

HTML
Pr. Zainab OUFQIR
Z.Oufkir@emsi.ma
Introduction
 Le HTML (HyperText Markup Language) a fait son apparition dès 1991 lors du lancement du
Web. Son rôle est de gérer et d’organiser le contenu.
 Cela consiste à dire par exemple : “Ceci est un titre”, “Ceci est un menu”, “Voici une image”,
etc.
 Le CSS (Cascading Style Sheets, aussi appelées feuilles de style) a pour rôle de gérer
l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du
texte…). Ce langage est venu compléter le HTML en 1996.
 Le CSS a besoin d'une base en HTML pour fonctionner.
HTML EMSI RABAT 2

Introduction
 Voici un exemple d’un code écrit en HTML :
HTML EMSI RABAT 3

Les balises
 Le langage HTML utilise ce qu'on appelle des balises. On les écrit entre chevrons < et > :
HTML EMSI RABAT 4

Les balises
 Les balises indiquent la nature du texte qu'elles encadrent. Elles permettent au navigateur de
comprendre ce qu'il faut afficher à l'écran pour les visiteurs d'un site web.
: Ceci est le titre de la page
: Ceci est un paragraphe de texte
: Ceci est une image
Pourquoi certaines balises sont doublées et prennent un / dans leur syntaxe ?
HTML EMSI RABAT 5

Les balises
 On distingue deux types de balises :
 Les balises en paires (une balise ouvrante et une balise fermante).
 Les balises orphelines (une seule balise).
HTML EMSI RABAT 6

Les balises en paires
 Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Si on prend la balise title qui
correspond au titre de la page, voilà ce que ça nous donne :
On a donc :
1. Une balise ouvrante : <title>
2. Et une balise fermante : </title>
HTML EMSI RABAT 7

Les balises orphelines
 Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par
exemple une image).
 Une balise orpheline s'écrit comme ceci :
 Avant, les balises orphelines s'écrivaient avec un slash à la fin /: , Mais si vous
utilisez maintenant cette syntaxe, vous aurez un avertissement sous W3C. Cette notation
avec un slash à la fin n'est donc pas recommandée.
HTML EMSI RABAT 8

Les attributs
 Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des
informations supplémentaires.
 Un attribut est situé dans la balise ouvrante d'une balise en paire, ou directement dans une
balise orpheline, comme c'est le cas ci dessous avec la balise <img> :
HTML EMSI RABAT 9

Les attributs
 L'attribut id sert à donner un identifiant “unique” à une balise. id ne peut être utilisé qu’une
seule fois dans le code.
 L'attribut class est un attribut que l'on peut mettre sur n'importe quelle balise HTML. il s'agit
d'un moyen de sélectionner un élément pour ensuite lui appliquer du style.
HTML EMSI RABAT 10

Structure de base d'une page HTML
 Voici la structure exemple d’une page HTML :
HTML EMSI RABAT 11

 Les balises s'ouvrent puis se ferment, et elles s'emboitent les unes dans les autres dans un
ordre précis.
La syntaxe <html><body></html></body> est incorrecte : les balises s'entremêlent.
La syntaxe <html><body> </body></html> est correcte : une balise qui est ouverte à
l'intérieur d'une autre balise doit aussi être fermée à l'intérieur de celle-ci.
HTML EMSI RABAT 12

HTML EMSI RABAT 13

 <!DOCTYPE html> est une balise orpheline indispensable : elle indique qu'il s'agit d'une page
HTML.
 <html></html> : Déclare qu’il s’agit d’un document HTML. Tout le contenu et le code HTML
doivent être inclus entre <HTML> et </HTML>.
 <head></head> : Contient les balises qui composent l’en-tête du document (titre,. . .).
 <title></title> : Donne un titre descriptif au document. Ce titre s’affiche sur la barre de titres
des navigateurs.
 <body></body> : Contient l’ensemble du contenu et des balises qui constituent le corps du

document.
HTML EMSI RABAT 14

Les commentaires
 Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il
n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.
 Les commentaires permettent de laisser des indications sur le fonctionnement d’une page.
Cela permettra de se rappeler comment fonctionne la page si vous revenez sur votre code
source après un long moment d'absence.
HTML EMSI RABAT 15

Les paragraphes
 Les balises <p> </p> permettent de délimiter des paragraphes en HTML:
HTML EMSI RABAT 16

Saut de ligne
 Pour revenir à la ligne, on utilise la balise orpheline <br> (pour break), on n'a donc pas
besoin de la fermer:
HTML EMSI RABAT 17

Les titres
 Les balises de titres vont de <h1> </h1> jusqu'à <h6> </h6>, ce qui permet de hiérarchiser et
structurer le texte dans différentes sections, du niveau le plus grand, au niveau le plus petit.
HTML EMSI RABAT 18

Les listes
 <ul></ul> (pour "unordered list") permettent d'indiquer qu'on démarre une liste non
ordonnée, c'est-à-dire, ce que l'on appelle en français une liste à puces.
 <ol></ol> (pour "ordered list") permettent d'indiquer qu'on démarre une liste ordonnée,
autrement dit en français une liste numérotée.
 <li></li> permet de baliser les éléments qu'on veut mettre dans une liste. On les insère tous
à l'intérieur d'une autre balise pour indiquer s'il s'agit d'une liste à puces (<ul></ul>) ou d'une
liste numérotée (<ol></ol>) .
HTML EMSI RABAT 19

Les listes
HTML EMSI RABAT 20

Les balises de Formatage
 Ces balises permettent d’utiliser divers attributs de police, de style et de mise en forme.
 <strong>. . .</strong> : Affiche le texte en gras.
 <i>. . .</i> : Affiche le texte en italique.
 <mark> . . . </mark> : Surligner le texte.
 <sub>. . .</sub> : Affiche le texte en indice.
 <sup>. . .</sup> : Affiche le texte en exposant.
HTML EMSI RABAT 21

Un lien hypertexte
 <a>. . .</a> : C’est une balise qui permet à l’utilisateur de naviguer entre les pages HTML.
 Pour faire un lien hypertexte :
 On utilise la balise <a> (pour "anchor") pour indiquer qu'on va rediriger vers un autre endroit.
 Puis, on ajoute l'attribut href suivi de = pour annoncer l'endroit vers lequel on veut rediriger.
 On indique explicitement entre " " l'endroit vers lequel le lien doit rediriger.
 Enfin, on écrit le texte qui doit s'afficher sur l'hyperlien.
Ce type de lien hypertexte s'appelle un lien absolu : il indique une adresse complète.
HTML EMSI RABAT 22

Un lien hypertexte
 Nous n’avons pas d’URL disponible car le site n’est pas encore en ligne. On va donc créer des liens
entre nos pages en utilisant leur nom, et en indiquant leur arborescence dans notre dossier en
local.
 Ce type de lien hypertexte s'appelle un lien relatif : il indique où trouver notre fichier HTML.
 Cas n°1 : les deux pages sont situées dans un même dossier en local.
 Si les pages sont dans le même dossier, il suffit d'écrire comme cible du lien hypertexte le nom du
fichier vers lequel on veut amener, par exemple le fichier nommé page2.html.
HTML EMSI RABAT 23

Un lien hypertexte
 Cas n°2 : les deux pages sont situées dans deux dossiers différents en local:
 Si on veut créer un fichier page 3 et le déplacer dans un autre dossier, par exemple un dossier
/contenu , on va donc indiquer le chemin à suivre pour trouver ce fichier :
 Et s'il y a plusieurs sous-dossiers, on écrira ceci :
 Si le fichier cible est placé dans un dossier qui se trouve “plus haut” dans l'arborescence, il faut
écrire deux points .. , comme ceci :
HTML EMSI RABAT 24

Un ancre
 Une ancre est un repère que l'on peut mettre dans une page HTML si elle est très longue, cela
aide à la navigation et rend un contenu plus facile à parcourir.
 Cas n°1: l'ancre est plus bas sur la même page:
On crée un lien avec l'attribut href (il contient un dièse # suivi du nom de l'ancre) :
HTML EMSI RABAT 25

Un ancre
 Voici un exemple de page comportant beaucoup de texte et utilisant les ancres :
HTML EMSI RABAT 26

Un ancre
 Cas n°2: l'ancre est située dans une autre page.
 On tape le nom de la page cible avant le dièse # et enfin le nom de l'ancre :
HTML EMSI RABAT 27

Un ancre
 Voici une nouvelle page qui contient trois liens, chacun amenant vers une des ancres de la page
de l'exemple précédent :
HTML EMSI RABAT 28

Un ancre
 Il est possible de configurer un lien pour qu'il ait un comportement un peu particulier:
le lien hypertexte s’ouvre dans un nouvel onglet
crée un lien hypertexte qui ouvre la boîte mail avec

un nouveau message vide
crée un lien hypertexte qui permet de télécharger un

fichier que vous avez placé au préalable dans le même
dossier que votre page web
HTML EMSI RABAT 29

Les images
 La balise qui permet d'insérer une image est une balise orpheline : <img>
 Pour fonctionner correctement, la balise <img> doit être accompagnée de deux attributs :
1. src : cet attribut permet d'indiquer la source de l'image.
2. alt : cet attribut permet de donner à l'image une description alternative.
HTML EMSI RABAT 30

Les images
 Avec l'attribut src, on peut indiquer la source d'une image :
 Cas n°1: avec un chemin absolu si l'image vient d'internet.
On utilise un chemin absolu pour indiquer la source d'une image lorsque celle-ci est en ligne, sur un
site, ou qu'elle est hébergée sur le web. On copie colle donc simplement l'URL de l'image.
HTML EMSI RABAT 31

Les images
 Cas n°2: avec un chemin relatif si l'image est en local sur votre ordinateur.
 C'est ce que l'on fait si l'image est sur notre ordinateur : on utilise alors le nom et l'arborescence
du fichier de l'image en local pour indiquer sa source.
HTML EMSI RABAT 32

Les images
 Ajoutez l'attribut alt pour donner à l'image une description alternative.
 Une description alternative est un court texte qui décrit ce que contient l'image. Ce texte
alternatif sera :
 inscrit à la place de l'image si elle ne peut pas être affichée au moment du chargement de la
page web (cela arrive) ;
 Cela contribue donc à améliorer ce que l'on appelle l'accessibilité d'un site web. En plus, cela aide
les robots des moteurs de recherche pour trouver des images.
HTML EMSI RABAT 33

Les tableaux
 La balise en paire <table> </table> indique le début et la fin d'un tableau.
 Pour construire un tableau, on indique pour chaque ligne, <tr> (pour table row ou "rangée du
tableau"), le contenu des différentes cellules, <td> (pour table data ou "donnée" ou "entrée") :
 <tr> </tr> indique le début et la fin d'une ligne du tableau.
 <td> </td> indique le début et la fin du contenu d'une cellule.
 <th> </th> indique le début et la fin de la ligne d'en-tête du tableau.
HTML EMSI RABAT 34

Les tableaux
 On a une balise de ligne <tr> qui englobe un groupe de cellules <td> et une balise <tr> qui
englobe un groupe d’en tête <th> :
<th>
(En tête)
HTML EMSI RABAT 35

Les tableaux
 Exemple d’un tableau avec une en-tête, deux lignes avec trois cellules par ligne :
sans CSS
avec CSS
HTML EMSI RABAT 36

Les formulaires
 Pour créer un formulaire, vous aurez besoin de la balise HTML <form></form>, elle permet
d'indiquer le début et la fin du formulaire.
 Voici les deux attributs indispensables pour construire un formulaire fonctionnel :
 L'attribut method indique par quel moyen les données vont être envoyées. Les méthodes les
plus utilisées sont get et post.
 L'attribut action indique l'adresse de la page ou du programme qui va traiter les informations.
HTML EMSI RABAT 37

Les formulaires
 Une zone de texte monoligne <input> est une zone de texte d’une seule ligne.
 On ouvre avec la balise <input> et on précise la valeur de l'attribut (type="text" ) pour indiquer
qu'il s'agit d'une zone de texte d'une seule ligne :
 Il faut donner un nom à votre zone de texte; pour cela on utilise l'attribut name.
HTML EMSI RABAT 38

Les formulaires
 Voici ce que cela donne pour un formulaire très basique avec uniquement notre champ de texte
monoligne qui demande son prénom au visiteur du site :
 Un libellé est un champ de texte prérempli avec une indication pour guider le visiteur du site sur
ce qu’il doit écrire. On crée un champ de libellé avec la balise HTML <label> </label> :
HTML EMSI RABAT 39

Les formulaires
 Il faut lier le label à la zone de texte! On doit ajouter les deux attributs au champs text:
 L'attribut id est utilisé pour identifier l'élément HTML afin d’y accéder et de le manipuler. Il
est donc unique pour cet élément.
 L'attribut name, lui, réfère à la variable du formulaire que l’élément concerne.
 Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l' id du
champ :
HTML EMSI RABAT 40

Les formulaires
 Pour créer une zone de texte multiligne, on utilise : <textarea> </textarea>. Elle est utilisé dans le
cas où le visiteur d’un site aurait besoin d’écrire un paragraphe de texte dans un formulaire.
 Comme pour tout autre élément du formulaire, il faut lui donner un nom avec name et utiliser
un label qui explique de quoi il s'agit :
HTML EMSI RABAT 41

Les formulaires
 HTML offre plusieurs manières de choisir une ou des option(s) dans un formulaire. Ce sont des
éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités, comme :
 Les cases à cocher (plusieurs choix possibles).
 Les boutons radio (un seul choix possible).
 Les listes déroulantes (un seul choix possible).
HTML EMSI RABAT 42

Les formulaires
 Insérez des cases à cocher avec <input type="checkbox">: On crée une case à cocher avec la
balise <input> en spécifiant le type checkbox qui signifie "case à cocher" en français :
HTML EMSI RABAT 43

Les formulaires
 Insérez des boutons radio avec <input type="radio">: Les boutons radio permettent au visiteur
de faire un choix (et un seul) parmi une liste de possibilités.
 Il faut organiser les boutons radio en groupes. Les options d'un même groupe possèdent le même
nom, c’est l’attribut name, mais chaque option doit avoir une valeur (value) différente.
HTML EMSI RABAT 44

Les formulaires
 La balise à utiliser est toujours <input>, avec cette fois la valeur radio pour l'attribut type :
HTML EMSI RABAT 45

Les formulaires
 Insérez une liste déroulante avec les balises <select> et <option>.
 Le fonctionnement est un peu différent :
 On utilise la balise <select> </select> pour indiquer le début et la fin de la liste déroulante.
 On ajoute l'attribut name à la balise pour donner un nom à la liste.
 Puis, à l'intérieur du <select> </select>, on place plusieurs balises <option> </option> (une
par choix possible), pour donner à chacune d'elles un attribut value afin d'identifier ce que le
visiteur a choisi.
HTML EMSI RABAT 46

Les formulaires
HTML EMSI RABAT 47

Les formulaires
 Pour créer le bouton d'envoi, c'est encore la balise <input> qu'on utilise.
 On utilise l’attribut type="submit": le visiteur sera conduit à la page indiquée dans l'attribut
action du formulaire.
 On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value :
 Ce qui nous donne un input qui a l'apparence d'un bouton :
HTML EMSI RABAT 48

Exercice
Créez et visualisez la page HTML(index.html) dont:
 Le titre de la page est "Page de contact".
 Un titre h2 contenant comme valeur "Formulaire de contact".
 Un formulaire de contact contenant les éléments suivants:
 ajouter un champ de texte nom avec le label associé ;
 ajouter un champ de texte email avec le label associé ;
 ajouter un textarea ayant pour label message ;
 créer un bouton de validation "Envoyer".
HTML EMSI RABAT 49

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML

Pr. Zainab OUFQIR

 Le CSS a besoin d'une base en HTML pour fonctionner.

HTML EMSI RABAT 2

HTML EMSI RABAT 3

HTML EMSI RABAT 4

: Ceci est le titre de la page

: Ceci est un paragraphe de texte

: Ceci est une image

Pourquoi certaines balises sont doublées et prennent un / dans leur syntaxe ?

HTML EMSI RABAT 5

 Les balises en paires (une balise ouvrante et une balise fermante).

 Les balises orphelines (une seule balise).

HTML EMSI RABAT 6

HTML EMSI RABAT 7

 Une balise orpheline s'écrit comme ceci :

HTML EMSI RABAT 8

HTML EMSI RABAT 9

HTML EMSI RABAT 10

HTML EMSI RABAT 11

La syntaxe <html><body></html></body> est incorrecte : les balises s'entremêlent.

HTML EMSI RABAT 12

HTML EMSI RABAT 13

 <body></body> : Contient l’ensemble du contenu et des balises qui constituent le corps du

HTML EMSI RABAT 14

HTML EMSI RABAT 15

HTML EMSI RABAT 16

HTML EMSI RABAT 17

HTML EMSI RABAT 18

HTML EMSI RABAT 19

HTML EMSI RABAT 20

 <strong>. . .</strong> : Affiche le texte en gras.

 <i>. . .</i> : Affiche le texte en italique.

 <mark> . . . </mark> : Surligner le texte.

 <sub>. . .</sub> : Affiche le texte en indice.

 <sup>. . .</sup> : Affiche le texte en exposant.

HTML EMSI RABAT 21

 Pour faire un lien hypertexte :

 Enfin, on écrit le texte qui doit s'afficher sur l'hyperlien.

HTML EMSI RABAT 22

HTML EMSI RABAT 23

 Et s'il y a plusieurs sous-dossiers, on écrira ceci :

HTML EMSI RABAT 24

 Cas n°1: l'ancre est plus bas sur la même page:

HTML EMSI RABAT 25

HTML EMSI RABAT 26

 On tape le nom de la page cible avant le dièse # et enfin le nom de l'ancre :

HTML EMSI RABAT 27

HTML EMSI RABAT 28

le lien hypertexte s’ouvre dans un nouvel onglet

crée un lien hypertexte qui ouvre la boîte mail avec

crée un lien hypertexte qui permet de télécharger un

HTML EMSI RABAT 29

1. src : cet attribut permet d'indiquer la source de l'image.

2. alt : cet attribut permet de donner à l'image une description alternative.

HTML EMSI RABAT 30

 Cas n°1: avec un chemin absolu si l'image vient d'internet.

HTML EMSI RABAT 31

HTML EMSI RABAT 32

HTML EMSI RABAT 33

 <tr> </tr> indique le début et la fin d'une ligne du tableau.

 <td> </td> indique le début et la fin du contenu d'une cellule.

 <th> </th> indique le début et la fin de la ligne d'en-tête du tableau.

HTML EMSI RABAT 34