Cours de Scat

Administratrice Nombre de messages : 11442 Age : 32

Coucou !

Ca sera plus simple ici, parce que j'ai tout mes codes à portée de main ^^

Tout d'abord, tu sais comment ça marche les frames/i-frames ? J'entends par là, tu connais le principe ?

Pour moi les frames c'est un peu comme "des pages dans une page". C'est à dire que dans une page contenant des frames ont a un espace avec des scrollbar. C'est pas très clair je croit ^^'
Mais je sais pas les utiliser et je voit pas les differences avec les iframes =)

Administratrice Nombre de messages : 11442 Age : 32

C'est tout a fait ça. En fait, il n'y a pas vraiment de différences entre les frames et les i-frames.

Si tu veux, on appelle plutôt frame quand on "divise" la page en plusieurs parties ; et i-frames, c'est plutôt quand on place une page où on veut dans l'autre page. Bon, c'est pas très important de savoir ça Wink

Donc je te poste le code de base de la page index.html (c'est donc celle qui va contenir les autrs pages). Ce code ira donc UNIQUEMENT pour cette page, les autres (qui seront les "pages dans les pages"), ce seront des pages normales, où il n'y a pas besoin de mettre ce code, mais il faut tout simplement faire une page normale.

Tu peux toujours changer des trucs dans le code si tu veux (pour insérer ton design par exemple, car on a pas tous la même manière de le faire Wink

)

------------------------

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

------------------------------------------------------

Sinon, pour le CSS, tu t'y connais un peu ou tu veux qu'on regarde ça assemble après ?

Salut,
Alors je viens de regarder ce code et de faire quelques essais et pour l'instant sa marche bien ^^
Mais bon j'ai pas encore de design de fait donc je teste avec des vieux trucs (:
Une question : si je met l'image du header ainsi que sa position dans un fichier CSS sa posera pas de probleme ? Je trouve que ensuite c'est plus simple pour changer de design.
Pour le CSS ça va je m'en sort pas trop mal
Merci !

Administratrice Nombre de messages : 11442 Age : 32

Tu peux tout à fait mettre le design dans le CSS si tu préfères. Je l'avais fais une fois pour essayer, mais qu'une seule fois donc j'ai plus trop en tête le "comment faire". Il ne faut juste pas oublier d'enlever les design de la page index.html à ce moment-là.

Ok merci je vais faire des essais pour le design et pour positionner les blocs et je reviens te poser des questions ^^
Merci pour ton aide =)

Administratrice Nombre de messages : 11442 Age : 32

Ok. Pas de probléme Wink

Juste un truc : tu peut me passer le code pour faire le menu.
(Celui de la page gauche.html dans ton code)

~~edit: tu connais un bon hebergeur gratuit ?~~
En fait je suis chez Free donc c'est bon ^^ mais tu sais comment modifier l'url pck là l'adresse c'est avec le nom de mon pere .free.fr je sais que on peut mettre un pseudo mais je sais pas ou il faut le changer.
Sinon je sais qu'on peut passer par un site qui fournit des redirections en .tk ou .cz.ze mais bon je preféréré la 1ere option =)

Merci!

edit 2 : j'arrive pas a heberger mon site chez free Crying or Very sad

j'ai activé les pages persos mais je trouve pas ou est leur serveur ftp Neutral

Message précédent inutile j'ai reussi a résoudre tout ces problemes

______

Salut je bloque sur ça :

#corps {
position: absolute;
left: 200px;
top: 370px;
background-color: #D8D8D6;
width: 680px ;
border: solid 1px white;
margin-bottom: 50px;
padding: 10px;
}

Pour que le corps ne soit pas collé en bas de la page il faut bien mettre un margin-bottom non ?
Parce que ça ne marche pas :/

Administratrice Nombre de messages : 11442 Age : 32

Je vais tacher de rien oublier Wink

Alors pour la page de gauche, c'est une page normal, sauf qu'on doit ajouter un petit bout de code dans les liens. Donc je peux pas te donner de "code" faire pour la page gauche, c'est comme chacun le veut )

Pour Free par contre, je ne vais pas pouvoir t'être d'une grande aide malheureusement. En fait, pour être chez Free, il faut résider en France. De la même manière, si tu n'es pas sur le territoire français, tu ne peux même pas accéder au serveur. Le fait est que j'habite en Suisse, donc impossible pour moi de me connecter sur un compte.

Bon, je viens de voir dans le message suivant que c'était bon Wink

Je laisse quand même ma réponse Wink

Alors le margin-bottom, c'est effectivement pour pas que ce soit collé au fond, mais ça ne peut pas être par rapport au fond de la page (internet), étant donné que c'est la hauteur d'une page est relative (plus tu ajoutes du texte, plus elle est longue).

Merci quand même pour ta reponse =)

Alors si le margin-bottom ne marche pas comment faire pour avoir un espace sous le bloc "corps" ?

Cours de Scat Mini_850661temp

J'ai pensé à rajouter un bloc avec <div> qui serait invisible mais bon ^^' c'est pas top

Administratrice Nombre de messages : 11442 Age : 32

Effectivement, d'après ce que tu veux faire, il faudrait utiliser margin-bottom. Tu as fait attention (dans ton code HTML) que tu fais bien référence au " #corps " (de ton CSS). Et les autres marges, ça fonctionne ?

oui le probleme c'est ça. C'est que les autres marges fonctionnent.

Administratrice Nombre de messages : 11442 Age : 32

Tu pourrais me donner l'adresse du site (si tu as déjà héberger) ? Ce serait plus facile pour moi de voir ce qui cloche.

Mon compte sera activé dans 48h donc je te passerai l'adresse dans 2 jours en attendant voici les codes html puis css correspondant.

Spoiler:

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>TUTOSTOCK</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

</head>

<body>

<div id="bann"><img src="img\logo.png" alt="logo">
</div>

<div id="menu1">

<h2>MENU</h2>
<div id="subnav"></br>
<a href="">Home</a><br>
<a href="">Principe</a><br>
<a href="">Photoshop</a><br>
<a href="">Crédits</a>
</div>

</div>

<div id="menu2">

<h2>CREDITS</h2>
<p> <h5>Ordinibus fuerant distributa. Sed non erat paternae potest. Statuit tandem optimus opifex, ut cui dare nihil</h5> </p>
</div>

<div id="corps"><p>block 02 => CORPS </br> Tuto numero 1</br></br>
Ordinibus fuerant distributa. Sed non erat paternae potest
atis in extrema fetura quasi effeta defecisse; non erat sapientiae, consilii inopia in r
e necessaria fluctuasse; non erat benefici amoris, ut qui in aliis esset divinam liberalitatem la
udaturus in se illam damnare cogeretur. Statuit tandem optimus opifex, ut cui dare nihil
proprium poterat commune esset quicquid privatum singulis fuerat. Igitur hominem accepit indiscret
ae opus imaginis atque in mundi positum meditullio sic est </br></br>alloquutus: «Nec certam sedem, nec propri
am faciem, nec munus ullum peculiare tibi dedimus, o Adam, ut quam sedem, quam faciem, quae munera tute optave
ris, ea, pro voto, pro tua sententia, habeas et possideas. Definita ceteris natura intra praescriptas a nobis le
ges coercetur. Tu, nullis angustiis coercitus, pro tuo arbitrio, in cuius manu te posui, tibi ilumma protensas multorum graduum </br>serie distinctas: fastigio Dominum insidere. Contemplatores angelos per eas vicibus alternantes ascendere et descendere. Quod si hoc idem nobis angelicam affectantibus vitam factitandum est, quaeso, quis Domini scalas vel sordidato pede, vel male mundis manibus attinget? Impuro, ut </br></br>habent mysteria, purum attingere nefas. Sed qui hi pedes? quae manus? Profecto pes animae illa est portio despicatissima, qua ipsa materiae tamquam terrae solo innititur, altrix inquam potestas et cibaria, fomes libidinis et voluptuariae mollitudinis magistra. Manus animae cur irascentiam non dixerimus, quae appetentiae propugnatrix pro ea decertat et sub pulvere ac sole praedatrix rapit, quae illa sub umbra dormitans helluetur? Has manus, hos pedes, idest totam sensualem partem in quam sedet corporis illecebra quae animam obtorto, ut aiunt26, detinet collo, ne a scalis tamquam profani pollutique reiiciamur, morali philosophia quasi vivo flumine abluamus. At nec satis hoc erit, si per Iacob scalam discursantibus angelis comites esse volumus, nisi et a gradu in gradum rite promoveri, et a scalarum tramite deorbitare nusquam, et reciprocos obire excursus bene apti prius instructique fuerimus. Quod cum per artem sermocinalem sive rationariam erimus consequuti, iam cherubico spiritu animati, per scalarum, idest naturae gradus philosophantes, a centro ad centrum omnia
</br></br></p></div>
</body>
</html>

Spoiler:

Re
Tempis pour le margin,j'ai un autre probleme depuis :/
J'ai mon site qui est structuré en plusieurs repertoires :

(les * sont des repertoires)

**img

> *tuto > insbr01.png | insbr02.png | insbr03.png
>logo.png | fond.png

**ptuto > instbru.html

home.html
tutoex.html
tutots.html

Sa se lit comme ça :
Dans le répertoire **img on trouve une autre repertoire (*tuto) qui contient insbr01.png insbr02.png ect. Dans **img on trouve aussi logo.png et fond.png

Je sais pas si c'est bien clair ^^

Comment faire pour indiquer le chemin du logo dans instbru.html ?
J'ai mis <img src="img\logo.png" alt="logo"> mais ça marche pas et si j'indique en partant de C\users\...\img\logo.png ça ne marche pas non plus quand je l'heberge

I need help study

Administratrice Nombre de messages : 11442 Age : 32

Je suis pas sûre d'avoir compris toutes tes histoires de *, mais je vais tacher de répondre quand même.

Déjà, le chemin avec le "user...", tu oublies. Ca fonctionne sur l'ordi (et encore, par toujours), mais sur internet, ça ne pourra pas fonctionner.

En fait, il te faut "descendre" chaque fois d'un dossier jusqu'à arriver à ton image.

Le plus simple, c'est que tu fasses un dossier pour le site, et que tu mettes des sous-dossiers dedans. De cette façon tu as ta page dans le dossier A, qui contient un dossier B, qui contient un dossier C (dans lequel se trouve ton image). Pour indiquer le chemin, tu mets donc d'abord le A/B/C/nomdelimage.png

Après, si tu te trouves dans un cas où il faut "remonter" un dossier (pour ensuite redescendre dans un autre), j'avoue ne pas savoir comment faire. Mais je vais chercher, ça m'intrigue Wink

Oui voila c'est pour remonter que ça me pose probleme ^^

ps: en mettant C\user\... et en hebergant ça a marché

Administratrice Nombre de messages : 11442 Age : 32

Ok. Parfait alors !

Tu me montreras quand même l'avancement ? (hébergé). Par MP si tu ne veux pas poster l'adresse tout de suite. Enfin, si tu est d'accord Wink

Ah oui c'est vrai que c'est plus pratique avec l'adresse ^^
=> http://tutostock.free.fr
Ya juste 2 tutos d'hébergés mais bon ils sont pas définitifs ( installer un brush et pixel stretch)
Bon le design je pense pas le garder, c'est juste le temps de coder et les textes pareils y en a qui sont même pas rédigé ^^

Administratrice Nombre de messages : 11442 Age : 32

Et bien c'est très bien pour le moment ! Ca me rappelle que j'ai une (longue) liste affichée dans ma chambre avec les nombreux tutos que je dois faire Wink

On a pas toujours le temps de s'y mettre pendant les cours malheureusement.

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