HTML CSS

Programmation Web
07/10/2022
Plan du cours
♦ Partie 1 : HTML - CSS
♦ Partie 2 : JavaScript
♦ Partie 3 : PHP
07/10/2022 2
Programmation Web
Partie 1 : HTML-CSS
07/10/2022
Qu'est-ce que HTML ?
♦ HTML (Hyper Text Markup Language) est un langage de description de pages
Web. Il permet de présenter les documents hypertextes destinés à être affichés sur
le navigateur. [Un document hypertexte est un document qui contient des liens
vers d’autres documents (texte, sons, images, …)]
♦ Il peut être enrichi à l'aide de langages de programmation (Java, Javascript, …).
♦ Un document HTML est

* un fichier texte, construit suivant une syntaxe précise
* structuré par des balises, insensibles à la casse
*interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer,
Opera,…)
* créé dans un éditeur de pages web (NVU, Dreamweaver, …) ou tout éditeur
de texte (bloc-notes, wordpad, …) et enregistrer avec le suffixe .html ou .htm
07/10/2022 4
Les balises
▪ HTML se compose d'unités fondamentales appelées balises.
▪ Les balises sont des commandes à l’intention du navigateur et saisies entre les
signes < et >. Ainsi une balise s’écrit <balise>.
▪ La plupart des balises HTML fonctionnent par paires : une balise d'ouverture
et une de fermeture encadrant les informations du document. Les balises de
fermeture se reconnaissent à la barre oblique (/). Ainsi à la balise d’ouverture
<balise> correspondrait la balise de fermeture </balise>. Certaines balises
fonctionnent seules, comme <br> qui crée un saut de ligne.
▪ Les balises HTML sont insensibles à la casse. Dans ce cours, les balises sont écrites
en majuscules pour les différencier du texte normal.
▪ Une balise pourra contenir des attributs :
<balise attribut1="val1" attribut2="val2" …> … </balise>
07/10/2022 5
Structure d’un document HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> … </TITLE>
…
</HEAD>
<BODY>
…
</BODY>
</HTML>
07/10/2022 6
Le doctype d’un document HTML
▪ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd"> est le doctype, aussi appelé DTD. Il
sert à indiquer au navigateur à quelles règles d’écriture obéit le code source de la
page html. Tous les navigateurs appliquant la même règle, vous êtes ainsi assuré
d’un rendu identique entre les différents navigateurs.
▪ L'absence de doctype autorise les navigateurs à interpréter la page qu'ils affichent
selon l'idée qu'ils s'en font, eux. Autrement dit : on leur laisse la main libre. Rien
ne garantit qu'ils le feront correctement.
▪ Avec HTML5 le doctype a été simplifié au maximum. En effet le HTML5
propose un doctype unique et simplifié :
<!DOCTYPE html>
07/10/2022 7
Premier exemple HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Mon premier exemple HTML </TITLE>
</HEAD>
<BODY>
Bonjour tout le monde !
</BODY>
</HTML>
07/10/2022 8
Analyse des balises
▪ <HTML>…</HTML> délimite le début et la fin du document html. Cette balise peut
prendre comme attribut lang qui spécifie la langue utilisée.
Par exemple <HTML lang="fr"> spécifie que le document est en langue française.
Cette information est fort prisée par les moteurs de recherche comme Google.
▪ <HEAD>…</HEAD> : Entête du document. Elle contient des informations au sujet du
document, indépendamment du contenu de celui-ci :
» Titre de la fenêtre dans laquelle la page s'affiche (balise <TITLE>…</TITLE>).
» Différentes informations sur le document ou pour la gestion de celui-ci : les balises
<META>.
» Des déclarations ou des appels de feuilles de style CSS.
» Des fonctions ou des liens vers des fichiers JavaScript.
▪ <BODY>…</BODY> : Corps du document. Elle détermine la partie du document html
qui sera affichée dans la fenêtre du navigateur et donc visible par l’internaute. La
balise peut s'employer seule ou avec des attributs (BGCOLOR : Couleur de fond de la
page, TEXT : Couleur du texte, BACKGROUND : Image de fond, …). En HTML5, ces
attributs dédiés à la présentation du corps du document sont maintenant abandonnés pour
laisser place à l’utilisation des feuilles de style.
07/10/2022 9
Quelques balises META
<META NAME="author" CONTENT="auteur1[,auteur2,…]">
permet de rechercher la page dans certains moteurs de recherche en se basant sur les noms
des auteurs indiqués.
<META NAME="keywords" CONTENT="mot-clé1[,mot-clé2,…]">
permet de rechercher la page dans certains moteurs de recherche en se basant sur les mots-
clés indiqués.
<META NAME="description" CONTENT="Une description de la page…">
permet de rechercher la page dans certains moteurs de recherche en se basant sur la
description indiquée.
<META HTTP-EQUIV="refresh" CONTENT="n;url=adresse de page">
permet de passer automatiquement à une autre page après un certain délai.
► n = délai en seconde avant l'appel de la deuxième page.
► adresse de page = adresse (absolue ou relative) de la deuxième page web à afficher.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8">
précise l’encodage utilisé pour la page web. Avec HTML5 cette déclaration d’encodage est
simplifiée : <META charset="UTF-8">
07/10/2022 10
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF-8">
<TITLE> Cours de Programmation Web </TITLE>
<META name="keywords" content="web, HTML">
<META name="author" content="Zrouri">
<META http-equiv="refresh"
content="5; URL=http://wwwesto.ump.ma">
</HEAD>
<BODY>
Dans quelques instants vous allez passez automatiquement au site
de l’EST d’Oujda.
</BODY>
</HTML>
07/10/2022 11
Les commentaires
♦ Il est parfois utile de commenter le code html pour en faciliter la
compréhension lors d’une mise à jour.
♦ Les commentaires doivent être précédés par .
♦ Tout ce qui sera écrit entre  ne sera pas affiché à l’écran par le
navigateur. Notons cependant que ces commentaires restent visibles
lorsqu’on consulte le code source de la page.
♦ Les commentaires peuvent occuper plusieurs lignes et peuvent être placés
indifféremment dans l’en-tête ou dans le corps du document.
07/10/2022 12
Les caractères spéciaux
♦ Il existe une foule de caractères spéciaux qu’il faut parfois encoder de façon
particulière. Par exemple les caractères utilisés par le code html comme <, >, " et &.
Ces différents signes doivent être encodés en utilisant les entités suivantes :
< : < > : >
& : & " : "
♦ Accents : soit # une lettre
▪ Accent grave : &#grave;
▪ Accent aigu : &#acute;
▪ Accent circonflexe : &#circ;
▪ Cédille : &#cedil;
Exemple : ça va Jérôme ? ça va Jérôme ?
Remarque : En principe, si le caractère existe dans le jeu de caractères (charset)
déclaré dans le document, il n’est pas nécessaire d’écrire les caractères spéciaux au
moyen des entités. Ainsi, dans l’encodage iso-8859-15, le é existe et il n’est donc
pas nécessaire d’avoir recours à l’entité é.
07/10/2022 13
Mise en forme des caractères
■ Texte en italique : <I> …</I>
■ Texte en gras : <B> …</B>
■ Texte en indice : <SUB> …</SUB>
■ Texte en exposant : <SUP> …</SUP>
■ Texte pré-formaté : <PRE> …</PRE>
■ Texte barré : <DEL> … </DEL>
■ Mise en valeur (italique) : <EM> …</EM>
■ Mise en valeur forte (gras) : <STRONG> …</STRONG>
■ Citation courte (italique) : <CITE> …</CITE>
■ Citation courte (entre guillemet) : <Q> …</Q>
■ Citation longue : <BLOCKQUOTE>…</BLOCKQUOTE>
Cette citation s’affiche avec un saut de ligne avant et après celle-ci. Elle s’affiche
également avec un léger retrait par rapport à la marge gauche.
■ Espace blanc : (L’espace blanc est considéré comme un séparateur de 2 mots)
Pour ajouter un espace blanc, utiliser le code spécial suivant :
Exemple : ajoute 2 espaces blancs
■ Retour à la ligne : <BR>
07/10/2022 14
Mise en forme des paragraphes
■ Titres : <Hn>…</Hn> avec n varie de 1 à 6
▪ Par défaut, cette balise ajoute une ligne vide entre le contenu de la balise qui
est mis en gras et la suite du document.
▪ Exemple : <H1> Titre de niveau 1 </H1>
■ Paragraphes : <P>…</P>
▪ Par défaut, chaque paragraphe est précédé et suivi d’un espace correspondant à un
saut de ligne.
▪ Exemple : <P> Ceci est un paragraphe. </P>
■ Séparation de contenu : <HR>
▪ La balise <HR> définit une pause thématique dans une page HTML (par
exemple un changement de sujet). Elle est affichée comme un trait horizontale
par les navigateurs .
▪ Remarque : <HR> seul (sans application de style CSS) affiche une ligne grise
ombrée de 1 pixel d'épaisseur faisant toute la largeur de la fenêtre.
07/10/2022 15
Listes : listes ordonnées/non ordonnées
■ Listes non ordonnées : ▪ Structure :
<UL>
▪ Listes à puces, sans numérotation
<LI>Item 1</LI>
▪ Éléments :
<LI>Item 2</LI>
- <UL>…</UL> (unordered list)
</UL>
- <LI>…</LI> (list item) : élément de la liste
- Il est possible d'indiquer des titres, soit à la liste entière, soit à un élément en
particulier avec la balise <LH>…</LH>. Le texte associé apparaît de façon
identique aux items mais n’est pas précédé de puce.
■ Listes ordonnées :
▪ Structure :
▪ Numérotation incrémentale suivi d'un point
<OL>
▪ Éléments :
<LI>Item 1</LI>
- <OL>…</OL>
<LI>Item 2</LI>
- <LH>…</LH> : titre de la liste
</OL>
- <LI>…</LI> : élément de la liste
- La balise <OL> admet l’attribut START pour définir la valeur de départ de la liste.
START="n" : commence la numérotation à n, avec n un nombre >= 1
07/10/2022 16
Listes imbriquées
Les listes peuvent être imbriquées les unes dans les autres, ce
qui permet une présentation très claire.
► <LI> peut contenir plusieurs éléments, dont les éléments

<OL> et <UL>.
► Si un élément <OL> est imbriqué, la numérotation est

réinitialisée.
07/10/2022 17
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> cours HTML </TITLE>
</HEAD>
<BODY>
<H1> Notions à connaître </H1>
<H2> Les balises : </H2>
<OL>
<LI> de titre </LI>
<LI> de paragraphe </LI>
<LI> de listes :
<UL> <LI> ordonnées </LI>
<LI> non ordonnées </LI>
<LI> de définitions </LI></UL>
</LI>
<LI> de ... </LI>
</OL>
</BODY>
</HTML>
07/10/2022 18
Listes : listes de définitions
■ Listes composées de termes et de leurs définitions
■ Éléments :
▪ <DL>…</DL>
▪ <DT>…</DT> : terme à définir
▪ <DD>…</DD> : définition du terme
■ Structure :
<DL>
<DT>Terme 1</DT>
<DD>Définition 1</DD>
<DT>Terme 2</DT>
<DD>Définition 2</DD>
</DL>
07/10/2022 19
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Cours HTML </TITLE>
</HEAD>
<BODY>
<H1> Notions à connaître </H1>
<DL>
<DT> SGML </DT>
<DD> Standard Generalized Markup Language </DD>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> XHTML </DT>
<DD> eXtended HTML </DD>
</DL>
</BODY>
</HTML>
07/10/2022 20
Tableaux
■ Définition du tableau : <TABLE>… </TABLE>
▪ La balise <TABLE> doit obligatoirement être fermée. En cas d’oubli de la balise
fermante, le tableau risque de ne pas s’afficher ou ne pas s’afficher correctement.
Cette balise peut s'employer seule ou avec des attributs (BORDER : défini la taille
de la bordure , WIDTH : défini la largeur du tableau , HEIGHT : défini la hauteur
du tableau, CELLSPACING : défini l’espace entre les cellules en px,
CELLPADDING : défini l’espace entre le texte et le bord de cellule en px, …). En
HTML5, ces attributs sont maintenant abandonnés pour laisser place à l’utilisation
des feuilles de style.
■ Définition d’une ligne : <TR> …</TR>
■ Définition d’une cellule d’en-tête : <TH> …</TH>
▪ Le contenu de la balise <TH> apparaît en gras et en centré
■ Définition d’une cellule : <TD> …</TD>
■ Légende : <CAPTION>…</CAPTION>
▪ Cette balise possède l’attribut ALIGN pour le placement de la légende
(TOP|BOTTOM). En HTML5, cet attribut est maintenant abandonné.
07/10/2022 21
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Cours HTML </TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<CAPTION> Exemple de Tableau </CAPTION>
<TR>
<TH> Jour de la semaine </TH>
<TH> Montant </TH>
<TH> Total </TH>
</TR>
<TR> <TD> Lundi </TD> <TD> 456DH </TD> <TD> 456DH </TD> </TR>
<TR> <TD> Mardi </TD> <TD> 200DH </TD> <TD> 656DH </TD> </TR>
</TABLE>
</BODY>
</HTML>
07/10/2022
«Fusion» de cellules (<TH>ou<TD>)
♦ Cellule sur plusieurs colonnes : Attribut COLSPAN C1 C2
Ex :
<TABLE>
<TR> <TD> C1 </TD> <TD> C2 </TD> </TR>
C12
<TR> <TD COLSPAN="2"> C12 </TD> </TR>
</TABLE>
♦ Cellule sur plusieurs lignes : Attribut ROWSPAN L12 L1

Ex :
<TABLE>
<TR> <TD ROWSPAN="2"> L12 </TD> <TD> L1 </TD> </TR>
L2
<TR> <TD> L2 </TD> </TR>
</TABLE>
07/10/2022
Tableaux imbriqués
♦ Un élément <TABLE> peut se retrouver comme contenu d’un
élément <TD>
♦ Le résultat est un tableau entièrement imbriqué dans une seule

cellule d’un autre tableau
♦ Ça devient vite compliqué …
07/10/2022
Exemple
…
<BODY>
<TABLE border="0" cellspacing="0" cellpadding="0" width="150">
<TR>
<TD>
<TABLE border="1" cellspacing="0" width="100%">
<TR> <TD>1</TD><TD>2</TD> </TR> </TABLE> </TD> </TR>
<TR>
<TD>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> </TABLE> </TD> </TR>
<TR>
<TD>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> </TABLE> </TD> </TR>
</TABLE>
</BODY>
…
07/10/2022
Liens hypertextes
♦ Un lien permet de définir
* une région sensible au clic souris dans un document
* l'endroit ou l'on va se retrouver après ce clic
♦ L’insertion d’un lien :

▪ La syntaxe de la balise de liens est :
<A HREF="document"> Libellé </A>
▪ L’attribut HREF="document" permet de pointer le lien vers :
- un endroit de la page en cours
- une autre page du site
- une page d’un autre site situé sur le web
- une adresse électronique
- un fichier téléchargeable
07/10/2022
Liens hypertextes
Exemple :
fichier1.html fichier2.html
<!DOCTYPE html> <!DOCTYPE html>
<HTML> <HTML>
<HEAD> <HEAD>
<META charset="UTF-8"> <META charset="UTF-8">
<TITLE> fichier1 </TITLE> <TITLE> fichier2 </TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
Ce fichier permet de lancer le suivant <BR> Nous sommes dans fichier2.html
<A HREF="fichier2.html"> texte </BODY>
d'appel </A> </HTML>
</BODY> 
07/10/2022
Liens hypertextes
■ Lien vers une autre page :
Pour la création d’un site, il est fortement recommandé de regrouper tous les
fichiers relatifs au site dans un seul dossier. Ce dernier peut contenir des
sous-dossiers.
On indique donc le chemin depuis la page courante pour parvenir à la page cible.
Exemple :
HREF="fichier2.html" Dans le répertoire courant
HREF="rep1/rep2/fichier2.html" Dans le répertoire 2 niveaux en dessous
HREF="../../fichier2.html" Dans le répertoire 2 niveaux au dessus
07/10/2022
Liens hypertextes
■ Lien vers un autre site distant :
Un lien peut faire référence à des pages d’autres sites, situées à une autre adresse sur le
web. Pour cela il suffit de remplacer document par l’adresse complète du site ou de la
page. On parle alors d’adressage absolu.
Ex : <A HREF="http://wwwesto.ump.ma"> Web ESTO </A>
■ Lien interne vers un endroit précis d’un document :
Un lien interne pointe vers une ancre, c'est à dire un endroit défini par un nom à
l'intérieur d'un document. Avec la disparition de l’attribut NAME en HTML5, la
déclaration de l’ancrage se réalise par un identifiant ID.
● Déclaration de l’ancre : <A ID="nom de l’ancre"></A>
Ex : <A ID="menu"></A><H1>MENU</H1>
● Lien vers une ancre située dans la même page : <A HREF="#nom de l’ancre">…</A>
Ex : <A HREF="#menu" > Retour au menu </A>
● Lien vers une ancre située dans une autre page :
<A HREF="nomFichier#nom de l’ancre">…</A>
Ex : <A HREF="pg.html#menu"> Menu de pg </A>
07/10/2022
Liens hypertextes
■ Lien vers une adresse email :
<A HREF="mailto :…">…</A>
- avec sujet :
<A HREF="mailto: adresseEmail?subject=ObjetMessage"> … </A>
- avec sujet et texte dans le corps du message :

<A HREF="mailto:adresseEmail?subject=ObjetMessage&body=CorpsMessage">…</A>
- avec sujet, envoyé à 2 personnes :
<A HREF="mailto:adr1_email?cc=adr2-email&subject=ObjetMessage">…</A>
Ex :
<A HREF="mailto:h.zrouri@ump.ma">Contacter moi</A>
<A HREF ="mailto:h.zrouri@ump.ma?subject=Cours">Contacter moi</A>
<A HREF="mailto:h.zrouri@ump.ma?subject=Cours&body=Les liens">Contacter moi</A>
07/10/2022
Liens hypertextes
■ Lien pour télécharger un fichier :
Pour permettre de télécharger un fichier, il suffit de spécifier le nom (avec
l’extension) de celui-ci. Cette façon de procéder est valable pour autant que
le fichier html et le fichier offert en téléchargement soient situés dans le
même dossier ou sous-dossier.
Ex : <A HREF="coursHTML.pdf"> Version PDF </A>
S’il y a une application définie par défaut pour l’extension du fichier, le

navigateur ouvre l’application et affiche le fichier. Sinon le navigateur
télécharge le fichier, après avoir proposé la fenêtre d’invite de
téléchargement.
07/10/2022
Liens hypertextes
■ Info-bulle sur un lien :
L'attribut TITLE="Info bulle" dans la balise <A> permet de proposer une
infobulle explicative qui s’affiche lorsque la souris pointera sur le lien.
Ex : <A HREF="page2.htm" TITLE="Lien vers le chapitre 2"> Suite </A>
07/10/2022
Images
♦ Des images peuvent être insérées dans un document HTML, et elles sont au
format GIF (.gif), JPEG (.jpg ou .jpeg) ou PNG (.png).
♦ <IMG> est la balise permettant d’inclure une image. Elle sera toujours
complétée par l’attribut SRC, qui permet de donner l’adresse du fichier
graphique contenant l’image :
<IMG SRC="adresse_de_l’image">
Les règles d’adressage sont identiques à celles abordées ci-dessus pour les
liens.
Exemple :
<IMG SRC="images/logo_EST.gif">
<IMG SRC="http://site.ma/img/logo.gif">
07/10/2022
Images
■ Quelques attributs de la balise <IMG> :
● WIDTH et HEIGHT se réfèrent à la largeur et à la hauteur en pixels de l’image
à l’écran. La définition de ces attributs permet au navigateur de réserver un
emplacement pour l’image avant son téléchargement complet.
● ALT contient le commentaire qui sera affiché lors du chargement de l’image ou
si elle n'est pas chargée pour une raison quelconque.
Exemple : <IMG SRC="logo_EST.gif" ALT="logo d’ESTO">
■ Lien sur une image :
Il est possible de cumuler un hyperlien et une image incrustée afin de pouvoir
suivre le lien en cliquant sur l'image. Il suffit d’entourer la balise de l’image
<IMG> par la balise du lien <A>.
Exemple :
<A HREF=" http://wwwesto.ump.ma"> <IMG SRC="logo_EST.gif"> </A>
07/10/2022
Images
■ Les images réactives :
Il est possible de créer des zones cliquables à l'intérieur d'une même image grâce à
l'attribut USEMAP utilisé conjointement avec la balise MAP.
Deux éléments indispensables : --» avoir un fichier image,
--» définir les zones réactives.
Définition des zones cliquables :
<MAP NAME="NomPartition">
différentes balises <AREA> ...
</MAP>
Image associée à la partition :
* Si Map dans le même fichier :
<IMG SRC="nomFichierImage" USEMAP="#NomPartition">
* Si Map dans un autre fichier :
<IMG SRC="nomFichierImage" USEMAP="fichier.html#NomPartition">
07/10/2022
Images
♦ La balise <AREA> :
<AREASHAPE="forme" COORDS="coordonnées"
HREF="lienDestination" ALT="commentaire">
x1,y1
x2,y2
L’attribut SHAPE peut prendre les valeurs :
▪ pour un rectangle :
SHAPE="rect" COORDS="x1, y1, x2, y2"
r ▪ pour un cercle :
x,y SHAPE="circle" COORDS="x,y,r"
▪ pour un polygone :
SHAPE="poly" COORDS="x1,y1,x2,y2,..."
▪ pour gérer les clics effectués en dehors d’une des zones
x2,y2 réactives :
x1,y1
x3,y3 SHAPE="DEFAULT"
Les coordonnées sont définies en pixels.
07/10/2022
Images
Exemple :
<MAP NAME="carte_image">
<AREA SHAPE="rect" COORDS="25,25,75,75" HREF="rectangle.html">
<AREA SHAPE="circle" COORDS="150,50,25" HREF="cercle.html">
<AREA SHAPE="poly" COORDS="200,50,250,75,275,25,250,25" HREF="poly.html">
</MAP>
300 pixels
100 pixels
07/10/2022
Les cadres locaux
♦ La balise <IFRAME> permet d'insérer un cadre en ligne ou cadre flottant à
n'importe quel endroit du document et elle se comporte comme un conteneur
permettant d'afficher des pages HTML locales ou distantes.
♦ La balise <IFRAME> doit être définie entre les balises <BODY> et </BODY>.
♦ La balise <IFRAME> possède les attributs :
- SRC="page à afficher" : définit l'emplacement de la page à afficher dans le
cadre.
- HEIGHT et WIDTH qui déterminent la hauteur et la largeur (en pixels) du
cadre flottant.
♦ Le texte contenu entre les balises <IFRAME> et </IFRAME> sera utilisé pour
afficher un texte de remplacement pour les navigateurs n’acceptant pas les iframes.
07/10/2022
Les cadres locaux
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Test des iframes </TITLE>
</HEAD>
<BODY>
<H3> Affichage de l'herboristerie du palais royal dans un cadre IFRAME : </H3>
<IFRAME SRC="https://www.herboristerie.com" HEIGHT="250" WIDTH="900">
Cadre iframe </IFRAME>
<P>Ce site vous permet de commander vos produits en ligne ! </P>
</BODY>
</HTML>
07/10/2022
Le multimédia
Insertion d’un fichier audio
■ Le HTML5 propose une nouvelle balise pour reproduire les fichiers
sonores, quels que soient les plugins installés chez l’utilisateur.
■ L’insertion d’un fichier audio se réalise par la balise :
<AUDIO SRC="fichier_son"> </AUDIO>
Le texte contenu entre les balises <AUDIO> et </AUDIO> sera

utilisé pour afficher un texte de remplacement pour les navigateurs
qui ne prennent pas en charge cette balise.
07/10/2022
Le multimédia
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Insertion d'un fichier audio </TITLE>
</HEAD>
<BODY>
<AUDIO SRC="piano_mp3.mp3" CONTROLS>
Votre navigateur ne supporte pas la balise audio.
</AUDIO>
</BODY>
</HTML>
07/10/2022
Le multimédia
Résultat dans Internet Explorer (version 8) Résultat dans Firefox (version 6) qui reconnaît
qui ne reconnaît pas la balise audio: la balise audio mais ne reconnaît pas le format mp3:
Résultat dans Google Chrome qui Résultat dans Firefox (version >15) qui reconnaît
reconnaît la balise audio et le format mp3: la balise audio et le format mp3:
07/10/2022
Le multimédia
■ Attributs de la balise <audio> :
● SRC définit le chemin et le nom du fichier son.
● CONTROLS, s’il est présent, affiche la barre de contrôle pour agir sur le son.
Cette barre comporte les fonctions de lecture, d’arrêt, d’avancement et de volume.
<audio src="fichier_son" controls>
● AUTOPLAY définit la lecture automatique du fichier audio dès que celui-ci sera
disponible, soit au chargement de la page.
<audio src="fichier_son" autoplay>
● LOOP spécifie que le fichier son sera joué en boucle. Ainsi le morceau sonore est
joué à nouveau lorsqu’il se termine.
<audio src="fichier_son" autoplay loop>
● PRELOAD indique comment le son doit être téléchargé avant qu’il ne soit joué :
none (pas de préchargement), metadata (préchargement des métadonnées attachées
au fichier) ou auto (laisse le navigateur décider).
Cet attribut preload est ignoré si l’attribut autoplay est présent.
07/10/2022
Le multimédia
■ La balise <SOURCE> :
▪ Comme tous les navigateurs ne sont pas compatibles avec les mêmes formats audio,
l’attribut SRC peut être spécifié en dehors de la balise AUDIO sous la forme de un
ou de plusieurs balises SOURCE. Ainsi, en fonction du navigateur utilisé, un format
audio ou un autre sera utilisé. Il est même possible de spécifier un lien pour
télécharger le fichier audio dans le cas où le navigateur ne reconnaîtrait pas l’élément
audio.
▪ Syntaxe : <SOURCE SRC="fichier_son">

Cette balise possède aussi l’attribut TYPE qui définit le type MIME du contenu.
Soit : TYPE="audio/ogg" | TYPE="audio/mpeg" | TYPE="audio/acc" | …
▪ Les balises <SOURCE> assurent une parfaite prise en charge des différents formats
de fichier audio. Elles sont lues dans l’ordre d’apparition dans le code. Le navigateur
utilisera la première ressource qu’il prend en charge.
07/10/2022
Le multimédia
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Insertion d'un fichier audio</TITLE>
</HEAD>
<BODY>
<AUDIO CONTROLS>
<SOURCE SRC="piano_mp3.mp3">
<SOURCE SRC="piano_ogg.ogg">
<SOURCE SRC="piano_acc.acc">
<A HREF="piano_mp3.mp3">Télécharger le fichier audio au format mp3</A>
</AUDIO>
</BODY>
</HTML>
07/10/2022
Le multimédia
Affichage dans plusieurs navigateurs :
07/10/2022
Le multimédia
Insertion d’un fichier vidéo
■ Le HTML5 propose une nouvelle balise pour reproduire les fichiers
vidéo quels que soient les plugins installés chez l’utilisateur.
■ L’insertion d’un fichier vidéo se réalise par la balise :
<VIDEO SRC="fichier_vidéo"> </VIDEO>
Le texte contenu entre les balises <VIDEO> et </VIDEO> sera

utilisé pour afficher un texte de remplacement pour les navigateurs
qui ne prennent pas en charge cette balise.
07/10/2022
Le multimédia
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Insertion d'un fichier vidéo </TITLE>
</HEAD>
<BODY>
<VIDEO SRC="video_mp4.mp4" CONTROLS>
Votre navigateur ne supporte pas la balise vidéo.
</VIDEO>
</BODY>
</HTML>
07/10/2022
Le multimédia
Résultat dans Google Chrome qui reconnaît la balise video et le format mp4 :
07/10/2022
Le multimédia
■ Attributs de la balise <video> :
● SRC définit le chemin et le nom du fichier vidéo.
● WIDTH détermine la largeur de la vidéo.
● HEIGHT détermine la hauteur de la vidéo.
● CONTROLS , s’il est présent, affiche la barre de contrôle pour agir sur la vidéo.
● AUTOPLAY définit la lecture automatique du fichier vidéo dès que celui-ci sera
disponible, soit au chargement de la page.
● LOOP spécifie que le fichier son sera joué en boucle. Ainsi la vidéo est joué à
nouveau lorsqu’il se termine.
● MUTED , s’il est présent, permet de désactiver le son de la vidéo.
<video src="fichier_vidéo" muted>
● PRELOAD indique comment la vidéo doit être téléchargé avant qu’il ne soit joué :
none (pas de préchargement), metadata (préchargement des métadonnées attachées
au fichier) ou auto (laisse le navigateur décider).
Cet attribut preload est ignoré si l’attribut autoplay est présent.
07/10/2022
Le multimédia
■ La balise <SOURCE> :
▪ La balise <SOURCE> est utilisée pour spécifier plusieurs ressources vidéo.
Chaque navigateur choisit le format qu’il prend en compte.
▪ Syntaxe :
<SOURCE SRC="fichier_vidéo">
Cette balise possède aussi l’attribut TYPE qui définit le type MIME du
contenu. Soit :
- TYPE="video/ogg"
- TYPE="video/mp4"
- TYPE="video/webm"
-…
07/10/2022
Le multimédia
Exemple :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Insertion d'un fichier vidéo </TITLE>
</HEAD>
<BODY>
<VIDEO WIDTH="250" CONTROLS>
<SOURCE SRC="video_mp4.mp4">
<SOURCE SRC="video_ogv.ogv">
<SOURCE SRC="video_webm.webm">
<A HREF="video_mp4.mp4">Télécharger le fichier vidéo au format mp4</A>
</VIDEO>
</BODY>
</HTML>
07/10/2022
Le multimédia
Affichage dans plusieurs navigateurs :
07/10/2022
Les formulaires
■ Principe : Exemple :
▪ Permettre au client la saisie de données

sur une page Web (comme un formulaire
papier)
▪ Différentes actions possibles avec

le contenu :
– envoi par email
– envoi à un serveur pour traitement
par une application distante
– traitement par un script coté client
07/10/2022
Les formulaires
■ Définition :
- La balise <FORM> marque le début de la description d'un formulaire.
- Entre <FORM> et </FORM> se trouvera la définition des boutons,
champs de saisie, …
- Toutes les balises HTML sont permises entre <FORM> et </FORM>
→ images, tableaux, ... peuvent être inclus dans un formulaire.
Attributs de la balise <FORM> :

● ACTION : définit l’URL du programme (script) chargé de traiter les
données acquises depuis le formulaire. On peut aussi envoyer les
données du formulaire par email : ACTION="mailto:adresseEmail".
● METHOD="POST|GET" : définit le mode de transfert des données
vers le script. GET (méthode par défaut) passe les données via l’url, elles
sont donc visibles par l'internaute alors qu’avec POST les données
n’apparaissent pas dans l’url, elles sont transmises de façon masquée.
07/10/2022
Les formulaires
● NAME : nom du formulaire pour une éventuelle utilisation ultérieure. (Le nom ne
doit pas être trop long et ne peut contenir ni caractères spéciaux, ni espace, ni
caractères avec accent. Le premier caractère doit être une lettre).
● ENCTYPE : spécifie le codage des données.
» ENCTYPE="application/x-www-form-urlencoded" : méthode d'encodage par
défaut
» ENCTYPE="multipart/form-data" : méthode d'encodage pour envoi de fichier
(avec POST et INPUT TYPE="file")
» ENCTYPE="text/plain" : méthode d'encodage pour envoi par mail
Exemple :
<FORM NAME="form1" METHOD="GET" ACTION="monFichier.php"> …
</FORM>
<FORM METHOD="POST" ACTION="mailto:h.zrouri@ump.ma"
ENCTYPE="text/plain"> … </FORM>
07/10/2022
Les formulaires
■ Les éléments d’un formulaire :
▪ INPUT : champs de saisie de texte et divers types de boutons :
TYPE="text" : champ de texte
TYPE="password" : champ autorisant la saisie de mot de passe
TYPE="hidden" : champ caché
TYPE="checkbox" : case à cocher
TYPE="radio" : bouton radio
TYPE="submit" : bouton de soumission du formulaire
TYPE="reset" : bouton de remise à zéro des champs
TYPE="file" : bouton de sélection de fichier
TYPE="button" : bouton poussoir
TYPE="image" : bouton image
…
▪ SELECT : menus déroulants, listes à ascenseurs
▪ TEXTAREA : zone de saisie d'un texte long
07/10/2022
Les formulaires
■ Champ de texte : <INPUT TYPE="text">
C'est le champ le plus classique, celui qui permet la saisie de texte d'une
seule ligne. (TYPE="text" est le type par défaut)
Exemple :
<FORM>
Texte : <BR> <INPUT TYPE="text" NAME="nom" VALUE="Valeur par
défaut" SIZE="48" >
</FORM>
07/10/2022
Les formulaires
Les attributs possibles sont :
▪ name : définit un nom unique pour cet élément.
▪ size : (valeur par défaut 20) définit le nombre de caractères visibles de la ligne de
texte et par conséquent la largeur de la zone de texte. L’utilisateur peut
néanmoins taper autant de caractères qu’il souhaite.
▪ maxlength : détermine le nombre maximal de caractères que l’utilisateur peut

encoder dans la ligne de texte.
▪ value : définit la valeur par défaut de la ligne de texte. Celle-ci apparaît dans la
ligne de texte au chargement de la page.
▪ readonly : indique que la valeur attribuée par défaut à la ligne de texte ne pourra
être modifiée par l’utilisateur.
07/10/2022
Les formulaires
▪ autofocus : donne le focus à l’élément lors du chargement de la page.
▪ minlength : détermine le nombre minimal de caractères que l’utilisateur doit
encoder dans la ligne de texte.
▪ required : indique que le champ doit être rempli pour pouvoir soumettre le
formulaire.
▪ placeholder : permet d’afficher une suggestion de saisie qui apparaît en grisé dans
le champ de texte au chargement de la page. Ce texte disparaît dès que
l’utilisateur donne le focus à l’élément concerné.
Exemple : <INPUT TYPE="text" PLACEHOLDER="Votre nom de famille">
Note : l’attribut value n’effectue pas la même fonction que l’attribut placeholder.
Avec value, l’utilisateur doit effacer le texte avant d’effectuer son propre
encodage mais avec placeholder, le texte est effacé automatiquement dès que le
focus est donné à l’élément. En outre, avec l’attribut value, en cas de
soumission du formulaire sans modification de cette valeur par défaut, c’est
celle-ci qui sera transmise.
07/10/2022
Les formulaires
■ Champ de mot de passe : <INPUT TYPE="password" … >
Il est identique au champ de texte, mais la saisie est protégée (chaque
caractère est marqué par une astérisque).
Les attributs usuels de la ligne de texte name, size, maxlength, … peuvent
être utilisés.
Exemple :
<FORM>
Mot de passe : <BR>
<INPUT TYPE="password" NAME="pass" SIZE="16">
</FORM>
07/10/2022
Les formulaires
■ Bouton radio : <INPUT TYPE="radio" … >
La sélection d'un bouton désélectionne les autres. Tous les boutons ayant
même nom (NAME) appartiennent au même groupe, dans ce cas les attributs
(VALUE) permettent de les différencier.
L’attribut CHECKED (facultatif) permet la sélection par défaut d’une bouton.
Exemple :
<FORM>
<INPUT TYPE="radio" NAME="sexe" VALUE="F" CHECKED>Femme <BR>
<INPUT TYPE="radio" NAME="sexe" VALUE="H">Homme
</FORM>
07/10/2022
Les formulaires
■ Case à cocher : <INPUT TYPE="checkbox" … >
Les cases à cocher permettent un ou plusieurs choix dans une série.
Les attributs possibles sont : NAME, VALUE, CHECKED et AUTOFOCUS.
Exemple :
<FORM>
<INPUT TYPE="checkbox" NAME="choix1" VALUE="HTML" CHECKED>
HTML <BR>
<INPUT TYPE="checkbox" NAME="choix2" VALUE="JS">JavaScript<BR>
<INPUT TYPE="checkbox" NAME="choix3" VALUE="PHP">PHP
</FORM>
07/10/2022
Les formulaires
■ Boutons de commande : <INPUT TYPE="submit|reset" … >
▪ TYPE="submit" définit un bouton qui déclenche l'envoi de tous les champs
du formulaire vers le script indiqué dans l'attribut ACTION de <FORM>.
▪ TYPE="reset" efface toutes les saisies et rétablit les valeurs par défaut de tous
les éléments du formulaire.
 Il est possible de modifier le texte par défaut du bouton par l’attribut VALUE.
Remarque :
A la place de la balise <INPUT> on peut utiliser la balise <BUTTON> :
<BUTTON TYPE="submit|reset" …> … </BUTTON>
Exemple :
<INPUT TYPE="submit" NAME="validation" VALUE="Valider">
<INPUT TYPE="reset" VALUE="Réinitialiser">
<BUTTON TYPE="submit"> <B>Valider</B> </BUTTON>
07/10/2022
Les formulaires
■ Bouton générique : <INPUT TYPE="button" … >
ou <BUTTON TYPE="button" …> … </BUTTON>
Ce type de bouton n'a pas de comportement par défaut. En général, son
comportement est défini par une action JavaScript (voir cours JavaScript).
Quelques attributs possibles : NAME, VALUE, AUTOFOCUS, DISABLED
(ce dernier attribut permet de désactiver le bouton au chargement de la page).
Exemple :
<INPUT TYPE="button" VALUE="Note" ONCLICK="window.open('note.html');">
OU :
<BUTTON TYPE="button" ONCLICK="window.open('note.html');"> Note
</BUTTON>
07/10/2022
Les formulaires
■ Bouton image : <INPUT TYPE="image" SRC="…"… >
C’est un bouton de soumission du formulaire comme le bouton submit sauf
que le contenu est une image.
Exemple :
<INPUT TYPE="image" NAME="validation" SRC="disquette.png" ALT="Valider">
<BUTTON TYPE="submit" NAME="enregistrer">

<IMG SRC="disquette.png" WIDTH="49" HEIGHT="45">
</BUTTON>
07/10/2022
Les formulaires
■ Champ caché : <INPUT TYPE="hidden" NAME="…" VALUE="…">
C’est un champ invisible pour l'utilisateur dont la valeur sera bien envoyée
avec le reste du formulaire.
Attention : la valeur est visible dans le code HTML.
Exemple :
<FORM ACTION="progAnnulation.php" METHOD="POST">
Pour annuler votre abonnement, tapez votre adresse email : <BR>
<INPUT TYPE="text" NAME="email" SIZE="40">
<INPUT TYPE="submit" VALUE="Envoyer">
<INPUT TYPE="hidden" NAME="action" VALUE="annulation">
</FORM>
suite
07/10/2022
Les formulaires
Le champs nommé «action» n’est pas visible dans le formulaire mais

sa valeur «annulation» sera transmise par la page Web au serveur en
même temps que les autres informations.
07/10/2022
Les formulaires
■ Fichier attaché : <INPUT TYPE="file" … >
▪ La balise INPUT avec l’attribut TYPE="file" permet à l'utilisateur de
choisir un fichier afin qu'il soit envoyé vers un serveur. Les attributs
habituels de la balise INPUT peuvent être utilisés (à l’exception de
maxlength).
▪ Il faut noter que cette balise html ne sert qu’à sélectionner le fichier à
transférer. Le transfert lui-même doit être pris en charge par des
applications côté serveur comme par exemple PHP.
▪ Afin que le contenu du fichier soit envoyé au lieu du chemin seulement, la
balise <FORM> doit recevoir l'attribut ENCTYPE="multipart/form-data"
et METHOD="post".
▪Il est possible de limiter la taille du fichier à envoyer. Pour cela, ajouter un
champ caché avec un attribut nommé MAX_FILE_SIZE et de valeur la
taille maximal acceptée en octets.
07/10/2022
Les formulaires
Syntaxe :
<FORM ACTION="…" METHOD="post" ENCTYPE="multipart/form-data">
…
<INPUT TYPE="hidden" NAME="MAX_FILE_SIZE" VALUE="…">
<INPUT TYPE="file" NAME="…" SIZE="…">
…
</FORM>
Exemple :
<FORM ACTION="testFichier.php" METHOD="post"
ENCTYPE="multipart/form-data"> Fichier :
<INPUT TYPE="hidden" NAME="MAX_FILE_SIZE" VALUE="3000">
<INPUT TYPE="file" NAME="fichier" SIZE="40">
</FORM>
07/10/2022
Les formulaires
Il est possible d’indiquer les types de fichiers que le serveur acceptera à l’aide de
l’attribut accept. La valeur de cet attribut est une liste de valeurs séparées par
des virgules, ces valeurs peuvent être :
- Une extension de fichier. (Par exemple ".jpg,.png,.doc")
- Un type MIME valide sans extension :
- audio/* pour des fichiers sonores
- video/* pour des fichiers vidéos
- image/* pour des fichiers images
Exemple :
<form action="testFichier.php" method="post" enctype="multipart/form-data">
<input type="file" name="fich" size="50" accept="image/gif, image/jpeg,
image/jpg, image/bmp, image/png">
</form>
07/10/2022
Les formulaires
■ Zone de texte : <TEXTAREA ROWS="…" COLS="…">…</TEXTAREA>
Zone de saisie de texte sur plusieurs lignes.
Exemple :
<FORM>
Zone de texte : <BR>
<TEXTAREA NAME="texte" ROWS="7" COLS="23">
Saisissez votre texte ici ...
</TEXTAREA>
</FORM>
07/10/2022
Les formulaires
Les attributs possibles sont :
▪ name : définit un nom pour cet élément.
▪ cols : (valeur par défaut 20) définit le nombre de caractères visibles en largeur de la
zone de texte.
▪ rows : (valeur par défaut 2) définit le nombre de caractères visibles en hauteur de la
zone de texte.
▪ maxlength : détermine le nombre maximal de caractères que l’utilisateur peut
encoder dans la zone de texte.
▪ autofocus : donne le focus à l’élément lors du chargement de la page.
▪ required : rend l’élément obligatoire.
▪ placeholder : affiche un texte dans la zone au chargement de la page. Ce texte
s’efface automatiquement dès que l’utilisateur donne le focus à la zone de texte.
▪ readonly : indique que la valeur attribuée par défaut à la zone de texte ne pourra
être modifiée par l’utilisateur.
07/10/2022
Les formulaires
■ Liste de choix et menu déroulant :
<SELECT>
<OPTION> …</OPTION> 
<OPTION>…</OPTION> 
...
</SELECT>
▪ Principaux attributs de l'élément <SELECT> :
- NAME : nom de l’élément.
- SIZE : définit le nombre d’éléments du menu qui sera visible (par défaut SIZE=1 -->
menu déroulant).
- MULTIPLE : autorise la sélection multiple (il faut que SIZE > 1).
- AUTOFOCUS : l’élément prend automatiquement le focus lors du chargement de la page.
▪ Principaux attributs de l'élément <OPTION> :
- SELECTED : sélection par défaut d'un item de la liste.
- VALUE : en principe, c’est le texte de l’élément choisi placé derrière <OPTION> qui est
transmis lors de l’envoi du formulaire. Vous pouvez toutefois spécifier qu’une autre
valeur soit transmise avec l’attribut VALUE.
07/10/2022
Les formulaires
Exemple :
<SELECT NAME="liste1">
<OPTION VALUE="l1"> Ligne 1 </OPTION>
<OPTION VALUE="l3" SELECTED> Ligne 3 </OPTION>
</SELECT>
<SELECT NAME="liste2" SIZE="3" MULTIPLE>

<OPTION VALUE="l1" SELECTED > Ligne 1 </OPTION>
<OPTION VALUE="l3" SELECTED > Ligne 3 </OPTION>
</SELECT>
07/10/2022
Les formulaires
■ Liste avec sous parties :
La balise <OPTGROUP> s'utilise dans une balise <SELECT> et permet de grouper
les options de cette dernière. Pour spécifier le nom du groupe, il faut utiliser l'attribut
LABEL de <OPTGROUP>.
<OPTGROUP LABEL="Nom_du_sous_groupe">
<OPTION> … </OPTION>
…
</ OPTGROUP>
Exemple :
<SELECT NAME="mois">
<OPTGROUP LABEL="trimestre 1">
<OPTION VALUE="01">Janvier</OPTION>
...
</OPTGROUP>
<OPTGROUP LABEL="trimestre 2">
...
</OPTGROUP>
</SELECT>
07/10/2022
Les formulaires
■ Organisation des champs de formulaires :
Dans le cas de formulaires longs et complexes, il est parfois utile de regrouper
graphiquement certains éléments pour organiser la page de façon logique. Pour cela
on peut utiliser la balise <FIELDSET>… </FIELDSET> pour regrouper des champs
de formulaire de sémantique proche. On pourra alors donner une légende à l’ensemble
de champs avec la balise <LEGEND>.
Exemple :
<FIELDSET>
<LEGEND>Programmation Web :</LEGEND>
<INPUT TYPE="checkbox" NAME="choix1" VALUE="HTML" CHECKED>HTML <BR>
<INPUT TYPE="checkbox" NAME="choix2" VALUE="JS">JavaScript <BR>
<INPUT TYPE="checkbox" NAME="choix3" VALUE="PHP">PHP <BR>
</FIELDSET>
07/10/2022
Les formulaires
■ Les labels : <LABEL FOR="…" > … </LABEL>
La plupart des champs sont naturellement accompagnés d’une étiquette.
On peut la placer où on veut, en général juste à gauche ou à droite du
champ. Son attribut FOR référence l’attribut ID du champ correspondant.
Dans les navigateurs graphiques, un clic sur l’étiquette d’un champ permet
en général de sélectionner le champ.
Exemple :
<LABEL FOR="idPass"> Mot de passe : </LABEL> <BR>
<INPUT TYPE="password" NAME="idpass" SIZE="16" ID="idPass">
07/10/2022
Les feuilles de styles en cascade
Cascading Style Sheet
(CSS)
07/10/2022
CSS :
Principe de base
♦ Une feuille de style est une page de définitions ou de caractéristiques concernant le style
qui indiquent au navigateur comment afficher les divers éléments d'une page web. Ainsi le
rôle d’HTML se limite à la structure et l’encodage de l’information brute, et les feuilles
de style prennent en charge la présentation (polices de caractères, couleurs, …). Les CSS
sont définis comme le langage de feuilles de style par défaut.
♦ HTML5 va au bout du concept de la séparation du contenu et de la présentation. Presque

tous les éléments de présentation des balises ou des attributs présents dans le HTML4 ont
ainsi disparu. Citons par exemple, l’absente en HTML5 de l’attribut border qui assure la
présence d’une bordure à la balise <TABLE>, rendant ainsi la présentation des tableaux
problématique en pur html.
♦ Les feuilles de style ne sont pas sensibles à la casse. Cependant les éléments qui ne sont
pas sous le contrôle des feuilles de style comme les noms de police ou les URLs peuvent
être sensibles aux majuscules et aux minuscules. L’usage veut que l’on encode les feuilles
de style en minuscules.
07/10/2022
CSS :
Structure des règles de style
♦ Une feuille de style est composée de règles qui peuvent s'appliquer soit
▪ au document entier
▪ à un ensemble d'éléments du document (Ex. les balises <P> du document)
▪ à un élément particulier qui sera défini par l'attribut CLASS ou ID
♦ Une règle de style est composée d'un sélecteur et d'une déclaration.
Le binôme propriété: valeur; constitue une déclaration.
▪ Forme générale d’une règle : sélecteur { propriété: valeur ; }
▪ Exemple : H1 { color: red; }
♦ Le sélecteur peut être :
▪ un élément HTML
▪ une classe
▪ une pseudo-classe
▪ un pseudo-élément
▪ un identifiant ID
▪…
07/10/2022
CSS :
Structure des règles de style
♦ Chaque règle de style peut comporter autant de couples propriété-valeur que voulus
qui seront séparés par un ";".
Ex : P{
font-family: arial;
font-size: 12pt;
}
♦ Une propriété peut avoir plusieurs valeurs séparées par un espace.
Ex : TABLE {
border : 2px solid blue;
}
♦ Possible de grouper plusieurs sélecteurs ayant une règle de style identique, séparés
par une virgule.
Ex : H1, H2, H3 { color: red }
07/10/2022
CSS :
Appliquer des règles de style à un document
Il existe 4 techniques pour appliquer des styles à un document HTML :
1. Style en ligne (Inline Style) :
Le style en ligne est élaboré pour un seul élément. La balise de l'élément est
complétée par l'attribut STYLE="propriété1: valeur1; propriété2: valeur2; …"
qui précise la définition des propriétés.
Exemple :
<P STYLE="font-size:16pt; text-align:center; color:red;">
Voici un paragraphe dont le texte est rouge,
centré, en 16 pt.
</P>
07/10/2022
CSS :
2. Feuille de style incorporée dans le document (Embedded Style Sheet) :
Les règles de styles des différents éléments sont regroupés entre les balises <STYLE>
et </STYLE>. Cette technique permet de modifier facilement la présentation de toute la page.
Exemple : <!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> CSS</TITLE>
<STYLE TYPE="text/css">
BODY { font-family:sans-serif; background-color:yellow }
P { text-align:justify }
</STYLE>
</HEAD>
<BODY>
<P>Voici un paragraphe justifié.</P>
<P>Voici un autre paragraphe justifié.</P>
</BODY>
</HTML>
Remarque : En HTML5, on peut se contenter de la balise <STYLE> sans l’attribut TYPE="text/css"
07/10/2022
CSS :
3. Feuille de style externe liée (Linked Style Sheet) :
Une feuille de style externe est un fichier de texte à extension «.css», qui contient la liste
des règles CSS. Il doit contenir uniquement les règles de styles, avec éventuellement des
commentaires (les commentaires CSS sont entourés par /* et */ et peuvent tenir sur
plusieurs lignes), mais sans aucun autre code HTML, JavaScript ou autre.
La balise <LINK> dans l'entête du document html permet de faire appel à une feuille
de style externe. On peut mettre plusieurs balises <LINK> vers des feuilles de style
externes différentes.
Exemple : <HEAD>
<TITLE> Appel à une feuille de style externe </TITLE>
<LINK rel="stylesheet" href="feuilledestyle.css" type="text/css">
</HEAD>
Remarque : En HTML5, on peut se contenter de :
<LINK rel="stylesheet" href="feuilledestyle.css">
L’attribut rel="stylesheet" précise que le document en question est une feuille
de style externe.
07/10/2022 85
CSS :
4. Feuille de style externe importée (Imported Style Sheet) :
Une autre façon d’utiliser des feuilles de style externes est d’utiliser @import.
@import est une propriété de style CSS2 alors que la balise <LINK> est du html.
L’avantage est que l’on pourra non seulement l’utiliser pour appeler une feuille de style
externe dans un document html mais aussi pour importer une autre feuille de style dans la
feuille de style externe.
Syntaxe : @import url(url_de_la_feuille_de_style);
L'url de la feuille de style peut être encadrée ou non de guillemets simples ou doubles.
Exemple : <HEAD>
<TITLE>CSS</TITLE>
<STYLE type="text/css">
@import url(styleimporte.css);
BODY { font-family:sans-serif; background-color:white }
</STYLE>
</HEAD>
Remarques : - Les balises <STYLE>..</STYLE> sont nécessaires.
- Ne pas oublier le point-virgule en fin de ligne de la rège @import.
- Il est possible d'importer plusieurs feuilles de styles.
- La rège @import se place avant tout autre déclaration de style.
07/10/2022 86
CSS :
Sélecteurs de style
♦ Sélecteur universel * : sélectionne tous les éléments.
Exemple : * { color: red; }
→ applique une couleur rouge à tous les éléments HTML
♦ Sélecteur d’élément : (ou sélecteur de type) permet de sélectionner une balise précise.
Exemple : P { color: green; }
→ applique une couleur verte à tous les paragraphes de la page HTML
♦ Sélecteur d’identification : permet de sélectionner de manière unique une balise ayant un

ID. (la valeur d’ID doit être unique dans la page HTML)
Syntaxe : #VALEUR_DE_ID
Exemple : P#auteur { color: red; }
→ applique une couleur rouge à une balise P précise : <P ID="auteur">
#texte { color: green; }
→ applique une couleur verte à un élément HTML précis : <… ID="texte">
07/10/2022 87
CSS :
♦ Sélecteur de classe : permet de sélectionner une balise ayant une classe.
Syntaxe : .NOM_DE_LA_CLASSE (soit un point suivi par le nom de la classe)
L’appel de la classe de style se fait par :
<BALISE CLASS="NOM_DE_LA_CLASSE">
Exemple :
P.intro { font-style: italic; }
.couleur { color: blue; }
→ la classe intro concerne une balise précise, la balise P : <P class="intro">
→ la classe couleur peut être appliquée à différentes balises :
<P class="couleur">, <UL class="couleur">, ...
Remarques :
- Le nom de la classe peut comporter des lettres, des chiffres, le tiret et le caractère de
soulignement. Le premier caractère ne peut être un nombre, un tiret ou un caractère
de soulignement. Les espaces sont à éviter ainsi que les noms réservés du JavaScript.
- Plusieurs classes peuvent être associées à un élément HTML en les séparant par un
espace. Ex : <H1 class="couleur texte">
07/10/2022 88
CSS :
♦ Sélecteur descendant : permet de sélectionner un ou des enfants directs ou indirects.
Syntaxe : XY (avec X et Y sont l’un des types de sélecteur)
Exemple :
Dans le <HEAD> de la page HTML :
P { color: red }
P .texte { color: blue }
</STYLE>
Dans le <BODY> de la page HTML :
<P>Texte mis en <B class="texte">forme</B> dans la page</P>
→ Le mot forme est en bleu, le reste en rouge
<P>Texte <I>mis en <B class="texte">forme</B> dans la </I>page</P>
→ Le rendu serait le même.
07/10/2022 89
CSS :
♦Sélecteur d’enfant : permet de sélectionner l'enfant direct.
Syntaxe : X>Y (avec X et Y sont l’un des types de sélecteur)
Exemple :
P { color: red }
P>B { color: green }
</STYLE>
<P>Texte <I>mis en <B>forme</B></I> dans la <B>page</B></P>
→ Seul le mot page (contenu de la 2ème balise <B>) est en vert, le reste en rouge
07/10/2022 90
CSS :
♦ Sélecteur adjacent : permet de sélectionner l'élément placé immédiatement après.
Syntaxe : X+Y (avec X et Y sont l’un des types de sélecteur)
Exemple :
H4+P { color: red }
</STYLE>
<H4>Introduction</H4>
<P>Bonjour mon amie.</P>
<P>Comment vas-tu?</P>
→ Seul le premier paragraphe sera en rouge, car il suit immédiatement l’élément H4.
07/10/2022 91
CSS :
♦ Sélecteur d’attribut : permet de sélectionner une balise HTML en fonction de son
attribut. Ce sélecteur peut prendre plusieurs formes :
▪ X[attr] : sélectionne l'élément X ayant comme attribut "attr" quelles qu'en
soient les valeurs.
▪ X[attr="val"] : sélectionne l'élément X ayant comme attribut "attr" et dont
sa valeur est égale à "val".
▪ X[attr~="val"] : sélectionne l'élément X ayant comme attribut "attr" et dont la
valeur est une liste de valeurs séparée par des espaces et dont une de ses valeurs
est égale à "val".
▪ X[attr^="val"] : sélectionne l'élément X ayant comme attribut "attr" et dont
la valeur commence exactement par le préfixe "val".
▪ X[attr$="val"] : sélectionne l'élément X ayant comme attribut "attr" et dont
la valeur finit exactement par le suffixe "val".
▪ X[attr*="val"] : sélectionne l'élément X ayant comme attribut "attr" et dont
la valeur contient au moins une fois la sous chaîne "val".
07/10/2022 92
CSS :
Exemple 1 :
B[title] { color: red }
P[lang="fr"] { color: blue }
</STYLE>
<P>Mot en <B title="important">gras</B> dans le <B>texte</B>.</P>
<P lang="fr">Paragraphe en français.</P>
→ Seul le mot gras est en rouge car il possède l’attribut title.
Seul le 2ème paragraphe est en bleu, car lui seul possède l’attribut lang avec la
valeur fr.
07/10/2022 93
CSS :
Exemple 2 :
H4[title~="introduction"] { color: green }
</STYLE>
<H4 title="introduction de la partie 1">Introduction</H4>
<H4 title="conclusion">Conclusion</H4>
→ Seul le premier en-tête sera en vert car la valeur de l’attribut title contient entre
autre le mot introduction.
07/10/2022 94
CSS :
♦ Sélecteur de pseudo-classe des ancres : permet d’appliquer un style à un type précis
d’éléments HTML, en l’occurrence les liens <A href=…>.
Syntaxe :
▪ A:link permet de définir l’aspect des liens non visités
▪ A:visited permet de définir l’aspect des liens visités
▪ A:hover permet de définir l’aspect des liens survolés avec la souris
▪ A:active permet de définir l’aspect des liens cliqués
Exemple :
A:link { font-weight: bold; text-decoration: none }
→ lien en gras non souligné
A.menu:hover { color: green }
→ le lien possédant la classe menu sera de couleur verte au passage de la souris
Remarque : il y a un ordre précis pour la déclaration de ces pseudo-classes :
A:link, A:visited, A:hover et A:active
07/10/2022 95
CSS :
♦ Sélecteur de pseudo-classe dynamique : on retrouve sous cette nouvelle nomination
les sélecteurs :hover et :active. Ces deux sélecteurs peuvent s’utiliser sur d’autres
éléments que les liens.
On dispose en plus d’une nouvelle pseudo-classe principalement dédiée au formulaire:
:focus qui permet de mettre en forme un élément de formulaire quand il obtient le
focus, càd quand l’internaute utilise un élément du formulaire.
Exemple dans un formulaire :

INPUT { background-color: yellow }
INPUT:hover { background-color: green }
INPUT:focus {border: thick solid red; color: blue }
</STYLE>
07/10/2022 96
CSS :
Exemple (suite) :
▪ Avec le style défini ci-dessus, nous aurons un arrière-plan jaune pour le champ
de texte.
▪ Quand l’utilisateur survole le champ par la souris (input:hover), son arrière-plan

devient vert. Puis quand l’utilisateur est dans le champ (input:focus), le contour
est en rouge et le texte saisi est en bleu.
07/10/2022 97
CSS :
♦ Sélecteur de pseudo-classe de sélection : permet de cibler les éléments en se basant
sur leur position dans la liste des enfants de leur parent.
Syntaxe :
:first-child sélectionne le premier élément enfant.
:last-child sélectionne le dernier élément enfant.
:nth-child(n) désigne le nième élément enfant où n est un nombre ou les mots-clés
even (pairs) ou odd (impairs).
:nth-last-child(n) sélectionne le nième enfant en partant du dernier élément.
:first-of-type représente le premier élément de ce type.
:last-of-type représente le dernier élément de ce type.
:nth-of-type(n) désigne le nième élément de ce type où n est un nombre ou les mots-
clés even (pairs) ou odd (impairs).
:nth-last-of-type(n) sélectionne le nième élément de ce type en partant du dernier
élément.
07/10/2022 98
CSS :
Exemple :
UL :first-child { color: blue } /* ou LI:first-of-type { color: blue } */
UL :nth-child(2) { color: green } /* ou LI:nth-of-type(2) { color: green } */
UL :last-child { color: red } /* ou LI:last-of-type { color: red } */
</STYLE>
<UL>
<LI> Un </LI>
<LI> Deux </LI>
<LI> Trois </LI>
<LI> Quatre </LI>
</UL>
→ Le premier enfant, le premier item de la liste, est en bleu
Le 2ème enfant, le 2ème item de la liste, est en vert
Le dernier enfant, le dernier item de la liste, est en rouge
07/10/2022 99
CSS :
♦ Sélecteur de pseudo-élément : permet de créer des règles CSS qui interviennent
finement sur un élément.
Syntaxe :
::first-letter → première lettre d'un élément
::first-line → première ligne d'un élément
::before → insère un contenu généré avant celui d’un élément
::after → insère un contenu généré après celui d’un élément
Ces deux derniers pseudo-éléments (::before et ::after) s’utilisent avec la propriété

content et peuvent insérer du texte ou des images. Par exemple, pour insérer une
image avant un élément il suffit de lui appliquer la règle de style :
::before {content: url(nom_de_l’image) ;}
07/10/2022 100
CSS :
Exemple :
<P class="citation">Utiliser le pseudo-élément :after </P>
<P>Le responsable me dit <B class="source">"Il faut avancer ! " </B></P>
P.citation::after { content: "(standard du W3C)" }
.source::before { content: "(source à vérifier)" }
.citation { color: red }
.source { font-style: italic }
P::first-letter { font-size: 2em }
</STYLE>
07/10/2022 101
CSS :
Notion d’héritage
♦ Lorsqu’on imbrique un élément dans un autre, l’élément inclus hérite de certains
propriétés CSS de l’élément de niveau supérieur.
Exemple :
.classvert { color: green }
</STYLE>
<P class="classvert"> Programmation <B> web </B> dynamique </P>
→ Le mot web encadré par la balise <B> hérite des définitions faites dans le style
classvert. La classe classvert définit une couleur verte, alors le mot web est écrit avec
cette couleur.
Remarque :
Les éléments enfants n’hériteront des styles de leur parent que si il n’y a pas de conflit
c’est-à-dire uniquement dans la situation où ces mêmes styles n’ont pas été redéfinis pour
ces éléments enfants en CSS.
07/10/2022 102
CSS :
Notion de cascade
♦ En cas de concurrence entre plusieurs définitions de style (en ligne, interne ou externe),
intervient alors la notion de « cascade » ou d’ordre de priorité. L’ordre décroissant de
priorité (de la plus haute à la plus basse) est :
①- Les feuilles de style en ligne ②- Les feuilles de style
③- Les feuilles de style internes
♦ En cas deexternes
conflit, plus une règle est spécifique,④- Propriétés
plus du navigateur
elle est prioritaire. Sinon la dernière
règle annule la règle antérieure d'un même emplacement (fichier .css, <style>).
♦ Il est possible de passer outre ces règles de priorité par défaut en utilisant la valeur
!important et redonner la préséance à une déclaration, peu importe les déclarations qui
peuvent la suivre.
Exemple :
Le fichier de style externe (style.css) contient : H1 { color: red !important; }
<LINK rel="stylesheet" href="style.css" type="text/css">
<STYLE type="text/css"> H1 { color: blue; } </STYLE>
Dans le <BODY> de la page HTML : <H1> Cours de CSS </H1>
→ le titre « Cours de CSS » sera en rouge
07/10/2022 103
CSS
Les types d’éléments
♦ Les éléments « bloc »
▪ Les éléments blocs s’empilent les uns sur les autres
▪ Un élément bloc peut contenir d’autres éléments blocs
▪ Un élément bloc peut contenir des éléments en ligne
▪ Ex : H1, H2,…, P, BLOCKQUOTE, PRE, HR, UL, OL, LI, TABLE, FORM,
FIELDSET
♦ Les éléments « en ligne »
▪ Les éléments en ligne se placent les uns à coté des autres
▪ Un élément en ligne peut contenir d’autres éléments en ligne
▪ Un élément en ligne ne peut pas contenir d’éléments bloc
▪ Ex : STRONG, EM, B, I, IMG, SELECT, INPUT, TEXTAREA, IFRAME, VIDEO
♦ Élément en ligne générique : <SPAN> ... </SPAN>
▪ Permet de définir un style particulier à tout ce qui est compris entre ces deux balises
♦ Élément de bloc générique : <DIV> ... </DIV>
▪ Idem, mais en général, les navigateurs génèrent un saut de ligne avant et après chaque
section DIV
07/10/2022 104
CSS :
Les unités de mesure
Unité Valeurs Exemple Description
Pourcentage par rapport à une référence (taille de
% entière 25%
caractères, largeur d’une boîte, largeur de fenêtre, ...)
Pixel (un point sur l’écran de l’ordinateur)
Relatives
px entière 200px
Par rapport à la taille de police courante.
em réelle 2.5em
1em correspond à la taille de caractères utilisée
ex réelle 0.5ex L’unité est la hauteur de la lettre minuscule courante
pt entière 14pt Point (1pt = 1/72 inch = 1/12 pica)
pc réelle 12pc Pica (1pc = 12 points = 1/6 inch)

absolues
cm réelle 10cm Centimètre

mm réelle 5mm Millimètre
in réelle 3in Inch (1in = 1 pouce = 2.54 cm)
• Le séparateur décimal est le point et non pas la virgule.
• Il n'y a pas d'espace entre le nombre et l'unité.
• Seul le nombre 0 peut être dispensé de son unité.
07/10/2022
01/04/2020 Prof. Hafida ZROURI 105
CSS :
Les feuilles de style de police (font)
● font-family
▪ Définit la police de caractères
▪ Ex : H3 { font-family: arial }
● font-size
▪ Définit la taille de la police
▪ Ex : P { font-size: 14pt }
● font-style
▪ Définit le style de l'écriture. Principales valeurs possibles : normal, italic
▪ Ex : H3 { font-style: italic }
07/10/2022
CSS :
Les feuilles de style de texte (text)
● text-align
▪ Définit l'alignement : à gauche, centré, …
▪ Ex : H3 { text-align: center }
● text-indent
▪ Définit un retrait dans la première ligne
▪ Ex : P { text-indent: 1cm }
● text-decoration
▪Définit une décoration du texte. Valeurs possibles: none, underline,
overline, blink, …
▪ Ex : A:visited { text-decoration: blink }
● text-transform
▪ Définit la casse du texte : minuscule, majuscule
▪ Ex : P { text-transform: uppercase }
07/10/2022
CSS :
Les feuilles de style d'arrière-plan (background)
● background-color
▪ Définit la couleur de l'arrière-plan
▪ Ex : H3 { background-color: #000000 }
● background-image
▪ Définit l'image de l'arrière plan
▪ Ex : BODY { background-image: url(image.gif) }
● background-repeat
▪ Définit la façon de répéter l'image de l'arrière plan
▪ Valeurs possibles : repeat ou no-repeat ou repeat-x ou repeat-y
▪ Ex : BODY { background-image:url(image.gif); background-repeat: repeat-x }
● background-attachment
▪ Permet de fixer une image de fond. Deux valeurs sont possibles : scroll (l’image
défile en même temps que le document), fixed (l’image ne défile pas)
▪ Ex : BODY { background-image:url(image.gif); background-attachment: fixed }
07/10/2022
CSS :
Les feuilles de style pour les listes
● list-style-type
▪ Détermine le type de puce ou de numérotation
▪ Valeurs possibles : none, disc, circle, square, decimal, lower-roman, upper-roman,
lower- alpha, upper-alpha
▪ Ex : UL { list-style-type: square }
● list-style-image
▪ Permet de remplacer la puce ou la numérotation par une image
▪ Ex : UL { list-style-image:url(image.gif) }
● list-style-position
▪ Spécifie si les puces sont à l'intérieur ou à l'extérieur du texte
▪ Valeurs possibles : inside, outside
▪ Ex : UL { list-style-position: inside }
● Raccourci pour toutes les propriétés de liste : list-style
▪ Valeurs de list-style-type, list-style-image et list-style-position.
Ces propriétés sont facultatives (si propriété absente : valeur par défaut)
▪ Ex : UL { list-style: circle inside }
07/10/2022
CSS :
Les feuilles de style pour les tableaux
● border-spacing
▪ Permet de spécifier l’espacement des cellules.
▪ Ex : TABLE { border-spacing: 5px }
● caption-side
▪ Permet de positionner le titre du tableau
▪ Ex : TABLE { caption-side: bottom }
● table-layout
▪ Détermine si le tableau a une taille fixe ou variable
▪ Ex : TABLE { table-layout: fixed; width: 600px }
● border-collapse
▪ Permet de fusionner (collapse) ou non (separate) les bordures des cellules
▪ Ex : TABLE { border-collapse: collapse }
07/10/2022
CSS :
Les propriétés de positionnement et d’affichage
● float
▪ Spécifie de quel coté de l’élément parent doit s’aligner l’élément concerné.
▪ Valeurs : left, right, none
● position
▪ Définit le type de positionnement d'un élément
▪ Valeurs : static (par défaut), relative, absolute
▪ Ex : DIV { position: absolute; left: 50px; top: 50px; width: 180px; }
● display
▪ Permet de contrôler l’affichage des éléments dans la page. Elle permet de redéfinir un
élément en ligne comme un élément bloc et inversement.
▪ Valeurs : block, inline, none, … (avec la valeur none, l’élément ne sera pas affiché. Il sera
retirer du document et de la mise en page)
● visibility
▪ Détermine si un élément est visible ou caché
▪ Valeurs : visible, hidden (avec cette valeur l’élément sera masqué mais continue
quand même à prendre de la place sur l'écran)
07/10/2022
CSS :
Modèle de boîte
♦ Le modèle de mise en forme des CSS est basé sur le concept de boîte. Une boîte
est un conteneur, une zone rectangulaire qui affiche à l’écran un contenu.
♦ Tout élément du HTML peut être considéré comme une boîte. Le rôle du navigateur
est alors d’afficher ces boîtes à l’écran selon ses propres spécifications.
♦ Un élément boîte est définit comme une zone rectangulaire constituée :
- d’un contenu (propriétés width et height )
- d’une marge intérieure (propriété padding)
- d’une bordure (propriété border)
- d’une marge extérieure (propriété margin)
07/10/2022
CSS :
Les propriétés de dimension
● width
▪ Permet de spécifier la largeur d’une boite
▪ Ex : DIV { width: 100px }
● height
▪ Permet de spécifier la hauteur d’une boite
▪ Ex : TABLE { height: 90% }
height
width
07/10/2022
CSS :
Les bordures
■ Style :
● Style de la bordure : border-style
▪ Ex : P.note { border-style: solid }
● Détail des bordures pour chaque côté : border-top-style (en haut), border-right-style
(à droite), border-bottom-style (en bas), border-left-style (à gauche)
● Détail du style de la bordure avec border-style :
▪ Ex : P { border-style: dashed dotted solid double }
▪ Ordre : ① haut / ② droite / ③ bas / ④ gauche
■ Épaisseur :
● Épaisseur de la bordure : border-width
▪ Ex : P.note { border-width: 2px }
●Détail de l'épaisseur pour chaque côté : border-top-width (en haut), border-right-
width (à droite), border-bottom-width (en bas), border-left-width (à gauche)
● Détail de l'épaisseur de la bordure avec border-width :
▪ Ex : P { border-width: 1px 3px 3px 1px }
07/10/2022
CSS :
Les bordures
■ Couleur :
● Couleur de la bordure : border-color
▪ Ex : DIV.remarque { border-color: green }
● Détail de la couleur pour chaque côté : border-top-color (en haut), border-right-color
(à droite), border-bottom-color (en bas), border-left-color (à gauche)
● Détail de la couleur de la bordure avec border-color :
▪ Ex : P { border-color: blue red red blue }
■ Raccourci pour le style, épaisseur et couleur :
● Raccourci pour toutes les propriétés de la bordure : border
▪ Ex : H2.chapitre { border: 5px solid red }
▪ Valeurs possibles : toutes les valeurs de border-width, border-style
et border-color
● Raccourci des propriétés de la bordure de chaque côté : border-top (en haut),
border-right (à droite), border-bottom (en bas), border-left (à gauche)
07/10/2022
CSS :
Les marges
■ Marge intérieure :
● La propriété padding spécifie la distance entre les bordures de la boîte
et l'élément au sein de cette boîte.
▪ Ex : P {padding: 7px}
● Pour les 4 cotés : padding-top, padding-bottom, padding-left, padding-right
▪ Ex : TD { padding-top: 5px; padding-bottom: 1cm }
■ Marge extérieure :
● La propriété margin permet de régler l'espacement entre l'élément et les
éléments voisins.
▪ Ex : DIV { margin: 8px }
● Pour les 4 cotés : margin-top, margin-bottom, margin-left, margin-right
▪ Ex : P { margin-top: 6pt }
07/10/2022
XHTML compatible HTML
■ Écrire en minuscules.
■ Mettre les valeurs des attributs entre guillemets.
■ Ajouter un caractère d'espacement avant la barre oblique d'une balise

d'élément vide ( <br /> ) .
■ Spécifier l'encodage de caractères de deux façons (entête xml et balise méta).

<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=UTF-8" />
■ Assigner une valeur aux attributs HTML booléens.

<input type="radio" checked="checked">
07/10/2022
Les limites d' HTML / XHTML
■ Langage de base du Web.
■ Langage simple, limité et statique.
■ D'autres langages, extensions, programmes sont venus se greffer à

HTML pour en augmenter les possibilités.
■ XHTML offre les aspects XML mais ce n'est pas suffisant pour
toutes les applications que l'on souhaite mettre en œuvre sur le web.
07/10/2022

HTML CSS

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

HTML CSS

Transféré par

Droits d'auteur :

Formats disponibles

Programmation Web

♦ Partie 1 : HTML - CSS

♦ Un document HTML est

► <LI> peut contenir plusieurs éléments, dont les éléments

► Si un élément <OL> est imbriqué, la numérotation est

♦ Cellule sur plusieurs lignes : Attribut ROWSPAN L12 L1

♦ Le résultat est un tableau entièrement imbriqué dans une seule

♦ Ça devient vite compliqué …

♦ L’insertion d’un lien :

HREF="fichier2.html" Dans le répertoire courant

HREF="rep1/rep2/fichier2.html" Dans le répertoire 2 niveaux en dessous

HREF="../../fichier2.html" Dans le répertoire 2 niveaux au dessus

- avec sujet et texte dans le corps du message :

S’il y a une application définie par défaut pour l’extension du fichier, le

Ex : <A HREF="page2.htm" TITLE="Lien vers le chapitre 2"> Suite </A>

Les coordonnées sont définies en pixels.

■ L’insertion d’un fichier audio se réalise par la balise :

<AUDIO SRC="fichier_son"> </AUDIO>

Le texte contenu entre les balises <AUDIO> et </AUDIO> sera

▪ Syntaxe : <SOURCE SRC="fichier_son">

■ L’insertion d’un fichier vidéo se réalise par la balise :

<VIDEO SRC="fichier_vidéo"> </VIDEO>

Le texte contenu entre les balises <VIDEO> et </VIDEO> sera

▪ Permettre au client la saisie de données

▪ Différentes actions possibles avec

Attributs de la balise <FORM> :

▪ name : définit un nom unique pour cet élément.

▪ maxlength : détermine le nombre maximal de caractères que l’utilisateur peut

<BUTTON TYPE="submit" NAME="enregistrer">

Le champs nommé «action» n’est pas visible dans le formulaire mais

<SELECT NAME="liste2" SIZE="3" MULTIPLE>

♦ HTML5 va au bout du concept de la séparation du contenu et de la présentation. Presque

♦ Sélecteur d’identification : permet de sélectionner de manière unique une balise ayant un

Exemple dans un formulaire :

▪ Quand l’utilisateur survole le champ par la souris (input:hover), son arrière-plan

Ces deux derniers pseudo-éléments (::before et ::after) s’utilisent avec la propriété

pc réelle 12pc Pica (1pc = 12 points = 1/6 inch)

cm réelle 10cm Centimètre

■ Mettre les valeurs des attributs entre guillemets.

■ Ajouter un caractère d'espacement avant la barre oblique d'une balise

■ Spécifier l'encodage de caractères de deux façons (entête xml et balise méta).

■ Assigner une valeur aux attributs HTML booléens.

■ Langage simple, limité et statique.

■ D'autres langages, extensions, programmes sont venus se greffer à

Vous aimerez peut-être aussi