Tyylde
Nombre de messages : 320
Age : 38
Devise : L'angelo ti protegge
Date d'inscription : 20/07/2006
 | | Sujet: Tutoriel - Création d'un site en HTML Mer 23 Aoû 2006 - 10:30 | |
| - Sweety a écrit:
Tutoriel création d'un site en HTML
1ère partie
On va commencer maintenant par trouver un hébergeur etc... puis on passera au html
1* Il faut choisir un hébergeur. Kekosa? :14: Un hébergeur, c'est ce qui va vour permettre de mettre votre site sur la toile (=Internet). Pour ça, je vais vous conseiller Voilà. C'est pas le top du top, mais c'est déja ça, et puis c'est GRATUIT 
2* Inscrivez vous, sur la page communiquer, à Voilà, puis remplissez tous les champs demandés.
3* Confirmez votre inscription en allant sur votre boîte mail.
4* Connectez vous sous votre compte, puis aller dans "hébergement"
puis "je veux créer un site"
5* Remplissez le champ demandé par le nom de votre site (en respectant les critères) puis cliquez sur "valider"
6* Vous avez un site c'est merveilleux nan? N'empêche que pour l'instant, il ressemble à rien... Cliquez sur "Utiliser le "FTP web""
7* Maintenant ça va commencer à se compliquer, on va utiliser le HTML, accrochez vous :28:
2ème partie
Kekosa? :expi: Le HTML c'est le HyperText Markup Language. Avouez que ça vous aide si je vous dit ça hein? :28: Le langage HTML, c'est un langage "codé", qui vous permettra d'afficher des images, mettre un fond, mettre en gras etc...
A NOTER: Vous ne devez absolument jamais changer le nom "index.html" (sinon je mord  )
8* Cliquez sur "index.html", puis sur "modifier la page". Une fenêtre s'ouvre, supprimez absolument TOUT (clic droit-selectionner tout-supprimer) ce qu'il y a marqué dans "source de la page"! Vous z'inquiétez je vous fais pas faire des bêtises!  Cliquez ensuite sur "valider"
9* Maintenant, vous devez créer un nouveau répertoire, pour cela, cliquez sur "créér un repertoire"
puis appellez le, par exemple, "liens"... (de toutes façons le nom importe peu)
10* Maintenant, cochez la case "index.html"
cliquez sur "duppliquer" (dans gestions des fichiers) puis cliquez sur "liens" (le merveilleux repertoire que vous venez de créer) et enfin, cliquez sur "valider".
11* Maintenant, vous pouvez vérifiez dans votre repertoire, oh magique, une autre page "index.html" y est. Bref, revenons sur la VRAIE page index.html, c'est à dire celle avec le petit icône  devant. Allez, vous ouvrez la page (clic sur "index.html" puis sur "modifier la page") et on passe au VRAI HTML.
12* On va d'abord mettre un fond, et donner un titre à votr page. (je le rappelle toujours tout blanc!  )
Je dois d'abord vous dire que le HTML fonctionne par balises, c'est ce qui indique la nature du texte (par exemple la balise <i>texte</i> met le
texte en italique!).
Pour commencer, vous allez faire un copier coller de ce code, après bien sûr avoir changé les informations nécessaires
- Code:
-
<HEAD>
<TITLE> Titre de votre site</TITLE>
</HEAD>
<BODY>
Ce que vous mettrez comme texte sera uniquement ici! Tout ce qui sera visible sur votre page en gros, donc laissez toujours la balise "</body>" en bas!
</BODY>
Cliquez sur "valider".
QUOI???!!?? Elle m'a dit de mettre mon titre mais il n'apparaît pas sur ma page!
C'est normal, il est en haut, regardez:
A noter que pour voir un aperçu de votre site, il faut cliquez sur "visualiser la page"
Bon, n'empêche c'est vide. Et si on mettait un fond?
13* Maintenant, on VA mettre un fond.
Pour le fond, vous avez le choix entre une couleur unie (trouvez tous les codes couleurs ICI) ou alors, mettre une image (et pour les fonds en image, je vous conseille Freegaïa poyr y trouver votre bonheur)
N'essayez pas de mettre un fond en couleur et un fond en image vous pourrez pas :28: Choississez un des deux.
Bien sûr, dans les deux cas, vous devez revenir sur voilà, et cliquer sur "modifier la page".
AHHHHH horreur y'a du texte en plus!!
C'est quoi cet horreur à la fin?
- Code:
-
<script language='javascript'>document.write('<img src="http://monsite.voila.fr/servlets/istat?site=exempledesite&page=/liens/index.html&outil=ftpweb&n=' + Math.round(Math.random()*100000) + '" width=1 height=1>'); </script> <script language='javascript'>document.write('<img src="http://e.voila.fr/cgi-bin/ft/10000033638?&page=exempledesite_index.html&n=' + Math.round(Math.random()*100000) + '" width=1 height=1>');</script></body> </html> Non je vous rassures, rien de grave, c'est voilà qui est très très intelligent, qui le met à votre place n'en tenez pas compte!
Bon revenons à notre fond.
Pour le fond en couleur (ceux qui veulent un fond en image, sautez cette étape)
- Code:
-
<body bgcolor="codedevotrecouleur">
Par exemple pour un fond bleu clair:
<body bgcolor="#00CCFF">
et vous copiez ça dans votre page.
Ca donne:
Je le répète, vous pouvez modifier le code de cette couleur par n'importe laquelle!
Pour le fond en image (ceux qui ont un fond en couleur, sautez cette étape)
Le code à insérer est:
- Code:
-
<body background="urldevotreimage">
Par exemple:
<body background="http://www.freegaia.com/fondweb/fonds/605.gif">
Ca donne ça:
Bon, n'empêche, y'a beau avoir un fond c'est pas génial génial...
14* Je fais ce point en plus pour vous avertir de quelquechose d'important, il y a une balise pour revenir à la ligne dans le texte.
Il s'agit de - Code:
-
<br> à mettre devant le texte retourné à la ligne, car en HTML, vous aurez beau appuyer sur "Entrée", ça n'y changera rien 
Par exemple:
- Code:
-
texte bla bla
<br> bla bla donne
texte bla bla
bla bla
Tandis que :
- Code:
-
texte bla bla
bla bla donne
texte bla bla bla bla
15* Des effets sur le texte
Quelques codes qui vous permettront de faire des effets sur le texte:
- Code:
-
<b>texte</b> donne texte (en gras)
- Code:
-
<i>texte</i> donne texte (en italique)
- Code:
-
<u>texte</u> donne texte (souligné)
- Code:
-
<p> paragraphe</p> donne un paragraphe, mais ce code n'est pas super important, vous pouvez vous en passer...
- Code:
-
<align="right>texte</align> aligne le texte à doite (marche aussi avec "center" et "left")
- Code:
-
<center>texte</center> centre le texte
- Code:
-
<h1>Votre texte</h1> pour mettre une taille différente, les tailles allant de 1 à 6, 1 la plus grande et 6 la plus petite
ou
- Code:
-
<FONT SIZE=?>texte</FONT> pour la taille
- Code:
-
<FONT COLOR="code couleur">texte</FONT> pour mettre un texte en couleur, en reprenant les codes couleurs que j'ai donné plus haut
16* Les images
Le code pour mettre une image est:
- Code:
-
<img src="urldelimage"> Par exemple:
<img src="http://www.forum-monharas.com/forum/templates/subSilver/images/Logo_forum.jpg">
donne:
17* Bon aller, les liens et j'arrête:
Comment faire un lien? C'est une grande question n'est ce pas? 
Pour que la page s'ouvre dans la même fenêtre
- Code:
-
<A HREF="nomdelapage.html">Nom souhaité</A>
ou alors:
- Code:
-
<A HREF="url de la page">Nom souhaité</A>
Pour que la page s'ouvre dans une autre fenêtre:
- Code:
-
<a href="url de la page" target="_blank">Nom souhaité</a>
18* Mise en pratique
Vous vous rappellez de cette page qu'on a créée au début, et qu'on a mis dans le repertoire ("liens")!
Elle va faire une page du site, donc on va d'abord:
-aller dans le repertoire ("Liens")
-cliquez sur la page qui s'appelle toujours "index.html"
-la renommer "page1.html" par exemple. Vous pouvez lui donner n'importe quel nom tant que ça finit par ".html"
-cocher la case devant "page1.html"
-cliquer sur "déplacer"
-puis "retour"
et enfin "valider"
maintenant retourner sur la page où il y a le repertoire, la page d'index et la nouvelle page 1
cliquer sur "index.html"
"modifier la page"
puis, pour faire un lien vers la nouvelle page 1:
- Code:
-
<A HREF="page1.html">Page1</A> Et voilà!
Vous pouvez modifier la page 1 sous le modéle de l'index, puis créer pleins d'autres pages si ça vous plaît!
19* Le dernier truc je vous promet 
Maintenant, c'est bien beau, mais comment voir votre page?
Faciiiilllleee!
Cliquez sur "Retour à l'acceuil"
puis dans "accès membres"
vous verrez un lien vers votre site!
Astuce: Pour éviter qu'il y ait la barre voilà en haut de votre site, rajouter cette extension à la fin de l'adresse url de votre site "index.html".
Et voilà vous avez FINI!!!!
*ouf* c'était long hein? :expi:
Bien sûr, vous n'avez vu qu'une petite partie du HTML, et vous ne savez faire qu'une page assez simple. Mais n'hésitez pas à me demander de l'aide, sur ce topic ou par mp.
PS: vous avez toujours ce site pour revoir vos acquis! | |
|
