Langage HTML (suite).

Transcription

Les cadres ou (frames)
Les images sensibles
Feuilles de style
Langage HTML (suite).
Walid Belkhir
Université de Provence
[email protected]
http://www.lif.univ-mrs.fr/∼belkhir/
1 / 36
Feuilles de style
Plan de la partie 1 (2 séances)
Internet et le Web (cours 1)
Un outil pour le Web : le langage HTML (cours 1)
Notions avancées de HTML : (aujourd’hui)
Les cadres.
Les image sensibles.
Les feuilles de styles.
2 / 36
Feuilles de style
Plan
1
2
3
Feuilles de style
3 / 36
Feuilles de style
Les cadres
Création des cadres indépendant à l’intérieur d’une fenêtre
Accélération du chargement de la page
seule le cadre qui change est chargé
Une page HTML est souvent divisée en :
un petit cadre contenant des index (liens)
un grand cadre contenant les données à afficher
NB. Un cadre n’a pas d’URL.
4 / 36
Feuilles de style
Définition des cadres : balise <FRAMESET>
Pour définir des cadres on utilise la balise
<FRAMESET>...</FRAMESET>
elle contient la description de chacun des cadres présents
pas de balise <BODY>
Un exemple
Cela donne
<HTML>
<HEAD>
<TITLE> Mise en place des frames
</TITLE>
</HEAD>
<FRAMESET cols=”20%, 80%”>
<frame src=”menu.html” name=”menu”>
<frame src=”cont.html” name=”cont”>
</FRAMESET>
</HTML>
5 / 36
Feuilles de style
Attributs de la balise <FRAMESET>
ROWS : division en zones horizontales
ROWS=”h1,h2,...,hn”
hi peut être
hi=n : hauteur du cadre en pixels
hi=n% : hauteur du cadre en % de la taille de la zone mère
ex : pour avoir 2 frames horizontales de taille identique :
<frameset rows=”50%,50%”>
COLS : division en zones verticales
COLS=”l1,l2,...,ln”
FRAMEBORDER : frontières avec effet 3D
valeurs : yes (1) ou no (0), 1 par défaut
BORDERCOLOR : couleur des bordures
BORDER : largeur de la bordure
BORDER=”0” =⇒ cadres invisibles
6 / 36
Feuilles de style
Attributs de la balise <FRAME>
src=”URL de la page à afficher dans le cadre”
name=”nom du cadre”
pour référencer le cadre afin qu’il devienne la cible d’un autre
lien hypertexte
MARGINWIDTH=”n” (15 par défaut)
nombre de pixels entre les frontière gauche et droite de la zone
et le document HTML à afficher dans la zone
MARGINHEIGHT=”n”
nombre de pixels entre les frontière haute et basse de la zone
et le document HTML à afficher dans la zone
NORESIZE : pas de valeur
le navigateur empêche le redimensionnement de la zone à
l’aide de la souris.
7 / 36
Feuilles de style
Les attributs de la balise <FRAME>
SCROLLING=”yes / no / auto”
indique si la zone doit posséder une barre de défilement
yes : affiche une barre même si le document est plus petit que
le cadre
no : n’affiche jamais la barre (des parties de la page peuvent
ne pas être atteinte)
auto : la barre apparaı̂t si nécessaire (valeur par défaut)
8 / 36
Feuilles de style
Utilisation des cadres : attribut target
target=”nom du cadre” : attribut de <A> et <FORM>
désigne un cadre cible du lien
nom : nom local du frameset
Fichier index.html
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAMESET cols=”20%, 80%”>
<frame src=”menu.html” name=”menu”>
<frame src=”cont.html” name=”cont”>
</FRAMESET>
</HTML>
Fichier menu.html
<html> <head>
<title> mise en place de frames </title>
</head> <body> Menu
<a href=”c1.html” target=”cont”> Cours 1
</a>
</a>
</a>
</body></html>
9 / 36
Feuilles de style
Utilisation des cadres : attribut target
If faut créer cont.html, c1.html ...
Fichier cont.html
Fichier c1.html
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
ici apparaitra le contenu
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Cours 1 </TITLE>
</HEAD>
<BODY>
Outis Web 1 ...
</BODY>
</HTML>
10 / 36
Feuilles de style
Les liens et les cadres : attribut target
L’attribut target :
contient le nom d’un cadre existant
(la cible est affiché dans le cadre nommé)
si target n’est pas renseigné alsors
la cible est affiché dans le cadre courant
si target contient le nom d’un cadre inexistant alors
la cible est affichée dans une nouvelle fenêtre
target peut contenir une valeur réservée :
self : la cible est affichée dans le cadre où est définie le lien
parent : la cible affiché dans le cadre père (celui qui l’a créé)
blank :la cible est affichée dans une autre fenêtre sans
structure de cadre
top : la cible affichée replace la fenêtre courante
( =⇒ ) suppression de tous les cadres
utiliser top dès qu’un lien pointe sur une page extérieure
11 / 36
Feuilles de style
Imbrication de cadres
<HTML> <HEAD>
<TITLE> Imbrication des cadres </TITLE>
</HEAD>
<FRAMESET row=”25%,75%” frameborder=”yes”>
<frame src=”haut.html” name=”haut” >
<FRAMESET cols=”70%,30%” border=”10”>
<frame src=”bas gauche.html” name=”basgauche”>
<frame src=”bas droit.html” name=”basdroit”>
</FRAMESET>
</FRAMESET>
</html>
12 / 36
Feuilles de style
Plan
1
2
3
Feuilles de style
13 / 36
Feuilles de style
Images sensibles (cliquable)
Images et liens
<a href=”http ://yahoo.com”> <img src=”photo.jpg”>
</a>
permet d’afficher une image ”photo.jpg” et en cliquant dessus
d’aller sur ”http ://yahoo.com”
Principes des images cliquables :
l’image est découpée en zones
associer un lien à chaque zone de l’image
14 / 36
Feuilles de style
Le système de coordonnées et les zones
il faut définir les zones en pixels
une zones peut être un rectangle, cercle, ...
système de coordonnées :
15 / 36
Feuilles de style
Images sensible avec USEMAP
Définition d’une image sensible :
<img src=”ph.jpg” usemap=”#3zones”>
Définition d’une carte (map) :
<map name=”3zone”> ... </map>
Définition d’une zone dans la carte :
<area shape=”fig” coords=”x0,y0,x1,y1” href=”url”>
fp peut prendre les valeurs :
rect càd rectangle (angles supérieur gauche et inférieur bas)
poly càd polygone (coordonnées de chaque extrémité du
vecteur)
circle càd cercle (centre et rayon)
16 / 36
Feuilles de style
Un exemple
<html> <head>
<title></title>
</head>
....
<body>
<map name=”mon map”>
<area shape=”rect” coords=”0,0,180,180” href=”page1.html”>
<area shape=”rect” coords=”0,230,160,460” href=”page2.html”>
<area shape=”rect” coords=”160,230,250,460” href=”yahoo.fr”>
</map>
<img src=”me.jpg” usemap=”#mon map”>
</body>
</html>
17 / 36
Feuilles de style
Plan
1
2
3
Feuilles de style
18 / 36
Feuilles de style
Principes des feuilles de style
Distinction entre la structuration du texte et les propriétés
typographique appliquées au texte
Possibilité de définir certaines propriétés aux balises HTML
Plusieurs documents peuvent partager les mêmes propriétés
typographiques
L’apparence des documents peut facilement être modifiés en
utilisant les styles préalablement définis
19 / 36
Feuilles de style
Principes des feuilles de style
Les styles
peuvent être définis directement dans la page HTML
le mieux est de les stocker dans un fichier séparé
(appelé feuille de style)
Description des feuille de style se fait à l’aide de CSS :
Cascading Style Sheets
langage déclaratif type HTML
20 / 36
Feuilles de style
Principes des feuilles de styles
Possibilité d’imbriquer dans un même document plusieurs
styles avec un niveau de priorité différent
les propriétés non définies pour la balise courante sont héritées
des balises qui contiennent la balise courante
un style définie dans une page HTML est plus prioritaire qu’un
style défini dans un fichier dans un fichier externe
21 / 36
Feuilles de style
La balise <STYLE>
Entre <head> ... </head>
L’attribut TYPE : text/css
<HTML> <HEAD>
<style type=”text/css”>
P{font-size : 20 pt ; color : blue ; }
</style>
</HEAD> ...
22 / 36
Feuilles de style
Classes de style : attribut CLASS
On peut définir différentes ”classes” :
une classe générale associée à un élément particulier :
P {font-size : 20 pt ; color : red ; }
=⇒ s’applique à tous les paragraphes
une classe particulière pour n’importe quelle balise :
.vert{ color : green ;}
=⇒ s’applique à toutes balise revendiquant la classe ”vert”
une classe particulière pour un élément particulier :
(<h1>, <P>, ...)
P.bleu{color : blue ;}
P.i{font-style : italic ;}
=⇒ s’applique aux paragraphes revendiquant la classe
”bleu” ou ”i”
23 / 36
Feuilles de style
Un exemple
<HTML><HEAD>
.vert{color : green}
P{font-size : 16pt ; color : red ;}
P.bleu{color : blue}
P.italic{font-style : italic ;}
H2.titre{border-width : 1 ; text-align : center ; color : red ;}
</style>
</HEAD><BODY>
...
</BODY></HTML>
24 / 36
Feuilles de style
Les sous-classes de style : attribut ID
Permet de varier certains paramètres d’une classe
Ex : une classe définit un style général de paragraphe mais on
souhaite changer seulement la définition de la couleur
première solution : faire une 2ème classe
=⇒ la duplication du code est une mauvaise idée
mieux : définir un modificateur qui n’agit que sur les
paramètres souhaités
# permet de définir des sous-classes
25 / 36
Feuilles de style
Les sous-classes de style : attribut ID
Exemples :
.standard{color : green ; font-size : 10pt ;}
#vert{color :green}
P{font-size :20pt ; color :yellow ;}
P.special{font-style : italic ; color :red}
P#bleu{color :blue ;}
</style>
L’attribut ID permet de faire une exception dans une classe ou
être utilisé seul (donc il est équivalent à CLASS)
26 / 36
Feuilles de style
Un exemple
<html><head>
.standard{color : green ; font-size : 10pt ;}
#vert{color :green}
P{font-size :20pt ; color :yellow ;}
P.special{font-style : italic ; color :red}
P#bleu{color :blue ;}
</style>
</head><body>
<p> redéfinition du standard P <p>
<p class=”standard”> P classe standard </p>
<p class=”special”> P classe special </p>
<p class=”standard” id=”vert”> P classe standard mais vert </p>
<p class=”standard” id=”bleu”> P classe standard mais bleu </p>
<p class=”special” id=”bleu”> P classe special mais bleu </p>
<h1 class=”standard” id=”vert”> h1 classe standard vert </h1>
ID devient une classe ...
<h1 id=”vert”> h1 mais vert</h1> <body> </html>
27 / 36
Feuilles de style
Les feuille se style
La définition des styles se fait dans un ou plusieurs fichiers
séparés
Permet d’appliquer les styles à un ensemble de documents
Inclusion d’une feuille de style dans un document avec la
balise <LINK>
28 / 36
Feuilles de style
La balise <LINK>
Permet de référencer d’autres fichiers externes
Entre <HEAD> ... <HEAD>
Trois attributs :
REL=”stylesheet” indique que le fichier inclus est une feuille
de style
TYPE=”text/css” : norme se styles utilisée dans le fichier
HREF=”mystyles.css” indique l’URL de la feuille de style
29 / 36
Feuilles de style
Utilisation de feuilles de style
/* styles CSS pour la balise P */
/* pstyle.css */
P{font-size : 16pt ; color : yellow ;}
P.special{font-style : italic ; font-size : 30pt ; color : red}
P#bleu{color : blue ;}
/* styles CSS générique */
/* allstyle.css */
.standard{color : green ;font-size : 10pt}
#vert{color : green}
.noirsurblanc{background-color : white ; color : black}
.blancsurnoir{background-color : black ; color : white}
#rouge{color : red ;}
30 / 36
Feuilles de style
Utilisation de feuille de style
<html><head>
<link rel=”stylesheet” type=”text/css” href=”allstyle.css”>
<link rel=”stylesheet” type=”text/css” href=”pstyle.css”>
</head><body>
<p class=”special” id=”vert”> P spécial vert </p>
<p style=”color : red ; background-color :blue ;”>
mais ici on utlise un style local (surcharge du style général de P)
</p>
</body> </html>
31 / 36
Feuilles de style
Remarques
Groupement de balises H1, H2, H3 {color :red ; }
tous les titres H1, H2, H3 seront en rouge
Sélection contextuelle d’application de style
H3 A {color : blue } : les liens définies dans <H3> ...<H3>
seront en bleu
Héritage des styles :
<P class=”titre1”> <H1> imbrication </H1> </P>
les balises imbriquées dans des balises de niveau supérieur
héritent du style défini dans ces balises
Séries de balises
TD+TD {background-color : yellow ;}
=⇒ A partir de la deuxième cellule de chaque ligne, le fond
est jaune.
32 / 36
Feuilles de style
Compléments sur les styles
line-height : 1pt hauteur de la ligne
color : rgb(255,255,255) couleur de la police
background-image : url image d’arrière-plan
background-color : transparent/ rgb(0,0,0) couleur d’arr. plan
border : 1px épaisseur de la bordure
boder-style : solide / double / groove / dotted / dashed
border-color : red couleur de la bordure
font-family : seif / fantasy / ... famille de police
font-style : italic / oblique / normal .. style de police
font-size : small / medium ... : taille de police
font-weight : bold/bolder ... : graisse de la police
text-transform : capitalize / uppercase / lowercase /non càd :
début des mots en majuscules, tout en majuscules, tout en minuscules,
et pas de transformation du texte.
33 / 36
Feuilles de style
Compléments sur les style
Définition d’un curseur pour un élément HTML : le curseur prend
la forme mentionnée quand la souris passe la dessus :
cursor : form
où form peut être :
wait : curseur en forme de sablier
progress : curseur en forme de flèche avec sablier
crosshair : curseur en forme de croix fine
...
34 / 36
Feuilles de style
Propriétés des liste
list-style-type :
pour les listes non numérotées : square/circle/disc
pour les listes numérotées :
decimal 1,2,3,...
decimal-leading-zero 01,02,...
lower-roman i, ii, iii,...
upper-roman I, II, III,...
lower-alpha a,b,c,...
upper-alpha A,B,C,...
list-style-image : <images/puce.gif> ;
pour utiliser une image comme puce
35 / 36
Feuilles de style
Appliquer des styles à certains états : a :link{color : red ;}
a :visited{color :blue ;}
a :active {color : green}
a :hover{color : yellow} (souris passe sur le lien)
p :first-line { color : red}
p :first-letter{ font-size : 150%}
36 / 36

Langage HTML (suite).

Transcription

Documents pareils

affiche open snooker du 21 janvier 2017

Savoir créer un site web (Initiation)

Html 05 - HTML facile - Pagesperso

cours d`initiation a la creation de pages internet en html plan

Fiche technique KIER402 KIT TUNING PC Ce kit permet

Fiche technique

Porsche 911 1999 152316 Km

Principales balises HTML

Un exemple de document HTML