UE02 : Langage pour le Web (X)HTML CSS Qu`est ce que c`est

Transcription

Qu'est ce que c'est ?
UE02 : Langage pour le Web
(X)HTML CSS
Æ Langage de description qui permet de créer des
documents interactifs
Sandrine Lanquetin
■  liens hypertextes (lecture non linéaire)
Aile sciences de l'ingénieur
Bureau G208
[email protected]
■  « indépendant » du système d'exploitation et de
l’ordinateur (fichier texte + marqueurs)
marqueur = balise = tag
2
Mais encore ?
Les outils
Æ 2 langages
Æ Dans ce module :
■  XHTML pour le fond
■  CSS pour la forme
■  Edition : bloc note avec coloration (gedit
ou notepad++…)
■  Affichage : Firefox, Chrome
■  Validation W3c
http://validator.w3.org/
Æ Consulter un site
■  Code interprété par le logiciel de navigation
(Navigateurs : Mozilla Firefox, Internet Explorer…)
■  En tester au moins 2
Æ Créer un site
3
5
■  Editeur de texte (Notepad++)
■  WYSIWYG (Dreamweaver, Frontpage, Nvu…)
4
Outils de développement
Outils de développement
Æ Proposé par les navigateurs : Chrome
Æ Proposé par les navigateurs : Firefox
S. Lanquetin - LPSIL: UE02 - Langage pour le Web
6
1
Comment ça fonctionne ?
Structure d’un document HTML
Æ Commandes sous forme de balises <>
■  Balise en paire <title> Titre de la fenêtre </title>
■  Balise auto-fermante
URL du DTD
Balise de base
html
<img />
Æ Attribut : complément d’information pour la
balise
<img src="photos/image.jpg" alt="image" />
En-tête
Æ Remarques
7
■  Les balises sont écrites en minuscule (xml)
■  Les retours de chariot, espaces blancs ou tabulations ne
sont pas pris en compte
Liste des balises
Version du
langage utilisé
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="fr">
<head>
<title> Page 1 </title>
Titre de la page
</head>
<body>
Corps de page :
<p> Texte </p>
Affiché
</body>
</html>
Fin du document
<html>
8
Baliser le texte
Langue utilisée
Baliser le texte
Mise en valeurs
<p> Paragraphe </p>
<em> Souvent en italique </em>
■  Faible
■  Forte
<p> Passage <br/>
A la ligne </p>
<strong> Souvent en gras </strong>
Citations
■  Courtes
■  Longues
<h1> Titre du plus important </h1>
<h2> … </h2>
…
<h6> Titre du plus important </h6>
Exposant
Indice

Abréviations
9
<p> <q> entre " " sauf IE </q> </p>
<blockquote> <p> … </p> </blockquote>
<sup> … </sup>
<sub> … </sub>
<p> <abbr> sigle + infobulle </abbr> </p>
10
Liens
Liens
Æ Vers 1 autre page
<p><a href="page2.html"> Aller page 2 </a></p>
Site
Æ Liens dans une autre page
Page1.html
Site
Page2.html
page2.html
page1.html
title pour ajouter une infobulle
page2.html
Æ Dans la page
<h1 id="fin"> Titre </h1>
page2.html
page1.html
<p><a href=
href=“#fin”>
"#fin"> Bas
Bas de
de page
page </a></p>
</a></p>
11
<h1 id="fin"> Titre </h1>
<p>
<a href=
href=“page2.html#fin”>
"page2.html#fin"> Bas
Bas de
de page
page 22 </a>
</a>
</p>
12
Adresse relative
2
Liens
Liens
page2.html
Site
page2.html
Site
rep1
page1.html
page1.html
rep2
page2.html
rep2
page2.html
page1.html
page1.html
<p>
<a href="rep2/page2.html"> Page 2 </a>
</p>
13
<p>
<a href="../rep2/page2.html"> Page 2 </a>
</p>
14
Liens
Image
Æ Liens externes
Æ Formats
<p>
<a href="http://www.google.fr"> Google </a>
</p>
JPEG PNG GIF BMP TIFF
Æ Balise
Æ Envoi d’un email
<p>
<img src="image/photo1.jpg" alt="texte alternatif" />
</p>
<p>
<a href="mailto:[email protected]"> Contact </a>
</p>
!
spams!php
Æ Lien image
?subject=
15
16
Les accents
<p><a href="lien.html">
<img src="image/photo1.jpg" alt="texte alternatif" />
</a></p>
Caractères réservés
Æ  Débuter le code par le "&"
Æ  Inscrire le caractère (a e i o u)
Æ  Ecrire avec un des codes suivants
<
<
>
>
 
accent aigu
acute
accent grave
grave
accent circonflexe
circ
cédille
cedil
&
&
Æ  Terminer le tout avec un point-virgule
Æ  Donc:
é = é
17
18
3
CSS : comment faire ?
Site
Style et balise
deco.css
index.html
p{
text-align:center;
}
css
deco.css
Æ Style commun à toutes les balises
*{
/*Commentaire en css*/
}
Æ Style pour une balise
propriété:valeur;
…
<head>
<link rel="stylesheet" type="text/css"
href="css/deco.css" />
</head>
…
Æ Style pour des balises imbriquées
20
Style et balise
Sélecteurs descendants
Æ Style commun à plusieurs balises
h1 { text-align:center;}
h2 { text-align:center;}
p strong{ color:red;}
style appliqué à strong que si strong dans p
h1,h2 { text-align:center;}
Exemple
Æ Style pour des balises imbriquées
<p>La couleur <strong> rouge</strong> est appliquée
<strong> ici </strong>, <q>Et <strong> ici aussi</strong></q></p>
<div><strong> Mais pas ici</strong></div>
<p>Ni là </p>
21
22
Sélecteurs d'enfants
Sélecteur d'enfants adjacents
p>strong{ color:red;}
h2+p {color : red; }
Style appliqué à strong que si strong descendant direct de p
Style appliqué à p que si p suit h2
Exemple
Exemple
<h2>La couleur rouge est appliquée </h2>
<p>ici</p>
<p>mais pas là </p>
<p>La couleur <strong> rouge</strong> est appliquée
<strong> ici </strong>, <q>Mais <strong> pas ici </strong></q></p>
Pas supporté par IE6
23
h1{
text-align:center;
}
Æ Style commun à plusieurs balises
index.html
19
text-align:center;
24
4
Style et balise
Sélecteur pour identifiant et classe
Æ Style pour certaines balises
■  Identifiant unique : id
index.html
deco.css
<p id="intro">
…
</p>
#intro{
color:#555555;
}
Æ Sélecteur d’identifiant
■  Identifiant réutilisable (classe) : class
index.html
<p class="centre">…
</p>
<h1 class="centre">…
</h1>
25
<p class="centre">…
</p>
<h1 class="centre">…
</h1>
<p id="intro">
…
</p>
Æ Sélecteur de classe
deco.css
.centre{
text-align:center;
}
26
p#intro {…}
p.centre {…}
http://www.w3.org/Style/css3-selectors-updates/WD-css3selectors-20010126.fr.html
Mise en forme du texte
Æ Aligner
Æ Polices
Æ Alinéas
text-align:center;
left;
right;
justify;
font-family:Verdana;
"Comic Sans MS";
Æ Plusieurs polices
font-family:Inexistante Rare Arial Verdana;
Par ordre de priorité
text-indent: 20px;
Polices par défaut : • serif (avec empattement)
Æ Taille
font-size:20px;
Notations relatives : 1.5em (/ largeur M)
1.5ex (/ hauteur de X)
80%
27
xx-large
• sans serif
28
Æ Gras
font-weight:bold;
none;
Æ Italique
font-style:italic;
normal;
Couleur et fond
Æ Souligner
Æ Couleur du texte
text-decoration:underline;
line-through;
overline;
blink;
none;
Æ Majuscule / Minuscule
Æ Petite majuscule
29
Nom de taille : xx-small
x-small
small
medium
large
x-large
color:green;
color:#00FF00;
color:rgb(0,255,0);
Æ Couleur de fond
text-transform:uppercase;
lowercase;
capitalize;
none;
Æ Image de fond
background-color:blue;
background-image:url("image.jpg");
Image de fond < 50 Ko
font-variant:small-caps;
normal;
30
5
Couleurs
Hexadécimal
Code couleur = # Red Green Blue
(RGB )
Binaire 0, 1
2 chiffres 2 chiffres 2 chiffres
hexas
hexas
hexas
2 chiffres
Décimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
256 valeurs possibles par couleur
10 chiffres
Hexadécimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
16 chiffres
31
32
Couleurs
Conversion décimal ↔ hexadécimal
33
16
1
2
16
2
0
255
16
15
F
15
16
15
F
0
Code couleur = # Red Green Blue (RGB )
Valeurs comprise entre 0 et FF pour chaque
couleur
Synthèse additive des couleurs
rouge, vert et bleu
Rouge = #ff0000
Vert = #00ff00
Bleu = #0000ff
33↔21 en hexa
33
255↔FF en hexa
La calculatrice de l’ordinateur fait ces conversions!!!
Blanc = #ffffff
Noir = #000000
34
Image de fond
Pseudo-formats
Æ Fixer l’image de fond
Æ Répétition de l’image
Æ Positionner le fond
Æ Passage de la souris
background-attachment:fixed;
scroll;
background-repeat:no-repeat;
repeat-x;
repeat-y;
repeat;
Æ Clic
a:active{
color:white;
}
Æ Page visitée
background-position:300px 100px;
center middle;
a:hover{
color:red;
}
a:visited{
color:blue;
}
Top / middle / bottom / left / center / right
35
36
6
Les listes
Les listes
Æ Liste non ordonnée
Æ Liste de définition
<ul>
<li>1er element</li>
<li>2eme element </li>
</ul>
<dl>
<dt>1er element</dt>
<dd>2eme element </dd>
</dl>
<li></li> correspond à une puce
Æ Liste ordonnée
37
<ol>
<li>1er element</li>
</ol>
Imbrication de listes entre <li> et </li>
Style css pour changer le type
de numérotation
38
CSS pour les listes
Les tableaux
Æ Balise
ul{ color:red;}
<table>…</table>
Æ Retrait de liste list-style-position:inside;
Æ Apparence de la puce
list-style-type:disc;
circle;
square;
none;
Æ Image pour puce
39
Æ Création par ligne
list-style-type:decimal;
decimal-leading-zero;
upper-roman;
lower-roman;
alpha;
greek;
list-style-image:url("puce.png");
<tr>…</tr>
Æ Ligne découpée en cellules
<td>…</td>
<th>…</th>
Entête (gras)
40
Les tableaux
Bordures en CSS
<body>
<table>
<tr><th>Titre Colonne 1</th><th>Titre Colonne 2</th></tr>
<tr><td>Cellule 1 Ligne 1</td><td>Cellule 2 Ligne 1</td></tr>
<tr><td>Cellule 1 Ligne 2</td><td>Cellule 2 Ligne 2</td></tr>
</table>
</body>
Æ Type de bordure
Style à appliquer sur
<table> ET <td>
border-style:solid;
double;
dashed;
dotted;
inset;
outset;
ridge;
none;
Æ Epaisseur border-width:3px;
Æ Couleur border-color:blue;
Æ Raccourci border:3px solid blue;
41
border-left:
right:
top:
bottom:
42
7
Les tableaux
Les tableaux
Æ  table{border:1px solid black}
Æ Titre du tableau
Æ  th,td{border:1px solid black}
Æ CSS
Æ 1 seule bordure
border-collapse:collapse;
cellpadding = 2
cellspacing = 3
<table>
<caption> titre </caption>
<tr> … </tr>
</table>
caption-side:left;
right;
bottom;
top;
Æ Grand tableau <thead> <tfoot> <tbody>
Æ Fusion des cellules <td colspan="2">
padding : 2px
border-spacing : 3px
<td rowspan="3">
43
44
Position dans la page
Æ Balises type bloc
Balise générique div et span
<div>
<p> <table> <h1> <form>
■  Largeur page
■  Les unes en dessous des autres
Æ Balise type en ligne
margin
padding
Contenu………………………
…………………………………
………………………………….
<a> <q> <strong>
■  Taille du texte
■  Pas de retour à la ligne
border
Par défaut :
Æ Passage bloc-ligne
display:block;
inline;
none;
45
46
Modifier un bloc
Æ Marge par coté
Æ Dimensions
Æ Centrer
padding-top:10px;
bottom
left
right
Les marges externes ne s’ajoutent pas
<p>
<img src="photo.jpg" alt="ma photo" class="flottant" />
blabla
.flottant{
</p>
float:left;
}
height:20px;
2.  Marges automatiques à gauche et à droite
47
Pas de bordure
Pas de marge (en ligne)
Marge (block sauf div)
float: left;
right;
none;
% s’adapte
résolution
1.  donner une largeur
p{
width:50%;
margin-left:auto;
margin-right:auto;
}
contenu
marge interne
marge externe
bordure
Habillage du texte
margin-top:20px;
bottom
left
right
width:80%;
<span>
Æ Arrêter flottement
IE 5.5 et avant
.conteneur_de_p{
text-align:center;
}
48
clear: left;
right;
both;
none;
8
Exemple de flottement
Exemple de flottement et d'arrêt
<p><img src="calimero.jpg" class="imgfloat" alt="Img calim" /></p>
<p>Attention…</p>
<p><img src="calimero.jpg" class="imgfloat" alt="Img calim" /></p>
<p>Ce Texte est à cot&eacute de l'image</p>
<p class="dessous">Celui-ci se place sous l'image</p>
.imgfloat { float:left; }
.imgfloat { float:left; }
.dessous { clear:both; }
.imgfloat { float:right; }
49
50
Positionnement absolu
Æ Placement au pixel près
position:absolute;
top:100px;
left:260px;
Positionnement fixe
Æ Absolu + élément reste fixe quand la page défile
(260,0)
(0,0)
position:fixed;
top:100px;
left:260px;
(0,100)
bottom / right
Pas supporté par IE6 et avant
Æ Imbrication de bloc
Æ Utilisation : Menu
A
B
51
Æ Superposition
z-index le plus élevé devant les autres
52
Positionnement relatif
Positionnement statique
Æ Position par rapport à la position théorique
Æ Retour au positionnement par défaut
strong{
background-color:#bbbbff;
position:relative;
top:20px;
left:10px;
}
53
*{position:static;}
54
9
Exemple de positionnement
Æ Bloc contenu plus grand que bloc menu
<div id="conteneur">
<div id="titre"> Bloc titre </div>
<div id="menu"> Bloc menu </div>
<div id="contenu"> Bloc contenu <br/> avec
bloc contenu plus grand ou egal au bloc menu
</div>
<div id="pied"> Bloc pied de page </div>
</div>
55
#conteneur {
width:600px;
margin:0 auto;
background-color:#ccffcc}
#menu {
position:absolute; width:200px;
#contenu {
margin-left:200px;
background-color:#ffffcc}
#titre{background-color:#cccccc}
#pied{background-color:#ffccff}
<div id="titre"> Bloc titre </div>
<div id="menu"> Bloc menu </div>
<div id="contenu"> Bloc contenu <br/> avec
bloc contenu plus grand ou egal au bloc menu
</div>
<div id="pied"> Bloc pied de page </div>
</div>
#conteneur {
width:600px;
margin:0 auto;
#menu {
position:absolute; width:200px;
#contenu {
margin-left:200px;
56
Æ Bloc menu plus grand que bloc contenu
Cette solution n’est pas
satisfaisante
float
57
<div id="titre">
Bloc titre
</div>
<div id="milieu">
<div id="menu">
Bloc menu <br/>avec … </div>
<div id="contenu">
Bloc contenu </div>
</div>
<div id="pied">
Bloc pied de page
</div>
58
</div>
#conteneur {
width:600px;
margin:0 auto;
#milieu {overflow:hidden;
#menu {
float:left; width:200px;
#contenu {
margin-left:200px;}
Les Formulaires
<div>
<ul>
<li id="col1">
<h2>Colonne 1</h2> <p> blabla. </p>
</li>
<li id="col2">
</li>
<li id="col3">
</li>
<li id="col4">
<h2>Colonne 4</h2>
<p> Cette colonne est la plus grande!
</p>
</li>
</ul></div>
59
*{padding:0; margin:0;}
ul {position:relative; margin:0 10%;
list-style-type:none;margin-top:10px;
list-style-position:inside;}
div{width:50%}
#col1,#col2,#col3 {position:absolute;
width:25%; height:100%;
background-color:#ddeeff}
#col2 {right:50%;
background-color:#99ccff}
#col3 {left:50%;
background-color:#55aaff}
#col4 {margin-left:75%;
background-color:#1188ff}
10
Exemple de formulaire
Pourquoi ?
Æ Envoyer des informations
■  1ère méthode : informations dans l'adresse de la
page (http://...)
}  limitée à 255 caractères
}  Informations visibles
method="get"
■  2nde méthode :
method="post"
61
62
Comment ?
Elément <input />
Æ Balise
Permet de créer de nombreuses commandes
Syntaxe :
<form> </form>
■  Attributs :
}  method
}  action : adresse de la page ou du programme qui
va traiter les informations
<input type="text" name="nom" value="toto" size="10" />
Æ type : type de commande à créer. Par défaut,
text (saisie de texte sur 1 ligne)
Æ size : largeur initiale de la commande en nb de
caractères
Æ maxlength : nombre maxi de caractères que
l'utilisateur peut saisir
Æ value : remplir le champ par défaut
Ø envoyées par mail
Ø Stockées dans BD (puis réaffichées)
<form method="post" action="traitement.php"> </form>
■  Pour écrire dans un formulaire, il faut des balises
de type block (<p>)
63
64
Elément <input />
Elément <input />
type="password" : saisie de texte sur une ligne de
type mot de passe (masqué).
Exemple :
<form id="nomform" action="">
<div>
Nom
<input type="text" name="nom" value="toto" size="10" />
</div>
</form>
<div>
<label for="pass">Mot de passe</label>
<input type="password" name="pass" id="pass" value="toto"
size="10" /></label>
</div>
Affichage
65
66
11
Elément <input />
Elément <input />
type="radio" : bouton radio - attribut checked si case
présélectionnée – attribut value obligatoire
<div>Boutons radio<br />
<input type="radio" name="rad" id="rouge"
value="rouge" />
<label for="rouge">rouge</label><br />
<input type="radio" name="rad" id="vert" value="vert" />
<label for="vert">vert</label><br />
<input type="radio" name="rad" id="bleu" value="bleu"
checked="checked" />
<label for="bleu">bleu</label><br /></div>
67
type="checkbox" : case à cocher – attribut checked si
case présélectionnée - attribut value obligatoire
<div>
<input type="checkbox" id="homme" name="homme" />
<label for="homme"> homme</label><br />
<input type="checkbox" id="femme" name="femme"
checked="checked" /><label for="femme"> femme</label>
</div>
68
Elément <input />
Elément <input />
Æ Le type submit crée un bouton de soumission du
formulaire. Effectue l'action définie dans
l'élément <form>
<input type="submit" name="envoyer" value="envoyer" />
Æ Le type reset crée un bouton de réinitialisation
du formulaire
<input type="reset" name="reset" value="reset" />
69
Æ Le type image crée un bouton de soumission
graphique, alors l'attribut src spécifie l'URL de
l'image, alt donne une alternative
<input type="image" src="coccinelle.gif" alt="coccinelle" />
Æ Le type button crée un bouton d'action (javascript)
<input type="button" name="nom" value="Go!" />
70
Elément <input />
Elément <button>
Æ  Le type hidden crée une commande cachée
Ajoute au formulaire avant l'envoi des données
< input type="hidden" name="label" value="texte" />
Comme <input> + accepte contenu
<button>…</button>
<button type="reset" name="reset" value="reset">texte sur bouton</button>
Æ  Le type file crée une commande de sélection de fichier
Attributs :
■  name : nom commande
■  value : valeur initiale
■  type : submit,reset,button
<input type="file" name="label" value="texte" />
71
72
12
Elément <select>
Crée un menu
Syntaxe :
<select name="nom">
<option>…</option>
…
</select>
Chaque option est représentée par un élément <option>
Attributs :
Elément <select>
Exemple :
<select name="pays" size="3" multiple="multiple">
<option>Allemagne</option>
<option>Angleterre</option>
<option>France</option>
<option>Italie</option>
</select>
■  name
■  size à nombre de lignes de menu affichées
■  multiple : autorise la sélection simultanée de plusieurs
items de la liste
73
74
Elément <select>
Elément <select>
Attributs de l'élément <option> :
<optgroup>...</optgroup > : groupe d'options
dans une liste déroulante
■  label nom du groupe ;
■  value définit la valeur passée au script
■  selected pré-sélection d'un item de la liste ou
valeur par défaut du menu
<select name="pays" size="3" multiple="multiple" >
<option value="All">Allemagne</option>
<option value="Ang">Angleterre</option>
<option value="Fr" selected="selected">France</option>
<option value="It">Italie</option>
</select>
75
<select name="pays">
<optgroup label="Europe">
<option value="fr" selected="selected">France</option>
<option value="it">Italie</option>
</optgroup>
<optgroup label="Asie">
<option value="ch">Chine</option>
</optgroup>
</select>
76
Elément <textarea>
Elément <textarea>
Crée une zone de texte multiligne
Exemple :
<textarea cols="15" rows="5" readonly="readonly">blabla
</textarea>
Attributs :
■  name
■  rows à nombre de lignes visibles
■  cols à largeur visible
■  readonly à booleen pour mode lecture seule
77
78
13
Elément <label>
Eléments <fieldset> et <legend>
Æ Permet d'ajouter des libellés
Æ Attribut optionnel for permet de lier le label à la
commande par son attribut id
<label for="prenom">Prénom</label>
<input type="text" name="commande prenom" id="prenom" />
79
Æ <fieldset> permet de rassembler par thème
certains éléments d'un formulaire
Æ <legend> permet d'associer une légende à ce
groupe d'éléments
<form action="">
<fieldset><legend>Sexe :</legend>
<ul><li><input type="radio" value="H" name="sexe" id="Ho"/>
<label for="Ho">Homme</label></li>
<li><input type="radio" value="F" name="sexe" id="Fe"/>
<label for="Fe">Femme</label></li></ul>
</fieldset>
</form>
80
Soumission du formulaire
Images cliquables
Protocole HTTP
■  get à préféré quand pas d'effets secondaires
(type recherche)
■  post à quand la soumission du formulaire a un
effet (ajout dans une base de données)
Type de contenu : enctype
Lien sur un fichier
Lien externe sur google
■  application/x-www-form-urlencoded
■  multipart/form-data (fichiers,données non ASCII,
données binaires)
Lien une de vos
pages xhtml
81
Images cliquables
Images cliquables
Ø Il est possible d'utiliser une partie d'une
image pour créer un lien Attribue un nom au
graphique
Pas d'affichage
Ø La àstructure est celle-ci
l'écran
Définit surface
composée de liens
graphiques
Shape="rect"
"circle"
"poly"
Coordonnées
<map name = "nom" id="nom">
<area shape="forme" coords="x,y,..." séparées par ,
href="lien1" alt=" nom_lien1" />…
< area shape ="forme" coords ="u,v,..."
href="lien2" alt="nom_lien2" />
</map>
<img src ="image.png" usemap ="#nom" alt="g" />
Référencer l'image avec
surfaces associées
à des liens
83
Appelle la carte définie
précédemment
Ø  rect : point en haut à gauche, point en bas à droite
Ø  circle : centre, rayon
Ø  poly : tous les points (fermeture automatique)
Lien sur un fichier
Lien externe sur google
84
Lien une de vos
pages xhtml
14
Trouver les coordonnées
Les Pseudo-éléments
Æ Avec un logiciel graphique
Æ Permet de préciser un style pour une partie
spécifique d’un élément
Æ En insérant la ligne suivante dans la page html
Æ Syntaxe :
Æ  Style de la première lettre
Æ Style de la première ligne
<a href="nomcarte">
<img src="image.png" ismap alt="Graphique" />
</a>
:first-letter
:first-line
Æ  On peut préciser l’élément auquel s’applique le
pseudo-élément
p:first-letter { color : red; font-size : large };
85
86
Les Pseudo-classes
h1:first-letter { color : red; font-size : large };
Les Pseudo-classe liens
Æ Un lien peu avoir plusieurs états
■  Visité
■  Actif
■  Pointé par la souris
Æ Permet de sélectionner un état particulier d’un
élément (souris sur l’élément, liens visités…)
http://www.w3schools.com/css/css_pseudo_classes.asp
87
Æ Les pseudo-classes permettent de donner des
styles différents à ces différentes classes de
liens.
88
Les Pseudo-classe liens
Résolution d’un site
Æ Style du lien actif (avant visite)
Æ Différents selon résolution
■  Images
:link
Æ Style du lien visité
Æ Pas de résolution spécifique
:visited
Æ Style au moment ou le lien est activé
■  Feuille de style
■  Largeur hauteur minimales
:active
Æ Style lorsque la souris est sur le lien
:hover
Æ Style lorsque le focus est sur le lien (tabulation par
exemple)
http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-lesresolutions.html
:focus
89
90
15
Æ Statistiques (2013)
Æ Tendances
■  23% en 1024x768 et moins
■  40% entre 1280 et 1344
■  37% en résolutions supérieures
■  Tablettes et mobile 10 à 20%
91
http://www.w3schools.com/
http://www.ah-book.com/Blog/resolutions-ecrans-site-web-2013.php
■  largeur fixe autour de 1024 pixels
■  largeur flexible à 100%
■  largeur flexible entre 1024 pixels de largeur et
une largeur maximale où le site devient fixe
■  Mise en page adaptative
92
Fixe centré
Fluide
Æ %
Æ Bloc menu fixe et autre non précisé
93
94
Fluide intelligent
Æ Gérer taille extrême
Gestion d’IE6
Navigateurs (statistiques)
div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}
[if lt IE 7]
div {
width: 770px;
width: expression(document.body.clientWidth <= 602? "600px"
: document.body.clientWidth >= 1002? "1000px" : "auto");
}
[endif]
95
96
W3Schools
16
Systèmes d’exploitation(statistiques)
Tester les différents navigateurs
Æ Pour un site pro, tester
Æ Comment ?
■  Tout installer (« en vrai », machines virtuelles)
■  Logiciels (IETester, Multiple IE …)
■  Test en ligne(Browser Shots, Adobe Browser Lab)
Æ En savoir plus
97
W3Schools
98
Favicon
http://www.alsacreations.com/actu/lire/495-installer-differentsnavigateurs-pour-tester-vos-pages.html
Publication Web ufrsciencestech
Æ Déposer dans public_html + droits
■  http://depinfo.u-bourgogne.fr/infoiem/
Documentation/Publication Web
<link rel="shortcut icon" href="favicon.ico" />
Æ Accès :
http://ufrsciencestech.u-bourgogne.fr/~login
Pas supporté par IE
<link rel="icon" type="image/png" href="logo.png" />
99
100
17

UE02 : Langage pour le Web (X)HTML CSS Qu`est ce que c`est

Transcription

Documents pareils

Mini mémento HTML. Rappel: Les codes HTML sont insensibles à la

sarl div`in nature - Le portail des produits fermiers du Mont d`or

L`innovation en Biologie Médicale

HTML – Les formulaires

francois sanchez consultants

calendrier rattrap examens lap sem 5 2015.2016

Quand l`Ecole est finie. Premiers pas dans la vie active

Grille thématique EIP4_pdf

Oscilloscope HAMEG 303-6

• Connecte-toi au site http://physiquecollege.free.fr/troisieme.htm