Cours de Sh0uu-Piinette

^^ Nyaa enfin le week end Razz

Administratrice Nombre de messages : 11442 Age : 32

Ouais ! Tu as pu avancer un peu le site cette semaine ?

Naan j'ai pas eu le temps =$$

EDiT : je suis en train de faire la partie texture, mais je fais des enter sur Notepad ++,, mais on les voit pas sur mon site --"

Administratrice Nombre de messages : 11442 Age : 32

Euh, des Enter... tu entends par là des sauts de lignes ? Si c'est ça, c'est tout à fait normal. Dans ta page HTML, que le code soit écrit en 60 lignes ou en une seule, le résultat sera le même. Si tu veux faire un saut de ligne, tu fermes ton paragraphe (donc </p> ) et tu en recommences un en dessous.

Sinon, c'est pas grave si tu n'as pas eu le temps. En semaine, j'ai pas vraiment le temps moi non plus Wink

Aa 0kk merkii

EDiT : haan quelle blonde --" me disait que avec les autres pages j'avais pas du faire ça,, mais c'est pck d'habitude je prends NVU ^.^

Administratrice Nombre de messages : 11442 Age : 32

Hello
ça va??

Ce matin,, pendant un cours d'anglais vraiment pas intéressant,, j'ai eu une idée,, si je fesait mon site en PHP ?!

Donc est-ce que tu t'y connais ^.^??

Administratrice Nombre de messages : 11442 Age : 32

Et ben dis donc, tu as l'air d'avoir des tonnes de choses à faire en anglais ^^ *je te comprends ^^*

Et oui, ça va !

Sinon, pour répondre à ta question, je sais coder un site en php. Mais il faut savoir que les pages en soit, donc le contenu à proprement dit de la page internet se fait quand même en HTML. Le php tout seul n'est pas suffisant pour faire un site. Il faut le combiner avec le php Smile

Donc si tu veux le faire, il n'y a aucun soucis pour moi Smile

*peut-être juste un peu de manque de temps, mais c'est bon*

0kk been alors tu peux m'expliquer stp ?? :-)

Administratrice Nombre de messages : 11442 Age : 32

Oui. Donc on part du même design.

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

Alors on va commencer par coder ce layout Smile

Alors en fait, en php, on crée une page avec le design, une page où il y a la colonne de gauche (la petite) et une page qui rassemble le tout.

Ensuite, toutes les autres pages seront comme celle qui rassemble le tout. Du coup, si tu veux changer le design une fois, il te suffira de changer dans la page du design, et ça te changera dans toutes les pages Smile

Deuxièmement, il faut savoir que tu ne peux pas lire le php en local, c'est à dire que tu es obligée d'héberger tes pages pour voir le résultat.

Donc voilà, il nous reste plus qu'à commencer.

On va faire une page après l'autre. Donc tu ouvres Notepad++, et tu crées une nouvelle page que tu appelles header.php
Je te mets le code de la page, et je t'explique ce qu'il faut changer Smile

Code:: <html>
<head>
<title>Titre de ton site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>


<BODY background="http://url_de_limage_de_fond.jpg" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>


<img src="url_du_layout.jpg" align="left">


<div style="position: absolute; width:446px; z-index: 1; left:77px; top:395px">

Donc au début, on ouvre la balise <html> ainsi que la balise <head>.

Ensuite, il y a les balises <title> et </title> Entre deux, tu mets le titre de ton site. C'est ce qui s'affichera tout en haut de la fenêtre sur IE ou Firefox.

<link rel="stylesheet" type="text/css" href="style.css"> -> c'est la ligne qui dit que la page doit se référer à une page CSS. Tu laisses comme ça pour le moment. On verra ça plus tard.

Puis on ferme la balise </head>

Ensuite, on est dans le BODY. A la place de http://url_de_limage_de_fond.jpg, tu vas mettre le lien vers ton image de fond (donc ça : https://2img.net/r/ihimizer/img329/9391/fondmelwc8.png)
Le reste, tu laisses comme ça.

Et puis il y a le div, qui va en fait définir l'endroit où tu vas mettre ton texte. Alors là, ça se calcul par rapport au pixels.
- width c'est la largeur qu'aura ta colonne du contenu (la grande colonne à droite. (tu calculeras avec tofiltre)
- left c'est la distance entre le bord de ta page et le début de la colonne du contenu (la grande colonne de droite donc).
- top c'est la distance entre le haut de ta page et le début de la colonne du contenu.

Voilà. Je te laisse déjà faire ça et tu héberges ta page. Puis on fera la suite, c'est à dire les deux autres pages nécessaire pour la base du site.

Juste un petit truc avant que j'oublie. Il faut que tu regardes si ton hébergeur accepte le php. Sinon, va falloir changer d'hébergeur.

Dernière petite info, ce qui est entre , c'est des commentaires. C'est à dire que ça n'écrira rien sur ta page internet quand tu la regarderas.

V'laa

Mais ou c'est écrit

Code:: 
<img src="url_du_layout.jpg" align="left">

Faut pas mettre l'adresse du design ??

Administratrice Nombre de messages : 11442 Age : 32

Oui, à la place de url_du_layout.jpg C'est ton header en fait Smile

Au fait, bravo pour ton passage en amateur !

0kii

Merkii Very Happy

Administratrice Nombre de messages : 11442 Age : 32

De rien !

J'ai réhébergé mais c'esdt la même chose qu'avant,, même quand j'avais pas mis le lien pour le header c'était comme ça scratch

Administratrice Nombre de messages : 11442 Age : 32

Euh... tu as déshébergez toutes les autres pages ? C'est à dire enlevé du serveur.

Administratrice Nombre de messages : 11442 Age : 32

Je viens de penser à quelque chose. En fait, on a fait que la page header.php, il nous manque deux autres pages encore pour avoir une "page complète" qui s'affiche.

Si tu as toujours la page index.html qui s'affiche quand tu vas sur le site, tu réactualises.

Donc pour la page footer.php. C'est dans celle là que tu as les informations qui s'afficheront dans ta petite colonne sur le site.

Donc la page footer.php

Code de base :

Code:: 
</div>


<div style="position: absolute; left:575px; width:175px; top:378px; z-index: 1;" align="justify">



<p>menu 1<br>
menu 2<br>
menu 3<br>
menu 4<br>
</p>

</p>Et puis tous ce que tu veux d'autres dans la colonne de gauche.</p>


</body></html>

Donc, on ouvre le <div>. C'est la même chose que dans la page que tu as faite avant, sauf que c'est pour la petite colonne.

Tu dois régler ça :
- left, c'est la distance entre la gauche de ta page et la petite colonne.
- top, la distance entre le haut de ta page et le haut de ta petite colonne.
- width, c'est la largeur de la petite colonne.

J'ai fait ça mais je vois toujours tout exactement comme avant --"

Administratrice Nombre de messages : 11442 Age : 32

Euh... il manque encore la page la plus importante, index.php C'est sur cette page que l'on rassemble le tout en fait.

C'est un peu comme avant, si tu t'en souvens. Dans la page index.html, on avait mis des bouts de code pour les iframes. Et bien dans la page index.php, ça marche un peu du même style, sauf que l'on appelle ça des "include".

Donc la page index.php :

Le principe est tout simple. En haut de la page index, on va utiliser ce qu'on appelle un "include" en php. Ca sert à dire à la page qu'elle doit prendre le design. (que l'on a mis dans la page header.php

Et on fait de même au fond pour dire qu'il faut prendre le menu, les partenaires... que l'on a mis dans la page footer.php

Je te donnes le code général de la page index.php

Code:: <? include'header.php';?>


<p> ici, tu as le contenu de la page index.php !</p>

<? include'footer.php';?>

Ce code est TRES important. C'est le code de base pour TOUTES tes pages. Si tu veux créer un page avec tes avatars par exemple, tu remprendras ce code.

Administratrice Nombre de messages : 11442 Age : 32

Ca doit être bon Smile

Administratrice Nombre de messages : 11442 Age : 32

Oki. Euh, tu as changer le desing ? Parce que j'ai un fond qui s'affiche, mais alors le header ne vas pas du tout avec...

Naan j'ai rien changé scratch

Moi je vois ça :

Cours de Sh0uu-Piinette - Page 6 Mini_081115014049401842757031

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