Cours de jennifer [OK]

Administratrice Nombre de messages : 11442 Age : 32

Alors je regarderai ça plus précisément.

Par contre, j'ai vu que tu as mis des <include... dans tes pages. Alors comme je t'ai dit pas mail, ça ne pourra pas marcher. Les "include", ce sont des balises php (donc pas en langage HTMl). C'est comme si tu parlais en chinois à quelqu'un qui n'en comprendrait pas un traitre mot.

Donc si tu ne fais pas en php, tu peux oublier de coder ton design avec des includes. Ca ne pourra jamais fonctionner Smile

ok
euh oui, je veux que ce soit tout en html

Administratrice Nombre de messages : 11442 Age : 32

Va falloir coder ça en i-frame si tu veux tout faire en HTML. Est-ce que je t'avais expliquer comment le faire dans ton cours ou pas ?

non il ne me semble pas
çà me dit rien

Administratrice Nombre de messages : 11442 Age : 32

Alors je te donne la marche à suivre pour coder en HTML. Parce que les includes, c'est une balise propre au PHP. Une page en HTML ne pourra jamais comprendre ça ^^

Attention, ça fait un bon paquet de choses à suivre. Mais tu t'y connais déjà pas mal en site, donc tout ira bien ^^

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 copier 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 verra le CSS plus tard, donc c'est pas grave si tu ne sais pas ce que c'est pour le moment Smile

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/h/oi33.tinypic.com/b9buoj.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/h/oi36.tinypic.com/2zqh1jc.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'i-frame) 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'i-frame. 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 si tu ne comprends pas les histoire de coordonnées. Je regarderais à ce moment-là moi, parce qu'en général, ça prend une semaine à comprendre autrement ^^ Ca viendra à force de faire, t'inqiète pas Smile

Pour le moment où j'ai mis les ------------------------------------, je le fais moi généralement la première fois. Mais à mon avis, tu peux le faire sans problème toi.

Si il y a un soucis, tu demandes Smile

ok
merci encore pour ton aide Very Happy

alors j'ai fais çà
http://fantastic.starz.free.fr/

Administratrice Nombre de messages : 11442 Age : 32

Hey, super chouette ta nouvelle signature ! J'adore Smile

Sinon, pour le site, c'est très bien !

Donc je t'explique le principe pour faire toutes les autres pages, et après, tu sais comme faire, parce que ça marche de la même manière (mettre des images, du texte...).

Donc en fait, je ne sais pas si tu sais exactement ce que sont les i-frames. C'est en fait une page internet, que tu fais afficher dans une autre page internet (index.html).

Donc la page qui va s'afficher dans la colonne de gauche s'apelle gauche.html

Et celle qui s'affiche dans la colonne de droite, à la base (donc quand on arrive sur le site), c'est home.html

Ce sont des pages dans lesquelles tu mets juste le contenu du site, ainsi que la couleur de fond. Tout le design et autre, ça se met que dans la page index.html

Donc pour toutes tes autres pages, tu te bases sur le même principe que la page home.html

Dernier petit truc à savoir Smile

Si tu mets des liens dans la page qui s'affiche à gauche (gauche.html), et que tu veux que la page liée s'affiche dans la colonne de droite (seulement dans ce cas !), il faut ajouter un petit truc au lien.

Si, par exemple, ton lien de base est :

Code:: <a href="page.html">LIEN</a>

Tu vas devoir ajouter un bout de code, et ça te donnera :

Code:: <a href="page.html" target="home">LIEN</a>

Si tu regardes le code source de ta page index.html, tu verras que tu as défini que le nom (name) de ta colonne de droite est home.

merci beaucoup
ravi que çà te plaise

ok je pense que j'ai à peu prèc compris
mais alors à quoi ressemble le code de mes autres pages ?

Administratrice Nombre de messages : 11442 Age : 32

Et bien en fait, c'est le code de base de toute page html.

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

<head>
<title>Nom de la page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
<body>

<p>contenue de ton site entre les balises body</p>

</body>
</html>

ah ok
merci beaucou^p
voilà ce que j'ai fais :
http://fantastic.starz.free.fr/
maintenant, il faut que je fasse les autres pages
oh c'est trop cool
merci santa

Administratrice Nombre de messages : 11442 Age : 32

Super !!!

EDIT :

Au fond du site, il y a un petite "barre" brune. C'est toi qui l'a faite ? Si oui, tu pourrais m'expliquer comment faire ? Ca fait des siècles que je cherche comment faire ça Wink

euh tu parle de quelle barre ?
ou çà ?
celle d'en bas ?

sinon, il y a d'autres choses à connaitre en html qui peuvent servir ou c'est tout ?
je me demandais, est ce que tu sais faire la navigation comme sur ce site
http://graphix-illusion.fr/
car j'avais trouvé un tuto sur le net pour faire çà, mais c'est tellement compliqué que... voilà quoi...

Administratrice Nombre de messages : 11442 Age : 32

Pour la barre, oui, je parle bien de celle qui est en bas Smile

Et pour la navigation sur GI, tu parles des petits carrés à gauche ? Ou de la navigation sur le "header" ? Je sais pas le faire comme ça, il faudrait également que je fasse des recherches. Mais à mon avis, quand tu dis que le code est super compliqué... c'est normal. C'est pas un truc tout simple à faire à mon humble ^^ avis.

ok
c'est hyper compliqué
voici ce que j'avais trouvé
http://www.nubiumgraphik.com/tutoriels/?p=5

et pour la barre en bas, c'est dans mon css que j'ai modifié quelque chose
je ne sais plus trop quoi
je cherche et je te redis

Administratrice Nombre de messages : 11442 Age : 32

Je suis curieuse Smile

Je vais essayer ton truc quand j'aurai un peu de temps (enfin, beaucoup de temps ^^)

Et merci d'essayer de m'aider avec la "barre en bas" Smile

ba c'est normal Smile

alors pour ma barre en bas
c'est pas trop normal ce qui s'est passé en fait
je voulais changer la couleur de mes liens dans mes pages
et çà m'a changé çà de couleur, je ne sais pas pourquoi
c'est bizarre

je cherche, je cherche...

Administratrice Nombre de messages : 11442 Age : 32

J'ai déjà essayer de "décortiquer" le CSS de certains sites qui ont cette fameuse barre, pour comprendre comment c'est fait, mais j'avoue que j'ai jamais réusssi à trouver la solution encore.

ok
ba j'ai trouvé comment changer la couleur du texte de cette barre

Code:: BODY {
FONT-SIZE: 7pt; FONT-FAMILY: trebuchet MS; COLOR: #501703; LETTER-SPACING: 0px;
}

là j'ai changé le paramètre "color"

je cherche pour la couleur de fond
mais toi tu cherche à savoir la faire apparaitre, c'est çà ?

Administratrice Nombre de messages : 11442 Age : 32

Oui, je cherche comment la faire apparaitre en fait. Parce qu'après, changer les couleurs, c'est juste une question de code dans le CSS Smile

ok
ba je ne saîs pas comment j'ai fais
parce que j'ai pas fais exprès
dsl

Administratrice Nombre de messages : 11442 Age : 32

Oki. Merci d'avoir chercher en tout cas Smile

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