Département Génie Informatique

Filière : Développement Web et MultiMedia

A.U : 2023 / 2024

Pr. Ibrahim EL-FEDANY

[Link]@[Link]
 Introduction
Technologies web

Chap. I : Langage HTML5

Chap. II: Langage CSS3
Chap. III: Langage JavaScript
Chap. IV: Langage PHP

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 2
 Définitions
Technologies web
Introduction

Navigateurs
Site statique vs site dynamique
Evolution du web

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 3
 Internet ?
Le terme Internet est né de la contraction des mots « interconnexion» et « network ».
Technologies web

Alors, Internet est l’interconnexion de tous les réseaux de la planète. C’est un réseau
informatique mondial qui utilise les réseau nationaux, régionaux, universitaires, etc…
Introduction

Protocole ?
protocole est un ensemble normalisé de règles qui permettent à des ordinateurs de
communiquer entre eux et de traiter, formater et partager des données.
Dans l’internet, on trouve plusieurs protocoles tels que: FTP, SMTP, HTTP, TCP …
HTTP ?
L'HyperText Transfer Protocol, HTTP protocole de transfert hypertexte, est un
protocole de la communication client-serveur développé pour le World Wide Web.
HTTPS (S « sécurisé ») est la variante sécurisée par le chiffrement et l'authentification.

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 4
 World Wide Web ?
Web ou (World Wide Web) est système permettant de passer automatiquement d’un
Technologies web

document à l’autre, et que ces documents sont liés entre eux par des hyperliens
Web VS Internet ?
Introduction

l'Internet et le Web soient étroitement liés, ils ne sont pas synonymes. Alors, l’Internet
est l'infrastructure de réseaux sur laquelle repose le web et d'autres applications afin de
d’offrir une interactivité basée sur des pages web et des liens hypertextes.

Page web ?
Une page web est un document qui ne contient que du texte et des codes des langages de
programmation HTML, CSS, JS... Elle peut contenir d'autres fichiers comme des images,
des vidéos ... C'est une unité élémentaire d’une site web dont elle est identifiée par une
URL unique.

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 5
 Site web ?
Une site internet est une collection de pages web reliées entre elles et hébergées sur un
serveur web, il y a deux types de sites web différents en termes de contenu et de
Technologies web

fonctionnalités : Site statique et site dynamique

Introduction

URL ?
URL signifie "Uniform Resource Locator" Localisateur Uniforme de Ressources. C'est
une adresse web unique qui identifie la localisation d'une ressource sur internet, telle
qu'une page web, une image etc. Par exemple : [Link]
Une URL est composée de plusieurs parties, L’URL ci-dessus est constituée de :
 Protocole: la méthode d’accéder à la ressource, " http:// " .
 Nom de domaine: C'est l'adresse spécifique du serveur web où se trouve la ressource,
"[Link]".
 Chemin: Il spécifie le chemin vers la ressource sur le serveur, " /[Link] "
Serveur web ?
Un serveur web est un logiciel installé dans une machine connectée à l’internet, et il est
Département GI
conçu pour stocker, traiter et diffuser des pages web aux utilisateurs via un navigateur web
Pr.: I. EL-FEDANY
[Link]@[Link] 6
 Navigateur ?
Le navigateur est un logiciel qui nous permet d’accéder, de lire le code HTML, CSS, …
et d’afficher un résultat visuel à l'écran. Les navigateurs web les plus populaires incluent
Technologies web

Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera…

Site statique VS site dynamique ?
Introduction

la principale différence entre eux réside dans la manière dont le contenu est généré et
présenté aux utilisateurs. Les sites web statiques ont un contenu fixe, tandis que les sites
web dynamiques peuvent afficher un contenu varié et interactif .

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 7
 Evolution du web
L'évolution du web est une histoire fascinante qui a vu une transformation radicale depuis
Technologies web

sa création. Voici un aperçu des principales étapes de cette évolution :

Web 1.0
Introduction

 Pages statiques
 Navigation unidirectionnelle
 Peu d'interactivité
Web 2.0
 Interactivité accrue
 Réseaux sociaux
 Contenu généré par les utilisateurs
 Les applications web interactives
Web 3.0
 Web sémantique, recherche plus avancées.
 Big Data
Web 4.0
 IA et apprentissage automatique
 Internet des objets (IoT)
Web du futur :
Département GI
 Web spatial, Web quantique …
Pr.: I. EL-FEDANY
[Link]@[Link] 8
 Composants de l'architecture web :
Client :
Technologies web

Le client est l'interface utilisateur qui interagit avec le système web via un navigateur web. Il
peut s'agir d'un ordinateur, d'un smartphone, d'une tablette, etc.
Introduction

Serveur :
Le serveur est l'infrastructure informatique qui héberge et gère les ressources et les
services du système web. Il répond aux requêtes des clients et fournit les données
demandées.
Base de données :
La base de données stocke les données utilisées par le système web. Elle peut contenir des
informations sur les utilisateurs, les produits, les articles, etc.
Middleware :
Le middleware est une couche logicielle qui relie les composants du système web, facilitant
la communication entre le client, le serveur et la base de données. Il peut inclure des
frameworks web, des serveurs d'application, des gestionnaires de contenu, etc.
Protocoles de communication :
Les protocoles tels que HTTP (Hypertext Transfer Protocol) sont utilisés pour la
Département GI communication entre les clients et les serveurs sur Internet.
Pr.: I. EL-FEDANY
[Link]@[Link] 9
 Principaux modèles d'architecture web :
Modèle client-serveur :
Technologies web

Comme décrit précédemment, ce modèle divise les tâches entre les clients qui
Introduction

demandent des ressources et les serveurs qui fournissent ces ressources.

Modèle MVC (Modèle-Vue-Contrôleur) :
Le modèle MVC divise une application web en trois composants principaux : le modèle
qui gère les données, la vue qui affiche l'interface utilisateur, et le contrôleur qui traite
les actions de l'utilisateur et met à jour le modèle et la vue en conséquence.
Architecture orientée services (SOA) :
SOA découpe les fonctionnalités du système web en services indépendants et
interopérables qui peuvent être réutilisés et combinés pour créer des applications web
plus complexes.

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 10
 Architecture d’une Application web :
Technologies web
Introduction

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 11
 Technologies clés de l'architecture web :
HTML/CSS/JavaScript :
Ces langages sont utilisés pour créer la structure, le style et l'interactivité des pages web.
Technologies web

Frameworks web :
Des frameworks tels que Django (Python), Rails (Ruby), Laravel (PHP), Spring (Java) et
Introduction

d’autres qui facilitent le développement d'applications web en fournissant des structures et

des fonctionnalités prêtes à l'emploi.
Bases de données :
MySQL, PostgreSQL, Oracle, et d'autres systèmes de gestion de bases de données sont
utilisés pour stocker et récupérer les données du système web.
Serveurs d'application :
Des serveurs d'application tels que Apache Tomcat, et Microsoft IIS sont utilisés pour
héberger et exécuter des applications web.

Par la suite, nous nous intéresserons à :

 HTML, CSS, JavaScript : langage pour Frontend
 PHP : Langage pour Backend
 MySQL : Serveur Base de données
Département GI  Apache : serveur Web
Pr.: I. EL-FEDANY
[Link]@[Link] 12
 Technologies web

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 13
  Introduction de HTML
 Formulaire
Technologies web

 HTML?
 Historique  Création
 Editeur  Balise <input>
 Balise <textarea>
HTML

 Bases du langage HTML  Balise <select>

 Structure d’un document HTML
 Frameset : multifenêtres
 Mettre en forme du texte
 Les listes déroulantes  Les balise sémantique
 Les liens hypertextes
 Les images
 Audio et Vidéo
 Les Tableaux

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 14
 HTML ?
Le langage HTML, HyperText Markup Language, est le langage de balisage standard
Technologies web

utilisé pour créer et concevoir des pages web. Voici quelques conventions courantes en
HTML :
 Indentation: Indentez le code HTML pour améliorer sa lisibilité
HTML

 Utilisation de minuscules: Bien que le HTML soit insensible à la casse, il est courant
de toujours écrire les balises en minuscules pour plus de lisibilité.
 Commentaires: Utilisez des commentaires HTML (<!-- commentaire -->) pour
documenter votre code
 Compatibilité avec les navigateurs: Testez votre code HTML sur différents
navigateurs pour vous assurer qu'il s'affiche correctement et que les fonctionnalités
interagissent de manière cohérente.
Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 15
 Historique ?
HTML1 :c'est la toute première version créée par Tim Berners-Lee en 1991.
Technologies web

HTML2 : la deuxième version du HTML apparaît en 1994. C'est cette version qui posera en fait
les bases des versions suivantes du HTML.
HTML

HTML3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses

possibilités au langage comme les tableaux, les scripts, le positionnement du texte autour des
images, etc.

HTML4 : Elle apparaît pour la première fois en 1998 et propose l'utilisation de

frames, des améliorations sur les formulaires, etc. Elle permet pour la première fois
d'exploiter des feuilles de style, CSS, et le langage de script côté client (JavaScript), etc.
HTML5 : Elle est apparaît 2008 et publié comme standard en 2014, elle apporte de
nombreuses améliorations comme la possibilité d'inclure des vidéos,et l'audio, le
balisage sémantique, de nouvelles fonctionnalités pour les formulaires, etc..
Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 16
 L’éditeur de texte?
Il existe effectivement de nombreux logiciels dédiés à la création de sites web. On peut
Technologies web

classer ces logiciels de création de site web en deux catégories :

WYSIWYG : What You See Is What You Get , ce que vous voyez est ce que vous
obtenez, ce sont des programmes qui permettent de créer des sites web sans apprendre
HTML

de langage particulier. Parmi les plus connus d'entre eux: WordPress, Wix, Weebly…
La qualité souvent assez mauvaise du code HTML et CSS qui est automatiquement
généré par ces outils. Un bon créateur de site web doit tôt ou tard connaître du code.

Editeurs de texte: Ce sont des programmes dédiés à l'écriture de code. On peut en

général les utiliser pour de multiples langages, pas seulement HTML. II existe plusieurs
éditeurs tels que :
Notepad, Visual Studio Code, Sublime, Brackets, CoffeeCup, ….
Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 17
 Structure d’un document HTML
Pour créer une page web, ouvrir un éditeur de texte, créer un fichier avec
Technologies web

l'extension « .html » et combiner les balises indiquées dans ce document pour

obtenir une page web.
DOCTYPE : La déclaration du Doctype est utilisée pour
spécifier le type de balisage du document
HTML

<html> est l’élément racine du document. Il est le

parent de tous les autres, soit <head> et <body>.

Head : Cet élément donne quelques informations

générales sur la page, comme son titre et l’encodage de
la page. Ces deux informations sont les seules obligatoires
dans cette section.
Body : la balise <body> entourant le corps réel de la page Web qui sera visible par tous les
utilisateurs. Cette balise commence par <body> et se termine par </body>. Elle peut accepte les
principaux attributs suivants : Background , source pour une image de fond, Bgcolor: couleur de
Département GI
fond de la page , Link, la couleur d’un lien non encore visité, Vlink: couleur du lien déjà visité…
Pr.: I. EL-FEDANY
[Link]@[Link] 18
 Mettre en forme du texte
Les titres: Il est possible de mettre des titres en avant grâce aux balises <h1>,
Technologies web

<h2>, <h3>, <h4>, <h5> et <h6>. Chacune de ces balises correspond à un niveau de
titre, allant du titre principal <h1> aux titres secondaires <h2> et ainsi de suite.
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 19
 Mettre en forme du texte
L'alignement du texte : Les balises de titre et d’autres comme <p>, <hr> etc,
supportent un attribut "align" qui permet de modifier l'alignement horizontal du
Technologies web

texte. Il peut prendre les valeurs suivantes : left : aligné à gauche (par défaut), right :
aligné à droite, center : centré,et justify : justifié (aligné à droite et à gauche).
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 20
 Mettre en forme du texte
Modifier la police de caractère : Il est possible de modifier la police de caractère
d'un texte avec la balise <font>. Ce dernier n’aura aucun effet sans ses attributs:
Technologies web

 size permet de préciser la taille du texte allant de "1« à "7".

 face permet de préciser la police utilisée, par exemple "georgia", "times", etc..
 color permet de préciser la couleur du texte, par exemple : blue - green ….
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 21
 Mettre en forme du texte
Autres balises de mise en forme :Il existe d'autres balises de mise en forme
Technologies web

telles que:
 <p> Elle insère automatiquement des sauts de ligne avant et après le paragraphe
 <blockquote> se comporte comme <p> avec un décalage horizontal en plus.
HTML

 <pre>Texte pré formaté </pre> Pour reproduire un texte tel que vous l'avez saisi.
 <hr> pour afficher une Barre horizontale, elle peut avoir des attributs tels que : align
pour l’alignement , size détermine l’épaisseur, width pour la largeur et color pour la
couleur.
 <sup> pour mettre un mot en exposant  <I> met un texte en Italique.
 <S> pour barrer un texte.
 <sub> pour mettre un mot en indice
 <B> pour mettre un texte en Gras.
 <small> met un texte en plus petite taille.  <Big> pour mettre un texte en plus grande taille
 <u> Souligner un texte.  <Br/> pour retourner à la ligne
Département GI  <center> met un texte centre
Pr.: I. EL-FEDANY
[Link]@[Link] 22
 Mettre en forme du texte
Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 23
 Les listes déroulantes
Il est possible de faire des listes ordonnées <OL>, non ordonnées <UL>) ou liste
de définitions <DL>
Technologies web

<ol> (Ordered List), listes ordonnées, avec l'attribut type peut avoir les valeurs suivantes :
o type="1" pour une suite numérique.
HTML

o type="a" ou type="A" pour une suite alphabétique.

o type= "I" ou " i" pour une suite numérique en chiffres romains.
<ul> (Unordered List), listes non ordonnées, avec l'attribut type peut avoir les valeurs
suivantes :
o type="disc" pour un rond plein .
o type="circle" pour un rond vide.
o type= "square" pour un carré.
NB. : Dans Les balises <ol> et <ul> nous placerons autant de balises <li> ("list item") que
nous avons d'éléments dans notre liste et dans <DL > en utilse les balise <DT>
Département GI
("Definition Term ") et <DD> ("Definition Description ").
Pr.: I. EL-FEDANY
[Link]@[Link] 24
 Les listes déroulantes
Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 25
 Les liens hypertextes
l'utilisation de la balise < a > en html rend possible de passer d'une page à une autre, ou
d'un site à un autre, en cliquant sur des textes, placés entre <a> et </a>, qui seront
Technologies web

cliquables. Le chemin de la page à accéder doit être précisé dans l'attribut href
Notez bien que :
o Le nom de la page dans l'attribut href doit être en tout point identique au nom du appelé. N'oubliez
HTML

pas de préciser l'extension et de respecter la casse des caractères .

o Le nom du fichier ne doit comprendre aucun caractère spécial autre que les tirets.
o Si la page n'est pas située dans le même répertoire que la page qui l'appelle, il faut préciser le chemin
pour y accéder.
o l’attribut target="_blank", permet l'ouverture du lien dans une nouvelle fenêtre.
o Utilisez mailto : dans l'attribut href pour créer un lien qui ouvre le messagerie de l'utilisateur.
o Pour faire un appel au clic (smartphone) en utilise dans l’atribut href le mot [Link]
o Pour créer un lien de type ancre en utilise le symbole # devant le nom de l’identifiant, l'endroit vers
Département GI lequel le lien doit rediriger.
Pr.: I. EL-FEDANY
[Link]@[Link] 26
 Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 27
 Les images
On peut ajouter des images grâce à la balise < img >. Comme les balises «hr» et «br»,
elle ne peut avoir aucun contenu, ainsi, elle s'utilise avec les attributs suivants :
Technologies web

• src précise le chemin vers le fichier image à afficher.

• alt précise un texte qui s'affichera si l'image ne peut s'afficher.
HTML

• border permet de spécifier la largeur de la bordure de l'image (de 0 à n)

• width et height permettent de spécifier la largeur et la hauteur de l'image.
• align – Valeurs : left, bottom, middle, top, right
• hspace et vspace permettent respectivement de séparé l’image du texte ou autre
horizontalement et verticalement.

N. B.: Les fichiers images trop volumineux ralentissent les temps de chargement de site
web. Alors, pour réduire le poids des fichiers images, il est recommandé de les
enregistrer dans l'un des 3 formats d'optimisations suivants : jpg, gif, ou png.
Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 28
 Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 29
 Audio et Vidéo
Pour insérer les vidéo est les audio dans une page web, on aura besoin d’utiliser
respectivement deux nouvelles balises standard ont été créées en HTML5 : <video> et
Technologies web

<audio> avec les attribut suivants:

• scr: l’adresse du fichier audio ou vidéo
• controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
HTML

• width: pour modifier la largeur de l'outil de lecture.

• loop: l’audio sera jouée en boucle.
• autoplay: la lecture automatique du fichier audio et vidéo.
• preload: indique si l’audio ou vidéo 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 a façon de pré chargement.
 metadata: charge uniquement les métadonnées (durée, etc.).
 none: pas de pré chargement.
• height: détermine la hauteur du fichier vidéo
• poster: image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée, la
Département GI première image de la vidéo sera prise en compte par défaut
Pr.: I. EL-FEDANY
[Link]@[Link] 30
 Audio et Vidéo
Les formats audio : Pour diffuser de la musique ou n'importe quel son, il existe de
Technologies web

nombreux formats. La plupart d'entre eux sont compressés ce qui permet de réduire
leur poids comme MP3, AAC, OGG, WAV (à éviter :le fichier est très volumineux)…
Les formats vidéo : Le stockage de la vidéo est autrement plus complexe. On reconnaît
HTML

en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV…

N. B. :
• La compatibilité dépend des navigateurs. Pensez à consulter [Link] pour
connaître la compatibilité actuelle.
• On ne peut pas forcer le pré chargement, le navigateur qui décide.
• Les navigateurs mobiles ne pré chargent jamais les fichiers médias, d’où l’ajout des
contrôles sera déjà mieux.
• Le navigateur prendra automatiquement le format qu'il reconnaît. Il faut proposer
Département GI plusieurs versions du fichier média en utilisant la balise <source>.
Pr.: I. EL-FEDANY
[Link]@[Link] 31
 Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 32
 Les Tableaux:
La balise <table> est un conteneur très utilisé dans les pages web. Elle facilite la mise en
forme des informations grâce à son découpage en lignes et cellules complètement
Technologies web

paramétrables.
Corps du tableau :
On utilise les balises <table> </table> avec ses attribut :
HTML

• align – position (left, right, center) ,

• bgcolor – couleur de fond du tableau,
• border – bordure en pixel ,
• cellpadding – marge intérieure des cellules en pixel,
• cellspacing – espacement des cellules en pixel.
• width height – largeur et la heuteur en pixel ou %.
Titre du tableau :
Il se mettre entre les balises < caption > </ caption >

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 33
 Les Tableaux:
Ligne d'un tableau
On utilise les balises < tr > </ tr> avec ses attribut :
Technologies web

• align – alignement horizontal du texte (left, center, right),

• valign – alignement vertical du texte (top, middle, bottom),
• bgcolor – couleur de la ligne, et
HTML

• border – bordure en pixel.

Cellules d'un tableau

Il Les balises <th> </ th> sont utilisé pour les cellules de titre et pour les cellules de
données on utilise <td> </ td>, ses attributs sont :
• align – alignement horizontal du texte,
• valign – alignement vertical du texte,
• bgcolor – couleur de la cellule ,
• width height – largeur et la hauteur en pixel ou %.
• colspan, rowspan – fusionner colonnes et lignes respectivement.
Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 34
 Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 35
 Exercice 1
Ecrire le code html permettant de créer la page ci-dessous, avec les indications suivantes:
Technologies web

• Mettre le couleur de fond en cyan

• Le titre en h1, en rouge, italique et au centre de la page
• Une barre pour la séparation en bleu, de largeur 70%, l’épaisseur 3, et au centre
• Respecter la forme du texte
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 36
 Exercice 2
Ecrire le code html permettant de combiner les deux
Technologies web

types de liste :?
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 37
 Exercice 3
Reproduire en respectant la forme du tableau la page html suivant:
Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 38
 Exercice 4
Reproduire en html le tableau ci-dessous.
Technologies web
HTML

Exercice 5
Reproduire en html le résultat suivant.

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 39
 Création d’un formulaire
Un formulaire HTML permet de saisir et de transmettre des informations au serveur pour
Technologies web

les traiter. Un formulaire est déclaré grâce à la balise <form> dont on précisera
généralement 3 attributs :
o name, le nom que l'on souhaite donner au formulaire
HTML

o action, le chemin vers la page ou les données du formulaire seront envoyées.

o method, la méthode d'envoi des données qui est "POST" ou "GET" (voir cours PHP).

Exemple:
<form name="mon-formulaire" action="[Link]" method="get">
...
</form>

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 40
 Etiquette : balise label
Balise, <label>, qui permet de définir une étiquette pour indiquer au visiteur ce que doit
Technologies web

contenir le champ. L’attribut for prend la valeur de l’id du champ auquel il doit être lié.

Exemple:
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 41
 La balise <input>
La balise la plus célèbre d’un formulaire, il s'agit d'une balise orpheline (pas de </input>),
Technologies web

qui permet de placer un champ dont l’utilisateur lance une action ou garde une
information pour la envoyer au serveur, elle s'utilise essentiellement avec l’attribut type qui
défini le type de la balise et qui peut prendre plusieurs valeurs: text, radio, checkbox,
number, hidden, password, date, time, color, submit, reset etc. et à chaque type elle s’utilise
HTML

également avec les attribut suivants:

• L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
• L'attribut value permet de spécifier une valeur par défaut, c'est à dire que le champs
sera affiché pré-rempli.
• L'attribut required défini un champ obligatoire et si le champ est vide au moment de
l'envoi, qu'il doit impérativement être rempli.

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 42
 La balise <input>
Champ de texte simple: <input type= "text" … />
Technologies web

Ce champ permet de saisir un text simple. On peut ajouter les attributs suivants:

• L’attribut placeholder permet de renseigner un texte indicatif par défaut dans un champ
• L’attribut Size précise la largeur du champ
HTML

• L’attribut maxlenght définit la nombre maximum des caractères

Champ de saisie de type nombre : <input type= « number" … />
Ce champ permet de saisir un nombre entier : Le champ s'affichera en général avec des petites
flèches pour changer la valeur. On peut personnaliser le fonctionnement du champ avec les
attributs suivants:

• L'attribut max: valeur maximale autorisée. Ex: max=100

• L'attribut min valeur minimale autorisée,
Département GI • L'attribut step: c'est le « pas » de déplacement.
Pr.: I. EL-FEDANY
[Link]@[Link] 43
 La balise <input>
Champ de texte simple: <input type= " password" … />
Technologies web

Un champ de mot de passe se comporte comme un champ texte simple à la différence que les
caractères qu'on y saisi sont masqués:

Champ de saisie de type date : <input type= "date" … />

HTML

Selon la prise en charge du navigateur, un sélecteur de temps peut apparaître dans le champ de
saisie Un champ de date se comporte comme un champ texte. On trouve aussi différents types de
champs de sélection de date tels que :

• date: pour la date (30/07/2019 par exemple).

• time: pour l'heure (13:37 par exemple).
• week: pour la semaine.
• month: pour le mois .
Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 44
 La balise <input>
Cases à cocher : <input type= "checkbox " … />
Technologies web

Elles permettent à un utilisateur de sélectionner plusieurs d'options parmi un nombre de choix, en

précisant l'attribut type="checkbox", et pour afficher une case pré-cochée en précisant l'attribut
checked="checked".
HTML

Boutons radio : <input type= " radio" … />

Ils permettent à un utilisateur de sélectionner uniquement un choix parmi un nombre limité de
choix, en précisant l'attribut type="radio", ainsi on leur attribue la même valeur à l'attribut name.

Bouton d'envoi : <input type= " submit" valeur= " Envoyer" />
Il définit un bouton pour soumettre les données du formulaire à un gestionnaire de formulaire,
page précisée par l'attribut action du formulaire, ainsi , l'attribut value permet de spécifier le texte
qui sera affiché sur le bouton.
Bouton d'annulation : <input type= " reset" valeur=" Effacer" />
Département GI Il définit un bouton qui réinitialisera toutes les valeurs du formulaire à leurs valeurs par défaut
Pr.: I. EL-FEDANY
[Link]@[Link] 45
 Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 46
 La balise <input>
Bouton de type image : <input type="image" src= "[Link] " …. />
Il définit une image comme un bouton de soumission. Le chemin d'accès à l'image est spécifié dans
Technologies web

l'attribut src.
Champ de text de type Email : <input type="email" name= " monEmail" />
Un champ de mot de texte Email se comporte comme un champ texte simple à la différence que le
HTML

texte saisi comprend le caractère @ .

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 47
 La balise <textarea >
Champ de texte multi-ligne:
Technologies web

Pour un champ texte sur plusieurs lignes, Nous allons utiliser les balises <textarea> et
</textarea> avec les attributs suivants:
• name pour spécifier le nom de la variable qui sera envoyé.
• rows permet de préciser le nombre de lignes de la zone de texte.
HTML

• cols permet de préciser le nombre de caractère par ligne de la zone de texte

N. B. :pour mettre une valeur par défaut ou l’affichage pré rempli, il doit placer le texte entre
les balises <textarea> et </textarea>.

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 48
 Liste déroulante : La balise <select >
Les champs de sélection permettent de proposer une liste déroulante de choix, Nous allons utiliser
Technologies web

les balises <select> et </select> en spécifiant :

o l’attribut name qui est le nom de la variable qui sera envoyé.
o Entre les balises <select> et </select>, on peut placer autant de couple <option> et </option>
HTML

que nous avons de choix en précisant la valeur qui sera envoyé avec l'attribut value, et le texte
qui sera affiché pour l'utilisateur.
o L’attribut selected permet d’afficher l’un des champs d’options dès l’affichage du formulaire

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 49
 Frame ou cadre: La balise < frameset>
Elle permet de Diviser une fenêtre en cadres ou plusieurs zones appelées frames, les
Technologies web

balises sont peu nombreuses :

<frameset > : début de zone avec des fenêtres.
<frame src=" [Link]" >
<frame src=" [Link]" >
HTML

…
</frameset> : fin de zone avec des fenêtres.
Frames en lignes:
< frameset rows= " n , n% , * .." > : divise la zone en plusieurs fenêtres horizontales.
o n : valeur spécifie la hauteur de la ligne en nombre pixels,
o n% : valeur spécifie la hauteur en pourcentage de l’écran,
o * : la hauteur de la ligne prend la valeur restante
Frames en colonnes:
Département GI < frameset cols= " n , n% , * .." > : divise la zone en plusieurs fenêtres verticales
Pr.: I. EL-FEDANY
[Link]@[Link] 50
 N. B. :
o <frameset>…< /frameset> remplace <body>…</body>.
o border= "0" ou bien frameborder= "no" : supprimer les bordures selon navigateur.
Technologies web

o framespacing="0 " : enlever l’espace entre les cadres.

o bordercolor= "gray" définit le couleur du bordure du frame
Les attributs de < frame>:
HTML

o src : <frame src= " [Link]" > , définit l’url ou adresse de la page à afficher dans la fenêtre.
o name: <frame src= "[Link]" name= " menu" > , le nom de la fenêtre qui sera utilisé
comme cible d’un lien hypertexte.
o scrolling = " yes/no/auto ", il définit l’état de barre de défilement de la fenêtre.
L’attribut target:
c’est un attribut de lien qui permet de spécifier où ouvrir la nouvelle page liée lorsque l'utilisateur
clique sur le lien. Voici les valeurs couramment utilisées pour l'attribut target :
o "_self " : Ouvre le lien dans la même fenêtre ou le même onglet que la page actuelle.
o "_blank " _blank : Ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet,
o "_top " : Ouvre le lien sur toute la fenêtre du browser.
o " menu" : Nom de la fenêtre ou de frame
Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 51
 Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 52
 N. B. :
Technologies web

En HTML5, l'élément <frameset> n'est plus pris en charge.

Il a été déprécié au profit d'autres méthodes et des techniques modernes pour créer des
HTML

mises en page multifenêtres, telles que l'utilisation de CSS, Flexbox, pour la mise en page

flexibles et dynamiques, ou l'utilisation de balises sémantiques HTML5 telles que

<section>, <article>, <aside>, <header>, <footer> …

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 53
 Les balises sémantiques HTML5 sont conçues pour donner un sens et une structure au contenu
d'une page web, ce qui facilite la compréhension par les navigateurs, les moteurs de recherche et les
Technologies web

lecteurs d'écran. Voici quelques-unes des balises sémantiques les plus couramment utilisées en
HTML5 :

 <header> : Utilisé pour représenter l'en-tête ou la section d'introduction d'une page ou d'une
HTML

section de contenu.

 <footer> : Utilisé pour représenter le pied de page d'une page ou d'une section de contenu.
 <nav> : Utilisé pour représenter une section de navigation, telle qu'un menu de navigation
principal ou des liens de navigation.
 <article> : Utilisé pour représenter un contenu autonome et distinct qui pourrait être réutilisé
ou distribué séparément du reste de la page.

 <section> : Utilisé pour diviser le contenu d'une page en sections thématiques ou logiques.

 <aside> : Utilisé pour représenter du contenu qui est associé au contenu principal mais qui est
Département GI
considéré comme distinct ou secondaire, tel que des barres latérales ou des encadrés.
Pr.: I. EL-FEDANY
[Link]@[Link] 54
 Technologies web
HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 55
 Exercice 6 Exercice 7
Ecrire le code html qui reproduit Ecrire un questionnaire demandant le sexe, la tranche d'âge,
page suivante ? le système d'exploitation, les langages de programmation
Technologies web

connus, le niveau en HTML et les besoins de formation.

HTML

Département GI

Pr.: I. EL-FEDANY
[Link]@[Link] 56