Cours HTML Css
Transféré par
ibrahimmagroun75Cours HTML Css
Transféré par
ibrahimmagroun75Sommaire
Pages 2……..16 Rappel html
Pages 18……..58 Feuille de style css
Pages 59…. 68 Animation,trasformation et transition avec css3
Pages 69…. 72 Complément de cours html
Pages 73……84 Formulaires
Pages 85…...91 Structure générale
Annexes html,css
1
HTML5 +css3
HTML5
Définitions
Le Web a été inventé par Tim Berners-Lee au début des années 1990, c'est un service Internet qui permet
la recherche d'informations dans les sites web.
Un site web est un ensemble de pages web reliées entre elles par des liens hypertexte
Une page web contient des informations (texte, image, son, vidéo)
Un navigateur web est un programme qui permet de naviguer sur le Web
Activité 1: ouvrir un navigateur web ,visiter un site web
exemple :[Link] puis cliquer avec le bouton droit de la souris à l’intérieur de la
page et choisir inspecter.
Ce code on l'appelle html
HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son
rôle est de gérer et organiser le contenu de la page (paragraphes, titres…) ;
C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce que vous verrez
s'afficher à l'écran.
Activité 2:affichage sans style :
Cliquer sur alt ,choisir affichage puis style
de page→sans style
Page avec style
Page sans style
2
CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : permet de mettre en forme la page web
(couleur, taille…). Ce langage est venu compléter le HTML en 1996.
Javascript le rend
CSS l'embellit dynamique
La structure
Un fichier HTML contient la Un fichier CSS contient le style de la Un fichier JavaScript détermine les
structure de la page elle-même. page. Il vous permet de changer les éléments dynamiques et interactifs
couleurs, le positionnement et plus de la page. Il détermine ce qui se passe
encore.. lorsque les utilisateurs cliquent,
survolent ou tapent dans certains
éléments.
. Pour créer des pages web, on utilise des langages de conception de site web parmi lesquels : HTML
,CSS et javascript.
Il y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont HTML5 et
CSS3
L'éditeur de texte :
Ce sont des programmes dédiés à l'écriture de code. On peut, en général, les utiliser pour de multiples
langages, pas seulement HTML et CSS.
Exemples :
Sublime Notepad++ jedit visual studio BlueGriffon un Page breeze Adobe Dreamweaver.
Text, logiciel libre code logiciel libre Solution commerciale
Activité 3: Lancer Visual code et choisir nouveau fichier, et Sélectionner un langage « html »
Puis écrire le symbole ! et taper entrée.
.
Que remarquez-vous ?
3
✓ Le document HTML contient un ensemble de balises tels que, <html>, <body>, <head>, …
Modifier le code affiche exemple :ajouter un titre page1 et modifier le contenu du page.
I-Structure de base d’une page HTML
Un document HTML commence par la balise <HTML> et finit par la balise </HTML>. Il contient également un
en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la page. L'en-tête est
délimité par les balises <HEAD> et </HEAD>. Le corps est délimité par les balises <BODY> et </BODY>.
Balise Rôle
<!DOCTYPE html> Elle indique qu'il s'agit bien d'une page web HTML
html Elle englobe tout le contenu de la page.
head Elle sert à définir quelques informations générales sur la page.
4
<meta L’encodage (charset) détermine comment les caractères spéciaux vont
charset="utf-8" /> s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
<meta name="viewport" La propriété width contrôle la taille de la zone d'affichage. Elle peut être
content="width=device-width, définie sur un nombre spécifique de pixels comme width=600 ou sur la valeur
initial-scale=1" />
spéciale device-width, qui est la largeur de l'écran en pixels CSS à une échelle
de 100%
title Définit le titre de la page web qui sera affiché dans la barre du titre du navigateur.
Elle est utilisée pour définir le contenu de la page Web.
body
II-Organisation et mise en forme d’un texte
Activité4:Lancer Visual code
1. Dans le répertoire racine E:\ , créer un dossier qui porte votre nom.
2. Dans ce dossier, créer un fichier nommé activité[Link]
3. Saisir le code HTML suivant, enregistrer et tester :
Pour visualiser le résultat dans un navigateur web cliquer sur F5,puis choisir le navigateur ou cliquer sur
Exécuter puis choisir démarrer le débogage
5
Quelques balises html :
Balise Fonction Exemple
<b>< /b> Gras
<i></i> italique
<br> Saut de ligne
<u></u> Souligné
<FONT SIZE= "**" Mise en forme
COLOR="#****" des caractères
FACE="****"> ……</FONT>
<SUP>…..</SUP> Exposant
<HR SIZE= "**" COLOR="#****" Ligne de séparation
WIDTH="****"
ALIGN="CENTER/LEFT/RIGHt">
<p> …</p> Nouveau
paragraphe
<h1> </h1> Créer des titres ( 6
…… niveaux de titres)
<h6> </h6>
<em> </em> Mettre le texte en
valeur ( italique )
<strong> Mettre le texte en
valeur ( gras)
<mark> Surligner le texte
<ul> Listes non ordonnées
<li>……</li> ou listes à puces
</ul> <ul> </ul> : pour
délimiter toute la liste
<li> </li> : pour
délimiter un élément
de la liste
6
<ol> Liste ordonnée.
<li>……</li> Numérotation par
</ol> défaut : 1. 2. …..
<dl> Liste de données
<dt>…..</dt>
<dd>…..<dd>
</dl>
Remarques :
1) On distingue deux types de balises :
Balises paires : <balise>........</balise> : elles s'ouvrent et se ferment pour délimiter le contenu
Balises orphelines : <balise /> : on ne les insère qu'en un seul exemplaire
2) Un commentaire : Les commentaires sont des notes, des informations et des détails qui accompagnent
le code source et qui ne s’afficheront pas sur la page web → Cela permet une meilleure relecture du code.
La forme d’une balise contenant un commentaire est : <!-- commentaire -->
3) Les attributs : les options de balise, informations supplémentaires : <balise attribut="valeur">
Exemples :
<ul type="square"> : pour donner des puces carrés.
<ol type="A"> : numérotation avec des lettres majuscules
<ol type="a"> : numérotation avec des lettres minuscules
<ol type="I"> : numérotation avec des chiffres romains
Application 1 :
Compléter le code suivant par les balises adéquates pour assurer les taches décrites ci dessous
<!DOCTYPE html>
<html> ✓ 1) Ajoutez un titre de niveau 1
<head> ✓ 2) A la suite du titre, ajoutez un paragraphe
<meta charset="utf-8" /> indiquant "la définition de html5:"
<title>Html 5</title>
7
</head> ✓ 3) Ajoutez une liste ordonnée d'au moins trois
<body> différences avec html que vous allez rechercher
</body> ✓ 4) Mettez en valeur (emphase forte) la première
</html> différence
Rappel
L’attribut background de la balise body permet de mettre une image comme arrière-plan d'une page.
Exemple:<body background="images\[Link]">
III)Insertion d’objets :
1) Les images :
❖ Les différents formats d'images
Il existe plusieurs formats d'images adaptées au Web :
- JPEG : pour les photos ;
- PNG : pour toutes les autres illustrations;
- GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être animé.
La balise doit être accompagnée de deux attributs obligatoires :
- src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin
absolu (ex. :[Link] soit mettre le chemin en relatif(ex : src="images/[Link]")
- alt : cela signifie « texte alternatif ». c'est-à-dire un court texte qui décrit ce que contient l'image. Ce
texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée
Cela aide aussi les robots des moteurs de recherche pour les recherches d'images.
❖ Ajouter une infobulle
- L'attribut permettant d'afficher une bulle d'aide est title. Cet attribut est facultatif (contrairement à alt).
- Exemple :
<p> - Survolez la photo avec la souris pour voir
Voici une photo de la montagne :<br /> l'infobulle apparaître.
<img src="images/[Link]" alt="Photo de
montagne"
title="C'est beau les Alpes quand même !" />
</p>
8
❖ Les figures
• L'élément HTML <figure> représente une figure (un schéma), qui peut être accompagné d'une légende
grâce à l'élément <figcaption>. C'est souvent une image, une illustration, un diagramme, un fragment de
code ou un schéma auquel il est fait référence dans le texte principal mais qui peut être utilisé sur une
autre page ou dans une annexe sans que cela affecte le contenu principal.
• Quand dois-je placer mon image dans un paragraphe et quand dois-je la placer dans une figure ?
- Si elle n'apporte aucune information (c'est juste une illustration pour décorer) : placez l'image
dans un paragraphe<p>.
Exemple :
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig.1 - Trulli, Puglia, Italy.
</figcaption>
</figure>
- Si elle apporte une information : placez l'image dans une figure <figure>.
Activité 5: Ajouter une image du logo html5
url absolue url relative :
Le code correspondant à l’insertion de l’image en rendant l’url relative au document
<img src ="adresse" width="largeur" height="hauteur" border="taille" alt="texte"
align="alignement">
src ="adresse" : définit l'adresse absolue ([Link] ou relative de l'image à afficher.
9
width ="largeur" et height ="hauteur" : définissent la largeur et la hauteur de l'image en pixels.
alt ="texte": cela signifie « texte alternatif », décrit ce que contient l'image. Ce texte sera affiché à la
place de l'image si celle-ci ne peut pas être téléchargée (cela arrive).
border ="taille": définit la largeur de la bordure autour de l'image.
align ="alignement" permet de définir l'alignement de l'image ("left", "center","right").
2) L’audio :
Quelques formats audio :
✓ MP3 : il est très utilisé aujourd'hui.
✓
✓ AAC
. : utilisé majoritairement par Apple sur iTunes, ( iPod, iPhone et autres iPad )
✓ WAV (format non compressé) : car le fichier est très volumineux, on ne l'utilise pas
Activité 6: Ajouter un fichier audio ‘song.mp3’
Code source html :
➔ Pour insérer un audio (exemple : musique.mp3), on utilise la balise suivante :
<audio src="musique.mp3"></audio>
➔ Autres attributs :
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
width : pour modifier la largeur de l'outil de lecture audio.
loop : la musique sera jouée en boucle.
autoplay : la musique sera jouée dès le chargement de la page.
3) Insertion d'une vidéo
➔ Quelques formats : mp4, H.264, Ogg Theora webm…
➔ Pour insérer un audio (exemple : video.mp4), on utilise la balise suivante :
➔ Autres attributs :
poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend
la première image de la vidéo.
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
width : pour modifier la largeur de la vidéo.
height : pour modifier la hauteur de la vidéo.
loop : la vidéo sera jouée en boucle.
autoplay : la vidéo sera jouée dès le chargement de la page
4) Insertion d'un tableau
Tableau→insertion
10
Activité 7: Ajouter un tableau
1) Créer un nouveau fichier HTML et l’enregistrer avec le nom activité[Link]
2) Ajouter les lignes suivantes dans la balise body et visualiser votre travail.
<table border="1">
<tr>
<th> le langage html5 </th>
<th> le langage css3 </th>
</tr>
<tr>
<td> structure</td>
<td>le design </td>
</tr>
</table>
Remarques
1-pour mettre en forme le document html cliquer avec le bouton droit de la souris et choisir
2-On peut installer une extension pour avoir un aperçu direct au fur et à mesure qu’on travaille (cliquer
sur extension puis rechercher ou choisir l’extension voulu)
Exemple :HTML Preview
Utilisation de html preview cliquer ici
3) En déduire le rôle de chaque balise.
La définition d'un tableau : <table>…</table>
La définition d'une ligne : <tr>…</tr>
La définition d'une cellule contenant l'en-tête du tableau : <th>…</th>
La définition d'une cellule : <td>…</td>
11
Remarques : la balise <caption> …</caption> permet d’ajouter un titre au tableau
Colspan et rowspan permet de fusionner des colonnes et des lignes.
Balise TD
Attribut Type de valeur Description
colspan entier Le nombre de colonnes à fusionner
rowspan entier Le nombre de lignes à fusionner
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Month</th>
<th>Savings</th>
</tr> Toujours on met colspan et rowspan dans
<tr> la cellule en haut à gauche de la zone à
<td>February</td> fusionner.
<td colspan="2"
rowspan="2">$80</td>
<td>$80</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum:
$180</td>
<td colspan="2">Sum:
$180</td>
</tr>
</table>
</body>
</html>
12
IIICréation des liens hypertexte
LIEN HYPERTEXTE
Lien absolu :
Vers un autre site
Ou une autre page Lien relatif : Lien vers un ancre :
du même site Vers une autre page du même site Vers un endroit dans la même page
Pour créer un lien hypertexte, on utilise la balise :
1) Le lien absolu <a href= "adresse cible"> texte </a>
Activité 8: Saisir et tester le code HTML donné ci-dessous.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> liens </title>
</head>
<body>
<h1> Les liens en HTML </h1>
<p> Rechercher avec Google :
<a href ="[Link] > [Link] </a> </p>
<p> Ouvrir Facebook
<a href="[Link] Facebook </a></p>
</body>
</html>
Les attributs :
- target : pour spécifier la fenêtre d'affichage du lien. ( "_blank","_parent","_self", "_top").
- Title : permet d’afficher un texte au survol du lien.
Exemple :
<a href ="[Link] title ="Lien vers le moteur de recherche google" target="_blank">
[Link] </a>
2) Le lien relatif
Pour se déplacer vers une autre page du même site, utiliser la balise : < a href = "page cible"> </a>
13
Exemple : <a href ="[Link] " > Page d’accueil </a>
3) Le lien vers un ancre
1. Il faut créer une ancre en ajoutant l'attribut id pour « marquer » l’endroit destination dans la page :
<h2 id="ancre">texte</h2> <a href="#ancre">
2. Faire un lien vers l'ancre comme ceci :
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
Activité 9: dans le fichier de l’activité4, créer le lien : « cliquer ici pour aller vers le bas de la page »
<body>
<h1> Les liens en HTML </h1>
<p><a href="#bas">cliquer ici pour aller
vers le fin de la page</a></p>
<p> Rechercher avec Google :
<a href="[Link]
[Link] </a>
</p>
<p> Ouvrir Facebook
<a href="[Link]
Facebook </a>
</p>
<h3 id="bas"> fin de la page </h3>
</body>
Propriété interpréter
<a href=” “ target=”_self”> le contexte de navigation actuel. (Par défaut)
<a href=” “ target=”_parent”> le contexte de navigation parent de celui en cours. S'il n'y a pas de
parent, il se comporte comme _self.
<a href=” “ target=”_blank”> généralement un nouvel onglet, mais les utilisateurs peuvent
configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.
14
TP1 ( HTML5)
1) Lancer l’éditeur visual code
2) Lancer un nouveau fichier (ctrl+ N),puis
3) Enregistrer votre travail dans D:/votre dossier/html5 et css3/ [Link]
4) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.:
Remarque :on peut tapper un point d’exclamation puis tapper rntré pour créer une page html de
base
5) Ajouter les lignes suivantes à la fin du fichier tp1et visualiser votre travail.
<h3>Évolutions du langage</h3>
<ul><li>1989-1992 : Origine</li></ul>
</body>
En déduire le rôle de chaque balise.
…………………………………………………………………………………………
…………………………………………………………………………………………
6) Compléter le reste de la liste sachant qu’elle contient aussi :
o 1993 : HTML 1.0
o 1995-1996 : HTML 2.0
o 1997 : HTML 3.2. et 4.0 o 2000 :
XHTML
o De 2007 à nos jours : HTML 5 et abandon du XHTML 2
7) Effectuer les modifications présentées dans le tableau ci-dessous sur votre code
HTML.
Modification Résultat
<ul type="square">
<ul type="circle">
8) Remplacer la balise la balise ul par la balise ol et observer les résultats obtenus.
15
En déduire le rôle de chaque balise ol.
…………………………………………………………………………………………………..
………………………………………………………………………………………………
9) Effectuer les modifications présentées dans le tableau ci-dessous sur votre codeHTML.
N° Modification Résultat
1 <ol type="A">
2 <ol type="a">
3 <ol type="I">
4 <ol type="i">
Le résultat final de la page est le suivant :
10)Rechercher comment modifier le couleur du fond de votre page
…………………………………………………………………………………………………………………………………
11)Rechercher comment modifier le couleur du paragraphe parlant de html5 (couleur de police :jaune)
…………………………………………………………………………………………………………………………………
12)rechercher la définition de css et ajouter ce dernière dans un nouveau paragraphe
…………………………………………………………………………………………………………………………………
Remarque :
1-Ctrl+s :pour sauvegarder
2-Ctrl+shift+s :pour sauvegarder un fichier (html,css,…)dans un nouveau
emplacement.
3-On peut ajouter une balise avec deux méthodes :
Méthode1 : j’écrit le nom du balise avec le signe inférieur h1 :<h1>
Méthode2 : j’écrit le nom du balise sans le signe inférieur et je choisis parmis la liste
des balises proposées et je valide
16
LES FEUILLES DE STYLE
INTRO :
Le langage CSS (Cascading Style Sheets : Feuilles de Style en Cascade) a été développé par le W3C (World
Wide Web Consortium) à partir de 1996.
Il a pour but de séparer totalement la présentation d'une page Web de son contenu (c'est à dire du langage
HTML), et de faciliter ainsi la maintenance et l'accessibilité d'un site.
Activité1 :
1) Lancer l'éditeur Visual code studio
2) Créer un nouveau fichier et l’enregistrer dans votre dossier de travail sous le nom [Link]
3) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.
…………………………………………………………………………………………………..………
………………………………………………………………………
…………………………………………………………………………………………
4) Effectuer les modifications ci-dessous sur la balise p.
<p style ="color:blue; font-size:24px; font-family:arial;">
5) Visualiser votre travail, que remarquez-vous ?
style est un attribut.
- On respecte la syntaxe du CSS à l’intérieur de l’attribut style en utilisant les deux-points et les points
virgules.
6) Ajouter les lignes suivantes dans la balise head.
<style>
p{
color:blue;
font-size:24px;
font-family:arial;
}
</style>
</head>
7) Visualiser votre travail, que remarquez-vous ?
Le code CSS est écrit directement dans une balise <style> à l'intérieur de l'en-tête <head>.
8) Créer un nouveau fichier CSS et l’enregistrer dans votre dossier de travail sous le nom style.
9) Déplacer le contenu de la balise style dans le fichier [Link].
17
10) Ajouter la ligne suivante dans la balise head.
<link rel="stylesheet" href="[Link]"/>
</head>
11) Visualiser votre travail, que remarquez-vous ?
………………………………………………………………………………………………
………………………………………………………………………………………………
I. PRINCIPE :
Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de feuilles de style, c'est
qu'il faut reprendre toutes les pages html une à une pour modifier une police de caractère ou une couleur de
fond... Avec les "Cascading Style Sheets" (CSS), ce lourd handicap est résolu.
C'est dans la feuille de style CSS que l'on va déclarer toute la mise en forme des pages : le positionnement des
éléments, l'image de fond, les polices de caractère, les couleurs,etc.
Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément, cela se répercutera
immédiatement sur toutes les pages html.
Où écrit-on le code CSS ?
Vous avez le choix entre trois endroits différents :
Interne En ligne Externe
1- Dans l'en-tête <head> du 2- Directement dans les balises 3- Dans un fichier .css
fichier HTML : du fichier HTML via un attribut (méthode la plus
style (méthode la moins recommandée
<head> recommandée).
<style>
p{ <body>
color:blue; …
font-size:24px; <p style ="color:blue ;
font-family:arial; font-size:24px;
} font-family:arial;" >
</style> contenu du paragraphe
</head> </p>
Dans un fichier .css (recommandé)
On écrit le code CSS dans un fichier spécial ayant l'extension .css
(contrairement aux fichiers HTML qui ont l'extension .html)
Dans la balise <head>, on ajoute la BALISE LINK :
18
<link rel="stylesheet" href="Chemin d'accès/NOM_FICHIER.css"/>
Avantages :
• Obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une
même définition de style
• Simplifie le code.
• Une maintenance de site beaucoup plus facile.
• Meilleure accessibilité : permet de produire des pages web respectueuses des normes du W3C, les
pages seront donc accessibles pour la majorité des navigateurs (ordinateurs, tablettes,
smartphones, smart TV, …).
Exp. :
Pour écrire l’accolade {
- Soit le code suivant contenu dans le fichier « [Link] » : On utilise le raccouci
p{ clavier :Altgr+4
color : blue ;
}
- Et la balise suivante dans le fichier « [Link] » :
<head>
<link rel="stylesheet" href="[Link]">
</head> <body>
<h1> Mon site </h1>
<p>bonjour</p>
</body></html>
Résultat : A chaque utilisation de la balise <p> dans la page web
[Link], le contenu de chaque paragraphe aura le même style :
couleur en bleu. Il en sera de même pour toutes les autres pages
utilisant la même feuille de style.
Reprenons l’exemple précédent •: Le sélecteur est généralement l’élément HTML (nom du balise)
auquel on applique un style (exp.. paragraphe <p>)
p {
• Une propriété détermine le style qui va être appliqué
color : blue ;
à un élément (exp. color pour indiquer la couleur du
}
texte, font-size pour la taille du texte)
• Une valeur détermine le comportement d’une propriété
(exp. le nom de la couleur, la taille).
19
Schématiquement, une feuille de style CSS ressemble donc à cela :
Code : CSS balise1
{
propriete1: valeur1;
propriete2: valeur2;
propriete3: valeur3;
}
balise2
{
propriete1: valeur1;
…
proprieteN: valeurN;
}
……
Note bien :il ne faut pas oublier le point-virgule devant chaque règle.
Remarques :
• Lorsqu’on a, par exemple, le cas suivant : On peut l’écrire de
cette manière :
h1 { color : blue;
} h1 , p {
p { color : blue; {
color : blue; }
}
• Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront pas
affichés, ils servent simplement à indiquer des informations : /* Votre commentaire */
Exp :
p{
color : blue ; /* les paragraphes de couleur bleu */}
II.Sélecteurs : class et id
Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises.
Pour cela les spécifications CSS ont introduit le concept de classe. Pour que certains paragraphes
20
seulement soient écrits d'une manière différente on utilise des attributs spéciaux qui
fonctionnent sur toutes les balises :
- L'attribut class.
- L’attribut id.
1. L'attribut class :
Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises.
Pour cela les spécifications CSS ont introduit le concept de classe.
La définition des classes est aussi simple que celles des styles. Elle consiste
à préciser la balise sélectionnée (comme pour une déclaration de style),
puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la
classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets :
Selecteur_de_balise.Nom-de-la-classe {
propriété-de-style: Valeur;
propriété-de-style: Valeur;
...; }
Où « Nom-de-la-classe » représente le nom donné à la classe.
css
Exp. :css
[Link] { font-family : Verdana ; color : red ; }
Appel d'une classe :
Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise :
Soit la classe Rouge appliquée à la balise b :
html
<b class="Rouge"> Texte à mettre en rouge et en gras </b>
Les classes universelles :Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée
dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! On parle alors de classe universelle (parfois
classe indépendante). La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un
point :
.Nom-de-la-classe {
propriété-de-style: Valeur;
propriété-de-style: Valeur;
...; }
21
Soit la classe « important » suivante :
css
.important { font-family : Verdana ; color : red ; }
L’appel de cette classe peut être fait à partir de n’importe quel élément HTML pour lequel la définition est valide :
Exp. :
<h1 class="important">Attention ceci est un
avertissement</h1>
<i class="important">(prière d'en tenir compte)</i>
Remarque : Notez l'absence de point dans l'appel à la classe.
2. L'attribut id :
L’attribut id fonctionne exactement de la même manière que class mais il ne peut être utilisé qu'une
fois dans le code. C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en forme de
caractères.
Dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) :
Activité 2 : Modifier la couleur du fond
#couleur
{ background-color: blue; }
è Pour appeler ce style dans la page HTML, on indiquera id="introduction" à l'intérieur de la balise
voulue :
<body id="couleur" >
A retenir
Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id . Ces
caractéristiques de style ne seront appliquées que sur cet id particulier. Quand vous voulez appliquer
un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class
Dans la feuille de style CSS, les règles seront écrites avec la syntaxe :
#nom_id à pour les id
.nom_de_classe à pour les class
[Link] Balises Universelles div et span :
22
Les éléments HTML div et span ont été créés principalement pour simplifier la mise en page des pages HTML en
CSS c’est-à-dire pour simplifier l’application de certains styles CSS.
La balise <div> </div> :
C'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille.
Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » ou « section » dans la page et
provoquent donc obligatoirement un retour à la ligne.
Activité 3 :
Produire le document suivant :
<body>
<div class="mauve">
<h1> CSS : Cascading Style Sheets </h1>
<p> Les feuilles de style en cascade, généralement appelées CSS de l'anglais
<span id="vert" class="souligne">Cascading Style Sheets </span>, forment un langage informatique qui
décrit la présentation des documents HTML et XML.
</p>
</div>
</body>
1. La balise <span> </span> :
C'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de
texte, pour sélectionner certains mots uniquement. Les balises <strong> (rendre du texte
important) et <em> (insister sur du texte) sont de la même famille.
Ainsi, on va pouvoir placer une certaine partie du texte d’un titre ou d’un paragraphe dans un
élément span pour ensuite pouvoir lui appliquer un style CSS particulier, chose qu’il nous était
impossible de faire jusqu’à présent.
23
Si on veut spécifier un mot <span> </span> : c'est une balise de type inline, que l'on place dans un
paragraphe, pour sélectionner certains mots uniquement.
Exp.
Code : HTML
<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>
Code : CSS
.salutations
{
color: blue;
}
Tout élément, en Html, est de type :
▪ Block (div)
▪ Inline (span)
Les éléments de type block… Les éléments de type inline…
Commencent sur une nouvelle ligne S’insèrent dans une ligne
Occupent toute la largeur disponible Occupent seulement la largeur nécessaire
Peuvent être imbriqués les uns dans les autres et Peuvent être imbriqués les uns dans les autres mais ne
contenir des éléments de type inline peuvent pas contenir d’éléments de type block
Exemples : p , h1, h2, h3, h4, h5, h6 ,ol, ul, dl, li, Exemples : em , strong , mark, a , img, span
table, div
donc un objet rectangulaire qui ne peut être On ne peut lui spécifier une hauteur ni une largeur ni
réparti sur plusieurs lignes. l'entourer d'une marge.
Elle possède les
attributs margin, padding, width, height.
[Link] du texte
a) Introduction Le choix de la ou les polices de caractères doit se faire en connaissance de
cause car elle est sujette aux contraintes suivantes :
• Toutes les polices de caractères n'existent pas sur tous les ordinateurs et si
l'ordinateur de votre visiteur ne possède pas la police désirée, une autre police
s'affichera modifiant votre mise en page ;
24
• Mac et PC ne possèdent pas toujours les mêmes noms de polices, ni la même
résolution et vous devrez donc vérifier les équivalences entre ces deux plateformes ;
• Tous les navigateurs ne gèrent pas le rendu des polices de la même façon et il ne faut
pas espérer le même rendu partout
b) Polices génériques Il existe 5 familles de polices de caractères dites "génériques" :
• Serif ;
• Sans-serif ;
• Monospace ;
• Cursive ;
• Fantasy ;
Ci-dessous un rendu de ces polices sur quelques navigateurs :
[Link] propriétés de type font
A.1/ La taille font-size
Taille des caractères Il existe deux types d'unités pour régler la taille des caractères :
fixes et proportionnelles.
Il est préférable de ne pas utiliser de tailles de caractères absolues comme les points (pt), les picas
(pc) ou les centimètres (cm) car celles-ci ne sont pas redimensionnables à l'écran. Il faut également
éviter d'utiliser les pixels (px) car Internet Explorer les considère comme une unité de taille de
caractère fixe.
➢ Une taille absolue : exacte en pixels (px), en centimètres (cm) ou en millimètres (mm)
Exemple : Code CSS :
p { font-size: 14px; /* Paragraphes de 14 pixels */ }
h1 { font-size: 40px; /* Titres de 40 pixels */ }
25
➢ Une valeur relative : en pourcentage (80%, 130%…)., em ou ex (même principe que le em,
mais qui est plus petit).
Il faut donc utiliser des unités relatives, telles que les em ou les pourcentages (%) car ces unités sont
proportionnelles à la taille en pixels déclarée dans le navigateur qui par défaut est réglée à 16px. La taille
des caractères se déclare par l'attribut « font-size »
La taille d'une valeur exprimée en em est dynamique. Lorsqu'on définit la propriété font-size,
un em est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si
cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du
navigateur (généralement 16px).
Ainsi, si on définit font-size avec une valeur de 20px sur l'élément body, 1em correspondra
à 20px et 2em à 40px. Ici, la valeur 2 est un facteur multiplicateur de la taille.
xx-small minuscule large grand
x-small très petit x-large très grand
small petit xx-large gigantesque
medium moyen 0.9em taille en « em »
80 % taille en pourcentage 1.8ex taille en « ex »
em = taille visée en px / font-size du parent en pixels
Ainsi, si la taille font-size de body vaut 1em et que l'échelle par défaut du navigateur indique 1em = 16px et qu'on
souhaite obtenir une font-size équivalente à 12px, on pourra utiliser la valeur 0.75em (car 12/16 = 0.75).
▪ 1em : le texte a une taille normale
▪ Valeur > à 1, comme 1.3em : si vous voulez grossir le texte
▪ Valeur < à 1, comme 0.8em : si vous voulez réduire le texte
Code : CSS
p
{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
26
font-size: small; /* Titres de petite taille */
}
h2
{
font-size: 1.4em;
}
A2. /font-style
❖ Italique, gras, souligné… : font-style , font-weight, text-decoration
➢ pour mettre en italique, on utilise font-style qui peut prendre trois valeurs :
• italic : le texte sera mis en italique ;
• oblique : le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de
l'italique proprement dit) ;
• normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique.
Exemple :
Si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez
écrire en CSS :
em { font-style: normal; }
A.3/mettre en gras font-weight
➢ La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes :
• bold : le texte sera en gras ;
• normal : le texte sera écrit normalement (par défaut).
Exemple :
Pour écrire les titres en gras : h1 { font-weight: bold; }
A.4/La police font-family
- La propriété CSS qui permet d'indiquer la police à utiliser est font-family .
balise {
font-family: police1, police2, police3, police4;
}
- Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a pas, il essaiera la police2. S'il ne l'a pas, il
passera à la police3, et ainsi de suite.
- Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :
Arial ; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; Impact ; Times New Roman ;
Trebuchet MS ; Verdana.
- Si le nom de la police comporte des espaces, je conseille de l'entourer de guillemets, comme je l'ai fait
pour « Arial Black ».
27
B-Mettre en forme le texte porte bien son nom :
B.1 text-decoration
Voici les différentes valeurs qu'elle peut prendre :
underline : souligné ; p{text-decoration: underline;}
line-through : barré ; p{text-decoration: line-through;}
overline : ligne au-dessus p{text-decoration: overline;}
;
blink : clignotant p{text-decoration: blink;} Ne fonctionne pas sur tous les
navigateurs (Internet Explorer
et Google Chrome,
notamment) ;
none : normal (par
défaut).
Ces valeurs ce sont les valeurs de text-decoration-line
On peut ajouter d’autres attributs au text-decoration-line comme text-decoration-color, text-decoration-
style, text-decoration-thickness
Exemple : p{text-decoration: green wavy underline;}
B.2 L'alignement : text-align
Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à droite et
justifié. On utilise la propriété text-align et on indique l'alignement désiré :
• left : le texte sera aligné à gauche (c'est le réglage par défaut) ;
• center : le texte sera centré ;
• right : le texte sera aligné à droite ;
• justify : le texte sera « justifié ».
Exemple :
h1 { text-align: center; }
p { text-align: justify; }
.signature { text-align: right; }
Remarque : Vous ne pouvez pas modifier l'alignement du texte d'une balise inline, L'alignement ne
fonctionne que sur des balises de type block.
28
B.3.L’indentation : text-indent
La propriété text-indent définit la longueur qui doit être laissée avant le début de la
première ligne d'un élément contenant du texte. L'espacement horizontal se fait en
accord avec le bord gauche (ou droit pour les dispositions de droite à gauche) de
l'élément contenant le texte. Les valeur sont :
• Longuer : Absolus par exemple 3mm , 40px, -3em … ou en pourcentage en proportion de la largeur du
bloc englobant exemple 15%
• each-line : L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de
ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (wrap).
• hanging : Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.
• initial : valeur globale utilisé pour définir une propriété CSS sur sa valeur par défaut.
• inherit : valeur globale qui Donne à une propriété la même valeur que celle de l'élément parent.
• unset : valeur globale qui correspond à la combinaison des mots-clés initial et inherit. Autrement dit, s'il y
a de l'héritage, ce mot-clé se comporte comme inherit, sinon, il se comporte comme initial.
Remarque : Les mots-clés globaux (initial, inherit et unset ) peuvent être utilisés
pour n'importe quelle propriété CSS
Activité 8 :
soit le code CSS suivant :
div.a { text-indent: 50px ; }
div.b { text-indent: -2em ; }
div.c { text-indent: 30% ; }
div.d { text-indent: 5em each-line ; }
div.e { text-indent: 5em hanging ; }
div.f { text-indent: 5em hanging each-line ; }
Ecrire une page HTML qui exploite le code CSS ci-dessus.
[Link] direction : direction
La propriété direction doit être paramétrée afin de correspondre à la direction du texte:
• rtl : Right To Left pour droite à gauche pour les textes en arabe
• ltr : Left To Right pour gauche à droite pour les autres.
Exemple : CSS : .textearabe { direction : rtl ; }
[Link] ombre des textes : text-shadow
On peut ajouter des effets d’ombre à un texte en utilisant la propriété text-shadow.
Cette propriété nécessite au minimum deux valeurs pour fonctionner.
Cependant, dans la grande majorité des cas, nous en utiliserons quatre, dans
l’ordre vu ci-dessous.
Les trois premières valeurs correspondent à des longueurs et le dernier est la
couleur de l’ombre :
29
• 1ère valeur : déplacement horizontal de l’ombre ;
• 2ème valeur : déplacement vertical de l’ombre ;
• 3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
• 4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la propriété
« color »).
Exemple :
text-shadow: 1px 1px 2px pink;
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p class="miseenforme">bienvenu</p>
</body>
</html>
Css :
.miseenforme{
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
}
Résultat :
B.6-Miniscule ou Majuscule : text-transform
On utilisera la propriété text-transform pour modifier l’aspect des caractères d’un
texte (majuscules ou minuscules). Nous pouvons choisir parmi quatre valeurs :
• Uppercase : transforme tout le texte en majuscules ;
• Lowercase : met tout le texte en minuscules ;
• Capitalize : met uniquement la première lettre de chaque mot en majuscule ;
• None : pas de transformation ;
Exemple : CSS :
<div class="a">hello world</div> div.a { text-transform: uppercase ; }
<div class="b">Hello World</div> div.b { text-transform: lowercase ; }
<div class="c">hello world</div> div.c { text-transform: capitalize ; }
30
B.7-Dépassement de texte (overflow)
Si vous voulez que le texte ne dépasse pas des limites du bloc, il va falloir
utiliser la propriété overflow. Voici les valeurs qu'elle peut accepter :
• visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et
sort volontairement du bloc.
• hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne
pourra pas voir tout le texte.
• scroll : le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le
navigateur mettra en place des barres de défilement pour qu'on puisse lire
l'ensemble du texte.
• auto : le navigateur décide de mettre ou non des barres de défilement.
Remarque : la propriété word-wrap: break-word permet de forcer la césure
des très longs mots (généralement des adresses un peu longues).
B.8-La propriété : white-space
white-space définit comment représenter les espaces successifs et les retours à la ligne lorsque
les lignes sont plus grandes que la largeur de l'élément. Les valeurs possibles sont :
• Normal : Valeur par défaut. Les espaces successifs sont affichés comme des espaces uniques. Les
retours à la ligne se font en fonction de la largeur de l'élément ou sur les balises <br/>.
• Nowrap : Les espaces successifs sont affichés comme des espaces uniques. Les retours à la ligne
ne se font que si indiqués par une balise br/. Le texte peut donc déborder sur la droite de
l'élément si les lignes sont plus longues que la largeur de ce dernier.
• Pre : Les espaces multiples et les retours à la ligne se font comme ils apparaissent dans le code
HTML. Le texte peut déborder sur la droite de l'élément. Il peut également ne pas commencer
contre le bord gauche si une tabulation ou des espaces sont présents en début de ligne dans le
code HTML.
• Pre-line : Les espaces successifs sont affichés comme des espaces uniques. Les retours à la ligne se
font comme ils apparaissent dans le code HTML. Le texte peut déborder sur la droite de l'élément.
Pre-wrap : Les espaces successifs sont conservés. Les retours à la ligne se
font en fonction de la largeur de l'élément et sur les balises <br/
Ci-dessous un tableau regroupant certains attributs utilisés pour modifier la mise en
forme
31
B.9/ Couleur du texte color
En anglais, Rouge-Vert-Bleu s'écrit Red -Green-Blue
rgb (0..255,0..255,0..255)
rgba (0..255,0..255,0..255,opacité:0..1)
Code : CSS
h1
{color: aqua;}
p
32
{color: #FFFFFF;}
h2
{color: rgb(240,96,204);}
V-Mettre en forme l’arriere plan
Couleur de fond : background-color
Pour indiquer une couleur de fond, utiliser la propriété CSS background-color et elle s'utilise de la
même manière que la propriété color. Pour indiquer la couleur de fond de la page web, il faut
travailler sur la balise <body>.
Exemple :
body {
background-color: black; /* Le fond de la page sera noir */ color: white; /* Le texte de la page
sera blanc */ }
Images de fond
La propriété permettant d'indiquer une image de fond est background-image.
On doit mettre l' url("chemin/nom_image.png").
Exemple : background-image: url("[Link]");
La propriété CSS background-attachment permet de « fixer » le fond. Deux valeurs sont
disponibles :
fixed : l'image de fond reste fixe ;
scroll : l'image de fond défile avec le texte (par défaut).
La propriété CSS background-repeat permet de « répéter » le fond. Quatre valeurs sont
disponibles :
• no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
• repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
• repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
• repeat : le fond sera répété en mosaïque (par défaut).
La propriété CSS background-position permet d'indiquer où doit se trouver l'image de fond .
Deux valeurs sont disponibles :
En pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page
Utiliser les valeurs : top, bottom, left, center, right
Exemple :
33
body {
background-image: url("[Link]");
background-attachment: fixed; /* Le fond restera fixe*/
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à droite */
}
Depuis CSS3, il est possible de donner plusieurs images de fond à un élément.
Pour cela, il suffit de séparer les déclarations par une virgule, comme ceci :
body {
background: url("[Link]") fixed no-repeat top right, url("[Link]")
fixed; }
La première image de cette liste sera placée par-dessus les autres. Attention donc, l'ordre de
déclaration des images a son importance : si vous inversez le soleil et la neige dans le code CSS
précédent, vous ne verrez plus le soleil !
La transparence opacity
Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
Avec une valeur de 0, l'élément sera totalement transparent.
➔ Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera
opaque à 60%… et on verra donc à travers !
Code : CSS p
h1 { background-color: black;
{ background-color: green ; color: white;
color: white; opacity: 0.3;
opacity: 0.5; }
}
34
Le CSS nous offre deux méthodes pour fixer le niveau d’opacité.
Si nous avons utilisé une valeur de type nom de couleur ou hexadécimale
avec la propriété color, nous devrons utiliser la propriété opacity pour fixer
l’opacité.
Si nous avons utilisé une valeur de type RGB avec la propriété color , nous
pouvons également maîtriser l’opacité de notre texte d’une façon plus simple,
en utilisant une valeur de type RGBa. Dans ce cas, il suffit de rajouter une
valeur pour l’opacité de notre texte après les trois valeurs de notre propriété
RGB.
❖ Créer un fond en dégradé linéaire :
La fonction linear-gradient() permet de créer une image (type
<image>) représentant un dégradé de couleur linéaire.
- Les dégradés linéaires sont définis par un axe : la ligne du dégradé. Chaque point de cette ligne aura une couleur
différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se
situant sur la ligne du dégradé à ce niveau.
- Les dégradés sont des valeurs de type <image> et non des couleurs type <color>.
- Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur
la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul
dégradé.
- La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type
<length>) ou un pourcentage (valeur de type <percentage>).
Exemple : CSS :
Body{
background: linear-gradient(#e66465, #9198e5);}
background: linear-gradient(217deg, rgba(255,0,0,.8),
rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8),
rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8),
rgba(0,0,255,0) 70.71%);
35
<div id="grad1"></div>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not
support gradients */
This linear gradient starts red at the top,
background-image: linear-gradient(red, yellow);}
transitioning to yellow at the bottom:
<div id="grad1"></div>
#grad1 {
height: 200px;
background-image: linear-gradient(to right,
rgba(255,0,0,0), rgba(255,0,0,1));
}
Constatation :
Le fond de la page sera un dégradé dont la direction est de gauche à droite qui commence avec le rouge jusqu’à
10% de larguer puis un bleu positionné a 30% de la largeur et enfin un orange qui commence à 90% jusqu’a la
fin.
Valeurs :
- Coté ou coint : Les valeurs to top, to bottom, to left et to right correspondent respectivement aux angles 0deg,
180deg, 270deg, 90deg.
- angle : L'angle de la direction du dégradé. L'angle démarre à partir de to top et progresse dans le sens des
aiguilles d'une montre.
- point d’arrêt : Une valeur composée d'une valeur <color> éventuellement suivie d'une position (un pourcentage
ou une longueur <length>) sur l'axe du dégradé.
- indice de couleur : Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux
couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à
équidistance entre les deux points d'arrêt.
Activité :
Créer des dégradés avec les exemples suivants :
CSS :
- background : linear-gradient( 135deg , red , blue );
- background : linear-gradient( 135deg , red , red 60%, blue );
- background : linear-gradient( to right , red , orange , yellow, green , blue , indigo , violet );
- background : linear-gradient( to bottom right , red , rgba( 0 , 0 , 0 , 0) );
36
Tp3
Exercice 1 :
En saisissant le code suivant, on constatera la différence entre la présence d’un paragraphe dans un bloc généré
avec <div> et l’existence d’un paragraphe en dehors d’un bloc :
[Link] :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>balise avec attribut</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<h1>Un titre de niveau 1</h1>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe avec un </p>
<a href="#" title="Infobulle">lien</a>
<ul>
<li><a href="#">Elément de liste (lien) 1</a></li>
<li>Elément de liste 2</li>
</ul>
</body>
</html>
[Link] :
body{ background-color: lightBlue; }
div{ color: white;
background-color: purple;
width: 80%; /*Définit la largeur des div à 80% de leur parent (body
ici)*/
margin: 0 auto; /*Permet de centrer les div dans leur élément parent
(body ici)*/
}
Résultat :
37
Activité 4 :
En modifiant le code des fichiers de l’activité précédente, mettre le texte « autre élément » et
« troisième » en gras, le fond jaune et couleur de police noir.
Correction :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple div</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<h1>Un titre de niveau 1</h1>
<div>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe</p>
<ul>
<li>Un élément de liste</li>
<li>Un <span>autre élément</span> de liste</li>
</ul>
</div>
<p>Un <span>troisième</span> paragraphe</p>
<div>
<p>Un dernier paragraphe</p>
</div>
</body>
</html>
[Link] :
38
body{ background-color: lightBlue; }
div{ color: white;
background-color: purple;
width: 80%; /*Définit la largeur des div à 80% de leur parent (body ici)*/
margin: 0 auto; /*Permet de centrer les div dans leur élément parent (body ici)*/
}
span{
font-weight: bold; /*Les textes seront en gras*/
background-color: yellow; /*Fond des span jaune*/
color: black; /*Couleur du texte noire*/
}
Résultat :
Exercice2:
Construisons une section de page à deux colonnes. L'une des
deux colonnes servira pour un menu de 110 pixels de large
flottant à gauche, l'autre pour un contenu placé à 120 pixels du
bord gauche (pour ne pas empiéter sur le menu bien sûr).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple sélecteur "id"</title>
<link rel="stylesheet" href="Exp_id.css" />
</head>
<body>
<h1>Exemple sélecteur "id"</h1>
<div id="menu">
<ul>
<li>élément 1</li>
<li>élément 2</li>
<li>élément 3</li>
<li>élément 4</li>
<li>élément 5</li>
</ul>
</div>
39
<div id="contenu">
<p> bla bla bla bla bla bla bla </p>
</div>
</body>
</html>
Exp_id.css :
#menu {
background-color:silver;
width:110px;
float:left;
}
#contenu {
margin-left:120px;
}
40
[Link] bordures et les ombres
D.1/ Bordures standard border
➢ Largeur : mettre une valeur en pixels (comme 2px)
➢ Couleur : couleur de la bordure
➢ Type de bordure : peut être un simple trait, ou des pointillés, ou encore des tirets, etc
none : pas de bordure (par défaut)
solid : trait simple
dotted : pointillés
dashed : tirets
double : bordure double
groove : en relief
ridge : autre effet relief
inset : effet 3D global enfoncé
outset : effet 3D global surélevé
D.2 Bordures arrondies border-radius
Pour obtenir des bordures arrondies, utiliser la propriété border-radius en indiquant la taille
de l'arrondi en pixels.
Exemple : border-radius: 10px
D.3 Couleur de bordure : border-color
La propriété CSS border-color est une propriété raccourcie qui permet de définir la couleur de la bordure
sur les quatre côtés de la boîte de bordure d'un élément.
Chaque côté peut être paramétré individuellement grâce aux propriétés border-top-color, border-right-
color, border-bottom-color et border-left-color.
Activité : CSS: Tester les exemples suivants avec un code de votre choix.
border-color : red ; /* Une valeur pour les quatre côtés */
border-color : red #f015ca ; /* valeur1 : côtés horizontaux , valeur2 : côtés verticaux */
border-color : red yellow green ; /* côté haut, côtés verticaux , côté bas */
border-color: red yellow green blue; /* côté haut, côté droit, côté bas, côté gauche */
D.4 Largeur de bordure : border-width
La propriété CSS border-width est une propriété raccourcie qui définit la largeur de la bordure d'un élément.
Cette propriété raccourcie définit les propriétés détaillées
border-top-width, border-right-width,border-bottom-width, border-left-width.
41
La propriété border-width peut être définie avec une, deux, trois ou quatre valeurs.
• Une valeur : bordure pour les quatre cotés ;
• Deux valeurs : bordure basse et haute et la seconde pour la bordure gauche et droite.
• Trois valeurs : bordure haute, bordure gauche et droite, bordure basse.
• Quatre valeurs : haut, droit, bas et gauche (sens des aiguilles d'une montre).
Une valeur peut être une longueur( en px, em, …) ou un mot-clé (thin , medium, thick )indiquant l'épaisseur de la
bordure.
Activité : CSS : Utiliser les codes css suivants pour tester des bordures différentes :
- border: ridge #ccc; border-width: 6px; #une valeur
- border: solid red; border-width: 2px 10px; deux valeurs
- border: dotted orange; border-width: 0.3em 0 9px; #trois valeurs
- border: solid lightgreen; border-width: thin medium thick 1em; #quatre valeurs
D.6Coins de bordure arrondi : border-radius
La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de
chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc
d'ellipse.
Cette propriété est une propriété raccourcie qui permet de définir :border-top-left-radius,
border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
42
Border-top-left-radius : 20 px; border-top-left-radius: 30px 20px ;
Avoir une bordure arrondie, bleue, en tirets, épaisse de 3 pixels autour de mes titres :
Code : CSS h1
{
border: 3px blue dashed;
border-radius: 10px;
}
On peut aussi faire des bordures En haut, à droite, à gauche, en bas…
border-top : bordure du haut ; Exemple : p
border-bottom : bordure du bas ; Code : CSS {
border-left : bordure de gauche ; border-left: 2px solid black;
border-right : bordure de droite. border-right: 2px solid red;
}
Exemples :
43
La balise <hgroup> </hgroup> :
Dans certains cas de figure, on peut avoir un titre composé de plusieurs éléments et pour chaque élément un
niveau de titre différents (de <h1> à <h6>). Néanmoins, on peut vouloir leur donner un style unique.
Soit le corps d’une page web suivant :
<body> html
<hgroup>
<h1>Bienvenue sur le WebMag</h1>
<h2>Le magazine du développeur web</h2>
</hgroup>
<p>Le contenu ...</p>
</body>
On désire donner le même style suivant aux 2 titres : Alignement à droite avec la police Verdana. Il faut
donc définir le code suivant dans le fichier css :
hgroup { text-align : right ;
css
font-family : Verdana ;
padding-right : 16px ;
border-right : 10px solid lightblue ; }
La balise <hgroup> est utilisée pour grouper des éléments de titre. Elle permet de regrouper un
ensemble de balises <h1> à <h6>, quand un titre a plusieurs niveaux (sous-titres).
Le résultat :
Résumé :
- Class et Id sont deux attributs HTML qui ont été créés pour pouvoir appliquer différents styles à des éléments de même
type.
- Class permet également de faire l’inverse et d’appliquer le même style à différents éléments choisis.
- id doit être unique dans une page.
- On peut mettre ces deux attributs sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.
Les balises universelles <div> <span>
Les éléments div et span ne possèdent aucune valeur sémantique. Nous allons nous en servir pour entourer des blocs de
code et ainsi pouvoir attribuer des styles particuliers à ces blocs.
La balise <div> est de type en bloc( block), donc un objet rectangulaire qui ne peut être réparti sur plusieurs lignes.
Elle possède les attributs margin, padding, width, height.
Elle est précédée et suivie d'un saut de ligne. Exemple : <div>0000000<div>111111</div>222222</div>
La balise <span> est de type en ligne( inline), elle s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes.
On ne peut lui spécifier une hauteur ni une largeur ni l'entourer d'une marge.
Elle peut être placée à l'intérieur d'un paragraphe pour délimiter une partie de celui-ci sans affecter en soi l'apparence
du texte.
44
VI-Les sélecteurs avancés
❖ Les sélecteurs avancés sont l’une des grandes forces du CSS. En effet, grâce à eux, nous allons pouvoir cibler
du contenu très précisément et assez simplement. Il existe de très nombreux sélecteurs avancés en CSS on
présentera les plus utiles et les plus utilisés dans le tableau suivant :
[Link] sélecteur universel * :
Pour sélectionner les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs.
Activité 1 :
En modifiant le code de l’activité précédente, définir une style de police par défaut à l’ensemble de la page :
couleur Blanc et police Calibri.
*{
font-family : calibri;
color : white; }
èLe sélecteur étoile * permet de sélectionner tous les éléments HTML d’une page d’un coup, c’est pourquoi il est
également appelé sélecteur CSS universel.
[Link] balise contenue dans une autre :
Activité 2 :
Saisir le code suivant dans un fichier [Link] :
…
<h1>Un titre de niveau 1</h1>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe avec un <a href="#">lien</a></p>
<ul>
<li><a href="#">Elément de liste (lien) 1</a></li>
<li>Elément de liste 2</li>
</ul>
…
Rque :
Utiliser href="#" permet de créer un lien HTML valide mais qui ne mène nulle part, qui est "vide".
Dans un fichier [Link], saisir le code suivant :
pa{
background-color: yellow;
}
Constatation : seule la balise <a> contenue dans une balise <p> a été modifiée.
è L’écriture suivante :
XY
{ (X et Y sont deux balises quelconques.)
}
45
Permet de sélectionner toutes les balises <Y> situées à l'intérieur d'une balise <X>. Notez qu'il n'y a pas de virgule
entre les deux noms de balises.
[Link] balise qui en suit une autre :
Activité 3 :
Dans le code du fichier [Link] de l’activité précédente, déplacer la balise <a> en dehors de
la balise <p> pour obtenir le code suivant :
…
<p>Un autre paragraphe avec un </p>
<a href="#">lien</a>
…
Dans le fichier [Link], saisir le code suivant :
p+a{
background-color : yellow;
}
Constatation : seule la balise <a> située après une balise <p> a été modifiée.
è L’écriture suivante :
X+Y
{
}
Permet de sélectionner la première balise <Y> située après une balise <X> grâce au caractère
+.
[Link] balise qui possède un attribut :
Activité 4 :
Dans le code du fichier [Link] de l’activité précédente, ajouter à la balise <a> un attribut title
ayant pour valeur "Infobulle" pour obtenir le code suivant :
…
<p>Un autre paragraphe avec un </p>
<a href="#" title="Infobulle">lien</a>
…
En utilisant le fichier [Link], on veut cibler les balises <a> ayant un attribut title pour donner
une taille de police au lien de 50 px :
a[title]
{ font-size: 50px; }
èL’écriture suivante :
Balise [Attribut]
{
}
Permet de cibler des balises précises ayant un attribut précis.
46
[Link] balise qui possède un attribut et une valeur exacte :
A[attribut="Valeur"] : une balise, un attribut
a[title="Cliquez ici"]
{
}
Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
Exemple : <a href="[Link] title="Cliquez ici">
A[attribut*="Valeur"] : une balise, un attribut et une valeur
a[title*="ici"]
{
}
Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).
Exemple : <a href="[Link] title="Quelque part par ici">
Sélecteur Sert a …
* Sélectionner tous les éléments (sélecteur universel)
A, B Sélectionner deux éléments A et B
AB Sélectionner un élément B contenu dans un élément A
A+B Sélectionner le premier élément B suivant un élément A
A[nom de l’attribut] Sélectionner tous les éléments A possédant un attribut particulier
A[nom de l’attribut* = Sélectionner tous les éléments A possédant un attribut particulier avec
« valeur »] une valeur
A[nom de l’attribut = Sélectionner tous les éléments A possédant un attribut particulier avec
« valeur »] une valeur précise
A:link un élément A qui est la source d'un hyperlien dont la cible n'a pas encore
A:visited été visitée (:link) ou a déjà été visitée (:visited)
A:active un élément A pendant certaines actions de l'usager
A:hover
A:focus
VII-Positionner et dimensionner un élément
Le modèle des boîtes
Dans une mise en page réalisée en CSS, tous les éléments sont considérés comme des boîtes.
Chacune de ces boîtes est constituée d’un contenu, d’un espacement intérieur, d’une bordure,
et d’une marge externe.
Voici les propriétés CSS qui permettent de déterminer les dimensions, la couleur, le style de
chacun de ses constituants :
47
Propriété CSS Ce qui est concerné :
width et height largeur et hauteur du contenu (texte, image, etc.)
padding espacement intérieur, entre le contenu et la bordure
border bordure (ou encadrement)
margin marge externe, espace (transparent) entourant le tout
• width : c'est la largeur du bloc exprimé en pixels (px) ou en pourcentage (%).
• height : c'est la hauteur du bloc exprimé en pixels (px) ou en pourcentage (%).
• padding : indique la taille de la marge intérieure en pixels (px).
• margin : indique la taille de la marge extérieure en pixels (px).
Exemple :
<!DOCTYPE html>
<html> #entete {
<head> margin: 70px;
<link rel="stylesheet" href="[Link]"> border: 1px solid #4CAF50;
</head> padding: 10px;
<body>
<h1 id="entete">CSS Margins</h1>
<p>This element has a margin of 70px and a padding of
10px </p>
48
</body>
</html> }
1. Un bloc peut avoir des dimensions minimales et maximales :
• min-width : largeur minimale ;
• min-height : hauteur minimale ;
• max-width : largeur maximale ;
• max-height : hauteur maximale.
2. Les marges extérieures peuvent avoir des valeurs différentes :
• margin-top : marge extérieure en haut ;
• margin-bottom : marge extérieure en bas ;
• • margin-left : marge extérieure à gauche ;
• margin-right : marge extérieure à droite.
3. Idem pour les marges intérieures !
Exemple :
p{
width: 350px; border: 1px solid black; text-align: justify; padding: 12px;
margin: 50px; /* Marge extérieure de 50px */ }
Remarque : utiliser la propriété margin: auto pour centrer des blocs. Pour cela, il faut
obligatoirement donner une largeur au bloc (avec la propriété width).
Exemple :
p{
width: 350px; /* On a indiqué une largeur (obligatoire) */
margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */ }
49
Le positionnement
Les positionnements absolu, fixe et relatif
La propriété CSS position permet de positionner avec précision des éléments sur la page. Pour
cela, on lui donne une de ces valeurs :
• absolute : positionnement absolu ; il permet de placer un élément n'importe où sur la page (en
haut à gauche, en bas à droite, tout au centre, etc.).
• fixed : positionnement fixe ; identique au positionnement absolu mais, cette fois, l'élément reste
toujours visible, même si on descend plus bas dans la page.
• relative : positionnement relatif ; ce positionnement permet d'effectuer des « ajustements » :
l'élément est décalé par rapport à sa position initiale.
Si un bloc est positionné en absolu, il faut indiquer au navigateur où le positionner sur la page à l'aide
des quatre propriétés CSS :
• left : position par rapport à la gauche de la page
• right : position par rapport à la droite de la page
• top : position par rapport au haut de la page ;
• bottom : position par rapport au bas de la page.
Exemple :
element
{ position: absolute;
right: 0px; bottom: 0px; }
Remarque : les éléments positionnés en absolu sont placés par-dessus le reste des éléments de la page ! Par
ailleurs, si vous placez deux éléments en absolu vers le même endroit, ils risquent de se chevaucher. Dans ce cas,
utilisez la propriété z-index pour indiquer quel élément doit apparaître au dessus des autres. L'élément ayant la
valeur de z-index la plus élevée sera placé par dessus les autres, comme le montre la figure ci-contre.
50
Le positionnement inline-block
En CSS la propriété display permet de transformer n'importe quel élément de la page d'un type vers un autre et
les faire apparaître sous forme de blocs. À ce moment-là, les éléments vont se positionner les uns en-dessous
des autres et il devient possible de modifier leurs dimensions !
Voici quelques-unes des principales valeurs que peut prendre la propriété display :
Valeur Exemples Description
inline <a>, <em>, <span>… Eléments d'une ligne. Se placent les uns à côté des
autres.
block <p>, <div>, <section>… Eléments en forme de blocs. Se placent les uns
endessous des autres et peuvent être
redimensionnés.
inline-block <select>, <input> Eléments positionnés les uns à côté des autres
(comme les inlines) mais qui peuvent être
redimensionnés (comme les blocs).
none <head> Eléments non affichés.
Les éléments en inline-block nous permet d'utiliser la propriété vertical-align. Cette propriété permet de
modifier l'alignement vertical des éléments. Voici quelques-unes des valeurs possibles pour cette propriété :
• baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut) ;
• top : aligne en haut ;
• middle : centre verticalement ;
• bottom : aligne en bas ;
• (valeur en px ou %) : aligne à une certaine distance de la ligne de base (baseline).
NB : les éléments inline-block se positionnent sur une même ligne de base (appelée baseline), en bas.
Exemple Vertical align :
51
<!DOCTYPE html>
<html>
<head>
Code css
<link rel="stylesheet" href="[Link]">
img.a {
</head>
vertical-align: baseline;
<body>
}
<h1>The vertical-align Property</h1>
img.b {
vertical-align: text-top;
<h2>vertical-align: baseline (default):</h2>
}
<p>An <img class="a" src="[Link]" width="9" height="9">
image with a default alignment.</p>
img.c {
vertical-align: text-bottom;
<h2>vertical-align: text-top:</h2>
}
<p>An <img class="b" src="[Link]" width="9" height="9">
image with a text-top alignment.</p>
img.d {
vertical-align: sub;
<h2>vertical-align: text-bottom:</h2>
}
<p>An <img class="c" src="[Link]" width="9" height="9">
image with a text-bottom alignment.</p>
img.e {
vertical-align: super;
<h2>vertical-align: sub:</h2>
}
<p>An <img class="d" src="[Link]" width="9" height="9">
image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="[Link]" width="9" height="9">
image with a super alignment.</p>
</body>
</html>
52
Display :
Activité :ouvrir le dossier display qui se trouve sur le bureau
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque
elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span
class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed
laoreet. </div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque
elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span
class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed
laoreet. </div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque
elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span
class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed
laoreet. </div>
</body>
</html>
53
Code css : span.b {
span.a { display: inline-block;
display: inline; /* the default for span */ width: 100px;
width: 100px; height: 100px;
height: 100px; padding: 5px;
padding: 5px; border: 1px solid blue;
border: 1px solid blue; background-color: yellow;
background-color: yellow; }
vertical-align:top;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow; }
Habillage
.imageflottante
{
float: left;
width:
100px;
}
p{
width:
400px;
}
Rendu :en inspectant
l’image
Le CSS permet de faire flotter un élément autour d'un texte grâce à la propriété CSS
float.
• left : l'élément flottera à gauche.
• right : l'élément flottera à droite.
<p> HTML5 (HyperText Markup Language 5) est la dernière
révision majeure du HTML (format de données conçu pour représenter les pages web).</p>
<p><img src="[Link]" class="imageflottante" alt=""> Cette version a été finalisée le
28 octobre 2014 .L’HyperText Markup Language (HTML) est le langage de balisage le plus
utilisé pour créer des pages et des applications Web. Il comprend des éléments et des
balises prédéfinis pour étiqueter les éléments de contenu et décrire la structure des pages.
54
Pour créer un site Web interactif, vous devez combiner HTML avec au moins deux langages
frontaux :une « feuille de style en cascade » (CSS) et JavaScript. </p>
Ajouter une classe à l’image du logo du html 5
.imageflottante
{
float: left;
width: 100px;
}
Modifier la largeur du paragraphe contenant l’image à 400px
p{
width: 400px;
}
Float :right modifier la valeur du float avec right
.imageflottante
{
float: right;
width: 100px;
}
p{
width: 400px;
}
Float :none :
.imageflottante
{
float: none;
width: 100px;
}
p{
width: 400px;
}
Dans cet exemple l’image va s’afficher ou elle apparait dans le texte (float: none;)
55
La propriété clear indique si un élément peut être situé à côté d'éléments flottants qui le précèdent ou
s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété clear s'applique aux
éléments flottants comme aux éléments non-flottants.
Pour ne plus faire flotter l'élément, il faut utiliser la propriété
clear, qui peut prendre ces trois valeurs :
• left : le texte se poursuit en-dessous après un float: left;
• right : le texte se poursuit en-dessous après un float: right;
• both : le texte se poursuit en-dessous, que ce soit après un
float: left; ou après un float: right;.
<p><img src="[Link]" class="imageflottante" alt="Image flottante" /></p>
<p>Texte écrit à côté de l'image.</p>
<p class="dessous">Texte écrit sous l'image.</p>
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
box-shadow
La propriété CSS box-shadow ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées
par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à
l'élément, avec des rayons de flou et d'étalement et avec une couleur.
Exemple :
box-shadow: 10px 5px 5px red;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
La propriété box-shadow peut être définie grâce :
56
• À deux, trois ou quatre valeurs de longueur (<length>) :
o Avec deux valeurs, celles-ci sont respectivement considérées comme les coordonnées de
décalage de l'ombre : <offset-x> et <offset-y>
o Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou : <blur-radius>
o Si une quatrième valeur est fournie, celle-ci correspondra au rayon d'étalement : <spread-
radius>.
• Au mot-clé optionnel inset
• À une valeur de couleur (<color>) optionnelle.
Elle permet de projeter une ombre depuis un élément. Si une border-radius est définie sur l'élément avec
l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (z order) pour plusieurs
ombres sera le même que pour les ombres texte (la première ombre est sur le dessus).
57
Animations
Pour créer une animation CSS on doit :
• créer et nommer l’animation (avec @keyframes)
• attacher cette animation à un élément (avec animation-name)
1. Notre première animation :
On commence par créer une animation :
@keyframes taille {
from {width: 0px;}
to {width: 200px;}
}
On utilise la règle @keyframes et on nomme l’animation taille.
Rque : Il existe quelques règles avec le signe @ (nommées at-rules) qui
permettent d’encapsuler plusieurs règles pour le processeur CSS du navigateur,
par exemple @media, @page…
Ici, on change la largeur (width) de (from) 0px à (to) 200px.
On attache ensuite cette animation à un élément :
div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
}
On utilise :
• animation-name : pour désigner l’animation utilisée. (obligatoire)
• animation-duration : pour définir la durée de l’animation (par défaut elle est de
0 seconde). (obligatoire)
2. Plusieurs étapes :
L’intérêt des animations est de pouvoir gérer des étapes intermédiaires. Voici une
nouvelle version de l’animation :
@keyframes taille {
0% {width: 0px;}
50% {width: 300px;}
58
100% {width: 200px;}
}
On a 3 étapes :
• le départ (0%) avec une largeur de 0px
• la moitié (50%) avec une largeur de 300px
• l’arrivée (100%) avec une largeur de 200px
3. Plusieurs propriétés :
On peut aussi changer plusieurs propriétés :
@keyframes taille {
0% {width: 0px; background-color: red;}
25% {width: 50px; background-color: yellow;}
50% {width: 100px; background-color: green;}
75% {width: 150px; background-color: pink;}
/* 100% {width: 200px; background-color: blue;} devient
facultatif car l'état 100% est déjà l'état du div "final".*/
}
4. Démarrage différé :
Dans les exemples ci-dessus, l’animation commence dès le chargement, ce qui
n’est pas toujours souhaitable. On dispose de la propriété animation-delay pour
différer le départ de la durée voulue.
En poursuivant notre exemple ça pourrait donner ce code :
div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
animation-delay: 2s;
}
5. Nombre d’exécutions :
Par défaut, une animation est exécutée une seule fois, si on en veut plus, il faut
utiliser la propriété animation-iteration-count. Toujours avec notre exemple :
div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
animation-iteration-count: 2;
}
59
Rque :
Si on veut un nombre d’exécutions infini, au lieu de mettre une valeur on
utilisera infinite.
6. Sens de l’animation :
Par défaut une animation va dans le sens normal mais on peut aussi l’obliger à
aller dans l’autre sens en utilisant la propriété animation-direction. On dispose
de deux valeurs :
• reverse : on va dans le sens inverse.
• alternate : on alterne d’un sens à l’autre (dans ce cas évidemment il faut prévoir
au moins deux exécutions).
div {
height: 100px;
width: 200px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
7. Progression de l’animation :
On peut modifier l’animation avec la propriété animation-timing-function et
ces valeurs :
• ease : début rapide, puis ça accélère, puis ça ralentit à la fin (c’est l’effet par
défaut).
• linear : même vitesse du début à la fin.
• ease-in : début lent.
• ease-out : fin lente.
• ease-in-out : début et fin lents.
8. Le style avant et après l’animation :
Le style avant et après l’animation est défini par défaut par les règles de l’élément.
On a la possibilité de changer ce comportement en utilisant la propriété
animation-fill-mode. On dispose de ces valeurs :
• none : comportement par défaut (en gros ça sert à rien)
60
• forwards : on garde les valeurs calculées lors de la dernière étape
• backwards : on garde les valeurs calculées lors de la première étape
L’interprétation peut être délicate selon les répétitions et sens des animations.
Par exemple avec ce code :
@keyframes taille {
0% {width: 0px ;}
100% {width: 200px ;}
}
div {
height: 100px;
width: 200px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Au départ et pendant le délai de démarrage, la largeur sera de 0px qui correspond
à la première étape (à 0%) parce qu’on a utilisé la valeur backwards pour
animation-fill-mode.
9. Action sur une animation :
Pour l’instant nous n’avons pas vu de possibilité d’intervention sur une animation.
On dispose de la propriété animation-play-state qui permet une interaction avec
ces valeurs :
• running : valeur par défaut de l’animation en action.
• paused : animation en pause.
Voici le code d’un exemple où on met l’animation en pause en survolant l’élément
:
@keyframes taille {
0% {width: 50px ;}
100% {width: 200px ;}
}
div {
height: 100px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
div:hover {
animation-play-state: paused;
}
61
On peut faire exactement l’inverse et mettre l’animation en action seulement au
survol :
@keyframes taille {
0% {width: 50px}
100% {width: 200px}
}
div {
height: 100px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
62
Série Animation
Exercice1 :
HTML : Construisez une page HTML <!DOCTYPE html>
De base <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML : Créez une feuille de style et liez-la à la page <link rel="stylesheet" href="[Link]"
HTML type="text/css">
CSS : Personnalisez la police de caractère du texte body{
par défaut. font-family: arial;
}
5-CSS : Adaptez les propriétés de la .forme_carré{
classe forme-carre pour obtenir un width:100px;
carré coloré de 100 pixels de côté. height: 100px;
background-
color: #03c4EB;
}
HTML : Ajoutez une seconde classe CSS à l’élément
<div> que vous nommerez transition-1. <div class="forme_carré transition-1">hello
world</div>
Cette méthode qui consiste à utiliser
plusieurs classes permet d’avoir des
6 classes génériques et des classes spécifiques.
1, transition-2, etc.
CSS : En utilisant la classe transition-
CSS : En utilisant la classe transition- .transition-1 :hover{
1 et la pseudo-classe hover, ajoutez un effet de background-color: #03c4EB;
changement de couleur }
7 lorsque l’on survole le carré avec la souris.
CSS : En utilisant la classe transition- ……………………………………………………………..
1, ajoutez un effet de transition lors …………………………………………………………….
63
du survol du carré avec les critères …………………………………………………
suivants : Durée de la transition : 2
secondes.
Exercice2 :Créer un texte défilant
<!DOCTYPE html> #h1 {position: relative;
<html lang="en"> overflow: hidden;
<head> animation: def 10s infinite linear;
<meta charset="UTF-8"> display: inline-block;
<meta name="viewport" content="width=device- transition: all 1s ease-in;
width, initial-scale=1.0">
<title>Document</title> }
<link rel="stylesheet" href="[Link]"> @keyframes def{
</head> 0%{
<body> transform: translate(0,0)
<h1 id="h1">hello</h1> }
</body> 100%{
</html> transform: translate(-100%,0)
}
Exercice3 :bouton animé
<!DOCTYPE html> .button {
<html> padding: 15px 25px;
<head> font-size: 24px;
<meta name="viewport" content="width=device-width, text-align: center;
initial-scale=1"> cursor: pointer;
<link rel="stylesheet" href="[Link]"> outline: none;
</head> color: #fff;
<body> background-color: #04AA6D;
<h2>Animated Buttons - "Pressed Effect"</h2> border: none;
<button class="button">Click Me</button> border-radius: 15px;
</body></html> box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
64
Transitions
Les transitions permettent de passer d'un affichage à un autre pour un même objet, d'un
contenu à un autre, de façon progressive.
1. Syntaxe de la propriété :
▪ transition-property :
Indique à quelle propriété on fournit une transition. Par défaut all, c’est-à-dire toutes les
propriétés.
Par exemple pour changer la couleur progressivement :
transition-property:color;
▪ transition-duration :
Définit la durée totale du temps de la transition. Par défaut la valeur est 0, il n'y a aucune
transition.
Exemple, pour une durée d'une demi-seconde :
transition-duration:0.5s;
▪ transition-timing-function :
Définit la forme de la progression dans le temps, avec des accélérations possibles durant
la transition.
➔ Liste des valeurs possibles:
- ease: Par défaut, Cela donne un départ et une arrivée ralentis.
- linear: Une fonction linéraire,
- ease-in: Départ ralenti.
- ease-out: Arrivée ralentie.
- ease-in-out: Départ et arrivée ralentis.
▪ transition-delay
Indique à quel moment démarre la transition (par rapport à l'évènement qui la déclenche).
Par exemple pour un délai de réaction d'une seconde :
transition-delay: 1s;
65
Par défaut le délai est de 0.
2. Transition :
Les quatre propriétés peuvent être réduites à une seule.
On place dans l'ordre : transition-property, transition-duration, transition-timing-
function, transition-delay. Pas de virgules pour séparer les valeurs, comme usuel.
transition: all 2s ease 0;
On peut omettre les dernières valeurs.
3. Utiliser des listes :
On peut avoir une liste de groupes de propriétés séparées par une virgule :
transition: color 0.2s ease 1s, top 2s ease-in 0;
Les propriétés élémentaires comme la forme compacte peuvent comporter des listes
séparées par une virgule :
transition-property:color,top;
transition-duraction:1s, 5s;
Les éléments des listes sont associés par leur position dans la liste. Une durée d'une seconde
est attribuée à la propriété color, une durée de 5 secondes à la propriété top.
4. Exemple :
[Link] :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="[Link]">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>3SI</div>
</body>
</html>
[Link] :
div{
color: white;
background-color: red;
width: 300px;
height: 300px;
text-align: center;
position: relative;
top: 0;
66
left: 0;
transition:left,border-radius 5s,10s ;
}
div:hover{
left:1000px;
border-radius: 50%;
}
CSS TRANSITIONS CSS ANIMATIONS
• Peut passer de l'état initial à l'état final,
avec des étapes intermédiaires entre les
deux
• Peut uniquement passer de l'état initial à • Peut boucler à l'infini grâce à la propriété
l'état final – aucune étape intermédiaire animation-iteration-count
• Ne peut s'exécuter qu'une seule fois • Peut être déclenché mais peut également
• Nécessite un déclencheur pour s'exécuter s'exécuter automatiquement
(comme le survol de la souris) • Peut courir en avant, en marche arrière ou
• Courez vers l'avant lorsqu'il est déclenché et dans des directions alternatives
vers l'arrière lorsque la gâchette est retirée • Plus difficile à utiliser avec JavaScript
• Plus facile à utiliser avec JavaScript • Idéal pour créer une série complexe de
• Idéal pour créer un simple changement d'un mouvements
état à un autre
Voici un moyen simple de visualiser les principales différences entre les transitions CSS et les animations :
67
Complément de cours html
View port,blockquote,cite,q,image mappé
Balises HTML 5 relatives à l’adaptation d’une page Web :
Lors des premières utilisations du web sur mobile, les sites étaient très mal adaptés à l’utilisation avec un
téléphone. Les textes étaient illisibles, les images trop petites, des marges apparaissaient sur les bords de
l’écran, etc…
Exemple :
Pour pallier à ce problème, l’une des méthodes est d’utiliser la balise
…………………………………. Cette balise permet de définir le comportement de mise en
page d’un site en rapport avec sa taille d’écran. Le viewport c’est la zone de fenêtre
active de votre navigateur où sera affiché le contenu d’un site. Cette zone peut souvent
ne pas avoir les mêmes dimensions que la page, dans ce cas le
navigateur comblera la différence de dimension en ajoutant
des barres de défilement. Si vous souhaitez optimiser votre
site pour une utilisation sous mobile ou tablettes, vous devrez
ajouter au minimum la balise « viewport ». Il faut écrire la ligne de code suivante, entre
les balises « head » de votre site, pour utiliser un viewport classique :
Des balises HTML 5 relatives aux textes et sémantiques :
Créer une page nommée sé[Link] 1- Dans le corps de la page ajouter le code suivant puis déduire le rôle
des balises utilisées
<p>Ma couleur préférée est <del>bleu</del><ins>bleu Del :…………………………………..
rouge ! </ins></p> Ins :……………………………………
2- On veut afficher dans une page web une phrase avec des espaces comme suit :
Chercher la balise nécessaire pour afficher les espaces ……………………………………………………
3- Ecrire le code suivant pour afficher un code source écrit en python :
68
<p>Voici la structure itérative en Python :
………………for i in range(4):
print("i a pour valeur", i)………………….
</p></body>
4-Ajouter la balise nécessaire pour obtenir cette
page :
Les citations :
1- Chercher la balise qui permet d’insérer un bloc de citation (citation longue ) ainsi que sa source. Exemple :
<………………………> Je n'ai pas d'ordinateur. Je ne méprise pas du tout l'informatique, tous mes amis écrivent à
l'ordinateur, mais moi j'écris mes articles avec un stylo et mes livres avec un crayon. C'est la seule névrose que
j'ai : je ne dois pas perdre mon crayon. Je sais qu'un livre, c'est quatre crayons. </………………………>
Jean D'Ormesson <………………………>citation informatique et livre </………………………>
2- Chercher la balise qui indique que le texte est une citation en incise (citation courte). Exemple :
<p>Chaque fois que Kenny est tué, Stan dira < ……… >Oh mon Dieu, ils ont tué Kenny ! </ ……… ></p>
Résultat :
Retenons :
• <blockquote>(qui signifie bloc de citation) indique que le texte contenu dans l'élément est une citation longue.
•<q> permet de placer des citations en incise dans une ligne de texte.
•<cite> permet d'indiquer la source de la citation.
Les contacts :
Chercher la balise qui indique des informations de contact pour une personne, un groupe de personnes ou une
organisation.
Exemple :
Image mappée : On veut créer des zones cliquables dans l’image ci-dessus, par exemple
en cliquant sur la zone de l’ordinateur une page « [Link] » qui contient plus
d’informations s’ouvre. En cliquant sur la zone de tasse du café, la page « caffé.html »
s’ouvre.
69
1- Dans le dossier image mappée qui contient une image « [Link] » et les pages
web « café.html », « [Link] » et « [Link] » , créer un fichier nommée
[Link] et écrire le code suivant dans la partie body:
<h2>Image Mappée</h2>
<p>Cliquer sur l’ordinateur, le smartphone, ou la tasse de café pour aller à une
nouvelle page et lire plus sur ce sujet:</p>
<img src="[Link]" alt="image source" usemap="#photomap">
<map name="photomap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="[Link]">
<area shape="circle" coords="337,300,44" alt="Coffee" href="café.html">
</map>
2- Enregistrer et exécuter pour voir le résultat
3- Ajouter la balise nécessaire pour créer une zone cliquable du smartphone vers la page [Link]
<…………… shape="………………" coords="…………………………………………………" alt="………………"
href="…………………………">
Remarque : Pour connaître les coordonnées vous pouvez utiliser un logiciel de
traitement d’images comme gimp , photoshop , ect.
L'image est insérée à l'aide de la balise <img>. La seule différence avec les autres images est que vous
devez ajouter un attribut usemap.
La valeur de usemap commence par une dièse # suivie du nom de l'image cliquable et elle est utilisée pour
créer une relation entre l'image et l'image cliquable.
Ensuite , la balise <map> est utilisée pour créer une image cliquable et elle est liée à l'image à l'aide de
l'attribut name requis.
L' attribut name doit avoir la même valeur que l ' attribut usemap de <img> .
Une zone cliquable est définie à l'aide d'un <area> élément.
Vous devez définir la forme de la zone cliquable, et vous pouvez choisir l'une de ces valeurs :
rect - définit une région rectangulaire
circle - définit une région circulaire
poly - définit une région polygonale
default - définit toute la région
70
Vous devez également définir des coordonnées pour pouvoir placer la zone cliquable sur
l'image.
Exemple polygone :
Il existe une image nommée [Link] dans votre dossier, on veut la rendre
cliquable. Le type de zone cliquable est polygone, ses coordonnées sont : 140 , 121 , 181 ,
116 , 204 , 160 , 204 , 222
,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147 La page à ouvrir en
cliquant sur cette zone est « [Link] » Ajouter le code correspondant dans le fichier
index
<p>Cliquer sur le croissant pour aller à une nouvelle page et lire plus sur ce
sujet:</p>
<!-- insérer l’image [Link] -->
<……………… src="………………………………" alt="………….." usemap="………………….." >
<!- - créer l’image cliquable - - >
<……………….. name="……………………………..">
< ! - - créer la zone cliquable - - >
<………… shape="………………….." …………………….="140,121,181,116,204,160,204,222,191,270,
140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="………………………………………………………">
</……………….>
71
LES FORMULAIRES
Les pages Web construites en HTML permettent de présenter et de diffuser de l’information en
provenance d’un serveur Web vers un navigateur client. Un « dialogue » client-serveur s’instaure
lorsque le client peut à son tour envoyer des informations au serveur, notamment par le biais de
formulaires :
1. recueil d’informations à l’aide de contrôles dans un formulaire HTML,
2. envoi des informations au serveur,
3. traitement des informations par le serveur (à l’aide d’un langage adapté tels que PHP ou
Perl),
4. renvoi éventuel d’informations HTML au client (réponse, accusé de réception, demande de
précision…).
Une page peut comprendre un à plusieurs formulaires dans sa section <body>. Tous les contrôles
du formulaire doivent être insérés entre les balises <form>…</form> :
Balise Description Attributs facultatifs
<form> formulaire contenant des name="nomFormulaire"
contrôles method="get|post" méthode d’envoi des données
au serveur (get par défaut).
action (="URL") adresse du script auquel les
données sont envoyées (pour être traitées).
Un à plusieurs évènements JavaScript peuvent
être spécifiés
Une zone de texte permet de saisir tout type de données. La voici en version « minimale » :
contrôle de formulaire code HTML
La zone de texte : Nom : <input type="text" name="nom" />
L’attribut name est obligatoire afin de permettre au serveur, chargé de traiter les valeurs, de
récupérer ces valeurs à partir du nom qui leur est attribué (deux contrôles d’un même formulaire ne
peuvent donc pas avoir la même valeur de l’attribut name).
72
Le message issu du placeholder disparaît lorsque le curseur est placé dans la zone (ce qui est
d’emblée le cas ici du fait de l’autofocus) : il apparaît lorsque la zone n’est pas sélectionnée et
qu’aucun contenu n’a été saisi. placeholder, autofocus et required sont des attributs HTML5 pas
encore reconnus par tous les navigateurs.
L’attribut default permet d’indiquer une valeur par défaut dans la zone (que l’arrivée du curseur
dans la zone ne supprime pas) : s’il n’y a pas de ressaisie, c’est cette valeur qui sera transmise (alors
que placeholder n’indique pas une valeur).
La balise <label> a une portée sémantique (repérer les libellés de formulaire), son attribut for se
réfère à l’id de la zone de texte (qui peut porter la même valeur que name) permet d’envoyer le
curseur dans la zone quand on clique sur le libellé.
Présentons les contrôles de formulaire :
contrôle de formulaire code HTML
La zone de champ caché : elle peut servir à <input type="hidden" name="c"
stocker (et transmettre) des valeurs qui n’ont value="caché" />
pas besoin d’être affichées à l’écran (mais
visibles dans le code source).
La zone mot de
Mot de passe : <input type="password"
passe :
name="mp" />
La zone de texte long <textarea type="text" name="lib"
: rows="3" cols="25">valeur par
défaut</textarea>
L’apparence de la zone de texte multilignes
est paramétrable soit à l’aide des attributs
rows (lignes) et cols (caractères en elle
permet de saisir tout type de données, sur
plusieurs lignes colonnes) ou en CSS
(propriétés width et height).
Les boutons radio : Sexe :
<input type="radio" name="sexe"
value="M" checked /> Homme
ils permettent d’effectuer un seul choix <input type="radio" name="sexe"
(conditionné par une valeur identique pour value="F" /> Femme
l’attribut name) parmi des propositions
L’attribut facultatif checked détermine la
valeur préselectionnée.
Jour(s) de disponibilité :
Les cases à <input type="checkbox" name="jour[]"
cocher : value="1" />
Mercredi
elles permettent d’effectuer un à plusieurs <input type="checkbox" name="jour[]"
choix parmi un nombre limité de propositions value="2" /> Samedi
; les choix effectués peuvent être stockés <input type="checkbox" name="jour[]"
dans un tableau (attribut name ci-contre) ou value="3" /> Dimanche
chaque case peut avoir sa propre valeur de
l’attribut name
La liste déroulante : Statut :
<select name="statut">
<option value="1">Etudiant</option>
73
elle permet d’effectuer un seul choix parmi <option value="2">Professeur</option>
un nombre élevé de propositions </select>
L’attribut value indique la valeur
renvoyée.
La zone de liste : Jour(s) de disponibilité :
<select size="3" multiple
elle permet d’afficher name="jour[]">
d’emblée plusieurs <option value="l">lundi</option>
(selon l’attribut size) propositions. L’attribut <option value="m">mardi</option>
facultatif multiple permet le choix multiple <option value="j">jeudi</option>
(l’attribut name doit alors désigner un <option value="v">vendredi</option>
tableau) </select>
L’attribut facultatif selected de la balise
<option> permettrait de préselectionner un
élément de la liste.
Le fichier joint : PJ : <input type="file" name="pj"
value="fichier" />
il permet de rechercher un fichier à envoyer
en pièce jointe
Le bouton Annuler : <input type="reset" value="Annuler" />
il réinitialise tous les contrôles du formulaire
à vide ou à leur valeur par défaut
Le bouton Envoyer : <input type="submit" value="Envoyer" />
il envoie les données du formulaire au
serveur pour un traitement par le script
spécifié dans l’attribut action de la balise
<form>
Les boutons d’envoie et de réinitialisation :<input type="submit" value="Envoyer"/>
ou <button type=submit>Envoyer</button>
<input type="reset" value="Effacer"/> ou <button type="reset">Effacer</button>
Les zones de saisie enrichies
74
Regroupement de champ du formulaire par thématique
Liste (déroulante ou non) avec groupements affichage par un
d’options extrait du code HTML navigateur
<select size="9" name="jour">
<optgroup label="semaine">
<option value="1">lundi</option>
<option value="2">mardi</option>
<option value="3">mercredi</option>
<option value="4">jeudi</option>
<option value="5" selected>vendredi</option>
</optgroup>
<optgroup label="week end">
<option value="6">samedi</option> Les libellés de
<option value="7">dimanche</option> groupes
</optgroup> </select> (semaine et week-
end) ne sont pas
cliquables
Script HTML Affichage Liste de suggestions
<input type="text" list="serie">
<datalist id="serie"> Ce type de valeur est le
<option value="juillet"> plus souvent alimenté à
<option value="août"> </datalist> partir
Rq : si août est saisi il
de valeurs déjà
sera ensuite proposée
enregistrées
deux fois (une fois par dans une base de
la liste de suggestion, données.
une fois par la mémoire
cache du navigateur).
extrait du code HTML affichage par un navigateur
<fieldset>
<legend>identité</legend>
<table>
<tr><td><label for="idNom">Nom :</label></td>
<td><input type="text" name="nom" /></td>
</tr>
<tr> <td><label for="idPrenom">Prenom :</label></td>
<td><input type="text" name="prenom" /></td>
</tr> </table>
</fieldset>
Remarque :
Output <output onload="value = 2 + 2"></output>
<progress id="prog" max=100 value=75> 75%</progress>
Progress
L’apparence des messages de validation est personnalisables à l’aide de pseudo-classes CSS : :required |
:optional, :valid | :invalid et :in-range | :out-of-range.
75
Exercice1 :
76
Exercice2 :
Exercice3 :
Créer le formulaire suivant et l’enregistrer sous le nom [Link]:
2- Créer une page html enregistrée sous le nom « [Link] »
contient le paragraphe suivant « commande passée avec succès »
3-Dans la balise form du formulaire [Link] ajouter pour
l’attribut « action » la valeur suivante
Cliquer sur le bouton j’achète et regarder le résultat.
4- Relier la page commande avec un fichier css nommé [Link] qui
contient le code ci-dessous . Essayer ligne par ligne et déduire le rôle
de chaque propriété :
77
body { ol li {
font-family: Georgia; background: #b9cf6a;
padding: 20px; } border-color: #e3ebc3;
form { border-style: solid;
background: #9cbc2c; border-width: 2px;
border-radius: 5px; border-radius: 5px;
padding: 20px; line-height: 30px;
width: 400px; } list-style: none;
fieldset { padding: 5px 10px;
border: none; margin-bottom: 2px; }
margin-bottom: 10px; } button{
legend { margin-left: 60px;
color: #384313; text-align: center;
font-size: 16px; color: #fff;
font-weight: bold; line-height: 2.5;
padding-bottom: 10px; padding: 0 20px;
text-shadow: 0 1px 1px #c0d576; } border-radius: 10px;
button:hover { background-color: rgba(220, 0, 0, 1);
background: #1e2506; }
cursor: pointer;}
Résultat :
78
Correction Exercice3 :html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<form action="[Link]">
<fieldset>
<legend>Votre identité</legend>
<ol>
<li> <label for=nom>Nom Prénom *</label>
<input id=nom name=nom type=text placeholder="Prénom et nom" required>
</li>
<li> <label for=email>Email *</label>
<input id=email name=email type=email placeholder="exemple@[Link]"
required>
</li>
<li> <label for=telephone>Téléphone</label>
<input id=telephone name=telephone type=tel placeholder="par ex:+21600000000">
</li>
</ol>
</fieldset>
<fieldset>
<legend>Livraison</legend>
<ol>
<li>
<label for=adresse>Adresse *</label>
<textarea id=adresse name=adresse rows=5 required></textarea>
</li>
<li> <label for=pay>ville</label>
<input list=ville id="pay">
<datalist id=ville>
<option value="TUNIS"></option>
<option value="Bizerte"></option>
<option value="Nabeul"></option>
</datalist>
</li>
<li><label for="dat"> Date souhaitée de Livraison</label>
<input type="date" id="dat" name="dat">
</li>
<li><label for="heu"> Heure souhaitée de Livraison </label>
<input type="time" id="heu" name="heu">
</li>
</ol>
</fieldset>
<fieldset>
79
<legend>informations CB</legend>
<ol>
<li> <input id=visa name=type_de_carte type=radio value visa>
<label for=visa>VISA</label>
<input id=amex name=type_de_carte type=radio value=amex>
<label for=amex>AmEx</label>
<input id=mastercard name=type_de_carte type=radio value=mastercard>
<label for=mastercard>Mastercard</label>
</li>
<li> <label for=numero_de_carte>N° de carte</label>
<input id=numero_de_carte name=numero_de_carte type=number>
</li>
<li> <label for=securite>Code sécurité</label>
<input id=securite name=securite type="password">
</li>
</ol>
</fieldset>
<fieldset>
<button type=submit>J'achéte !</button>
<button type="reset">Annuler !</button>
</fieldset>
</form>
</body>
</html>
80
Correction exercice 1
Html :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="[Link]">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset id="f1">
<legend id ="id_leg">this is my form</legend>
<table>
<tr>
<td> <label for id="id_email">email</label></td>
<td><input type="email" id="id_email" class="mis"></td>
</tr>
<tr>
<td> <label for id="id_password">password</label></td>
<td><input type="password" id="id_password" class="mis"></td>
</tr>
<tr>
<td> <label for id="id_upload">upload your picture</label></td>
<td><input type="file" id="id_upload" name="pj"
value="fichier" class="mis"></td>
</tr>
<tr>
<td>gender</td>
<td>
<input type="radio" name="gender" value="m" checked class="mis"/>male
<input type="radio" name="gender" value="f" checked class="mis"/>female
</td></tr>
<tr> <td>
<select name="select country">
<option value="1" > UK</option>
<option value="2" > china</option>
</tr></td>
<tr>
<td>hoppy</td>
<td>
<input type="checkbox" name="cricket" value="1" /> cricket
<input type="checkbox" name="football" value="2" /> football
</td>
</tr>
81
<tr>
<td><label for ="id_address" >address</label></td>
<td> <textarea type="texte" name="lib" cols="25" class="mis">valeur
par defaut</textarea>
</td>
</tr>
<tr><td><input type="submit" value="submbit" class="mis">
</td>
</tr>
Code css :
.mis{
background-color: orange;
border-style:solid;
border-color: red;
}
#id_leg
{
border-style: double;
border-color: red;
background-color: orange;
font-family: Verdana;
color: yellow;
}
#f1{
border-style: groove;
border-color: red;
border-width: 2px;
border-radius: 20px 10px 20px 10px ;
background-color: rgba(255,99,71,0.4);
Correction exercice 2
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
82
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
83
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
84
STRUCTURE GENERALE D’UNE PAGE WEB
<header> <footer> <article> <section> <nav> <aside>
En général, une page web est constituée d'un en-tête (tout en haut), de menus de navigation (en haut ou sur les
côtés), de différentes sections au centre… et d'un pied de page (tout en bas).
Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML dédiées à la structuration du site. Ces
balises ont été introduites par HTML5 (elles n'existaient pas avant) et vont nous permettre de dire : « Ceci est
l’en-tête », « Ceci est le menu de navigation », etc.
Voici un schéma basique d'un découpage d'une page HTML5. Précisons bien qu'il ne s'agit pas d'une règle fixe
à appliquer à tout document mais juste d'un exemple.
Exp. : Remarque : voilà comment ordonner les éléments.
1. <header> : En-tête
La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y trouve le plus souvent
un logo, une bannière, le slogan du site …
Ces informations devront être placées à l'intérieur de la balise <header> :
Exp. :
<header>
85
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>
Rque : L'en-tête peut contenir tout ce que vous voulez : images, liens, textes…
2. <footer> : Pied de page
À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des
informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc.
Exp. :
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>
3. <nav> : Principaux liens de navigation
La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez par exemple le
menu principal de votre site.
Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise <nav>.
Exp. :
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Forum</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
4. <section> : Section de page
La balise <section> sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement
une portion du contenu au centre de la page.
Exp. :
<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>
5. <aside> : Informations complémentaires
La balise <aside> est conçue pour contenir des informations complémentaires au document que l'on visualise.
Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation).
Exp. :
<aside>
<!-- Placez ici des informations complémentaires -->
</aside>
86
Remarque. : Il peut y avoir plusieurs blocs <aside> dans la page.
6. <article> : Article indépendant
La balise <article> sert à englober une partie généralement autonome de la page. C'est une partie de la page
qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités (articles de journaux ou de
blogs).
Exp. :
<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>
APPLICATION :
On se propose de créer la page web suivante :
body{
background-color:aliceblue;
}
p{
text-align: justify;
padding: 20px;
}
header{
border: 1px solid black;
margin: 20px;
}
nav{
background-color:aqua;
display: inline-block;
width: 30%;
vertical-align: top;
margin: 0px 20px;
}
section{
background-color: floralwhite;
87
display: inline-block;
width: 60%;
margin: 0px 20px;
padding: 20px;
}
article{
background-color: antiquewhite;
display: inline-block;
width: 65%
}
aside{
background-color:beige;
display: inline-block;
width: 30%;
float: right;
}
footer{
background-color: darkgray;
margin: 20px;
}
Exercice :
Reproduire cette page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="activité[Link]"/>
88
<title>
Le site web</title>
</head>
<body>
<header>
<h1>voyageur</h1>
<h2>Carnets de voyage</h2>
</header>
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Blog</a></li>
<li><a href="[Link]">CV</a></li>
</ul>
</nav>
<section>
<aside>
<h1> à propos de l'auteur</h1>
<p>C'est moi le voyageur!Je suis né en tunisie</p>
</aside>
<article>
<h1>je suis un grand voyageur</h1>
<p>(texte de l'article)</p>
</article>
</section>
<footer>
<p>Copyright voyageur-Tous droits réservés
<a href="[Link] contacter!</a></p>
</footer>
</body>
</html>
Code css :
nav{ section
display:inline-block; {
border: 1px solid blue; display:inline-block;
background-color: yellow; border:1px solid blue;
border:1px solid black; vertical-align:top;
vertical-align:top; }
}
89
Projet1
Reproduire cette page
La structure générale de la page [Link] est sous la description suivante
Body
Header nav section
img hgroup btn1 btn2 btn3 article article
h1 h1 h2 p form
img
Description du contenu des conteneurs de la page [Link]:
90
• Le conteneur header contient deux titres de niveau 1 « Site pour la promotion» et de
niveau 2 « de l'huile d'olive tunisienne» et 5 images une image olive animé .gif et 4 images
(image1,image2,image3,image4)
• Le conteneur NAV contient 3 boutons
(Accueil, à propos, lien utile).(Accueil et propos sans lien ,lien utile mène à une adresse
d’un site web du lien se trouve dans un fichier texte intitulé lien.
• Le conteneur SECTION contient deux conteneurs article.
couleur de
Header (une image et 2 titres)
fond :mauve
titre 1
titre 2
Nav coueur de
(3 boutons de navigations) police :rouge
borure
arrondu :25px
marge
gauche :30px
Article largeur :800px
Article (un formulaire qui inclut un hauteur :30px
(comporte un fieldset lui-même inclut un
paragraphe tableau compotant deux labels et couleur de
et une deux champs de saisies de type fond :jaune
image) texte………….) style :pointillé
couleur de
bordure :noir
coueur de
police :blanc
bordure
arrondu :25px
c
Les bouttons du nav
couleur de fond :rgba de valeur ((255,
99, 71, 0.4)
police d’écriture :cursive
couleur de police :blanc
bordure arronu :25px
marge intérieur gauche 10px ,droit 20
px
c
91
En survolant le bouton: couleur de fond : rgba de valeur ((255, 199, 71, 0.4)
Les div :contenants les boutons
alignement :centré
taille de la police d’écriture :16px
affichage :en ligne
(affichage→display)
bordure arronu :15px
marge intérieur gauche 10px ,droit 20
px
marge extérieur :auto (pour centrer les
éléments à l’intérieur du parent)
Section:
couleur de fond :mauve
bordure arrondu :15px
couleur de la bodure :jaune
couleur de fond : mauve
couleur de fond :oranger
Article: largeur : 400px
couleur de la bodure :jaune
aligné : a gauche
style de la bordure :continu
couleur de la bordure :
couleur:rouge
hgroup: alignéement de texte: centré
l’élément legend du fieldset:
fieldset legend: couleur:bleu
taille d’écriture : 18px
l’élément * devant le champ zone de saisie du Nom
span
couleur:rouge
aligné verticalement : au milieu
92
largeur :300px
hauteur :3000px
Img affichage:enligne
borure arrondu de:15px;
style de la bordure-:continu
(solid)
couleur de la bordure-:or
largeur de la bordure:3px;
Animation
93
Correction
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<header class="e1">
<img class="a im0" src="[Link]" />
<hgroup>
<h1 id="h1">Lycée ouardanine Monastir</h1>
<h1>My first website</h1>
<h2>Internet Of Things</h2>
</hgroup>
</header>
<nav class="n1">
<div class="b1"><input class="btn" type="button" value="Accueil" /></div>
<div class="b1"><input class="btn" type="button" value="A propos"
href="[Link] /></div>
<div class="b1"><input class="btn" type="button" value="Forum"
url="[Link]" /></div>
</nav>
<section>
<article class="n0">
<p><img src="[Link]" class="im1" alt="">Qu'est-ce que l'IoT ?
L'Internet of Things (IoT) décrit le
réseau de terminaux physiques, les « objets », qui intègrent des
capteurs, des softwares et d'autres
technologies en vue de se connecter à d'autres terminaux et
systèmes sur Internet et d'échanger des
données avec eux.</p>
</article>
<article class="n1">
<form name="inscription">
<h1>Priére de remplir ce formulaire</h1>
<fieldset>
<legend>Information générale</legend>
<table >
<tr>
<td>
<label for="id_nom" class="l1">Nom</label>
</td>
94
<td>
<input type="text" id="id_nom" placeholder="écrire
votre nom" required>
<span class="et">*</span>
</td>
</tr>
<tr>
<td>
<label for="id_prenom" class="l1">Prénom</label>
</td>
<td>
<input type="text" id="id_prénom"
placeholder="écrire votre prénom">
</td>
</tr>
<tr>
<td>
<label class="l1">votre email</label>
<td> <input type="text" name="email"></td>
</tr>
<tr>
<td>Vous étes</td>
<td>
<input type="radio" name="genre" />Femme
<input type="radio" name="genre" />homme
</td>
</tr>
<tr>
<td><label class="l1">vous habitez</label></td>
<td> <select name="s1">
<optgroup label="sahel">
<option>Mahdia</option>
<option>monastir</option>
<option>sousse</option>
</optgroup>
<optgroup label="Grand tunis">
<option>Ariana</option>
<option>Ben Arous</option>
</optgroup>
</select> </td>
</tr>
<tr>
<td> <label class="l1"> votre commentaire</label></td>
<td><textarea name="commentaire"></textarea></td>
</tr>
</table>
</fieldset>
<input type="submit" name="envoyer" value="Envoyer">
<input type="reset" name="annuler" value="Annuler">
</form>
</article>
95
</section>
</body>
</html>
Css :
#h1 { [Link]
animation: def 10s infinite {color:white;
linear; font-family:cursive;
transition: all 1s ease-in; font-size:16px;
} border-radius:25px;
@keyframes def{ background-color:rgba(255, 99, 71,
0%{ 0.4);
transform: }
translate(0,0); input:hover
} {
100%{ background-color:rgba(255, 180, 71,
transform: translate(- 0.4);
100%,0);
} }
}
@keyframes fondu-in-out { div.b1
0% { opacity:1; } {float:center;
25% { opacity:1; } font-size:16px;
75% { opacity:0; } color:white;
100% { opacity:0; } display:inline;
} margin:auto;
.im0 { width:100px;
animation-name: fondu-in-out; border-radius:15px;
animation-duration: 5s; padding: 40px 12px 11px 40px;
animation-iteration-count: margin:auto;
infinite; }
} section
fieldset legend{ {
font-size:18px;
color:red; border-radius:15px;
} width:800px;
label.l1{ height:500px;
border-radius: 10px; float:left;
border:solid rgb(31, 30, 30) background:purple;
0.1px; border-style:dashed;
background-color: beige; border-style:solid;
padding: 2px; border-color:yellow;
} }
hgroup article.n1
{color:rgb(255, 255, 255); {width:410px;
text-align:center; margin-top: 15px;
} float:left;
header.e1 background-color:orange;
{margin:30px; border-style:dotted;
width:800px; border-style:solid;
background-color:purple; border-color:black;
96
padding: 10px 12px 11px 10px; }
border-radius:15px; img.a
color:white; {width:150px;
} height:150px;
nav.n1 position:fixed ;
{width:800px; left: 100px;
background-color:gold; top: 35px;
border-radius:15px;
border-style:dotted; border-radius:15px;
height:30px;} border-style:solid;
border-color:gold;
article.n0{ border-spacing:3px;
font-size: large; }
font-family: corbel; input[type=text], select {
width:300px; width: 80%;
float:left; padding: 12px 20px;
margin-left: 10px; margin-left: 10px ;
margin-top: 20px; border: 1px solid #ccc;
margin-right: 20px; border-radius: 4px;
padding-left: 10px; box-sizing: border-box;
background-color:rgb(241, 237, }
229);
border-style:dotted; input[type=submit],input[type=reset] {
border-style:solid; width: 30%;
border-color:black; background-color: #4CAF50;
box-shadow: 3px 1px 3px 1px color: white;
rgb(248, 179, 16); padding: 7px 10px;
} margin-left: 10px ;
.im1{ border: none;
float: right; border-radius: 4px;
width: 100px; cursor: pointer;
height: 100px; }
border:solid 1px gold; [Link]
border-radius: 5px; {
margin-right: 5px; vertical-align:middle;
} color:red;
97
Vous aimerez peut-être aussi
- Introduction aux langages web : HTML, CSS, JSPas encore d'évaluationIntroduction aux langages web : HTML, CSS, JS271 pages
- Introduction à la création de sites webPas encore d'évaluationIntroduction à la création de sites web32 pages
- Création de pages web avec HTML et CSSPas encore d'évaluationCréation de pages web avec HTML et CSS9 pages
- Cours de Programmation Web HTML/CSSPas encore d'évaluationCours de Programmation Web HTML/CSS13 pages
- Introduction au Web et langages clésPas encore d'évaluationIntroduction au Web et langages clés18 pages
- Apprenez HTML et CSS pour débutantsPas encore d'évaluationApprenez HTML et CSS pour débutants112 pages
- Créer Son Site Web Avec HTML5 Et CSS3 - 1Pas encore d'évaluationCréer Son Site Web Avec HTML5 Et CSS3 - 13 pages
- Introduction au HTML : Guide CompletPas encore d'évaluationIntroduction au HTML : Guide Complet8 pages
- Introduction au HTML et ses balisesPas encore d'évaluationIntroduction au HTML et ses balises8 pages
- Création et structure d'un document HTMLPas encore d'évaluationCréation et structure d'un document HTML55 pages
- Initiation au développement HTML/CSSPas encore d'évaluationInitiation au développement HTML/CSS55 pages
- Introduction à HTML, CSS et JavaScriptPas encore d'évaluationIntroduction à HTML, CSS et JavaScript41 pages
- Introduction à HTML5 et CSS3 pour le WebPas encore d'évaluationIntroduction à HTML5 et CSS3 pour le Web65 pages
- Guide de création de pages web HTMLPas encore d'évaluationGuide de création de pages web HTML4 pages
- Introduction à HTML et CSS pour le WebPas encore d'évaluationIntroduction à HTML et CSS pour le Web12 pages
- Introduction au HTML5 et ses balisesPas encore d'évaluationIntroduction au HTML5 et ses balises51 pages
- Création de sites avec HTML5 et CSS3Pas encore d'évaluationCréation de sites avec HTML5 et CSS3143 pages
- Signification de "meta charset=utf-8"Pas encore d'évaluationSignification de "meta charset=utf-8"29 pages
- Introduction aux technologies du WebPas encore d'évaluationIntroduction aux technologies du Web42 pages
- Cours HTML - JavaScript PCD TI - 010837Pas encore d'évaluationCours HTML - JavaScript PCD TI - 01083714 pages
- Introduction au HTML et CSS au MarocPas encore d'évaluationIntroduction au HTML et CSS au Maroc75 pages
- Introduction à HTML, CSS et JavaScriptPas encore d'évaluationIntroduction à HTML, CSS et JavaScript51 pages
- Exemple de site web statique en HTMLPas encore d'évaluationExemple de site web statique en HTML37 pages
- Introduction à HTML5 et ses balisesPas encore d'évaluationIntroduction à HTML5 et ses balises46 pages
- Bases de HTML et CSS pour débutantsPas encore d'évaluationBases de HTML et CSS pour débutants37 pages
- Outils et principes du développement HTMLPas encore d'évaluationOutils et principes du développement HTML103 pages
- Syllabus Systèmes d'exploitation 2010-11Pas encore d'évaluationSyllabus Systèmes d'exploitation 2010-1173 pages
- Quiz sur les réseaux et protocoles informatiquesPas encore d'évaluationQuiz sur les réseaux et protocoles informatiques44 pages
- Polynôme complexe à coefficients réelsPas encore d'évaluationPolynôme complexe à coefficients réels2 pages
- Activation de compte Easy Claim en 5 étapesPas encore d'évaluationActivation de compte Easy Claim en 5 étapes1 page
- Gestion numérique des carnets de créditPas encore d'évaluationGestion numérique des carnets de crédit21 pages
- TP1 HTML : Exercices de mise en pagePas encore d'évaluationTP1 HTML : Exercices de mise en page3 pages
- Tutoriel Spark : Analyse et ModélisationPas encore d'évaluationTutoriel Spark : Analyse et Modélisation6 pages
- Rapport de Stage en Graphisme OFPPTPas encore d'évaluationRapport de Stage en Graphisme OFPPT42 pages
- La pensée politique d'Orwell analyséePas encore d'évaluationLa pensée politique d'Orwell analysée11 pages
- Système de Gestion Touristique en LignePas encore d'évaluationSystème de Gestion Touristique en Ligne38 pages
- Examen Programmation Orientée ObjetPas encore d'évaluationExamen Programmation Orientée Objet5 pages
- Fiche d'explication du projet finalPas encore d'évaluationFiche d'explication du projet final3 pages
- Réformes de l'enseignement en AlgériePas encore d'évaluationRéformes de l'enseignement en Algérie88 pages
- Formations Continues Ergothérapeutes 2025Pas encore d'évaluationFormations Continues Ergothérapeutes 2025100 pages
- Fonctionnalités clés d'ETAP en électrotechniquePas encore d'évaluationFonctionnalités clés d'ETAP en électrotechnique5 pages
- Calcul Littéral : Développement et RéductionPas encore d'évaluationCalcul Littéral : Développement et Réduction6 pages
- Exercices de Programmation en C 2023Pas encore d'évaluationExercices de Programmation en C 20231 page
- Développeur Web en Formation à CotonouPas encore d'évaluationDéveloppeur Web en Formation à Cotonou1 page
- Avantages et dangers de l'intelligence artificiellePas encore d'évaluationAvantages et dangers de l'intelligence artificielle3 pages
- Génie logiciel : UML et Design PatternsPas encore d'évaluationGénie logiciel : UML et Design Patterns274 pages
- Poste Asservi RTU 560 : Solutions Flexibles100% (1)Poste Asservi RTU 560 : Solutions Flexibles16 pages