Partie1 HTML GI4 2021 2022 Etudiants

UNIVERSITÉ IBN ZOHR
Faculté Polydisciplinaire de Taroudant
Les Technologies Web:

Apprentissage et Pratique du Langage HTML5 et
CSS3
(HyperText Markup Language)
M23: Technologies Web
Filière Licence Professionnelle: Génie Informatique
Semestre 4
2021/ 2022
Pr. Jilali ANTARI

HTLM : Hyper Text Markup Language
• Langage de description de document multimédia (textes,

images, sons, vidéos, animations, . . . etc.) utilisé
notamment par le Web.
• HTML utilise des balises (tags en anglais) pour indiquer la
façon dont le document doit être affiché: <nom balise>
contenu </nom balise>
• HTML est un langage (non compilé) qui est interprété par
le navigateur pour la description et le formatage de la page
• L’extension d’un document HTML est : .html ou .htm
Balise de formatage
Syntaxe: <balise attributs> contenu </balise>
balise (tags en anglais) est un mot clé du langage associant une

propriété particulière au contenu de la balise
Exemple : mettre en gras le contenu après cette balise
Attributs vont définir les valeurs spécifiques à appliquer sur le

contenu, ils ne sont pas toujours obligatoires.
Exemple : taille 12 associée à la balise "police de caractère "
Contenu représente du texte, des images ou d’autres balises
</balise> est une étiquette précisant la fin de la balise
3
Structure d’une page Web
F
Information
textuelle
HTML Navigateur
Mise en Espace de
forme visualisation
4
HTML5 : les nouvelles balises
• Structure de page web :
– <header> <header>
<nav>
– <nav>
<section>
– <section>
<article>
– <article>
– <aside> <section>
<aside>
– <footer> <article>
<footer>
5
<html>
<head>
<title>GI4html</title>
</head>
<body>
<!– test -->
Ceci est un exemple de page web
<p>
Balise de formatage
<p>
<font face="Gabriola" size="5" color="red"> Résultat
mon exemple </font>
<p>
<font face="tahoma" size="5" color="blue">
mon exemple </font>
</body>
</html>
Document HTML
<HTML> ... </HTML>
Marqueurs de début et de fin du document HTML
<HEAD> ... </HEAD>
Ensemble des méta informations relatives au document
<TITLE> Titre </TITLE>
Titre du document qui apparaît sur la barre de titre du navigateur
<META>
paramètres utiles notamment pour l’indexation du document par les
moteurs de recherche
<title>Exemple 2</title>
<meta name="keywords" content="mot1, mot2, mot3, ...">
<meta name="description" content="ceci est ma description">
<meta http-equiv="refresh" content="50;URL=www.google.fr">
<BODY> ... </BODY>
Corps du document
<!– Mon commentaire --> pour insérer des commentaires dans le
document 7
Mise en forme
 La mise en forme de tous les documents HTML est réalisé

grâce aux balises standardisées dans le langage.
Les balises permettent de :
 Modifier le type du texte (titre, paragraphe, … etc.),

 Le style du texte (couleur, formatage, etc.),
 Disposition/Alignement,
 Insertion d’objets multimédias,
 Lien entre les éléments, etc.
8
Mise en forme
<h1>Titre de niveau 1</h1>

Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
... ... ... ... ... ...
Titre de niveau 6
9
Mise en d’une
Exemple forme:page
Exemple
Web
<HTML>
<HEAD>
<TITLE> Test sur les titres
</TITLE>
</HEAD>
<BODY>
<H1 align=‘’right’’> Titre 1 </H1>
<H2> Titre 2 </H2>
<H3 align=‘’center’’> Titre 3 </H3>
<H4> Titre 4 </H4>
<H5 align=‘’left’’> Titre 5 </H5>
<H6> Titre 6 </H6>
Texte principal
</BODY>
</HTML> 10
Balises de mise en forme
Paragraphes
<DIV> </DIV> division de bloc
exemple : <DIV align="left"> Bonjour tout le monde ! </DIV>
La balise <div> définit une division ou une section dans un document HTML.
La balise <div> est utilisée pour regrouper des éléments sous forme de bloc et ainsi
pouvoir les formater en CSS.
Remarque : Les navigateurs placent toujours un saut de ligne avant et après un
élément <div>.
<P> </P> délimiteur de paragraphe
exemple : <P align="left"> Bonjour tout le monde ! </P>
(align=center: Paragraphe centré; align=right: Paragraphe aligné à droite)
<BR> retour à la ligne (« petit »)

exemple : Bonjour<br>tout le monde !
Pour forcer le navigateur à interpréter l’espace il faut utiliser .
<HR> ligne horizontale séparatrice
exemple : <HR WIDTH=200 COLOR="#008000" ALIGN= “CENTER“ SIZE=“1”>
11
Balises de mise en forme : Exemple
<html >
<head>
<title>Page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction HTML</h1>
<h2> Exemple 1 </h2>
<p>Chaque programme est écrit par un langage spécifique s’exécute par un type de
programme serveur.</P>
<P> Le type du programme serveur utilisé va conditionner les langages possibles.
Voyons quelques exemples :</p>
Chaque programme est écrit par un langage spécifique s’exécute par un type de
programme serveur. Le type du programme serveur utilisé va conditionner les langages
possibles. Voyons quelques exemples :
<h2>Exemple 2</h2>
<p align="justify"> Le client est couramment appelé un navigateur. Les navigateurs les plus
connus étant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. Les plus courant acceptent
des extensions (Plug-In) permettant d’étendre leurs capacités (lire des vidéo, recevoir du
son ou des films en flot continu,...). </p>
</body> </html>
12
13
Styles
Barrer du texte: <S> </S>
Souligner du texte: <U> </U>
Texte en gras: <B> </B>
Texte en italique: <I> </I>
Texte clignotant: <BLINK>texte clignotant</BLINK>
Indice <sub>
Test Voici un exemple de rendu de <sub>
Exposant <sup>
Test Voici un exemple de rendu de <sup>
Afficher une adresse <ADDRESS> </ADDRESS>
La balise <address> définit les informations de l’auteur ou du propriétaire d’un
document.
La balise <address> permet de mettre en évidence des adresses, coordonnées et URL.
Elles sont généralement affichées dans un paragraphe spécifique et en italique (mise en
page modifiable en CSS). La représentation peut varier en fonction du navigateur.
Si l’élément <address> est à l’intérieur de l’élément <body>, il représente les
informations de contact pour le document.
Si l’élément <address> est dans un élément <article>, alors il représente les coordonnées
de l’auteur / propriétaire de cet article. Habituellement l’élément <address> est ajoutée
Mise en forme du texte
La balise <FONT> ... </FONT> permet de définir l’ensemble des

attributs relatifs au texte:
SIZE : définit la taille du texte
(valeurs : 1, 2, 3, 4, 5, 6, 7, ...)
COLOR : définit la couleur du texte (valeurs : aqua, black,
blue, fuchsy, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, yellow ou une valeur hexadécimale du genre
#FFCC00)
FACE : définit la police utilisée
(exemple de valeurs : Arial, Verdana, Times, ...)
<font face="Verdana, Arial, Helvetica, sans-serif“ size="5" color="red"> mon

exemple </font>
15
<html >
<head>
<title>Exemple d’une page web</title>
</head>
<body>
<h1>Chapitre</h1>
<H3><font color="#0000FF">Adresse</font></H3>
<address>GI 4 FPT <BR>
<a href="mailto:gi4@gmail.com">Contact</a> <BR>
Adresse: XXX CCCC VVV XX1 ! <BR>
Tel: 06 61 XXX00 00 00</address> <BR>
<H3><font color="#0000FF">Exercice: Equation</font></H3>
<p> x<sub> 1</sub>, x<sub> 2</sub>, x<sub> 3 </sub> trois variables : </p>
- Afficher la valeur <em><strong>maximale</strong></em></p>
<H3><font color="#0000FF">Exercice: Système</font></H3>
<p> a, b et c trois variables: </p>
<P>F(x)=ax<sup>2</sup>+bx+c</p>
Ecrire un programme en langage C qui donne les <em><strong>solutions de l’&eacutequation:
</em></strong><br>
<p>F(x)=0</p>
</body>
</html>
16
17
Les balises de mise en forme sont associatives et il est possible
de les combiner...
 <em>texte important</em>
 <strong>texte très important</strong>
 <strong><em>texte encore plus important</em></strong>
 <strong><em>texte</em>encore plus important</strong>
L’ordre de fermeture des balises doit être inverse à l’ordre

d’ouverture de ces dernières.
18
Exemple
<html >
<head>
</head>
<body>
<P ALIGN=CENTER>
Pour centrer un paragraphe.<BR>
Facilement.<BR>
!! <BR>
</P>
<P ALIGN=RIGHT>
<B> Pour afficher un paragraphe *** à droite </B><BR>
<B> Facilement.</B> <BR>
</P>
Après cette ligne un saut de paragraphe <P>
Après celle-ci un saut à la ligne simple <BR> salut
<HR WIDTH=400 COLOR="#008000" ALIGN= "CENTER" SIZE="3">
</body>
</html>
Listes
Liste non ordonnée <UL> </UL>
Liste ordonnée <OL> </OL>
<html >
<head>
</head>
<body>
<b><font color="#FF0000">Modules semestre1</font></b>
<ul>
L'élément
<li>POO Java</li>
HTML <li> est
<li>Réseaux</li> utilisé pour
</ul> représenter
<hr width="25%" size="3" align="left"> un élément
<i><font color="#0000FF">Modules semestre2</font></i> dans une liste
<ol> (OL ou UL)
<li>BDD</li>
<li>JEE</li>
</ol>
</body> </html>
<html >
<head>
</head>
<body>
<H3> Table des matière </H3>
<OL>
<LI> Introduction
<LI> Historique de la société
<LI value ="5"> Produits commerciaux
</OL>
<H3><font color="#0000FF">Autres activités</font></H3>
<OL type="A" start="3">
<LI> Services proposés
<LI> Historique de la socité
<LI> Présentation du personnel
</OL>
</body>
</html>
Liste non ordonnée Liste ordonnée
<UL> <OL>
<LI>Terme A <LI>Terme A
<LI>Terme B <OL> Sous-liste
<LI>Terme C <LI>Terme A-1
</UL> <LI>Terme A-2
</OL>
<LI>Terme B
<LI>Terme C
</OL>
Gestion des listes de données
 Afin de structurer les informations dans les pages internet, le

standard HTML propose différentes balises pour mettre en forme les
documents,
 Les listes à puces,
 Les listes numérotées,
 Les listes de description,
 Pour gérer des informations plus complètes, il est possible
d’imbriquer ces balises,
 Possibilité de modifier le style d’affichage des puces et de la

numérotation à l’aide de paramètres.
23
Les listes à puces
<ul>
<li>Premier élément</li> • Premier élément
<li>Deuxième élément</li> • Deuxième élément
<li>Troisième élément</li> • Troisième élément
</ul>
Utilisation de l'attribut TYPE

Valeurs de l'attribut TYPE :
disc : gros point noir plein (par défaut)
circle : gros point noir creux
square : petit carré plein
<ul TYPE=″square″>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul> 24
Les listes numérotées
La balise <ol> permet de définir une liste d’informations.
Chaque donnée de la liste doit être encadrée par la balise <li>
qui indique au navigateur la présence d’un nouvel “item”.
<ol> 1. Premier élément

<li>Premier élément</li> 2. Deuxième élément
<li>Deuxième élément</li> 3. Troisième élément
<li>Troisième élément</li>
</ol>
<OL TYPE="i">...
<OL TYPE="A">...
Valeurs de l'attribut TYPE :
 1 : chiffres arabes
 i : chiffres romains en bas de casse <ol type="i">
 I : chiffres romains en capitales <li>Premier élément</li>
 a : lettres <li>Deuxième élément</li>
 A : lettres (capitales) </ol>
25
Corps du document
Le fond d’écran
Couleur de fond
La couleur de fond est spécifiée par la valeur de la couleur (format en hexadécimal
ou par son nom) attribuée la propriété BGCOLOR. Par défaut, une page est de fond
blanc.
Exemples :
<BODY BGCOLOR="#800080">
</BODY>
<BODY BGCOLOR="purple" >
</BODY>
Image de fond
L'image de fond est spécifiée par son adresse relative ou absolue
comme valeur à la propriété BACKGROUND.
Exemples :
<BODY BACKGROUND="../images/fond.gif">
</BODY>
<BODY
BACKGROUND="http://www.multimania.com/cyberzoide/images/fond.gif">
</BODY>
26
Corps du document
Couleur du texte
La couleur du texte par défaut est spécifiée par le navigateur (en

général, c'est le noir).
Il est possible d'imposer une couleur pour le texte de la page par
l'attribut TEXT dont la valeur est le nom de la couleur ou sa valeur
au format hexadécimal.
Exemples :
<BODY TEXT="black">
</BODY>
<BODY TEXT="#000000">
</BODY>
BGCOLOR :
<BODY TEXT="blue"> Couleur du fond de la page.
</BODY> TEXT :
Couleur du texte contenu dans la page.
27
Corps du document: Les couleurs des liens
Propriété LINK : Lien non encore
Exemples :
<BODY LINK="#000080">
</BODY>
Propriété VLINK: Liens déjà visités
Exemples :
<BODY VLINK="gray">
</BODY>
<BODY VLINK="#808080">
</BODY>
<body vlink="red">
<p><a href="https://
www.w3schools.com">W3Schools.com</a></p>
<p><a href="https://www.w3schools.com/
html/">HTML
Propriété ALINK: Liens activés Tutorial</a></p>
</body>
Exemples :
<BODY ALINK="red">
</BODY>
<BODY ALINK="#FF0000">
28
</BODY>
29
Corps du document
Les couleurs des barres de défilement
Les couleurs des barres de défilement (scrollbar en anglais) horizontales
et verticales (appelées aussi ascenseurs) peuvent être redéfinies.
scrollbar-base-color: couleur générale de la barre
scrollbar-face-color: couleur de face de la barre de défilement
scrollbar-arrow-color: couleur des flèches de navigation
scrollbar-track-color: couleur de l'arrière plan
scrollbar-darkshadow-color: couleur de l'effet 3D du côté sombre de la barre
scrollbar-3dlight-color: couleur de l'effet 3D du côté éclairé de la barre
scrollbar-highlight-color: couleur du bord éclairé
scrollbar-shadow-color: couleur du bord sombre
Exemple (de feuille de style)

body {
scrollbar-face-color: navy; scrollbar-arrow-color: blue; scrollbar-track-color: pink;
scrollbar-3dlight-color: silver; scrollbar-darkshadow-color: dark; scrollbar-shadow-
color : red; scrollbar-highlight-color: color; }
https://developer.mozilla.org/fr/docs/Web/CSS/-ms-scrollbar-base-color
30
Exercice
31
Solution
<html >
<head>
<title>Exemple d’une page web</title>
</head>
<body bgcolor="#570000" text="#FFFFFF">
<h1> GI4</h1>
<h2>Serveurs web</h2>
<font face="Calibri" size= " 5" color="red">
<p>Chaque programme est écrit par un langage spécifique s'exécute par un type de
programme serveur.</P> </font>
<P>Le type du programme serveur utilisé va conditionner les langages possibles.
Voyons quelques exemples :</p>
<h2>Client web</h2>
<p align="justify">Le client est couramment appelé un navigateur. Les navigateurs
les plus connus étant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. </p>
<p>Les plus courant acceptent des extensions permettant d'étendre leurs ... </p>
</body>
</html>
32
Les caractères spéciaux- H.T.M.L
é é
É É
è è
ê ê
à à
ï ï
ç ç
Liens Hypertexte
Syntaxe :
<A HREF="adresse destination">Texte ou image à cliquer</A>
La balise de base est <A> qui a pour attributs :
HREF l'adresse de destination
TARGET le cadre de destination (facultatif).
Les éléments situés à l'intérieur (texte, images) renverront vers une
page sous l'action d'un clic. De plus, lorsque la souris survole un
lien, son apparence change.
34
Types de liens
Il y a 3 types de liens :
Interne à un site : Liaisons entre des pages du même site web
Ancre : Liaisons vers une position dans la même page.
Externe : Liaisons vers des pages d'un autre site.
35
Les images
Balises d’insertion d’images
<img src="image.png" alt="courte description">

<img src="image.jpg" width=600px height=50% alt="Voici une photo de
..." >
Les options d’insertion des images
“alt” : Affichage alternatif à l'image.

“width” : Spécifie la largeur de l’image en pixel ou en pourcentage.
“height” : Spécifie la hauteur de l’image en pixel ou en pourcentage.
“align” : Détermine la position de l’image vis-à-vis du texte qui l’entoure.
“border” : Indique si l’image doit posséder un cadre autour d’elle. Si c’est
le cas, on indique le nombre de pixels le composant.
“hspace/vspace” : Permet de spécifier un espacement horizontal et vertical
autour de l’image.
36
Les options d’insertion des images
Alignement
ALIGN="top" : le haut de l'image est aligné sur la partie
supérieure de la ligne où elle se trouve
ALIGN="middle" : le milieu de l'image est aligné sur le milieu de
la ligne où elle se trouve
ALIGN="bottom" : le bas de l'image est aligné sur le bas de la
ligne où elle se trouve (valeur par défaut)
37
Les tableaux
 Dans les pages web, les tableaux ont plusieurs rôles :

 Ils servent à présenter les données de manière ordonnée,
 Ils permettent de spécifier précisément comment placer les
informations sur une page web,
 Les tableaux sont normalement composés en HTML de lignes et
de colonnes:
 Déclaration du tableau: <TABLE> </TABLE>
 Déclaration d’une ligne: <TR> </TR> (Table Row),
 Déclaration d’une colonne: <TD> </TD> (Table Data).
38
Les tableaux
Un tableau est constitué de lignes et de colonnes.
• Les balises pour un tableau : <TABLE>.........</TABLE>
BORDER = 1|2|3.....
ALIGN = CENTER|LEFT|RIGHT|JUSTIFY
WIDTH = % largeur | largeur en pixels|
BORDERCOLOR = Nom couleur | Code Hexa couleur|
• Balises pour chaque ligne : <TR>........</TR>
• Balises pour les colonnes : <TD>........</TD>
ALIGN=CENTER|LEFT|RIGHT|JUSTIFY
VALIGN = TOP|MIDDLE|BOTTOM
BGCOLOR= Nom couleur | Code Hexa couleur|
• Balises pour le titre : <CAPTION>.......</CAPTION>
ALIGN = TOP|BOTTOM
• Balises pour les cases de titres de lignes ou de colonnes :
<TH>........</TH>
VALIGN = TOP|MIDDLE|BOTTOM| 39
Un tableau de 2 lignes et 2 colonnes
<TABLE>
<TR>
<TD> Élément 1 </TD>
<TD> Élément 2</TD>
</TR>
<TR>
<TD> Élément 3</TD>
<TD> Élément 4</TD> Nbre de lignes= nbre de balise TR
</TR> Même pour les colonnes TD
</TABLE>
<TABLE BORDER=2>
<TR>
<TD>Élément 1</TD>
</TR>
<TR>
</TR>
</TABLE>
40
Les attributs des tableaux
border=2 Ce paramètre permet de fixer la largeur des lignes délimitant le
Tableau.
cellspacing=10 il définit l’espacement entre les bordures de chaque cellule.
cellpadding=10 il définit la largeur de l’espacement entre le contenu d’une cellule
et sa bordure.
<html >
<head>
<title>Tableau</title>
</head>
<body>
<TABLE BORDER=1 cellspacing=30 cellpadding=10 width=40% >
<TR>
</TR>
<TR>
</TR>
</TABLE>
</body>
</html>
41
Fusionner lignes et colonnes
Pouvoir fusionner des cellules au niveau d'une ligne ou d'une colonne
ou même les deux grâce aux attributs respectifs COLSPAN=x et
ROWSPAN=y où x et y représentent le nombre de cellules à fusionner
sur l'axe des lignes ou des colonnes.
<html >
<head>
<title>Tableau</title>
</head>
<body>
<H4>Exemple de fusion de deux lignes </H4>
<TABLE BORDER=2>
<TR>
<TD ROWSPAN=2>Formation</TD>
<TD>LP_GI4_FPT</TD>
</TR>
<TR>
<TD>Semestre 4</TD>
</TR>
</TABLE>
<H4> Exemple de fusion de deux colonnes </H4>
<TABLE BORDER>
<TR>
<TD COLSPAN=2>Formation LP GI4</TD>
</TR>
<TR><TD>Session 4</TD> <TD> Formation3</TD></TR>
</TABLE>
</body>
</html>
Cadres
Les Cadres (Frames) permettent d’afficher plusieurs documents HTML
à l’intérieur d’une fenêtre d’un navigateur
 Pour définir des “sous-fenêtres” dans le navigateur affichant le site
internet, le langage HTML met à notre disposition deux balises plus
leurs paramètres :
<FRAMESET> permet de définir une zone découpée sous forme de
sous fenêtres,
<FRAME> permet de spécifier la définition d’une sous-fenêtre avec
ses paramètres.
 Les balises sont similaires aux balises <TABLE> et <TR> lors de la
déclaration des tableaux.
La balise <FRAMESET> remplace dans une page

HTML la balise <BODY>. 44
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="34%, 66%">
<FRAME>
<FRAMESET COLS="34%, 66%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</HTLM>
45
Insertion des données dans les frames
 Pour ajouter des données dans les “frames”, on doit utiliser

l’attribut SRC mis à notre disposition dans le langage HTML,
 L’attribut SRC va pointer sur le contenu à afficher dans la sous
fenêtre. L’information est fournie sous forme d’URL,
46
Résultat
47
48
Les formulaires
Généralement, les formulaires sont utilisés pour :
•Assurer une interactivité des pages:
Recueillir les avis des visiteurs, les e-mails en vue d'une newsletter,
Passer un bon de commande, un sondage, … etc.
•Échanger des données entre le poste client et le serveur.
Cet échange de données fait appel à des programmes (PHP, Java,
etc.) s’exécutant sur le serveur:
- L’utilisateur remplit le formulaire et le valide ce qui a pour effet
d’envoyer des données vers le serveur
- Le programme (script) s’exécute sur le serveur qui effectue un
traitement en produisant éventuellement des résultats
- Les résultats sont transmis (éventuellement) en code HTML au
poste client. Ils sont affichés par le navigateur
La gestion des informations coté serveur sera abordé dans la suite du

cours, dans la partie langage coté serveur “PHP”,
49
Les formulaires
Ceux sont des zones dans une page Web qui permettent de
récupérer des données auprès des visiteurs.
Ils peuvent ainsi créer une certaine interactivité avec les visiteurs :
- Questionnaire
- Sondage
- Renseignements personnels (adresse, email…)
- Zone privée (mot de passe)
- Affichage de texte ciblé
- Menus, choix de rubriques, choix de liens…
- Zone de texte pour forums, blogs, livre d'or…
50
Les formulaires
Utilités
51
Les formulaires
Les zones de saisie sont définies par la balise <INPUT> qui possède
les attributs suivants :
NAME : nom du champ de saisie ;
TYPE : type de champ ;
text : texte ;
password : mot de passe
checkbox : boite à cocher
radio : boite d’option
SIZE : taille du champ
MAXLENGHT : nombre maximum de caractères à saisir
Champs de saisie d’une ligne

<FORM>
<INPUT type="text" name="nom" size="50">
</FORM>
Mot de passe:
52
<INPUT TYPE="password" NAME="nom " SIZE="taille" MAXLENGTH="taille ">
Zone de texte: Textarea
<form>
<fieldset>
<legend> Remarques supplémentaires :</legend>
<textarea name="boite" cols=30 rows=20> Valeur par défaut </textarea> <BR>
<input type="submit" value="envoyer"/>
<input type="reset" value="Effacer"/>
</fieldset>
</form>
<FORM>
<TEXTAREA name="nom" rows=4 cols=40>
Valeur par défaut </TEXTAREA>
</FORM>
53
Les listes de choix (Select)
 L’élément <Select> permet de spécifier des listes déroulantes pré-remplies afin de
simplifier la tache de l’utilisateur (restreindre ses choix).
 Pour réaliser une liste déroulante, il est nécessaire ne mettre en œuvre 2
balises distinctes :
 <Select> cette balise permet de spécifier le début d’une liste déroulante,
 <Option> cette balise est utilisée afin de spécifier un élément contenu dans la
liste déroulante,
<select name=”pays” size=1>

<option>Maroc
<option>Allemagne
<option>France
<option>Etats-Unis
<option>Autriche
<option>Italie
</select> 54
Boutons Options
<INPUT type= "radio" name="tarif" value="jour" [CHECKED] > tarif de jour
<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit
<INPUT type= "radio" name="tarif" value="week-end"> tarif de week-end
Cases à cocher
<INPUT type="checkbox" name="choix1" value="1" checked > glace vanille
<INPUT type="checkbox" name="choix2" value="2"> chantilly
<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud
<INPUT type="checkbox" name="choix4" value="4"> biscuit
Bouton de commande
<FORM>
<INPUT type="button" name="nom" value="bouton de test"
onclick="fonction Javascript/PHP/…">
</FORM>
Bouton Submit
<INPUT TYPE="submit" VALUE="Envoyer" ONCLICK="envoi();">
Bouton Reset
<INPUT TYPE="reset" NAME="nom" VALUE=" Annuler ">
55
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
</style>
</head>
<body>
<form>
<fieldset style="background:#e1eff2;">
<legend style="padding:20px 0; font-size:20px;">Informations personnelles:</legend>
<div><label>Nom:</label><input type="text"></div>
<div><label> Email:</label><input type="text"></div>
<div><label>Date de naissance:</label><input type="text"></div>
<div><label>Lieu de naissance:</label><input type="text"></div>
</fieldset>
</form>
</body>
56
</html>
Les balises Méta
Informations personnelles
<META NAME="Author" LANG="fr" CONTENT="Prénom NOM">
<META NAME="Publisher" CONTENT="Prénom NOM">
<META NAME="Reply-to" CONTENT="Insérez ici votre adresse
électronique et entre parenthèses
vos prénom et nom.">
Exemple
<META NAME="Author" LANG="fr" CONTENT="Hugo ETIEVANT">
<META NAME="Publisher" CONTENT="Hugo ETIEVANT">
<META NAME="Reply-to" CONTENT="cyberzoide@monsite.com
(Hugo ETIEVANT)">
57
Les balises Méta
Des infos sur votre site
<META NAME="Description" CONTENT="Ici se trouvera votre courte
description.">
<META NAME="Keywords" CONTENT="votre liste de mots clés
séparés par des virgules.">
<META NAME="Indentifier-URL" CONTENT="Ici se trouvera votre
adresse complète.">
Exemples
<META NAME="Description" CONTENT="Site de vulgarisation de la
programmation en Java, PHP, C ">
<META NAME="Keywords" CONTENT="java, html, C, linux, php">
<META NAME="Indentifier-URL"
CONTENT="http://www.lpgi.ac.ma/">
58

Partie1 HTML GI4 2021 2022 Etudiants

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

Partie1 HTML GI4 2021 2022 Etudiants

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITÉ IBN ZOHR

Faculté Polydisciplinaire de Taroudant

Les Technologies Web:

Pr. Jilali ANTARI

• Langage de description de document multimédia (textes,

Syntaxe: <balise attributs> contenu </balise>

balise (tags en anglais) est un mot clé du langage associant une

Attributs vont définir les valeurs spécifiques à appliquer sur le

 La mise en forme de tous les documents HTML est réalisé

Les balises permettent de :

 Modifier le type du texte (titre, paragraphe, … etc.),

<h1>Titre de niveau 1</h1>

<BR> retour à la ligne (« petit »)

La balise <FONT> ... </FONT> permet de définir l’ensemble des

<font face="Verdana, Arial, Helvetica, sans-serif“ size="5" color="red"> mon

L’ordre de fermeture des balises doit être inverse à l’ordre

 Afin de structurer les informations dans les pages internet, le

 Possibilité de modifier le style d’affichage des puces et de la

Utilisation de l'attribut TYPE

<ol> 1. Premier élément

La couleur du texte par défaut est spécifiée par le navigateur (en

Exemple (de feuille de style)

<img src="image.png" alt="courte description">

Les options d’insertion des images

“alt” : Affichage alternatif à l'image.

 Dans les pages web, les tableaux ont plusieurs rôles :

La balise <FRAMESET> remplace dans une page

 Pour ajouter des données dans les “frames”, on doit utiliser

La gestion des informations coté serveur sera abordé dans la suite du

Champs de saisie d’une ligne

<select name=”pays” size=1>

Vous aimerez peut-être aussi