ch1 HTML

Mourad Fariss
m.fariss@ump.ac.ma
2023/2024
Programmation coté client
• Les langages du Web
Page Web = HTML 5 + CSS 3+ JAVASCRIPT
le contenu + la forme + l’interactivité

HTML
• HyperText Markup Language : En français « langage à balises pour

hypertextes », c’est un langage de mise en forme de documents hypertextes
(texte + liens vers d’autres documents). Développé au CERN (Conseil
européen pour la recherche nucléaire) en 1989 par Tim Berners-Lee.
• 1991 : Premier navigateur en mode texte
• 1993 : Premier navigateur graphique (mosaic)
• HTML est un document semi-structuré, dont la structure est donnée par des
balises.
• On dit que <toto> est une balise ouvrante et </toto> une balise fermante.
HTML
• Historique
▪ 1973 : GML, Generalised Markup Language développé chez IBM.

▪ Introduction de la notion de balise.
▪ 1980 : SGML, Standardised GML, adopté par l’ISO
▪ 1989 : HTML, basé sur SGML. Plusieurs entreprises (microsoft,
netscape, ...) interprètent le standard de manière différente
▪ 1996 : XML, eXtensible Markup Language norme pour les documents
semi structurés (SGML simpliﬁé)
▪ 2000 : XHTML, version de HTML suivant les conventions XML
▪ 2008 : Première proposition pour le nouveau standard, HTML5
▪ 2014 : Standardisation de HTML5
XHTML vs HTML
• XHTML est une version d’HTML conforme au langage XML

• XHTML impose des règles d’écriture
▪ Les balises sont bien parenthésées (<a> <c> </c> </b> est interdit)
▪ Les balises sont en minuscules
• Les avantages de XHTML :

▪ Graphique interactif (Chrome, Firefox, Internet Explorer, . . . )
▪ Texte interactif (Lynx, navigateur en mode texte)
▪ Graphique statique (par ex: sur livre électronique)
▪ Graphique pour petit écran (terminal mobile)
Basiques d'un document HTML
• Il existe trois types de balises HTML:

▪ Balises d'ouverture <balise>
▪ Balises de fermeture </balise>
▪ Balises auto-fermeture <balises/>
• Balises :
▪ Utilisées pour marquer le début et la fin d'un élément en HTML
▪ Toutes les balises ont le même format :
o commencent par un signe inférieur "<"
o terminent par un signe supérieur ">".
• Différence entre une balise d'ouverture et une balise de fermeture est la

barre oblique "/".
• Balises (tags) pour :

▪ Page Title
▪ Headings
▪ Paragraphs Paragraphs
▪ Bold & italic text
▪ Lists
▪ Images
▪ Links
• Un commentaire s'écrit entre 
• Une page HTML est un fichier ASCII (texte)
• Elle est tapée avec un traitement de texte (ex : Notepad++, Emacs, Visual
Studio, ...) et enregistrer avec le suffixe .html ou .htm
• Structure d'un document HTML :

▪ Une balise <html> qui est la racine (elle englobe toutes les autres
balises). La balise html contient deux balises ﬁlles: head et body
▪ La balise <head> représente l’en-tête du document. Elle peut contenir
diverses informations (feuilles de styles, titre, encodage de caractères, . .
. ). La seule balise obligatoire dans head est le titre (<title>). C’est le texte
qui est affiché dans la barre de fenêtre du navigateur ou dans l’onglet.
▪ La balise <body> représente le contenu de la page. On y trouve
diverses balises (<div>, <p>, <table>, . . . ) qui formatent le contenu de la
page
• En-tête HEAD
▪ L'en-tête HEAD dans un document HTML est une partie du document qui
n'est pas affichée par le navigateur au chargement de la page.
▪ L'en-tête HEAD contient des informations comme:
o Le titre (<TITLE>) de la page.
o Des liens aux CSS (si vous souhaitez composer le contenu HTML
avec des CSS).
o Des liens aux favicons personnalisés.
o Des métadonnées (auteur du document, mots-clés décrivant le
document, etc.).
• En-tête HEAD : métadonnées

▪ Les balises <META> (ou Meta tags) sont des balises qui contiennent les
métadonnées. Il s'agit de données supplémentaires qui aident à
l’exécution correcte de la page ou fournissent des informations
additionnelles lors de l’exécution.
▪ Les balises <META> sont déclarées dans l'entête du document HTML
(entre les balises <HEAD> et </HEAD>). Son contenu n'est donc pas
affiché sur la page.
<HTML>
<HEAD>
<META CHARSET="UTF-8" >
< META NAME="DESCRIPTION" CONTENT="Site de
formations en Informatique">
< META NAME ="KEYWORDS " CONTENT="HTML,
JAVA, C">
< META NAME ="AUTHOR" CONTENT="Université
Mohammed Premier">
</HEAD>
</HTML>
• En-tête HEAD : métadonnées

▪ L’attribut CHARSET spécifie l’encodage des caractères utilisé. Cette
déclaration doit être unique pour l’ensemble d’un document.
<HTML>
<HEAD>
<META CHARSET="ASCII" >
</HEAD>
<BODY>
‫سالم‬
</BODY >
</HTML>
▪ À quoi servent les balises META ?

à tous les outils susceptibles de les exploiter. Et notamment:
o Aux navigateurs web
o aux moteurs de recherche;
o Plus largement, à tous les outils d’indexation, c’est-à-dire tous les
outils qui analysent vos pages pour y identifier diverses informations.
• Codage des caractères

▪ Le codage ANSI / ASCII : Ce système utilise 7 bits pour coder 128
caractères (2^7). Il a été développé aux États-Unis et provient de la
standardisation du standard ASCII. Mais, il n’ y a pas de gestion des
accents.
▪ La norme ISO-8859-1 (ISO-8859-15): Cette norme permet de coder les
caractères accentués. Cette norme est spécifique aux langues de
l'Europe de l'Ouest. On utilise 8 octets. Il y a correspondance entre les
caractères ASCII et ceux de codé en ISO-8859-1.L'extension (ISO-8859-
15) rajoute le symbole euro €.
▪ L'Unicode: Pour pouvoir coder toutes les langues, comme l'arabe ou le
chinois, il est nécessaire d'utiliser plus d'octets. Unicode ne précise pas le
nombre d'octets utilisé pour coder un caractère (point de code). C'est le
type d'encodage (UTF-8, UTF-16, ...) qui le définit.
▪ L'encodage UTF-8 : UTF-8 est un encodage des caractères, basé sur
UNICODE, de longueur variable qui utilise de 1 à 4 octets par symbole.
• Titres
▪ Les balises <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, permettent de créer
des titres de section, sous-section , sous-sous-section ,. . .
o <h1> </h1> : En général, on s'en sert pour afficher le titre de la page.
o <h2> </h2> : signifie "titre important".
o <h3> </h3> : c'est un titre un peu moins important (on peut dire un
"sous-titre" si vous voulez).
o <h4> </h4> : titre encore moins important.
o <h5> </h5> : titre pas important.
o <h6> </h6> : titre pas important du tout.
• Titres
<HTML>
<BODY>
<H1>Titre de niveau 1</H1>
</BODY >
</HTML>
• Un premier contenu : paragraphe

▪ Pour créer un paragraphe, on utilise la balise <P>
<P> Ceci est mon premier paragraphe. </P>
<P> Ceci est mon deuxième paragraphe. </P>
▪ On peut aussi faire de simples sauts de ligne à l'intérieur d'un paragraphe
avec la balise orpheline </BR> (il n'y aura pas d'espace entre les deux
lignes, contrairement à <P> ).
<HTML>
<BODY>
<P>Ceci est mon premier
paragraphe. <BR/>J'y mets une partie à la
ligne</P>
<P>Ceci est mon deuxième paragraphe.</P>
</BODY >
</HTML>
 On ne peut pas inclure un paragraphe à l'intérieur d'un paragraphe.

• Mise en forme des caractères
▪ <B>, <STRONG> : Mettre en gras un texte

▪ <I>, <EM> : Mettre en italique un texte
▪ <U> : Souligner un texte
▪ <MARK> : Sur-biller un texte
▪ <BIG> : Mettre en plus grand un texte
▪ <SMALL> : Mettre en plus petit un texte
<B> Texte en gras</B><BR/>

<STRONG> Texte en gras</STRONG><BR/>
<I> Texte en italique</I><BR/>
<EM> Texte en italique</EM><BR/>
<U> Texte souligné</U><BR>
<MARK> Sur-biller un texte</MARK><BR/>
<BIG> Mettre en plus grand un texte </BIG><BR/>
<SMALL> Mettre en plus petit un texte</SMALL><BR/>
• Mise en forme des caractères
▪ <basefont size="s"> : sert à fixer la taille par défaut dans une page Web
(s un entier compris entre 1 et 7)
La taille par défaut des caractères est fixée à 3
▪ <font face="police1[,police2,…] size = "s|+s|-s" color = "#RRVVBB">
… </font>
o FACE : la première police installée est utilisée. Ne proposer que des
polices dont on est sûr qu'elles sont disponibles sur l'ordinateur de
consultation (Arial/Helvetica et Times New Roman/Times)
o SIZE : 1..7 (taille absolue) ou +1, +2... (taille relative par rapport à la
valeur spécifiée dans BASEFONT)
o Les balises <font> </font> peuvent être imbriquées
▪ <SUP> : pour mettre un mot en exposant.
▪ <SUB> : pour mettre un mot en indice

• Mise en forme des paragraphes :
▪ <h1> </h1> : format d'entête

▪ <br> retour à la ligne simple
▪ <p> retour à la ligne avec saut d’une ligne
▪ <div align="center"></div> centre le texte
▪ <div align="right"></ div > positionne le texte à droite dans la page
▪ <div align="left"></div> positionne le texte à gauche dans la page
<HTML>
<BODY>
<P ALIGN="CENTER"> Paragraphe
centre</P><BR/>
<P ALIGN="RIGHT"> Paragraphe aligné à droite
</P><BR/>
<P ALIGN="LEFT"> Paragraphe aligné à
gauche</P><BR/>
</BODY >
</HTML>
• Espaces :
▪ L’entité HTML (« non breaking space ») va nous permettre
d’ajouter une espace simple dit espace « insécable » ;
▪ L’entité HTML &ensp; (« en space ») va nous permettre de créer une
espace double ;
▪ L’entité HTML &emsp; (« em space ») va nous permettre de créer une
espace quadruple ;
▪ L’entité HTML (« thin space ») va nous permettre de créer un
espace très fin (demi-espace)
<HTML>
<BODY>
<P>
Espace simple: Bonjour à tous </BR>
Espace double: Bonjour &ensp; à tous </BR>
Espace quadruple: Bonjour &emsp; à tous </BR>
Espace très fin: Bonjour à tous </BR>
</P>
</BODY >
</HTML>
• Liste non ordonnée
▪ Une liste non ordonnée permet de créer une liste d'éléments non
numérotés.
▪ Pour créer une liste ordonnée en HTML on utilise la balise <UL>.
▪ Pour créer un élément de la liste on utilise la balise <LI>.
<HTML>
<BODY>
<H1> Liste de chapitres de ce module</H1>
<UL TYPE="SQUARE">
<LI> Les protocoles du WEB</LI>
<LI> HTML</LI>
<LI> CSS</LI>
<LI> Java Script</LI>
<UL>
</BODY >
</HTML>
• Liste ordonnée :
▪ Une liste ordonnée permet de créer une liste d'éléments numérotés.

▪ Pour créer une liste ordonnée en HTML on utilise la balise <ol>.
▪ Pour créer un élément de la liste on utilise la balise <li>.
<HTML>
<BODY>
<H1> Liste de chapitres de ce module</H1>
<OL TYPE="1">
<LI> Les protocoles du WEB</LI>
<LI> HTML</LI>
<LI> CSS</LI>
<LI> Java Script</LI>
<OL>
</BODY >
</HTML>
• Liste : attribut TYPE
▪ Pour choisir le type de puce, on utilise l'attribut type de la balise <OL> ou

<UL>.
▪ Pour une liste ordonnée (OL), l'attribut TYPE peut prendre les valeurs
suivantes:
o TYPE="1" => suite numérique.
o TYPE="a" => suite alphabétique.
o TYPE="A" => suite alphabétique en majuscule.
o TYPE="I" => suite numérique en chiffres romains.
▪ Pour une liste non-ordonnée (UL), l'attribut type peut avoir les valeurs :
o TYPE= "DISC" => rond plein.
o TYPE="CIRCLE" => rond vide.
o TYPE="SQUARE" => carré
• Création d’un lien :
▪ En, HTML, pour créer un lien hypertexte vers une autre page on utilise la
balise <A> (anchor en anglais = ancre en francais)
▪ Pour indiquer vers quelle page le lien doit conduire, on spécifie l’URL de
la page à l’aide de l’attribut href (hypertext reference).
<HTML>
<BODY>
<P>
Site officiel de la <A HREF="
http://estn.ump.ma/"> EST </A> de Nador.
<P>
</BODY >
</HTML>
▪ Par défaut, le lien s'affiche en bleu souligné. Si la page est déjà visitée, le
lien s'affiche en violet souligné.
• Création d’un lien :
▪ L'attribut TITLE=" ……" affiche une bulle d'aide lorsqu'on pointe sur le
lien.
<HTML>
<BODY>
<P>
Site officiel de la <A HREF="
http://estn.ump.ma/ " TITLE="Ecole supérieure de
technologie de Nador" > EST </A> de Nador.
<P>
</BODY >
</HTML>
• E-mail à envoyer et télécharger un fichier

▪ Un lien pour envoyer un e-mail : Il suffit de faire commencer le lien par
MAILTO: suivi de l'adresse e-mail.
▪ Un lien pour télécharger un fichier : On procède exactement comme si
on fait un lien vers une page web, mais en indiquant cette fois le nom du
fichier à télécharger.
<HTML>
<BODY>
<P>
<A HREF="MAILTO: m.fariss@ump.ac.ma">
Envoyez-moi un e-mail</A><BR><BR>
<A HREF="lefichier.pdf">
Cliquez ici pour télécharger le fichier</A>
</P>
</BODY >
</HTML>
• Insérer une image : SRC et ALT
▪ Pour insérer une image dans un document HTML on utilise la balise

<IMG>.
▪ La balise <IMG> doit être accompagnée de deux attributs obligatoires :
o SRC : permet d'indiquer la source où se trouve l'image que l'on veut
insérer.
o ALT : un texte alternatif qui décrit ce que contient l'image. Ce texte
sera affiché à la place de l'image si celle-ci ne peut pas être
téléchargée.
<HTML>
<BODY>
<IMG SRC="image1.PNG" ALT=" Logo
HTML" />
</BODY >
</HTML>
• Défiler un texte
▪ La balise HTML <marquee> permet de faire défiler un texte/une image.

▪ L'attribut HTML <behavior> de la balise HTML MARQUEE définit le type
de glissement peut prendre:
o Slid
o Alternate
<HTML>
<BODY>
<marquee behavior="slid"> Texte défilant: slid</marquee>
<marquee behavior="alternate"> Texte défilant : alternate</marquee>
</BODY >
</HTML>
• Défiler un texte
▪ L'attribut DIRECTION de la balise MARQUEE définit le type de

glissement.<MARQUEE DIRECTION="left"> </MARQUEE>
▪ Il peut prendre la valeur de :
o right, défile vers la droite.
o left, défile vers la gauche.
o down, défile vers le bas.
o up, défile vers le haut.
▪ La balise HTML <marquee> permet également de faire défiler des autres
formes: une image/ un flash/ une vidéo/ un audio/ .
<HTML>
<BODY>
<marquee behavior="slid"> <img src="image1.png"></marquee>
</BODY >
</HTML>
Structure du contenu d’une page web
• Introduction :
▪ HTML offre un ensemble d’éléments qui délimitent les zones du
document possédant une valeur sémantique particulière. Leur rôle est de
structurer la page en plusieurs grandes zones dont le simple nom de
l’élément est évocateur de son utilité. Il s’agit des éléments: <header>,
<nav>, <section>, <article>, <aside>, et <footer>.
Structure du contenu d’une page web
• Exemple:
<html>
<body>
<header>
<h3> Logo</h3>
<nav>
<ul>
<li> <a href="lien1.html"> Homme </a></li>
<li> <a href="lien2.html"> CV </a></li>
<li> <a href="lien3.html"> Contacte-nous </a></li>
</ul>
</nav>
</header>
<section>
<article> News 1 </article>
<article> News 2 </article>
</section>
<section>
<Article> Sport 1 </article>
<Article> sport 2 </article>
</section>
<aside>
<h3> Plus d'informations</h3>
</aside>
<footer>
<h3> Copyright</h3>
</footer>
</body >
</html>
Les tableaux
• Principe balises :
▪ La balise <TABLE> permet de créer un TABLEAU.

▪ La balise <TR> (table row) permet de créer une nouvelle ligne dans le
tableau.
▪ Dans une ligne <TR> … </TR>, on crée des cellules grâce aux balises
<TD> (table data) .
▪ Dans une cellule <TD> et </TD>, on met le contenu de la case (texte,
image...).
▪ La balise <TD> peut être remplacée par <TH> (table head) si la case est
un intitulé de colonne.
Les tableaux
• Balise <TD> :
<HTML>
<BODY>
<TABLE>
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Balise <TH> :
<HTML>
<BODY>
<TABLE>
<TR>
<TH> Nom </TH>
<TH> Prénom </TH>
<TH> Note</TH>
</TR>
<TR>
<TH> mazin</TH>
<TH> mohamed</TH>
<TH> 12</TH>
</TR>
<TR>
<TH>sabi</TH>
<TH> karim </TH>
<TH> 13</TH>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Attribut BORDER :
<HTML>
<BODY>
<TABLE BORDER=“2”>
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Attribut cellspacing :
▪ L'attribut cellspacing de la balise <table> permet de modifier
l'espacement entre cellules.
<HTML>
<BODY>
<TABLE BORDER=“2” CELLSPACING=“12”>
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Attribut cellpadding :
▪ L'attribut cellpadding de la balise <table> permet de spécifier l'espace
entre le contenu de la cellule et la paroi cellulaire.
<HTML>
<BODY>
<TABLE BORDER=“2” CELLPADDING =“12”>
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Attribut width :
▪ L'attribut width de la balise <table> permet
<HTML>
<BODY>
de spécifier la largeur du tableau. Cette
<TABLE BORDER="1" WIDTH="40%" valeur est indiquée en pixel (width="400")
HEIGHT="30%"> ou en pourcentage (width="100%").
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Attribut width avec td et th :

▪ L'attribut width de la balise <td> ou <th> permet de spécifier la largeur de
la cellule.
▪ La largeur peut être spécifiée en pixel (width="100") ou en %
(width="33%").
▪ Si on utilise des pourcentages, le total doit être égal à 100%
▪ Si on utilise des pixels, le total ne doit pas dépasser la largeur du tableau.
▪ Il n'est pas utile de préciser la largeur de chaque cellule. On donne la
largeur de la 1ère cellule d'une colonne, et celle-ci sera valable pour toute
la colonne.
Les tableaux
<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TD WIDTH="10%"> Nom </TD>
<TD WIDTH=“20%"> Prénom </TD>
<TD WIDTH=“70%"> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TH WIDTH="10%"> Nom </TH>
<TH WIDTH="20%"> Prénom </TH>
<TH WIDTH="70%"> Note</TH>
</TR>
<TR>
<TH> mazin</TH>
<TH> mohamed</TH>
<TH> 12</TH>
</TR>
<TR>
<TH>sabi</TH>
<TH> karim </TH>
<TH> 13</TH>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Attributs pour les cellules td et th : align

<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%">
<TR>
<TD WIDTH="10%“ ALIGN="CENTER"> Nom
</TD>
<TD WIDTH=“20%“ ALIGN=“RIGHT"> Prénom
</TD>
<TD WIDTH=“70%“ ALIGN=“LEFT"> Note
</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Attributs pour les cellules td et th : valign
<HTML>
<BODY>
<TABLE BORDER="1" WIDTH="30%"
HEIGHT="30%">
<TR>
<TD VALIGN="top"> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD VALIGN="Middle"> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD VALIGN="bottom">sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Fusion de colonnes : colspan

▪ L'attribut colspan de la balise <td> permet de fusionner un nombre de
colonnes. Il prend comme valeur le nombre de colonnes à fusionner
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%">
<TR>
<TD> Nom </TD>
<TD > Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD COLSPAN="2"> mazin</TD>
<TD> mohamed</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Fusion de lignes : rowspan

▪ L'attribut rowspan de la balise <td> permet de fusionner un nombre de
lignes. Il prend comme valeur le nombre de lignes à fusionner
<HTML>
<BODY>
<TABLE BORDER="1" WIDTH="50%" >
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD rowspan="2"> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Couleurs
▪ Principaux attributs de mise en forme d’un tableau et des cellules:
o Couleur du fond du tableau <TABLE BGCOLOR="GREEN">
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%“
BGCOLOR="GREEN">
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Couleurs
o Couleur du fond des lignes <TR BGCOLOR="GREEN">
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%“>
<TR BGCOLOR="GREEN">
<TD > mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim</TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les tableaux
• Couleurs
o Couleur du fond d’une cellule <TD BGCOLOR="GREEN">
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%“>
<TR>
<TD BGCOLOR="GREEN"> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD BGCOLOR="GREEN"> karim
</TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Les formulaires (forms)
• Un formulaire HTML permet de saisir et de transmettre des informations. Il

est composé d'un ou plusieurs éléments.
• Les éléments d’un formulaire peuvent être des zones de texte, des boîtes à
sélection, des cases à cocher, des boutons radio, fichiers, date, heure,
…
• Un formulaire est déclaré grâce à la balise <form> dont on précisera
généralement trois attributs :
o name : nom du formulaire
o action : chemin vers la page ou les données du formulaire seront
envoyées (script php, script asp …).
o method : la méthode d'envoi des données qui est soit "POST" soit
"GET".
<html>
<body>
<form
name="questionnaire" action="page_envoi.html" method=“post">
</form>
</body >
</html>
• Champs de saisie : <INPUT> : Champ de texte
▪ Un champ de texte est inséré grâce à la balise <input> en précisant les

attributs :
o type="texte ": précise qu’il s’agit d’un champ de texte.
o name : permet de spécifier le nom de la variable qui sera envoyée.
o value : permet de spécifier une valeur par défaut (valeur avec
laquelle le champ sera affiché pré-rempli).
<html>
<body>
<h2>Un questionnaire <h2>
<form name="questionnaire"
action="page_envoi.html"
method=“post">
saisir votre nom : <input type="text"
name="le_prenom" value="">
</form>
</body >
</html>
• Champs de saisie : <INPUT> : Champ de mot de passe
▪ Un champ de mot de passe est inséré avec la balise <input> en précisant

les attributs:
o type="password": précise qu’il s’agit d’un champ de mot de passe.
o value : permet de spécifier une valeur par défaut (valeur avec
laquelle le champ sera affiché pré-rempli).
<html>
<body>
action="page_envoi.html" method=“post">
saisir votre mot de passe: <input
type="password" name="mot_passe"
value="">
</form>
</body >
</html>
• Champs de saisie : <INPUT> : Bouton d’envoi
▪ Bouton d'envoi : inséré grâce à la balise <input> en précisant les

attributs:
o type="submit": pour un bouton d’envoi .
o value : pour spécifier le texte qui sera affiché sur le bouton.
o Lorsque on clique sur ce bouton, les données du formulaire seront
envoyées à la page précisée par l'attribut action du formulaire.
<html>
<body>
cocher qualité de produit<br/>
<input type=“submit" value= " cliquez">
</form>
</body>
</html>
• Champs de saisie : <INPUT> : Case à cocher

▪ Une case à cocher est insérée grâce à la balise <input> en précisant les
attributs :
o type="checkbox" : précise qu’il s’agit d’une case à cocher.
o value : permet de spécifier la valeur qui sera envoyée si la case est
cochée
▪ On peut afficher une case pré-cochée en précisant l’attribut
checked="checked".
<html>
<body>
<form name="questionnaire" action="page_envoi.html"
method=“post">
<input type="checkbox" name="choix_qualié" value="">bien
<input type="checkbox" name="choix_qualié" value="">mouvais
</form>
</body >
</html>
• Champs de saisie : <INPUT> : Bouton radio
▪ Une bouton radio est insérée grâce à la balise <input> en précisant les
attributs :
o type="radio": précise qu’il s’agit d’un bouton radio.
o value : permet de spécifier la valeur à envoyer si l'option est
sélectionnée.
▪ NB: Les boutons radios n'autorisent qu'un seul choix (les checkbox
permettent de cocher plusieurs cases).
▪ On peut afficher un bouton radio pré-coché en précisant l’attribut
checked="checked"
• Champs de saisie : <INPUT> : Bouton radio
<html>
<body>
<form name="questionnaire" action="page_en
voi.html" method="get">
<input
type="radio" name="choix_qualité" value=""
checked="checked">bien
<input
type="radio" name="choix_qualité" value="">
mouvais
</form>
</body >
</html>
• Champs de saisie : <INPUT> : Date
▪ Les éléments <input> dont l'attribut type vaut date permettent de créer
des champs permettant de saisir des dates (composées d'une année,
d'un mois et d'un jour mais pas d'une heure.
<html>
<body>
action="page_envoi.html" method="post">
date de naissance
<input type="date" name="date_na">
</body >
</html>
• Champs de saisie : <INPUT> : Time
▪ Les éléments <input> dont l'attribut type vaut time permettent de créer
des contrôles où l'utilisateur peut saisir une heure.
<html>
<body>
<form
name="questionnaire« action="page_envoi
.html" method="post">
Heure: <input type="time"
name=="heure_p">
</body >
</html>
• Champs de saisie : <INPUT> : Bouton d’annulation (reset)
▪ Bouton d'annulation (reset) : inséré grâce à la balise <input> en précisant

les attributs :
o type="reset": pour un bouton reset.
o value : pour spécifier le texte qui sera affiché sur le bouton
<html>
<body>
Recevoir des notifucations?<br/>
<input type= "reset" value= "annuler">
</form>
</body >
</html>
• Champs de saisie : <INPUT> : Bouton simple
▪ Bouton simple : inséré grâce à la balise <input> en précisant les attributs :

o type="botton": pour un bouton simple.
o value : permet de spécifier le texte qui sera affiché sur le bouton.
o On peut attribuer à ce type de bouton une action avec une
commande JavaScript
<html>
<body>
<input type=“button" value=“Déja inscrit“">
</form>
</body >
</html>
• Champs de texte : <TEXTAREA>
▪ Un champs texte est une «zone de texte» sur plusieurs lignes.

▪ Un champ texte est insérée grâce à la balise <TEXTAREA> en précisant
les attributs :
o name : spécifie le nom de la variable qui sera envoyée.
o rows : permet de préciser le nombre de lignes de la zone de texte.
o cols : permet de préciser le nombre de caractère par ligne de la zone
de texte.
▪ Le texte placé entre les balises <textarea> et </textarea> permet de
spécifier une valeur par défaut (valeur avec laquelle le champ sera affiché
pré-rempli)
• Champs de texte : <TEXTAREA>
<html>
<body>
<form name="questionnaire" action="page_envoi.
html" method="post">
envoyer votre message</br>
<textarea name="msg" rows="4" cols="20"> écrire
ici</textarea>
</form>
</body >
</html>
• Champs de sélection (liste déroulante) : <select>

▪ Les champs de sélection permettent de proposer une liste déroulante de
choix.
▪ Un champ de sélection est inséré grâce à la balise <select> en précisant
l’attribut name permettant de spécifier le nom de la variable qui sera
envoyée.
▪ La balise <select> doit contenir autant de couple <option> et </option>
que nous avons de choix dans la liste déroulante .
▪ Pour chaque balise <option>, nous précisons :
o L’attribut value : qui précise le nom de la variable qui sera envoyée.
o Le texte : qui sera affiché pour l'utilisateur (placé entre <option> et
</option>).
o L’attribut selected="selected" : qui affiche le champ présélectionné
• Champs de sélection (liste déroulante) : <select>
<html>
<body>
<br/><br/>
choisir votre ville
<select name="ville">
<option value=“ouj"> Oujda</option>
<option value="nad"> Nador</option>
<option value="rab"> Rabat</option>
</select>
</body >
</html>
Les frames
• Présentation
▪ Avec le langage HTML, il est possible de diviser une fenêtre en cadres ou

plusieurs zones appelées frames (cadres).
▪ Grâce aux frames (cadres), il est possible d'afficher plusieurs pages
HTML, chacune dans un frame (zone ou cadre) différent.
▪ La balise <frameset> permet de définir le nombre de frames et leurs
dimensions.
▪ Les deux principaux attributs sont :
o rows="H1,H2,...Hn" : permet de créer des frames horizontaux
o cols="L1,L2,...Ln" : permet de créer des frames verticaux.
Les frames
• Créer des frames
<html>
<frameset rows="20%, 30%, 50%">
<frame>
<frame>
<frame>
</frameset>
</html>
<html>
<frameset cols="20%, 30%, 50%">
<frame>
<frame>
<frame>
<frameset>
</html>
Les frames
▪ Les balises <frameset> peuvent être imbriquées
<html>
<frameset rows="20%,70%">
<frame>
<frameset cols="30%,70%">
<frame>
<frame>
</frameset>
</frameset>
</html>
Les frames
▪ Pour ajouter le contenu de chacun des cadres, la balise <frame> doit

contenir les deux attributs :
o src=url : pour indiquer le fichier à placer dans la zone.
o name : le nom de la zone
<html>
<frameset rows="50%,50%">
<frame src="exp1.html"
name="framea">
<frameset cols="30%,70%">
name="frameb">
name="framec">
</frameset>
</frameset>
</html>
Les frames
• <iframe> : l'élément de cadre intégré
▪ L'élément HTML <iframe> représente un contexte de navigation imbriqué

qui permet en fait d'obtenir une page HTML intégrée dans la page
courante.
▪ Exemple: intégrer une page web
<html>
<body>
Vous êtes sur la page d'accueil
<iframe src="http://estn.ump.ma" width="
100%" height="60%" >
</iframe>
</body >
</html>
Les frames
▪ Exemple: intégrer une vidéo de Youtube
<html>
<body>
Vous êtes sur la page d'accueil
<iframe width="560" height="315"
src="https://www.youtube.com/embed/Z-
pT0XDYvDM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-
write; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen>
</iframe>
</body >
</html>
Les frames
▪ Exemple: intégrer de google map
<html>
<body> <iframe
src="https://www.google.com/maps/embed?pb=!
1m18!1m12!1m3!1d3265.610850461477!2d-
2.9154642402911857!3d35.06646721338897!2
m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m
2!1s0xd77a567cff5f453%3A0x55b30fe66859757
0!2s%C3%89cole%20Sup%C3%A9rieure%20de
%20Technologie%20Nador!5e0!3m2!1sfr!2sma!
4v1695263515357!5m2!1sfr!2sma" width="400"
height="300" style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-referrer-when-
downgrade"></iframe></body >
</html>
Multimédia
• Audio et vidéo
▪ Le HTML5 a apporté son lot de nouveautés, notamment au niveau du

contenu multimédia.
▪ En effet, avant, il était bien souvent nécessaire de faire appel à des
conteneurs lourds comme Flash.
▪ Dorénavant, des balises dédiées à ces usages ont été introduites :
o <audio> Pour les contenus audios uniquement.
o <video> Pour les contenus audio ET vidéo ;
Multimédia
• Audio et vidéo
▪ controls : Affichage des contrôles. La présence de l’attribut controls

affiche les contrôles natifs du navigateur (lancement de la lecture, arrêt,
progression, volume, etc.)
▪ width, height : Dimensions. Spécifie les dimensions d’affichage de la
<html> zone vidéo.
<body>
<audio controls=“controls”>
<source src="audio1.mp3“>
</audio>
</body>
</html>
<html>
<body>
<video controls=“controls” width="400" height="200" >
<source src=“video1.mp4“ >
</video >
</body>
</html>
Multimédia
• Audio et vidéo
▪ autoplay : Lecture automatique. Active la lecture dès le chargement de la
page.
▪ NB : Pour certains navigateurs (ex. Chrome 70), l'attribut autoplay ne
fonctionne pas si aucun attribut mute n'est présent.
▪ muted : Silencieux. Active le mode silencieux (volume nul).
<html>
<body>
<audio controls=“controls” autoplay="autoplay“>
<source src="audio1.mp3“ >
</audio>
</body> </html>
<html>
<body>
<video width="400" height="200" controls="controls"
autoplay="autoplay" muted>
<source src="video1.mp4">
</video >
</body> </html>
Multimédia
• Audio et vidéo
▪ loop : Lecture en boucle. Active la lecture en boucle.

▪ poster: Aperçu par défaut. Indique l’adresse de l’image d’aperçu à
charger pour occuper la zone d’affichage lorsque la vidéo n’est pas jouée.
<html>
<body>
<video width="400" height="200"
controls=“controls” loop=“loop”
poster=“image1.jpg”>
<source src=“video1.mp4“ >
</video >
</body>
</html>
Multimédia
• Intégration du document utilisant la balise <embed>
<html>
<body>
Intégrer un document PDF dans une page web !!
<br><br>
<embed src="html_partie2.pdf" width="30%"
height="40%"> </embed> <br/> <br/>
<a href="html_partie2.pdf"> Télécharger le
docuement</a>
</body >
</html>
Multimédia
• Carte cliquable
▪ Un élément <map> est utilisé en conjonction avec une image <img> pour
concevoir une carte cliquable appliquée sur celle‐ci.
▪ Le résultat consiste en des zones distinctes et transparentes, de formes
variées, équipées de liens.
▪ En anglais, on emploie plus couramment le terme d’image map. L’attribut
name est requis pour cet élément, car il permet de l’associer à l’élément
image <img> via son attribut usemap .
▪ L'attribut coords spécifie les coordonnées d'une zone dans une image
cliquable.
▪ L’attribut shape spécifie le placement d'une zone.
Multimédia
• Carte cliquable : valeurs d’attribut: coords
Valeur description
Coords="x1,y1,x2,y2" Spécifie les coordonnées des coins

supérieur gauche et inférieur droit du
rectangle
(shape="rect").
Coords="x,y,rayon" Spécifie les coordonnées du centre
du cercle et le rayon (shape="circle").
Coords="x1,y1,x2,y2,..,xn,yn" Spécifie les coordonnées des bords
du polygone. Si les premières et les
dernières paires de coordonnées ne
sont pas identiques, le navigateur
ajoutera la dernière paire de
coordonnées pour fermer le polygone
(shape="poly").
Multimédia
• Carte cliquable
▪ Exemple : intégrer une carte cliquable (code source)
<html>
<body>
<img src="mon_image.jpg"
usemap="#nom_image">
<map name="nom_image">
<area
shape="rect" coords="100,50,350,200"
href="https://www.youtube.com/">
<area shape="circle" coords="400,50,50"
href="https://ump.ma/">
<area
shape="poly" coords="380,150,430,150,380,200,
430" href="http://estn.ump.ma">
</map>
</body >
</html>

ch1 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

ch1 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Mourad Fariss

• Les langages du Web

Page Web = HTML 5 + CSS 3+ JAVASCRIPT

le contenu + la forme + l’interactivité

• HyperText Markup Language : En français « langage à balises pour

▪ 1973 : GML, Generalised Markup Language développé chez IBM.

• XHTML est une version d’HTML conforme au langage XML

• Les avantages de XHTML :

• Il existe trois types de balises HTML:

▪ Utilisées pour marquer le début et la fin d'un élément en HTML

▪ Toutes les balises ont le même format :

o commencent par un signe inférieur "<"

o terminent par un signe supérieur ">".

• Différence entre une balise d'ouverture et une balise de fermeture est la

• Balises (tags) pour :

• Structure d'un document HTML :

• En-tête HEAD : métadonnées

• En-tête HEAD : métadonnées

▪ À quoi servent les balises META ?

• Codage des caractères

• Un premier contenu : paragraphe

 On ne peut pas inclure un paragraphe à l'intérieur d'un paragraphe.

• Mise en forme des caractères

▪ <B>, <STRONG> : Mettre en gras un texte

<B> Texte en gras</B><BR/>

• Mise en forme des caractères

▪ <SUB> : pour mettre un mot en indice

• Mise en forme des paragraphes :

▪ <h1> </h1> : format d'entête

• Liste non ordonnée

▪ Une liste ordonnée permet de créer une liste d'éléments numérotés.

• Liste : attribut TYPE

▪ Pour choisir le type de puce, on utilise l'attribut type de la balise <OL> ou

• Création d’un lien :

• Création d’un lien :

• E-mail à envoyer et télécharger un fichier

• Insérer une image : SRC et ALT

▪ Pour insérer une image dans un document HTML on utilise la balise

▪ La balise HTML <marquee> permet de faire défiler un texte/une image.

▪ L'attribut DIRECTION de la balise MARQUEE définit le type de

▪ La balise <TABLE> permet de créer un TABLEAU.

• Attribut width avec td et th :

• Attribut width avec td et th :

• Attribut width avec td et th :

• Attributs pour les cellules td et th : align

• Attributs pour les cellules td et th : valign

• Fusion de colonnes : colspan

• Fusion de lignes : rowspan

• Un formulaire HTML permet de saisir et de transmettre des informations. Il

• Champs de saisie : <INPUT> : Champ de texte

▪ Un champ de texte est inséré grâce à la balise <input> en précisant les

• Champs de saisie : <INPUT> : Champ de mot de passe

▪ Un champ de mot de passe est inséré avec la balise <input> en précisant

• Champs de saisie : <INPUT> : Bouton d’envoi

▪ Bouton d'envoi : inséré grâce à la balise <input> en précisant les

• Champs de saisie : <INPUT> : Case à cocher

• Champs de saisie : <INPUT> : Bouton radio

• Champs de saisie : <INPUT> : Bouton radio

• Champs de saisie : <INPUT> : Date

• Champs de saisie : <INPUT> : Time

• Champs de saisie : <INPUT> : Bouton d’annulation (reset)

▪ Bouton d'annulation (reset) : inséré grâce à la balise <input> en précisant

• Champs de saisie : <INPUT> : Bouton simple

▪ Bouton simple : inséré grâce à la balise <input> en précisant les attributs :