Cours de lily-spiritus

Coucou !

Je te souhaite la bienvenue dans ma classe

Merci
Je pensais pas que tu accepterais aussi vite alors merci beaucoup =)

Comme je l'ai dit, j'ai beaucoup de boulot avec l'école en ce moment. Donc cette semaine, je ne vais pas être énormément présente. Mais après je suis en vacances, donc beaucoup de temps à consacrer à mes élèves

Donc sinon, question que je sois un peu au courant ^^ Tu t'y connais un tant soit peu en site internet, ou c'est du chinois (pour le moment ^^) ?

j'en avait un sur e-monsite mais j'aime pas du tout
et sinon j'ai fait un peu de programmation en seconde
voila --'

Ok. Par programmation... quoi exactement ? Je suppose que tu habites en France... donc le programme scolaire, je n'y connais absolument rien ^^ Je vis en Suisse, et c'est totalement différent sur ce point

Si tu avais déjà un site sur e-monsite... ça t'aidera quand même. Tu connais déjà le principe de certaines choses du coup. Par contre, c'est vrai que c'est limité par rapport au fait de faire un site entier soi-même.

en faite en france en seconde tu as (encore pour l'instant) une option qui s'appelle mpi ou l'on fait de la programmation c'est a dire qu'on ecrit entierement des programmes et qu'apres on les joue, on peut faire par exemple des questionnaires, une calculatrice, des jeux. C'est le baba de ce que font les programmateurs de jeux video
voila si sa t'eclaire

Oki. Merci beaucoup pour cette explication Je ne connaissais pas du tout à vrai dire.

Oki. Donc le HTML, c'est pas vraiment la même chose Le principe est le même (comme pour tous les langages de programmation), mais le langage en soit est complétement différent.

Alors déjà, est-ce que tu as un hébergeur ?

bah je suis aller voir dans tes autres cours et j'ai fait un compte sur olympe network

Oki. Donc déjà tu me donnes l'adresse

Sinon, est-ce que tu as lu des trucs sur les logiciels FTP ou pas ? C'est un logiciel dont tu auras besoin pour transférer tes pages de ton ordi à ton hébergeur. Tu as quel système d'exploitation sur ton ordi ? Parce que ça dépendra alors du logiciel que tu vas utiliser.

Non j'ai rien lu la dessus sinon j'ai vista

et voici l'adresse : http://lilyputiennebook.olympe-network.com

Oki. Alors si tu as vista, il faut que tu utilises un logiciel qui s'appelle Classic ftp . Je te laisse le télécharger (par google). Il est gratuit.

Et puis 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

oki sa c'est bon
c'est le truc que je me demandais car sur e-monsite on fait la composition des pages directement sur le site et la je me demandais ou il fallais aller sur olympe_network --'

Alors là est la différence Avec e-monsite, c'est ce qu'on appelle faire un site "avec un assistant". C'est à dire que la base, ce n'est pas toi qui la fait, mais tu fais que de régler des "choses". Quand tu fais toi-même ton site, tu crées tout de A à Z. Et donc il y a beaucoup plus de possiblités.

Olympe-network, ça sert juste à héberger tes pages. Ca a un peu la même fonction que l'armoir de la cuisine (qui te sert juste à ranger la vaisselle ^^) *oulah... qu'est-ce que je sors pour des conneries là ^^*

mdr
je comprend et t'inquiete les conneries je m'y connais ^^

Bon, deuxièmement, est-ce que tu sais comment t'y prendre pour faire un design ?

design de forum ui car j'en ai deux apres es ce que c'est la meme chose pour un site ?
pour e-monsite je faisait juste un header

Donc il va effectivement 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

oki j'ai compris mais pourquoi le fond n'est qu'une petite barre alors qu'une page peut etre tres grande ? enfin je sais pas si c'est comprehensible se que j'ai ecrit
j'ai fait en utilisant un blend que j'ai fait il n'y a pas longtemps, je prend celui la le temps de creer mon site puis quand celui ci sera fini je referais un autre design

fond et hearder
c'est bon ?

Je regarde après si ça joue, parce que je vais devoir partir là.

Sinon, pour répondre à ta question sur le fond.
En fait, on appelle ça "fond", parce que ça va être utilisé d'une manière spéciale dans la page. Quand tu dénifis, en HTML, une image de fond, elle se répète en largeur et en hauteur, afin de remplir toute ta page.

oki bah le fond va peut etre pas etre super bien alors --'

Alors effectivement, il faudrait que tu refasses le fond en mettant un couleur unie dans la partie du milieu

j'ai conserve la meme taille en essperant que sa marchera

fond

A première vue, la partie fond me semble un peu "grand" par rapport au header. Je regarde ça précisement, et te fais les changements nécessaires si il le faut. J'éditerai.

EDIT :

Alors effectivement, ton fond était super méga hyper large ^^ Je t'ai mis ça comme il faut. Et le header, je l'ai collé sur un bout du fond (ça facilite le codage = faire en sorte que ça devienne des pages internet).

Ton header : https://2img.net/r/ihimizer/img165/4850/40366397zx4.png
Ton fond : https://2img.net/r/ihimizer/img253/971/fond120081222115235fi2.png

On va alors pouvoir commencer à coder le design.

Est-ce que tu as déjà télécharger Notepad++ et Nvu ? Si ce n'est pas fait, il faudrait le faire Ce sont deux logiciels gratuits

c'est fait =)

Oki. Alors on va pouvoir passer aux choses sérieuses ^^ : coder ton design.


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/img253/971/fond120081222115235fi2.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/img165/4850/40366397zx4.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