Messages :
Ce tutoriel est là pour vous aider à créer un site web très simplement pour vos sagas MP3. Il n'a pas la prétention d'être destiné à des personnes possédant déjà un site web plus "complexe" avec des animations flash de partout etc...
Ce que je propose aujourd'hui, c'est de vous créer un petit site de quelques pages, construit juste en xHTML et CSS. Et pour que ça ne soit pas trop dur, je vais même vous donner les fichiers tout prêts à télécharger et modifier. Mais je vous rassure, je vais vous expliquer comment ça marche !
Je ne compte pas non plus revenir sur toutes les définitions, sur toutes les choses dites techniques, et que si certains ou certaines sont intéressées, elles peuvent toujours aller voir de très beaux tutos, biens mieux réalisés comme ceux du Site du Zero
Pour le moment, commencez par télécharger ce fichier zip.
----------------------------------------------------------------------------------------------------------------
Fichier
----------------------------------------------------------------------------------------------------------------
Dezzipez le n'importe ou, dans un dossier que vous appellerez comme bon vous semble...
Ouvre ce dossier, normalement vous devriez apercevoir :
Fichiers
Images
Scripts
index.html
style.css
Dans le dossier Fichiers, vous placerez vos fichiers, audio, vidéos... dans le dossier Images, vous placerez toutes les images constituant le design de votre site, et dans le dossier Scripts, vous pourrez intégrer tous les modules flash, js que vous pourriez installer (lecteur flash comme dewplayer par exemple).
On va commencer, ouvrez le fichier "index.html" avec notepad++ (que vous pouvez télécharger ici si vous ne l'avez pas).
Aperçu du fichier index.html
Ce fichier représente la page d'accueil de votre site, c'est ici que vous afficherez les dernières news par exemple...
On va commencer tout de suite à le modifier et le compléter.
Regardez de plus près la partie en bleu
Code : Tout sélectionner
<title></title>Entre ces deux balises, insérez le titre que vous voudriez voir apparaître sur l'onglet de votre navigateur
La partie orange représente toute la partie visible sur votre site, je l'ai donc découpée en quatre parties :
- Header : C'est là que vous mettrez le titre de votre site, ou encore la bannière qui pourra le remplacer. Ici, nous mettrons une image, parce que c'est nettement plus joli
;- Menu : C'est là qu’apparaîtront les différentes catégories de votre site ;
- Body : C'est le corps de votre page, la partie centrale, là ou vous écrirez un peu tout et n'importe quoi
;- Footer : C'est ici que vous pourrez mettre tout ce qui est relatif au copyright par exemple, ou d'autres informations complémentaires comme les flux RSS...
Le header tout d'abord...
Il y a deux méthodes pour faire quelque chose de ce header :
- Un titre tout basique, simple et efficace ;
- Une image/bannière, qui est déjà quelque chose de plus sympa
.Si vous êtes intéréssés par la première solution, insérez le titre de votre site/page entre des balises :
Code : Tout sélectionner
<h1></h1>Pour la deuxième possibilité, attendez un peu et laissez la place vide pour le moment
. Promis, on va vite s'en occuper 
.Regardons plus en détail la partie "Menu" :
Code : Tout sélectionner
<h3>Titre menu</h3>Entre les balises <h3></h3> qui définissent un titre de niveau 3, insérez le titre de votre catégorie.
Passons aux sous menus :
Code : Tout sélectionner
<li><a href="nom_page.html">sous menu</li>Ici, vous avez deux choses à faire :
- Premièrement, changer le "nom_page" par le nom de la page vers laquelle ce sous menu renverra, préférez un nom en un seul mot, sans majuscules et sans minuscules. Exemple pour une page de News : news.html ;
- Deuxièmement, changer le "sous menu" et le remplacer par ce que vous voulez voir apparaître dans votre menu
.Le nombre de menus possibles n'est pas infini non plus pour le site que nous allons créer, mais de toute façon, il vaut mieux éviter d'avoir trop de catégories pour faire quelque chose de "potable" ou l'on ne se perd pas
.N'oubliez bien sur pas de supprimer les parties de menus qui ne vous intéressent pas dans le fichier, et rajoutez en par copier/coller si cela vous intéresse
Regardons maintenant la partie "body"
C'est dans cette catégorie que vous écrirez tout ce que vous avez à écrire sur votre site. Vous avez trois choses primordiales à savoir et à faire :
- Lorsque vous faites une page, il est conseillé de lui donner un titre : pour cela, utilisez une balise de titre <h1></h1> ou encore <h2></h2>. De cette façon, le lecteur pourra savoir ou est ce qu'il est vraiment en remontant en haut de la page
;- Pour écrire quelque chose de visible, vous devez l'insérer entre des balises <p> et </p>. N'oubliez surtout pas ça, sinon, ben vous ne verrez rien
;- Pour faire un titre à votre publication, il existe une balise spéciale qui fonctionne de la même manière que <p></p>, il s'agit d'une balise de titre de niveau 2 : <h2></h2>.
Ensuite, vous pouvez par exemple avoir besoin de mettre des images, des vidéos, pour cela je vous recommande de vous rendre ici pour voir leur utilisation. Le but ici n'est pas d'apprendre à coder, mais bien de créer un site très simple (très basique aussi
), mais qui peut être bien fait si on se donne la peine de le vouloir .Dans le footer maintenant, vous pouvez écrire ce que bon vous semble, toutes les petites informations complémentaires par exemple ; allez y, lâchez vous
Généralement, c'est ici que l'on met tout ce qui se rapporte à l'auteur, aux droits d'utilisation des fichiers présents sur le site, etc...
Un exemple de code de page réalisée de cette manière quand même :
Code : Tout sélectionner
<!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>The Ardeste</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
</head>
<body>
<div id="header">
</div>
<div id="menu">
<div class="menu">
<h3>Auteurs</h3>
<ul>
<li><a href="aut_podeste.html">Podeste</a></li>
<li><a href="aut_bardyl.html">Bardyl</a></li>
</ul>
</div>
<div class="menu">
<h3>Audio</h3>
<ul>
<li><a href="sagas_tgvr.html">Sagas communes</a></li>
<li><a href="sagas_solo.html">Sagas solos</a></li>
<li><a href="monos.html">Monos</a></li>
</ul>
</div>
<div class="menu">
<h3>Autres créations</h3>
<ul>
<li><a href="othr_txt.html">Textes</a></li>
<li><a href="othr_img.html">Images</a></li>
<li><a href="othr_web.html">Sites</a></li>
<li><a href="othr_more.html">Autres</a></li>
</ul>
</div>
</div>
<div id="body">
<h1>Accueil</h1>
<p>Bienvenue sur notre site, il est consacré a l'équipe réunissant Podeste et Bardyl pour former the Ardeste.
texte pourri : Pater ideoque aliique congregati ita usibus congregati eiusdem ponderibus Apollinaris usibus regale est atrocium incertum incertum civitatibus atrocium ideoque indicatum dum pater Apollinaris incertum criminum occulte conscius apud provinciae ita cuius vel dum vel congregati apud locante Tyrum ideoque regale sunt criminum tunc ex textum conscius Apollinaris nominis dum congregati conscius qui ponderibus occulte ideoque locante ideoque eiusdem ponderibus Tyrum quo aliique civitatibus est civitatibus apud Tyrum cuius ponderibus ex tunc ductus ponderibus regale dum occulte est incertum textum diversis pater provinciae occulte eiusdem quo civitatibus est occulte locante sunt conscius struuntur rector incertum est congregati indicatum ex criminum provinciae.</p>
</div>
<div id="footer">
<p>©Copyright machin truc chouette, interdiction de reproduire cette horreur sous peine de quittation immédiate de site par les lecteurs qui seront attéris sur un truc aussi moche :D</p>
</div>
</body>
</html>
Ceci n'est bien sur qu'un exemple de page, ne la recopiez pas.
Maintenant, ce que vous allez faire, c'est ouvrir cette page avec votre navigateur préféré...
Le résultat
.Et voila, vous avez votre première page. Vous avouerez que esthétiquement, c'est quand même pas ça... mais ne vous inquiétez pas, ça va arriver...
Créons maintenant l'ensemble des pages de votre site, sinon les liens que vous avez spécifié dans votre menu ne serviront à rien et mèneront vers... rien
.Ouvrez donc un nouveau document avec notepad++ que vous nommerez en fonction des noms de vos pages. Enregistrez le bien en HTML !
Collez y le même code que le fichier index.html et changez :
- Le body en fonction de la page que vous créez ;
- Le "tittle" (dans la partie bleutée de la première image) si vous pensez que c'est nécessaire.
Répétez cette opération pour toutes les pages que vous souhaiter créer
Si vous faites un test, normalement, tous les liens de votre menu devraient marcher désormais
Nous allons maintenant aborder la seconde partie qui consiste à rendre tout ça un peu plus clair
Ajouter des couleurs, un fond, etc...
Je préviens avant : Je risque de donner pas mal de conseils, libre à vous de les suivre ou non, mais si ils sont donnés, c'est que d'une certaine manière il vaut mieux les suivre
.Ouvrez le fichier style.css
C'est donc dans ce fichier que nous allons travailler maintenant.
Il y a certaines choses que je n'expliquerai pas, évitez donc d'y toucher sauf si vous savez ce que vous faites. Néanmoins, si vous souhaitez en savoir plus sur les propriétés CSS, je vous recommande cette page très bien renseignée !
On commence !
Code : Tout sélectionner
body
{
width: 1000px;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
background-image: url("adresse de votre image");
}
Dans cette partie, on définit la largeur de votre page, les marges en haut, les marges en bas (pour éviter de "coller" à la fenêtre).
Le plus important est la dernière ligne.
C'est elle qui définit l'image de fond de votre site !
Mettez donc entre les guillemets ceci :
"/images/nom_de_votre_image"
Votre image doit impérativement se trouver dans ce dossier !
Il est conseillé de mettre vos images au format .jpg, ou .png (personnellement, je préfère le .png, mais libre à vous de choisir). Les autres formats sont fortement déconseillés !
Pour ceux qui ne veulent pas mettre une image, mais simplement une couleur en fond, il est nécessaire de remplacer la dernière ligne par :
Code : Tout sélectionner
background-color:#Mettez après la "#" le code hexadécimal de la couleur de votre choix
Évitez les couleurs trop "flash". Votre site doit avant tout rester visible, donc le vert, le bleu, le rose et le jaune fluo, à la poubelle !
Code : Tout sélectionner
#header
{
width: 1000px;
height: 120px;
background-image: url("adresse de la bannière");
background-repeat: no-repeat;
margin-bottom: 10px;
}
Ça y est, nous retrouvons enfin le header. Sisi, souvenez vous, c'est lui qui permettra de définir la bannière de votre site
Insérez donc a la place de adresse de la bannière : /images/nom_de_votre_bannière.
Code : Tout sélectionner
#menu
{
float: left;
width: 180px;
}
.menu
{
background-color: #;
background-image: url("image de fond menu");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
Ici, vous pouvez définir suivant que vous voulez le menu :
- A gauche : left ;
- A droite : right ;
Width vous permet de modifier la largeur de ce menu, libre à vous de faire vos propres essais
Définissez ensuite la couleur de fond (en hexadécimal) et/ou l'image de fond du menu. On procède toujours de la même manière
Code : Tout sélectionner
.menu h3
{
color: #;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: ;
}
.menu ul
{
list-style-image: url("nom_de_limage");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.menu a
{
color: #B3B3B3;
}
Oulala, que de choses pour un simple menu
On va y aller doucement
Pour commencer, il faut définir un peu ce que vont "être" les titres des catégories :
- Color : la couleur en hexadécimal, comme toujours
;- Font-family : Les polices utilisées. A savoir ! Vous pouvez utiliser toute sorte de police si vous le voulez, sauf que si le visiteur ne les possède pas sur son ordinateur, il ne les verras pas. D'ou l'utilité de mettre plusieurs polices, ainsi, si l'ordinateur ne peut pas lire la première, il lira la seconde, et ainsi de suite, jusqu'à ce que l'une d'elle "convienne". D'ou l’intérêt de mettre en bout de chaîne une police "conventionnelle" ;
- Text Align : Ici vous avez "trois" possibilités : left, right ou center. Cela vous permet de définir si vous voulez que votre titre soit centré, à gauche ou à droite
.Dans .menu ul, on s’intéresse à tout ce qui concerne les modifications que l'on peut apporter aux puces :
- list-style-image va permettre de placer une image à la place du rond noir de la liste à puces. Préférez donc une petite image. Supprimez la ligne si elle ne vous intéresse pas et que vous voulez garder le rond noir
;- Ne vous préoccupez pas des quatre lignes suivantes ;
.Menu a est là pour vous permettre de définir la couleur des liens (sous menus). C'est toujours de l'hexadécimal
Voila pour avoir un menu "propre".
Maintenant on va passer au gros bloc "body", là ou vous affichez tout les trucs "intéressants" ou pas d'ailleurs
Code : Tout sélectionner
#body
{
margin-left: 180px;
margin-bottom: 20px;
padding: 5px;
background-color: #;
background-image: url("nom_de_l'image");
background-repeat: repeat-x;
border: 2px solid black;
}
Je peux donner quelques rapides explications sur cette partie du code, bien que normalement, tout est défini plus ou moins correctement
On définit donc les marges du blocs par rapport aux autres blocs, éviter qu'ils se touchent par souci d'esthétique, et dans la première ligne, on décale le bloc de 180 px, pour qu'il ne soit pas sous le menu
.Définissez la couleur et/ou l'image de fond, je n'explique plus, je pense que maintenant, vous savez comment ça marche
Maintenant, il reste à modifier l'apparence des textes du body :
Code : Tout sélectionner
#body h1
{
color: #;
text-align: ;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
Tout d'abord, les titres de type h1 :
- Couleur ;
- Alignement du texte (left, right, center) ;
- Polices.
Code : Tout sélectionner
#body h2
{
height: 30px;
background-image: url("nom_de_limage");
background-repeat: no-repeat;
padding-left: 30px;
color: #;
text-align: ;
}
Tout ceci concernera les titres de type h2 du body donc.
Vous avez ici à modifier la petite vignette apparaissant à gauche du titre, la couleur, et l'alignement, comme précédemment
Si vous avez des titres de type <h3></h3>, surtout n'hésitez pas à faire un copier coller du code en replaçant h1 ou h2 par h3. Après, c'est à vous de voir en fonction de ce que vous mettez dans votre bloc body du fichier .html
Normalement, si vous faites un test, vous devriez voir quelque chose de beaucoup plus ordonné et de plus clair
Vous avez donc fait votre première version de votre site
Ce n'est bien sur pas "magnifique", mais c'est déjà quand même assez sympa non ?
Je mettrais des design que j'ai réalisé, des très simplistes au début, et certains plus complexes pour vous montrer qu'avec seulement du HTML et du CSS, on peut quand même faire quelque chose de sympa
Test 01 : Design très simpliste
Si vous voulez en savoir plus, et tout savoir du HTML et CSS, je vous conseille différentes petites choses :
- Le cours sur le Site du Zero (j'espère que je ne fais pas de la pub interdite) mais c'est vraiment un très bon site pour tout apprendre
;- Un bouquin magnifiquement bien réalisé (par l'auteur du tuto du Site du Zero également) disponible ici et dans toutes les bonnes librairies
.Vous croyez qu'on en a terminé ?
Non, pas encore, il reste quelques petits trucs à voir, notamment concernant ce que vous pourriez avoir besoin en plus en tant que créateur audio...
Insertion d'un lecteur flash pour lire vos fichiers audios. (dewplayer).
Rendez vous sur ce site et suivez les instructions, c'est vraiment bien expliqué
Souvenez vous néanmoins de ne pas mettre de caractères accentués, ni d'espaces dans vos fichiers audio, on ne le répétera jamais assez je crois bien
Insertion d'une page de flux RSS (dont vous pouvez insérer un lien dans votre footer par exemple
).Rien de plus simple.
Créez un nouveau fichier notepad++ que vous nommerez : rss.xml
Faites un encodage en UTF-8 ! J'insiste bien là dessus, ayant eu des erreurs par le passé du à ce problème
Copiez/collez le code suivant :
Code : Tout sélectionner
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title>Mon site web</title>
<link>http://monsiteweb.com</link>
<description>Les news de mon site web</description>
Remplissez les informations <tittle>, <link>, et <description>
Ensuite copiez collez le code suivant :
Code : Tout sélectionner
<item>
<title>Titre de l'annonce</title>
<link>Lien de la page</link>
<description>Description du lien</description>
<pubDate>Date de publication</pubDate>
</item>
Ce code, si vous tenez vos flux RSS à jour, vous finirez par le connaitre par coeur à force de le copier coller encore et encore
Conseil : Très peu de personnes utilisent véritablement les flux RSS. Personnellement, je vous le conseille, en effet, souvent on n'a pas le temps d'aller voir les sites d'un tel ou un tel, donc si on est abonné aux flux RSS (pour ceux qui le sont, ils conviendront avec moi que c'est très pratique), on à accès à tout directement ! Les flux RSS sont un moyen de faciliter la vie à vos lecteurs, donc n'hésitez pas
Maintenant, pour faire savoir à vos lecteurs que vous possédez cette "option", vous pouvez donc l’intégrer dans le footer par exemple soit par un lien en mettant le code suivant :
Code : Tout sélectionner
<a href="rss.xml">Flux RSS</a>Ou encore via une image :
Code : Tout sélectionner
<a href="lien" <IMG SRC="url_de_l_image" ALT="Texte remplaçant l'image" TITLE="Texte à afficher"/></a>
Le texte remplaçant l'image est le texte qui s'affichera en cas de problème d'affichage, il est très important, ne l'oubliez pas ! Quand au texte à afficher, il représente la mini bulle d'info que vous voyez lorsque vous survolez des images, des textes, etc...
Dernière chose : ou mettre votre site ?
Il existe différentes méthodes pour mettre son site web en ligne : des gratuites et des payantes :
La meilleure offre gratuite que vous puissiez trouver est chez free ; Un bon tuto.
En payant, je ne m'y connais pas beaucoup, mais j'ai entendu que du bien de OVH
Voila, je pense que je vais m'arrêter là, vous avez maintenant les bases pour faire quelque chose de "solide", de propre
Après, je ne vous ai vraiment montré que du tout petit petit, xHTML et CSS ne sont que des bases, si vous voulez vraiment quelque chose de bien, tournez vous vers le PHP, pour avoir des belles animations, vous pouvez intégrer du flash, ou du javascript, etc... mais dans tous les cas, vous devez passer par une base de HTML et de CSS, c'est fondamental !
Donc voila, j'espère que ça servira à certains d'entre vous, n'hésitez pas à poser des questions
Bardyl
----------------------------------------------------------------------------------------------------------------
Modifications :
29.06.2011 : 00:03 : Ajout d'un design CSS
Les monos de Jarril et de Tibékamer
Messages :
