CHTML

Université Blida 1
Deuxième année Licence informatique
Module: Développement
d’applications Web
Chapitre 2:Langage de balises HTML

Disponible sur: https://sites.google.com/a/esi.dz/fz-zahra/developpement-
des-applications-web/2018-2019/cours
FZ. Zahra
f_zahra@esi.dz
Année universitaire 2019-2020
Plan du cours
•Généralités: site statique vs site dynamique,

application web
•HTML : Définition et historique.
•HTML : balises
•HTML 5: nouvelles balises
Site Statique
Site interactif coté client
Site interactif coté serveur
Site dynamique
Site dynamique: exemple (1)
Site dynamique: exemple (2)
Site dynamique:exemple (3)
Ergonomie d’un site Web
Exemlpe
HTML: Définition:
Le langage HTML (HyperText Markup Language) est
utilisé sur le système de partage de l’information mondial
WWW (World Wide Web) depuis 1990. Ce langage se
compose d’un ensemble d’annotations, appelées étiquettes
ou balises, qui permettent de créer et formater un document
hypertexte. Un fichier HTML est un fichier texte ce qui a
l'avantage de le rendre facilement lisible sur n'importe
quelle plate-forme/ordinateur.
Que choisir pour écrire de l' HTML?
 Avec un éditeur de texte

Simple Text, Bbedit,Emacs ,WordPad …
Avec un logiciel «assistant» au code HTML
PageSpinner sur MacIntosh, Amaya sur Unix,
HTML-Kit sur PC …
A l'aide d'un programme dit "WYSIWYG"
Dreamweaver , Golive, Netscape composer,
FrontPage, Claris Homepage ...
HTML: historique
HTML n'est pas un langage de programmation !
Ce n'est qu'un langage de description de documents.
•HTML 1.0 : C'est la toute première version

•HTML 3.2.
•HTML 4.0 (Décembre 97).
•XHTML.
•HTML 5.
HTML 5
HTML 5 : c'est la dernière version. elle fait beaucoup

parler d'elle car elle apporte de nombreuses
améliorations comme la possibilité d'inclure facilement
des vidéos, un meilleur agencement du contenu, de
nouvelles fonctionnalités pour les formulaires.
Structure d’une page HTML (1)
<!DOCTYPE html>
<HTML> "première ligne du document"
<head> "ouverture de la zone d'entête"
<title> "titre de la page suivi de" </title>
</head> "fermeture de la zone d'entête."
<body> "ouverture du corps du document"
"Mettre le texte , les tableaux, les images … ici"
</body> "fin du corps du document"
</HTML> "fin du document HTML"
Structure d’une page HTML (2)
<!DOCTYPE html> <!DOCTYPE html>
<html>
La déclaration DOCTYPE, <head>
obligatoire dans tout document, <meta http-equiv="Content-type"
précise le type de document qui va
être créé. Dans HTML 5, cette
content="text/html;charset=UTF-8" />
déclaration est désormais réduite à <title> Cours HTML, deuxième année
sa plus simple expression par licence informatique
rapport à XHTML. </title>
</head>
<meta http-equiv="Content-type"
content="text/html;charset=UTF- <body>
8" /> 
contient la définition du jeu de <h1>Le corps de la page minimale
caractères utilisé dans la page </h1>
</body>
</html>
Exemple d’une page web
<HTML>
<head>
<title>
Entête qui
contient
titre de la
page web
Corps
Fin de
la page
</HTML>
Balises HTML
Balises HTML
Balises HTML: Texte (1)
• <center> suivi de quelquechose de centré suivi

de </center> donne: Quelquechose de centré
• <P> donne un changement de paragraphe
• <br> donne un simple changement de ligne
*Notez ici que les commandes <P> et <BR>
n'ont pas à être fermées. Vous pouvez utiliser
plusieurs
• commandes <BR> ou <P> répétitivement pour
augmenter l'espacement.
• <b></b>donne un texte en gras: texte en gras
Balises HTML: Texte (2)
• <strong></strong>donne un texte en gras également:

texte en gras
• <EM></EM> donne un texte en italique: texte en
italique
• <I></I> donne également un texte en italique: texte en
italique
• <CITE></CITE>donne aussi un texte en italique: texte
en italique
• <TT></TT>donne un texte formaté avec une fonte à
espacement constant (teletype): texte formaté avec une
police à espacement constant
Listes et titres
• En-têtes [Heading] <Hn></Hn> avec n=1 à 6

Afficher une en-tête de niveau n
• Liste non-ordonnée [Bullet list] <UL></UL> Afficher
le texte sous forme d'une liste non-ordonnée.
• Liste ordonnée [Numbered list] <OL></OL> Afficher
le texte sous forme d'une liste ordonnée.
• Elément de liste [List items] <LI> Voici un élément de
la liste
• Paragraphe [Paragraph] <P></P> Saut de ligne,
insérer une ligne vierge et commencer un paragraphe
Séparateurs HTML
Insérer une ligne horizontale pour séparer deux parties dans

un document. Pour cela, vous utiliserez la balise <hr />
• Epaisseur <HR size=?> en pixels

• Largeur <HR width=?>
<HR width="%"> en pixels en % de la fenêtre
• Alignement
<HR align= left> gauche
<HR align=right> droite
<HR align=center> centré
Balises sémantiques de HTML5 pour structurer un
document html
section : Cette balise permet de définir les différentes sections d’un document comme par
(ex: les chapitres, les en-tête, pied-de-page…) Il permet de mieux structurer le corps d’un
document. Attention à ne pas confondre avec les balises HEADER, NAV et FOOTER.
article : Cette balise représente un contenu externe comme un article de blog, une question
sur un forum ou encore un article de journal.
aside : Cette balise est destiné au contenu indirectement lié à l’article lui-même, il permet
de faire des divisions au sein d’un article comme formater un extrait ou une citation.(ex :
générateur HTML)
header : Cette balise permet de définir une entête d’une page ou d’une section.
footer : Cette balise permet de définir un pied de page ou d’une section.
nav : Cette balise permet de définir une barre latérale de navigation d’une page ou d’une
section.
Balises sémantiques de HTML5 pour structurer un
document html (exemple)
Balises sémantiques de HTML5 pour structurer
un document html (exemple)
HTML: Les tableaux (1)
<table> . . </table>
Définit un tableau
Attributs:
align = position
bgcolor = color
border = n
cellpadding = n
cellspacing = n
width = n
Exemple: <table border="1" cellpadding="1" cellspacing="0"

width="100%“ bordercolor="#000000" bgcolor="#0099FF">
HTML: Les tableaux (2)
<tr> . . </tr>
Définit une ligne d'un tableau
Attributs:
align = left,center,right
valign = top, middle, bottom
bgcolor = color
border = n
HTML : Les tableaux (3)
<td> . . </td>
Définit une cellule de données
Attributs:
align = type
valign = type
bgcolor = color
colspan, rowspan = n
height, width = n
HTML: Exemple: Tableau
HTML: Les liens (internes, externes)
<a href=“URL ou chemin interne"> texte ou image,

ou bien un autre élément </a>
Exemple: <a href="http://www.google.fr"></a>
– L’attribut href de la balise <a> permet d’indiquer
l’adresse vers laquelle il faut pointer.
– Ici le lien ne pourra pas fonctionner car il faut appliquer
ce lien à du texte, une image,une vidéo, etc:
• <a href="htt p://www.google.fr">Lien vers le site Google</a>
Ou alors
• <a href="http://mapage.htm"> <img src=
“../images/image1.jpg”></a>
HTML: Les liens (internes, externes (Exemple)
le fichier 1.htm:
<A HREF="2.htm">Aller vers le document 2</A>
· le fichier 2.htm:
<A HREF="1.htm">Retour au document 1</A>
RQ:
•Les noms d' éléments sont sensibles à la casse et sont écrits en
minuscules.
•Les noms d'attributs sont sensibles à la casse, doivent être écrits en
minuscules et encadrées par des guillemets. Tous les attributs
doivent recevoir une valeur.
•Les balises fermantes sont obligatoires.
HTML: Insertion d’une image
HTML: exemple (insertion d’une image)
<IMG SRC=“blida.gif" align=TOP>Fichier d'aide

<IMG SRC=“blida.gif" align=CENTER>Fichier d'aide
<IMG SRC=“blida.gif" align=BOTTOM>Fichier d'aide
arrière-plan: image
Afin de changer l'image de fond d'écran, la commande <body
background=« image source"> peut
être utilisée en la plaçant dans l'entête du document HTML
juste avant <title></title>.
HTML: Insertion Séquences vidéo
<A HREF="vidéo source">texte a afficher</A>

Ou bien
<A HREF=« vidéo source"><img src=« image
source"></A>
La balise <Video> HTML 5
Syntaxe de base
<video controls src="video.ogv">Ici la description alternative
</video>
Ou bien par exemple
<video width="xxx" height=« yyy" controls="controls"> <source
src="video.mp4" type="video/mp4" />
</video>
HTML: Insertion Séquences vidéo
Les attributs:
src :définit bien entendu l'adresse du fichier vidéo, tout comme pour la
balise img lorsqu'il s'agit d'une image.
Height: la largeur de la zone d’affichage de la vidéo
width : la hauteur de la vidéo
controls : donne accès aux contrôles de lecture (boutons de navigation,
volume, etc, selon les possibilités du navigateur), ou les masque s'il est omis.
preload="auto" permet de de spécifier au navigateur de débuter le
téléchargement de la vidéo tout de suite, en anticipant sur le fait que
l'utilisateur. lira la vidéo
autoplay="true" comme son nom l'indique, permet de lancer la lecture
automatiquement.
poster="image.jpg" permet d'indiquer une image à afficher par défaut dans
l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée.
loop indique que la lecture doit s'effectuer en boucle.
HTML: Insertion d’un élément audio (1)
<audio src="*" controls></audio>

*: la source de l’élément audio, son chemin
Note: C’est la description minimale de la balise, si
non il faut spécifier les autres attributs.
HTML: Insertion d’un élément audio (2)
• controls: pour ajouter les boutons « Lecture », « Pause » et la barre de
défilement. Cela peut sembler indispensable, et vous vous demandez
peut-être pourquoi cela n'y figure pas par défaut, mais certains sites web
préfèrent créer eux-mêmes leurs propres boutons et commander la
lecture avec du JavaScript.
• width: pour modifier la largeur de l'outil de lecture audio.
• loop: la musique sera jouée en boucle.
• autoplay: la musique sera jouée dès le chargement de la page. Évitez
d'en abuser, c'est en général irritant d'arriver sur un site qui joue de la
musique tout seul !
• preload: indique si la musique peut être préchargée dès le chargement
de la page ou non. Cet attribut peut prendre les valeurs :
– auto(par défaut) : le navigateur décide s'il doit précharger toute la
musique, uniquement les métadonnées ou rien du tout.
– metadata: charge uniquement les métadonnées (durée, etc.).
– none: pas de préchargement. Utile si vous ne voulez pas gaspiller de
bande passante sur votre site.
Formulaires HTML (1)
La déclaration de base d’un formulaire se fait par:

• le tag “form”
• la spécification des paramètres “action”, “method” et parfois “name”
<label>Texte</label> pour le nom du champs, exemple : Nom, Prenom

Formulaires HTML: l’attribut « type » (1)
Formulaires : l’attribut « type » (2)
Input
type="email"
Email *
<input name="Email" type="email" placeholder="compléter votre
email" required class="form-control">
type="tel"
Téléphone *
<input name="telephone" type="tel" placeholder="Votre téléphone"
class="form-control" required>
type="url"
Votre site web *
<input name="adresse" type="url" placeholder="votre site web"
required class="form-control">
Formulaires: : l’attribut « type » (3)
Input
type="search"
Recherche *
<input name="recherche" type="search" placeholder="Mot clé"
type="number"
Votre âge *
<input type="number" name="age" placeholder="Votre âge"
type="range“
<input type="range" name="range" class="form-control">

Formulaires : l’attribut « type »(4)
Input
type="color"
Votre couleur préférée ? *
<input name="couleur" type="color" required class="form-control">
type="datetime"
Date d'inscription 2*
<input type="datetime" name="date_inscription2" required
class="form-control">
type="datetime-local"
Date d'inscription 3*
<input type="datetime-local" name="date_inscription3" required
class="form-control">
Formulaires : : l’attribut « type »(5)
Input
type="date"
Date d'inscription 4 *
<input type="date" name="date_inscription4" required class="form-
control">
type="month"
Quelle semaine ? *
<input name="mois" type="month" required class="form-control">
type="week"
Quelle semaine ? *
<input name="semaine" type="week" required class="form-
control">
Formulaires : : l’attribut « type »(6)
Input
type="time"
Quelle heure ? *
<input name="heure" type="time" required class="form-control">
Formulaires HTML
Formulaires HTML
D’autres balises (2)HTML5
figure : Cette balise permet de regrouper des images, des vidéos. Par exemple,
elle est utilisé pour regrouper une image et sa légende.
audio :Cette balise permet de diffuser des séquences audio sur son site. (ex :
player audio)
embed : Cette balise permet d’insérer une application externe comme Flash,
Silverlight ou Quicktime, …mark : Cette balise permet de surligner le texte
(couleur : jaune fluo).
meter : Cette balise n’a pas de spécification bien définie. On l’utilise pour définir
des unités et des valeurs de mesure.
progress : Cette balise n’a pas de spécification bien définie. On l’utilise pour
définir la progression de chargement.
D’autres balises (3)HTML5
ime : Cette balise permet de définir une date et/ou une heure dans un document
HTML.
command : Cette balise n’a pas encore de spécification bien définie et de

démonstration.details : Cette balise permet de générer des Pop-ups.
keygen : Cette balise permet de générer des clés privées et publiques.
output : Cette balise n’est pas encore bien définie. On l’utilise pour spécifier le
résultat d’une formule mathématique.
ruby, rt, rp : Ces balises permettent d’insérer des caractères Asiatiques dans le
document HTML.
Sources
•Jean Engels, HTML5 et CSS Cours et exercices corrigés, Groupe

Eyrolles, 2012, ISBN : 978-2-212-13400-1.

Langue

CHTML

Transféré par

Informations du document

Copyright

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 :

CHTML

Transféré par

Droits d'auteur :

Université Blida 1

Deuxième année Licence informatique

Chapitre 2:Langage de balises HTML

•Généralités: site statique vs site dynamique,

 Avec un éditeur de texte

•HTML 1.0 : C'est la toute première version

HTML 5 : c'est la dernière version. elle fait beaucoup

• <center> suivi de quelquechose de centré suivi

• <strong></strong>donne un texte en gras également:

• En-têtes [Heading] <Hn></Hn> avec n=1 à 6

Insérer une ligne horizontale pour séparer deux parties dans

• Epaisseur <HR size=?> en pixels

footer : Cette balise permet de définir un pied de page ou d’une section.

Exemple: <table border="1" cellpadding="1" cellspacing="0"

<a href=“URL ou chemin interne"> texte ou image,

<IMG SRC=“blida.gif" align=TOP>Fichier d'aide

<A HREF="vidéo source">texte a afficher</A>

<audio src="*" controls></audio>

La déclaration de base d’un formulaire se fait par:

<label>Texte</label> pour le nom du champs, exemple : Nom, Prenom

<input type="range" name="range" class="form-control">

command : Cette balise n’a pas encore de spécification bien définie et de

keygen : Cette balise permet de générer des clés privées et publiques.

•Jean Engels, HTML5 et CSS Cours et exercices corrigés, Groupe

Vous aimerez peut-être aussi