HTML Css

Programmation Web
Prof. Hafida ZROURI

e-mail : [email protected]
Plan du cours
♦ Partie 1 : HTML - CSS
♦ Partie 2 : JavaScript
♦ Partie 3 : PHP
26/11/2020 Prof. Hafida ZROURI 2

Programmation Web
Partie 1 : HTML-CSS
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
♦ La page d'accueil d'un site web (la page principale) est en général appelée index.html.
Cela permet d'atteindre le site en tapant juste l'URL (sans taper le nom de la page
à la suite)
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>

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>

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>

Premier exemple HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Mon premier exemple HTML </TITLE>
</HEAD>
<BODY>
Bonjour tout le monde !
</BODY>
</HTML>

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="nom|code hex" : Couleur de fond
de la page « la valeur de cet attribut peut être le nom de la couleur en anglais ou son code
hexadécimal », TEXT="nom|code hex" : Couleur du texte, BACKGROUND="nom du
fichier" : 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.
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">
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>

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.
♦ Ils ne peuvent jamais apparaître à l'intérieur d'une balise ouvrante ou
fermante.

Les caractères accentués et 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é é.

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>
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.

Listes : listes ordonnées/non ordonnées
■ Listes non ordonnées : ▪ Structure :
<UL>
▪ Listes à puces, sans numérotation
<LI>Élément 1</LI>
▪ Éléments :
- <UL>…</UL> (unordered list)
- <LI>…</LI> (list item) : élément de la liste </UL>
- 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 :
- <OL>…</OL>
- <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
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.

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>
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>

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>
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é.
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>
«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>
<TR> <TD> L2 </TD> </TR>
L2
</TABLE>

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é …

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>
…
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

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> 

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

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://esto.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>
Remarque : on peut cibler directement un élément du document désigné par son identifiant
unique id. Ex : <H1 ID="menu">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="page.html#menu"> Menu de page </A>
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:[email protected]">Contacter moi</A>
<A HREF ="mailto:[email protected]?subject=Cours">Contacter moi</A>
<A HREF="mailto:[email protected]?subject=Cours&body=Les liens">Contacter moi</A>

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.

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>

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">

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://esto.ump.ma"> <IMG SRC="logo_EST.gif"> </A>

Images
■ Les images réactives :
▪ Une image réactive est une image divisée en plusieurs zones pointant vers différents
documents.
▪ 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">
Images
♦ La balise <AREA> :
<AREA SHAPE="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.

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

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 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.
♦ Syntaxe : <IFRAME SRC="…" HEIGHT="…" WIDTH="…"> … </IFRAME>

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>

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.

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>
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:

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.

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.

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>
Le multimédia
Affichage dans plusieurs navigateurs :

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.

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>

Le multimédia
Résultat dans Google Chrome qui reconnaît la balise video et le format mp4 :

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.

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"
-…

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>
Le multimédia
Affichage dans plusieurs navigateurs :

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

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.

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:[email protected]"
ENCTYPE="text/plain"> … </FORM>

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

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>

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.

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.

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>

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>
Remarque : Si la valeur de VALUE n'est pas définie, ce sera la chaîne de

caractères "on" qui sera envoyée.

Les formulaires
■ Case à cocher : <INPUT TYPE="checkbox" … >
Les cases à cocher permettent un ou plusieurs choix dans une série.
Attributs supplémentaires : NAME, VALUE et CHECKED.
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>
Remarque : Si la valeur de VALUE n'est pas définie, ce sera la chaîne de

caractères "on" qui sera envoyée.

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>

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).
▪ Désactiver/Activer un bouton : l’attribut DISABLED permet de désactiver le bouton
au chargement de la page. On peut activer/désactiver le bouton lors de la navigation
sur la page avec JavaScript en modifiant la valeur de l'attribut disabled pour la
passer de true à false et vice versa (par exemple avec une instruction telle
que btn.disabled = true).
▪ Attributs supplémentaires : NAME, VALUE
Exemple :
<INPUT TYPE="button" VALUE="Note" ONCLICK="window.open('note.html');">
OU :
<BUTTON TYPE="button" ONCLICK="window.open('note.html');"> Note
</BUTTON>

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.
Attributs supplémentaires : NAME, WIDTH, HEIGHT, ALT
Exemple :
<INPUT TYPE="image" NAME="validation" SRC="disquette.png"
WIDTH="49" HEIGHT="45" ALT="Valider">
OU :
<BUTTON TYPE="submit" NAME="validation">
<IMG SRC="disquette.png" WIDTH="49" HEIGHT="45" ALT="Valider">
</BUTTON>

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="hidden" NAME="action" VALUE="annulation">
<INPUT TYPE="submit" VALUE="Envoyer">
</FORM>
suite

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.

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.

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>

Les formulaires
▪ Attributs supplémentaires :
Attribut ACCEPT : 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
Attribut MULTIPLE : lorsque cet attribut est présent, il indique que plusieurs fichiers
peuvent être sélectionnés.
Exemple :
<form action="testFichier.php" method="post" enctype="multipart/form-data">
<input type="file" name="fich" accept="image/*, .pdf" multiple>
</form>
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>

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.

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).
▪ 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.

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>

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>

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>

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">

Les feuilles de styles en cascade
Cascading Style Sheet
(CSS)

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.

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
▪…
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 }

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>

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"
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.
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.
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">

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">
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.

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

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.

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".

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.

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.

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

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>

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.

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.

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

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) ;}

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>

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.
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 :
1- Les feuilles de style en ligne 2- Les feuilles de style internes
3- Les feuilles de style externes 4- Propriétés du navigateur
♦ En cas de conflit, plus une règle est spécifique, plus 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
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
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, ...)
Relatives
px entière 200px Pixel (un point sur l’écran de l’ordinateur)

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é.

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 }

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 }

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 }

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 }

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 }

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)
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)

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
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 : 1 haut / 2 droite / 3 bas / 4 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 }
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)

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 }

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">

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.

HTML Css

Transféré par

Droits d'auteur :

Formats disponibles

HTML Css

Transféré par

Informations du document

Description originale:

Titre original

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

Prof. Hafida ZROURI

♦ Partie 1 : HTML - CSS

26/11/2020 Prof. Hafida ZROURI 2

26/11/2020 Prof. Hafida ZROURI 5

26/11/2020 Prof. Hafida ZROURI 6

26/11/2020 Prof. Hafida ZROURI 7

26/11/2020 Prof. Hafida ZROURI 8

26/11/2020 Prof. Hafida ZROURI 11

26/11/2020 Prof. Hafida ZROURI 12

26/11/2020 Prof. Hafida ZROURI 13

■ Séparation de contenu : <HR>

26/11/2020 Prof. Hafida ZROURI 15

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

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

26/11/2020 Prof. Hafida ZROURI 17

26/11/2020 Prof. Hafida ZROURI 19

♦ Cellule sur plusieurs lignes : Attribut ROWSPAN L12 L1

26/11/2020 Prof. Hafida ZROURI 23

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

♦ Ça devient vite compliqué …

26/11/2020 Prof. Hafida ZROURI 24

♦ L’insertion d’un lien :

26/11/2020 Prof. Hafida ZROURI 26

26/11/2020 Prof. Hafida ZROURI 27

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

26/11/2020 Prof. Hafida ZROURI 28

- avec sujet et texte dans le corps du message :

26/11/2020 Prof. Hafida ZROURI 30

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

26/11/2020 Prof. Hafida ZROURI 31

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

26/11/2020 Prof. Hafida ZROURI 32

26/11/2020 Prof. Hafida ZROURI 33

■ Lien sur une image :

26/11/2020 Prof. Hafida ZROURI 34

Les coordonnées sont définies en pixels.

26/11/2020 Prof. Hafida ZROURI 36

26/11/2020 Prof. Hafida ZROURI 37

♦ La balise <IFRAME> possède les attributs :

♦ Syntaxe : <IFRAME SRC="…" HEIGHT="…" WIDTH="…"> … </IFRAME>

26/11/2020 Prof. Hafida ZROURI 38

26/11/2020 Prof. Hafida ZROURI 39

■ 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

26/11/2020 Prof. Hafida ZROURI 40

26/11/2020 Prof. Hafida ZROURI 42

26/11/2020 Prof. Hafida ZROURI 43

▪ Syntaxe : <SOURCE SRC="fichier_son">

26/11/2020 Prof. Hafida ZROURI 44

26/11/2020 Prof. Hafida ZROURI 46

■ 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

26/11/2020 Prof. Hafida ZROURI 47