[ENCORE] Tutoriel HTML

Bonjour
Bon allez j'annonce My Name. . .Je suis Tado, et alors ? u_u
Peut être que il y a des membres qui ne viennent pas de hem hem, alors, pour eux, mon ami le toto est la =)
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 principale
Voila, 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:

Voila, dans votre bloc-note ou Notepad++ vous devriez avoir ce code la, n'en inventez pas sa sert a rien de rêvez Razz
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 Razz
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 Razz 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:

Voila, on fout comme avant, on sauvegarde et on regarde le résultat...
OOOO MAGNIFIQUE !!!
UN TEXTE Very Happy
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:

Voila, regardez le résultat, sa fait un beau poémes non , =D

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:

Style de texte
Voila, 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 :
^ème

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 liens
Rebonjour ami Nindonien !'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:

Pour l'instant, c'est rien, on a fait seulement 1/5 du toto sur tout les liens...pas mal hein Razz

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:

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:

Intéressant hein ^^
Avec un peu de gentillesse, vous pourrez nous faire un beau site de Shinobi hein :O

Maintenant, mettons cette image avec encore une bulle d'aide comme le lien :
<img src="https://shinobi-no-nindo.1fr1.net/forum.htm" alt="Bannière Nindo" 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 :
<a href="http://shinobi-sensou.1fr1.net/forum.htm"><img src="https://shinobi-no-nindo.1fr1.net/forum.htm" alt="Bannière Nindo 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écor

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

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 :

<p class="chuchoter">PUREE !!! JE SUIS OBLIGER DE PARLER AUSSI DOUCEMENT, JE CHUCHOTE EN MAJUSCULE MAIS ON VOIT EN MINUSCULE</p>

Texte soulignée :
<span class="souligne">Texte soulignée</span>

Texte barée :

<span class="barre">Texte barrant</span>
Voila, vous avez tout sur les style de texte Razz
En avant pour la couleur de fond !!

Le fond :



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

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 :

body
{
background-image: url("*"); /* On retrouve notre image bien aimée Razz */
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 No Nindo , mais un vrai site, pas un forumactif


Voila commençons, je vais vous mettre le code total...

<!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épasse la totale se texte ^^')

Et bien Sacourd je pense que je vais me resservir de ton Tuto pour faire le site de SNN .

Enfin, tu es Tado mais c'est pas grave, si tu fais pas l'imbécile tu es pardonné ^^.

Okay, merci, sinon du pourrait s'il te plaît, éditez le message sur SSS et copiez collez sur se sujet ^^'
C'est un peu casse tête de tout copiez collez avec le spoiler x)
Merci d'avance

Euh désolé mais je pense pas avoir le temps.

VOILA LA SUITE TU TOTO !!!!

Spoiler:

Voila, on va continuer....
Maintenant, ajoutons la bannière, sinon c'est moche, snif
Bon, maintenant, en même temps que la bannière, ajoutons "Le style"...

Voila, créez les balises <style> et </style> comme prévu
Ensuite, en CSS, mettez se code la :

Spoiler:

Voila, on a 'presque' tout se qui faut ^^

Maintenant, on va faire un style au menu, pour sa il vous faut une image, très petite qui pourrait faire une bordure ( largeur + hauteur + largeur + hauteur )
Moi j'ai la flemme de m'en créez une, c'est a vous d'en créez une, pas a moi !! Twisted Evil

Voila le code a ajouter :

Spoiler:

Voila, on a tout sur le menu et la bannière et le fond et tout, mais...ET LE CORPS ???
On va le mettre tout de suite, voila le code a rajouter :

Spoiler:

Voila, comme on peut le dire...
THE END
Enfin, pas tout a fait
Il reste plein de truc avant, on a même pas fait 6/3 du cours hein u_u on a fait que...hein ? 5/200 ???!!!!!
Pas de panique, je vais créez un autre toto pour le PHP et le java et le flash, pour faire un site du genre google ^^'
Voila, le code pour terminer le HTML ! :

Spoiler:

Voila, c'est enfin TERMINER LE HTML


Voila, maintenant on va faire le toto PHP, souhaitez moi bonne chance ^^'
Byyyyye

waw!!

entout cas si un jour je veut faire un site ce tuto me servira surement

Certainement tu veut dire .
Sinon merci a toi cher ami .

Intéressant le tuto mais il y a quelques petit point que je vais corriger.

Concernant l'encodage, préférez l'utf-8 qui est international à l'iso.

Donc ce donnerai :

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Ensuite concernant le CSS on le place généralement dans le head bien que cela ne change rien en particulié. Mais le mieux reste encore de créer une "feuille de style" (un fichier .css) dans lequel vous mettrez votre contenu CSS.

Et pour associer votre fichier .css à votre fichier .html il suffit de mettre cette balise dans le head.

<link media="screen" rel="stylesheet" src="votre document css.css" type="text/css" />

Ensuite n'oubliez les meta suivants :

<meta name="keywords" content="mot, clé " />
<meta name="description" content="Votre description" />

Dans le meta keyword vous mettrez vos mots clé séparé d'une virgule et dans le meta dscription, bah votre description. ^^

Les meta servent aux moteurs de recherche (google, yahoo, live search, etc) pour le référencement de votre site. Les informations situées dans vos meta seront visible sur les moteurs de recherche.