UNIVERSITE MERCURE INTERNATIONAL

Matière :

TECHNOLOGIES WEB 

Enseignant :

Nom et Prénoms : Gomadje D. Wilfrid

Tél : +224612258057
Email : wgomadje@[Link]
Web maketeur, Funnel Builder, Formateur

Année Académique : 2022- 2023

 Plan du Cours :
A. Internet et le web
a) Généralités
b) Clients web
c) Vocabulaire
B. Le langage HTML
a) Présentation générale
b) Le corps d’un document
c) Formulaire HTML
 Généralité
 Les champs de saisie
 Les différentes variantes d’HTML
 Outils et référence
C. CSS
a) Définition et historique
b) Synthase de CSS3
 Principes
 Affichage du texte
 Mise en forme de la page
 Exemple
Sites Web adaptifs

Objectifs du cours de technologie web

  Découvrir la structure d’un site Web : URL, fonctionnement du modèle
client-serveur
 Comprendre et écrire une page Web dans un langage à balises normalisé
de description de contenus Savoir modifier les attributs de présentation
d’une page Web
 S’initier à l’utilisation avancée d’un navigateur Web
 Comprendre les notions de base de responsive design pour adapter un
contenu Web à un navigateur mobile

Internet et le Web :
a) Généralités :
Définition : 
Internet : Ensemble de réseaux mondiaux interconnectés qui permet à des
ordinateurs et à des serveurs de communiquer efficacement au moyen d'un
protocole de communication commun (IP). Ses principaux services sont le Web,
le FTP, la messagerie et les groupes de discussion.
Web : Le World Wide Web, la Toile mondiale ou la Toile, est un système
hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un
navigateur, des pages accessibles sur des sites. L’image de la toile d’araignée
vient des hyperliens qui lient les pages web entre elles.
Différence entre le Web et Internet
 Internet : réseau mondial d’ordinateurs permettant aux utilisateurs de
communiquer (courrier électronique), de publier des informations (Web),
de transférer des données (FTP), de travailler à distance (telnet et ssh) . . .
 Web : un aspect d’Internet.
b) - Client Web :
Le client et le serveur communiquent via un protocole de communication.
Les protocoles clients-serveurs se situent au niveau de la couche application du
modèle OSI.
Plusieurs clients peuvent se connecter à un même serveur.
Serveur (Apache, Microsoft IIS. . .) Un serveur est un ordinateur (et/ou un
programme informatique) offrant un service ou une ressource sur un réseau. Il
 Demande au serveur des informations
  Affiche des pages pour l’utilisateur
Client (navigateur : Internet Explorer, Firefox, Safari. . .) : Un client est un
programme informatique contactant un serveur via un réseau, afin de bénéficier
d’un service ou d’une ressource. Il
 Reçoit en permanence les requêtes des clients
 Renvoie les documents correspondants

L’analogie du boutiquier :

Client Vendeur/
Vendeuse

Etape1 :
Client : Bonjour, J’aimerais acheter une baguette de pain.

Baguette de pain ?
Vendeur/
Client
Vendeuse

Etape 2 :

Préparation du café :
Baguette de pain ? (Baguette en préparation)

Client Vendeur/
Vendeuse
Etape3 :

Baguette de pain ?

Client Vendeur/V
endeuse

Baguette de pain

c) - Vocabulaire :
IP (Internet Protocol)
 Adressage de machines et routage sur Internet
 Deux versions du protocole IP utilisées sur Internet : IPv4 (très répandu)
et IPv6 (support encore un peu expérimental)
 IPv4 : Adresses de 4 octets affectées à chaque ordinateur, p. ex.,
[Link]. Des gammes de telles adresses sont données aux diverses
institutions (fournisseurs d’accès à Internet, universités, etc.), pour les
affecter comme elles le souhaitent.
 Problème : seulement 232 adresses possibles (en fait, un grand nombre
d’entre elles ne peut pas être données à de nouveaux hôtes, pour diverses
raisons). Cela signifie que beaucoup de machines connectées à Internet
n’ont pas d’adresse IPv4 et une forme de traduction d’adresse (network
adresse translation, NAT) est nécessaire.
 IPv6 : Adresses de 16 octets ; espace d’adressage beaucoup plus grand !
Les adresses ont la forme suivante : 2001 : 660 :330f :2::18 (soit
[Link]). Chacun des appareils
connectés à l’Internet peut avoir sa propre adresse IP !
Protocole : Ensemble normalisé de règles décrivant la manière de transmettre
des informations, par exemple sur un réseau comme Internet entre un client et un
serveur.
HTTP : HyperText Transfer Protocol, le plus utilisé des protocoles de
communication sur le World Wide Web. Permet à un client Web d’indiquer
quelle page il veut obtenir, et au serveur Web de lui répondre en lui donnant
cette page.
TCP (Transmission Control Protocol)
 L’un des deux protocoles de transport utilisés sur IP, avec UDP (User
Datagram Protocol)
 Contrairement à UDP, fournit une transmission fiable des données
(acknowledgments)
 Les données sont divisées en petits datagrammes qui sont envoyés sur le
réseau, et éventuellement réordonnés à destination
 Comme UDP, chaque transmission TCP indique un numéro de port source
et destination (entre 0 and 65535) pour la distinguer du reste du trafic
 Un client sélectionne usuellement un numéro de port aléatoire pour établir
une connexion à un numéro de port fixe du serveur
 Le numéro de port du serveur identifie de manière conventionnelle un
protocole d’application au-dessus de : 22 pour SSH, 25 pour SMTP, 80
pour HTTP, 110 pour POP3. . .
DNS (Domain Name System)
 Les adresses IPv4 sont difficiles à mémoriser et un service donné (p.
ex., un site Web) peut changer d’adresses IP (p. ex., nouveau
fournisseur d’accès à Internet)
 Problème accentué pour les adresses IPv6 !
 DNS : un protocole basé sur UDP/IP pour associer des noms lisibles
par les humains (p. ex., [Link], [Link]) à des
adresses IP
 Noms de domaines hiérarchiques : com est un domaine de niveau
principal (top-level domain, TLD), [Link] un sous-domaine de
celui-ci, etc.
 Résolution hiérarchique de nom de domaine : serveurs racines avec
des IP fixes savent qui est responsable des TLDs, les serveurs en
charge d’un domaine savent qui est responsable d’un sous-domaine,
etc.
 Rien de magique dans [Link] : juste un sous-domaine de
[Link].
URL
 URL : Uniform Resource Locator
 Identifie l’endroit où se trouve une ressource sur le Web.
 Dans le cas du Web, ressource = document ou fragment
 [Link] :80/reseau/secu/[Link] #intro protocole machine
port répertoire fichier fragment
  Principaux protocoles utilisés dans les URL :
 http, https deux protocoles du Web, sans et avec chiffrement et
authentification ;
 ftp protocole de transfert de fichier, parfois utilisé sur le Web pour
le téléchargement de gros fichiers ;
 mailto pseudo-protocole dénotant une adresse e-mail.
 Port par défaut : 80 pour HTTP, 443 pour HTTPS

B- Le langage HTML :
Présentation générale:
Introduction générale (1/2) :
❍ Langage à balises
 Une balise est une instruction de mise en forme
 Une balise permet de structurer le contenu d’une page Web
❍ Navigateur
 Les navigateurs recherchent les balises et les interprètent pour afficher
une page Web
 Text ❍URL
 Format de nommage universel pour désigner une ressource sur Internet
 Un document HTML peut être accédé grâce à une URL.
❍ Validation
 Un document HTML doit toujours être validé : [Link]
❍ Balises en paires
 Balise d’ouverture + texte + balise de fermeture
 Exemple :
 ❍Balises orphelines
 Ne contiennent pas de texte, n’ont pas de balise de fermeture
 Utilisées pour insérer un élément à un endroit précis de la page ●
Exemple :
❍ Balises avec attributs
 Une balise peut avoir des attributs avec ou sans valeurs
❍ Code minimum
<!DOCTYPE html>
 <html>
<head>
<meta charset="utf-8" />
<title>Ceci est le titre de ma 1ère page Web</title>
</head>
<body>
Ceci est le contenu de ma 1ère page Web
</body>
</html>
❍ Balises de base
 < !DOCTYPE > : type du document.
 <!DOCTYPE html > : Document de type HTML5
 <html></html>: balise principale englobant le contenu de la page Web
 <head></head>: en-tête du document
 <meta />: permet de rajouter d’autres informations concernant le
document.
Balise non obligatoire. Cette balise peut avoir plusieurs attributs tels que :
 charset : type d’encodage de la page, important pour caractères spéciaux
(ex. <meta charset="utf-8" />)
 name : a généralement la valeur author, description ou keywords. S’il
existe il est suivi de l’attribut content.
 content : bref description de ce qui est indiqué dans name.
 <title></title>: titre de la page Web
 <body></body>: contenu principal de la page Web
❍ Balises de regroupement sans sémantique
 <div></div> : bloc de texte – généralement utilisé pour découper un
document
en bloc. On verra son utilité plus tard avec CSS.
 <span></span> : bloc plus petit - généralement utilisé pour découper un
paragraphe en sous-bloc.
❍ Balises de regroupement avec sémantique
  <article> : pour indiquer que c’est l’article d’un blog ou d’un journal
 <section> : section de contenu – utilisé si l’on a plusieurs sections d’un
document. Exemple plusieurs chapitres
 <nav> : liens de navigation
 <header> : en-tête de la page
 <footer> : pied de page
 <aside> : pour l’annexe d’un article
 <details> : pour donner plus de détails
 <summary> : utilisé pour écrire le résumé de l’article
Balises Textuelles (1/2)
❍ Balises titres/sous-titres
 <hn></hn> : affiche un en-tête de niveau n et saute une ligne
 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : h1 étant le niveau le titre le plus
haut et h6 le sous-titre le plus bas
❍ Balises pour un bloc de texte
 <p></p> : paragraphe
 <br> ou <br /> : saut de ligne
 <pre></pre> : texte pré-formaté
 <code></code> : portion de code
 <dfn></dfn> : définition
 <samp></samp> : exemple
Balises Textuelles (2/2)
❍ Balises pour mise en valeur
 <em></em> : mettre texte italique
 <strong></strong> : mettre texte gras
 <mark></mark> : surligner texte
❍ Autres balises
  <abbr></abbr> : abréviation
 <address></address> : contenu de type adresse email
 <blockquote></blockquote>: référence à un texte écrit dans un autre
document
 <cite></cite> : citation
Balises Listes (1/3)
❍ Liste non ordonnée
● <ul></ul> : indique que c’est une liste non ordonnée
● <li></li>: définit les différents éléments de la liste
Exemple :
<ul>
<li>1er élément de la liste</li>
<li>2nd élément de la liste</li>
</ul>
❍ Liste ordonnée
 <ol></ol> : indique que c’est une liste ordonnée
 <li></li>: définit les différents éléments de la liste
Exemple :
<ol>
<li>1er élément de la liste</li>
<li>2nd élément de la liste</li>
</ol>
Balises Listes (2/3)
❍ Liste de définitions
 <dl></dl> : indique que c’est une liste de définitions
 <dt></dt>: indique le terme à définir
 <dd></dd> : donne la définition du terme
Exemple :
<dl>
<dt>1er terme à définir</dt>
<dd>définition du 1er terme</dd>
<dt>2ème terme à définir</dt>
<dd>définition du 2ème terme</dd>
</dl>
Balises Listes (3/3)
❍ Listes imbriquées
Exemple:
<ol>
<li>1er élement de la liste
<ul>
<li>1er élement de la liste</li>
<li>2nd élement de la liste</li>
</ul>
</li>
<li>2nd élement de la liste</li>
</ol>
Balises Hypertext
❍ Lien vers une page Web
 Lien vers une autre page Web locale
<a href="mon_Autre_Page">une autre page de mon site</a>
 Lien vers une autre page Web
<a href="[Link] de l’université de Nice Sophia</a>
❍ Créer un ancre pour référencer une partie dans une page
 Création d’un ancre pour donner un identifiant à la partie à référencer
  <p id="nom de l’ancre">Titre de mon de ancre</p>
 La balise <p>peut être remplacée par une balise titre comme <h1>ou
<h2>,…
❍ Lien vers une partie dans une page Web
 Lien vers une partie de la page Web courante
<a href="#nom de l’ancre">Titre</a>
 Lien vers une partie d’une page Web locale
<a href="nom_Fichier_Local#nom de l’ancre">Titre</a>
 Lien vers une partie dans une autre page Web
<a href="http=//courses/[Link]#nom de l’ancre">Titre</a>
Balises Tables (1/4)
❍ Tableau simple
Tableau se construit ligne par ligne. Chaque ligne doit contenir la liste des
cellules
 <table></table> : indique que ce qui suit est un tableau
 <caption></caption> : indique titre du tableau
 <tr></tr> : indique que c’est une ligne du tableau
 <th></th> : indique que c’est l’en-tête du tableau (1ère ligne du tableau)
 <td></td> : indique que c’est une cellule/case du tableau
❍ Remarque
 Pour ajouter un case/cellule vide, utiliser : &nbsp;
Balises Tables (2/4)
❍ Tableau simple
Exemple :
<table>
<caption>Liste des enseignants du département R&T</caption>
 <tr>
<th>Nom Enseignant</th>
<th>Matière enseignée</th>
</tr>
<tr>
<td>Chagnon</td>
<td>Anglais</td>
</tr>
<tr>
<td>Bouché</td>
<td>Communication</td>
</tr>
</table>
Balises Tables (3/4)
❍ Tableau structuré
Concerne les tableaux complexes
Division en 3 parties: en-tête, corps et pied du tableau
 <thead></thead> : indique que c’est l’en-tête du tableau
 <tbody></tbody>: indique que c’est le corps tableau
 <tfoot></tfoot> : indique que c’est le pied du tableau
 <th></th> : indique que c’est l’en-tête du tableau (1ère ligne du tableau)
 <td></td> : indique que c’est une cellule/case du tableau
❍ Fusion de cellules
 Fusion Horizontale : fusion de colonnes en utilisant colspan
 Fusion Verticale; fusion de lignes en utilisant rowspan
Balises Tables (4/4)
❍ Tableau structuré
Exemple:
<table>
<tr>
<th>Nom Enseignant</th>
<th>Matière enseignée en DUT 1</th>
<th>Matière enseignée en DUT 2</th>
</tr>
<tr>
<td>Boudaoud</td>
<td>Algo</td>
<td>I5</td>
</tr>
<tr>
<td>Chagnon</td>
<td colspan="2">Anglais</td>
</tr>
</table>
Balises Images
❍ Images
Une image doit être contenue dans un paragraphe
● Format : jpeg, png, gif
Exemple : <img src="MesPhotos/[Link]" alt="MaPhoto en
Randonnée"
height="31" width="88” title= Randonnée dans le mercantour en Mai
2010/>
 <img /> : indique que l’on va insérer une image
 src : indique source de l’image (i.e. où se trouve l’image)
 alt : indique un texte alternatif pour décrire l’image – OBLIGATOIRE
  height et width : hauteur et largeur de l’image - Non OBLIGATOIRE
 title : affiche une bulle d’aide - Non OBLIGATOIRE
Balises Figures
❍ Figures
Une Figure peut correspondre à une image, un code source, une citation,…
 <figure></figure>: indique qu’il y a une figure
 <figcaption></figcaption> : titre de la figure
Exemple pour une image
<figure>
<img src="images/[Link]" alt="Bloc-Notes" />
<figcaption>Le logiciel Bloc-Notes<figcaption>
</figure>s
Balises Audio (1/2)
❍ Balise de base
 <audio></audio> : indique l’insertion d’un élément de type audio
❍ Attribut de base
 src : source de l’audio
❍ Exemple
 <audio src="mon_Morceau_Audio.mp3"></audio>
❍ Autres attributs
 controls : indique qu’il faut la barre de défilement + boutons Lecture &
Pause
 loop : indique de jouer le morceau audio (ex. musique) en boucle
 autoplay : indique que le morceau audio (ex. musique) démarrera dès le
début
 preload : indique si le morceau audio sera pré-chargé dès le début
 none : non
  auto : le choix est laissé au navigateur. C’est la valeur par défaut
 metadata : ne seront que les métadonnées telles que: la durée, etc..
Balises Audio (2/2)
❍ Balise non supportée par le navigateur
 Si <audio> non supporté par le navigateur, il faut mettre un message
 <audio src= "mon-Morceau_Musique.mp3" controls >Version du
navigateur ne supporte pas cette balise</audio>
 Message affiché par le navigateur si problème mais non lu par navigateur
récent
❍ Format audio non supporté par le navigateur
 Si format audio non supporté par le navigateur, il faut préciser d’autres
formats,
en rajoutant la balise <source>
<audio controls>
<source src= "mon-Morceau_Musique.mp3" />
<source src= "mon-Morceau_Musique.ogg" />
</audio>
Balises Vidéo (1/2)
❍ Balise de base
 <video></video> : indique l’insertion d’un élément de type vidéo
❍ Attribut de base
 src : source de la vidéo
Exemple
<video src= "ma_Video.mp4"></video>
❍ Autres attributs
 poster : indique l’image à afficher en attendant que la vidéo soit chargée
 controls : indique qu’il faut la barre de défilement + boutons Lecture &
Pause
  width : indique la largeur du lecteur vidéo si l’on veut la modifier
 height : indique la hauteur du lecteur vidéo si l’on veut la modifier
 loop : indique de jouer la vidéo en boucle
 autoplay : indique que la vidéo démarrera dès le début
 preload : indique si la vidéo sera préchargée dès le début
 auto : le choix est laissé au navigateur. C’est la valeur par défaut.
 none : non
 metadata : ne seront que les métadonnées telles que: la durée, taille, etc..
Balises Vidéo (2/2)
❍ Balise non supportée par le navigateur
 Si <video> non supporté par le navigateur, il faut mettre un message
 <video src= "mon-fim.mp4" controls poster=”mon_Image_Debut.jpg"
width=“800">Version du navigateur ne supporte pas cette balise</video>
 Message affiché par le navigateur si problème mais non lu par navigateur
récent
❍ Format audio non supporté par le navigateur
 Si format vidéo non supporté par le navigateur, il faut préciser d’autres
formats,
en rajoutant la balise <source>
 <video controls>
<source src= "mon-fim.mp4" />
<source src= "[Link]" />
<source src= "[Link]" />
</video>
Balises formulaires
❍ Objectif
 Permettre aux utilisateurs d’une page Web de fournir des informations en
u Tapant le texte, sélectionnant des options, validant des boutons, etc.
 Ces balises ne permettent pas de traiter les résultats et informations saisies
u Cela sera fait en utilisant un langage comme PhP
❍ Balise de base pour création d’un formulaire
 <form></form> : indique que l’on va insérer un formulaire
❍ Attributs de base
 method : indique comment envoyer les informations
u post : méthode la plus utilisée
u get : moins utilisée + limitée à 255 caractères
 action : indique l’adresse de la page ou du programme qui va traiter les
informations. La page chargée lorsque l’utilisateur aura appuyé sur le bouton
d’envoi du formulaire
Zones de texte (1/4)
❍ Types de zone de texte
 Zone de texte courte : pour saisir une ligne
 Zone de texte longue : pour saisir un paragraphe/plusieurs lignes
❍ Balise pour zone de texte monoligne
 <input /> : indique que l’on va créer une zone de texte monoligne
 <label></label> : indique le libellé de la zone de texte
❍ Attributs pour zone de texte monoligne
 type : indique le type des informations saisies (ex. text)
 name : nom de la zone de texte
 id : identifiant de la zone de texte pour lier le label à la zone de texte
 for : aura la même valeur que id de la zone de texte pour lier le label
 size : taille du champ si l’on veut l’agrandir
 maxlength : nombre limite de caractères
  value : valeur par défaut si l’on veut mettre une valeur initiale
 placeholder : explication/exemple concernant le contenu du champ
Zones de texte (2/4)
Exemple
<p> On peut mettre du texte avant le formulaire</p>
<form method="post" action= "page_de_Traitement.php">
<p> On peut mettre du texte dans le formulaire</p>
<p>
<label for="nom"> Votre Nom ></label>
<input type="text" name="nom" id="nom"/>
<br />
<label for="prenom"> Votre prénom></label>
<input type="text" name="prenom" id= "prenom" placeholder="prenom
sur 8 let." size="20" maxlength="8" />
</p>
</form>
<p> On peut mettre du texte après le formulaire</p>
Zones de texte (3/4)
❍ Balise pour zone de texte multilignes
 <textarea></textarea>: indique que l’on va créer une zone de texte
multilignes
 <label></label> : indique le libellé de la zone de texte
❍ Attributs pour zone de texte multilignes
 name : nom de la zone de texte
 id : identifiant de la zone de texte pour lier le label à la zone de texte
 for : aura la même valeur que id de la zone de texte pour lier le label
 rows : nombre de lignes de texte qui seront affichées
  cols : nombre de colonnes
❍ Remarque
Pour mettre du texte par défaut dans la zone de texte, il faut l’écrire après la
Zones de texte (4/4)
Exemple
<form method="post" action= "page_de_Traitement.php">
<p>
<label for="cours">Pourquoi voulez-vous suivre le cours de Java?
></label>
<br />
<textarea name="cours"id= "cours" rows="20" cols="8">
Expliquez en quelque lignes pourquoi vous voulez suivre de cours de
Java ?
</textarea>
</p>
</form>
Autres types de zone de texte
❍ Autres valeurs pour l’attribut « type »
 type="password" : pour cacher le texte tapé pour un mot de passe
 type="email" : pour saisir une adresse email
 type="url" / type="tel" : pour saisir une URL / un numéro de téléphone
 type="search" : pour dire que c’est un champ de recherche
 type="color" : pour saisir une couleur
 type="date" / type="time" : pour saisir une date / un horaire
 type= "datetime" / type= "datetime-local" : pour date et heure avec
décalage
horaire / sans décalage horaire
 type="week" / type= "month" : pour saisir une semaine / un mois
❍ Autres valeurs pour a gestion des nombres
 type="number" : pour saisir un nombre entier
 type="range" : pour sélectionner un nombre entier avec une barre
horizontale et
un curseur
 min="" / max="" : pour indiquer une valeur minimale / une valeur
maximale
 step="" : pour indiquer un « pas » de déplacement (ex. de 1 en 1 ou 2 en
2) Balises pour l’envoi
❍ Balise & attributs
 Mettre balise <input suivie des attributs ci-dessous, puis refermer />
 type= "submit" : pour créer le bouton d’envoi. Lorsque l’utilisateur
cliquera
dessus, les données du formulaire seront traitées par la page indiquée dans
le champ action du formulaire.
 type="reset" : pour remettre à zéro le formulaire
 type= "image" : idem que submit mais représenté par une image, rajouter
src
 value="" : pour donner un nom au bouton (ex.: Envoyer)
❍ Exemple
<input type= "submit" value= "envoyer" />Autres balises & Attributs
❍ Attributs « Required » et « Autofocus »
 required : pour indiquer qu’un champ est obligatoire
 <input type="text" name="login" id="login" required/>
 autofocus : pour indiquer dans quel champ mettre le curseur lorsque la
page sera chargée
 <input type="text" name="login" id="login" autofocus/>
❍ Gestion des options
  Cases à cocher
 Zones d’options
 Listes déroulantes
Balises pour options (1/3)
❍ Cases à cocher
 Mettre balise <input type= "checkbox" name= "leNom" id= "leNom"/>
 Ajouter à la suite la balise <label for="leNom">intitulé de la case à
cocher </label>
 Pour cocher une case par défaut utiliser l’attribut checked
 <input type= "checkbox" name= "leNom" id= "leNom" checked/>
❍ Zones d’option
 Pour sélectionner un choix en utilisant des boutons radio
 Mettre balise <input type="radio" name="horaire" value="avant 8h"
id= "avant 8h"/>
 Ajouter à la suite, la balise <label for="avant 8h">Avant 8h</label>
 Ce type "radio" est normalement utilisé pour le même type d’options. Par
exemple pour choisir une tranche horaire, une tranche d’âge, etc…
 Si l’on a plusieurs groupes utilisant les boutons radio, mettre la même
valeur pour l’attribut name
Balises pour options (2/3)
❍ Liste déroulante simple
 Pour sélectionner un choix en utilisant une liste déroulante
 Mettre la balise <label for= "dept">Votre département</label>
 Ajouter la balise <select name="dept" id="dept">
 Ajouter à la suite, la balise <option value="06"></option>
 Puis fermer la balise </select>
 Mettre attribut selected si l’on veut sélectionner une option par défaut
<form method="post" action= "page_de_Traitement.php">
<p>
<label for= "dept">Votre département</label><br />
<select name="dept" id="dept">
<option value="06" selected>Alpes maritimes</option>
<option value="83">Var</option>
<option value="05">Hautes alpes</option>
</select>
</p>
</form>
Balises pour options (3/3)
❍ Liste déroulante plus complexe
 Pour regrouper des options à l’intérieur de la même liste déroulante
 Ajouter la balise <optgroup><optgroup>, en plus des balises précédentes
<form method="post" action= "page_de_Traitement.php">
<p>
<label for= "dept">Votre département</label><br />
<select name="dept" id="dept">
<optgroup label=”Provence-Alpes-Côte d’Azur">
<option value="06">Alpes maritimes</option>
<option value="83">Var</option>
</optgroup>
<optgroup label=”Rhône- Alpes">…..</optgroup>
</select>
</p>
</form>
Conclusion
❍ Balises
 Toute balise ouverte doit être fermée, excepté certaines balises
 Ce cours permet de
Créer des pages Web
Insérer de l’audio et de la vidéo
Gérer des formulaires
 Les navigateurs ne gèrent pas forcément tous les formats audios et vidéo
 Les balises définies pour la création des formulaires ne permettent pas de
traiter es informations saisies ou sélectionnées via le formulaire.
 Les nouvelles balises définies par HTML5 ne sont pas interprétées par les
anciens navigateurs
 HTML5 permet également de gérer la géolocalisation.
 Ce cours est une introduction à HTML5 + une sorte de « boîte à outils »
 Pour apprendre à créer des pages Web en HTML5, il ne vous reste plus
qu’à créer vos propres pages Web et à vous entraîner !!!

C- Le langage CSS :
a-Définition et historique
Cascading Style Sheets (CSS) est un langage de programmation qui vous permet
de déterminer la design des documents électroniques. À l’aide de simples
instructions, présentées dans des codes sources clairs, les éléments de la page
Web comme la mise en page, la couleur et la police peuvent ainsi être modulés à
souhait. Grâce aux feuilles de style en cascade, la structure sémantique et le
contenu du document restent totalement intacts. CSS a été lancé au milieu des
années 90 et est à présent considéré comme le langage de feuilles de style
standard sur le World Wide Web.
b-Objectifs
L’un des objectifs majeurs des feuilles de style CSS est de séparer la structure
d’un document de ses styles de présentation.
c-Avantages :
 La structure du document et la présentation peuvent être gérées dans des
fichiers séparés.
 La conception d’un document se fait dans un premier temps sans se
soucier de la présentation, ce qui permet d’être plus efficace.
 Dans le cas d’un site web, la présentation est uniformisée : les documents
(pages HTML) font référence aux mêmes feuilles de styles. Cette
caractéristique permet de plus une remise en forme rapide de l’aspect
visuel.
 Un même document peut donner le choix entre plusieurs feuilles de style,
par exemple une pour l’impression et une pour la lecture à l’écran.
 Le code HTML est considérablement réduit en taille et en complexité,
puisqu’il ne contient plus de balises ni d’attributs de présentation.
d- Syntaxe CSS
Jeu de règles : Un jeu de règles (qualifié aussi de "règle") se compose d’un
sélecteur suivi par un bloc de déclaration délimité par des accolades ({}). Une
déclaration est constituée d’une propriété, suivie du caractère deux-points (:)
puis d’une valeur.
NB : Les multiples déclarations qui se rapportent à un même sélecteur sont
séparées par des points-virgules (;).

e- Propriétés et valeurs
Les sélecteurs : Un sélecteur est un motif de reconnaissance permettant
d’appliquer un style aux éléments de l’arbre du document HTML.
 o À tous les éléments de la page : le sélecteur universel * agit sur tous les
éléments HTML.
* { color: #ff0000; } /* pour définir une couleur rouge par défaut */
o – À toutes les instances d’un élément : les sélecteurs de type agissent sur
un type d’élément HTML.
o /* pour définir une couleur bleue pour tous les textes des paragraphes */
p { color: #0000ff; }
o – À différents éléments simultanément : le regroupement de sélecteurs de
type
/* pour définir une couleur marron pour tous les titres de niveau 3, 4, 5 et
6 */
h3,h4,h5,h6 { color: brown; }
o – À certaines instances d’un élément : les sélecteurs de classe
/* pour définir une couleur verte pour les textes de certains paragraphes
(ceux de la classe .vert) */
[Link] { color: #008000; }
Les caractéristiques de style sont exprimées sous forme de couples propriété :
valeur. Les propriétés sont libellées à l’aide de mots-outils anglais tels que «
width » (largeur), « font-size » (taille de la police de caractères), ...

Cette table résume la syntaxe du sélecteur de CSS2 :

Principes techniques
Cascade de CSS
Les feuilles de style ont trois origines différentes :
– L’auteur : produit des feuilles de style pour un document source en y étant
incorporées ou reliées à celui-ci.
– L’utilisateur : peut être capable d’indiquer une information de style pour un
document particulier.
– L’agent utilisateur (le plus souvent désigne le navigateur) : l’agent utilisateur
conforme doit appliquer sa feuille de style par défaut avant toutes les autres
feuilles de style d’un document.
 La cascade de CSS définit un ordre de priorité, ou poids, pour chaque règle de
style. Les règles des feuilles de style de l’auteur ont, par défaut, plus de poids
que celles de l’utilisateur. Au contraire, l’ordre de priorité est inversé pour les
règles " ! important". Les règles d’un auteur et d’un utilisateur sont prioritaires
sur celles de la feuille de style par défaut de l’agent utilisateur (le navigateur).
Ancêtres, Parents, Enfants et Frères Chaque document HTML est toujours
composé de conteneurs. Ceux-ci peuvent être ancêtres, parents, enfants ou frères
:
 Un élément Ancêtre est un élément qui contient un élément ou une
hiérarchie d’éléments.
 Un bloc Parent est un élément contenant directement un autre bloc. Par
exemple, un DIV contenant un paragraphe P. Attention : si ce paragraphe
contient lui-même des éléments (par exemple STRONG), DIV ne sera
pas Parent de l’élément STRONG mais uniquement son Ancêtre. Le
Parent est donc l’Ancêtre immédiat.
 Un bloc contenu directement dans un autre bloc est dit Enfant de cet
élément. Par exemple, ici les éléments LI sont enfants de leur conteneur
UL.
 Les éléments ayant le même élément Parent sont appelés Frères.
Notion d’héritage
Les éléments enfants héritent de certaines valeurs de leurs éléments
parents dans l’arbre du document. Chacune des propriétés définit si elle
est héritée, ou non.
Par exemple ici, tous les descendants de l’élément BODY auront la
valeur de couleur ’black’, la propriété ’color’ étant héritée :
BODY { color: black; }
Flux normal
Le flux normal (ou courant) d’un document peut se définir comme étant
le comportement naturel d’affichage des éléments d’une page web.
Autrement dit, les éléments s’affichent dans l’ordre où ils sont déclarés
dans le code HTML : verticalement, commençant en « haut » de l’écran
pour aller jusqu’en « bas », et horizontalement de gauche à droite, sur la
totalité de l’espace disponible et nécessaire en largeur comme en hauteur.
On distinguera deux groupes d’éléments :
  Les éléments de type block (div, p, h1, h2, h3, h4, h5, h6, ul, ol,
li, dl, dd, table, blockquote, pre, address, etc.)
 Les éléments de type inline (span, a, img, span, em, strong, cite,
code, abbr, etc.) Un élément de type bloc (block) se différencie
d’un élément de type en ligne (inline) sur les principaux points
suivants :
 Il occupe la totalité de la largeur de son conteneur
 Il permet l’attribution de marges verticales
 Il permet la modification de sa hauteur et largeur Sauf
exceptions, les éléments de type en ligne n’occupent que la place
minimum nécessaire à leur contenu.
Les dimensions des boîtes
Chaque boîte possède une aire de contenu (un texte, une image, etc.)
entourée en option par une aire d’espacement (padding), une aire de
bordure (border) et une aire de marge (margin).
Les principales propriétés CSS à prendre en compte sont :
1. La largeur : ’width’
2. La hauteur : ’height’
3. Les marges : ’margin’
4. L’espacement : ’padding’
5. Les bordures : ’border’
6. La taille des caractères : ’font-size’
7. L’interlignage : ’line-height’
8. L’interlettrage (espacement entre les caractères du texte)
’letter-spacing’
9. L’espace-mot : ’word-spacing’
Pour la taille des caractères (propriété CSS font-size), il sera conseillé
d’utiliser :
 Un pourcentage, pour signifier que le texte contenu dans cet
élément aura une taille de x% de la taille du texte de son élément
parent.
  une valeur en em, pour signifier que le texte contenu dans cet
élément aura une taille de x fois la taille du texte de son élément
parent.
Position
La propriété position permet de gérer les positions lorsque les possibilités du
flux normal ne suffisent plus.
Le positionnement relatif (position : relative) permet d’inscrire un contenu en
flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu
précédant et suivant n’est pas affecté par ce déplacement, ce qui peut donc
entraîner des chevauchements.
Le positionnement absolu (position : absolute) « retire » totalement du flux le
contenu concerné : sa position est maintenant déterminée par référence aux
limites du conteneur (c’est à dire le plus souvent la fenêtre du navigateur). Un
élément bénéficiant d’une position absolue ne bougera pas de sa position initiale
tant que l’une des propriétés top, bottom, left ou right n’a pas été précisée ; il
s’agit d’ailleurs là d’un comportement applicable à toutes les positions.
NB : Un élément positionné en absolu se réfère non pas à son parent direct, mais
au premier ancêtre positionné qu'il rencontre. L'élément, n'étant plus dans le ux
normal, perd une de ses caractéristiques majeures qui est celle de recouvrir la
totalité de la largeur disponible de l'élément parent.
Le positionnement absolu (position : absolute) « retire » totalement du flux le
contenu concerné : sa position est maintenant déterminée par référence aux
limites du conteneur (c’est à dire le plus souvent la fenêtre du navigateur). Un
élément bénéficiant d’une position absolue ne bougera pas de sa position initiale
tant que l’une des propriétés top, bottom, left ou right n’a pas été précisée ; il
s’agit d’ailleurs là d’un comportement applicable à toutes les positions.
NB : Un élément positionné en absolu se réfère non pas à son parent direct, mais
au premier ancêtre positionné qu'il rencontre. L'élément, n'étant plus dans le ux
normal, perd une de ses caractéristiques majeures qui est celle de recouvrir la
totalité de la largeur disponible de l'élément parent.
Le positionnement fixe (position : fixed) s’apparente au positionnement
absolu, à l’exception des points suivants : – Lorsque le positionnement est
précisé (top, bottom, left ou right), l’élément est toujours positionné par rapport
à la fenêtre du navigateur – L’élément est fixé à un endroit et il ne bouge plus de
la position initialement définie, même lors de la présence d’une barre de
défilement.
Les blocs positionnés en "absolu" ou "xé" sortent du ux naturel et ils ne sont
alors plus dépendant des éléments frères. Pour se placer, un tel bloc se réfère non
pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre. La
position statique (position : static) correspond simplement à la valeur par défaut
d’un élément du flux. Il n’y a que peu d’intérêt à la préciser, si ce n’est dans le
but de rétablir dans le flux un élément qui serait positionnée hors du flux.
Boîte flottante
Une boîte flottante est retirée du flux normal, et placée le plus à droite (float :
right) ou le plus à gauche (float : left) possible dans son conteneur. Le contenu
suivant cette boîte flottante s’écoule le long de celle-ci dans l’espace laissé libre.
On peut empêcher ce comportement avec la propriété clear.