Cours de melon*

Coucou !

Je te souhaite la bienvenue dans ma classe

Merci =D
et merci beaucoup de m'avoir prise =)

euh jte prévien tout de suite j'y connais rien du tout... ^^"

De rien !

Et puis c'est pas grave si tu n'y connais rien du tout. Tu es là pour apprendre

Alors avant de commencer, il va falloir un hébergeur. Si tu ne sais pas ce que c'est, c'est en fait une sorte d'espace où tu peux mettre tes pages html, afin que tout le monde puisse les voir

Donc je te propose http://www.olympe-network.com/asso/ Je te laisse t'inscrire dessus, et je t'explique la suite après. Tu n'oublieras pas de me donner l'adresse quand tu auras crée

voila c'est fait =)

-> http://melonland.olympe-network.com

Ok. Donc maintenant, il va falloir un logiciel ftp (si ça met un lien sur le ftp, c'est pas moi qui l'ai mis, ça se fait automatiquement... mais ça n'amène à rien)

Mais qu'est-ce qu'un logiciel FTP ? Je t'explique le principe. Tu as créé une adresse sur un hébergeur. Je t'ai expliquer dans le message précédent ce que c'était.

Le logiciel ftp va te permettre de transférer tes pages de ton ordinateur au serveur (=hébergeur), afin que les gens puissent les voir.

Par contre, il faudrait juste que tu me dises quel système d'exploitation tu as, parce que le logiciel à utiliser dépendra de ça.

système d'exploitation??

*hum, désolé de ma débil*té U_U j'y connais pas grand choses aux ordi x) *sors* *

Oki

Alors je suppose déjà que tu travailles sur Windows. Ensuite, par système d'exploitation, j'entends par là Windows XP, Vista... Par contre, je ne saurai pas te dire comment savoir ça.

Peut-être... Quand tu allumes ton ordi, normalement, il doit y avoir un nom Windows quelque chose qui s'affiche. Regarde ce que c'est.

ah okè
j'ai xp

Oki. Alors je te laisse télécharger un logiciel qui Classic FTP (http://www.clubic.com/telecharger-fiche193982-classic-ftp.html)

c'est bon c'est fais ^^

Oki Petite (euh ^^) explication sur le fonctionnement de ce logiciel.

C'est pas très compliqué, je te rassure

Donc tu ouvres ton logiciel En haut à gauche, tu cliques sur le bouton "sites". Une petite fenêtre s'ouvre. Puis tu cliques sur "Add a site". Une fenêtre s'ouvre.

Sous "label", tu mets ce que tu veux. Ca n'a pas d'importance. C'est simplement un nom que tu donnes, afin que le logiciel fasse la différentes entre plusieurs site (mais tu en as qu'un toi )

Sous "FTP server", tu entres ftp.olympe-network.com (ça te mets un lien, mais ce n'est pas moi qui l'est mis, ça se mets automatiquement -> il n'amène à rien ! )

Sous "User name" : ton nom d'utilisateur (que tu as dû recevoir en mail" quand tu t'es inscrite sur olympe-network).
Et ton mot de passe sous "Password".

Tu ne coches PAS "Use secure FTP (...)".

Puis tu cliques sur OK.

Tu peux voir que tu as un "nom" qui est apparu dans la petite fenêtre. Puis tu cliques sur Close.

Donc ensuite, comment faire pour se connecter à ton serveur (c'est l'endroit où tu mets tes pages internet, de façon à ce que les gens puissent venir les voir).

Pour te connecter : en haut à gauche, il y a un bouton "Connect" avec une petite flêche à droite. Tu cliques sur la petite flêche, et tu choisis le "label" que tu avais donné (voir information plus haute). Mais bon, normalement, tu as qu'un seul choix

Pour se déconnecter, c'est le bouton "Disconnect" qui est juste à côté.

Dans la colonne de gauche : ça correspond à ton ordinateur. La colonne de droite, ça correspond à ton serveur.

Pour transférer ton fichier, tu le sélectionnes dans la partie de gauche, puis tu cliques sur la flêche qui va de gauche à droite (entre les deux colonnes). Ton fichier est alors dans le serveur, et tu peux y accéder par internet

okèèè d'acc, j'ai compris =D

Parfait

Alors maintenant, il va falloir faire le design.

Petite explication sur comment t'y prendre

Donc il va falloir faire un header, mais il va aussi falloir s'occuper du fond. C'est pas très compliqué je te rassure Je t'explique en gros comment t'y prendre, et puis tu le feras

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 faire en sorte qu'on puisse mettre du texte, des images, des liens... faire que ça soit une page internet en fait, et non plus une image.

Donc on va faire ça en deux parties. Je te poste un exemple qu'une 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é ou changer, c'est comme tu veux.

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. La hauteur du header, c'est comme tu veux

okè, bon
jvais en faire un dans la soiré ^^'

Oki. Prends seulement ton temps hein

j'ai fait un 'tit truc... c'est pas génial génial, mais bon c'est juste histoire de dire ... ^^"


fond:
https://servimg.com/view/11555948/734

Header:
https://servimg.com/view/11555948/735


voila ^^"

Tu sais, tu pourras toujours rechanger par après

Si tu veux, on fait avec celui-là, et le jour où tu voudras changer, on le fera. Je te rassure, quand on change le design, il n'y a pas besoin de changer toutes les pages. Il suffit de faire des changements dans quelques pages précises, et tout le reste suit

Par contre, tu as utilisé un pattern pour la partie gauche de ton fond ? Si oui, tu pourrais me le poster ici stp ?

Bon, je te mettrai demain soir, voire plutôt vendredi la suite.

Je te souhaite un joyeux noël ! Mange pas trop de chocolat ^^

oui j'ai utilisé un paterns ->



oui on fait avec celui là puis on verra plus tard pour changer :p



Joyeux Noël à toi =D
fais pas de crise de foi :p:p
<3

^^ Merci !

Alors je t'ai collé le header sur un bout du fond. On fait ça pour une question de codage. C'est plus facile à coder de cette manière là, et ça évite qu'il y ait des décalages dans le design chez certaines personnes.

HEADER : https://2img.net/r/ihimizer/img360/2638/headmelonkk9.png

Les tailles sur le fond ne jouaient pas par contre. Je t'ai corrigé ça.

FOND : https://2img.net/r/ihimizer/img117/7201/fondmelonzs0.png

oh okè ba merci =)

Donc maintenant, on va pouvoir coder tout ça, donc faire en sorte que ça devienne une page internet.

Attention, tu vas avoir un bon bout à lire ^^ Juste un petit truc à savoir. Je préfère prévenir, pour pas que vous soyez étonnés. En HTML, il est très très très fréquent que ça ne marche pas du première coup En effet, il suffit qu'il manque un petit signe (par exemple " > " ) dans ton code, pour que tout foire. Donc pas de soucis si ça ne marche pas du premier coup. C'est simplement qu'il y a une petite erreur dans le code.

Pour coder :

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.

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://2img.net/r/ihimizer/img117/7201/fondmelonzs0.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://2img.net/r/ihimizer/img360/2638/headmelonkk9.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'inquiète pas

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

Quand tu as fait ça, tu vas héberger les pages. C'est à dire que tu vas sur Classic FTP. Tu te connectes (le bouton en haut à gauche). Avec Classic FTP, dans la colonne de gauche, tu vas chercher ta page index.html. Tu la sélectionnes, puis tu cliques sur la flêche qui va de gauche à droite (entre les deux colonnes). Et tu penses à te déconnecter après

eeeuh
c'est où Notepad++, ?? u_u

Oulah ^^ Quelle tête en l'air.

Je t'ai même pas précisé les logiciels dont tu aurais besoin ^^

Donc je te laisse télécharger Notepad++ et Nvu. Ce sont deux logiciels gratuits.

aaaaah okè x)
j'étais là mincccce mais où c'est T_T
en même temps j'ai pas trop de jugeote aujourd'hui désolé U___U




euh, c'est quoi marginheight & marginwidth??
et pour le i-frame là
c'est quoi exactement "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."
enfin, c'est quel nom j'ai pas compris enfait xD
*sors*

Alors pour les i-frames tout d'abord, où c'est écrit PAGE.html, oui, c'est la page qui va s'afficher à la base dans ton site. Quand je dis à la base, c'est à dire que c'est la page qui s'affiche quand on arrive sur ton site (après, bien sûre, on peux aller sur d'autre page).

Et pour le marginheight et marginwidth, en fait, ça défini que les design se met tout en haut à gauche de la fenêtre. Il faut laisser à 0 pour les deux.

Ah, et ce serait peut-être bien que je précise ce qu'est une i-frame ^^ Alors, pour faire simple, c'est une page internet intergrée dans une autre page internet