Cours de BabyS

Coucou !

Je te souhaite la bienvenue dans ma classe

Pour commencer, tu pourrais me dire si tu t'y connais déjà un peu en html ? Et aussi savoir si tu as un projet particulier de site, ou tu veux simplement apprendre.

Coucou!

Merci de m'avoir prise.

Alors j'y connais vraiment rien du tout. J'aimerais créer un site perso, j'ai déjà un layout. Et puis après j'en créerais peut-etre un de graphisme quand je connaitrais bien le html et tout le reste.

Je peux voir le layout stp ( en espérant qu'il ne soit pas trop compliqué à coder... ) ?

Le voilà

J'espère aussi qu'il ne sera pas trop dure à coder^^

J'ai une élève qui a le même style de design, qu'on a réussi à coder. Je sais comment faire, donc pas de soucis

Je reviens plus tard. Je vais souper.

Je suis très souvent sur le forum en soirée si jamais

Cool alors^^

Bon apétit!

Bah moi je vais au cinéma ce soir, la séance est à 20h10 donc je serait surement là vers plus de 23h ^^

Est-ce que tu as déjà un hébergeur ?

Deuxièmement, je te laisse télécharger deux logiciels : Nvu et Notepad++ (tous les deux gratuits).

Et sinon, il faut aussi un logiciel ftp (qui servira à transférer tes pages de ton ordi au site), mais pour savoir quel logiciel on prend, j'ai besoin de savoir quel système d'exploitation du as (surtout la version).

Oui, je suis sur Free Hostia‏.

J'ai télécarger les 2 logiciels.

Je suis sur Vista.

Tu as du bol, je connais bien Freehostia

Si tu es sur Vista, il te faut télécharger le logiciel "Classic ftp" alors (gratuit également).

C'est bon, j'ai tout télécharger!

Ok. Parfait !

Il faut que je prépare un tuto ce soir pour le codage du design (c'est pas un design comme la plupart des autres font, alors il faut que je te modifie un peu le tuto). Je te fais ça ce soir si possible.

Deuxièmement, est-ce que tu connais un peu le principe des logiciels FTP (c'est à dire Classic FTP) ?

Je connait pas du tout le principe de Classic FTP!

Ok. Alors tout d'abord, je t'explique pour classic ftp.

Le principe d'un logiciel FTP, c'est de pouvoir transférer tes pages internet et images de ton odinateur au serveur/hébergeur (dans ton cas, il s'agit de Freehostia).

Quand on héberge une créa pour la mettre dans notre galerie par exemple, on passe par des trucs genres Imageshack, servimg... Un hébergeur, c'est le même principe, sauf qu'on peut y mettre également des pages internet. Le FTP te sert à aller mettre tes pages sur Freehostia.

Il y a quelque truc à régler dans le logiciel avant.

(j'ai le logiciel en anglais, je ne sais pas si c'est ton cas, donc mes traductions ne sont peut-être pas exactement celle utilisée dans le logiciel)

Tu ouvres Classic FTP. En haut à gauche, tu as une icones avec écrit "SITES" : tu cliques dessus. Un fenêtre s'ouvre. Dans cette fenêtre, tu as en fait tous les hébergeurs vers qui tu te connectes (dans ton cas, 0 puisque tu n'en as pas encore )

Tu cliques sur "Ajouter site" (anglais : ADD SITE), et là une autre fenêtre s'ouvre dans laquelle tu dois entrer quelques infos :

- LABEL : là, tu mets le nom de ton site ou ce que tu veux d'autre, c'est juste un nom qu'on donne, question qu'on s'y retrouve quand on a 12 sites ^^

- FTP Server : là, tu mets l'adresse de ton site, mais sans le http:// (dans mon cas par exemple, ça donne emimoi.freehostia.com)

- USERNAME : ton nom d'utilisateur (tu dois certainement avoir ces infos dans un mail que tu as reçu quand tu t'es inscrit sur Freehostia ; dans le mail, tu auras sûrement plusieurs mots de passe, tu prends ce qui est en rapport avec le ftp à ce moment-là).

- PASSWORD : le mot de passe (aussi dans le mail)
La case à chocher qu'il y a juste en dessous : tu l'as mets DECOCHEE

Le reste, tu ne touches à rien. Et tu cliques sur OK.

Jusque-là, si on ne s'est pas trompé, on doit pouvoir maintenant se connecter à fresshostia.

Pour ça, en haut à gauche de la fenêtre, tu as un bouton "connection" (en anglais CONNECT) avec une petite flèche à côté. Tu cliques sur la petit flêche, tu choisis le site (c'est en fait le LABEL que tu avais choisi qui s'affiche) et ça te connecte. Pour se déconnecter, tu appuies tout simplement sur "déconnexion" (anglais : DISCONNECT)

Le principe du logiciel : tu peux voir que la fenêtre en à peu près séparée en deux.
- A GAUCHE, tu as en fait les dossiers qui sont sur ton ordi.
- A DROITE, tu as en fait le serveur (donc Freehostia).

Pour mettre tes pages sur le serveur, tu les sélectionnes dans la colonne de gauche, et tu cliques sur la flèche qui va de gauche à droite (entre les deux colonnes).

PS : il faut savoir que les logiciels FTP sont loin d'être excellent. Il arrive régulièrement qu'on ait de la peine à se connecter au serveur, donc pas de soucis si ça t'arrive

C'est bon, j'ai connecté mon site!

Ok. Je te fini le tuto pour coder le design aujourd'hui (vu qu'il pleut en plus ^^).

Ce que tu pourrais faire déjà, c'est prendre ton design, et le découper en plusieurs bande horizontale. Seule obligation, c'est qu'il faut que ton menu ("home" jusqu'à "site et www") soit sur la MEME image.

Tu peux le découper en 4 parties par exemple, et peu importe si elles n'ont pas toutes la même hauteur.

Deuxièmement, est-ce que tu pourrais me donner l'adresse du site, de façon à ce que je puisse voir quand tu feras quelque chose Donc chaque fois que tu feras une modification, tu devras héberger la page qui a eu un changement afin que je puisse voir l'avancement

Voilà l'adresse http://guilty-pleasure.freehostia.com/.

Tu veux que je te poste les bandes du design?

Oui, poste-moi les bandes du design.

Les voilà :

Spoiler:

Parfait !

J'ai dont fini de t'adapter le tutoriel.

Pour commencer, on va donc coder le design, c'est à dire faire en sorte que ça devienne une page internet, sur laquelle on peut mettre du texte, des images, des liens...

--------------------------------------------- CODAGE

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.

Tout d'abord, tu ouvres Notepad++. Tu enregistres la page (qui est vide pour le moment) sous le nom index.html

CODE DE BASE DE LA PAGE INDEX.HTML (pour les design du style de tiens) : tu copies ce code et le mets dans la page index.html

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>

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

<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- design découpé -->
<table id="tableau" width="1000" height="800" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td>
         <img src="design1n.png" width="1000" height="146" alt=""></td>
   </tr>
   <tr>
      <td>

         <img src="site2.png" width="1000" height="246" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="site3.png" width="1000" height="212" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="site4.png" width="1000" height="196" alt=""></td>
   </tr>
</table>

<!-- fin design découpé -->

<div id="nom" style="position: absolute; left: 523px; top: 130px;"><iframe src="home.html" name="nom" align="middle" frameborder="0" height="535" width="369"></iframe></div>

</body>

</html>

Quelques petites explications

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.

Ensuite, on ouvre la balise <body> (qui sera fermé par </body>). C'est là qu'il y a aura le contenu du site en fait.

Dans le code, il y a ensuite une balise <table> (fermée par </table>). Ca signifique en fait qu'on insère un tableau, dans lequel on insère les différents bout du design. C'est déjà avec tes images dans le code (puisque j'ai tester avant ) Tu n'as donc rien besoin de changer.

Ensuite, les <div> servent à mettre en place les i-frames. Le "id", c'est en fait un nom que tu donnes à l'i-frame (c'est utile par la suite, pour faire référence à l'i-frame).
Question cruciale tout de même : qu'est-ce qu'une i-frame ? C'est en fait une technique qui permet de faire afficher une page internet DANS une autre page internet. Ainsi, dans ton cas, on affiche le design dans la page index.html, et ton contenu sera dans une autre page, mais cette autre page s'affichera à un endroit (que l'on a déterminé) sur ton design.

Cet endroit est justement déterminé par les "top", "left", "width" et "height" que tu voies dans le fond du code. (c'est déjà régler pour ton design). Je t'explique quand même comment faire. Le top, c'est en fait la distance qu'il y a entre le haut de ta page internet (donc le sommet de ton image), et le début de l'i-frame. Pour le left, c'est pareil, mais de la gauche de la page à l'i-frame. height = hauteur de l'i-frame ; width = largeur de l'i-frame.
Ca peut paraitre un peu chinois pour le moment, mais t'inquiète pas, c'est à force de tripatouiller dans le code qu'on s'y habitue vraiment

Dans la balise <i-frame>, il y a écrit src ="home.html". Entre les ", tu as en fait le nom de la page qui s'affiche dans l'i-frame.

Voilà, je sais que ça peut paraitre très compliqué au premier abord, ce qui n'est pas si faux , mais on s'y habitue vite. C'est simplement une question d'habitude

Quand tu as fait ça, tu héberges la page index.html (avec Classic FTP).

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

Deuxième chose à faire, tu ouvres notepad++, tu copies le code ci-dessous et tu enregistres la page sous le nom home.html :

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>

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

<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>
</head>

<body>
<p>ACCUEIL</p>
</body>

</html>

EDIT : j'allais oublier. Tu dois aussi héberges les 4 images de ton design. Je ne pense jamais à le dire (vu que ça parait logique), mais en fait ça ne l'ai pas toujours quand on s'y connait pas

Comment ça je les heberge? Parce que ça n'affiche pas les images sur le site =S
Je ne comprend pas tout pendant les vacances donc faut pas m'en vouloir =P

En fait, quand tu étais sur Classic FTP, tu as hébergé (donc passé de la colonne de gauche à celle de droite) la page index.html. Tu vas faire de même mais avec les 4 images de ton design, ainsi que la page home.html (qui n'est pas hébergée pour le moment).

Ah d'accord, j'avais pas compris ça =S
Voilà, j'ai tout hébérgé!

Ok. Parfait !

Je t'explique la suite maintenant. Il va falloir installer des "maps". C'est en fait une technique qui permet de mettre des liens sur des parties d'une image.

Dans ton design, tu as tout les mots pour le menu sur une même image. Avec cette technique, tu peux faire plusieurs liens sur une image, en définissant des parties de l'image avec des coordonnées.

Je te mets déjà le lien du tuto que mYn avait fait. Tu peux déjà essayer avec ça. J'ai pas énormément de temps en ce moment pour l'ordi, donc je ne peux pas te faire un tuto plus complet, mais je regarderai le code si ça ne joue pas.

Tu dois appliquer le tuto sur ton code qui correspond à l'image qui contient le menu, c'est à dire ça (dans ton code) :

Code:

<img src="site3.png" width="1000" height="212" alt="">

Tuto : https://learning-design.actifforum.com/classe-de-myn-html-et-css-f71/code-cours-image-map-t9427.htm

J'ai fait le Home mais il y a un problème.
Ca me fait un espace entre la premiere et deuxieme image et un autre entre la deuxieme et la troisieme =S

Voilà mon 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" >


<head>
<title>Guilty-Pleasure, le site perso de Sarah</title>

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

<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- design découpé -->
<table id="tableau" width="1000" height="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td>
        <img src="design1.png" width="1000" height="146" alt="">
       </td>
  </tr>
  <tr>
      <td>

        <img src="site2.png" width="1000" height="246" alt="">
       </td>
  </tr>
  <tr>
      <td>
        <img src="http://img401.imageshack.us/img401/6230/site3.png"style="border: 0px solid; width: 1000px; height: 212px; float: left;" usemap="#site3"/>
<map name="site3">
 <area alt="Home" coords="114,4,182,32" href="http://guilty-pleasure.freehostia.com/">
</map>
       </td>
  </tr>
  <tr>
      <td>
        <img src="site4.png" width="1000" height="196" alt="">
       </td>
  </tr>
</table>

<!-- fin design découpé -->

<div id="nom" style="position: absolute; left: 523px; top: 130px;"><iframe src="home.html" name="nom" align="middle" frameborder="0" height="535" width="369"></iframe></div>

</body>

</html>

Si tu vas voir, il n'y a pas d'espace. ( http://guilty-pleasure.freehostia.com/ )