<!DOCTYPE html PUBLIC "-//W3 //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>Titre du site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
</head>
<body>
<h1 id="haut">Titre du site</h1>
<p>Slogan du site</p>
<h2>Menu</h2>
<a href="" title="">Lien n°1</a> |
<a href="" title="">Lien n°2</a> |
<a href="" title="">Lien n°2</a>
<h2>Titre n°1</h2>
<p>Paragraphe n°1</p>
<h2>Titre n°2</h2>
<p>Paragraphe n°2</p>
<p>Copyright - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3 //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>Les plantes caaarnivores</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
</head>
<body>
<h1 id="haut">Les plantes caaarnivores</h1>
<p>Parce que la nature aussi est cruelle</p>
<h2>Menu</h2>
<a href="accueil.html" title="Accueil de Caaarnivores">Accueil</a> |
<a href="lexique.html" title="Lexique sur les plantes carnivores">Lexique</a> |
<a href="livreOr.html" title="Livre d'or pour laisser vos impressions">Livre d'or</a>
<h2>Mais pourquoi caaarnivores ?</h2>
<p>Non pas à nous, Éternel, non pas à nous, mais à ton nom donne gloire, a cause de ta bonté, à cause de ta fidélité ! Pourquoi les nations diraient-elles : où donc est leur Dieu ? Notre Dieu est au ciel, il fait tout ce qu'il veut. Leurs idoles sont de l'argent et de l'or, elles sont l'ouvrage de la main des hommes. Elles ont une bouche et ne parlent point, elles ont des yeux et ne voient point, elles ont des oreilles et n'entendent point, elles ont un nez et ne sentent point, elles ont des mains et ne touchent point, des pieds et ne marchent point, elles ne produisent aucun son dans leur gosier. Ils leur ressemblent, ceux qui les fabriquent, tous ceux qui se confient en elles. Israël, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Maison d'Aaron, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Vous qui craignez l'Éternel, confiez-vous en l'Éternel ! Il est leur secours et leur bouclier. L'Éternel se souvient de nous : il bénira, il bénira la maison d'Israël, il bénira la maison d'Aaron, il bénira ceux qui craignent l'Éternel, les petits et les grands ; l'Éternel vous multipliera ses faveurs, a vous et à vos enfants. Soyez bénis par l'Éternel, qui a fait les cieux et la terre ! Les cieux sont les cieux de l'Éternel, mais il a donné la terre aux fils de l'homme. Ce ne sont pas les morts qui célèbrent l'Éternel, ce n'est aucun de ceux qui descendent dans le lieu du silence ; mais nous, nous bénirons l'Éternel, dès maintenant et à jamais. Louez l'Éternel !</p>
<h2>Je peux participer ?</h2>
<p>Louez l'Éternel, car il est bon, car sa miséricorde dure à toujours ! Louez le Dieu des Dieux, car sa miséricorde dure à toujours ! Louez le Seigneur des seigneurs, car sa miséricorde dure à toujours ! Celui qui seul fait de grands prodiges, car sa miséricorde dure à toujours ! Celui qui a fait les cieux avec intelligence, car sa miséricorde dure à toujours ! Celui qui a étendu la terre sur les eaux, car sa miséricorde dure à toujours ! Celui qui a fait les grands luminaires, car sa miséricorde dure à toujours ! Le soleil pour présider au jour, car sa miséricorde dure à toujours ! La lune et les étoiles pour présider à la nuit, car sa miséricorde dure à toujours ! Celui qui frappa les Égyptiens dans leurs premiers-nés, car sa miséricorde dure à toujours ! Et fit sortir Israël du milieu d'eux, car sa miséricorde dure à toujours ! A main forte et à bras étendu, car sa miséricorde dure à toujours ! Celui qui coupa en deux la mer Rouge, car sa miséricorde dure à toujours ! Qui fit passer Israël au milieu d'elle, car sa miséricorde dure à toujours ! Et précipita Pharaon et son armée dans la mer Rouge, car sa miséricorde dure à toujours ! Celui qui conduisit son peuple dans le désert, car sa miséricorde dure à toujours ! Celui qui frappa de grands rois, car sa miséricorde dure à toujours ! Qui tua des rois puissants, car sa miséricorde dure à toujours ! Sihon, roi des Amoréens, car sa miséricorde dure à toujours ! Et Og, roi de Basan, car sa miséricorde dure à toujours ! Et donna leur pays en héritage, car sa miséricorde dure à toujours ! En héritage à Israël, son serviteur, car sa miséricorde dure à toujours ! Celui qui se souvint de nous quand nous étions humiliés, car sa miséricorde dure à toujours ! Et nous délivra de nos oppresseurs, car sa miséricorde dure à toujours ! Celui qui donne la nourriture à toute chair, car sa miséricorde dure à toujours ! Louez le Dieu des cieux, car sa miséricorde dure à toujours !</p>
<p>Copyright Caaarnivore - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>
</body>
</html>
href
pour préciser un lien hypertexte, ou un attribut title
pour préciser un titre, on va maintenant se servir de l'attribut style
pour appliquer du code CSS à une balise.
<p>
:
<p style="Mon code CSS">
Je lève mes yeux vers les montagnes... D'où me viendra le secours ? Le secours me vient de l'Éternel, qui a fait les cieux et la terre. Il ne permettra point que ton pied chancelle ; celui qui te garde ne sommeillera point.
</p>
style
dans toutes les balises que l'on a vu précédemment.
<head></head>
à l'aide de la balise <style>
. Tout ce qui se situe entre <style>
et </style>
sera considéré et interprété comme du code CSS.
<!DOCTYPE html PUBLIC "-//W3 //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>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
<!--
Mon code CSS
-->
</style>
</head>
<body>
...
<!-- -->
pour éviter que les très vieux navigateurs (qui n'interprètent pas le CSS) n'affichent bêtement le code sur la page sans l'interpréter.font
et des attributs align
, color
, ... pour faire le design d'un site Internet. Et on galérait ! Jusqu'à ce que l'on sépare contenu et forme...@charset "iso-8859-1";
/* Auteurs : Flan, Barth, Blouhibou, BN, Yoshi */
/* Date de création : 30/06/07 */
/* Balises générales */
body {
margin:0px;
font-family:Tahoma, Verdana, Arial, sans-serif;
font-size:0.8em;
}
a {
color:#4EAC40;
font-weight:bold;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a img {
border:0 none;
}
img.email {
position:relative;
top:4px;
}
@charset "iso-8859-15";
/* Auteur : BN */
/* Date de création : 12/01/09 */
import
des CSS. C'est parfois utile si vos fichiers CSS sont très volumineux et que vous souhaitez les partager en plusieurs petits morceaux.
@import url(nomDuFichierCSSAImporter.css);
<link>
dans notre page Web :
<link rel="stylesheet" type="text/css" media="screen" title="Titre du design" href="nomFichierCSS.css" />
href
et title
(que vous connaissez déjà) et media
(qui permet de préciser pour quel type d'affichage s'applique le fichier CSS : screen
pour un affichage à l'écran, print
pour l'impression... J'y reviendrai dans un autre chapitre.
@charset "iso-8859-15";
/* Auteur : BN */
/* Date de création : 12/01/09 */
balise { /* Ceci est un commentaire CSS */
propriétéCSS: valeur1;
propriétéCSS: valeur2;
...
}
<link rel="stylesheet" type="text/css" media="screen" title="Titre du design" href="nomFichierCSS.css" />
<p style="propriétéCSS: valeur1; propriétéCSS: valeur2;"></p>
<style type="text/css">
<!--
balise { /* Ceci est un commentaire CSS */
propriétéCSS: valeur1;
propriétéCSS: valeur2;
...
}
-->
</style>
<p>
, on écrira dans notre fichier CSS :
p {
text-align: center;
}
<span>
:
span {
text-decoration: line-through;
}
<div>
:
div {
float: right;
border: 1px solid black;
width: 50%;
}
<p><span>Rayez donc cette phrase</span>, et passons à la suite...</p>
<div>Louez l'Éternel ! Heureux l'homme qui craint l'Éternel, qui trouve un grand plaisir à ses commandements. Sa postérité sera puissante sur la terre, la génération des hommes droits sera bénie.</div>
<p>Il a dans sa maison bien-être et richesse, et sa justice subsiste à jamais. La lumière se lève dans les ténèbres pour les hommes droits, pour celui qui est miséricorDieux, compatissant et juste. Heureux l'homme qui exerce la miséricorde et qui prête.</p>
balise { /* Ceci est un commentaire */
propriétéCSS: valeur1;
propriétéCSS: valeur2;
...
}
<p>
, rayer toutes vos balises <span>
, et tous vos <div>
se positionneront à droite. Et ce n'est pas toujours ce que vous voulez faire. Selon les cas vous allez vouloir appliquer un design sur une seule occurrence d'une balise, sur un petit groupe de balises, ou sur toutes les balises. Et c'est pour cela que l'on va se servir des attributs class
et id
de l'XHTML.
class
et id
class
et id
pour appliquer un design sur une ou plusieurs balises. Il suffit de connaître la bonne syntaxe.
class
.
<p class="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<p class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</p>
p.entoure {
border: 1px solid black;
}
p
ayant pour class "entoure". Le nom donné à la class
n'a pas d'importance, cela dit, il ne doit pas contenir d'espace, évitez les caractères accentués de préférence, et, pour la compréhension, il est bon d'utiliser un nom correspondant à l'utilisation que l'on va en faire.
p
dans le fichier CSS et dans ce cas, cela fonctionnerait pour toutes les balises ayant pour class
"entoure". Le même exemple modifié :
<p class="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<div class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</div>
.entoure {
border: 1px solid black;
}
class
dans un seul attribut class
, il suffit de les séparer par des espaces.
<p class="entoure align">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<div class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</div>
.entoure {
border: 1px solid black;
}
.align {
text-align: center;
}
id
et en remplaçant le point (.) par un dièse (#). A noter que la valeur d'un id ne peut commencer par un chiffre.
<p id="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
p#entoure { /* Ou #entoure directement */
border: 1px solid black;
}
class
et id
! Un id
est unique, deux balises d'une même page ne pourront donc pas avoir le même attribut id
. Par contre, une même class
peut être commune à autant de balises que l'on veut.
id
pour séparer les grandes parties d'une page (par exemple : header, corps, menu, footer) et class
pour le reste.
balise { /* Ceci est un commentaire */
propriétéCSS: valeur1;
propriétéCSS: valeur2;
...
}
id
:
balise#id { /* Ou #id directement */
propriétéCSS: valeur1;
propriétéCSS: valeur2;
...
}
id
est unique.
id
ne peut commencer par un chiffre et ne doit pas contenir d'espace. De manière générale, évitez les caractères accentués.
id
permet aussi d'utiliser des ancres. (voir le chapitre 3)class
:
balise.class { /* Ou .class directement */
propriétéCSS: valeur1;
propriétéCSS: valeur2;
...
}
class
ne doit pas contenir d'espace, et de manière générale, évitez les caractères accentués.
class
pour une même balise dans le XHTML : class=\"class1 class2 class3 ...\"
.tout va aller très vite, je ne parlais pas de l'écriture des prochains chapitres hein
yo proclame : Yo yo Hier, 20h54 via Résumé - Le Médecin Malgrè ...
7 game colin kaepernick san francisco 49ers jersey team road two tone griffonne :
<a href="http://www.zrdcwz.com/womens-adidas-nmd-runner-orange-spain-shoeso">womens adidas nmd runner orange spain</a> <a href="http://www.adamkhadaroo.com/hommes-asics-gel-kayano-21-argent-or-obuvb">hommes asics gel kayano 21 argent or</a> <a href="http://www.kelebekotel.com/oakley-polarized-deviation-sunglasses-price-sunglassesg">oakley polarized deviation sunglasses price</a> <a href="http://www.massagelizard.com/cap-la-new-era-hats">cap la new era</a> <a href="http://www.neodipol.com/vibram-fivefingers-bikila-purple-red-sportsa">vibram fivefingers bikila purple red</a> <a href="http://www.mbcphila.com/air-yeezy-ii-2-sp-max-90-kvinders-hvid-lyser%C3%B8d-schuhee">air yeezy ii 2 sp max 90 kvinders hvid lyser?d</a>
<a href="http://www.meranflora.com/7-game-colin-kaepernick-san-francisco-49ers-jersey-team-road-two-tone-nfle" >7 game colin kaepernick san francisco 49ers jersey team road two tone</a> 7 game colin kaepernick san francisco 49ers jersey team road two tone
Le 13 février, 18h33
eva scribouille : Qu el qu un a un resume sur le voyage de mr perrichon ? Le 11 février, 18h38 via Fiches sur les personnages ...
evalol déclare : 1a2z Le 11 février, 18h36 via Résumé - Les Fourberies De ...
sysy s'exclame : Quelqun a un resume des evenements importants ds bel ami? Le 11 février, 1h38 via Fiches sur les personnages ...
jojolerigolo tergiverse : Qui est a Léon Blum Le 10 février, 18h00 via Politique d'accessibilité
tom s'exclame : Bonjour Le 09 février, 13h39 via Résumé scène par scène - Le...
dams chuchote : Et dams lithopedion Le 02 février, 11h08 via Résumé scène par scène - Le...
dams écrit : Qui et votre rapeure prefere ou chanteure moi DAMSO DAMSO DAMSO DAMSO DAMSO c'est cqfd !! Le 02 février, 11h07 via Résumé scène par scène - Le...
dams dit : Bonjour Le 02 février, 11h05 via Résumé scène par scène - Le...
dams déclame : Elle et bien mais c'est notre prof de francais quoi qui nous demande de la faire Le 02 février, 11h05 via Résumé scène par scène - Le...
Laura.lly gribouille : BONJOUR Le 01 février, 21h00 via Résumé scène par scène - Le...
juliaaaaaa griffonne : HEYYYY!!Vous allez bien? Le 31 janvier, 18h47 via Résumé scène par scène - Le...
maelys griffonne : Le cid en soit n est pas si mal c'est juste qu il est compliqué a comprendre j ai un oral a faire devant toute ma classe et j ai a peux pres compris Le 31 janvier, 16h11 via Résumé scène par scène - Le...
leane écrit : Et le je travail sur le cid je comprend rien sa me soule Le 30 janvier, 14h51 via Résumé scène par scène - Le...
leane dit : Moi jai fait les fourberie de scapin lannee derniere quand jetais en 5eme Le 30 janvier, 14h51 via Résumé scène par scène - Le...
Charlienette déclare : Nan .. je hurle la Le 30 janvier, 9h58 via Résumé - Les Fourberies De ...
Charlienette chuchote : Je murmure pas ! Le 30 janvier, 9h58 via Résumé - Les Fourberies De ...
Charlienette murmure : JE l'ai demain Le 30 janvier, 9h58 via Résumé - Les Fourberies De ...
Charlienette griffonne : Vous avez déjà fait un cibtrole sur les fourberies de scapin acte 2 ? Le 30 janvier, 9h58 via Résumé - Les Fourberies De ...
Charlienette déclame : Coucou Le 30 janvier, 9h57 via Résumé - Les Fourberies De ...
lkjhgfds chuchote : Coucou Le 28 janvier, 20h43 via Résumé - Le Médecin Malgrè ...
kikoudu73 écrit : Octogone Le 28 janvier, 14h30 via Fiches sur les personnages ...
kikoudu73 tergiverse : Avec ta region perdue Le 28 janvier, 14h29 via Fiches sur les personnages ...
bobby dit : Mairci bocou se cour de francé ma biain édé.2 + javé pa lu le livreu Le 28 janvier, 13h12 via Fiches sur les personnages ...
hghyfrfde scribouille : Lkjugtrdf Le 27 janvier, 12h16 via Résumé - Les Fourberies De ...
youyou déclare : Champs requis Le 06 janvier, 20h33 via Français
Samantha déclare : C'est tres simple Le 06 janvier, 17h51 via Résumé scène par scène - Le...
Samantha dit : CC Le 06 janvier, 17h51 via Résumé scène par scène - Le...
bande de ouff déclare : Ou vous étè vivant Le 06 janvier, 16h38 via Résumé : Le Tartuffe de Mol...
bande de ouff chuchote : Yo bande de ouff Le 06 janvier, 16h35 via Résumé : Le Tartuffe de Mol...
LE BG griffonne : HELLO MA MAN Le 04 janvier, 7h18 via Résumé scène par scène - Le...
. gribouille : ; Le 02 janvier, 19h37 via Résumé : Le Mariage de Figa...
loo griffonne : Looo Le 02 janvier, 19h18 via Les avantages et les risque...
aaaaa murmure : Cacas Le 02 janvier, 13h25 via Les avantages et les risque...
lu proclame : Que tal? Le 01 janvier, 17h06 via Les avantages et les risque...
lu écrit : Hey Le 01 janvier, 17h06 via Les avantages et les risque...
ribou proclame : Coucou Le 30 décembre 2018, 11h52 via Fiches sur les personnages ...
aziz proclame : Toutoutoutou Le 28 décembre 2018, 15h30 via Comment fonctionne le mini-...
aziz chuchote : Waw made in china Le 28 décembre 2018, 15h29 via Comment fonctionne le mini-...
aziz murmure : Je suis hiybjgujh Le 28 décembre 2018, 15h29 via Résumé - La Chèvre De M. Se...
Moi s'exclame : Nb k Le 18 décembre 2018, 23h12 via Résumé scène par scène - Le...
yuiooyo tergiverse : Jouon ensemble Le 17 décembre 2018, 21h19 via Résumé scène par scène - Le...
Tom déclare : Ça va Le 17 décembre 2018, 10h25 via Résumé - Les Fourberies De ...
Carla proclame : Caca Le 17 décembre 2018, 10h22 via Résumé - Les Fourberies De ...
Moi écrit : Génial ? Le 17 décembre 2018, 10h21 via Résumé - Les Fourberies De ...
yi déclare : Ipmuo Le 16 décembre 2018, 17h45 via Résumé scène par scène - Le...
Moi chuchote : Bvvgvv Le 16 décembre 2018, 15h22 via Résumé scène par scène - Le...
Moi tergiverse : Bbcgd Le 16 décembre 2018, 15h22 via Résumé scène par scène - Le...
)à)ào$ bafouille : Jiojiij Le 16 décembre 2018, 13h22 via Résumé scène par scène - Le...