Introduction
Bonjour ou bonsoir selon votre créneau horaire, c'est Yami qui vous parle.
Récemment, j'ai parlé de créer un site personnel de A à Z sur le domaine suivant:
http://yami-works.com Mais voilà, comme je trouve complètement débile et égoïste de ne pas partager ses techniques ou sa compétence, et accessoirement aussi parce qu'
enseigner est le meilleur moyen d'apprendre, voici le
premier tuto de la section DO IT YAMI!
Ici, je vais vous donner des clés pour créer vos propres sites, en vous montrant comment je fais pour le mien.Pré-requis et objectifs
Il vous faudra juste installer le logiciel
Notepad++ sur votre ordinateur (selon moi, c'est le plus ergonomique pour coder). VOUS POUVEZ TOUT AUSSI BIEN LE FAIRE SUR UN BLOC-NOTES, mais la raison pour laquelle je choisis Notepad, c'est parce qu'il reconnaît le code HTML et qu'il le classifie en couleurs, ce qui est plus pratique à l’œil. C'est à partir de ce log qu'on va créer la première page. L'objectif ici est de
créer un portail qui sépare votre site en deux parties principales (ou plus, si vous voulez adapter mes instructions à vos besoins).
C'est parti!
Commencez par créer un dossier qui portera le nom de votre site (ici, pour moi, ce sera "YAMI WORKS"). Ouvrez Notepad++ et enregistrez un fichier que vous appellerez "index.html" dans le dossier en question!
- Ça donne ça:
La première ligne d'une page web sera toujours:
- Code:
-
<!DOCTYPE html>
C'est l'instruction qui indique au navigateur que votre page est bien une page web.
Nous allons maintenant passer au code HTML en lui-même, et étudier les
balises.
Nos balises, ça se présentera sous cette forme:
- Code:
-
<balise>
CODE
</balise>
La balise, c'est une classification arbitraire, c'est-à-dire qu'elle peut avoir le nom qu'on veut, mais il faut également savoir qu'il existe des noms de balises qui ont des rôles bien définis pour le navigateur. La balise sert à classifier et à contenir une portion de code.
En sautant une ligne après l'instruction
<!DOCTYPE html>, on va donc créer la première balise de la page qui s'appellera
HEAD. Pour faire court, c'est ce qui sera lu et interprété en premier par le navigateur. Cela s'écrit ainsi:
- Code:
-
<!DOCTYPE html>
<head>
CODE
</head>
Contenu de la balise HEAD
1/LE FAVICON: - Code:
-
<link rel="icon" href="nom_de_votre_fichier.ico" />
C'est la petite icône qui s'affiche sur vos onglets dans votre navigateur. Normalement, un favicon fait 16*16 pixels et doit impérativement être enregistré dans votre dossier en format "ico". Voici quelques exemples de favicons connus:
Pour ma part, j'ai fait ça avec THE GIMP:
2/LE TITRE: - Code:
-
<TITLE>
BIENVENUE SUR MON SITE LES AMINCHES (exemple)
</TITLE>
C'est ce qui vient juste après le favicon; dans la balise TITLE, tu inscris le nom de la page, et celui-ci apparaîtra sur l'onglet.
3-LE SON (FACULTATIF): - Code:
-
<embed src="sounds/nom_de_ton_fichier.mp3" autostart="true" loop="true" hidden="true"></embed>
Selon le même principe que le favicon, on va aller chercher un fichier pour que le navigateur le lise. Sauf que cette fois-ci, c'est un fichier sonore. On va placer ce fichier à l'intérieur d'un sous-dossier (un autre dossier créé dans le dossier où vous avez placé "index.html") qu'on appellera "sounds".
C'est un point de repère: Le dossier "sounds" contiendra tous les fichiers sonores de notre site.Pour les non-anglophones:
-Autostart indique que votre fichier est lu automatiquement.
-Loop indique que votre fichier fait une boucle.
-Hidden indique que votre fichier est caché.
Si vous voulez changer ces valeurs, remplacez le mot "true" par "false".
En ce qui me concerne, je vais aller chercher le rire de Light Yagami en version française et le mettre en fond sonore sur mon site, pour donner une petite ambiance malsaine et dérangée. 4-LE META CHARSET: - Code:
-
<meta charset="UTF-8">
C'est la balise qui dit quels caractères ton site va afficher. L'UTF-8 est aujourd'hui le plus répandu car il permet d'afficher pratiquement tous les caractères de la planète.
Créer un fond extensible sur votre page
Ok! Si vous m'avez bien suivi jusqu'à présent, votre page HTML devrait ressembler à ça:
- Code:
-
<!DOCTYPE html>
<head>
<link rel="icon" href="nom_de_votre_fichier.ico" />
<TITLE>
BIENVENUE SUR MON SITE LES AMINCHES (exemple)
</TITLE>
<embed src="sounds/nom_de_ton_fichier.mp3" autostart="true" loop="true" hidden="true"></embed>
<meta charset="UTF-8">
</head>
Maintenant, vous allez enregistrer votre page, si ce n'est déjà fait et l'ouvrir avec un navigateur web.
- Voilà ce que ça devrait donner:
Vous voyez donc mon logo, ainsi qu'une petite phrase ("Bienvenue dans mon monde, petites putes.") et on entend également le rire creepy de Light Yagami en VF.
Seul gros problème:
LE SITE N'A PAS ENCORE DE CONTENU. Mais on va vite remédier à ça en y ajoutant une
IMAGE DE FOND! Pour cela, j'ai redessiné un extrait de ma bande dessinée (Door To Darkness).
Il faut bien veiller à ce que l'image soit plus large que haute, pour l'effet panoramique. Pour ne pas trop perdre en qualité, il est également primordial de travailler sur de grandes dimensions et en format PNG.
Une fois votre image de fond prête, vous allez la ranger dans un sous-dossier nommé "pictures": C'est pareil que pour "sounds" et ça vous aide à vous repérer.Ensuite, vous entrez cette portion de code tout à la fin dans votre balise
HEAD:
- Code:
-
<title>Fond extensible</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
Ce code servira à mettre votre image en plein écran, c'est-à-dire que l'image de fond prendra toute la fenêtre et que vous pourrez mettre des trucs par-dessus. Mais le code est incomplet! C'est là qu'intervient un deuxième langage de programmation: Le
CSS!
Fermez votre fichier HTML et dans le dossier de votre site, vous allez créer un nouveau fichier vierge nommé "style.css"! C'est en effet le fichier que votre code HTML appelle, au moment où il est écrit
- Code:
-
href=style.css
Le langage CSS sert à mettre en forme les informations de votre site. Par exemple, c'est le CSS qui va dire si votre texte est rouge, si des colonnes sont à droite ou à gauche, si des éléments du site sont imbriqués dans d'autres, et cætera. On peut grossièrement dire que sans ça, le site est un vulgaire bloc-notes (il est toutefois possible de programmer des sites web fonctionnels sans CSS et seulement avec du HTML, mais c'est nettement plus moche). Bref! Dans votre fichier "style.css", vous allez entrer le code suivant:
- Code:
-
html {
margin:0;
padding:0;
background: url(pictures/VOTRE_IMAGE_DE_FOND.png) no-repeat center fixed;
-webkit-background-size: cover; /*sert aux anciens navigateurs*/
background-size: cover; /*version standardisée*/
}
Je vais maintenant vous expliquer tout ça. Quand un code CSS est compris là-dedans...
- Code:
-
html {
CODE
}
Eh bien, ça veut tout simplement dire qu'il cible TOUTE LA PAGE HTML à laquelle on l'a rattaché. Tous les trucs en-dessous, c'est ce qu'on appelle des
attributs:
-La valeur de MARGIN détermine les marges extérieures d'une page
-La valeur de PADDING détermine les marges intérieures d'une page
-BACKGROUND va chercher votre image de fond. Il est ensuite mentionné qu'il n'y a pas de répétition comme pour un papier-peint, et que l'image est centrée et fixe, c'est à dire qu'elle ne bougera pas si le curseur descend (ce qui ne sera de toute manière pas possible avec la page qu'on configurera, sauf si vous ajoutez du contenu comme du texte par exemple).
-Les deux autres commandes servent à adapter votre fond à plusieurs navigateurs pour éviter les bugs. Vous aurez remarqué les commentaires que j'ai ajouté. Quand vous voulez ajouter un commentaire, vous devez l'écrire ainsi:
/*commentaire*/L'avantage de ce système, c'est encore une fois de se repérer et de mieux s'ordonner dans son code, mais vous pouvez aussi vous en passer.
Enregistrez maintenant votre fichier CSS.
Maintenant qu'on a fait tout ça, on a presque fini notre page! De mon côté, ça a cette tronche-là!
- Quand le fond est posé:
ÉTAPE FINALE: Zones cliquablesParfait! Il ne nous manque plus qu'une chose.
Nous devions faire un portail qui sépare le site en deux. Dans mon cas par exemple, je sépare mon site personnel (YAMI WORKS) du site ILLUSIOCORP sur lequel je veux travailler avec d'autres personnes. Mon truc, c'est la BD.
On va donc faire des images cliquables qui ont la forme de bulles de BD. Comme ceci:
Voici ce que je veux faire: Lorsqu'on cliquera sur la première bulle (à gauche), on ira sur YAMI WORKS. Lorsqu'on cliquera sur la seconde (à droite), on ira sur ILLUSIOCORP. Les deux logos sont dans les bulles de façon à ce qu'on puisse clairement identifier et reconnaître chaque site. Heureusement, il existe un code pour tout ça! On le colle après la balise HEAD... Dans mon cas, voici ce que j'ai écrit:
- Code:
-
<a href="http://illusiocorp.unblog.fr/"> /*L'adresse qui va vers YAMI WORKS, non définitive!*/
<img src="pictures/BULLEYAMIWORKS.png" align="left" alt="YAMI Works." title="YAMI Works." />
</a>
<a href="http://illusiocorp.jimdo.com/"> /*L'adresse qui va vers ILLUSIOCORP, non définitive également!*/
<img src="pictures/BULLEILLUSIOCORP.png" align="right" alt="ILLUSIOCORP" title="ILLUSIOCORP" />
</a>
Vous n'avez qu'à changer les adresses web présentes par les adresses de votre choix. Ensuite vous remplacez des trucs comme "pictures/BULLEILLUSIOCORP.png" par "pictures/nom_de_votre_fichier.png" et enfin, vous indiquez le nom et la nature des liens dans les balises ALT et TITLE qui se trouvent à côté. C'est par exemple utile si vos images ne s'affichent pas à cause du serveur, ou tout simplement si l'internaute veut voir une légende apparaître en laissant sa souris à cet endroit quelques secondes. Enregistrez votre travail, ouvrez le fichier "index.html" avec un navigateur et regardez le résultat. Voilà comment on créée des images cliquables en HTML! Ici, l'une est à gauche de la page et l'autre, à droite! Vous pouvez changer ça sur la propriété "align" en insérant entre les guillements "left" ou "right".
- PORTAIL YAMI-WORKS.COM:
J'espère que ce tutoriel vous aura aidé à créer un portail ergonomique vers vos autres sites. Pour voir mon résultat, vous pouvez cliquer ici!
http://yami-works.comPour le prochain tuto, on réalisera une page d'accueil, des conteneurs et des menus déroulants en travaillant toujours à partir du site YAMI WORKS.
