Cours de Its-Clo

Administratrice Nombre de messages : 11442 Age : 32

Héberge-les et poste-les ici (en spoiler pour ne pas déformer le forum)-

Spoiler:

Administratrice Nombre de messages : 11442 Age : 32

Ok. C'est très bien !

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

Juste avant, je t'ai modifié un peu ton header. C'est à dire que j'ai collé ton blend sur un bout du fond que tu as fait, afin de faciliter le codage.

Donc ton fond : https://2img.net/r/ihimizer/img232/9284/fondwl0.jpg
Ton header : https://2img.net/r/ihimizer/img201/8671/headerec5.png

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 Smile

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/img232/9284/fondwl0.jpg)

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/img201/8671/headerec5.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 Smile

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 Smile

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

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

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 Smile

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 Smile

Voilà, c'est fais .
Mais quand j'ai cliquer sur " index.html " & que ça me l'a ouvert, euh ... c'est louper x)

Administratrice Nombre de messages : 11442 Age : 32

Si tu vas sur ton site (http://xtwilight.olympe-network.com/), tu peux voir que le header est déformé.

A mon avis, tu as mis, pour les tailles de l'image du header : tu as mis la hauteur à la place de la largeur, et la largeur à la place de la hauteur.

Donc regardes par rapport à cette partie du code de ta page index.html

Code:: <img src="http://img201.imageshack.us/img201/8671/headerec5.png" alt="" border="0" height="700" width="298">

Tu mets donc le 700 à la place du 298, et inversément. Et oui, le fait est que tout se fait en anglais sur internet, alors faut apprendre quelque mot comme "height" et "width"

Sinon, tu remarqueras aussi que les "deux pages" olympe network ne s'affiche pas vraiment au bon endroit. C'est normal, on a pas encore réglé.

Une dernière chose : quand tu refais une modification sur ta page, il faut la réhéberger (donc passer par Classic ftp).

Voilà, j'ai inverser . Là, je suis en train de créer mon layout complet . Je te l'envoie après ?

Administratrice Nombre de messages : 11442 Age : 32

Tu entends quoi par "layout complet" ?

Et sinon, en fait, on s'est trompé. Pour le width, ce n'est pas 700, mais 973 -> à changer.

Euh, le design ^^

Administratrice Nombre de messages : 11442 Age : 32

Euh... ce que j'appelle réellement "design moi", c'est ce qu'on a mis en place sur le site.

Je ne sais pas comment t'expliquer . C'est une grosse créa, y'a les colonnes, la barre de naviguation, ...

Administratrice Nombre de messages : 11442 Age : 32

Ben en fait c'est ce qu'on a déjà fait. Sauf qu'on a dû découper en petit morceaux pour le codage.

En fait, tu ne fais pas une grosse créa, mais pleins de petits bouts. En HTML, ça marche comme ça. C'est pas une grande créa sur laquelle on fait tout. C'est plein de petit truc qu'il faut assembler avec du langage HTML.

Par exemple, si tu veux faire des titres un peu "design" pour tes catégories, et bien tu fais une petite image avec le titre, et on mettra ça dans la page en utilisant le HTML.

C'est complétement différent du graphisme en fait. Le graphisme, c'est juste pour le "header", si je peux dire comme ça. Après, tout se fait en HTML. Et, je ne sais pas si tu connais le CSS, mais avec ça, ça nous permettra de mettre tout en forme (donc de régler les couleurs, les décorations de tes textes... de faire des menus, des titres sophistiqués...)

Ah d'accord Smile

Bref, continuons langue

Administratrice Nombre de messages : 11442 Age : 32

Oui. Donc je vais déjà te place les "colonnes" correctement. C'est à dire que, quand tu vas sur ton site, tu peux voir que les deux "pages" olympe-network ne s'affiche pas trop au bon endroit. Je le fais la première fois, et par après, c'est toi qui le fera. C'est simplement qu'on est encore là dans une semaine sinon ^^ (tu as toujours l'explication sur comment faire qui est donnée dans le mon message d'explication ; après les -------------------).

Je fais ça et je te poste le code.

Ok =D

Administratrice Nombre de messages : 11442 Age : 32

Alors voilà le code. Tu vas ouvrir ta page index.html sur Notepad++, tu effaces tout le code, et tu mets le code ci-dessous à la place. Et tu n'oublie pas de réhéberger la page.

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>xTwilight</title>

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

<body leftmargin="0" topmargin="0" style="background-image: url(http://img232.imageshack.us/img232/9284/fondwl0.jpg);" marginheight="0" marginwidth="0">

<img src="http://img201.imageshack.us/img201/8671/headerec5.png" alt="" border="0" height="298" width="973">

<div id="droite" style="position: absolute; left: 470px; top: 298px;"><iframe src="home.html" name="home" align="middle" frameborder="0" height="1000" width="500"></iframe></div>

<div id="gauche" style="position: absolute; left: 270px; top: 298px;"><iframe src="gauche.html" name="gauche" align="middle" frameborder="0" height="1000" width="200"></iframe></div>

</body>
</html>

Petite explication : en fait, le site est codé en i-frame. Je t'explique en gros ce que c'est. Une i-frame, ça sert à faire afficher une page dans une autre page.
Donc sur ton site, tu peux voir que tu as deux pages d'erreur de olympe-network qui s'affiche. Une petite "colonne" à gauche, qui est la page gauche.html qui s'affichera ; et une grande "colonne" à droite, où s'affichera toutes les autres pages. Par contre, quand tu arrives sur le site, tu auras automatiquement la page home.html dans la colonne de droite.

EDIT : j'ai été voir ton cours dans la classe de fanabeyonce-yamapi. Alors pour une explication plus complète : elle t'a montré un exemple de layout. Je vois ce que tu veux dire maintenant. Donc en fait, oui, c'est un layout, mais en un seul morceau si tu veux. Pour coder, on est obliger de découper en plusieurs petits bouts. (exemple : le fond et le header séparés)

Voilà c'est fais Wink

Oui oui j'ai compris pour le layout, t'inquiète pas =D

Administratrice Nombre de messages : 11442 Age : 32

Ok. Bon, je t'explique la suite demain. On va pouvoir commencer les pages à proprement dit maintenant Smile

D'accord =D
à demaiiiiiin Smile

Tu m'as oublier hier ? :$

Administratrice Nombre de messages : 11442 Age : 32

Coucou !

Je suis sincèrement désolée du temps que j'ai mis à te mettre la suite, mais j'ai pas le choix : les études avant tout Wink

Bref, je t'explique la suite donc.

Sur ton site, tu peux voir que tu as deux "pages" Olympe-network qui s'affiche. En fait, tu as une petite colonne à gauche (qui te servira à mettre un message de bienvenue, ton menu, les partenaires...). C'est en fait une page html qui est integrée dans la page index.html. Cette page s'appelle gauche.html

A droite, c'est le même principe, mais la page s'appelle home.html. Il y a tout de même une petite subtilité avec celle de droite. En fait, tu auras toutes les pages de ton site qui s'afficheront à droite, mais la page de base (celle sur laquelle tu arrives quand on tape l'adresse de ton site), ce sera home.html

Donc tu vas ouvrir Nvu, et tu vas créer une nouvelle page que tu vas appeler home.html. Sur cette page, tu vas simplement écrire "home".

Juste pour info : Nvu, en fait, ça fonctionne un peu près comme word. Tu écris ton texte normalement, et c'est là qu'il y a la chose fantastique : ça te traduit tout un code html.

Donc bref, quand tu as sur ta page home.html, tu écris donc "home". ATTENTION : en haut à gauche de la fenêtre du logiciel, tu as un endroit où c'est marqué "corps de text" (ou bodytext en anglais"). Il faut changer ça en "paragraphe" (paragraph en anglais). Tu dois TOUJOURS écrire en PARAGRAPHE.

Tu vas faire de même en créant une page gauche.html, et tu écris dessus "gauche".

Puis tu héberges ces deux pages.

C'est fais Smile

Administratrice Nombre de messages : 11442 Age : 32

Tu as hébergé ? Parce que je n'arrive pas à accéder aux pages...

Oui oui =0

Administratrice Nombre de messages : 11442 Age : 32

Je n'arrive toujours pas à y accéder. Est-ce que par hasard, tu as mis une majuscule à Gauche.html et Home.html ?

Non, j'aurais dut ?

» [COURS] Introduction au cours d'HTML
» -Cours de ju-dom-
» Cours de emy-fan
» Cours de mel [OK]