Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

Chapitre	IV:	Les	feuilles	d...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

<STYLE type="text/css">
<!—...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

</HEAD>
<BODY>
...
<BALISE ...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

IV.4 Syntaxe
IV.4.1 Structu...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

p
{
text-align : justify;
c...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

<li class="truc">liste</li>...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

<li id="item2">est une</li>...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

IV.4.3 Sélecteurs complexes...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

a:active
{
text-decoration ...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

L'exemple précédent permet ...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

	Unités	relatives	de	longue...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

Les couleurs se codent de l...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

1.	le	modèle	de	boîte		
La ...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

TD5 : CSS
Exercice 1:
Ecrir...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

</HEAD>
<BODY>
<H1> Titre d...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

page.html
<HTML>
<HEAD>
<TI...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

Exercice 2: Mise en page av...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

<LINK REL="stylesheet" HREF...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

<LINK REL="stylesheet" HREF...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

Chapitre	5	:	CSS3	
Tags de ...
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

57
Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

Exemple de structure global...
Prochain SlideShare
Chargement dans…5
×

Programmation web1partie3

523 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
523
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
41
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Programmation web1partie3

  1. 1. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Chapitre IV: Les feuilles de style CSS IV.1 Introduction Le CSS (Cascading Style Sheets) est utilisé pour la mise en forme des pages web. Il consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi possible de créer un groupe de titres en police Arial, de couleur verte et en italique. Le but de CSS est de séparer les données de la mise en forme. Il permet d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style. Les spécifications des feuilles de style deviennent une recommandation du consortium W3C en décembre 1996 sous l'appellation CSS1 pour Cascading Style Sheets, level 1. Ce même niveau 1 a été révisé en janvier 1999. Entre-temps, ces spécifications ont été élargies sous la forme du CSS2 pour Cascading Style Sheets, level 2 en mai 1998. Elles précisent entre autres : • • • des styles différents pour les médias différents (écran, impression, synthétiseur de parole, braille...) ; les polices de caractères téléchargeables ; le positionnement des éléments HTML (appelé par ailleurs CSS-P). La dernière version de CSS est CSS3 qui est en cours de développement depuis 2010. IV.2 Niveaux d’insertion de CSS Le code CSS peut être placé à 4 endroits différents dans la page. • Interne : Dans la page HTML • Externe : Dans un fichier indépendant • Dans l'élément (balise) HTML lui-même • A partir d’un style importé IV.2.1 Dans le code HTML de la page Mettre le code CSS dans la page HTML, entre les deux balises <head> et </head> Une feuille globale va se déclarer dans la tête du document, entre les balises HEAD. Elle va s'appliquer globalement à toutes les balises du document qu'elle a défini. <HTML> <HEAD> 37
  2. 2. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <STYLE type="text/css"> <!—code css --> </STYLE> </HEAD> <BODY> • • La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style. L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css). IV.2.2 Dans un document séparé : fichier CSS Une feuille liée va se déclarer à part, dans un fichier avec une extension .css qui sera mis à côté des autres documents dans le répertoire du site web. Cette feuille de style sera valable pour toutes les pages du site qui l'appelleront dans les balises HEAD. C'est un outil très puissant pour uniformiser la mise en pages d'un grand nombre de documents. Principe : On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit « styles.css » qui contiendra toutes les feuilles de style. body {background-image: home.gif;} LI {font: 13px Verdana;} p {font: 14px Verdana; font-weight: bold;} H1 {font: 16px Arial;font-weight: bold;color=black;} H2 {font: 14px Arial;font-weight: bold;color=black;} Ensuite, on crée une page soit page.htm avec dans la <HEAD> un lien vers ce fichier CSS : <HTML> <HEAD> <LINK rel=stylesheet type="text/css" href="styles.css"> </HEAD> Commentaires : • • • • La balise <LINK> avertit le browser qu'il faudra réaliser un lien. L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de style externe. L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css). L'attribut classi&que de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier. IV.2.3 Dans la balise HTML Il possible de mettre un style directement dans une balise HTML <HTML> <HEAD> ... 38
  3. 3. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 </HEAD> <BODY> ... <BALISE Style="style:valeur;"> ... </BALISE> ... </BODY> </HTML> Exemple : <HTML> <BODY> <H1 style="font-family: </BODY> </HTML> Arial; font-style: italic"> blabla </H1> IV.2.4 Style importé Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @IMPORT immédiatement après la balise style : <HTML> <HEAD> <STYLE type="text/css"> <!-@IMPORT URL(url de la feuille à importer); Définition des styles du document; --> </STYLE> </HEAD> <BODY></BODY> </HTML> IV.3 Notion de feuille de style en cascade L’abréviation CSS signifie Cascading Style Sheet ou encore Feuille de style en cascade. Pourquoi « cascade » ? Ce mot « cascade » fait référence à la méthode de résolution des conflits : puisqu'on peut placer plusieurs feuilles de style dans un même document (en lien, dans le head, en ligne dans la balise) les instructions de style successives peuvent s'opposer. Les ordres de style arrivent donc « en cascade ». Comment résoudre les conflits ? Comme pour le HTML, le dernier qui parle a raison. On aura donc la hiérarchie : feuille de style extérieure << feuille de style dans le head << style en attribut dans la balise 39
  4. 4. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 IV.4 Syntaxe IV.4.1 Structure générale Construction d'une règle Une feuille de style est une suite de règles selon cette structure : selecteur { propriété : valeur } Une règle a deux parties : • Un sélecteur ; dans l'exemple suivant il s'agit de h2 ; • Une déclaration ; c'est une suite de paires propriété: valeur séparées par un point virgule, le tout placé entre accolades. Ici dans cet exemple il s'agit de {text-align: center ; color: black}. Exemple h2 { text-align : center; color : black; } Tous les titres de niveau 2 auront leur texte centré et de couleur noire. Commentaires Il est possible d'ajouter des commentaires dans une feuille de style. Une zone de commentaires commence par les caractères /* et se termine par les caractères */. Elle peut s'étendre sur plusieurs lignes. Par exemple : /* Mise en forme des éléments h2 */ h2 { text-align : center; color : black; } IV.4.2 Sélecteurs simples Balise Il s'agit du sélecteur le plus simple possible, où le sélecteur reprend le nom de l'élément auquel la propriété s'applique : 40
  5. 5. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 p { text-align : justify; color : black; } En utilisant l'attribut style, l'exemple précédent devient : <p style="text-align: center; color: black">(...)</p> Il est possible de grouper les balises à l'aide de virgules : h2, h3, ul { text-align : center; color : green; } Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes non ordonnées seront centrés et de couleur verte. Classe L'attribut class est un attribut qui peut apparaître dans n'importe quelle balise. Exemple : .truc { color : red; } .machin { color : blue; } Noter le point devant le sélecteur. <p class="truc">Ceci est un paragraphe d'introduction.</p> <table summary="Un tableau peu informatif" class="machin"> <tr> <td>Et voici</td> <td>un</td> <td class="truc">tableau</td> </tr> <tr class="truc"> <td>de deux lignes</td> <td>et</td> <td class="truc">trois colonnes</td> </tr> </table> <ol class="truc"> <li>Et ceci</li> <li class="machin">est une</li> 41
  6. 6. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <li class="truc">liste</li> </ol> Il est possible, également, de spécifier que certains éléments seulement d'une classe donnée soient concernés. Par exemple, le code suivant permet de sélectionner tous les éléments div de classe menu. S'il y a un élément p de classe menu, il ne sera pas concerné et conservera sa couleur de fond par défaut : div.menu { background-color : gray; } Il est également possible d'appliquer plusieurs classes à un élément. Ainsi, si dans la feuille de style on écrit... .appartient_a_dupont { color : red; } .vehicule { font-style : italic; } ... le code HTML <span class="vehicule appartient_a_dupont"> bicyclette</span> affichera le mot bicyclette en italique et en rouge. Identifiant L'attribut id est un attribut qui peut aussi apparaître dans n'importe quel élément. La très grande différence avec l'attribut class est qu'une valeur de id ne peut être prise qu'une seule fois dans toute la page Web. C'est un identifiant : par nature, sa valeur est unique. Exemple : <p id="monpar">Ceci est un paragraphe d'introduction.</p> <ol id="maliste"> <li>Et ceci</li> 42
  7. 7. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <li id="item2">est une</li> <li class="truc">liste<img src="images/chapeaurond.gif" alt="Vive la Bretagne!" height="20" width="40" id="monimage"></li> </ol> On peut alors associer plusieurs règles à chaque id de la manière suivante : #monpar, #monimage { color : red; border : solid 0.5em blue; } #liste1, #monimage { background-color : yellow; } #maliste { background-color : yellow; color : orange; } #item2 { font-variant : small-caps; font-style : oblique; } Classes universelles : balises DIV et SPAN en CSS Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises <SPAN> et <DIV> <SPAN> : La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec ID qu'avec CLASS. Sa syntaxe est la suivante : <SPAN class=Nom_de_la_classe> Texte </SPAN> <DIV> : Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise DIV s'applique à un bloc, c'est-à-dire à un ou plusieurs paragraphes. La syntaxe de la balise DIV est la suivante : <DIV class=important> paragraphes </DIV> 43
  8. 8. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 IV.4.3 Sélecteurs complexes Sélecteur contextuel Prenons un exemple : h2 em { color : blue; } Cette règle ne s'appliquera que sur le contenu des éléments em lorsqu'ils seront eux-mêmes à l'intérieur d'un titre de niveau 2 (h2). Autrement dit, la consigne s'applique aux éléments em dans le contexte d'un élément h2. Syntaxe : les sélecteurs simples sont séparés par des espaces. L'enchâssement est possible avec tous les types de sélecteurs, balise, identifiant, classe comme l'illustrent les exemples suivants : .copyright h4 { color : blue; } #toto b { font-size : large; } ul ul { list-style : lower-alpha; } Les regroupements (signifiés par le séparateur virgule) restent possibles : h1 b, h2 b, b em { color : yellow; } Pseudo-classes Nous allons prendre l'exemple des liens. Un lien peut être dans trois états différents : • • • actif (lors du clic de la souris) ; à visiter ; déjà visité. Pour les éléments a, on appelle pseudo-classes ces trois états possibles. Ce sont des classes prédéfinies. Voici un exemple : 44
  9. 9. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 a:active { text-decoration : overline; } a:link { color : blue; font-style : italic; } a:visited { color : green; font-weight : bold; } La syntaxe est donc [selecteur]:[pseudo-classe] {declaration} Une pseudo-classe intéressante est la pseudo-classe hover : elle permet d'affecter un style à un élément, lorsque celui-ci est survolé par la souris. Un usage classique consiste à désactiver le soulignement automatique des liens, qui est le comportement par défaut, et de ne le réactiver qu'au passage de la souris : a { text-decoration : none; } a:hover { text-decoration : underline; } Pseudo-éléments CSS1 • • • • • décrit plusieurs pseudo-éléments : first-line modifie le style de la première ligne d'un paragraphe. first-letter modifie le style de la première lettre d'une phrase. first-child modifie le style du premier élément-enfant du sélecteur courant. after modifie le style de ce qui suit l'élément. before modifie le style de ce qui précède l'élément. Les trois derniers ne sont pas supportés par Internet Explorer. Exemple : p:first-letter { color : red; font-size : 200%; font-weight : bold; } 45
  10. 10. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 L'exemple précédent permet de colorer en rouge, doubler la taille et mettre en gras la première lettre de tous les paragraphes. IV.4.4 Unités Syntaxe Il ne faut laisser aucun blanc entre le nombre et l'unité. Une longueur peut être précédée d'un signe + ou -. Unités absolues de longueur Unité Notation inch (pouce) in Conversion 1in=2,54cm centimètre cm millimètre mm point pt 1pt=1/72in=0,352778mm pica pc 1pc=12pt=4,233mm Table 1. Unités absolues. Exemples d'utilisation : h1 { margin : 0.5in; } h2 { line-height : 3cm; } h3 { word-spacing : 4mm; } h4 { font-size : 12pt; } h5 { font-size : 1pt; } Le point et le pica sont utilisés pour la taille des caractères. 46
  11. 11. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Unités relatives de longueur Unité Notation Em Em Conversion est la hauteur d'un caractère (si la hauteur d'un caractère est fixée par l'auteur à 10pt alors 1em=10pt, si elle est fixée à 12pt alors 1em=12pt). 1em xex height 1ex pixel 1pixel (picture element) : le plus petit élément sur un écran d'ordinateur. Cette unité dépend de l'écran et de son paramétrage. px est la taille de la lettre 'x' minuscule. Table 2. Unités relatives. Exemples d'utilisation : h1 { margin : 0.5em; } h2 { line-height : 1ex; } h3 { font-size : 15px; } Pourcentages C'est une fraction de la longueur d'un autre élément : largeur de l'écran, hauteur des caractères ou toute autre grandeur dépendant du contexte. Exemples d'utilisation : p { line-height : 120%; } td.gauche { width : 33%; } L'interligne des paragraphes vaut 120% de la hauteur des caractères, tandis que les cellules de classe gauche occuperont 33% de la largeur du tableau où elles se trouvent. IV.4.5 Couleurs 47
  12. 12. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Les couleurs se codent de la même manière qu'en HTML, mais il est également possible de spécifier explicitement le codage RGB : • • • • • une des seize couleurs standard : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. #rrggbb (par exemple, #00cc00). #rgb (par exemple, #0c0). rgb(x1,x2,x3), où x1, x2 et x3 sont des entiers compris entre 0 et 255 inclus (par exemple rgb(33,45,127)). rgb(x%,y%,z%) où x, y et z sont des nombres compris entre 0.0 et 100.0 inclus (par exemple rgb(56%,33%,0%)). IV.4 Mise en forme du texte IV.4.1 Quelques propriétés de mise en forme TEXTE font-family : la police (times, arial, helevetica …) font-size : (small, medium, large, x-large…) font-weight (normal, bold, 120%) font-variant : (normal, small-caps) color : couleur du texte (black, green, #00FF00) text-align: left, center ou right text-transform : none | capitalize | uppercase | lowercase ; FOND background-color : la couleur du fond (idem) Background-image : image de fond url("truc.jpg") BORDURES Border-style : solid, dotted, dashed, solid, none Border-width : largeur (1px par exemple) Border-color : red, #00FF00, … LISTES List-style-type : type de liste (disc, circle, square, decimal, lower-roman ...) list-style-image :image de liste list-style-position IV.4.2 Les « boîtes » 48
  13. 13. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 1. le modèle de boîte La recommandation CSS1 indique que tous les éléments HTML (sauf ceux qui ne figurent que par leurs adresses : images, son, objets multimédia en général, plug-in...) puissent être considérés comme des blocs rectangulaires. Ce bloc est constitué de plusieurs couches (en pelures d'oignon en quelque sorte) ; on a de l'intérieur vers l'extérieur : • • • • un contenu (content) une zone d'ajustement (padding) un encadrement (border) une marge (margin) Cette terminologie est décomposée selon le côté concerné : droite (right), gauche (left), dessus (top), dessous (bottom). Règles d'attribution Pour tous les éléments définis ci-dessus, une propriété définit son épaisseur, il s'agit : margin Padding border-width margin-top padding-top border-top-width margin-right padding-right border-right-width margin-bottom padding-bottom border-bottom-width margin-left padding-left border-left-width 49
  14. 14. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 TD5 : CSS Exercice 1: Ecrire le code de la page web suivante en utilisant : 1. une feuille de style interne 2. une feuille de style externe Correction 1.Feuille de style interne <HTML> <HEAD> <TITLE>Exercice CSS</TITLE> <STYLE TYPE="text/css"> BODY { url(image.gif) ; margin-left: 50px ; color: navy ; background: white font-family: Arial, Helvetica, sans-serif } A:link { color: red } A:active { color: maroon } A:visited { color: maroon } H1,H2,H3,H4 { text-align: center ; font-family: "Comic Sans MS", sans-serif ; font-size: large } H1 { text-align: center ; color: white ; background: navy } H2,H3,H4 { text-align: left ; color: navy ; background: white } TH { background: silver } TH,TD { font-family: Arial, Helvetica, sans-serif } PRE,TT { font-family: monospace ; color: blue ; font-weight:bold } </STYLE> 50
  15. 15. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 </HEAD> <BODY> <H1> Titre de niveau 1 </H1> <H2>Titre de niveau 2</H2> <UL> <LI>La couleur par defaut du texte est le bleu navy <LI>Les titres sont en police Comic sans Ms ou sans-serif <LI>Le texte est en police Arial ou helvetica sans-serif <LI>La page contient l'image "fond_spirale.gif"... <LI>Pour menager de la place à gauche, on définit une marge à gauche de 50 pixels <LI>Les liens <a href="page.html">pas encore visites </a>sont colorés en "red" et les liens <a href="page.html">deja visites </a>en "maroon" <LI><TT>Le texte en PRE ou TT sont en couleur blue et en gras</TT> </UL> <P> <TABLE ALIGN=center WIDTH=60% BORDER=1> <TR> <TH COLSPAN="2">Couleur de fond "silver"</TH> </TR> <TR> <TD>Texte en police sans-serif</TD> <TD>Texte en police sans-serif</TD> </TR> </TABLE> </BODY> 2.Une feuille de style externe Feuille.css BODY { url(image.gif) ; margin-left: 50px ; color: navy ; background: white font-family: Arial, Helvetica, sans-serif } A:link { color: red } A:active { color: maroon } A:visited { color: maroon } H1,H2,H3,H4 { text-align: center ; font-family: "Comic Sans MS", sans-serif ; font-size: large } H1 { text-align: center ; color: white ; background: navy } H2,H3,H4 { text-align: left ; color: navy ; background: white } TH { background: silver } TH,TD { font-family: Arial, Helvetica, sans-serif } PRE,TT { font-family: monospace ; color: blue ; font-weight:bold } 51
  16. 16. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 page.html <HTML> <HEAD> <TITLE>Exercice CSS</TITLE> <LINK REL="stylesheet" HREF="feuille_style.css" TYPE="text/css"> </HEAD> <BODY> <H1> Titre de niveau 1 </H1> <H2>Titre de niveau 2</H2> <UL> <LI>La couleur par defaut du texte est le bleu navy <LI>Les titres sont en police Comic sans Ms ou sans-serif <LI>Le texte est en police Arial ou helvetica sans-serif <LI>La page contient l'image "fond_spirale.gif"... <LI>Pour menager de la place à gauche, on définit une marge à gauche de 50 pixels <LI>Les liens <a href="css.html">pas encore visites </a>sont colorés en "red" et les liens <a href="css.html">deja visites </a>en "maroon" <LI><TT>Le texte en PRE ou TT sont en couleur blue et en gras</TT> </UL> <P> <TABLE ALIGN=center WIDTH=60% BORDER=1> <TR> <TH COLSPAN="2">Couleur de fond "silver"</TH> </TR> <TR> <TD>Texte en police sans-serif</TD> <TD>Texte en police sans-serif</TD> </TR> </TABLE> </BODY> </HTML> 52
  17. 17. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Exercice 2: Mise en page avec CSS Ecrire le code de la page web suivante en utilisant une feuille de style externe. Correction : Ex2.css div#bandeau { width:600px; height:50px; background-color:#00CCFF; } div#contenu { width:600px; height:400px; background-color:#FFCC00; } div#piedpage { width:600px; height:50px; background-color:#33FF99; clear:both; } div#menu { float:left; width:100px; height:400px; background-color:#FF6699; } div#menuhaut { width:100px; height:200px; background-color:#66CC33; } div#menubas { width:100px; height:200px; background-color:#CC99CC; } Ex2.HTML <html> <head> <title>Exercie 2 CSS</title> 53
  18. 18. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <LINK REL="stylesheet" HREF="ex2.css" TYPE="text/css"> </head> <body> <div id="bandeau">Ceci est le bandeau</div> <div id="menu"> <div id="menuhaut">Menu haut</div> <div id="menubas">Menu bas</div> </div> <div id="contenu">Ceci est le contenu</div> <div id="piedpage">Ceci est le pied de page</div> </body> </html> Exercice 3: Tableau avec CSS Ecrire le code du tableau suivant en utilisant le CSS Correction Ex3.css .Tableau span { display:inline; float:left; border:1px solid #FF6600; margin:0px; padding:3px; } .Tableau p { clear:left; margin:0px; padding:0px; height:100% !important; height:1em; } .Tableau p.legende {font-weight:bold} .Tableau span.col1 {width:70px} .Tableau span.col2 {width:120px} .Tableau span.col3 {width:90px} Ex2.html <html> <head> <title>Exercie 3 CSS</title> 54
  19. 19. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 <LINK REL="stylesheet" HREF="ex3.css" TYPE="text/css"> </head> <body> <div class="Tableau"> <p class="legende"> <span class="col1">L&eacute;gende 1</span> <span class="col2">L&eacute;gende 2</span> <span class="col3">L&eacute;gende 3</span> </p> <p> <span class="col1">Case 1.1</span> <span class="col2">Case 1.2</span> <span class="col3">Case 1.3</span> </p> <p> <span class="col1">Case 2.1</span> <span class="col2">Case 2.2</span> <span class="col3">Case 2.3</span> </p> </div> </body> </html> 55
  20. 20. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Chapitre 5 : CSS3 Tags de structuration: Eléments : • Les éléments section, article, nav, aside, header, footer sont des éléments de structure, plus précis que <span> ou <div> • Etablis à partir de statistiques d’utilisation des ids et classes les plus populaires du web, – <div class="aside"> devient <aside> pour les menus sur le côté • En devenant standards, on peut plus facilement leur appliquer une CSS standard, partageable, • Les navigateurs peuvent les reconnaître et proposer un rendu spécifique, • Il devient plus simple de générer une table des matières, par exemple 56
  21. 21. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 57
  22. 22. Matière : Programmation Web1 Enseignante : Ouroud HENIA ISET Bizerte 2013/2014 Classe : TI13 Exemple de structure globale <header> <h1>Nouveaux éléments de section, article, header, footer, aside, nav</h1> </header> <!-- nav principale --> <nav>nav <ul> <li><a href="#">Rubrique 1</a></li> <li><a href="#">Rubrique 2</a></li> <li><a href="#">Rubrique 3</a></li> <li><a href="#">Rubrique 4</a></li> </ul> </nav> <!-- Main --> <section id="main"> <article> .. </article> </section> Chaque article peut avoir sa propre structures <article> <header> <h1>Titre de l'article</h1> <p>Auteur : bidule</p> </header> <nav> <ul> <li><a href="index.html">Page d'accueil</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <p>Contenu de l'article</p> … <footer> <p>Posté par Simon, le <time datetime="2012-02-02">2 février 2012</time> </p> </footer> </article> 58

×