Bonjour
Je tiens a préciser avant se message, que je suis Tado, c'est mon anniversaire aujourd'hui alors j'ai décider de revenir aujourd'hui...
Bon je vais le poster, on a pas que sa a foutre de faire des présentations alors qu'on se connait déjà...
Le logiciel a utilisez est...Le logiciel a utilisez est un logiciel que tout le monde connaît, vous ne me croyez pas ? Bah je ment pas u_u il s'agit de ( attention sa va décoller )
Bloc Note...
Personne n'est mort ? Mais il n'existe pas que Bloc Note, moi, perso j'utilise Notepad++...
Il est efficace et il peut utilisez plusieurs language informatique a la fois, moi j'ai la flemme de vous donner le lien de téléchargement, cherchez le tout seul
Le code HTML principaleVoila, le code HTML principale est très grand, peut être très beau mais qui fait un truc pas beau...
Voici a quoi ressemble le début d'un code HTML...
- Spoiler:
<!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>Tutoriel de Tado ;D</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Voila, dans votre bloc-note ou Notepad++ vous devriez avoir ce code la, n'en inventez pas sa sert a rien de rêvez
Maintenant, on s'attend a un très beau résultat du genre, une pageméga colorée bannière et tout...
Mais bon, voyons se que cela fait, pour sa, il faut l'enregistrer sous :
Ou vous vouler
Et ensuite comme type choisissez HTML.
Voila, c'est dans la poche, maintenant, cliquer sur votre sauvegarde, et SURPRISE il y a rien du tout, c'est tout moche, tout blanc...
Mais bon, pas la peine de se décourager, bientot vous pourrez peut être faire un hébergeur comme forumactif...qui sait ?...
J'ai enlever la page de l'édition de mon site, je doit tout recommencer ? 
Non, pas la peine de se mettre dans tout ses états, la meilleur méthode est de voir le fichier HTML enregistrer, clique droit, ensuite on clique sur Notepad++...
Vous pouvez même éditer le site des autres
mais c'est pas très gentil...On peut aussi gagner des comptes sur DOFUS ! héhé bon on arrête se plan machiavélique...
Comment améliorer un site ? Voila, maintenant, on va avoir nos premier code pour faire des textes et tout et tout...
Voila, on va mettre nos premiers code, voila se que vous pouvez mettre pour mettre quelques choses sur du blanc
:
- Spoiler:
<!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>Tutoriel de Tado ;D</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>
Bienvenue sur le tutoriel HTML de Shinobi Sen'Sou !!!
Vous apprendrez beaucoup de méga super trucs, avec moi bien sur
N'oubliez pas de vous inscrire avant de regardez se message, voila c'est tout, byyyyye ;D
</p>
<p>Aussi, les 2administrateur son Picom et GegeOff, ils sont génial, vous pouvez vous inscrire ici ! :
https://shinobi-sensou.1fr1.net/forum.htm </body>
</html>
Voila, on fout comme avant, on sauvegarde et on regarde le résultat...
OOOO MAGNIFIQUE !!!
UN TEXTE
Vous avez espérez se moment n'est ce pas ^^
Voila, maintenant vous connaissez les principes du langage HTML ;D
De beau paragraphe !!Voila, on va maintenant apprendre a faire de beauuu paragraphe, si vous voulez faire un site de poèmes
Voila le code nécessaire :
- Spoiler:
<!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>Tutoriel de Tado ;D</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Le Corbeau et le Renard</h1>
<p>Voici ce qui est sans aucun doute une des plus connues fables de <em>La Fontaine</em> :</p>
<blockquote>
<p>
Il y a bien longtemps,<br />
Un démon renard a neuf queue.<br />
Terrorisez le village de Konoha,<br />
Mais heureusement un homme<br />
Nommée Yondaime sauva le village de Konoha.<br />
En mettant Kyuubi sur un enfant<br />
Mais cette technique lui fut fatale<br />
Et périt sur la technique<br />
Et débuta alors,<br />
L'histoire d'un enfant nommée Naruto,<br />
Qui voulu être Hokage<br />
</p>
</blockquote>
</body>
</html>
Voila, regardez le résultat, sa fait un beau poémes non ,
Les titres en gros, c'est assez utile ^^Voila, on va d'abord commencer du plus gros au plus p'tit...
Pour mettre en super gros :
- Spoiler:
Titre principale : <h1>Les Martien attaque !</h1>
2eme titre principale : <h2>Aujourd'hui, 6 Martiens vont dans une boutique de mode !</h2>
Sous-Titre : <h3>Les scientifiques n'y croient pas !</h3>
Petit titre : <h4>L'histoire des Martiens</h4>
Voila, et ainsi de suite avec les numéros
N'oubliez pas une choses étientielle, le premier code est :
- Spoiler:
<!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>Tutoriel de Tado ;D</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Et vous mettrez les titres et les texte après la balises <body>
Sauf pour quelques exceptions, que vous verrez plus tard...
Style de texteVoila, nous allons maintenant apprendre a faire les style de texte ( soulignée et tout... )
Voila, sa va se partager en plusieurs étapes comme on peut s'en douter :p
EN GRAS :<strong>Votre texte en gras</strong>
EN ITALIQUE :<em>Votre texte en italique</em>
POUR FAIRE UN PETIT TRUC DU GENRE 20EME MAIS LE "EME" VERS LE HAUT :<sup>ème</sup>
ACRONYME :<acronym title="eXtensible HyperText Markup Language">Votre texte en acronyme</acronym>
Voila, c'était pour le style de texte ;p
Passons au prochain chapitre S.V.P
Les liensRebonjour ami Sen'Souiens ! J'ai fini ma pizza même si tout le monde s'en fout, mais bon, je voudrais mettre un lien dans mon site pour donner un site de mon marchand de pizza...Mais bon www.pizza.fr dans un site sa fait nul
Il existe un moyen plus beau pour faire sa
Voila un code pour mettre un lien, je met un texte avec
- Spoiler:
<p>Super ! Tado est inscrit a Shinobi Sen'Sou ! C'est un MMORPG 2D-Isométrique bassée sur l"histoire de Naruto, inscrivez vous comme lui ! <a href="https://shinobi-sensou.1fr1.net/forum.htm">Le site dont je vous parle qui est super !</a><br />
N'hésitez pas à aller le visiter, il es vraiment <strong>SUPER</strong></p>
Pour l'instant, c'est rien, on a fait seulement 1/5 du toto sur tout les liens...pas mal hein
Maintenant on va faire un lien, mais pas comme celui que l'on viens de voir, c'est un lien ou il y a une bulle qui donne des information sur la cible....
Voila le code :
- Spoiler:
<a href="https://shinobi-sensou.1fr1.net/forum.htm" title="Inscrit toi :p">Shinobi Sen'Sou</a></p>
Il ressemble a l'autre mais il a une utilité plus jolie en plus
Maintenant, apprenons a mettre une image...
Sa peut être méga jolie, car un site sans image c'est...c'est...heu...Ah oui, con !
Voila une image que vous connaissez tous :
Voila, comme tout le monde s'en doute, tout le monde la connaît ^^
Maintenant on va apprendre a le mettre dans un site web...
Pour mettre cette image dans un site web, on doit mettre le code suivant :
- Spoiler:
<img src="https://2img.net/r/ihimizer/img514/3888/bannieressshj2.png" alt="Bannière Sen'Sou" />
Intéressant hein ^^
Avec un peu de gentillesse, vous pourrez nous faire un beau site de Shinobi Sen'Sou hein :O
Maintenant, mettons cette image avec encore une bulle d'aide comme le lien :
- Spoiler:
<img src="https://2img.net/r/ihimizer/img514/3888/bannieressshj2.png" alt="Bannière Sen'Sou" title="Belle Bannière je trouve :p" />
Voila, maintenant on a réussi a mettre une image, mais, quand on clique une bannière, on a un lien ensuite o_O
Pas de panique, voila un petit coup de pouce, voila le code a insérez :
- Spoiler:
<a href="https://shinobi-sensou.1fr1.net/forum.htm"><img src="https://2img.net/r/ihimizer/img514/3888/bannieressshj2.png" alt="Bannière Sen'Sou" title="Cliquez pour venir au fofo ;D" /></a>
Voila, vous connaissez tout sur les liens...Maintenant passons a la principalitée d'un site web !!
Le décor, le fond c'est a dire !!!
Le décorAvant tout, je vous donne le nom du décor que on utilise dans un site web, on appelle sa le CSS (Cascading Style Sheets) autrement dit : Feuille de style.
Le CSS se met en place avec le HTML, on le met dans le code, a vrai dire, on le met ici ( regarder ou sont les trois 3 )
- Spoiler:
<!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>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<style>//On ajoute une balise
333
</style>
</body>
</html>
Voila, rien de plus dur, mais le plus dur c'est a mettre le code bien sur :p
Voila, c'était juste un chapitre pour expliquer c'est quoi le CSS :p
Maintenant, préparez vos mitraillette, sa va barder
Un texte fait entièrement en CSS !J'espère que vous avez préparez les mitraillettes, sa va barder un MAXXXX !
Voila, je vais vous faire de la Magie, vous écrivez un texte en majuscule ils apparaitras en minuscule o_O
Je sais, sa sert que a foutre n'importe, mais bon, voila le code :
- Spoiler:
<p class="chuchoter">PUREE !!! JE SUIS OBLIGER DE PARLER AUSSI DOUCEMENT, JE CHUCHOTE EN MAJUSCULE MAIS ON VOIT EN MINUSCULE</p>
Texte soulignée :- Spoiler:
<span class="souligne">Texte soulignée</span>
Texte barée :- Spoiler:
<span class="barre">Texte barrant</span>
Voila, vous avez tout sur les style de texte
En avant pour la couleur de fond !!
Le fond :- Spoiler:
body /* N'oubliez pas, avant la couleur de fond il faut mettre cette balise !!!! */
{
background-color: blue; /* Le fond de la page sera bleu */
color: green; /* Le texte est vert comme l'herbe */
}
Voila, on teste avec un texte et voila...
Maintenant, on va faire un fond multipliée, c'est a dire plusieurs fond en même temps, je vais prendre une image n'importe laquelle, allez la bannière encore
C'est pour les sites de poèmes, comme je vous en ai parlez au début
- Spoiler:
body
{
background-image: url("https://2img.net/r/ihimizer/img514/3888/bannieressshj2.png");
background-attachment: fixed;
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p
{
text-align: justify;
text-indent: 25px;
}
On teste, et il y a des milliard de bannière au fond
Mais bon, mieux vaut en avoir qu'une seul qu'un milliardène !
Voila le code pour qu'une seul bannière en haut a droite :
- Spoiler:
body
{
background-image: url("*"); /* On retrouve notre image bien aimée
*/
background-repeat: no-repeat; /* Le fond ne se répète pas */
background-position: top right; /* Le fond est en haut a droite */
background-attachment: fixed;
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p
{
text-align: justify;
text-indent: 25px;
}
Voila, bon maintenant, passons au chapitre le plus important...La création TOTALE d'un site web !!! La, on prépare les bazooka, bombe atomique ect...
La création Total d'un site web !Voila, vous attendez se moment, mais bon, passons a la totale, vous allez créez un vrai site web, pas un truc pourri de mez 2
Voici un style de site web que nous allons créez ^^
( Je met des sites que tout le monde connaît, sa éviteras la pub, désolez je suis obliger pour un exemple ! )
Voici un exemple, JeuxVideo.com !
http://www.jeuxvideo.com/
Ou encore, Shinobi Sen'Sou, mais un vrai site, pas un forumactif
Voila commençons, je vais vous mettre le code total...
- Spoiler:
<!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>Bienvenue sur le toto de Tado ;D</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="en_tete">
<!-- La bannière
</div>
<div id="menu">
<!-- Le menu
</div>
<div id="corps">
<!-- Le texte du site
</div>
<div id="pied_de_page">
<!-- Le petit Copyright ;P
</div>
</body>
</html>
Voila a quoi ressembleras notre site...
Maintenant, on va un peu compléter le site...
Pour bannière, prenons celle du forum...
Bien sûr, c'est celle la dont je vous parle...
Voila pour sa, après la balises en_tête on va mettre se maudit code qui nous soule depuis 1jour :@
Bon, e tout cas je trouve que c'est pas le plus simple...Donc commençons par créez le texte, bon vous avez comment on s'y prend, pas le peine que je vous le disent
Ensuite, le menu, voila se que vous devez normalement mettre :
(Regardez plus bas SVP, sa dépase la totale se texte ^^')
31.08.08 13:31
