Cours HTML5 - CSS3 3sti 2021 2022

Partie : Création d’un site web interactif 3STI
Rappel : C’est quoi HTML ?

Ouvrir la page web « D:\introduction.html » puis afficher son code source en utilisant le menu contextuel.
Par quel langage est écrite cette page ?
Les pages Web visualisées dans un navigateur Internet sont écrites avec un langage nommé ……………………(HyperText
Markup Language). C’est un langage de description de contenu et de structure.
Il est composé d’un ensemble de …………………………………. (tags). Une balise est un élément spécial qui indique une
action concernant la mise en page, la mise en forme ou la structure logique d’un document.
Structure de base d'une page HTML5

Le code ci-dessous est à la base d'une page web en HTML5, compléter les pointillés par les éléments convenables en
se référant à l’exemple ci-dessus :
<!DOCTYPE html>
<html>
<head>
……………………………………..
<title>…………………………………. </title>
</head>
<body>
………………………………………………………
</body>
</html>
La partie « Head »:
Ouvrir la page « D:\ introduction.html » par l’éditeur de page web disponible (vs code, sublimetext, …)
Puis effacer la 4ème ligne ( <meta charset="utf-8" /> )
Enregistrer puis réouvrir la page par le navigateur « internet explorer » . Que remarquez-vous ? …………………..............
Cette balise indique l'encodage qui détermine comment les caractères spéciaux vont s'afficher (accents,
idéogrammes chinois et japonais, caractères arabes, etc.).
Les informations que contient l'en-tête ne sont pas affichées sur la page web, ce sont simplement des informations
générales à destination du navigateur (le titre, l'encodage, la description, ….)
1
La partie « Body »:
 Les paragraphes : Comparez entre les paragraphes comment elles sont écrites dans le code et comment
elles sont affichées. Que constatez-vous ?
Ajouter dans le code les balises nécessaires pour afficher chaque paragraphe à part. ………………………………………
Insérer si nécessaire la balise qui permet de retourner à la ligne. ……………………
 Les titres : On veut ajouter le titre « introduction » avant le premier paragraphe.
Quelle balise doit-on insérer ? ………………………………….
Rappelons qu’en HTML , on a le droit d'utiliser 6 niveaux de titres différents:
 La mise en valeur
Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les
faire ressortir. HTML vous propose différents moyens de mettre en valeur le texte de votre page.
- Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>. Essayer cette
balise pour le mot « fichier texte » et voir son rôle . Le texte devient en ………………………….
- Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie « fort », ou « important
». Essayer de mettre le mot « .html » entre la balise <strong> </strong> et voir le résultat. Le texte
s’affiche en ………………………
- La balise <mark> </mark> permet de faire ressortir visuellement une portion de texte. Essayer cette
balise pour les mots « le HTML et le CSS » et regarder le résultat. Le texte est ……………………..
 Les listes :
Ajouter ces lignes puis déduire le rôle de ces balises Modifier <ul> </ul> par <ol> </ol> et regarder la
différence :
…………………………………………………………….. …………………………………………………….……….
2
Exercice :
En utilisant un éditeur de page web, créer un nouveau fichier nommé « listes.html » dans votre dossier de travail,
puis écrire un code en HTML 5 sachant que : le titre de la page web est : « autres listes en HTML »
Dans le corps essayer de créer cette liste :
……………………………
……………HTML………………..
…………………….
……………Les titres………………..
……………Les paragraphes………………..
……………Les listes………………..
…………………….
……………CSS………………..
……………JavaSCript…………
………………………..
Ecrire et exécuter le code suivant puis déduire le rôle de ces balises :
L'élément HTML <dl> représente une liste de ………………………… sous la forme d'une liste de paires
associant des termes (fournis par des éléments <dt>) et leurs descriptions ou définitions (fournies par des
éléments <dd>).
 Les commentaires
Votre code devient compliqué, comment faire pour expliquer des instructions ? ……………………………………………
……………………………………………………………………………………………………………………
Essayer d’ajouter ce commentaire puis exécuter votre code , est ce qu’il s’affiche dans la page web ? ………………..
 Ligne horizontale
insérer une ligne horizontale ente les deux listes comme suit :
on utilise la balise ………………………..
Remarquons qu’il existe des balises paires et des balises

orphelines.
 Indice et exposant
Dans un nouveau fichier essayer d’écrire un code pour obtenir le résultat suivant :
<p>En 4……….eme…….. année vous allez
apprendre E=MC…….2………..</p>
<p>Le taux de CO………..2………. dans

l'atmosphère est en augmentation
3
 Les tableaux :
Ecrire le code suivant dans la partie body et enregistrer le fichier sous le nom table.html dans votre
dossier . Dessiner le résultat obtenu :
<table >
<tr>
<th> Les balises en paires </th>
<th> Les balises orphelines </th>
</tr>
<tr>
<td> p </td>
<td> hr </td>
</tr>
</table>
le rôle de chaque balise.
o La définition d'un tableau : <table>…</table>
o La définition d'une ligne : <tr>…</tr>
o La définition d'une cellule contenant l'en-tête du tableau : <th>…</th>
o La définition d'une cellule : <td>…</td>
 Les médias :
On veut créer une page web qui contient les différents médias : image, son et vidéo .
Sachant que dans votre dossier de travail il
existe une image nommé « html5.jpg » et
un son nommé « son1.mp3 » ainsi qu’une
vidéo nommée « 3d.mp4 », essayer de
compléter le code suivant afin d’obtenir
cette page web. Enregistrer votre fichier
sous le nom media.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>insertion médias</title>
</head>
<body>
<……>Les médias</……>
<……>Voici une image: </……..>
<………… src="…………….……" >
<…….>Voici un son: </………>

<…………………. controls="">
<source src="………………..." >
</…………………..>
<………>Voici une vidéo:</……...>

<……………….. controls="" >
<source src="…………………." >
</…………………..>
</body>
</html>
4
La balise img :
Exemple : <img src="image1.jpg" width="200" height="150">
< img src="image2.jpg" width ="200" height="150" border="2" alt="image insérée">
Dans les pages Web, l'insertion d'une image se fait avec la balise suivante :
<img src ="adresse" width="largeur" height="hauteur" border="taille" alt="texte" align="alignement">
o src ="adresse" : définit l'adresse absolue (http://...) ou relative de l'image à afficher.
o width ="largeur" et height ="hauteur" : définissent la largeur et la hauteur de l'image en pixels.
o alt ="texte": permet de définir le texte de l'info bulle de l'image.
o border ="taille": définit la largeur de la bordure autour de l'image.
La balise audio :
Exemple : <audio controls="controls" loop="loop" autoplay="autoplay" preload="auto">
<source src ="son1.mp3">
</audio>
Attribut Rôle
controls Affiche le lecteur audio et ses différentes fonctionnalités (lecture, pause, volume ...).
Valeur = "controls"
loop Indique que le fichier son doit être joué en boucle.
Valeur = "loop"
autoplay Indique que le fichier son doit être lu automatiquement lorsqu'il est chargé.
Valeur = "autoplay"
preload Spécifie le mode de chargement du fichier son à l'ouverture de la page.
Valeur ="auto","metadata","none"
src URL du fichier son qui sera lu
La balise audio permet de lire des fichiers sons ou des flux audio directement dans la page en proposant un lecteur
intégré avec des contrôles génériques tels que lecture, pause et contrôle du volume.
La balise vidéo :
Exemple : <video controls="controls" height=300 width=300 poster="image_poster.jpg">
<source src ="3D.mp4 ">
</video >
Attribut Rôle
poster Spécifie une image par défaut à afficher comme arrière-plan du lecteur tant que la vidéo n'est pas
lancée.
muted Indique au lecteur de désactiver le son de la vidéo.
Valeur="muted"
La balise vidéo permet de lire des fichiers ou des flux vidéo directement dans la page en proposant un lecteur intégré
avec des contrôles génériques tels que lecture, pause, positionnement dans la vidéo et contrôle du volume.
 Insérer un lien hypertexte :
On peut insérer dans une page web plusieurs types de liens :
- Lien externe : Un lien vers une autre page web dans internet ou dans l’ordinateur, un lien vers un fichier , …
- Lien interne : Un lien vers un emplacement dans la même page
Ecrire le code suivant et l’enregistrer sous le nom « lien.html » dans votre dossier
<!DOCTYPE html> <body>
<html> Menu
<head> <ul>
<meta charset="utf-8"> <li> <a href ="media.html" > Les médias</a></li>
<title>les liens </title> </ul>
</head> </body>
</html>
Ajouter de la même manière des liens vers les pages tables et listes.
5
NB : A noter qu’il existe pour les liens des attributs qui peuvent modifier le comportement par défaut de ces liens.
Exemple : L’attribut target permet d’ouvrir la page cible dans une nouvelle fenêtre ou un nouvel onglet en lui
attribueant la valeur _blank. Exemple : <a href ="media.html" target="_blank" > Les médias</a>
La balise <a> permet de créer un lien vers un site ou une page

Pour créer un lien vers un site, exemple google.fr :
<a href="…………………………………………………………………………………………….">Site de google</a>
Pour créer un lien vers une page introduction située
dans le même répertoire que notre page courante :
<a href="……………………………………."> introduction </a>
Pour créer un lien vers une page introduction.html
située dans le dossier parent de notre dossier,
<a href="../introduction.html "> introduction </a>
Pour créer un lien vers une page introduction.html
située dans un sous-dossier de notre répertoire,
<a href="dossier/introduction.html "> introduction
</a>
Pour télécharger un fichier : <p><a
href="facture.docx">Télécharger le fichier</a></p>
Pour envoyer un mail : <a href = "mailto:
.............................................................">Envoyez-moi
un e-mail </a>
Les différents liens relatifs

Un lien vers une ancre (lien interne):
Une ancre(label) est une sorte de point de repère que vous pouvez mettre dans vos pages HTML.
En effet, si votre page est très longue il peut être utile de faire un lien amenant à une autre section dans la même
page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise.
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom
de l'ancre.
Exemple :
Ouvrir le fichier media.html avec votre éditeur web et ajouter les instructions suivantes (qui sont en gras)
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>insertion médias</title>
</head>
<body> <h1>Les médias : image , son , <a href="#video" >vidéo </a> </h1>
<br><br><br><br><br><br><br><br><br><br> < !- -pour ajouter des sauts de lignes- ->
<h3>Voici une image:</h3>
<img src="html5.jpg" > <br><br><br><br><br><br><br><br><br><br>
<h3>Voici un son:</h3>
<audio controls=""> <source src="son1.mp3" > </audio>
<h3 id="video">Voici une vidéo:</h3>
<video controls="> <source src="3d.mp4" > </video>
</body>
</html>
Enregistrer et regarder le résultat.
*On peut aussi insérer un lien vers une ancre située dans une autre page :
Exemple : Pour aller à l’ancre Open situé dans le fichier exo.html : <a href= « exo.html#Open »>
Essayer d’ajouter dans la page lien.html un lien vers l’ancre « video » de la page media.html
……………………………………………………………………………………………………………………………………………………………………………
6
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 :
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
Des balises HTML 5 relatives aux textes et sémantiques :

Créer une page nommée sémantique.html
1- Dans le corps de la page ajouter le code suivant puis déduire le rôle des balises utilisées.
<p> Del :…………………………………………………………………
Ma couleur préférée est <del>bleu</del> <ins>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 :

<p>
Voici la structure itérative en Python : <br/>
………………for i in range(4):
print("i a pour valeur", i)………………….
</p>
</body>
4-Ajouter la balise nécessaire pour obtenir cette page :
7
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 :
<p>Contactez l’auteur de cette page:</p>
<………………………….>
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</….………………………>
Barre de progression
Une barre de progression (ou barre de chargement) est un composant de base
des interfaces graphiques qui permettent d'indiquer à l'utilisateur l'état
d'avancement d'un travail qu'est en train d'effectuer l'ordinateur.
Au début la barre est complètement vide, puis elle se remplit au fur et à mesure de
l'avancement de la tâche pour finir complètement remplie lorsque le travail est
terminé.
Chercher la balise qui permet d’afficher cette barre.
<………………………………….. max="100" value="70"> 70% </……………………………………>
Les images avec légende:
Chercher les balises à utiliser pour afficher une image avec sa légende.
<…………………………………..>
<…………………. src="html5.jpg" >
<……………………………………..> Dernière version de Html</…………………………………..>
</…………………………………………………….>
8
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 « computer.html » qui contient plus d’informations s’ouvre. En cliquant sur la zone
de tasse du café, la page « caffé.html » s’ouvre.
1- Dans le dossier image mappée qui contient une image « workspace.jpg » et les pages web
« café.html », « phone.html » et « computer.html » , créer un fichier nommée index.html 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="workspace.jpg" alt="image source" usemap="#photomap">

<map name="photomap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
<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 phone.html
<…………… shape="………………" coords="…………………………………………………" alt="………………" href="…………………………">
Remarque : Pour connaître les coordonnées vous pouvez utiliser un logiciel de

traitement de texte 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
9
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 frenchfood.jpg 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 « croissant.html »
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>

<……………… 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="………………………………………………………">
</……………….>
10
Application :
Ecrire un code en html pour créer la page web suivante (vous pouvez copier le texte enregistré dans app.txt et ajouter les balises nécessaires pour les titres,
paragraphes , listes, bloc de citation, les mots peu et très important, ligne horizontale, les contacts , ….)
-Ajouter les liens internes vers les différentes parties. - Ajouter un lien externe de la source vers la page web d’adresse https://books.openedition.org/editionsmsh/84
-Enrichir votre page par la vidéo « ioT.mp4 » dans la partie « introduction » et par l’image « exemples.jpg » dans la partie « exemples »
11
CSS
1- La petite histoire de css
CSS (Cascading Style Sheets), permet de choisir la couleur du texte, la police utilisée, la taille du texte, les bordures,
le fond… et de faire la mise en page du site (menu à gauche, en-tête calé en haut, etc).
SYNTAXE :
Sélecteur 1
{
propriété1: valeur1;
propriété2: valeur2;
propriété n: valeur n;
}
Sélecteurs, propriétés et valeurs :
Un sélecteur : déterminer à quels éléments (ou type d’éléments) HTML on souhaite appliquer un style particulier. Si
on veut appliquer un style à tous nos paragraphes par exemple, on utilise le sélecteur « p ».
Une propriété : un critère bien particulier comme la taille d’un texte, sa police ou sa couleur par exemple.
Une valeur :détermine le comportement, par exemple bleu pour la propriété valeur.
Exemple :
P{
Color : blue ;
Font- size : 16px ;
2- Déclaration du CSS
On peut écrire du code en langage CSS à trois endroits différents :
• dans un fichier .css (méthode la plus recommandée) ;
• dans l'en-tête <head> du fichier HTML ;
• directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).
3- Appliquer un style
Prenons le code CSS suivant :
h1 {
color: blue;
}
em {
color: blue; }
Les titres <h1> et les textes peu importants <em> doivent s'afficher en bleu.
Si les deux balises doivent avoir la même présentation, il suffit de combiner la déclaration en séparant les noms des
balises par une virgule :
h1, em
{
color: blue; }
4- Les commentaires en CSS
Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations.
Taper /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.
12
Activité 1 : CSS
Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.
1- Effectuer les modifications ci-dessous sur la balise p.
<p style =" color:blue; ">
Visualiser votre travail, que remarquez-vous ?.................................................................................................................

2- Supprimer les modifications de la q1 puis ajouter les lignes suivantes dans la balise head.
<style>
p{
color:green;
}
</style>
Visualiser votre travail, que remarquez-vous ?.........................................................................................
3- Déplacer le contenu de la balise style dans un nouveau fichier enregistré sous le nom style.css puis modifier
la couleur .
4- Ajouter la ligne suivante dans la balise head.
<link rel="stylesheet" href="style.css"/>
Visualiser votre travail, que remarquez-vous ?...............................................................................

…………………………………………………………………………………………………………………………………………………..
L’attribut rel sert à préciser le style du fichier lié (dans notre cas c’est une feuille de style, donc stylesheet en anglais).
L’attribut href sert à faire le lien en soi.
5- Ajouter les lignes suivantes dans la feuille style.css une par une pour déduire leurs rôles
{ color: blue;
font-size:18px; /* (modifier par 14 puis 20 et voir les résultats)*/
text-align:justify; /* (modifier par center et left et voir les résultats)*/
font-family:sans-serif; /* (modifier par emoji et courier et voir les résultats)*/
letter-spacing: 2px; /* (modifier par 1px et 3px et voir les résultats)*/
13
Activité 2 : CSS
Ajouter les propriétés suivantes dans votre dernier fichier style.css et voir à chaque fois le résultat puis déduire leurs
rôles :
h1{
text-align:center;
font-weight :lighter ; /* essayer avec bolder*/
font-style:italic;/*essayer avec normal*/
text-decoration: underline; /*essayer avec underline double green*/
/*modifer par overline puis par none*/
text-transform: uppercase ; /*modifer par lowercase puis par capitalize */
text-shadow: red 2px 3px;

}
p{
text-indent:25px;
Activité 3 : CSS
Ouvrir votre fichier application.html et le relier avec le fichier style2.css contenant le code suivant (essayer par bloc
et déduire le rôle de chaque propriété)
blockquote {
padding: 35px; /* modifier par 55*/
background: #eee;
border-radius: 10px; /* modifier par 20*/
}
figure{
border: thin #c0c0c0 solid; /*changer thin par medium*/
padding: 5px;
max-width: 220px;
margin: auto;
}
img {
max-width: 220px;
max-height: 150px;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
14
Bordure (border ) en css
15
16
La propriété padding est une propriété raccourcie qui permet de définir les différents écarts de remplissage
sur les quatre côtés d'un élément (cf. les boîtes CSS). Elle synthétise padding-top, padding-right, padding-
bottom, padding-left.
padding: 1em;
padding: 10% 0;
padding: 10px 50px 20px;
padding: 10px 50px 30px 0;
padding: 0;
17
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>
Activité 1 :
On veut créez un formulaire d’authentification contenant un champ de texte pour saisir un login et un champ
password pour le mot de passe de huit caractères au maximum, chacun étant précédé d’un label explicatif.
Ajoutez un bouton d’envoi et un bouton de réinitialisation.
Commençons pas à pas :
1- Ouvrir un nouveau fichier et l’enregistrer sous le nom « fomulaire_authentification.html »
2- Commencer par la balise <form> </form> pour créer un formulaire.
3- Dans le bloc form , insérer les lignes suivantes :
<label > Login : </label>
<input type="text" />
Exécuter et voir le résultat :
Le type « text » de la balise input permet de préciser que le type des

données à saisir dans cette zone est un texte.
Essayer de cliquer sur le mot « Login » , la zone de saisie ne s’active pas , essayons alors de les relier ensemble :
<label for="log"> Login </label>

<input type="text" id="log">
Exécuter et voir le résultat , cliquer sur le mot login, la zone de saisie s’active.
Il faut nommer la future valeur qui sera rentrée par l'utilisateur en utilisant l’attribut « name »
<input type="text" id="log" name="login">

On peut ajouter plusieurs autres attributs :
Attribut Description
placeholder permet d’afficher un exemple de la valeur attendue en gris clair directement dans le
champ
disabled indique si le champ doit être désactivé
readonly indique si le champ peut être édité ou non
required indique que le champ est obligatoire à saisir
value La valeur par défaut du champ
maxlength le nombre maximal de caractères à saisir
size définit la largeur de la zone de texte
hidden Les champs de ce type sont invisibles sur la page.
18
4- Ajoutons maintenant le champ de mot de passe :
<label for="mdp"> Mot de passe </label>
<input type="password" id="mdp" name="mdp" maxlength="8">
Enregistrer et exécuter, essayer de saisir plus de 8 caractères. Est-ce que
c’est possible ?
5- Ajouter les boutons envoyer et effacer :

<input type="submit" value="Envoyer"/>
<input type="reset" value="Effacer"/>
Le bouton de type submit permet d’envoyer les données du formulaire au
serveur pour un traitement par le script spécifié dans l’attribut action de la
balise <form action= …>
Le bouton de type reset réinitialise tous les contrôles du formulaire à vide ou à leur valeur par défaut.
6- Ajoutons les balises <fieldset> </fieldset> autour des éléments ajoutés dans le bloc form.
<fieldset>
<label for="log"> Login </label>
…
<input type="reset" value="Effacer"/>
</fieldset>
Enregistrer et voir le résultat. ………………………………………………….
Après la balise fieldset, ajouter la balise suivante et voir le résultat :
<fieldset>
<legend> Authentification </legend>
7- Relier votre fichier html avec un fichier

stylform.css à créer et qui contient le code suivant (écrire ligne par ligne pour voir le résultat et déduire le
rôle de chaque propriété) :
body{ background-color:cornsilk;
margin-top: 100PX;}
form{
background-color:darkgray;
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 15px;}
fieldset{
width: 280px;
border: none;}
legend{
font-family: 'Courier New';
font-weight: bold;
text-align: center;}
input{
border-radius: 8px;
float: right;}
Les types de champs qu’on peut ajouter :
19
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
<input type="radio" name="sexe" value="F" />
ils permettent d’effectuer un seul choix (conditionné par une Femme
valeur identique pour l’attribut name) parmi des propositions
L’attribut facultatif checked détermine la valeur préselectionnée.
Jour(s) de disponibilité :
Les cases à cocher : <input type="checkbox" name="jour[]" value="1" />
Mercredi
elles permettent d’effectuer un à plusieurs choix parmi un <input type="checkbox" name="jour[]" value="2" />
Samedi
nombre limité de propositions ; les choix effectués peuvent être
stockés dans un tableau (attribut name ci-contre) ou chaque case <input type="checkbox" name="jour[]" value="3" />
Dimanche
peut avoir sa propre valeur de l’attribut name
Statut :
La liste déroulante : <select name="statut">
<option value="1">Etudiant</option>
<option value="2">Professeur</option>
</select>
elle permet d’effectuer un seul choix parmi un nombre élevé de L’attribut value indique la valeur renvoyée.
propositions
Le fichier joint : PJ : <input type="file" name="pj"
value="fichier" />
il permet de rechercher un fichier à envoyer en pièce jointe
La liste déroulante avancée : <input list=ville >
<datalist id=ville>
<option value="TUNIS"></option>
<option value="Bizerte"></option>
<option value="Nabeul"></option>
</datalist>
Vérifient que le contenu saisi respecte le format requis

Les zones de type « tel » , « mail » et « url » et signalent l’erreur si ce n’est pas le cas (empêchant la
validation du formulaire)
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>
20
Application :
Créer le formulaire suivant et l’enregistrer sous le nom commande.html:
2- Créer une page html enregistrée sous le

nom « succes.html » contient le
paragraphe suivant « commande passée
avec succès »
3- Dans la balise form du formulaire

commande.html ajouter pour l’attribut
« action » la valeur suivante
<form action=" succes.html">
Cliquer sur le bouton j’achète et regarder

le résultat.
4- Relier la page commande avec un fichier

css nommé sform.css qui contient le code
ci-dessous .
Essayer ligne par ligne et déduire le rôle de

chaque propriété :
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;
}
21
Correction :
<body>
<form action="succes.html">
<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@domaine.com" 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>
<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>
22
Balise de groupement div, les attributs class et id
Activité :
1- Créer une page web nommée « connexion .html » qui contient le formulaire suivant :
Remarque :
- N’utiliser pas la balise de retour à la ligne <br>
- N’utiliser pas la balise <button>
2- Mettre chaque ligne (chaque label et zone de saisie correspondante, les boutons) dans un bloc.
NB : Pour regrouper des éléments en HTML , on utilise la balise <div> …. </div>
3- Ecrire un code css afin d’obtenir une page comme suit :
1. Mettre une image en arrière-plan de la page. 4. Mettre les boutons au centre => il faut
2. Le fieldset est au centre de la page. (il faut identifier le bloc des boutons.
définir une largeur puis mettre les marges
5. Régler la largeur du bouton « annuler »
gauche et droite automatique)
Il a un arrière-plan coloré. 6. Mettre les zones de saisies à droite. Régler
Régler la marge haut et la marge d’intérieur. leurs largeurs.
3. Régler l’espace entre les blocs (les marges en
7. Changer la couleur des boutons et régler leurs
bas)
Appliquer une bordure arrondit. marges d’intérieurs
Choisir une couleur d’arrière-plan plus claire 8. En passant la souris sur les boutons leur couleur
que celle du fieldset.
change et le curseur devient un pointeur
Régler la marge d’intérieur.
23
Correction :
On remarque que la mise en forme des zones de saisies n’est pas la même pour les boutons. Donc on ne peut pas
utiliser le sélecteur input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="s.css"/>
<title>connexion</title>
</head>
<body>
<form action="">
<fieldset>
<div> <label for="log"> Adresse email: </label>
<input class="zone" type="email" id="log" name="login">
</div>
<div> <label for="mdp"> Mot de passe: </label>
<input class="zone" type="password" id="mdp" name="mdp" maxlength="8"
placeholder="8 caractères au maximum">
</div>
<div id="bou"> <input class="bout" type="submit" value="Se connecter"/>
<input class="bout" id="ann" type="reset" value="Annuler"/>
</div>
</fieldset>
</form>
</body>
</html>
Fichier css
body{ #ann{
background-image:url(a.jpg); width: 90px;
} }
fieldset{ .zone{
background-color: rgb(139, 201, 160); float: right;
margin-left: auto; width: 200PX;
margin-right: auto; }
width: 400px; .bout{
margin-top: 200px; background-color: skyblue;
padding: 50px; padding: 5px;
} font-family: 'Courier New', Courier,
div{ monospace;
margin-bottom: 10px; font-weight: bold;
border-radius: 5px; }
background-color: rgb(207, 250, 221); .bout:hover {
padding: 15px; background: #0f21be;
} cursor: pointer;
#bou{ }
text-align: center;
}
24
Style : class et id
Pour que certains paragraphes 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p class="introduction">Bonjour et bienvenue !</p>
</body>
</html>
Dans le CSS, indiquez le nom de votre classe en commençant par un point, comme ci-dessous :
.introduction
{
color: blue;
}
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.
Dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) :
#introduction
{
color: blue;
}
Les balises universelles
Il existe deux balises dites universelles :
•<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> et <em> sont de la même famille.
•<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 » dans la page et
provoquent donc obligatoirement un retour à la ligne.
Exemple :
<p>Bonjour et <span class="salutations">bienvenue</span> !</p>
.salutations
{
color: blue;
}
25
Balises HTML liées aux groupement : <div> , <span>, <hgroup>
Activité 1 :
1- Ecrire les deux codes suivants html et css dans deux fichiers exdiv.html et stylex.css
exdiv.html stylex.css
<body> p{ background-color: gray;}
<p> Avant la division <div>Dans la division</div> Et div{ background-color: red;
après la division</p> opacity:1 ; }
</body>
Exécuter et regarder le résultat, quel est le rôle de la balise div ?
…………………………………………………………………………………………….
2- Modifier les deux codes comme suit :
<body> p{ background-color: gray; }

<p> Avant la division <span>Dans la span{
division</span> Et après la division</p> background-color: red;
</body> opacity:1 ; }
Exécuter et regarder le résultat, quel est le rôle de la
balise span ? ……………………………………..
Retenons : Division en bloc ou inline

L'élément div représente une division en mode bloc. Un texte en mode bloc est un texte qui sera automatiquement
procédé et suivi d'un saut de ligne.
A l’opposé, on a les textes en mode inline qui restent dans le texte. On utilise à cette fin l'élément SPAN.
3- Dans le fichier css changer la valeur de la propriété opacity par 0 puis par 0.3 et regarder les résultats .
………………………………………………………………………………………………………………………………………………………..
4- Modifier les propriétés background-color et opacity par une seule comme suit :
span{
background-color:rgba(255,0, 0, 0.3); }
La transparence en css peut se faire avec deux méthodes :
 avec la propriété opacity (on lui donne une valeur entre 0 et 1), mais dans ce cas tout le contenu
devient transparent)
 avec la valeur rgba(red, green, blue, alpha) , la valeur alpha est compris entre 0 et 1
Activité 2 :
Ajouter ces deux codes et voir le résultat
<hgroup> hgroup {
<h1>LES BALISES DE GROUPEMENT</h1> text-align: right;
<h2>div et span</h2> font-family: Verdana, sans-serif;
</hgroup> padding-right: 16px;
border-right: 10px solid #00c8d7;
}
Quel est le rôle de hgroup ?
L'élément <hgroup> est utilisé pour regrouper un ensemble des éléments de <h1> à <h6> , lorsqu'un titre a plusieurs
niveaux (sous-titres).
26
STRUCTURE GENERALE D’UNE PAGE WEB
<header> <footer> <article> <section> <nav> <aside>
En regardant des exemples de sites web on remarque qu’ils sont structurés de plusieurs façons avec quelques points
en commun.
Le HTML5 nous offre une série de nouveaux éléments dit « structurants » et qui vont préciser le sens de certains
contenus.
header : représente l’en-tête ou le haut d’une page ; <header>…..</header>

nav : représente un menu de navigation dans une page ; <nav>…..</nav>
main : représente le contenu principal de l’élément body ; <main>…..</main>
section : représente un groupement thématique de contenu ; <section>…..</section>
article : représente une partie de page qui se suffit à elle-même, comme un post sur un blog par exemple ; < article>.
…</ article>
aside : représente une partie de contenu non lié au reste ; <aside>…..</aside>
footer : représente le pied d’une page ; <footer>….</footer>
Activité 1 : Commençons par un exemple, créer une page html nommée « exemple.html » qui contient les éléments
structurants. A l’aide d’un code css essayer de positionner ces éléments .
27
Code html
<body>
<header>
<img src="logo.jpg" alt="">
<h1> entête </h1>
</header>
<div>
<nav>naviguation</nav>
<section> section</section>
<aside> aside</aside>
</div>
<footer>pied</footer>
</body>
Relier ce code par un fichier css nommé exp.css
Appliquer ces propriétés :
- Le corps : les marges extérieures sont nulles

- L’entête :
couleur d’arrière plan : #f575f5
hauteur de 20 VH
NB : 1 vh = 1 % de la hauteur du viewport et que 1 vw = 1 % de la largeur du viewport
- L’image logo :
Largeur de 10vw
Marges : 1%
- H1 : marges d’intérieures haut : 1%
En exécutant le code on remarque que le titre reste en bas ; dans ce cas on va ajouter la propriété « display :flex »
pour le sélecteur « header » pour mettre les blocs dans la même ligne
- Div display :flex

- Nav :
Largeur de 10vw
Hauteur de 70vh
Couleur d’arrière-plan : cadetblue
- Section
Largeur de 80vw
Hauteur de 70vh
Couleur d’arrière-plan : #ddddee
- Aside
Largeur de 10vw
Hauteur de 70vh
Couleur d’arrière-plan : cadetblue
- footer
Largeur de 100vw
Hauteur de 10vh
Couleur d’arrière-plan : #f575f5
28
Correction :
body{
margin: 0px;
}
header{
background-color: #f575f5;
height:20vh;
display: flex;
}
img{
width: 10vw;
margin:1%;
}
h1{
padding-top: 1%;
}
div{
display: flex;
}
nav, aside {
width: 10%;
height: 70vh;
background-color: cadetblue;
}
section{
width: 80%;
height: 70vh;
background-color: #ddddee;
}
footer{
width: 100%;
height:10vh;
background-color: #f575f5;
}
29
Les bordures en CSS
En utilisant le contenu du fichier applicaton1.txt enregistré sous D:\3STI\applications , ajouter les balises nécessaires
afin d’obtenir cette page web et l’enregistrer sous le nom application1.html
Lier votre page web par un fichier css nommé « styapp1.css » et ajouter les propriétés nécessaires afin d’obtenir la
mise en forme suivante :
30
1- Les images ont une largeur et hauteur 50px , marges gauches 10%
2- Appliquer un arrière-plan dégradé incliné de 45 degrés, commençant par la couleur silver et finissant en
couleur gris. background:linear-gradient(45deg,silver,gray);
Remarque : voici des autres exemples de degradation :
/* Un dégradé commençant en bas à droite et allant jusqu'au coin supérieur gauche, commençant en
bleu et finissant en rouge. */
linear-gradient(to left top, blue, red);
/* Un arrêt de couleur : un dégradé allant de bas en haut, commençant en bleu, devenant vert à
40% de sa longueur et finissant en rouge. */
linear-gradient(0deg, blue, green 40%, red);
/* Une indication de couleur : un dégradé allant de gauche à droite, commençant en rouge

atteignant la couleur intermédiaire à 10% de la longueur du dégradé et prenant les 90% restant
pour passer au bleu. */
linear-gradient(.25turn, red, 10%, blue);
/* Un dégradé avec plusieurs arrêts de couleur : un dégradé incliné de 45 degrés commençant en

bas à gauche avec une moitié rouge et avec une moitié bleue en haut à droite où une ligne dure
marque le changement entre rouge et bleu */
linear-gradient(45deg, red 0 50%, blue 50% 100%);
3- La largeur du corps de la page 70% , les marges sont automatiques
4- La hauteur de l’entête « header » est 20vh
5- Le titre est un texte avec un ombre
6- La partie navigation possède une couleur d’arrière-plan avec un peu de transparence ( alpha =0.5)
appliquer l’arrondissement des bordures comme il est présenté
les marges d’intérieures haut et bas est de 1px, la largeur est 70%
7- Les éléments de la liste sont dans la même ligne.
Pas de style pour les éléments de la liste(pas de puce).
La marge gauche est de 20px
8- Les liens de la partie navigation ont une couleur blanche, pas soulignés, et gras.
9- En passant la souris sur ces liens la couleur devient noir
10- Changer le mot « hover » par « visited » pour appliquer la modification uniquement
lorsqu’on visite le lien.
11- En cliquant dans la zone de saisie(recherche) sa couleur d’arrière-plan change
12- La zone de saisie est alignée à droite, ses bordures sont arrondis, sa marge droite
est de 1%, sa hauteur est 20px
13- Les sous-titres et le pied de la page ont une couleur d’arrière-plan « coral », la
marge intérieur gauche 5px
14- Le main est de display flex
15- Pour la section : couleur d’arrière-plan blanc, largeur 80%, bordure de type solid
et de couleur coral , appliquer les bordures arrondis, marge droite 1%
16- Pour la partie aside : couleur d’arrière-plan blanc, largeur 20%, bordure de type
solid et de couleur coral , appliquer les bordures arrondis
17- Pour le pied de la page : marge haut 5vh, marges intérieures 10px , l’alignement
centré, gras, bordure arrondit
18- Pour les articles et les paragraphes : marges intérieures 2% , alignement justifié , police cambria ,cochin..,
taille 1.2em
19- On veut fixer la partie navigation dans l’écran, utiliser alors la propriété position :fixed et top :10%
20- Mettre la hauteur de section en 70vh, on remarque que le texte dépasse la zone de section
21- Ajouter alors la propriété overflow :scroll pour la section
31
Correction
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="excs2.css">
<title>Document</title>
</head>
<body>
<header>
<h1>Système , technologie et internet</h1>
</header>
<nav>
<ul>
<li><a class="lien" href="#ac"> Accueil</a></li>
<li><a class="lien" href="#se">Services</a></li>
<li><a class="lien" href="#co">Contact</a></li>
<li> <input type="text" placeholder="Rechercher..."> </li>
</ul>
</nav>
<main>
<section>
<h3 id="ac">Les objets communicants</h3>
<article>Les progrès continus des technologies de la microélectronique et des
réseaux de capteurs permettent maintenant d’envisager le déploiement de services sécurisés
et optimisés distribués sur des réseaux d’objets communicants intelligents interconnectés
: c’est notamment la vision de l’Internet des Objets. Nous assistons actuellement au
déploiement d’une nouvelle génération d’objets interconnectés dotés de capacités de
communication, de détection et d’activation pour de nombreuses applications. Ainsi,
l’interconnexion d’objets dotés de capacités avancées de traitement va conduire à une
révolution en termes de création et de disponibilité de service et va profondément changer
notre façon d’agir sur notre environnement : les villes, les transports, l’énergie,
l’industriel, le médical, le commerce, la banque…,
</article>
<h3>Les objets connectés</h3>
<article>Les objets connectés ont encore de beaux jours devant eux ! Tee-shirts,
montres, chaussures, lunettes.., les objets high-tech, aussi appelés intelligents,
envahissent nos foyers. Aujourd'hui faisant partie intégrante de notre vie quotidienne,
leur utilité est indissociable pour le côté pratique, ludique et technologique.
Les objets connectés sont des objets électroniques connectés sans fil,
partageant des informations avec un ordinateur, une tablette ou un smartphone... et
capables de percevoir, d'analyser et d'agir selon les contextes et notre environnement.
Parmi les acteurs de l'internet des objets on trouve : Intel, Schneider

Electric, Google, IBM, STMicroelectronics...
</article>
32
</section>
<aside>
<h3>Retenons</h3>
<p>
Un objet communicant est objet capable de recevoir et d’envoyer des informations sur
son environnement sans l’intervention humaine , donc capable de communiquer et de prendre
décision d’une façon autonome.
</p>
<h3>pour nous rejoindre</h3>
<a href="https://www.facebook.com/iotfacts" target="blank"><img src="fb.png" alt="">
</a>
<img src="twitter.png" alt="">
</aside>
</main>
<footer>
--Site crée par l'élève nom prénom ©2022--
</footer>
</body>
</html>
Css
img{width:50px;
height: 50px;
margin-left: 10%;}
body{
background:linear-gradient(45deg, silver, gray);
width: 70%;
margin: auto;}
header{height: 20vh; }
header h1{
text-shadow:0PX 3PX coral;
}
nav{
background-color:rgba(168, 131, 21,0.5);
border-radius: 15PX 15px 0px 15px;
padding-top: 1px;
padding-bottom: 1px;
width: 70%;
position: fixed;
top: 10%;
}
li{
list-style: none;
display:inline ;
margin-left: 20px;
}
.lien {text-decoration: none;
color: aliceblue;
font-weight: bolder;
33
}
.lien:hover{color: #000;}
/*.lien:visited{color:rgb(231, 36, 36);}*/
input:focus{ background-color: bisque;}
input{float: right;
border-radius: 40px;
margin-right: 1%;
height:20px ;
}
h3,h2,footer{background-color: coral;
padding-left: 5px;
}
main{display: flex;
}
section{
background-color: white;
width: 80%;
border: solid coral;
border-radius: 15px 0px 15px 15px;
margin-right: 1%;
/* height: 70VH;
overflow: scroll;*/
}
aside{
width: 20%;
background-color: white;
border: solid coral;
border-radius: 0px 0px 15px 15px;
}
footer{
margin-top: 5vh;
padding: 10px;
border-radius: 15px;
text-align: center;
font-weight: bold;
}
article,p{
padding: 2%;
text-align: justify;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 1.2em;
}
34
HTML5&CSS3 3STI
Transition et animation en CSS

Ouvrir le fichier index.html qui se trouve dans D:\3sti\nabeul , puis le relier par un fichier stylenab.css à
créer pour obtenir cette page
Corps de la page : couleur d’arrière-plan bleu ciel(aquamarine), pas de marges

Entête : centré(la largeur :80% ; marges gauche et droite : 10%), hauteur 30vh,
Arrière-plan : image nabeul.jpg avec une taille (100% , 3Ovh) Type de bordure :outset
Le titre de l’entête : marge intérieure haut 5%, couleur beige , opacité 0.6 , police courier new , ombre (1px 1px
2px black)
Le main : display flex , marges gauche et droite 10%
Navigation : couleur d’arrière-plan blanc , Type de bordure : outset ,largeur 20%
Les éléments de la liste : pas de style
Les liens de menu navigation : display block , couleur d’arrière-plan bleu, pas de soulignement, couleur blanc,style
gras , lageur 60% , marge haut 3% , marges intérieures 3%
Section : couleur d’arrière-plan blanc, Type de bordure : outset, largeur 60%, marge intérieure gauche 1%
Paragraphes : police Georgia, 'Times New Roman', Times, serif ; taille 1.1em
Aside : couleur d’arrière-plan blanc, Type de bordure : outset, largeur 20%

Image : largeur 100%
Fenêtre(iframe) : largeur 100%, hauteur 50vh
Pied : marges gauche et droite 10%, alignement centré

35
Ajouter les transitions suivantes :
 En passant la souris sur les liens : la couleur devient rgb(248, 20, 180) , largeur 80%, hauteur 5vh ,
bordure arrondit 5px
La transition de la largeur dure 1seconde
 En passant la souris sur l’image de l’aside : la largeur devient 120%
La transition de la largeur dure 2secondes
 En passant la souris sur l’image de header : les marges gauche et droite 5% , largeur 90% , la durée
de transition 3s
Ajouter les animations suivantes :
Paragraphe :
p
{
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein
{ from { margin-left:
100%; width: 300%;
} to { margin-
left: 0%; width: 100%;
Titre h1: durée de l’animation 5 secondes , nom de l’animation : anima
Cette animation passe par 3 étapes :
• le départ (to ou 0% ) avec une marge intérieure haut 0%

• la moitié (50%) avec une marge intérieure haut 10%
• l’arrivée (from ou 100%) avec une marge intérieure haut 5%
Ajouter une animation pour le pied de page qui dure 20 secondes et qui se passe sur 5 étapes où à
chaque étape la couleur change.
36
Annexe CSS
Propriétés de mise en forme du texte
La mise en forme est l’opération qui permet de contrôler la présentation du texte.
Description Propriété Valeurs (exemples)
Police du texte font-family police1, police2,police3,…
Taille du texte font-size 1.3em, 16px, 120%...
Gras font-weight bold : gras , bolder : plus gras , lighter : plus fin ,
normal : pas gras (par défaut)
Italique font-style italic (italique ), oblique(autre façon de mettre en
italique) , normal (par défaut)
Soulignement, ligne au-dessus, text-decoration underline (souligné), overline ( ligne au-dessus),
barré ou clignotant line-through (barré),blink (clignotant),
none : normal (par défaut)
Alignement horizontal du texte text-align left : aligné à gauche (par défaut)
center : centré
right : aligné à droite
justify : justifié (prend toute la largeur de la page)
Ombre text-shadow Exemple : 5px 5px 2px blue
(horizontale, verticale, fondu, couleur)
Propriétés de couleur et de fond :

Couleur du texte color On utilise l’une de ces méthodes :
-Nom (exemple : black, blue, white…)
-rgb(rouge,vert,bleu) (exemp :rgb(50,102,3))
-rgba(rouge,vert,bleu,transparence) (pour
rendre la couleur transparente)
-valeur hexadécimal comme #CF1A20...
Couleur d’arrière-plan background-color Identique à color
Image de fond (d’arrière-plan) background-image url('image.png')
Taille de l’image de fond Background-size Largeur hauteur (exemple : 100% 20vh)
Transparence opacity Valeur entre 0 et 1 (exemple : 0.5)
Propriétés des boîtes
Description Propriété valeur
Largeur width En px, en

% ou vm
Hauteur height En px, ou
vh
Marge Margin
(en haut, à (top, right
droite , en , bottom, ,
bas , à left)
gauche)
37
Description Propriété valeur

Marge intérieure Padding Exemple :
23px 5px 23px 5px (haut, droite, bas, gauche)
25px La même valeur pour les quatre
Marge intérieure en haut, padding-top, 10px
à droite, padding- right,
en bas, padding- bottom
à gauche padding- left
Épaisseur de bordure border-width Exemple : 3px
Couleur de bordure border-color nom, rgb(rouge,vert,bleu),
rgba(rouge,vert,bleu,transparence),
#CF1A20...
Type de bordure border-style solid, dotted, dashed, double, groove, ridge,
inset, outset
propriété combiné de bordure border 3px solid black ;
Bordure arrondie border-radius
Propriétés des listes
Type de liste list-style-type disc, circle, square, decimal,lower-roman, upper-
roman,lower-alpha, upper-alpha,none
Propriétés de positionnement et d'affichage
Type d'élément display flex ,block, inline, table, table-
(flex,block, inline,none…) cell, none...
Comportement en cas de overflow auto, scroll, visible, hidden
dépassement
Flottant float left, right, none
Positionnement position relative, absolute, fixed
Position par rapport au haut top 20px
Position par rapport au bas bottom 20px
Position par rapport à la gauche left 20px
Position par rapport à la droite right 20px
Ordre d'affichage z-index 1
38
exemple de float
Display :
display flex
Type de liste
Bordure Border-radius
Position
39
Exercice :
1- Ecrire le code html suivant et l’enregistrer sous le nom « exemple.html »

<body><div > contenu 1</div>
<div > contenu 2</div>
</body>
2- Ecrire un code css dans un fichier nommé « exestyle.css » afin d’obtenir la mise en forme suivante
3- Ajouter les propriétés nécessaires pour avoir les apparences suivantes

a-…………………………………………………….
b-………………………………………………………………………
c-………………………………………………………………………..
d-…………………………………………………………………………….. e- …………………………………………………..
f -………………………………………………………………………….. g- …………………………………………………..
h-………………………………………………………………………….. i- …………………………………………………..
40
j- ………………………………… k-………………………………
L-……………………………………………………. m-………………………………………
n-……………………………………………… o-…………………………………………………………………
4- Proposer deux solutions pour que la couleur de fond de contenu 1 soit différente à celle de contenu 2.
(exemple contenu 1 bleu ciel , contenue 2 jaune)
html css
Solution 1
41
Solution 2
42
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;
}
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;}
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
43
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 {
height: 100px;
width: 200px;
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 {
height: 100px;
width: 200px;
animation-iteration-count: 2;
}
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).
44
div {
height: 100px;
width: 200px;
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)
 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;
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 :
45
@keyframes taille {
0% {width: 50px ;}
100% {width: 200px ;}
}
div {
height: 100px;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
div:hover {
animation-play-state: paused;
}
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;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
46
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;
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;
47
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 :
Page.html :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="tr2.css">
<title>Document</title>
</head>
<body>
<div>3SI</div>
</body>
</html>
tr2.css :
div{
color: white;
background-color: red;
width: 300px;
height: 300px;
text-align: center;
position: relative;
top: 0;
left: 0;
transition:left,border-radius 5s,10s ;
}
div:hover{
left:1000px;
border-radius: 50%;
}
48

Cours HTML5 - CSS3 3sti 2021 2022

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours HTML5 - CSS3 3sti 2021 2022

Transféré par

Droits d'auteur :

Formats disponibles

Partie : Création d’un site web interactif 3STI

Rappel : C’est quoi HTML ?

Par quel langage est écrite cette page ?

Structure de base d'une page HTML5

on utilise la balise ………………………..

Remarquons qu’il existe des balises paires et des balises

<p>Le taux de CO………..2………. dans

<…….>Voici un son: </………>

<………>Voici une vidéo:</……...>

La balise <a> permet de créer un lien vers un site ou une page

Les différents liens relatifs

Pour pallier à ce problème, l’une des méthodes est d’utiliser la balise

Des balises HTML 5 relatives aux textes et sémantiques :

Chercher la balise nécessaire pour afficher les espaces ……………………………………………………………

3- Ecrire le code suivant pour afficher un code source écrit en python :

<p>Cliquer sur l’ordinateur, le smartphone, ou la tasse de café pour aller à une

<img src="workspace.jpg" alt="image source" usemap="#photomap">

Remarque : Pour connaître les coordonnées vous pouvez utiliser un logiciel de

La page à ouvrir en cliquant sur cette zone est « croissant.html »

Ajouter le code correspondant dans le fichier index

<……………… src="………………………………" alt="………….." usemap="………………….." >

<!- - créer l’image cliquable - - >

Font- size : 16px ;

1- Effectuer les modifications ci-dessous sur la balise p.

<p style =" color:blue; ">

Visualiser votre travail, que remarquez-vous ?.................................................................................................................

<link rel="stylesheet" href="style.css"/>

Visualiser votre travail, que remarquez-vous ?...............................................................................

L’attribut href sert à faire le lien en soi.

font-size:18px; /* (modifier par 14 puis 20 et voir les résultats)*/

text-align:justify; /* (modifier par center et left et voir les résultats)*/

font-family:sans-serif; /* (modifier par emoji et courier et voir les résultats)*/

letter-spacing: 2px; /* (modifier par 1px et 3px et voir les résultats)*/

font-weight :lighter ; /* essayer avec bolder*/

font-style:italic;/*essayer avec normal*/

text-decoration: underline; /*essayer avec underline double green*/

/*modifer par overline puis par none*/

text-transform: uppercase ; /*modifer par lowercase puis par capitalize */

text-shadow: red 2px 3px;

padding: 10px 50px 20px;

padding: 10px 50px 30px 0;

1. recueil d’informations à l’aide de contrôles dans un formulaire HTML,

Le type « text » de la balise input permet de préciser que le type des

<label for="log"> Login </label>

<input type="text" id="log" name="login">

5- Ajouter les boutons envoyer et effacer :

7- Relier votre fichier html avec un fichier

L’apparence de la zone de texte multilignes est paramétrable

Vérifient que le contenu saisi respecte le format requis

Les boutons d’envoie et de réinitialisation :

Créer le formulaire suivant et l’enregistrer sous le nom commande.html:

2- Créer une page html enregistrée sous le

3- Dans la balise form du formulaire

<form action=" succes.html">

Cliquer sur le bouton j’achète et regarder

4- Relier la page commande avec un fichier

Essayer ligne par ligne et déduire le rôle de

- N’utiliser pas la balise de retour à la ligne <br>

- N’utiliser pas la balise <button>

NB : Pour regrouper des éléments en HTML , on utilise la balise <div> …. </div>

3- Ecrire un code css afin d’obtenir une page comme suit :

<p>Bonjour et <span class="salutations">bienvenue</span> !</p>

font-style:italic;/essayer avec normal/

text-decoration: underline; /essayer avec underline double green/

/modifer par overline puis par none/

text-transform: uppercase ; /modifer par lowercase puis par capitalize /