Cours de EnYa [Fermé]

Coucou !

Je te souhaite la bienvenue dans ma classe

De rien !

Donc pour commencer, tu pourrais me dire si tu y connais déjà quelque chose en site web ? Ou si c'est du chinois ^^

Ensuite, tu voudrais faire un site sur quoi ?

Oki

Alors on va commencer du tout début

Donc d'abord, il te faut télécharger NVu et Notepad++. Ce sont deux logiciels dont tu auras besoin. Si tu as le bloc-note sur ton ordi, ça peut remplacer Notepad++ si tu préfères.

D'accord

Donc la première étape pour faire un site, c'est de créer le design. Sur ce point, je ne sais pas si tu sais comment en faire un, puisque ça relève plutôt du graphsime, et moins du web.

Alors je t'explique en quelques lignes le principe, question que tu saches quoi faire

Donc déjà, un design, à la base, c'est une grande créa ^^ Par contre, on la "coupe" souvent en plusieurs partie afin que ce soit plus facile à coder. Coder, ça veut dire mettre le design pour ton site, avec la possibilité de mettre du texte dessus et autres

Donc comme je l'ai dit, on va faire ça en deux parties. Je te poste un exemple qu'un de mes élèves avait fait pour son site.

D'abord ce qu'on appelle le fond :
http://apu.mabul.org/up/apu/2008/07/10/img-215033v45rf.png
En fait, tu as un petite partie à gauche, où tu mets comme couleur la couleur que tu voudras pour le fond de page de ton site. Ensuite, sur l'exemple, il y a une partie noir (c'est à l'endroit où il y aura le texte sur ton site). Puis de nouveau la couleur de fond de page à droite. Tu peux reprendre les mêmes tailles que l'exemples que je t'ai donné.

Deuxièmement, il y a le "header". C'est en fait un blend.
Exemple qui va avec le fond :
http://apu.mabul.org/up/apu/2008/07/10/img-214951qia8n.png

Ca, tu fais la hauteur que tu veux. Pour la largeur, le header doit avoir la même largeur que la colonne "du milieu" qu'il y a dans ton fond. Sur l'exemple que je t'ai donné, tu as la partie noir qui fait xxx pixels. La largeur du header est aussi la taille xxx pixels.

Pour le texte, tu pourras toujours en rajouter après Sinon, c'est très beau ce que tu as fait !

Pour les tailles, ça joue parfaitement. Je vien sde contrôlé.

Sinon, j'ai juste mis un bout de ton fond à droite du header. Ca sert à faciliter le codage.

Donc tu as ton header :

https://nsa03.casimages.com/img/2008/10/23//081023022654644899.png

et ton fond :

https://nsa03.casimages.com/img/2008/10/23/081023012844188140.png

Sinon, est-ce que tu as déjà un hébergeur ou pas ?

Alors pour Free, t'inquiète pas, pour moi ça ne fonctionne pas non plus, étant donné que je vis en Suisse

Sinon, pour les infos que tu as mis entre parenthèse dans ton message. Les 100mo, c'est "l'espace" dont tu disposes pour mettre tes fichiers. FTP, on verra ça plus tard ^^ Php, ça veut dire que l'hébergeur accepte le php. Avant, il y en avait très peu qui acceptait le php, mais maintenant, il y a ça dans la plupart. ET pour finir Mysql, ça veut dire que tu diposes d'une base de donnée. Mais bon, t'inquiète pas si tu comprends pas tout, c'est pas vraiment important

Sinon, ce que je peux te conseiller... je sais pas trop. J'en ai essayé des tonnes, mais souvent de ceux qui n'existent plus.

Beaucoup de gens prennent Voila, mais je n'ai jamais créé de compte dessus, donc je ne sais pas exactement comment ça marche.

LIEN : http://monsite.voila.fr/produit/boot/accueil.shtml

Après, ben faut chercher un peu. Et je te dis pas les heures que j'ai passé à chercher des hébergeurs

Tous vont ^^

Maintenant que je vois le nom, c'est vrai que j'en ai déjà entendu parlé

Donc on en arrive au fameux FTP. En fait, c'est une sorte de "technologie" qui te permet de transférer tes pages internet (et images...) de ton ordinateur au serveur (c'est ton hébergeur). Ainsi, tout le monde peut le voir.

Donc par contre, je ne sais pas si tu es sous Mac ou si tu as windows (à ce moment-là quelle système d'exploitation ?). Parce qu'il existe plusieurs logiciel FTP, mais qui ne marche pas tous sur tous les systèmes.

Oki. Alors tu tombes piles sur celui que je n'ai jamais eu ^^

Essaie alors avec le logiciel Filezilla (ne fonctionne pas sous vista !)
Tu peux le télécharger ici : http://www.clubic.com/telecharger-fiche11141-filezilla.html
et tu l'installes. Si tu y arrives, c'est que ça marche sous XP ^^ Et je t'expliquerai la suite.

Oki. Donc maintenant, il va falloir entrer quelques informations dans le logiciel pour que tu puisses l'utiliser.

Est-ce qu'on t'a envoyé un mail lorsque tu t'es enregistée sur l'hébergeur ? Si oui, ce serait possible que tu m'envoies les infos afin que j'essaie sur mon FTP ? Parce que d'un hébergeur à l'autre, on ne doit pas toujours entrer les mêmes infos. Du coup, n'ayant jamais utilisé olympe-network, je peux pas te dire ce qu'il faut entrer sans essayer

Tu m'envoies par MP

J'ai vu ça. Je t'ai répond par MP sur la démarche à suivre.

Je t'ai répondu au MP

Donc on va continuer le site maintenant

Donc on va coder le design, c'est-à-dire faire en sorte qu'on puisse écrire dessus, que ça devient une page internet en fait ^^

Je te préviens tout de suite. Ca parait vraiment pas facile au premier abord, ce qui est tout à fait vrai. Mais avec un petit peu d'habitude, ça devient vite très clair. Donc surtout, pas de soucis si tu ne comprends pas tout.

Dernière petite recommendation ^^ Quand on fait du html, tu risques dans 90% des cas d'avoir fait une petite boulette dans ton code. Et en html, il suffit que tu oublies un > pour que toute la page ne fonctionne pas. Donc surtout ne pas s'en faire si ça ne marche pas du premier coup ^^

Bon, assez de blabla. On passe aux choses sérieuses

Tu vas ouvrir un nouveau document dans Notepad++, que tu vas enregistrez sous le nom : index.html

Pour coder le design, on ne peut pas utiliser Nvu (c'est un logiciel qui facilite grandement la vie des personnes qui font un site ^^) Mais après on pourra l'utiliser.

Je te mets le code source de la page index.html, en t'expliquant à quoi sert chaque élément. Tu vas donc copier ce code et le coiper sur ta page index.html (sur Notepad++)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title>TITRE DE TON SITE</title>

<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body leftmargin="0" topmargin="0" style="background-image: url(FOND.PNG);" marginheight="0" marginwidth="0">


<img src="HEADER.PNG" alt="" border="0" height="120" width="785">

<div id="droite" style="position: absolute; left: 254px; top: 350px;"><iframe src="home.html" name="home" align="middle" frameborder="0" height="1650" width="526"></iframe></div>

<div id="gauche" style="position: absolute; left: 30px; top: 350px;"><iframe src="gauche.html" name="gauche" align="middle" frameborder="0" height="1650" width="220"></iframe></div>

</body>
</html>

Le Doctype et tout le tralala en haut, c'est simplement pour indiquer plusieurs informations au navigateur, comme la langue dans laquelle la page est écrite, les caractères spéciaux utilisés à cause de cette langue, comme le "è", le "é"...

Ensuite, on ouvre la balise <head>. Dans cette balise, on mettra d'autres informations, comme le titre de la page et le fichier CSS. Où il y a écrit "TITRE DE TON SITE", tu changes en fonction de ce que tu veux mettre. La balise <head> est refermée après le fichier CSS.

On ouvre ensuite la balise <body>. Dans cette balise, on définit l'image de fond. Dans le code, c'est écrit FOND.PNG, tu le remplaces par ton fond. (donc ça : https://nsa03.casimages.com/img/2008/10/23/081023012844188140.png)

Toujours dans le body, il va falloir régler marginheight="0" marginwidth="0" -> heightmargin, tu laisse à zéro (distance entre le haut de la ta page et le header). Le widthmargin, c'est la distance entre la gauche de la fenêtre et ton header. Laisse à zéro aussi.

Ensuite, on insère une image avec la balise <img>. Ce sera le header. A la place de HEADER.PNG, tu vas metter le lien vers ton header. Dans la même ligne, tu changes le "height" et le "width". Height est la hauteur de ton header, et width est la largeur de ton header. (le lien de ton header est : https://nsa03.casimages.com/img/2008/10/23//081023022654644899.png)

-----------------

Ensuite, les <div> servent à mettre en place les i-frames. Le "id", c'est en fait un nom que tu donnes aux deux i-frames. En général, j'appelle la colonne de gauche "gauche" et celle de droite "droite". Ca évite de se perdre Il faut régler également le left (distance entre la gauche de ta page et l'-iframe) et le top (distance entre le haut de ta page et le début de l'i-frame). Ensuite, dans la balise <div>, on ouvre celle de l-iframe. Là tu règles la hauteur et la largeur de tes i-frames et tu leur donnes un nom -> name="NOM".

Dans la balise <i-frame>, il y a écrit src ="PAGE.HTML". Entre les ", tu vas mettre le nom de la page qui doit s'ouvrir dans l'i-frame.

Et tu fais de même avec la deuxième

Puis on referme la balise <body> et la balise <html>

Tout ce que j'ai écrit en majuscule, tu l'écris en minuscule

A partir de l'endroit où j'ai mis ---------------, tu ne fais pas. Je regarderais moi, parce qu'en général, ça prend une semaine à comprendre autrement ^^ Ca viendra à force de faire, t'inqiète pas

Dernier petit truc, tout ce que tu fais pour ton site, tu l'enregistres dans un dossier (qu'un seul)

Alors déjà, pour que je puisse voir, il faut héberger tout ça

Donc tu vas sur Filezilla, tu te connectes (je t'ai dit par MP comment faire). Quand tu es connectée, tu cherches, dans la colonne de droite, le dossier où tu as enregistré ta page index.html. Tu l'ouvres (le dossier donc ^^) Et après tu glisses le fichier index.html dans la colonne de droite (donc sur ton serveur).

Ah, et dernière chose, tu me donnes l'adresse de ton site ^^