Langage HTML (suite).

Transcription

1 Langage HTML (suite). Walid Belkhir Université de Provence belkhir/ 1 / 36

2 Plan de la partie 1 (2 séances) Internet et le Web (cours 1) Un outil pour le Web : le langage HTML (cours 1) Notions avancées de HTML : (aujourd hui) Les cadres. Les image sensibles. Les feuilles de styles. 2 / 36

3 Plan 1 Les cadres ou (frames) 2 Les images sensibles 3 Feuilles de style 3 / 36

4 Les cadres Création des cadres indépendant à l intérieur d une fenêtre Accélération du chargement de la page seule le cadre qui change est chargé Une page HTML est souvent divisée en : un petit cadre contenant des index (liens) un grand cadre contenant les données à afficher NB. Un cadre n a pas d URL. 4 / 36

5 Définition des cadres : balise <FRAMESET> Pour définir des cadres on utilise la balise <FRAMESET>...</FRAMESET> elle contient la description de chacun des cadres présents pas de balise <BODY> Un exemple <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> Cela donne 5 / 36

6 Attributs de la balise <FRAMESET> ROWS : division en zones horizontales ROWS= h1,h2,...,hn hi peut être hi=n : hauteur du cadre en pixels hi=n% : hauteur du cadre en % de la taille de la zone mère ex : pour avoir 2 frames horizontales de taille identique : <frameset rows= 50%,50% > COLS : division en zones verticales COLS= l1,l2,...,ln FRAMEBORDER : frontières avec effet 3D valeurs : yes (1) ou no (0), 1 par défaut BORDERCOLOR : couleur des bordures BORDER : largeur de la bordure BORDER= 0 = cadres invisibles 6 / 36

7 Attributs de la balise <FRAME> src= URL de la page à afficher dans le cadre name= nom du cadre pour référencer le cadre afin qu il devienne la cible d un autre lien hypertexte MARGINWIDTH= n (15 par défaut) nombre de pixels entre les frontière gauche et droite de la zone et le document HTML à afficher dans la zone MARGINHEIGHT= n nombre de pixels entre les frontière haute et basse de la zone et le document HTML à afficher dans la zone NORESIZE : pas de valeur le navigateur empêche le redimensionnement de la zone à l aide de la souris. 7 / 36

8 Les attributs de la balise <FRAME> SCROLLING= yes / no / auto indique si la zone doit posséder une barre de défilement yes : affiche une barre même si le document est plus petit que le cadre no : n affiche jamais la barre (des parties de la page peuvent ne pas être atteinte) auto : la barre apparaît si nécessaire (valeur par défaut) 8 / 36

9 Utilisation des cadres : attribut target target= nom du cadre : attribut de <A> et <FORM> désigne un cadre cible du lien nom : nom local du frameset Fichier index.html <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> 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 href= c2.html target= cont > Cours 2 </a> <a href= c3.html target= cont > Cours 3 </a> </body></html> 9 / 36

10 Utilisation des cadres : attribut target If faut créer cont.html, c1.html... Fichier cont.html <HTML> <HEAD> <TITLE> Mise en place des frames </TITLE> </HEAD> <BODY> ici apparaitra le contenu </BODY> </HTML> Fichier c1.html <HTML> <HEAD> <TITLE> Cours 1 </TITLE> </HEAD> <BODY> Outis Web 1... </BODY> </HTML> 10 / 36

11 Les liens et les cadres : attribut target L attribut target : contient le nom d un cadre existant (la cible est affiché dans le cadre nommé) si target n est pas renseigné alsors la cible est affiché dans le cadre courant si target contient le nom d un cadre inexistant alors la cible est affichée dans une nouvelle fenêtre target peut contenir une valeur réservée : self : la cible est affichée dans le cadre où est définie le lien parent : la cible affiché dans le cadre père (celui qui l a créé) blank :la cible est affichée dans une autre fenêtre sans structure de cadre top : la cible affichée replace la fenêtre courante ( = ) suppression de tous les cadres utiliser top dès qu un lien pointe sur une page extérieure 11 / 36

12 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

14 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 découpée en zones associer un lien à chaque zone de l image 14 / 36

15 Le système de coordonnées et les zones il faut définir les zones en pixels une zones peut être un rectangle, cercle,... système de coordonnées : 15 / 36

16 Images sensible avec USEMAP Définition d une image sensible : <img src= ph.jpg usemap= #3zones > Définition d une carte (map) : <map name= 3zone >... </map> Définition d une zone dans la carte : <area shape= fig coords= x0,y0,x1,y1 href= url > fp peut prendre les valeurs : rect càd rectangle (angles supérieur gauche et inférieur bas) poly càd polygone (coordonnées de chaque extrémité du vecteur) circle càd cercle (centre et rayon) 16 / 36

17 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

19 Principes des feuilles de style Distinction entre la structuration du texte et les propriétés typographique appliquées au texte Possibilité de définir certaines propriétés aux balises HTML Plusieurs documents peuvent partager les mêmes propriétés typographiques L apparence des documents peut facilement être modifiés en utilisant les styles préalablement définis 19 / 36

20 Principes des feuilles de style Les styles peuvent être définis directement dans la page HTML le mieux est de les stocker dans un fichier séparé (appelé feuille de style) Description des feuille de style se fait à l aide de CSS : Cascading Style Sheets langage déclaratif type HTML 20 / 36

21 Principes des feuilles de styles Possibilité d imbriquer dans un même document plusieurs styles avec un niveau de priorité différent les propriétés non définies pour la balise courante sont héritées des balises qui contiennent la balise courante un style définie dans une page HTML est plus prioritaire qu un style défini dans un fichier dans un fichier externe 21 / 36

22 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> / 36

23 Classes de style : attribut CLASS On peut définir différentes classes : une classe générale associée à un élément particulier : P {font-size : 20 pt ; color : red ; } = s applique à tous les paragraphes une classe particulière pour n importe quelle balise :.vert{ color : green ;} = s applique à toutes balise revendiquant la classe vert une classe particulière pour un élé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

24 Un exemple <HTML><HEAD> <style type= text/css >.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

25 Les sous-classes de style : attribut ID Permet de varier certains paramètres d une classe Ex : une classe définit un style général de paragraphe mais on souhaite changer seulement la définition de la couleur première solution : faire une 2ème classe = la duplication du code est une mauvaise idée mieux : définir un modificateur qui n agit que sur les paramètres souhaités # permet de définir des sous-classes 25 / 36

26 Les sous-classes de style : attribut ID Exemples : <style type= text/css >.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 être utilisé seul (donc il est équivalent à CLASS) 26 / 36

27 Un exemple <html><head> <style type= text/css >.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> redé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

28 Les feuille se style La définition des styles se fait dans un ou plusieurs fichiers séparés Permet d appliquer les styles à un ensemble de documents Inclusion d une feuille de style dans un document avec la balise <LINK> 28 / 36

29 La balise <LINK> Permet de réfé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 utilisée dans le fichier HREF= mystyles.css indique l URL de la feuille de style 29 / 36

30 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 géné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

31 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 spécial vert </p> <p style= color : red ; background-color :blue ; > mais ici on utlise un style local (surcharge du style général de P) </p> </body> </html> 31 / 36

32 Remarques Groupement de balises H1, H2, H3 {color :red ; } tous les titres H1, H2, H3 seront en rouge Sélection contextuelle d application de style H3 A {color : blue } : les liens définies dans <H3>...<H3> seront en bleu Héritage des styles : <P class= titre1 > <H1> imbrication </H1> </P> les balises imbriquées dans des balises de niveau supérieur héritent du style défini dans ces balises Séries de balises TD+TD {background-color : yellow ;} = A partir de la deuxième cellule de chaque ligne, le fond est jaune. 32 / 36

33 Complé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 arrière-plan background-color : transparent/ rgb(0,0,0) couleur d arr. plan border : 1px é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 càd : début des mots en majuscules, tout en majuscules, tout en minuscules, et pas de transformation du texte. 33 / 36

34 Compléments sur les style Définition d un curseur pour un élément HTML : le curseur prend la forme mentionnée quand la souris passe la dessus : cursor : form où form peut être : wait : curseur en forme de sablier progress : curseur en forme de flèche avec sablier crosshair : curseur en forme de croix fine / 36

35 Compléments sur les styles Propriétés des liste list-style-type : pour les listes non numérotées : square/circle/disc pour les listes numéroté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

36 Compléments sur les styles Appliquer des styles à certains é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