HTML CSS

Développement web et XML
Prof. Hafida ZROURI

e-mail : [email protected]
Plan du cours
♦ Partie 1 : HTML - CSS
♦ Partie 2 : JavaScript
♦ Partie 3 : PHP
♦ Partie 4 : XML
01/02/2023 Prof. Hafida ZROURI 2

Développement web et XML
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 (Chrome, Mozilla Firefox, Internet
Explorer, Opera,…)
 créé dans un éditeur de pages web (NVU, Dreamweaver, …) ou tout éditeur de
texte (bloc-notes, Notepad++, sublime, …) 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. Si tous les navigateurs appliquent la même règle, le rendu sera
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 liens vers des ressources externes: : les balises <LINK>.
» Code CSS (balise <STYLE>…</STYLE>)..
» Code JavaScript (balise <SCRIPT>…</SCRIPT>).

▪ <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
Les balises META permettent de donner au navigateur des informations sur la page web à afficher. On
dit que ce sont des métadonnées.
<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">

Lien vers des ressources externes
▪ <LINK> : définit la relation entre le document courant et une ressource
externe.
▪ L’élément <LINK> peut être utilisé pour définir un lien vers une feuille de
style ou vers les icônes utilisées en barre de titre.
» Pour lier une feuille de style externe :
<LINK REL="stylesheet" HREF="style.css">
» Pour l'icône présentant le site dans l'onglet :
<LINK REL="icon" HREF="image.ico">
On indique le nom (et le chemin) du fichier grâce à l’attribut href. L’attribut
rel correspond à la relation entre la ressource et le document courant.

Exemple :
<!DOCTYPE html> <HTML>
<HEAD>
<META charset="UTF-8">
<TITLE>Cours de Programmation Web</TITLE>
<META name="author" content="Zrouri">
<META http-equiv="refresh"
content="5; URL=
http://esto.ump.ma">
<LINK rel="icon" href="esto.ico">
</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
♦ En HTML, tous les caractères spéciaux peuvent être remplacés par un code commençant par &
et terminant par ; (appelé entité HTML). En voici un exemple :
< : < > : > & : &
" : " € : € © : ©
♦ Les caractères accentués sont également des caractères spéciaux. Chacun a donc sa
représentation en HTML. 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 : L’encodage UTF-8 est aujourd'hui compris par tous les navigateurs courants. Il permet
d'encoder un nombre quasi illimité de caractères. En utilisant cet encodage dans la page web, on
s'affranchit de la conversion des caractères spéciaux en code HTML. Un "e" avec accent aigu pourra
donc être écrit directement "é" et non "é" dans le code source. (Pour écrire une page HTML en
UTF-8, il faut d'abord préciser lors de son enregistrement l'encodage souhaité. Il faudra ensuite

préciser dans l'entête de la page l'encodage choisi grâce à une balise META : <META charset="UTF-
8"> )
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> (Tous les espaces et les sauts de ligne du texte sont conservés.)
■ 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.
▪ <h1> est le plus important et <h6> est le moins important.
▪ 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 :
▪ Listes à puces, sans numérotation <UL>
▪ Éléments : <LI>Élément 1</LI>
- <UL>…</UL> (unordered list) <LI>Élément 2</LI>
</UL>
- <LI>…</LI> (list item) : élément de la liste
■ Listes ordonnées :
▪ Structure :
▪ Numérotation incrémentale suivi d'un point <OL>
▪ Éléments : <LI>Élément 1</LI>
- <OL>…</OL> (ordered list) <LI>Élément 2</LI>
</OL>
- <LI>…</LI> (list item) : élément de la liste
▪ La balise <OL> admet l’attribut REVERSED permettant d’inverser la
numérotation des marqueurs des éléments de liste et admet aussi 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> (description list)
▪ <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>
■ Remarque : il est possible de définir :
- un seul terme avec plusieurs définitions
- plusieurs termes avec une même définition
- plusieurs termes avec plusieurs descriptions
Exemple :
<!DOCTYPEhtml >
<HTML>
<HEAD>
<METAcharset="UTF-8" >
<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.
▪ En HTML, un tableau se construit ligne par ligne. Dans chaque ligne, on indique le
contenu des différentes cellules.

■ 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 :
<!DOCTYPEhtml >
<HTML>
<HEAD>
<METAcharset="UTF-8" >
<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>
L2
<TR> <TD> L2 </TD> </TR>
</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" w idth="150">
<TR>
<TD>
<T
ABLE border="1" cellspacing="0" width="100%">
<TR> <TD>1</TD><TD>2</TD> </TR> </TABLE> </TD> </TR>
<TR>
<TD>
<TABLE border="1" cellspacing="0" width="100%">
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> </TABLE> </TD> </TR>
<TR>
<TD>
<TABLE border="1" cellspacing="0" width="100%">
<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
♦ La balise <A> permet d'insérer un lien hypertexte. Elle possède au moins l'attribut HREF
qui contient l'adresse de destination du lien. La zone cliquable est encadrée par la balise
ouvrante <A> et la balise fermante </A> :
<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
▪ La balise <A> possède aussi l’attribut TARGET qui définit la fenêtre dans laquelle la page
cible doit s'afficher :

- TARGET="_self" : le contexte de navigation actuel. (Par défaut) -
TARGET="_parent" : le contexte de navigation parent de celui en cours.
S'il n'y a pas de parent, il se comporte comme _self.
- TARGET="_blank" : un nouvel onglet ou une nouvelle fenêtre
- TARGET="nomDuCadre" : le cadre (iframe) qui possède NAME="nomDuCadre"

Liens hypertextes
Exemple :
Remarque : Par défaut, le lien non visité s'affiche en bleu souligné et le lien visité s'affiche en violet.
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> 

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 dont la valeur doit être unique pour l'ensemble du document.
● Déclaration de l’ancre : <A ID="valeurID"></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="#valeurID ">…</A> Ex : <A
HREF="#menu" > Retour au menu </A>
● Lien vers une ancre située dans une autre page :
<A HREF="nomFichier#valeurID ">…</A> Ex <A HREF="page.html#menu>…</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>
Remarque : l’attribut TITLE est un attribut universel qui peut être défini sur tous les
éléments HTML.

Images
♦ Des images peuvent être insérées dans un document HTML, et elles sont au
format GIF (.gif), JPEG (.jpg ou .jpeg), 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">

<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. Il est possible de 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 (ou label). On peut
la placer où on veut, en général juste à gauche ou à droite du champ. Son utilisation
permet aux navigateurs d’associer cette étiquette au champ de formulaire. Ainsi, un clic
sur l’intitulé donnera le focus au champ de formulaire.
▪ Pour associer un élément <label> avec un élément du formulaire, il faut fournir un
identifiant à l'élément du formulaire sous la forme d'un attribut id. Ensuite, on peut
renseigner l'attribut for de l'élément <label> avec la valeur de cet identifiant. On peut
également créer un lien implicite en imbriquant l'élément du formulaire directement au
sein d'un élément <label>. Dans ce cas, les attributs for et id ne sont pas nécessaires.
Exemple :
<LABEL FOR="idPass"> Mot de passe : </LABEL>
<INPUT TYPE="password" NAME="pass" SIZE="16" ID="idPass">
Ou : Label
<LABEL> Mot de passe :

<INPUT TYPE="password" NAME="pass" SIZE="16"></LABEL>

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 par exemple défini par l'attribut 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>

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:
</HEAD> justify }
<BODY> </STYLE>
<P>Voici un paragraphe justifié.</P>

<P>Voici un autre paragraphe justifié.</P>

CSS :
</BODY></HTML

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

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>

CSS :
</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ègle @import se place avant tout autre déclaration de style.

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 précis <… ID="texte">

♦ 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. Exemple :
Dans le <HEAD> de la page HTML :
< STYLE type="text/css">
.rouge { color: red; }
.centrer { text-align: center; }
.gras { font-weight: bold; }
</ STYLE >
Dans le <BODY> de la page HTML :
<P class="gras rouge centrer">HTML-CSS</P>
→ Le contenu du paragraphe est gras, rouge et centré.

♦ Sélecteur descendant : permet de sélectionner un ou des enfants directs ou indirects.
Syntaxe : X Y (avec X et Y sont l’un des types de sélecteur) Exemple :
P { color: red }
P .texte { color: blue }
</STYLE>
<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.

♦ 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

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

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

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

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

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.

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

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

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

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>

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.
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; } Dans
le <HEAD> de la page HTML :
<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> comme <p>

CSS :
Quelques 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, ...) px entière 200px Pixel
Relatives
(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 x pt entière 14pt Point
(1pt = absolues
1/72 inch = 1/12 pica)
pc réelle 12pc Pica (1pc = 12 points = 1/6 inch)
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.
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 }

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 (valeur par défaut) 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 }

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, loweralpha,
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 }

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)

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
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-
rightwidth (à droite), border-bottom-width (en bas), border-left-width (à gauche) ●
Détail de l'épaisseur de la bordure avec border-width :

CSS :
▪ Ex : P { border-width: 1px 3px 3px 1px }
▪ Ordre : 1 haut / 2 droite / 3 bas / 4 gauche
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 } ▪ Ordre : 1 haut / 2 droite / 3 bas / 4 gauche ■
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 }

CSS :
▪ 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.

OPENCLASSROOM
Background-image :
Background-image :url(‘chemin d’image’)
Background-attachement: fixe
Background-size:cover
Background-position:top/bottom
Opacity: 0…1
Dé gradation de couleur:
linear-gradient(to right/to left/ radial, #8360c3, #2ebf91);gradation de couleur :
Bordure
Border: npx type couleur
Border-radius: npx
Ombre
Box-shadow: décalage hor décalage ver adoucissement du dégradé couleur
Text-sadow: …
La structure d’un site :
<header> :contient un logo, titre ou une

bannière, il ne doit pas être trop chargé
<footer> :contient les liens de contact,
information d’auteur ou la politique du site
<nav> :le menu, il doit être dans la même

Position (haut hor, gauche ver)
<main> :le contenue de la page, il peut contenir plusieurs <section>

<aside> :contenue complémentaire comme les liens vers d’autres site
Flexbox :comme une bibliothèque à ordonner

Display :flex les render flexible
Flex-direction : row/column/row-reverse/column-reverse placer horizentallement/verticallement/inversé
Justify-content : space-around
Center
flex-start
flex-end
space-between
flex-wrap: wrap permet un retour à la ligne qui dépend de la taille le d’écran
align-items : (pour l’allignement d’axe secondaire)
:stretch l
: flex-start
: flex-end
: center
Align-content :stretch
:flex-start/end
:center
:space-between/ around
gap : npx pour espacer entre les éléments
order : n pour donner un emplacement a un élément (1er 2eme 3eme ,….)
display : grid pour pouvoir faire cette structure=>

grid-temple-column : ex: 2px 2px 2px (on a declare la taille 3 column)
grid-template-rows :
gap: npx l’espace entre les cellule
grid-column-start/end : n pour spécifier la taille a couvrir
position :fixed/sticky
<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media screen and (max-width:npx)
{…}
Overflow: auto pour les long texte

SITE UTILE :
Image : unsplash
Couleur : color picker
Dégradation de couleur: uigradients
Bodure : Fancy-border-raduis

HTML CSS

Transféré par

Droits d'auteur :

Formats disponibles

HTML CSS

Transféré par

Informations du document

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

Développement web et XML

Prof. Hafida ZROURI

01/02/2023 Prof. Hafida ZROURI 2

01/02/2023 Prof. Hafida ZROURI 4

01/02/2023 Prof. Hafida ZROURI 5

01/02/2023 Prof. Hafida ZROURI 7

01/02/2023 Prof. Hafida ZROURI 8

01/02/2023 Prof. Hafida ZROURI 9

01/02/2023 Prof. Hafida ZROURI 10

01/02/2023 Prof. Hafida ZROURI 11

01/02/2023 Prof. Hafida ZROURI 12

01/02/2023 Prof. Hafida ZROURI 13

01/02/2023 Prof. Hafida ZROURI 14

01/02/2023 Prof. Hafida ZROURI 15

Exemple : ça va Jérôme ?&ccedil;a va J&eacute;r&ocirc;me ?

01/02/2023 Prof. Hafida ZROURI 16

Mise en forme des caractères

Mise en forme des paragraphes

■ Séparation de contenu : <HR>

01/02/2023 Prof. Hafida ZROURI 18

Listes : listes ordonnées/non ordonnées

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

01/02/2023 Prof. Hafida ZROURI 20

01/02/2023 Prof. Hafida ZROURI 21

Listes : listes de définitions

01/02/2023 Prof. Hafida ZROURI 23

01/02/2023 Prof. Hafida ZROURI 24

01/02/2023 Prof. Hafida ZROURI 25

01/02/2023 Prof. Hafida ZROURI 26

♦ Cellule sur plusieurs lignes : Attribut ROWSPAN L12 L1

01/02/2023 Prof. Hafida ZROURI 27

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

♦ Ça devient vite compliqué …

01/02/2023 Prof. Hafida ZROURI 28

01/02/2023 Prof. Hafida ZROURI 29

<A HREF="document"> Libellé </A>

01/02/2023 Prof. Hafida ZROURI 30

01/02/2023 Prof. Hafida ZROURI 31

01/02/2023 Prof. Hafida ZROURI 32

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

01/02/2023 Prof. Hafida ZROURI 33

01/02/2023 Prof. Hafida ZROURI 34

- avec sujet et texte dans le corps du message :

01/02/2023 Prof. Hafida ZROURI 35

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

01/02/2023 Prof. Hafida ZROURI 37

01/02/2023 Prof. Hafida ZROURI 38

01/02/2023 Prof. Hafida ZROURI 39

01/02/2023 Prof. Hafida ZROURI 41

01/02/2023 Prof. Hafida ZROURI 42

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

01/02/2023 Prof. Hafida ZROURI 43

01/02/2023 Prof. Hafida ZROURI 44

■ 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

01/02/2023 Prof. Hafida ZROURI 45

Exemple : ça va Jérôme ?ça va Jérôme ?