Affiche une chaîne de caractères
Lors de la création d'un modèle de page web en html css, penser à l'utilisateur d'où l'importance du desing qui est l'image du site web
Vous savez maintenant, qu'une page web est une combinaison de 2 parties :
Un fichier HTML : Oú; se trouve le contenu de la page (le texte) et un fichier CSS (.css) : Qui permet de faire la présentation de la page web.
Le fichier HTML : Oú se trouve le contenu de la page (le texte). Il est constitué de balises.
Le fichier CSS (.css) : Qui permet de faire la présentation de la page web. Il indique qu'un texte est de telle couleur, qu'il est centré, sa police 'Arial' etc...
Si vous avez suivi les chapitres précédents et vous les avez compris,ce qui va suivre dans ce chapitre sera plus facile à comprendre. Si non retournez les revoir puis revenez pour poursuivre le chapitre courant.
La conception de la page Web peut être fixe de taille fixée (par exemple de 760 pixels)ou extensible de taille qui varie suivant la résolution du visiteur du site.
Vous vous rappelez du code de "base" d'une page HTML que je vous ai montré dans un cours précèdent. Le revoici de nouveau :
Exemple : Copier le code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN" "http://www.w3.org/TR/HTML1/DTD/HTML1-strict.dtd"> <html xmlns="http://www.w3.org/1999/HTML" xml:lang="fr" > <head> <title>Bienvenue sur mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> </body> </html>
Tapez le code dans votre éditeur de texte.
Enregistrer le sous le nom cadre.html .
Vous avez une page vide.
Maintenant supposons que nous voulons que notre page aura un entête, un menu, un corps et un pied de page comme ceci.
Comment on va s'y prendre ?
Je suppose que vous avez trouvez la réponse vous même.
Et bien on va utiliser la balise universelle <div> vous vous souveniez d'elle.
On va créer ces 4 blocks à l'aide de 4 <div> qu'on mettra dans le corps <body> </body>:
Code HTML:
Exemple : Copier le code
<div id="en_tete"> <!-- Ici on mettra la bannière de l'entête--> </div> <div id="menu"> <!-- Ici on mettra le menu --> </div> <div id="corps"> <!-- Ici on mettra le contenu principal de la page (tout le texte....) --> </div> <div id="pied_de_page"> <!-- Et, on mettra en bas de la page le nom de l'auteur, un copyright... --> </div>
Allez y , tapez ce code entre <body> et </body> du code de la page de tout à l'heur.
Qu'attendez vous?
Il faire en même temps que moi. Enregistrez et vérifier ce que ça donne.
Et bien vous avez toujours une page vide. N'ayez pas de crainte on va la remplir.
On utilise ici des attributs id et non des class.
Vu que l'attribut id ne sera utilisé qu'une seule fois dans mon document.
En général un en-tête c'est juste une bannière (une image), un titre <h1> (titre du site).
Pour moi, je vais mettre une bannière, celle-ci par exemple :
Pour mettre cette image dans le <div> de l'en-tête ? On a 2 possibilités :
1, Crée une balise <img />
à l'intérieur, afin d'insérer notre bannière. On sait le faire.
2, Soit on ne met rien à l'intérieur du <div id="en_tete"> et on mettra la bannière sous forme d'image de fond dans le CSS.
C'est la seconde solution que je vais adopter,mai vous pouvez choisir la première méthode.
Dans le block du menu , on va créer plusieurs sous-blocks pour montrer les différents éléments du menu.
Mettez ce code dans le block menu c'est à dire entre <div id="menu"> et </div>
Code HTML:
Exemple : Copier le code
<div id="menu"> <div class="element_menu"> <h3> Premier menu</h3> <!-- Titre du sous-menu --> <ul> <ul> <!--liens vers la page elle même --> <li><a href="page1.html">Lien1<a></li> <!--liens vers vers une page exterieur au site--> <li><a href="http://booter.22web.net">Lien2<a></li> <li>Lien3</li> </ul> </div> <div class="element_menu"> <h3>Second menu</h3> <ul> <li>Lien1</li> <li>Lien2</li> <li>Lien3</li> </ul> </div> </div>
C'est la partie principale de la page. Elle contiendra tout le contenu de votre page.
On va donner un titre <h1> qui sera le titre de la page. on le mettra dans la balise
<title> du <head>.
Puis, on écrira nos paragraphes <p> et pour structurer son texte,on met des sous-titres <h2>
Ce qui nous donne un code pour le corps :
Code HTML
Exemple : Copier le code
<div id="corps"> <h1>La Chèvre de Monsieur Seguin</h1> <h2>Paragraphe 1</h2> <p> Ah! qu'elle était jolie la petite chèvre de M. Seguin! Qu'elle était jolie avec ses yeux doux, sa barbiche de sous-officier, ses sabots noirs et luisants, ses cornes zébrées et ses longs poils blancs qui lui faisaient une houppelande!<br /> Et puis, docile, caressante, se laissant traire sans bouger, sans mettre son pied dans l'écuelle. Un amour de petite chèvre!<br /> M. Seguin avait derrière sa maison un clos entouré d'aubépines. Il avait attaché la petite chèvre à un pieu, au plus bel endroit du pré, en ayant bien soin de lui laisser beaucoup de corde.<br /> </p> <h2>Paragraphe 2</h2> <p> Mais un jour, elle se dit en regardant la montagne: «Comme on doit être bien là-haut . Quel plaisir de gambader dans la bruyère sans cette maudite longe qui vous écorche le cou!»<br /> A partir de ce moment, l'herbe du clos lui parut fade. Elle maigrit, son lait se fit rare. C'était pitié de la voir tirer tout le jour sur sa longe, la tête tournée du côté de la montagne en faisant Mê! tristement.<br /> M. Seguin s'apercevait bien que sa chèvre avait quelque chose, mais il ne savait pas ce que c'était<br /> </p> <h2>Paragraphe 3</h2> <p> Un matin, comme il achevait de la traire, elle se retourna et lui dit dans son patois: -écoutez, monsieur Seguin, je me languis chez vous, laissez-moi aller dans la montagne.<br /> - Ah! mon Dieu! Blanquette, tu veux me quitter!<br /> - Oui, monsieur Seguin.<br /> - Tu es peut-être attachée de trop court, veux-tu que j'allonge la corde?<br /> - Ce n'est pas la peine, monsieur Seguin.<br /> - Alors, qu'est-ce qu'il te faut? Qu'est-ce que tu veux?<br /> - Je veux aller dans la montagne, monsieur Seguin.<br /> - Mais, malheureuse, tu ne sais pas qu'il y a le loup dans la montagne...<br /> Que feras-tu quand il viendra? <br /> </p> </div>
Le texte que j'ai écrit, est juste pour "remplir" la page.
On insèrera peut être autres choses (des images!...que sais je? Vous seul saviez ce que vous
voulez mettre dans votre site).
Le pied de page sert à écrire le nom de l'auteur en général, et vous pouvez mettre un copyright.
Code : HTML
Exemple : Copier le code
<div id="pied_de_page"> <p>Copyright 2008, tous droits réservés</p> </div>
voilà notre page est créée. Elle reste la decoration; Que nous allons voir dans la partie suivante.
La encore je vous suggère que vous suiviez en même temps que moi.
Nous allons travailler sur la balise <body>.
Rappelle: <body>, est la balise qui englobe tout le contenu de votre page web.
Pour la taille de la page, mettons 760 pixels. Qui est moins que 800px, pour que les visiteurs
qui ont une résolution 800*600 ne se déplaceront pas vers la droite pour voir le reste de la page.
Pour les marges, un margin:auto centrera le design.
Une marge en haut (top) et en bas (bottom) de 10 pixels pour que notre page ne collera pas avec
le haut et le bas du navigateur.
Enfin, une couleur de fond ou une image de fond (background-color ou background-image).
Ouvrez une nouveau document dans votre notepad++, allez sur le menu Langage choisissez CSS comme
langage enregistrer (sous le même nom que votre page si vous voulez).
Code : CSS
Exemple : Copier le code
body { width: 760px; margin: auto; /* Pour centrer notre page */ margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */ margin-bottom: 10px; /* aussi pour le bas du navigateur */ background-color: #33ffff; /* Un fond pour éviter d'avoir un fond blanc */ }
Essayez d'enlever quelques lignes pour observer le résultat sur la page .
N'oubliez pas de déclarer le fichier CSS dans la balise <head> de votre page.
Je vous rappelle le code HTML à mettre dans la balise <head>.
<link rel="stylesheet" media="screen" type="text/css" title="cadre" href="cadre.css" />
Nous allons afficher la bannière du site à l'aide du CSS (avec background-image).Qu'on mettra dans
le <div> de l'en-tête,que nous avons laissé tout à l'heur vide.
C'est une technique que vous pourrez utiliser pour faire que tout votre conception soit compris dans le fichier CSS.
C'est très pratique pour réaliser un site qui à plusieurs conception différentes.
1. On va agrandir la taille du block "en_tete" afin qu'il puisse contenir la bannière entière.
Comme notre bannière fait 760x100 pixels, on va définir une largeur et une hauteur de ces dimensions :
width:760px;
height:100px;
2. Puis, on indiquera l'image de fond qu'on veut mettre dans notre block vide pour l'instant :
background-image:url("images1/banniere.gif");
3.On mettra no-repeat pour s'assurer que cette image ne sera pas répétée en mosaïque avec background-repeat :
background-repeat:no-repeat;
4. Pour que l'en-tête ne soit trop collé avec ce qui se trouvera dessous (le menu et le corps), on définira une petite marge en-dessous (margin-bottom) de quelques pixels :
margin-bottom:10px;
5. En fin, ajoutons si vous voulez une bordure:
border: 1px solid black;
nous y somme, ajoutez ce code à votre fichier CSS et enregister
Code : CSS
Exemple : Copier le code
#en_tete { width: 760px; height: 100px; background-image: url("images1/banniere.png"); background-repeat: no-repeat; margin-bottom: 10px; border: 1px solid black; }
Avec cette technique, pour changer la bannière de votre site il faudra modifier le fichier CSS et non le fichier HTML.
La c'est un peu plus difficile.
Nous allons placer le menu "à gauche" ou "à droite" du corps, alors que le menu se trouve au-dessus pour l'instant.
Pour faire cela, il suffit d'utiliser la propriété CSS float (nous l'avons vu), elle va être pratique ici pour placer correctement le menu et le corps.
On va prendre une taille de 130 pixels pour menu.
Ensuite, nous allons travailler sur la class "element_menu" (qui concerne une partie de menu). On va lui donner une couleur de fond en gris foncé, une image de fond en repeat-x (qui se répètera horizontalement).
puis, on ajoutera une bordure à chaque élement de menu pour voir ses limites. "2px".
Enfin, on mettra un margin-bottom à chaque élément de menu pour éviter qu'ils ne soient collés les uns aux autres.
Code : CSS
Exemple : Copier le code
#menu { float: left; /* Le menu flottera à gauche vous pouvez mettre float:right */ width: 130px; /* Il est important de donner une taille au menu */ } .element_menu { background-color: #c2c2aa; background-image: url("images1/motif.png"); background-repeat: repeat-x; border: 2px solid black; margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */ }
Rappelle :( # ) dièse pour un id et (. ) point pour une class.
si vous testez ce code, on distingue déjà bien nos menus, mai le corps se retrouve sous le menu une fois qu'il l'a dépassé par le bas.
Normal, c'est comme ça que fonctionne un float.
Il faut ajouter une marge à gauche sur le corps (margin-left).
Il faut encore travailler sur les menus. On rajoute quelques effets.
Ce CSS va concerner les balises <ul> se trouvant à l'intérieur d'un element_menu".
Code : CSS
Exemple : Copier le code
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */ { list-style-image: url("images1/puce.png"); /* On change l'apparence des puces */ padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */ padding-left: 20px; /* ... on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */ margin: 0px; /* même chose pour margin, ça évite d'avoir à en écrire 4 fois (margin-left, margin-right...) */ margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */ } .element_menu a /* Tous les liens d'un menu */ { color: #0000ff; } .element_menu a:hover /* Quand on pointe sur un lien du menu */ { background-color: #ff00ff;/*change la couleur du fond du lien*/ color: black;/*change la couleur du texte du lien*/ }
Vous avez vu que j'ai enchaîné un "padding" (qui modifie toutes les marges intérieures) et un "padding-left" (qui modifie uniquement la marge intérieure gauche).
Il faut faire les lignes dans l'ordre :
1. On modifie toutes les marges et on leur met toutes la valeur "0px" avec padding
2. Puis, on modifie la marge de gauche. On lui donne 20px avec padding-left (On "écrase" valeur existante avant)
Pour le corps, il est important de définir de bonnes marges.
On commence par régler le problème du texte du corps qui passe "sous" le menu quand il est trop long.
Il suffit de modifier la marge "à gauche" du corps. Par un margin-left.
On lui donne une valeur suffisante pour "pousser" le corps sur la droite, pour qu'il ne passe plus sous le menu (une valeur supérieure à la largeur du menu). Ici par exemple, on va prendre une valeur de 130px.
On va ajouter un margin-bottom pour que le pied de page en-dessous ne soit pas "collé" au corps :
margin-bottom:20px;
On va mettre un padding (marge intérieure) sur les côtés afin que le texte ne colle pas avec les bords du corps :
padding:10px;
On va aussi mettre une couleur de fond, ou une petite image de fond qui se répète horizontalement, une bordure... (ou tout ce que vous voulu pour la décoration )
Code : CSS
Exemple : Copier le code
#corps { margin-left: 130px; margin-bottom: 20px; padding: 10px; color: #B3B3B3; background-color: #524222; background-image: url("images1/motif.png"); background-repeat: repeat-x; border: 2px solid black; } #corps h1 /* Tous les titres h1 du corps */ { color: #dd0011; text-align: center; font-family: Arial, "Times New Roman", Times, serif; } #corps h2 /* Tous les titres h2 du corps */ { height: 30px; background-color: #22ff00; /* Une petite image (15x15) de fond sur les titres h2 */ background-image: url("images1/petite_image.png"); background-repeat: no-repeat; /* L'image se placera à gauche du titre */ padding-left: 20px; color: #0000ff; text-align: left; }
Pour le pied de page, rien de d'extraordinaire, c'est des modifications identiques au reste. On met une couleur de fond, on met une bordure, on vérifie les marges.
Code : CSS
Exemple : Copier le code
#pied_de_page { padding: 5px; text-align: center; color: #B3B3B3; background-color: #626262; background-image: url("images1/motif.png"); background-repeat: repeat-x; border: 2px solid black; }
Avant de terminer cette partie du cours créez un dossier sur votre bureau,
nommez le monsite et dans ce dossier créez un autre dossier que vous nommez
images et dans le quel vous allez placer toutes les images dont vous aurez besoin
pour le design de vos pages web.
Vous pouvez télécharger le dossier images que je vous ai préparé ici
C'est un fichier .rar que vous devez décompresser dans le dossier monsite.
Maintenant recopiez le code suivant dans votre éditeur de texte (notepad++ )
et enregistrez dans le dossier monsite sous le nom "page1.html" ou un autre nom ,
que vous préférez.
Code html:
Exemple : Copier le code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN" "http://www.w3.org/TR/HTML1/DTD/HTML1-strict.dtd"> <html xmlns="http://www.w3.org/1999/HTML" xml:lang="fr" > <head> <title>Bienvenue sur mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="stylegeneral" href="stylegeneral.css" /> </head> <body> <div id="en_tete"> <!-- Ici on mettra la bannière de l'entête--> </div> <div id="menu"> <div class="element_menu"> <h3> Premier menu</h3> <!-- Titre du sous-menu --> <ul><ul> <!--liens vers la page elle même --> <li><a href="page1.html">Lien1<a></li> <!--liens vers vers une page exterieur au site--> <li><a href="http://booter.22web.net">Lien2<a></li> <li>Lien3</li> </ul> </div> <div class="element_menu"> <h3>Second menu</h3> <ul> <li>Lien1</li> <li>Lien2</li> <li>Lien3</li> </ul> </div> </div> <div id="corps"> <h1>La Chèvre de Monsieur Seguin</h1> <h2>Paragraphe 1</h2> <p> Ah! qu'elle était jolie la petite chèvre de M. Seguin! Qu'elle était jolie avec ses yeux doux, sa barbiche de sous-officier, ses sabots noirs et luisants, ses cornes zébrées et ses longs poils blancs qui lui faisaient une houppelande!<br /> Et puis, docile, caressante, se laissant traire sans bouger, sans mettre son pied dans l'écuelle. Un amour de petite chèvre!<br /> M. Seguin avait derrière sa maison un clos entouré d'aubépines. Il avait attaché la petite chèvre à un pieu, au plus bel endroit du pré, en ayant bien soin de lui laisser beaucoup de corde.<br /> </p> <h2>Paragraphe 2</h2> <p> Mais un jour, elle se dit en regardant la montagne: «Comme on doit être bien là-haut .Quel plaisir de gambader dans la bruyère sans cette maudite longe qui vous écorche le cou!»<br /> A partir de ce moment, l'herbe du clos lui parut fade. Elle maigrit, son lait se fit rare. C'était pitié de la voir tirer tout le jour sur sa longe, la tête tournée du côté de la montagne en faisant Mê! tristement.<br /> M. Seguin s'apercevait bien que sa chèvre avait quelque chose, mais il ne savait pas ce que c'était...<br /> </p> <h2>Paragraphe 3</h2> <p> Un matin, comme il achevait de la traire, elle se retourna et lui dit dans son patois: «écoutez, monsieur Seguin, je me languis chez vous, laissez-moi aller dans la montagne.<br /> - Ah! mon Dieu! Blanquette, tu veux me quitter!<br /> - Oui, monsieur Seguin.<br /> - Tu es peut-être attachée de trop court, veux-tu que j'allonge la corde?<br /> - Ce n'est pas la peine, monsieur Seguin.<br /> - Alors, qu'est-ce qu'il te faut? Qu'est-ce que tu veux?<br /> - Je veux aller dans la montagne, monsieur Seguin.<br /> - Mais, malheureuse, tu ne sais pas qu'il y a le loup dans la montagne...<br /> Que feras-tu quand il viendra? <br /> </p> </div> <div id="pied_de_page"> <p>Copyright 2008, tous droits réservés auteur carabde</p> </div> </body> </html>
En suite recopiez le code CSS suivant dans votre éditeur de texte et enregistrez dans le dossier monsite sous le nom "stylegeneral.css". Là ne pas changer le nom ou si vous le faites changez le nom aussi dans le code HTML de la page, la même chose pour le dossier images et toutes les images qu'il contient. Code CSS:
Exemple : Copier le code
body { width: 760px; margin: auto; /* Pour centrer notre page */ margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */ margin-bottom: 10px; /* aussi pour le bas du navigateur */ background-color: #33ffff; /* Un fond pour éviter d'avoir un fond blanc */ } #en_tete { width: 760px; height: 100px; background-image: url("images1/banniere.png"); background-repeat: repeat; margin-bottom: 10px; border: 1px solid black; } #menu { float: left; /* Le menu flottera à gauche vous pouvez mettre float:right */ width: 130px; /* Il est important de donner une taille au menu */ } .element_menu { background-color: #c2c2aa; background-image: url("images1/motif.png"); background-repeat: repeat; border: 2px solid black; margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */ padding: 10px; } .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */ { list-style-image: url("images1/puce.gif"); /* On change l'apparence des puces */ padding: 10px; /* Tous les côtés ont une marge intérieure de 0 pixels */ padding-left: 20px; /* ... on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */ margin: 0px; /* même chose pour margin, ça évite d'avoir à en écrire 4 fois (margin-left, margin-right...) */ margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */ } .element_menu a /* Tous les liens d'un menu */ { color: #0000ff; } .element_menu a:hover /* Quand on pointe sur un lien du menu */ { background-color: #ff00ff;/*change la couleur du fond du lien*/ color: black;/*change la couleur du texte du lien*/ } #corps { margin-left: 130px; margin-bottom: 20px; padding: 10px; color: #000000; background-color: #524222; background-image: url("images1/mtif_corps.png"); background-repeat: repeat; border: 2px solid black; } #corps h1 /* Tous les titres h1 du corps */ { color: #dd0011; text-align: center; font-family: Arial, "Times New Roman", Times, serif; } #corps h2 /* Tous les titres h2 du corps */ { height: 30px; background-color: #22ff00; /* Une petite image (15x15) de fond sur les titres h2 */ background-image: url("images1/petite_image.png"); background-repeat: no-repeat; /* L'image se placera à gauche du titre */ padding-left: 20px; color: #0000ff; text-align: left; } #pied_de_page { padding: 5px; text-align: center; color: #B3B3B3; background-color: #626262; background-image: url("images1/motif.png"); background-repeat: repeat; border: 2px solid black; }
Ouvrez la page "page1.html" dans votre explorateur internet et voyez le
résultat.Alors? Je reconnais que ce n'est pas la perfection mais ce n'était pas
mon objectif.
Mon objectif est de vous montrer comment on fait une page web.
Dans les prochains chapitres vous verrez une autre façon de faire une page Web.
Pour une page web avec une taille extensible nous reprendrons le même code que précédemment , et nous allons changer le CSS.
Cette fois au lieu d’utiliser des dimensions en pixel on va utiliser des pour cent (%) et la valeur auto.
Le body
Pour le width du body on utilise la valeur auto.
Code : CSS
Exemple : Copier le code
body { width: auto; margin: auto; /* Pour centrer notre page */ margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */ margin-bottom: 10px; /* aussi pour le bas du navigateur */ background-color: #33ffff; /* Un fond pour éviter d'avoir un fond blanc */ }
L'en-tête
Pour l’entête on utilise le 100 %.
Code : CSS
Exemple : Copier le code
#en_tete { width: 100%; height: 100px; background-image: url("images1/banniere.png"); background-repeat: no-repeat; margin-bottom: 10px; border: 1px solid black; }
Avec cette technique, pour changer la bannière de votre site il faudra modifier le fichier CSS et non le fichier HTML.
Le menu....
On mettra un width de (130/800)*100 = 16% par exemple
Exemple : Copier le code
#menu { float: left; /* Le menu flottera à gauche vous pouvez mettre float:right */ width: 16%; /* Il est important de donner une taille au menu */ }
Pour le reste rien à changer
Le corps...
Pour le corps on va mettre un margin-left de 16.1 %
Code : CSS
Exemple : Copier le code
#corps { margin-left: 16.1 %; margin-bottom: 20px; padding: 10px; color: #B3B3B3; background-color: #524222; background-image: url("images1/motif.png"); background-repeat: repeat-x; border: 2px solid black; }
Voilà vous avez une idée, vous pouvez alors remplacer toutes les valeurs en pixel par des pour cents, ainsi vous aurez une page extensible.
Exemple de calcule
Soit le pading pour un élément de menu qui est de 20px le width du parent qui est #menu est 130px :
Donc le pading est : (20/130)*100 = 15 %.
Par carabde 10 mars 2014chapitre précédent chapitre suivant