Scribd
Importer
3 vues37 pages

Introduction à HTML5 et CSS3

HTML5 est un langage de balisage permettant de structurer le contenu des pages web avec des éléments sémantiques et des fonctionnalités avancées comme la géolocalisation et la compatibilité entre navigateurs. Le document présente également les structures HTML5, les balises essentielles, ainsi que des exercices pratiques pour créer des pages web et utiliser des formulaires. Enfin, il aborde les liens hypertextes et les mises en forme CSS pour améliorer l'interaction et l'esthétique des pages.

Transféré par

rhimajnayah
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
3 vues37 pages

Introduction à HTML5 et CSS3

HTML5 est un langage de balisage permettant de structurer le contenu des pages web avec des éléments sémantiques et des fonctionnalités avancées comme la géolocalisation et la compatibilité entre navigateurs. Le document présente également les structures HTML5, les balises essentielles, ainsi que des exercices pratiques pour créer des pages web et utiliser des formulaires. Enfin, il aborde les liens hypertextes et les mises en forme CSS pour améliorer l'interaction et l'esthétique des pages.

Transféré par

rhimajnayah
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

HTML5 +css3

4 Laabème SI -
sti

HTML5
C’est quoi HTML5
HTML 5 (HyperText Markup Language) est un langage de balisage (dit aussi langage de
marquage) qui permet de structurer le contenu des pages web dans différents éléments.
1 C’est un langage interprété par les navigateurs (Internet Explorer, Firefox, Chrome
...), ne pouvant en aucun cas effectuer des calculs, même simples comme une multiplication.

Advantages HTML5

Amélioration de la sémantique des pages Web.


Structure de code plus propre et organisation du site en fonction des contenus.
Déclaration claire et simple de Doctype : < ! DOCTYPE html>.
Création des animations, diffusion des vidéos ou de la musique.
Compatibilité entre les différents navigateurs et appareils (Pc, Smartphones…).
Ajout d’un Canevas pour l'animation et le développement de jeux. Possibilité de navigation hors ligne.
Prise en charge de la géolocalisation.
Amélioration de stockage.
Fournit des avantages d'optimisation pour les moteurs de recherche.

laabidiabdelaaziz@[Link]
Structures HTML5

En‐tête du document,
Il fournit de multiples Le Doctype au
renseignements sur le début
document lui‐même.
de page
Corps du
document. La balise <HTML>
Le contenu de la indique au navigateu
qu’il s’agit d’un
page :texte, blocs,
document HTML
images

laabidiabdelaaziz@[Link]
laabidiabdelaaziz@[Link]
1

Les balises d’en-tête < head>

Balise < meta >

Les balises META servent à placer des métadonnées (metadata) dans une page HTML. On
placera ces informations dans l’élément head, et elles ne seront pas affichées sur la page et qui
sont destinées aux
 Navigateurs web
 Moteurs de recherche
 Outils d’indexation
Exemples

 Définissez des mots-clés pour les moteurs de recherche :

 Définissez une description de votre page Web :

 Définir l'auteur d'une page :

 Actualiser le document toutes les 30 secondes :

 Configuration de la fenêtre d'affichage

 Encodage des caractères à destination des navigateurs celle-ci doit se placer après le

<head> et avant le <title>

 Balise < title >

La norme HTML a prévu une balise spéciale pour le titre de la page, c'est la balise< title>.
Les moteurs de recherche y ont d'ailleurs accordé une grande importance

 Balise < link >
Permet de charger les fichiers de code annexes à la page HTML, notamment les fichiers de
feuilles de style (.css)
Exemples

1 Utilisé pour définir un script en JavaScript encore elle peut pointer vers un fichier de script
externe (.js) avec l’attribut src, dans ce cas le contenu de la balise doit rester vide

laabidiabdelaaziz@[Link]
2

TP1 ( HTML5 et CSS3)


1) Lancer l’éditeur visual code
2) Lancer un nouveau fichier
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.:

5) Ajouter les lignes suivantes à la fin du fichier tp5 et 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.


En déduire le rôle de chaque balise ol.
…………………………………………………………………………………………………..
…………………………………………………………………………………………………
3

9) Effectuer les modifications présentées dans le tableau ci-dessous sur votre code
HTML.
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) créer une feuille de style appelé « [Link] » qui permet de faire les mises en forme
suivantes à la page web « [Link] » :
Couleur d’arrière-plan : rose
Titre : centré , souligné , de couleur bleu , taille=40px , police= verdana
Paragraphe : taille =20px ,
La liste numéroté : Gras , Italique
11) Quelle est la balise qui nous permet de faire la liaison entre la page web et le fichier css ?
Quel est son emplacement dans le code HTML ?
4

TP2 ( HTML5 et CSS3)

1) Lancer l’éditeur visual code


2) Lancer un nouveau fichier
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.:

5) Copier deux images d'extension jpg dans votre dossier de travail, et renommer-les
en [Link] et [Link].

6) Ecrire la balise qui permet d’insérer les deux images de la façon suivante :
Image1 : aligné à gauche
Largeur = 200
Hauteur = 150
Info bulle de l’image : « première image »
Image2 : aligné à droite
Bordure = 4
Largeur = 100
Hauteur = 100
Info bulle de l’image : « deuxième image »

7) Comment peut-on mettre une image en arrière-plan de la page web?


5

8) ajouter à la fin de la page web le tableau suivant :


Image1 Image2

9) Ecrire le code qui construit les tableaux suivants :

Table 1 :
Les types d’images
Image vectorielle Image bitmap Image animée

Table 2 :
Bonjour Hello

bonsoir Hi

Table 3 :
Voici deux colonnes fusionnées Hello

Bonjour bonsoir hi

Balise TD
Attribut Type de valeur Description
colspan entier Le nombre de colonnes à fusionner
rowspan entier Le nombre de lignes à fusionner
TP 3 ( HTML5 et CSS3)
-Les liens hypertextes (externes et internes) + iframe

1) Lancer l’éditeur Visual code


2) Lancer un nouveau fichier
3) Enregistrer votre travail dans C:/votre dossier/html5 et css3/ [Link]
4) intégrer dans une page HTML le contenu d'une autre page HTML : créer une fenêtre qui
nous permet de faire une recherche sur google dans la page web « [Link] ».
5) Lien hypertexte externe : Ecrire un code HTML permettant de réaliser la page
web [Link] qui contient deux liens hypertextes vers les deux pages [Link] et [Link]
(Ajouter des liens pour retournes des pages tp1 et tp2 vers la page « [Link] »)
6) Lien hypertexte interne :
a) Ajouter en haut de la page web [Link] le mot « descendre vers le bas » qui sera
la source d’un lien hypertexte interne vers la fin de page.
b) Ajouter à la fin de page web [Link] le mot « Remonter » qui sera la source d’un
lien hypertexte interne vers le début de page.
7) Ajouter à chaque balise a les propriétés suivantes, puis interpréter :
Propriété interpréter
<a href=” “ target=”_self”>

<a href=” “ target=”_parent”>

<a href=” “ target=”_blank”>

8) En se basant sur le « rappel des mises en forme des liens », appliquer les
mises en forme suivantes aux liens de la page web« [Link] »
Mises en forme demandées Code en CSS

Lien non visité : couleur rouge

Lien visité : souligné et de couleur bleu

Lien survolé par le pointeur de la souris :

couleur rose

Lien en cours d’activation : couleur jaune


Correction duTP 3 ( HTML5 et CSS3)
-Les liens hypertextes (externes et internes)

Q4) <iframe src=" [Link] " title="description"></iframe>


Q5)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p><a href="[Link]" >TP 1</a></p>
<p><a href="[Link]" >TP 2</a></p>
</body>
</html>
Q6)
lien du bas vers le haut :
<a name="top"></a>
..
<a href="#top">top</a>
Lien du haut vers le bas :
<!--source du lien -->
<p><a href="#down">cliquer ici pour descendre</a></p>
...
<!--nom du cible -->
<h2 id="down">Section plus bas</h2>
Q7) Ajouter à chaque balise a les propriétés suivantes , puis interpréter :
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.
Q8
Mises en forme demandées Code en CSS
Lien non visité : couleur rouge a :link{ color : red ; }

Lien visité : souligné et de couleur bleu a :visited{ text-decoratin : underline;


Color : blue; }

Lien survolé par le pointeur de la souris : rose a :hover{ color : pink ; }

Lien en cours d’activation : couleur jaune a : active { color : yellow ; }


8

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 contrôles name="nomFormulaire"
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).

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é.
9
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 <textarea type="text" name="lib"
long : 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.
Les cases à cocher Jour(s) de disponibilité :
: <input type="checkbox"
name="jour[]" value="1" />
elles permettent d’effectuer un à plusieurs Mercredi
choix parmi un nombre limité de propositions ; <input type="checkbox"
les choix effectués peuvent être stockés dans un name="jour[]" value="2" /> Samedi
tableau (attribut name ci-contre) ou chaque <input type="checkbox" name="jour[]"
case peut avoir sa propre valeur de l’attribut value="3" /> Dimanche
name
Statut :
<select name="statut">
La liste déroulante : <option value="1">Etudiant</option>
<option
elle permet d’effectuer un value="2">Professeur</option>
seul choix parmi un nombre élevé de </select>
propositions 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 (selon <option value="l">lundi</option>
l’attribut size) propositions. L’attribut <option value="m">mardi</option>
<option value="j">jeudi</option>
10
facultatif multiple permet le choix multiple <option value="v">vendredi</option>
(l’attribut name doit alors désigner un 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"
il réinitialise tous les contrôles du formulaire à value="Annuler" />
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 zones de saisie enrichies

Regroupement de champ du formulaire par thématique

Liste (déroulante ou non) avec groupements d’options affichage par un


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 groupes
<option value="7">dimanche</option> (semaine et week-end)
</optgroup> </select> ne sont pas cliquables
11
Script HTML Affichage
Liste de suggestions
<input type="text" list="serie">
<datalist id="serie"> Ce type de valeur est
<option value="juillet"> le plus souvent
<option value="août"> </datalist> Rq : si août est saisi il alimenté à partir
sera ensuite proposée de valeurs déjà
deux fois (une fois par enregistrées
la liste de suggestion, dans une base de
une fois par la mémoire données.
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.
Exercice1 :
12

Exercice2 :
13

Résumé :Les formulaires en HTML5

Les éléments d’un formulaire :


<input type="text" name=" " value=" " > Liste déroulante :
<input type="email" name=" " value=" ">
<input type="number" name=" " value=" "> Exemple:
<input type="tel" name=" " value=" ">
<input type="password" name=" " value=" "> <select name="profil">
<input type="date" name=" " value=" "> <option value="parti">Un
<input type="time" name=" " value=" "> particulier</option>
<input type="range" name=" " value=" "> <option value="profe" selected="selecte
d">Un professionnel</option>
<input type="button" name=" " value=" ">
<option value="insti">Un
<input type="submit" name=" " value=" ">
institutionnel</option>
<input type="reset" name=" " value=" ">
</select>
</p>
<input type="checkbox" name=" " value=" "> Liste déroulante avancée :

Exemple : Exemple:

<p> Quel est votre sport préféré ?</p> <input list="nom">


<input type=″checkbox″ name=″CB″
value=″foot″>Football <datalist id="nom">
<input type=″checkbox″ name=″CB″
value=″course″>Course <option value="…….">
<option value="………">
<input type=″checkbox″ name=″CB″ </datalist>
value=″box″>Box Américain
<input type="radio"> <textarea id=" " name=" “ rows=”5”
cols=”33”>
Exemple :
</textarea>
<p> Groupe d’éléments d’un formulaire:
<input type="radio" name="civi" value="M <fieldset>
me" /> Madame <legend>nom du groupe </legend>
<input type="radio" name="civi" value="Mll .....
e" /> Mademoiselle </fieldset>
<input type="radio" name="civi" value="Mr
" /> Monsieur
</p>

Tous les elements d’un formulaire doivent être dans la balise :


<form action=" " method="post">
Elements du formulaire
</form>
TP 4( HTML5 et CSS3)
-Les formulaires

1) Lancer l’éditeur visual code


2) Lancer un nouveau fichier
3) Enregistrer votre travail dans D:/votre dossier/html5 et css3/ [Link]
4) formulaire : Ecrire un code HTML permettant de réaliser la page web
[Link] pour remplir les données suivantes :
Créer la liste de sélection en utisant la balise « SELECT »

5) Recréer la liste déroulante en utilisant la balise « datalist »


Correction du TP 4( HTML5 et CSS3)
-Les formulaires

4) <form name="mon-formulaire1" action=" " method="get">


<p>
<input type="radio" name="civi" value="Mme" /> Madame
<input type="radio" name="civi" value="Mlle" /> Mademoiselle
<input type="radio" name="civi" value="Mr" /> Monsieur
</p>
<p>
Votre prénom :<br />
<input type="text" name="prenom" value="" />
</p
<p> >
Votre nom :<br />
<input type="text" name="nom" value="" />
</p>
<p>
Votre mot de passe :<br />
<input type="password" name="passe" value="" />
</p>
<p>
Vous êtes<br />
<select name="profil">
<option value="parti">Un particulier</option>
<option value="profe" selected="selected">Un professionnel</option>
<option value="insti">Un institutionnel</option>
</select>
</p>
<p>
Quel type de prestation recherchez vous ?<br />
<input type="checkbox" name="interet" value="loc" /> Location de
mobilier
<input type="checkbox" name="interet" value="achat" /> Achat de
mobilier
</p>
<p>
Votre message :<br />
<textarea name="le-me ssage" rows="6" cols="40">Vous pouvez saisir ici
un message.</textarea>
</p>
<p>
<input type="submit" value="Envoyer" />
<input type="reset" value="Annuler" />

</p>
</form>

5) <input list="profil" id="myprofil" name="p"/>


<datalist id="profil">
<option value="Un particulier">
<option value="Un professionnel">
<option value="Un institutionnel">
</datalist>
16
Les événements
Les évènements permettent d’effectuer une action (un algorithme) à des moments bien précis
1.1 Les événements de la page
Attribut Description
onload Se déclenche lorsque la page est complètement chargée.

Exemple d’appel :
<body onload="myFunction()">

1.2 Les événements des éléments du formulaire


Attribut Description
onsubmit Se déclenche lorsqu'un formulaire est soumis.

Exemple d’appel :
<form action="…" onsubmit=" return myFunction( )">
oninput Se déclenche dès que la valeur d'un élément a changé.

Exemples d’appels :
<input id="…" oninput="myFunction()">
<textarea id="…" oninput="myFunction()">

onblur Se déclenche au moment où l'élément perd le focus.

Exemple d’appel :
<input id="…" onblur="myFunction()">
onfocus Se déclenche au moment où l'élément obtient le focus.

Exemple d’appel :
<input id="…" onfocus="myFunction()">
1.3 Les événements de la souris
Attribut Description
onclick Se déclenche lors d’un clic sur l’élément.

Exemples d’appels :
<p onclick="myFunction()">
<input onclick=" myFunction()">
<div onclick=" myFunction()">
<h1 onclick="myFunction()">

onmouseover Se déclenche lorsque le pointeur de la souris survole l’élément.

Exemples d’appels :
<p onmouseover =" myFunction()">
<input onmouseover =" myFunction()">
<div onmouseover =" myFunction()">
<h1 onmouseover =" myFunction()">
17
TP 5( HTML5 et CSS3)
-Les balises sémantiques + Rappel (image, table, formulaire)

1) Lancer l’éditeur visual code


2) Lancer un nouveau fichier
3) Enregistrer votre travail dans D:/votre dossier/html5 et css3/Projet1/ [Link]
4) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous:

HEADER
SECTION
NAV aside
ARTICLE

ARTICLE

footer

5) choisir un sujet de votre site web et remplir les différentes parties de cette page web

6) Améliorer cette page, en ajoutant un code CSS pour bien organiser ces parties, et faire
des mises en forme.

7) créer une page qui contient des images, une page qui contient une table et une page qui
contient un formulaire

8) pour pouvoir naviguer dans votre site web, ajouter des liens hypertexte internes et
externes
18

Correction du TP 5( HTML5 et CSS3)


-Les balises sémantiques + Rappel (image, table, formulaire)

Q4) <body>
<header> <h1>bienvenue a mon site web</h1> </header>
<nav>
<p> <a href="[Link]" >pqge 1</a></p>
<p> <a href="[Link]" >pqge 2</a></p>
</nav>

<section>
<article>
......................
</article>
<article>
.....................
</article>
</section>
<aside> publicite </aside>
<footer> ......................... </footer>
</body>
19
Q6)
Autre méthode qQ6
header{
border: 1px dashed;
top: 0%;background-color: pink; width:
100%; height:20%; }

nav{
border:1px dashed;
float: left; width: 20%; position:
absolute; height: 65%;
top: 15%; }

section{
border: 1px dashed; margin-left: 21%;
width: 60%;
height: 65%;
position: absolute;
top: 15%; }

aside{
border: 1px dashed; margin-left: 82%;
width: 17%;
height: 65%;
position: absolute;
top: 15%; }

footer{
border: 1px dashed;
position: absolute;
bottom: 0%;
background-color: pink;
height: 20%; width: 100%;
}
<iframe>
Définition :

Un iframe HTML est utilisé pour afficher une page Web dans une page Web.

La balise HTML <iframe>spécifie un cadre en ligne.

Un cadre en ligne est utilisé pour incorporer un autre document dans le document
HTML actuel.

Syntaxe :

Conseil : Il est recommandé de toujours inclure un title attribut pour


le <iframe>. Ceci est utilisé par les lecteurs d'écran pour lire le contenu de l'iframe.
Exemple:
a)
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>
Résultat:

b) Ou vous pouvez ajouter le style attribut et utiliser


le CSS height et les width propriétés :
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe
Example"></iframe>
Q1: ajouter un couleur de fond
c) Avec CSS, vous pouvez également modifier la taille, le style et la couleur de
la bordure de l'iframe :
<iframe src="demo_iframe.htm" style="border:2px solid
red;" title="Iframe Example"></iframe>
Résultat:

d) Iframe - Cible pour un lien utilisation de target

Un iframe peut être utilisé comme cadre cible pour un lien.

L' attribut target du lien doit faire référence à l' attribut name de l'iframe :

 La balise HTML <iframe>spécifie un cadre en ligne


 L' attribut src définit l'URL de la page à intégrer
 Toujours inclure un attribut title (pour les lecteurs d'écran)
 Les attributs height et width spécifient la taille de l'iframe
 Utilisez border:none; pour supprimer la bordure autour de l'iframe

Exemple avec <a href=” target”> :


Ajouter un lien pour afficher le site d’inscription :[Link] dans un cafre (iframe)
Syntaxe :target <a target= ‘’_blank |_self|_parent|_top|nom_du_frame’’>
_blank La page cible s’ouvre dans un nouvel onglet ou dans une
nouvelle fenêtre
_self Valeur par défaut : la page cible s’ouvre dans le même
emplacement (cadre ou « frame ») que là où l’utilisateur a
cliqué
_parent La page cible s’ouvre dans la cadre (frame) de niveau
immédiatement supérieur par rapport à l’emplacement du
lien
_top La page cible s’ouvre dans la fenêtre hôte (par dessus le
frameset)
nom_du_frame Ouverture de la page cible dans le cadre portant le nom cité
(en valeur de l’attribut name)
CSS3 (mise en forme des textes)

couleurs Utilisation de la balise “div”


color: red; <div class="conteneur">
color: #00ff00; <h1>Un titre de niveau 1</h1>
color: rgb(34, 12, 64);
<p class="p1">Un premier paragraphe</p>
<p class="p2">Un autre paragraphe</p>
</div>
fontes ------CSS-----------
font-family: arial;
/*On ajoute une bordure autour de l'élément conteneur.
*Le div fait 70% de la largeur de son parent (le body)*/
font-size: 10px; .conteneur{
border: 1px solid black;
font-size: 2.6em;
font-style: normal; width: 70%;
font-style: italic; box-shadow: 5px 5px 0px red;
font-style: oblique; padding: 10px 50px 100px 200px; /* top right bottom
left*/
font-weight: margin: 20px 10px 10px 20px;
400;/*normal */ }
font-weight: normal;
font-weight: bold; /*Le texte est centré p/r à l'élément parent (le div
conteneur)*/
h1{
Souligner ou surligner un texte Ombre d’un texte
h1{ /*Ombre noire en bas à droite, nette*/
text-decoration: underline; h1{
} text-shadow: 5px 5px;
.p1{ }
text-decoration: underline overline
red; /*Ombre bleue en bas à gauche, nette*/
} .p1{
text-shadow: -5px 2px blue;
.p2{ }
text-decoration: overline dashed;
} /*Ombre rouge centrée sur le texte (décalement horizontal et
.p3{ vertical de
text-decoration: underline wavy; 0px), floue*/
} .p2{
a{ text-shadow: 0px 0px 5px
text-decoration: none; red;
} }

Transformation d’un texte


h1{ NB : Ces mises en forme peuvent être appliquées
text-transform: uppercase;}
.p1{ aux balises de types textes (exemple : p , h1 , a…)
text-transform: lowercase;
}
.p2{
text-transform: capitalize;}

14
Les couleurs en CSS

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)

24
CSS3 (mise en forme d’une table)

code résultat
bordures d’une table
table, th, td {
border: 1px solid black;
}

table {
width: 100%;
}

table {
border-collapse:
collapse;
}
table {
border: 1px solid black;
}

th, td {
border-bottom: 1px solid
#ddd;
}
Styles d’une table
table {
width: 100%;
}
th {
height: 70px; }
table {
width: 50%;
box-shadow :5px 5px 2px
grey;
Alignements d’une table
td {
text-align: center;
}
td {
height: 50px;
vertical-align: bottom;
}
th, td {
padding: 15px;
text-align: left; }

les styles de bordures : dotted (pointillé), dashed (tirets), solid (solide), double (double)

25
La propriété CSS table-layout permet de spécifier l'algorithme utilisé pour disposer les
cellules, colonnes et lignes d'un tableau.

La propriété de feuille de style table-layout CSS peut prendre la valeur de :

 fixed : la largeur du
tableau et des colonnes est
fixé par la largeur des
éléments table et col ou par
la largeur de la première
ligne de cellules.

 auto : la largeur du
tableau et de ces cellules
dépendent du contenu.

26
4 ème SI

CSS3 (mise en forme d’un lien hypertexte)


(Quelques exemples)

a:link {

color: yellow; }

/* visited link */

a:visited {

color: green;

/* mouse over link */

a:hover {

color: hotpink;

text-decoration: underline;

/* selected link */

a:active {

color: blue;

text-decoration: none;

-------A link styled as a button:--------

a:link, a:visited {

background-color: #f44336;

color: white;

padding: 14px 25px;


4 ème SI

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

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
« valeur »] particulier avec
une valeur
A[nom de l’attribut = Sélectionner tous les éléments A possédant un attribut
« valeur »] particulier avec
une valeur précise

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 :

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
4 ème SI

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;}
100% {width: 200px;}
}

On a 3 étapes :
 le départ (0%) avec une largeur de 0px
 la moitié (50%) avec une largeur de 300px
4 ème SI

 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;
}
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).
4 ème SI

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


4 ème SI

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

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;
}
4 ème SI

TP6 : TRANSFORMATION ET TRANSITION D’ÉLÉMENT AVEC CSS3


A l’aide du logiciel « visual code » rédiger le code de la page web nommée « [Link] » qui doit avoir
l’apparence ci-dessous :

- Créer un titre de premier niveau : « Transformation et Transition ».


- Créer 5 balises « div » à chaque balise associée un ID.
- Dans chaque balise écrire respectivement : « paragraphe 1 » « paragraphe 2 » « paragraphe 3 »
« paragraphe 4 » « paragraphe 4 »..
- Dans la balise div 2 : créer une liste de 4 puces : Accueil, à propos, liens, contact.
- Créer une page CSS nommée « [Link] » et lier ce fichier avec la page « [Link] »

Pour la transition on a les propriétés suivantes :


 La propriété transition-duration permet de spécifier la durée de la transition (la durée que mettra
l'animation pour aller de l'état 1 à l'état 2). Elle est exprimée en secondes.
 La propriété transition-property : permet de désigner quels sont les propriétés qui devront subir la
transition et quels sont celles qui ne s'animeront pas.
 La propriété transition-delay : permet de retarder le début de la transition lorsque l’événement qui la
déclenche est détecté.

L'exemple suivant montre un élément <div> rouge de 100px * 100px. L'élément <div> a également spécifié un
effet de transition pour la propriété width, d'une durée de 2 secondes :
#d1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
L'effet de transition commencera lorsque la propriété CSS spécifiée (largeur) changera de valeur.
Maintenant, spécifions une nouvelle valeur pour la propriété width lorsqu'un utilisateur survole l'élément <div>
:
Exemple :

#d1:hover {
width: 300px;
}
L'exemple suivant ajoute un effet de transition pour les propriétés width et height, avec une durée de 2
secondes pour la largeur et de 4 secondes pour la hauteur :
#d1 {
transition: width 2s, height 4s;
}
Dans ce cas, l'animation fera une demi seconde. Comme pour la propriété transition-property il faut prévoir
le préfixe vendeur à transition-duration :
#d1{ #d1:hover {
border:solid 1px blue; width: 300px;
background-color:orange; height: 200px;}
}
#d1:hover{
border:dotted 1px green;
background-color:yellow;
4 ème SI

transition-property:background;
transition-duration:0.5s;
}
Dans l’exemple suivant, on opère une transition CSS sur la taille de police du titre de quatre secondes après
deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :
h1{
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
h1:hover{
font-size: 36px; }
On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa
souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu. On construit l'apparence
du menu :
a{
color: #fff;
background-color: #333;
transition: all 1s;
}
a:hover,a:focus {
color: #333;
background-color: #fff;
border-radius: 10px; }
Appliquer une transition sur plusieurs propriétés CSS :
Cette boîte utilisera des transitions pour width, height, background-color, avec une rotation de 180 degré :

#d3{
border-style: solid;
border-width: 1px;
display: block;
width: 150px;
height: 150px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
#d3:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg); }
Un autre exemple :
#d4{
background-color: red;
width:150px;
height: 150px;
transition-property: opacity, left, top, height;;
transition-duration: 3s, 5s, 3s, 5s;
}
4 ème SI

#d4:hover{
background-color: red;
height: 200px;
opacity: 0.5;
}
La propriété transform va nous permettre de définir un ou plusieurs effets de transformation à appliquer à un
élément : inclinaison, rotation, déformation, etc.

Nous appliquons un premier effet de transformation qui va être une translation, c’est-à-dire un déplacement
selon une direction. Ici, on va donc déplacer l’élément de 100px à partir de leur point d’origine vers la droite.
#d2{
background-color: pink;
width:150px;
height: 150px;
transform-origin: 0 0;
transform:translate(100px);
text-transform: uppercase;
}
Le point d’origine de la transformation est le centre . Comme la transformation n’est ici qu’un déplacement
horizontal, modifier le point d’origine ne change pas le résultat de la transformation.
#d5{
background-color: green;
width:150px;
height: 150px;
transform-origin: 50% 50%;
transform:rotate(45deg);
}
#d5:hover{
border:dotted 1px green;
background-color:orange;
transition-property:background;
transition-duration:0.5s; }
Exemple de transformation 2D :
La fonction scale() permet de modifier la taille ou plus exactement l’échelle de l’élément. Nous allons pouvoir lui
passer deux nombres qui vont correspondre au pourcentage d’agrandissement en largeur et en hauteur de
l’élément.
Par exemple, en écrivant transform : scale(2, 0.5), l’élément va doubler en largeur et être diminué de moitié en
hauteur.
Déformer un élément avec skewX() et skewY()
A la place, il faudra plutôt utiliser les fonctions skewX() et skewY() qui vont nous permettre de déformer un
élément selon son axe horizontal ou vertical.
#d1{
transform: skewX(30deg); }
#d2{
transform: skewY(30deg); }
#d3{
transform: skewX(30deg) skewY(30deg);}

Vous aimerez peut-être aussi