IV - Partie Codage
Yaaaa ! On arrive enfin sur la section la plus intéressante mais surtout la plus dur, notamment la plus complexe à expliquer donc je vais faire de mon mieux mais je ne promets pas grand chose :-' .
Je vous rappel que vous n'avez besoin que du bloc-notes pour suivre ce tutorial puisque tout ce fera sur cette simple application.
Infos sur le XHTML/CSS :
Tout d'abord le xhtml/css c'est quoi ? Sans rentrer dans les détails, c'est un langage informatique, du moins pour le Web. Ce langage est présent partout (même à l'instant que je vous parle) puisque chacune des pages que vous feuilletez sur le net en est composé. Vous l'aurez donc compris, c'est un langage permettant la mise en forme d'une structure graphique ou/et textuelle lisible ensuite grâce aux navigateurs internet (IE, Firefox, Opera et j'en passe ^^).
Pour infos, il peut être associé à du PHP afin de rendre les pages du site "dynamique" mais ce ne sera pas le but de ce tuto.
Pour cette partie de tuto, je vais vous donner les exemples de la construction de votre page Web et ensuite passer à l'explication détaillée pour éviter les confusions lors de la lecture. Quand j'y pense... J'aurais dû le faire dès le début je m'en excuse :whst:.
A savoir : Un site Web ce compose OBLIGATOIREMENT d'un fichier nommé index.html. C'est dans ce dernier, sont entreposées les pages d'accueil des sites. Ce nom de fichier est un peu une éxécution automatique par défaut pour votre navigateur puisque lors du chargement du site, il cherchera directement ce fichier pour le charger.
Ce fichier ce compose d'une structure basée sur celle-ci :
<html> // Indique le début concret du code de votre page.
<head> // Indique l'entré de tête de votre page web. Non visible hors code.
<title></title> // Précisez le nom de votre site entre ses deux balises.
</head> // Ferme l'en-tête de votre page.
<body> // Ouvre la partie visible de votre site.
Tout ce que l'on voit sur une page ce présente ici.
</body> // Ferme la balise précédente.
</html> // Clôture proprement le code de votre page.
Nous retrouverons cette structure dans la suite du tuto et vous apprendrez comment bien l'utiliser.
Pour ce qui est de la CSS (Cascading Style Sheet), c'est en faite un autre fichier, souvent connu sous style.css qui vous permet de mettre tous vos "codes" concernant la mise en place des objets de votre site. Ce fichier est pratique puisque tout le code présent dedans est un poids en moins au code du fichier index.html, donc vous gagnez en poids et donc en chargement sur l'affichage de la page ! Grâce à ce dernier, nous aurons donc l'occasion d'éditer rapidement les polices, couleurs du site etc... Alors que sans cela, vous devrez modifier ses paramètres page par page... C'est l'avantage de cette feuille de style, faites le nombre de pages que vous désirez avec UNE seule CSS et le tour est joué, toutes les pages seront affectées par ce fichier.
La structure de cette dernière dans votre code html ce compose comme ceci :
<div id="Header"></div>
<div id="Contenu">
<div class="Name"></div>
<div class="Name"></div>
<div class="Name"></div>
</div>
<div id="Footer"></div>
Hors, pour notre exemple, cette structure ne sera pas tout à fait utilisé de cette manière, l'utilisation des class ne sera pas utile pour notre exemple.
C'est un peu explicite pour vous, c'est normal, la suite du tuto est faite pour mieux vous expliquer tout cela.
Voyons, si vous le voulez bien, la création de ce fichier ressource :w00t:
1] Création de la base du fichier index.html
Comme vous avez pu le constater à la fin de votre découpage, un dossier images c'est créé ainsi qu'un fichier index.html.
Nous allons donc utiliser ce fichier afin de mettre en forme notre page WEB !
Pour cela, faites un clique droit dessus et ouvrez-le avec le bloc-notes.
Votre contenu devrait ressembler à cela :
http://base.script.free.fr/PA/tuto_01/code_01p.jpg (http://base.script.free.fr/PA/tuto_01/code_01.jpg)
Bien compliqué tout cela ^^. Nous allons faire plus simple et plus propre ! :)
Alors commençons le nettoyage :devil: Supprimez absolument tout le texte que contient ce fichier !
Une fois votre bloc-notes entièrement vide, nous allons procéder par étapes.
Tout d'abord par la composition globale de ce fichier.
Voici ce que vous devez insérer pour bien commencer la page valide XHTML 1.0 Strict. Code :
<!DOCTYPE html PUBLIC "-//W3C//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>Test tuto PlayerAdvance by heaveN.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">@import "style.css";</style>
</head>
<body>
</body>
</html>
Nous retrouvons donc notre structure mais avec quelques modifications et quelques ajouts. Ses ajouts sont indispensables pour la validité de votre page.
Voici une explication :
<!DOCTYPE html PUBLIC "-//W3C//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" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Vous remarquerez la présente de la borne <html> ce qui vous indiques l'ouverture du code de la page. En revanche, les écritures situées plus haut sont trouvable sur le site w3.org (www.w3.org), étant le site officiel des différentes normes que propose les langages web, ici le XHTML Strict. Ce code est obligatoire pour que la validation de votre page soit complète.
La borne <meta> est également obligatoire pour la validité du code.
<style type="text/css">@import "style.css";</style>
Pour cette dernière commande, c'est un appel au fichier style.css présent au même endroit que l'index afin de charger le code compris dedans. Explicitement, sans cette commande, votre style.css ne se chargera pas, et dans votre cas, le site ne ressemblera à rien (Voir plus loin ^^).
La base étant réalisée, nous allons passer à l'association xhtml/css.
2] Association xhtml/css
Pour l'index.html, codez tout d'abord une "globalité" qui définira l'aspect général du site (ses caractéristiques). Pour cela, il faut incorporer une balise <div id="">. Cette balise permet d'ajouter une structure à un bloc de texte. Elle peut être donc utilisée pour diviser un document en plusieurs sections, c'est le cas ici puisqu'elle définira la globalité du contenu de notre code et nous y incorporons plusieurs autres div nommées cette fois-ii <div class=""> qui sert à créer des éléments réutilisables donc pour nos images futurs du site et autres que nous étudierons plus loin.
Je donne directement un exemple concret puis une explication afin de mieux comprendre le principe car sur ce passage, la compréhension est assez délicate (étant un novice en xhtml/css, j'ai du mal à expliquer le réel principe).
Votre page index.html doit donner ceci :
<!DOCTYPE html PUBLIC "-//W3C//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>Test tuto PlayerAdvance by heaveN.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">@import "style.css";</style>
</head>
<body>
<div id="global">
</div>
</body>
</html>
Cette division global permet de délimiter la structure générale du site que nous allons directement définir dans la CSS.
Commencez par créer un nouveau fichier texte. Ouvrez-le (nous le renommerons comme il se doit plus tard...) et inscrivez ceci :
body { // Définit l'aspect général de la page.
background-color : #FFFFFF; // Définit la couleur d'arrière-plan.
padding: 0; // Définit l'espace entre les marges.
margin :auto auto; // Définit l'espace entre les marges.
width : 766px; // Définit la taille max de votre page.
font-family: Arial, Verdana, sans-serif; // Définit la police d'écriture de votre site.
font-size:11px; // Définit la taille de la police d'écriture.
}
#global { // Définit l'aspect général de la balise.
width: 766px; // Définit la taille de la balise.
margin-left: auto; // Définit la marge de la balise.
margin-right: auto; // Définit la marge de la balise.
margin-bottom: 0px; // Définit la marge de la balise.
margin-top: 0px; // Définit la marge de la balise.
}
Je code la CSS de cette façons pour une meilleur compréhension et pour un rendu plus "propre" car il est possible de tout mettre en ligne, ce que je n'aime pas pour me relire au final.
Attention : N'oubliez pas d'enlever les // suivit des explications ! Ils ne sont fait que pour une explication détaillées du code écrit.
Pour ce qui est des margin en auto, c'est tout simplement afin de centrer le design :).
De plus, si vous ne l'avez pas remarqué, dans la CSS, le body correspond aux caractéristiques de la balise html <body></body> et #global à la balise <div id="global"></div>... Le reste suivra le même principe !
Je précise que, en CSS, le "#" correspond au div id et le "." au div class.
Maintenant que nous connaissons plus ou moins les deux structures, nous allons pouvoir intégrer nos éléments !
3] Incorporation des éléments graphiques
Commencez (vous savez le faire normalement ^^) par intégrer votre structure html entière puisque vous savez déjà les éléments que vous allez intégrer, ils sont dans votre dossier images !
En voici l'exemple :
<body>
<div id="global">
<div id="header"></div>
<div id="menu"></div>
<div id="contenu"></div>
<div id="footer"></div>
</div>
</body>
C'est vraiment tout bête comme principe mais vous allez pouvoir rédiger la suite de votre CSS avec ça !
En revanche, il vous faut les connaissances du code, le voici :
#header {
width:766px;
height:156px;
background:url(images/header.jpg) no-repeat;
}
#menu {
width:766px;
height:27px;
background:url(images/menu.jpg) no-repeat;
}
#contenu {
width:766px;
height:100%; // Ce pourcentage correspond à une extensibilité illimitée et non prédéfinie suivant la taille du texte.
background:url(images/contenu.jpg);
}
#footer {
width:850px;
height:20px;
background:url(images/footer.jpg) no-repeat;
}
Pour remplir correctement les champs, il faut simplement regarder la taille de vos images et les mettre correctement pour chaque composant.
Pour la commande du dessous, c'est le code qui permet de mettre votre image en fond et le no-repeat permet de ne pas répéter l'image si le texte inclus dans le fond est trop long. Dans notre cas, seul le contenu doit être extensible pour tout notre blabla, le reste doit rester fixe !
Voilà ce qui est pour notre intégration des éléments graphique.
Si tout est bon, vous devriez obtenir ce résultat (avec les codes correctement réalisés) :
http://base.script.free.fr/PA/tuto_01/code_02p.jpg (http://base.script.free.fr/PA/tuto_01/code_02.jpg)
Assez bizarre non ? Normal puisque vous n'avez prédéfinie aucun texte donc la partie "Contenu" ne s'est placée que dans l'ordre où nous l'avons donné et n'a pas de texte pour se rendre extensible.
4] Création du menu
Le menu est (au début) une vrai prise de tête pour obtenir quelque chose de simple mais de pratique. Nous allons, pour ce dernier, utiliser des nouvelles balises : <ul>, <li> et <a> :
* <ul> : Il permet de créer une liste de textes affichés représentés par des pictogrammes (du genre carré plein, disque plein...). Elle permettra à notre menu de prendre une forme organisée.
* <li> : Balise obligatoire suivant le <ul> afin d'introduire un terme dans la liste. Cette balise ne peut ce trouver que entre la balise <ul>.
* <a> : Balise de lien. Elle permet d'ajouter un lien à un texte ou une image.
Passons à la pratique. Plaçons-nous dans notre index.html vers notre balise du menu :
<div id="menu"><ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Projets</a></li>
<li><a href="#">Tutoriaux / Cours</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contacts</a></li>
</ul></div>
Le résultat est plutôt affreux ! (http://base.script.free.fr/PA/tuto_01/code_03.jpg)
Il nous faut vite définir les caractéristiques de ce menu dans notre CSS.
Pour cela, toujours pareil, nous retrouvons nos balises à la suite des autres mais dans notre feuille de styles :
ul {
list-style: none; // Ne fais pas apparaître les pictogrammes.
margin: 0;
padding: 5px 0 0 90px; // Règle les distances de marge.
font-weight: bold; // Rendre le texte en gras.
}
li {
float: left; // Commence à gauche.
}
li a {
margin: 0 15px; // Les liens seront espacés de 15pixels chacun.
}
Cette configuration me plaît bien mais après à vous de changer les valeurs suivant la taille de votre menu etc... Faites des tests jusqu'à trouver la bonne valeur ! C'est d'ailleurs ce que j'ai fais.
En revanche, je vous dois une petite explication sur la forme du margin et/ou padding.
Vous avez remarqué que le padding ou margin (qui délimite les marges entre les bords de votre fenêtre et votre design) est souvent accompagné soit d'une direction (ex : margin-left: 0px) ou justement que de chiffre (ex : margin : 0 0 0 0). La solution à ce problème est simple :
Il existe 4 formes de marges : top, left, bottom, right (qui correspondent en français à : haut, gauche, bas, droit).
Et bien les 4 chiffres représentent exactement cet ordre-là. C'est à dire qu'au lieu d'écrire :
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
Vous pouvez directement le transcrire en :
margin : 0 0 0 0;
Attention : Lors d'une valeur nul (0), la précision de pixels n'est pas obligatoire, hors pour une valeur non nul, elle doit être obligatoirement être accompagnée de sa connotation "px" (0 ou 2px).
Notre menu est enfin en place, mais ce bleu et ce soulignement pour les liens ne me plais pas du tout, je vais donc les retirer et en profiter pour changer la couleur ! Pour cela, direction la CSS encore et encore ! (Alala qu'est-ce qu'on ferait pas sans elle :fleur: ).
Je vous propose ce code afin de changer la couleur et d'enlever le soulignement des liens lors de chaque action possible dessus par la souris :
a:link { // Liens de base.
color: #000000; // Change la couleur du text.
text-decoration: none; // Retire le soulignement.
}
a:visited { // Liens une fois visités.
color: #000000;
text-decoration: none;
}
a:hover { // Liens lors du passage de la souris dessus.
color: #19394B;
text-decoration: none;
}
a:active { // Liens lors du clique de la souris dessus.
color: #000000;
text-decoration: none;
}
Cette manip est a rajouter à la suite de votre code CSS pour obtenir ceci :
http://base.script.free.fr/PA/tuto_01/code_04p.jpg (http://base.script.free.fr/PA/tuto_01/code_04.jpg)
C'est tout de même plus appréciable :) Non ? ^^
Nous en avons fini avec cela, passons directement à la fin de ce chapitre avec l'intégration du texte.
5] Intégration du texte
La position du texte est l'une des choses principale dans un site puisque si son intégration est propre et soigné, c'est sympa de lire correctement le contenu du site. Je vous propose donc une brève explication sur l'utilisation de la balise <p> qui vous permettra d'écrire votre contenu dans les positions les mieux adaptées.
Allons, comme à notre habitude, chez notre cher index.html et procédons de cette façon dans la div Contenu ainsi que dans le footer :
<div id="contenu">
<p><strong>The standard Lorem Ipsum passage, used since the 1500s</strong>
<br /><br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<br /><br />
<strong>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</strong>
<br /><br />
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
<br /><br />
<strong>1914 translation by H. Rackham</strong>
<br /><br />
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
<br /><br />
<strong>Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</strong>
<br /><br />
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
<br /><br />
<strong>1914 translation by H. Rackham</strong>
<br /><br />
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
</div>
<div id="footer">
<p class="foot">Created by heaveN. for PlayerAdvance.org © 2007</p>
</div>
Ce texte ce trouve ici Lorem... (http://lipsum.com/feed/html) et est très pratique pour des tests de ce genre car le texte est long et pas besoin de ce décarcasser à trouver de quoi écrire pour tester notre mise en page !
J'en profite pour préciser encore quelques nouvelles balises de mise en page :
* <p> : Permet d'intégrer son texte et de le configurer via la CSS.
* <strong> : Permet de mettre en gras le texte.
* <br /> : Faire un retour à la ligne.
Bon, là (http://base.script.free.fr/PA/tuto_01/code_05.jpg) c'est sur que ce n'est pas très beau, mais encore et toujours, grâce à notre feuille préférée, nous allons mettre tout ca en ordre !
Ajoutez simplement ceci dans votre CSS :
p {
margin: 0;
padding: 0 15px 0 15px;
}
.foot { // Le . correspond au div class.
margin: 0;
padding: 7px 0 0 15px;
font-size:9px; // Taille du texte.
}
Voyez vous-même le résultat final ! (http://base.script.free.fr/PA/tuto_01/Test/)
Vous pouvez vérifier, votre site est entièrement valide XHTML 1.0 Strict / CSS !
Vous pouvez télécharger la source ici en guise de vérification : Télécharger (http://base.script.free.fr/PA/tuto_01/Test.rar).
Voilà cette grosse partie est enfin fini ! N'oubliez pas, ce tuto traite des bases en graphisme et codage afin de créer un site web perso simple mais propre et surtout apprendre à le faire seul entièrement donc je vous rappel qu'au niveau de ce chapitre, les bases vous ont été données, à vous de les réutiliser dans d'autre circonstances afin de les assimiler à 100% ! ;)