Bonjour tout le monde

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


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 :

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" :


Entre les balises

qui définissent un titre de niveau 3, insérez le titre de votre catégorie.

Passons aux sous menus :


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

ou encore

. 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

et

. 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

, il s'agit d'une balise de titre de niveau 2 :

.

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 :



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 !



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 :


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 !



Ç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.



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




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



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 :


Tout d'abord, les titres de type h1 :
- Couleur ;
- Alignement du texte (left, right, center) ;
- Polices.



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

, 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 :



Remplissez les informations , , et
Ensuite copiez collez le code suivant :

Code:

        <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:

<a href="rss.xml">Flux RSS</a>

Ou encore via une image :

Code:

<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

Je me pose la question si passer par un site en spip n'est pas aujourd'hui plus simple et donnant un meilleur rendu rapidement.
Mais là je voudrais l'avis d'autres internautes et c'est un peu hors propos.

Très bon tuto, mais à mon sens développe un peu plus la partie xHTML.
Bon boulot

Spip est utilisé par Knarf mais de tous les retours que j'en ai (et même Knarf sur Twitter) indiquent que c'est une véritable horreur à maintenir. Personnellement, j'ai un très gros coup de coeur pour Wordpress. Mais comme tu le dis très bien, ce n'est pas le sujet puisque ce tutoriel (très bien fait soit dit en passant) s'adresse à ceux qui veulent réaliser leur site eux mêmes.

Le souci avec spip, c'est que l'architecture est déjà complêtement faite, on ne peut pas la modifier comme on veut, tandis qu’ici, si on apprend à mieux se servir de tout ça (peut être que je le développerais un peu plus, même si ce n'est pas le but premier du tuto) on peut faire "ce que l'on veut".

Le principe est d'arriver à se débrouiller indépendamment d'autres outils, sinon je pourrais dire d'aller créer un compte chez e-monsite et voila

Mais là, c'est vraiment pour avoir quelque chose de propre, à soi

EDIT : grillé par Kak
Et merci au passage

C'est une idée que je propose, mais je pense que ce serait beaucoup plus simple de faire appel à un framework pour la structure du site et aussi au niveau sécurité. Ce qu'on pourrait faire, c'est bosser sur un template de framework qui fonctionnera de la même manière pour tout le monde. Après il suffit de modifier le layout (design) en fonction de la saga ou du créateur.

Je dis ça parce que ça peut être chiant pour tous les créateurs de se lancer dans la programmation web alors qu'ils n'en ont pas forcément envie juste pour poster leurs créations alors que d'autres y sont habitués et aiment ça.

Ca pourrait être une idée de projet sympathique je trouve.

Le truc, c'est que je ne pouvais pas ma lancer là dedans, c'est impossible...



Je le redis, c'est pour ça que ce tuto est là, les gens n'ont ainsi pas à aller coder 36 trucs étant donné que le travail est déjà à moitié fait, il ne reste qu'à compléter et ça tiens beaucoup plus de bon sens que de véritable programmation dans ce cas là

Pour le reste, je n'ai donc pas les connaissance requises pour développer un truc comme ça, mais quand je les aurais, t'en fais pas, je tenterais de m'y mettre

Le tuto a quand même été fait pour éviter à la base de voir certains "immondices" (désolés si certains se sentent viser même si il n'y a aucune critique) sur e-monsite, ou je ne sais pas trop où avec des centaines de fenêtres de pubs etc... Ici vous n'avez rien et une certaine impression d'avoir "vraiment" fait quelque chose

Mmmh... je ne suis d'accord qu'à moitié. Dans un sens, c'est vrai qu'avoir juste quelques lignes c'est facile pour la compréhension. De plus, ton tutoriel est sympathique et très bien résumé, mais après tout le monde ne connait pas forcément les soucis d'interprétation du css par les différents navigateurs. Donc quelque part ça le fera forcément revenir sur des tutos et des forums, et ce n'est pas forcément ce qu'il recherche. Et il suffit que le créateur cherche à densifier son espace perso en ajoutant des modules par ci par là pour au final en revenir au même point.

D'où mon idée de faire bosser des développeurs sur un modèle déjà tout fait avec index, page des téléchargements, contacts, plus un espace d'administration pour gérer les news et l'upload de fichiers. l'auteur n'aura plus qu'à changer les images pour son design et voilà.

En gros, ce serait comme un mini-CMS, sauf que c'est pas orienté e-commerce...

Encore une fois, c'est juste une proposition, rien de plus qu'un avis personnel

Déjà, le CSS que j'ai intégré est "interprété de la même façon" par tous les navigateurs (c'est entre guillemets hein ). Le CSS présent n'aura aucun souci dans aucun navigateur (testé et retesté dans Firefox, Safari, Chrome, Opera, IE 6 à 9). Donc je pense que de coté là, il n'y aura aucun problème.

Après si tu veux te lancer dans le framework, vas y, rien ne t'en empêche, ou alors trouve des gens pour le faire, moi j'ai pour le moment pas assez de connaissances là dedans pour faire quoi que ce soit

Mais en attendant que ça soit fait (parce que ça demande énormément de temps, le tuto est là pour ceux qui ont besoin. Si certains veulent faire un framework pour les autres, qu'ils le fassent, franchement ça peut être génial, mais bon, après, faut être vraiment motivé pour se lancer là dedans

Après, même si j'apprécie tes remarques très constructives, je pense pas que ce soit l'objet du topic, mais si tu es motivé et que tu veux en discuter, MP moi, ou par le channel

Merci pour ce tuto très complet et compréhensible, grâce auquel même les incompétents en informatique, les Zéros, tels que moi, peuvent compendre les bases du xHTML et du CSS, et ainsi créer un site simple mais joli, avec tout ce qui est nécessaire pour un créateur de saga mp3. En plus, cela nous aide à agencer les différentes parties de notre site..., on peut aussi désormais mettre des couleurs, des images, des liens, un menu, des titres, sous-titres, sous-sous-titres..., nommer l'onglet..., bref tout ce qui est nécessaire, voire plus!
J'ai remarqué que free n'héberge que des site pour des habitants français. Etant belge, cela m'a posé un petit problème, mais grâce à ceci, j'ai vite pu trouver mon bonheur.
Donc, il me semble, chers débutants, ce tuto est fait pour vous!

Merci beaucoup pour ce tuto ! J'ai enfin pu créer mon site pour ma saga !

Merci beaucoup!
J'ai aussi pu coder le site (le rendu est bof, mais c'est provisoire). J'attends le courrier de Free..

Concernant le rendu bof, je conçois que ce tuto n'apporte qu'une petite base. Un autre est en cours d'écriture reprenant les bases citées plus haut, et des techniques plus avancées pour celles et ceux qui souhaitent (peut-être) quelque chose de plus évolué et de personnel.

- Page 2 -