Professional Documents
Culture Documents
Cours TGC 1
Cours TGC 1
Abderrahmane Ed-daoudy
a.eddaoudy@gmail.com
Partie
1
HTML5
Définition
3
Outils de développement web
Test.htm Le résultat
l
5
Balises
• Le doctype
Elle est indispensable car c'est elle qui indique qu'il s'agit
bien d'une page web HTML.
• <html> </html>
C'est la balise principale du code. Elle englobe tout le
contenu de votre page.
• <head> </head> L'en-tête
Cette section donne quelques informations générales sur la
page, comme son titre, l'encodage (pour la gestion des
caractères spéciaux), etc.
• <body> </body> le corps
C'est là que se trouve la partie principale de la page. Tout ce
que nous écrirons ici sera affiché à l'écran.
10
Structure de base d'une page HTML
• Les paragraphes
Un paragraphe est délimité par la balise <p> et </p>
<p>
Bonjour et bienvenue sur mon site
</p>
On écrit le contenu de notre page web entre les balises <body> et
</body>
<!DOCTYPE html>
<html>
<head>
<title> titre </title>
<meta content="text/html; charset=UTF-8" />
</head>
<body>
<p>
Bonjour et bienvenue sur mon site
</p>
</body>
12
</html>
Organiser le texte
Ce texte est en
Gras
• Souligner le texte
La balise <u> souligne le texte.
<u> Ce texte est
souligné</u>
Ce texte est
14
souligné
Organiser le texte
• Texte barré
La balise <s> ou <strike> barre le texte.
Un texte coloré
Un autre texte coloré
16
Organiser le texte
X2
Pour faire un retour à la ligne déclarer la balise <br/> .
H 2O
• Retour à la1 ligne
La ligne <br/> La ligne 1
La ligne 2 La ligne 2
17
Organiser le texte
• Formatage de texte
La balise <pre> permet de conserver le texte tel que vous le
saisissez.
<pre>
La balise < pre > permet de conserver
le texte tel que vous le saisissez.
/*.*\
Ici un retour à la ligne sans utiliser la
balise br
</pre>
La balise < pre > permet de conserver
le texte tel que vous le saisissez.
/*.*\
Ici un retour à la ligne sans utilisé la
18
Organiser le texte
• Les titres
Pour ne pas confondre entre les titres et les paragraphes en
utilise les balise de titre qui sont de six (h1,h2,h3,h4,h5,h6)
selon la taille. <h1> titre très important </h1>
<h2> titre important </h2>
<h3> titre un peu important </h3>
<h4> titre moins important </h4>
<h5> titre pas important </h5>
<h6> titre vraiment pas important </h6>
20
Organiser le texte
21
Organiser le texte
Exemple
Bonjour pour accéder au site de la ESTE <br/>
<a href="http://www.est-usmba.ac.ma/" > cliquez ici (ESTF) </a>
Ce qui donne
Ce qui donne
29
Les images
Ce qui donne :
30
Les tableaux
td cellule4 cellule5
cellule6
(ligne)
31
Les tableaux
table cellspacing
cellpadding
Contenu
33
Les tableaux
• La balise table :
• bgcolor : Cet attribut définit la couleur d'arrière-plan de toutes
les cellules, soit en hexadécimaux (code de 6 chiffres précédé
d'un '#‘) comme #000000 pour le noir, soit en spécifiant la
couleur en anglais comme black, green….
• align : aligner (horizontalement) le contenu de la colonne :
• align=right (droit)
• align=center (centre)
• align=left (gauche)
34
Les tableaux
• La balise <tr> :
La balise <tr> peut accueillir ces attributs :
• height : la hauteur de la ligne
• bgcolor : la couleur de fond des cellules de cette ligne
• align : aligner le contenu des cellules de la ligne :
-align=left (par défaut) toutes les cellules de la ligne
sont cadrées à gauche
- align=center toutes les cellules de la ligne sont centrées
- align=right toutes les cellules de la ligne sont cadrées à droite
• La balise <td>
La balise <td> peut accueillir ces attributs :
• width : la largeur de la colonne en pixel ou en pourcentage par
rapport à la largeur du tableau.
• height : la hauteur en pixel de la colonne. 35
Les tableaux
• La balise <td>
• bgcolor : la couleur de fond de la colonne.
• align : aligner (horizontalement) le contenu de la colonne :
• align=right (droit)
• align=center (centre)
• align=justify (justifier)
• valign : aligner (verticalement) le contenu de la colonne :
• valign=middle (milieu)
• valign=top (haut)
• valign=bottom (bas)
• Titre du tableau la balise : la balise <caption> permet d’attribuer
un titre au tableau, cette balise se place tout au début du
tableau. Elle peut accueillir l’attribut align avec deux option : top
et bottom. <table>
<caption align=« bottom"> titre du tableau </captio3n6
</table> >
Les tableaux
• Tableau (les bordures avec les attributs de la balise table )
<!DOCTYPE html>
<html>
<head>
<title>titre de la page</title>
<meta content="text/html; charset=UTF-8" />
</head>
<body>
<table align="center" bgcolor="#FF00FF" border="1" width="40%" height="200" cellspacing="0« cellpadding="5">
<caption>Nom et l'age </caption>
<tr>
<td bgcolor="orange" align="center">Nom</td>
<td bgcolor="orange" align="center">Age</td>
</tr>
<tr>
<td width="40%" align="center">ed</td>
<td width="40%" align="center">26 ans</td>
</tr>
<tr>
<td width="40%" align="center">abderrahmane</td>
<td width="40%" align="center">24 ans</td>
</tr>
</table>
</body>
</html>
38
Les tableaux
• Tableau (les bordures avec CSS )
<!DOCTYPE html>
<html>
<head>
<title>titre de la page</title>
<meta content="text/html; charset=UTF-8" />
</head>
<body>
<table >
<caption>Nom et l'age </caption>
<tr>
<td >Nom</td>
<td >Age</td>
</tr>
<tr>
<td>ed</td>
<td >26 ans</td>
</tr>
<tr>
<td >abderrahmane</td>
<td >24 ans</td>
</tr>
</table>
<style>
table,td {
border :
1pt solid CSS
black;
}
</style>
</body> 39
</html>
Les tableaux
•La fusion de colonnes : l’attribut colspan de la balise td va
faire la fusion des cellules horizontalement.
<table border="1" >
<tr >
<td>Cellule 1
</td> Cellule 1 Cellule 2
<td>Cellule
2</td>
</tr> Cellule 3 Cellule 4
<tr>
<td>Cellule
3</td> Cellule 6 Cellule 6
<td >cellule
4</td>
</tr>
<tr> Cellule 2 est
<td >Cellule supprimée
<table border="1" > 5</td>
<tr > <td >Cellule
6</td>
<td colspan="2">Cellule 1 et Cellule 2</td>
</tr> </tr> Cellule 1 et Cellule 2
<tr> </
tab
<td>Cellule 3</td>
le> >cellule 4</td>
<td Cellule 3 Cellule 4
</tr>
<tr>
<td >Cellule 5</td> Nombre de Cellule 5 Cellule 6
<td >Cellule 6</td> cellules 2 à
</tr>
</table>
fusionnées 40
Les tableaux
•La fusion de colonnes : l’attribut rowspan de la balise td va
faire la fusion des cellules horizontalement.
<table border="1" >
<tr >
<td>Cellule 1
</td> Cellule 1 Cellule 2
<td>Cellule
2</td>
</tr> Cellule 3 Cellule 4
<tr>
<td>Cellule
3</td> Cellule 5 Cellule 6
<td >cellule
4</td>
</tr>
<tr>
<td >Cellule
<table border="1" > 5</td>
<tr > <td >Cellule
6</td>1 et Cellule 2</td>
<td >Cellule
</tr> </tr> Cellule 1 Cellule 2
<tr> </
tab
<td>Cellule 3</td>
le> rowspan="2">cellule 4 et Cellule 6</td>
<td Cellule 3
</tr> Cellule 4 et
<tr> Cellule 6
<td >Cellule 5</td> Cellule 6 est Cellule 5
</tr>
</table> supprimée
41
Un tableau structuré
42
Un tableau structuré
Voir l’exemple
suivant
51
Les formulaires
55
Les formulaires
Voir l’exemple
suivant
56
Les formulaires
<form method="post" action="traitement.php"
<fieldset>
<legend>Vos coordonnées</legend> <!-- Titre du fieldset -->
<label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom" />
<label for="prenom">Quel est votre prénom ?</label>
<input type="text" name="prenom" id="prenom" />
<label for="email">Quel est votre e-mail ?</label>
<input type="email" name="email" id="email" />
</fieldset>
<fieldset>
<legend>Votre souhait</legend> <!-- Titre du fieldset -->
<p>
Faites un souhait que vous voudriez voir exaucé :
<input type="radio" name="souhait" value="riche« id="riche" /> <label for="riche">Etre riche</label>
<input type="radio" name="souhait" value="celebre« id="celebre" /> <label for="celebre">Etre
célèbre</label>
<input type="radio" name="souhait" value="intelligent« id="intelligent" /> <label
for="intelligent">Etre
<strong>encore</strong> plus intelligent</label>
<input type="radio" name="souhait" value="autre« id="autre" /> <label
for="autre">Autre...</label>
</p>
<p>
<label for="precisions">Si "Autre", veuillez préciser :</label> <br/>
<textarea name="precisions" id="precisions" cols="40« rows="4"></textarea>
</form> </p> 57
Les formulaires
58
Les framesets
61
Les framesets
frame1.html frame3.html
frame4.html
<html > <html > <html >
<body> <body> <body>
<h1> <h1> <h1>
le contenu frame 1 </h1> le contenu frame 2 </h1> le contenu frame 4 </h1>
</body> </body> </body>
</html> </html> </html>
frame2.html
<html >
<body>
<h1> le contenu de frame 2 </h1>
<a href="frame1.html" target="frame3"> contenu de frame 1</a> <br/>
<a href="frame2.html" target="frame3"> contenu de frame 2</a> <br/>
<a href="frame3.html" target="frame3"> contenu de frame 3</a> <br/>
<a href="frame4.html" target="frame3"> contenu de frame 4</a>
</body>
63
</html>
Les framesets
67
Utilisation
test.html
<html>
<head> style.css
<title>titre de la page</title>
<meta content="text/html; charset=UTF- h1{
<link8" />rel="stylesheet" type="text/css" href="style.css"> color: green;
</head> }
<body> body{
<h1> voici un titre</h1> background-color: yellow;
</body> }
68
</html>
Utilisation
<style>
h1 {
colo
r:
gree
n;
}
body
{
</head>
back
<body>
grou
<h1>
nd- voici un titre </h1>
</body>
color
</html>
: 69
Utilisation
70
Utilisation
Le même code CSS est indiqué une fois pour toutes dans un
fichier CSS : c'est plus simple !
Site
style.css
Exemple(html+css)
test.html style.css
<html> h1 {
<head> color : blue ;
<title>titre de la page</title> }
<meta content="text/html; charset=UTF-8" /> b{
<link type="text/css" href="style.css"> color : blue ;
rel="stylesheet" }
</head>
<h1> voici un titre en bleu </h1>
<body>
<h2> ce mot <b> bonjour</b> sera en bleu </h2>
</body>
</html>
73
Syntaxe de base
74
Syntaxe de base
style.css
*{ Signifie toutes les balises sans
/*les propriété et valeurs exception
}
style.css
p em { signifie toutes les balises <em> situées
/*les propriété et valeurs à l'intérieur d'une balise <p>
}
style.css
h1 + p{ signifie toutes les premières balises <p>
/*les propriété et valeurs située après un titre <h1>.
80
}
La sélection
style.css
a [title] { Signifie tous les liens <a> qui
/*les propriété et valeurs*/ possèdent un attribut title
}
style.css
a [title= "valeur"] { Signifie tous les liens <a> qui
/*les propriété et valeurs possèdent un attribut title et avoir
} exactement pour valeur valeur
style.css
a [title*= "valeur"] { Signifie tous les liens <a> qui
/*les propriété et valeurs possèdent un attribut title et avoir la
} contient la valeur valeur
style.css
div > img { Signifie tous les éléments enfant
/*les propriété et valeurs <img> appartenant directement au
} parent <div> 81
Formatage du texte
Test.html
<p > voici un paragraphe de 16 pixels, Les lettres auront une taille de 16 pixels </p>
Style.css
p{
font-size : 16px ;
}
Ce qui donne :
voici un paragraphe de 16 pixels, Les lettres auront une taille de 16 pixels 82
Formatage du texte
balise { balise {
font-family : police ; ou font-family : police1, police2, police3, plice4 ;
} }
Test.html Style.css
<h1 > voici un titre en gras</h1> h1{
<h2 > voici un titre normal </h2> font-weight: bold;
}
h2{
Ce qui donne : font-weight: normal;
}
voici un titre en gras
voici un titre normal
87
Formatage du texte
88
Formatage du texte
89
Formatage du texte
.souligne{
text-decoration: underline; Ce qui donne :
}
.barre{ voici un titre souligné
text-decoration: line-through;
}
voici un titre barré
.ligne-dessus{
text-decoration: overline;
} voici un titre avec une ligne au-des90sus
Formatage du texte
Remarque
l'alignement du texte ne s’applique pas sur une balise inline
( <span>, <a>, <em>, <strong>...). Il s’applique seulement sur des
balises de type block (<p>, <div>, <h1>, <h2>, ...), car on ne peut
pas par exemple modifier l'alignement de quelques mots au
milieu d'un paragraphe ! 92
Formatage du texte
94
La couleur et le fond
Dans cette partie, nous verrons comment modifier :
• la couleur du texte,
• couleur ou une image de fond,
• ajouter des ombres, ajuster les transparence.
balise {
color : couleur ;
}
95
La couleur et le fond
Pour choisir une couleur en utilisant la méthode RGB, aller
dans le logiciel Paint puis dans Modifier les couleurs et faites
bouger les curseurs pour sélectionner la couleur qui vous
intéresse. Ici la couleur est : rgb(61, 45, 208). En ce qui
concerne la méthode hexadécimale vous pouvez installer le
logiciel boîte à couleurs.
96
La couleur et le fond
Test.html Style.css
<h3 class="titre"> Cours HTML </h3> .introduction
<h3 class="introduction" > Introduction</h3> { color :
<p class="paragrapheIntro"> maroon;
Html est l’abréviation de HyperText Markup }
Language, soit en français « langage hypertexte .paragrapheIntro {
de balisage ». Ce langage a été créé en 1991 et a color : blue;
pour fonction de structurer et de donner du text-align: justify;
sens à du contenu. Ils nous permet de créer des }
sites web. .conclusion {
</p> color : #0000FF;
<h3 class="conclusion" > Conclusion </h3> }
<p class="paragrapheConclu"> .paragrapheConcl
Html est l’abréviation de HyperText Markup u{
Language, soit en français « langage hypertexte color : maroon;
de balisage ». Ce langage a été créé en 1991 et a text-align: justify;
pour fonction de structurer et de donner du }.titre{
sens à du contenu. Ils nous permet de créer des color : rgb(238,186,3);
sites web. text-align :center;
</p> }
97
Ce qui donne : (page suivante)
La couleur et le fond
• Couleur du texte
98
La couleur et le fond
• Couleur de fond: la propriété background-color
permet d’indiquer une couleur de fond à un élément de
la mêmeque la propriété color.
manière balise {
background-color : couleur ;
}
Test.html Style.css
<h3 > body {
Un titre blanc au sein du noir /* On travaille sur la balise body, donc sur TOUTE
</h3> la page */
<h3 > background-color : black;
L’arrière plan est en noir !!! color : white; /* le texte de la page en blanc*/
</h3> }
99
La couleur et le fond
• Couleur de fond: la valeur linear-gradient de propriété
background permet d’indiquer un fond à un élément en
dégradé de couleur. Elle admet 3 paramètres :
• direction du dégradé: to bottom (Par défaut) (vers le bas), to
left (vers la gauche), to left bottom (incliné vers la gauche et
vers le bas) etc...
• couleur de début: la couleur du début (spécifiée grâce à
l'une des 4 méthodes).
• couleur de fin: la deuxième couleur du dégradé.
body {
background:linear-gradient(red , yellow , blue ,orange );
/* on peut spécifier les % de chaque zone */
/*background:linear-gradient(red 0% , yellow 20% , blue 30% ,orange 20% );*/
}
100
La couleur et le fond
102
Ce qui donne : (page suivante)
La couleur et le fond
• Image de fond
103
La couleur et le fond
•Options disponibles pour le fond: la propriété CSS
background-attachment permet de "fixer" le fond, elle peut
prendre 2 valeurs :
• fixed : l'image de fond reste fixe.
• scroll : l'image de fond défile avec le texte (par défaut).
body { body {
background-image : url("rose.jpg"); background-image : url("rose.jpg");
background-attachment : fixed; background-attachment : scroll;
} }
104
La couleur et le fond
•Options disponibles pour le fond: la propriété CSS
background-repeat permet d’indiquer la répétition du fond,
elle peut prendre 4 valeurs :
• no-repeat : le fond ne sera pas répété. L'image sera donc
unique sur la page.
• repeat-x : le fond sera répété uniquement sur la première
ligne, horizontalement.
• repeat-y : le fond sera répété uniquement sur la première
colonne, verticalement.
• repeat : le fond sera répété en mosaïque (par défaut).
balise {
background-image : url("image.extension";
background-repeat : no-repeat ;
}
105
La couleur et le fond
body { body {
background-image : url("html.png"); background-image : url("html.png");
background-repeat: no-repeat; background-repeat: repeat;
} }
body { body {
background-image : url("html.png"); background-image : url("html.png");
background-repeat: repeat-x; background-repeat: repeat-y;
} }
106
La couleur et le fond
•Options disponibles pour le fond: la propriété CSS background-
position permet d’indiquer la position de l’image du fond, cette
propriété est intéressante si un fond ne se répète pas, on indique
deux valeurs en pixels ou en anglais (top, bottom, left, center,
right(aussi la combinaison)) pour indiquer la position du fond par
rapport au coin supérieur gauche de la page (ou paragraphe).
balise { 0
background-image : url("image.extension") ;
background-repeat : no-repeat ; 30px
background-position: 30px 50px; fond
}
balise { top
background-image : url("image.extension") ; fond(top,right)
left r
background-repeat : no-repeat ; center ight
background-position: top right;
} bottom
107
La couleur et le fond
body { body {
background-image : url("soleil.jpg"); background-image : url("soleil.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top right; background-position: 100px 50px;
} }
p{ body{
background-image : url("soleil.png"); background-image : url("soleil.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: left;
} }
108
La couleur et le fond
•Plusieurs images de fond: on peut indiquer plusieurs images de
fond à un élément, il suffit de séparer les déclarations par une
virgule « , » et on combine les valeurs. La première image de cette
liste sera placée par-dessus les autres.
body{
background : url("soleil.jpg") fixed no-repeat 400px 30px, url("colored-design.jpg")
no-repeat ;
}
109
La couleur et le fond
•La transparence : la propriété CSS opacity permet d’indiquer
permet de jouer très facilement avec les niveaux (entre 0 et 1) de
transparence des éléments. Avec une valeur de 1, l'élément sera
totalement opaque : c'est le comportement par défaut. Avec une
valeur de 0, l'élément sera totalement transparent.
p{ p{
background-color : black ; background-color : black ;
color : white; color : white;
opacity : 0.3; opacity : 0.9;
} }
110
Les bordures , les ombres et les marges
•Options disponibles pour les bordeurs : la propriété CSS border
permet d’indiquer la bordures pour décorer à un élément, elle peut
prendre 3 valeurs :
•La largeur : une valeur en pixels (comme 2px).
•La couleur : un nom de couleur ("black", "red"...), soit (#FF0000),
soit une valeur rgb (rgb(198, 212, 37)). balise {
•Le type de bordure : peut être : border : largeur couleur type ;
• none : pas de bordure (par défaut) }
• solid : un trait simple.
• dotted : pointillés.
• dashed : tirets.
• double : bordure double.
• groove : en relief.
• ridge : autre effet relief.
• inset : effet 3D enfoncé.
• outset : effet 3D surélevé 111
Les bordures , les ombres et les marges
body{ h3{
border : 2px blue solid; border: 2px orange dashed ;
} }
p{ table,td{
border: 4px yellow double; border: 2px yellow groove;
} }
112
Les bordures , les ombres et les marges
•Options disponibles pour les bordures : en utilisant la propriété CSS
border à un élément, ce dernier aura la même bordure aux 4 côtés.
si vous voulez mettre des bordures différentes, utiliser ces 4
propriétés :
• border-top : bordure en haut. p{
• border-bottom : bordure en bas. border-top : 5px solid black;
border-bottom : 5px solid
• border-left : bordure à gauche. maroon; border-left : 4px solid red;
• border-right : bordure à droite. border-right : 4px solid green;
}
113
Les bordures , les ombres et les marges
•Options disponibles pour les bordures : la propriété CSS border-
radius permet d'arrondir les angles de n'importe quel élément en
indiquant la taille en pixels pour tous les coins (Xpx) ou bien pour
chaque coin (Xpx Xpx Xpx Xpx).
p{
p{ border: 3px blue solid;
border: 3px orange solid; border-radius : 8px 20px 8px 20px ;
border-radius : 15px ; background-color: orange;
text-align: justify; text-align: justify;
} }
114
Les bordures , les ombres et les marges
•Options disponibles pour les ombres : la propriété CSS box-shadow
permet d'ajouter un ombre à élément en indiquant en pixels trois
valeurs et une couleure de cet ordre 1px 2px 3px 4.
• 1. Le décalage horizontal de l'ombre.
• 2. Le décalage vertical de l'ombre.
• 3. L'adoucissement du dégradé.
• 4. La couleur de p{
p{ l'ombre. order: 3px black dashed;
border : 3px blue solid; box-shadow: 10px 6px 0px blue;
box-shadow : 6px 6px 1px maroon; border-radius: 10px;
border-radius : 10px; background-color: orange;
} }
115
Les bordures , les ombres et les marges
•Options disponibles pour les ombres : la propriété CSS text-shadow
permet d'ajouter un ombre sur les lettres de votre texte. Les valeurs
fonctionnent exactement de la même façon que box-shadow.
p{ h2{
text-shadow: 1px 2px 5px black; text-shadow: 1px 2px 5px black;
text-align: justify; text-align: justify;
border: 3px blue dashed; background: orange;
} }
116
Création d'apparences dynamiques
le CSS nous permet aussi de modifier l'apparence des éléments de
façon dynamique lors du survol, clic …
•Au survol : pseudo-formats CSS : hover permet de modifier
l’apparence quand la souris est sur un élément.
a{ /* Liens non survolés*/
<h2> Quelques sites utiles </h2> text-decoration: none;
color: red;
Visiter le site de <a href="http://fr
}
.openclassrooms.com/">Open Classrooms a:hover{/* Liens survolés*/
</a> <br> text-decoration: underline;
Visiter le site de <a color: blue;
href="http://www.developpez.com/ }
">Developpez.com p{/* paragraphe non
survolés*/
</a> <br> text-decoration: none;
Visiter le site de <a color: red;
href="https://www.codecademy.com/ text-align: justify;
">Codecademy }
</a> p:hover{/* paragraphe
survolés*/
<h2> Cours HTML</h2> color: blue;
<p> HTML est l’abréviation de HyperText Markup background: orange;
Language, soit en français « langage hypertexte de } 117
Création d'apparences dynamiques
• Au survol
Au survol
Au survol
Au survol
118
Création d'apparences dynamiques
• Au clic : pseudo-formats CSS : active permet d'appliquer un style
particulier au moment du clic.
<h2> Quelques sites utiles </h2> a{ /* Liens sans clic*/
text-decoration: none;
Visiter le site de <a href="http://fr color: red;
.openclassrooms.com/">Open Classrooms }
</a> <br> a:active{/* Liens lors clic*/
Visiter le site de <a text-decoration: underline;
href="http://www.developpez.com/ color: blue;
}
">Developpez.com
p{/* paragraphe sans clic*/
</a> <br> text-decoration: none;
Visiter le site de <a href="https://www.c color: black;
odecademy.com/">Codecademy text-align: justify;
</a> }
p:active{/* paragraphe
<h2> Cours HTML</h2>
sélectionné */
<p> HTML est l’abréviation de HyperText Markup color: blue;
Language, soit en français « langage hypertexte de background: gray;
balisage ». Ce langage a été créé en 1991. }
</p>
119
Création d'apparences dynamiques
• Au clic
Au clic
Au clic
120
Création d'apparences dynamiques
• Lors de la sélection: pseudo-formats CSS : focus
permet d'appliquer un style particulier au moment de la
sélection.
<h3> Nom </h3> .prenom:focus
<input class="nom" value="Vert si focus"> { background:
<h3> Prénom </h3> orange; color: blue;
<input class="prenom" value="Rouge si focus"> }
.nom:focus
{ background:
yellow; color: lime;
}
121
Création d'apparences dynamiques
• Lorsque le lien a déjà été visité: pseudo-formats CSS : visited
permet d'appliquer un style particulier à un lien vers une page qui
a déjà été vue.
<h2> Quelques sites utiles </h2> a{ /* Liens pas visité*/
Visiter le site de <a href=" text-decoration: none;
http://fr.openclassrooms.com/">Open Classrooms color: red;
</a> <br> }
Visiter le site de <a href="http://www.developpez.co a:visited{/* Liens visité*/
m/">Developpez.com text-decoration: underline;
</a> <br> color: blue;
Visiter le site de <a href="https://www.codecademy.com/ }
">Codecademy </a>
Déjà visité
122
Partie3
Mise en page du site
Structurer sa page
Nous avons appris à construire des pages basiques en HTML, à
modifier la mise en forme avec CSS... Intéressons-nous maintenant à
la mise en page de notre site. En général, une page web est
constituée d'un en-tête (tout en haut), de menus de navigation (en
haut ou sur les côtés), de différentes sections au centre... et d'un
pied de page (tout en bas).
124
Structurer sa page
125
Structurer sa page
•L'en-tête<header> : l’en-tête de page se trouve en général tout en
haut du document. on y trouve le plus souvent un logo, une
bannière, le slogan de votre site., etc. Vous devrez placer ces
informations à l'intérieur de la balise <header>.
<footer> <!-- Placez ici le contenu du pied de votre page --> </footer>
126
Structurer sa page
•Principaux liens de navigation <nav> : La balise <nav> doit
regrouper tous les principaux liens de navigation du site. Vous y
placerez par exemple le menu principal de votre site. Généralement,
le menu est réalisé sous forme de liste à puces à l'intérieur de la
balise <nav> : <nav>
<ul>
<l
i>
<
a
hr
ef
• Une de = page <section> : La balise <section> sert à
regrouper "i
section des contenus en fonction de leur thématique. Elle
n
englobe généralement
d une portion du contenu au centre de la page.
e
<section>
x.
<h1>Ma section de page</h1>
htUn paragraphe</p>
<p>
127
m
</section>
Structurer sa page
• Informations complémentaires : La balise <aside> est
conçue
<aside> pour contenir des informations au
complémentaires
document que l'on visualise. Ces informations sont
généralement placées sur le côté (bien que ça ne soit pas une
obligation).
<aside> <!-- Placez ici des informations complémentaires --> </aside>
<article>
<h1>Mon article</h1>
<p>Un paragraphe</p>
</article> 128
Structurer sa page
Exemple concret d'utilisation des balises
Du texte
simple
puisqu'il n'y a
pas de CSS
!!??
129
Le modèle de boîte
Une page web peut être vue comme une succession et un empilement de boîtes,
qu'on appelle "blocs". La plupart des éléments vus précédemment sont des blocs
: <header>, <article>, <nav>, <p>, les titres <h1> , etc. Dans cette partie, nous
allons apprendre à manipuler ces blocs comme de véritables boîtes. Nous allons
leur donner des dimensions, les agencer en jouant sur leurs marges, mais aussi
apprendre à gérer leur contenu... pour éviter que le texte ne dépasse de ces
blocs !.
Les balises inline : c'est le cas par exemple des liens <a></a>.
Les balises block : c'est le cas par exemple des paragraphes <p></p>.
h3 {
width: 50%;
background: orange;
text-align: justify;
}
p{
width: 50%;
background: orange;
text-align: center;
} 131
Le modèle de boîte
• Les marges: tous les blocs possèdent des marges. Il existe 2 types de marges:
• Les marges intérieurs et les marges extérieurs .
• padding : indique la taille de la marges intérieures. A exprimer en
général
en pixels (px).
• margin : indique la taille de la marge extérieure. Là encore, on utilise le plus
souvent des pixels.
Les propriétés margin et padding s'applique aux 4 côtés du bloc. Si vous
voulez indiquer une marge en haut, en bas, à gauche et à droite utiliser
ces propriétés :
margin:auto pour centrer le bloc
Pour la marge extérieure :
margin-top : marge extérieure en haut.
margin-bottom : marge extérieure en bas.
margin-left : marge extérieure à gauche.
margin-right : marge extérieure à droite
Pour la marge intérieurs :
padding-top : marge intérieure en haut.
padding-bottom : marge intérieure en bas.
132
padding-right
padding-left : :marge
margeintérieure
intérieureààgauche.
droite.
Le modèle de boîte
p{
• Les marges: (Exemples) width: 60%;
p{ border: 1px solid blue;
width: 60%; text-align: justify;
border: 1px solid blue; padding: 8px;
text-align: justify; margin:8px;
} }
2 une
marge
s’ajout
Le texte à coté e
de la bordure
133
Le modèle de boîte
• couper un bloc : Si vous voulez que le texte ne dépasse pas des limites du
paragraphe, il va falloir utiliser la propriété overflow. Voici les valeurs qu'elle
peut accepter :
• visible (par défaut) : si le texte dépasse les limites de taille, il reste visible
et sort volontairement du bloc.
• hidden : si le texte dépasse les limites, il sera tout simplement coupé.
On ne pourra pas voir tout le texte.
• scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette
fois, le navigateur mettra en place des barres de défilement pour qu'on
puisse voir tout le texte. C'est un peu comme un cadre à l'intérieur de la
page.
• auto : c'est le mode "pilote automatique". En gros, c'est le navigateur
qui décide ou pas de mettre des barres de
• défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je
conseille d'utiliser le plus souvent.
134
Le modèle de boîte
• couper un bloc (exemple):
p{ p{ p{ p{
width: 250px; width: 250px; width: 250px; width: 250px;
height: 110px; height: 110px; height: 110px; height: 110px;
text-align: justify; text-align: justify; text-align: justify; text-align: justify;
border: 1px solid border: 1px solid black; border: 1px solid black; border: 1px solid black;
black; overflow: hidden; overflow: auto; overflow: scroll;
overflow: visible; } } }
}
135
Le positionnement en CSS
• Après avoir structurer la page en plusieurs éléments, il est temps
de bien positionner chaque élément. (rappel)
rappel
Du texte
simple
puisqu'il n'y a
pas de CSS
!!??
136
Le positionnement en CSS
<!DOCTYPE html> nav
<html> {
<head>
float: left;
<meta content="text/html; charset=utf-8" />
<title> Notre site </title> width:
<link rel="stylesheet" type="text/css" href="style.css"> 150px;
</head> border: 1px
<body> solid black;
<header>
}
<h1> un titre </h1>
<h2> un autre titre </h2> section
</header> {
margin-left: 170px;
<nav> border: 1px solid blue;
<ul>
}
<l
i>
<
a
hr
ef
="
#"
>
A
cc
u
ei
l
</
a
>
</
li
<footer> 170px
> Copyright Zozor - Tous droits réservés <br/>
<p>
<a<lhref="nomPrenom@gmail.com"> Me contacter ! </a> </p>
i>
</footer>
<
a
</body>
</html> hr 137
ef
Le positionnement en CSS
• Transformez vos éléments: la propriété display est capable de transformer
n'importe quel élément de votre page d'un type (bloc et inline) vers un autre.
Elle accepte 4 valeurs possibles :
Il faut donc utiliser la propriété position et au moins une des 4 propriétés ci-
dessus (top, left, right ou bottom).
141
fin
Références :
Apprenez à créer votre site web avec HTML5 et CSS3, Mathieu Nebra, 2011
142