Faire un site

[Hunchman801]

En passant, si tu te décides à programmer, utilise donc un logiciel à coloration syntaxique

[Romano]

Il n'est pas pas vraiment court (98 pages) mais très complet. Si tu ne veux découvrir que l'essentiel, je te conseille surtout de lire les parties A, C pour commencer, puis les parties D et E.
Le reste ne te sera pas très utile pour l'instant.
PS : J'ai oublié le lien. Par ici (attention c'est du .pdf ).
PPS : Si tu le trouves mauvais aussi, passe sur MSN, je te montrerai en gros comment t'en servir.

[Hunchman801]

Mais les éditeurs WYSIWYG sont super simples d'utilisation...

[Romano]

Normalement oui, mais certaines fonctions avancées peuvent parfois poser problème.
Dans le cas de Nvu, il est vrai que je le trouve très simple à utiliser, en mode aperçu bien entendu, bien que son visualisateur de code soit sympa, s'il n'avait pas cette fâcheuse tendance à corriger automatiquement le code sans prévenir.

[Hunchman801]

Pour respecter les standards, je suppose... ?

[Romano]

Oui normalement c'est pour ça mais c'est bien lourd quand même...

[Hunchman801]

Ça peut pas se désactiver, comme le coup des guillemets sur ton éditeur PHP ?

[Yoyomane]

Merci pour le tuto !
Mais il y a un truc sur quoi je galère : les liens hypertexte et le design des tableaux-liens (c'est quoi le lien hypertexte et comment faire un joli tableau-lien vers les autres pages ?).

[Romano]

@Hunch : je sais pas, j'ai la flemme de regarder les options.

@yoyomane : tu veux faire un tableau contenant des liens ?
Dans ce cas tu vas dans la source et tu écris :

Code: Select all

<table border="0">
  <tr>
    <td>
      <a href="1er lien" title="Texte qui s'affiche quand on passe la souris sur le lien">Texte du lien</a>
   </td>
    <td>
      <a href="2eme lien" title="Texte qui s'affiche quand on passe la souris sur le lien">Texte du lien</a>
   </td>

Et ainsi de suite, jusqu'au dernier, après lequel tu ajoutes :

Code: Select all

  </tr>
</table>

[Romano]

Malgré tout je n'aime pas trop les tableaux, qui à la base ne sont pas faits pour ça.
Si tu souhaites créer une liste de lien, tu peux aussi utiliser les puces, comme cela :

Code: Select all

<ul>
  <li><a href="1er lien" title="Texte qui s'affiche au survol du lien">Texte du lien</a></li>
  <li><a href="2eme lien" title="Texte qui s'affiche au survol du lien">Texte du lien</a></li>
</ul>

Pour modifier l'apparence de la liste, utilise le CSS. Tu trouveras un très bon tuto sur les bases du CSS ici.

[Romano]

Pour les tableaux, leur fonctionnement est assez simple :
la balise est <table> fermée par </table>.
Il est commode d'ajouter border="0" pour supprimer la bordure du tableau, ce qui donne :

Code: Select all

<table border="0">

La balise <tr> permet d'ajouter une colonne au tableau, la balise <td> une ligne à la colonne.
Exemple :

Code: Select all

<table border="0">
  <tr>
    <td>On ajoute une ligne</td>
    <td>Et une deuxième à la même colonne</td>
  </tr>
  <tr>
    <td>Une deuxième colonne</td>
  </tr>
</table>

En ce qui concerne les liens, ils sont composés essentiellement de trois élements :
- l'adresse du lien (href)
- le texte qui s'affiche dans l'info bulle au survol du lien (title)
- le texte qui s'affiche pour le lien
Un lien se présente donc le plus souvent sous la forme :

Code: Select all

<a href="adresse du lien"> title="texte de l'info bulle">Texte du lien</a>

On peut aussi ajouter des événements javascript, mais si tu veux en savoir plus, tu peux me joindre sur MSN.
Edit : pour le lien hypertexte, petite définition :

Hyperlien ou lien : connexion reliant des ressources accessibles par des réseaux de communication (par exemple le réseau internet). Il est composé notamment des éléments suivants, visibles ou non pour l’utilisateur : élément actif ou activable, adresse de destination, conditions de présentation de la ressource liée.

Edit 2 : Pendant qu'on y est, faisons les évenements Javascript. Alors il existe essentiellement pour les liens 3 évenements très utilisés :
- onMouseOver : permet de définir une action quand la souris survole le lien.
- onMouseOut : permet de définir une action quand la souris quitte le survol du lien.
- onClick : permet de définir une action quand le lien est cliqué.
Petit exemple qui permet d'afficher un texte dans la barre de statut (où est normalement affichée l'adresse du lien) :

Code: Select all

<a href="http://www.google.fr" title="Google" onmouseover="javascript:window.status='Cliquez pour vous rendre sur Google'" onmouseout="javascript:window.status=window.status='Survolez de nouveau pour réafficher" onclick="javascript:alert('Une boîte d\'alerte au click'">Aller sur Google</a>

[Yoyomane]

Merci ! Bon, peut-être que le même système que celui de la PC pour naviguer entre les pages est la meilleure (les poings et le nom de page ).

[Romano]

La PC est en PHP (c'est un forum phpBB) et donc l'affichage est geré par le moteur de template. Tu peux essayer de refaire la même chose sans PHP, mais le résultat ne sera pas dynamique.

Edit : si tu veux apprendre le PHP, je te conseille l'éditeur phpDesigner (en anglais) ici.
Et si tu veux des petits tutos PHP, n'hésite pas à demander.

[Hunchman801]

C'est pas mal, mais Yoyomane ne connaît même pas les principes du FTP, je crains

[Romano]

Alors petit cours (enfin cours, si on veut dire ) sur le FTP.
Premièrement, FTP signifie File Transfert Protocol.
C'est un protocole de transferts de fichiers très utilisé sur Internet.
Si tu ne veux pas t'embêter à taper les commandes FTP dans un shell (fainéantise inside, moi le premier ), tu peux utiliser un logiciel FTP gratuit, FileZilla, que tu pourras télécharger ici.
Si tu veux un tutorial sur FileZilla, c'est par ici.

Dernière chose, si tu as besoin d'un hébergeur, ne te laisse pas avoir par des offres aux tarifs défiants toute concurrence, en général le service derrière n'est pas top (j'en fais d'ailleurs actuellement les frais ).

[Hunchman801]

Vu les ambitions, il se contentera de Lycos

[Romano]

Oui mais Lycos ne met pas des pubs sur les sites hébergés chez eux ?
Parce qu'il n'y a rien qui m'énerve plus que de voir un site massacré par de la publicité.

[Raie de mes quatre]

Effectivement, je déteste aussi être envahi de publicité à mon arrivée sur un site web et/ou un forum. Ça rend temporairement des sections inutilisables et ça masque considérablement un site, oh oui ! Par conséquent, je suis de ton avis, Romano Productions.

[providentia]

Juste une petite parenthèse pour signaler que les tutos de Romano sont de toute beauté !! Même pour une béotienne de l'informatique, c'est facile à comprendre et très intéressant... Bravo !!

[Romano]

Je te remercie, providentia
Je ne fais qu'utiliser les tutoriaux présents sur Internet, et openweb possède de très nombreux exemples, dossiers et bien d'autres choses bien écrites et très faciles à comprendre. C'est un des sites que je conseille pour la programmation Web.