- Les balises seront les mêmes qu'en html sauf que...
- Elles sont écrites en minuscules...
- Chaque balise ouverte doit être fermée ...
- Pour celles qui n'ont pas de balise fermante ; elle sera crée : par exemple <br> deviens <br />
- Code: Tout sélectionner
<img src="image.png" width="750" height="100" alt="logo">
- Code: Tout sélectionner
<img src="image.png" width="750" height="100" alt="logo" />.
- chaque balise devra être fermée dans l'ordre ....Exemple
- Code: Tout sélectionner
<div id="container" >
<div id="entete">
<div id="menuhoriz">
</div>
</div>
</div>
ceci n'est pas valide....et devra être remplacé par
- Code: Tout sélectionner
<div id="container" >
<div id="entete">
</div>
<div id="menuhoriz">
</div>
</div>
Il y a bien d'autres régles je vous renvoie pour cela a cet article d'Openweb http://openweb.eu.org/articles/xhtml_une_heure/
je démarre sur des bases qui excluent la moindre mise en forme dans la page html....toute mise en forme sera sur la feuille css.
La mise en forme ne passera pas par des tableaux mais par des "boites" chaque zone de la page sera determinée par une identité...boddy, container, entete, menuhoriz, menuverti, centre, pied. Ceci me donnera un entête, deux menus (vertical et horizontal),un centre pour le texte , et le pied de page le tout sera a l'intérieur d'un element container.On choisit les identitées " id"( -># dans la feuille de style ) quand la"chose" est unique sinon on définit par un identifiant "class" (-> . dans la feuille de style )pour le moment la feuille de style ne comporte que des " id "
Voila a quoi ressemble le code de la page.
- Code: Tout sélectionner
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" /> <!-- ceci est l'appel de la feuille de style -->
<title>Site modèle
</title>
</head>
<body>
<div id="container" >
<div id="entete">Le Header
</div>
<div id="menuhoriz">ici sera le menu horizontal
</div>
<div id="menuverti">là ce sera le menu vertical
</div>
<div id="centre">La cigale, ayant chanté
Tout l?été,
Se trouva fort dépourvue
Quand la bise fut venue.
Pas un seul petit morceau
De mouche ou de vermisseau
Elle alla crier famine
Chez la fourmi sa voisine,
La priant de lui prêter
Quelque grain pour subsister
Jusqu?à la saison nouvelle
« Je vous paierai, lui dit-elle,
Avant l?oût, foi d?animal,
Intérêt et principal. »
La fourmi n?est pas prêteuse ;
C?est là son moindre défaut.
« Que faisiez-vous au temps chaud ?
Dit-elle à cette emprunteuse.
? Nuit et jour à tout venant
Je chantais, ne vous déplaise.
? Vous chantiez ? j?en suis fort aise.
Eh bien : dansez maintenant. »
</div>
<div id="pied">Et le pied de page
</div>
</div>
</body>
</html>
Maintenant la feuille de css.
- Code: Tout sélectionner
body {background:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 100%; /* taille des polices */
color: black;
margin: 0;
padding: 0;
}
#container {margin: 1% 1% 1% 1% ;
position: absolute;
width: 98%;
background:Black;
}
#entete {
margin: 1%; /* marges externes */
height: 100px; /* hauteur */
background:Aqua ; /* couleur du fond */
}
#menuhoriz {
margin:1%;
height: 30px;
background:Silver;
}
#menuverti {background:gray;
position:absolute;
left:0; /* positionne a gauche.. */
width: 18%; /* largeur de la boite */
margin: 1%; /* marges externes */
min-height:200px; /* hauteur minimum pour "déplier" la boite*/
}
#centre {background:White;
margin:1% 1% 1% 20%;
min-height:200px;
}
#pied {text-align: center;
margin: 1%;
height: 60px;
background:Aqua;
}
Voila une page de base...les dimensions données en % permettent d'avoir l'élasticitée pour passer en toute résolution . Je sais c'est pas beau mais pour commencer cela permet de définir les zones. si je n'avais pas mis de marges tout le container serait rempli et on ne verrait plus la partie noire...cela dépend de ce que l'on veut faire...
pour tester télèchargez le dossier exemple http://home.tele2.fr/agnesD/Exemple.zip et amusez vous a modifier mais testez toujours dans des navigateurs différents...(IE etant un peu particulier les résultats sont parfois surprenants...)
Suite au prochain numéro (peut être pas tous les jours... )
J'éspére avoir été claire....... sinon dites le moi...
A+
AgnesD a écrit:
[center]MISE EN FORME DU TEXTE[/center]
Pour la mise en forme du texte c'est comme pour le html avec les balises <br /> <p></p> les balises de titre....
le menu vertical est organisé en liste et le menu horizontal est une suite de liens (ce n'est pas trés correct cela serait mieux organisé en liste mais provoquait trop de bugs....sous IE, que je ne sais pas corriger.)
pour l'exemple nous allons définir plusieurs classes pour les paragraphes...et les titres
et mettre en forme le texte; la mise en forme des paragraphes comprends des classes "rouge", "gras", et "rouge gras" (on peu en effet combiner plusieurs classes entre elles.
- Code: Tout sélectionner
<div id="centre">
<h1>FABLES</h1>
<h2>La cigale et la fourmi</h2>
<p>La cigale, ayant chanté<br /><!-- paragraphe de base -->
Tout l?été,<br />
Se trouva fort dépourvue<br />
Quand la bise fut venue.</p>
<p class="rouge">Pas un seul petit morceau<br /><!-- style rouge -->
De mouche ou de vermisseau<br />
Elle alla crier famine<br />
Chez la fourmi sa voisine,<br />
La priant de lui prêter<br />
Quelque grain pour subsister<br />
Jusqu?à la saison nouvelle</p>
<p class="gras">« Je vous paierai, lui dit-elle,<br /> <!-- style gras -->
Avant l?oût, foi d?animal,<br />
Intérêt et principal. »<br />
La fourmi n?est pas prêteuse ;<br />
C?est là son moindre défaut.<br />
« Que faisiez-vous au temps chaud ?<br />
Dit-elle à cette emprunteuse.</p>
<p class="gras rouge">? Nuit et jour à tout venant<br /><!--style gras et rouge -->
Je chantais, ne vous déplaise.<br />
? Vous chantiez ? j?en suis fort aise.<br />
Eh bien : dansez maintenant. »</p>
<h3>Jean de la Fontaine</h3>
</div>
Je met en ligne un zip qui prends en compte ces nouveaux paramétres, en gardant la feuille de style de base.(vous la completerez au fur et a mesure pour voir. http://home.tele2.fr/agnesD/Exemple.zip
Maintenant la description des styles de titres et paragraphes (a copier coller dans la feuille de style)
- Code: Tout sélectionner
H1 {
font-size: 130% bold;color: #993333;
}
H2, {font-size: 120%;
}
H3{font:110% ;color:#cccccc;
}
P {
color: #000000; font:80%;
}
.rouge {
color: #993333; /*polices en rouge */
}
.gras {
font-weight: bold; /*polices en gras */
}
[center]BORDER MARGIN PADDING[/center]
Border
Si on désire donner une bordure a sa boite...On a le choix entre plusieurs attributs....Taille couleur et style
les styles sont : par defaut "solid" il y a aussi "inset","outset","dashed","double"...
Margin
Les marges sont les espaces extérieurs des boites on peut les donner en % ou en px .
Padding
c'est la marge interne de la boite idem que pour l'attribu margin (IE ne comprends pas les padding de la meme façon la plupart des autres navigateurs ce qui nécéssite parfois quelques adaptations....)
Comme on peut le voir le texte collé contre les cadres, ce n'est pas terrible donc nous allons utiliser padding pour l'écarter des bords...et mettre une bordure plus originale.
- Code: Tout sélectionner
#centre {background:White;
margin:1% 1% 1% 20%; /* 1% haut, 1% droite, 1% bas, 20%gaughe */
min-height:200px;
border:5px dashed #cccccc; /* bordure pointillé grise */
padding:20px 70px 20px 30px; /*marges internes */
}
voila l'élèment #centre un peu plus présentable vous n'avez plus qu'a le remplacer dans la feuille de style de l'exemple ...
on peut travailler un peu plus les autres élements
- Code: Tout sélectionner
#entete {font: 300% bold; /* taille du titre + caractéres gras */
color: #cccccc;/* couleur grise */
text-align: center;/* centré */
margin: 1%;
height: 100px;
background:Aqua ;
border:2px dotted #000000; /* bordure petits pointillés noirs */
}
#pied {
margin: 1%;
height: 60px;
background:Aqua;
border:2px dotted #000000; /* bordure petits pointillés noirs */
}
[center]BACKGROUND[/center]
Les fonds de chaque boite peuvent être traités en couleurs ou en images....(le zip contient les images que j'utilise pour l'exemple.)
Cela se traduit par
- Code: Tout sélectionner
background-color:#cccccc;
pour un fond gris ou par
- Code: Tout sélectionner
background-image:url("image.png");
pour une image. (les images pourront être ajustées répétées....les possibilités sont multiples.)
Si vous définissez plusieurs fois la même propriété dans la feuille de style, une classe ou un ID ce sera la derniére mention qui sera appliquée.Dans l'exemple suivant si vous voulez avoir l'image de fond il faudra supprimer la ligne "background: aqua;" ou la positionner avant "background-image:url("images/entete.png"); " ainsi les navigateurs bloquant les images pourront tout de même avoir un fond coloré...
- Code: Tout sélectionner
#entete {font: 300% bold; /* grande police noire "gras" */
background-image:url("images/entete.png"); /* image de fond" */
background:Aqua;
color: #000000;
text-align: center;
margin: 1%;
height: 100px;
border:2px dotted #000000; /* bordure petits pointillés noirs */
}
Voila les codes qui remplacent les couleurs par des images de fond (remplacez les anciens par copier coller.)
- Code: Tout sélectionner
#entete {font: 400% bold;background-image:url("images/entete.png");
color: #000000;
text-align: center;
margin: 1%;
height: 100px;
border:2px dotted #000000; /* bordure petits pointillés noirs */
}
#menuhoriz {background-image:url("images/menuh.png");
margin:1%;
height: 30px;
}
#menuverti {background-image:url(images/menuv.png);
position:absolute;
left:0;
width: 18%;
margin: 1%;
min-height:200px;
}
#centre {background-image:url(images/centre.png);
margin:1% 1% 1% 20%;
min-height:200px;
border:5px dashed #cccccc;/* bordure pointillé grise */
padding:20px 70px 20px 70px;/*marges internes */
}
#pied {background-image:url("images/pied.png");
margin: 1%;
height: 60px;
la prochaine fois les liens et les listes.
la suite du tuto proposé par Agnes edité a sa demande le 10 avril ( florian )
LES LIENS
le lien -> a:link
le lien visité -> a:visited
le lien survolé -> a:hover
le lien actif -> a:active
Voila les quatres états des liens a chaque état on peut faire correspondre un aspect différent.
On peut créer des classes afin de leur donner une apparence différente...(on choisit des class et pas des ID car il y aura généralement plusieurs liens de chaque "classe" dans la page.)
pour l'exemple on fera deux types de liens:
On aura les liens normaux
et les liens ".ci"
- Code: Tout sélectionner
a:link {color:#000000; text-decoration:none;} /* texte noir pas de decoration */
a:visited {color:#000000; text-decoration:underline;}/* texte noir sousligne */
a:hover {color:#FF0066;text-decoration:none; font-weight:bold; }/* texte bordeaux souigne "gras"*/
a:active {color:#990066; text-decoration:underline;}/* texte rouge souligne*/
On ne va definir que deux états de liens pour la classe ".ci" les liens survolés et les liens actifs.
- Code: Tout sélectionner
a.ci:hover {color:#66FF66;text-decoration:none; font-weight:bold;}/* texte vert "gras"*/
a.ci:active {color:#3333FF; text-decoration:underline;} /* texte bleu souligné */
Il existe des tas de variantes , si un état n'est pas defini , c'est celui qui l'était précédement qui le remplace...
LE MENU HORIZONTAL
Code xhtml pour le menu horizontal ce menu est crée sur une structure de liste.( L'attribut title permet de créer une infobulle pour préciser le lien)
- Code: Tout sélectionner
<div id="menuhoriz">
<ul class="horiz" >
<li><a href="" title="vous êtes a la rubrique 1"> rubrique 1 </a></li>
<li><a href="" title="rubrique 2"> rubrique 2 </a></li>
<li><a href="" title="rubrique 3" > rubrique 3 </a></li>
<li><a href="" title="rubrique 4" > rubrique 4 </a></li>
<li><a href="" title="rubrique 5" > rubrique 5 </a></li>
</ul>
Voila le css qui sert a définir le menu horizontal.
- Code: Tout sélectionner
#menuhoriz {background-image:url("images/menuh.png");/*fond de la barre en image */
margin:1%;/*marges extérieures */
height: 34px;/*hauteur de la barre en pixels a mettre en rapport avec la taille l'image que vous utiliserez */
}
#menuhoriz li {
display: inline; /* indique a la liste la mise en ligne sans cela vous aurez un menu vertical */
}
Et pour la Création de "boutons" décorés pour les liens ....la suite
- Code: Tout sélectionner
.horiz a {display: block;
background-color: #cccccc;
border: solid 1px;/* Enlever si vous voulez...aide a bien définir les contours de boutons pour les positionner. */
text-align: center;/*position du texte texte dans les boutons */
text-decoration: none;
width: 165px;/* longeur des boutons grande longeur car je triche n'ayant pas réussi a les centrer proprement... */
height: 28px;/* hauteur des boutons */
line-height: 25px;/* positionne le texte...en hauteur effet mystérieux pour moi je procéde par tatonements. */
float: left; /* position des boutons liens gauche la définition du type de liste: #menuhoriz li {display: inline;} crée l'alignement des blocks float left vers la gauche*/
margin: 2px 4px;
color: #000000;
}
.horiz a:hover { background-color: #ffffff;/* couleur blanche de fond au survol du bouton. */
color: #000000;
}
Si vous désirez mettre des images a la place de la couleur il faudra remplacer dans .horiz a
- Code: Tout sélectionner
background-color: #cccccc;
par
- Code: Tout sélectionner
background-image:url("images/bouton.png");
et de faire de même dans .horiz a:hover en remplacant
- Code: Tout sélectionner
background-color: #ffffff;
par
- Code: Tout sélectionner
background-image:url("images/boutonb.png")
vous pouvez définir des classes pour chaque bouton et les combiner entre elles ; utiliser des images entiéres au lieu de tranches la différence sera dans les paramêtres de taille, de padding et margin...
J'ai modifié le fichier d'Exemples vous pouvez le télécharger... a nouveau...
http://home.tele2.fr/agnesD/Exemple.zip
(désolée mais c'est pas évident de tout prévoir dés le début)
Voila le css final comportant toutes les modifications d'aujourd'hui.
- Code: Tout sélectionner
#menuhoriz {background-image:url("images/menuh.png");
margin:1%;
height: 34px;
}
#menuhoriz li {
display: inline;
}
a:link {color:#000000; text-decoration:none;} /* texte noir pas de decoration */
a:visited {color:#000000; text-decoration:underline;}/* texte noir sousligne */
a:hover {color:#FF0066;text-decoration:none; font-weight:bold; }/* texte bordeaux souigne "gras"*/
a:active {color:#990066; text-decoration:underline;}/* texte rouge souligne*/
a.ci:hover {color:#66FF66;text-decoration:none; font-weight:bold;}/* texte vert "gras"*/
a.ci:active {color:#3333FF; text-decoration:underline;} /* texte bleu souligné */
.horiz a {display: block;
background-image:url("images/bouton.png");
border: solid 1px;
text-align: center;
text-decoration: none;
width: 165px;
height: 28px;
line-height: 25px;
float: left;
margin: 2px 4px;
color: #000000;
}
.horiz a:hover {background-image:url("images/boutonb.png");
color: #000000;
text-decoration: none;
}
la prochaine fois on verra le menu vertical, et les finitions...[/quote]