Cours de Sh0uu-Piinette

Coucou !

Je te souhaite la bienvenue dans ma classe

Hello, merciiiii bcp de m'avoir pris dans ta classe

Bah enfaite le truc c'est que je comprend absolument rien au html, css et autre -___-`
J'ai pas d'hébergeur ni de logiciel

Tu es là pour apprendre. Et bientôt, ce sera plus de chinois ^^

Alors pour les logiciels, je te propose Nvu et Notepad++. Ce sont deux logiciels gratuits

^^
J'ai téléchargé Nvu et Notepad++

Et comme hébergeur tu me propose quoi? Just pas Free pck j'habite en Suisse =$

Tiens, une compatriote J'habite aussi en Suisse, donc pas de Free pour moi non plus ^^

Pour l'hébergeur, je peux te proposer celui-là : http://www.olympe-network.com/asso/ J'ai une autre élève qui l'a pris, et il marche super bien !

J'vais m'inscrire tout de suite =)


EDiT : Voilà je suis inscrite !!

^^

Tu es en vacances par hasard ? Puisque je vois que tu as 15 ans, et que tu es sur le forum à 8h40 ^^ Moi depuis mercredi

Ouui, on a fini l'école le vendredi soir

Ah ^^ Alors tu ne dois pas être dans le même canton que moi ^^ Parce que moi, c'est qu'à partir de jeudi matin ^^ Tu fais quoi d'ailleurs ? Toujours en scolarité obligatoire où tu fais des études (ou autre ^^)

Sinon, tu t'es inscrite sur l'hébergeur ?

J'sui en 2ème du collège,, et twa ? Sinon j'habite en valais

0uui je suis inscrite


Ahh et du 29 au 1er je serais absente (Barceloone <33),, j'te dis ça déjà maintenant pck sinon, blonde comme je suis, j'arriverais à oublier ^^


EDiT : J'ai essayé de faire le layout, mais je l'aime pas trop =X. Bon en même temps avec le niveau que j'ai en graphisme j'vais pas trop réussir à faire mieux -..-
Header https://i.servimg.com/u/f73/12/83/90/86/bannia10.jpg
Fond https://i.servimg.com/u/f73/12/83/90/86/fond10.jpg

J'habite aussi en Valais, mais je suis en 3ième du collège

Sinon, pour le design, je regarde si les dimensions jouent et je te dis ça tout de suite. Et sinon, t'inquiète pas, on peut facilement changer le design par après.

EDIT : ça joue très bien !

Je t'ai coller le header sur un bout du fond. Ca permet de faciliter le codage, et éviter qu'il y ait des décalages sur certains navigateurs.

Donc ton header : https://2img.net/r/ihimizer/img261/1530/headerts5.png
et ton fond : https://i.servimg.com/u/f73/12/83/90/86/fond10.jpg

Donc maintenant, je vais t'expliquer le fonctionnement d'un logiciel FTP. Je te propose d'utiliser Filezilla (Attention : ne fonctionne pas sous vista ! Si tu as vista, je te donnerai le nom d'une qui fonctionne dessus).

Je te laisse télécharger le logiciel et l'installer Il est gratuit aussi si jamais

Voila je l'ai téléchargé =DD

Oki. Alors il faut faire quelques réglages sur le logiciel pour pouvoir l'utiliser. Je t'explique ça, et après, on va pouvoir coder le design

Quand tu t'es inscrite sur l'hébergeur, tu as du recevoir un mail. A un endroit, dans ton mail, tu as ça :

-----------

Accès FTP :
Serveur : ftp.olympe-network.com / Port : 21
Nom d'utilisateur : ***
Mot de passe : ***

-------

Où il y a les ***, c'est bien sûre ton mot de passe et ton nom d'utilisateur ^^

Donc tu ouvres donc Filezilla. Tu fais Fichier -> Gestionnaire de site. Une fenêtre s'ouvre. En bas, il y a un bouton "Nouveau site". Tu appuies dessus. Juste au dessus, tu as un dossier qui apparait "Nouveau site FTP". Tu le renommes avec le nom de ton site (ou ce que tu veux).

Ensuite, à droite, sous "Hôte", tu mets : ftp.olympe-network.com
Port : 21 Type de serveur : FTP

Puis en dessous, tu coches "normal" Sous utilisateur, tu mets le nom d'utilisateur (celui qu'il y a dans l'e-mail) et sous mot de passe : ton mot de passe (celui de l'e-mail aussi),

Puis tu cliques sur "Enregistrer et quitter".


Pour se connecter : en dessous de "Fichier", tu as une icône. Tu cliques sur la petite flêche juste à côté et tu cliques sur le nom que tu as donné au site.

Pour se déconnecter : Fichier -> Déconnecter.

Voilà. En fait, si tu as remarqué, tu as deux "parties" dans le logiciel. La colonne de gauche, ça correspond à ton ordinateur (avec tous tes dossiers et autres) et la colonne de droite, c'est ton serveur (donc ce que tu as hébergé sur ton site).

J'le fait c'taprèm =)

Oki. Pas de soucis. On codera le design ensuite.

Je te mettrai les explications pour coder le codage dans l'après-midi. Si tu n'a pas répondu entre temps, j'éditerai. Comme ça tu pourras avancer

J'ai tout fait mais moi quand je fais Fichier après il y a pas déconnecter

Je vois ça

C'est parce que tu n'as pas réussi à te connecter au serveur. Tu peux voir ça juste en dessous de menu déroulant qui est ouvert. C'est marqué Erreur et de plus, c'est en rouge ^^

Si tu veux, je peux essayer de me connecter au serveur, mais il faut que tu me passes les informations qu'on t'a donné par e-mail à ce moment-là. Envoie-les moi par MP bien sûre

Aa 0kk j'me demandais ce que c'étais ^^
bon j'tenvoie un MP

Alors moi j'arrive à y accéder sans problème, mais par contre, je n'utilise pas filezilla, étant donné qu'il ne marche pas sous Vista.

Essaie donc avec le logiciel Classic FTP. Chez moi ça marche sans problème avec. (par contre, je l'ai en anglais, et non pas en francais). Mais bon, il pourrait être en japonais, ça irait tout aussi bien ^^
Les infos à rentrer : tu fais File -> Site Manager -> tu as une fentêre qui s'ouvre. Tu cliques sur le bouton "Add Site". Sous "label", tu mets le nom du site. Sous "FTP Serveur" : ftp.olympe-network.com

Dessous, ton nom d'utilisateur et ton mot de passe.

Où c'est écrit "Initial remote directory...", tu coches "Use the last recent..."

Et sous "Initial local directory...", tu coches "Use the last recent..." Puis OK.

Pour te connecter, tu as un bouton "Connect" en haut à gauche.

Naan mais quelle blonde je suis ^^ J'avais mis mon site sous FTPS x___Ô,, ben maitenant ça marche... D'z0leii

Oki. L'important c'est que ça fonctionne ^^

Donc je t'explique comment coder ton design.

Ton header : https://2img.net/r/ihimizer/img261/1530/headerts5.png
et ton fond : https://i.servimg.com/u/f73/12/83/90/86/fond10.jpg

Pour coder :

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 ^^

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)

Quand tu as fait ça, tu vas héberger les pages. C'est à dire que tu vas sur Filezilla (ou l'autre, je sais pas avec lequel tu as réussi à te connecter ^^). Tu te connectes. Avec filezilla, dans la colonne de gauche, tu vas chercher ta page index.html, et tu la glisses dans la colonne de droite.

Petite question : C'est quoi un i-frame ? J'suis vraiment nulle :$

Oups, j'ai oublié de t'expliquer ce point ^^ Tu n'es pas nulle, c'est simplement que tu ne connais pas

Donc une i-frame, en gros, c'est une page internet qui s'ouvre dans une autre page internet.

Aa d'accord

C'est bon normalement, j'ai mis sous Filezilla

Oki. L'adresse : http://co0kiiexgraph.olympe-network.com/

Donc on voit déjà qu'on a un problème de décalage entre le header et le fond. A première vue, c'est parce que tu as du mal régler la largeur du header, mais je vais regarder

En attendant, tu vas créer deux autres pages.

Tu vas créer un page sur Notepad++ qui s'appelle home.html, et tu mets ce code :

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" >

<body>
<p>droite !</p>
</body>

Et une page gauche.html, avec ce code :

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" >

<body>
<p>gauche !</p>
</body>

Et tu héberges le tout

Je t'explique à quoi ça sert Ca a donc à voir avec les i-frames. Dans ta page index.html, tu as deux i-frames. Et comme je l'ai dit plus haut, une i-frame, c'est une page html dans une autre. Donc en fait, tu vas avoir une page qui s'appelle gauche.html, qui va s'afficher à gauche dans ta page, et la page home.html, qui va s'afficher à droite dans ta page.