Tutoriel : créer un site en xhtml

Voilà un petit tutoriel pour apprendre à créer un site tout simple. J'espère qu'il vous sera utile ! Si vous avez des questions, n'hésitez surtout pas à les poster ici !

Dans ce tutoriel, nous allons apprendre le xhtml seulement. Vous allez voir, c'est un langage très simple à apprendre et trèèès utile !

Plan du tutoriel :
I. créer un site oui, mais pourquoi ?
II. le matériel indispensable
III. les bases du xhtml
IV. xhtml avancé
V. annexe
[en construction]

I. Créer un site, oui, mais pourquoi ?

Le premier truc à faire avant de créer un site c'est... de savoir précisément de quoi vous allez parler ! ça peut paraître débile comme conseil et pourtant... Parfois on est tellement heureux de savoir manier quelques balises qu'on désire créer un site... sans pour autant savoir que mettre dedans mdr (je parle de vécu là xD ).
Donc d'abord, le sujet. Un site sur les chevaux ? Certes, mais bon ça reste vaste. Sur l'ethologie ? C'est déjà plus précis. Cernez bien votre sujet pour être sûre de ne pas parler de tout et de n'importe quoi et de noyer les visiteurs sous des infos totalement différentes.

Bon vous connaissez le thème général de votre site, c'est bien. Maintenant, il faut voir ce que vous allez mettre dedans ! C'est là que je vous conseille de prendre un papier et un crayon pour noter toutes vos idées ^^ Ensuite, vous pourrez les regrouper dans des catégories afin de voir un peu à quoi le contenu de votre futur site ressemblera. Une partie photos, une partie actualité, une partie histoire par exemple... Ce ne sont que des exemples, vous mettez ce que vous voulez =)

Arrivé là, vous connaissez donc à peu près le contenu de votre site, c'est un excellent début ^^

Maintenant, dernière chose avant de commencer sa création... Savoir ce que vous allez ajouter au monde du web et quel public vous visez. En effet, comme vous l'aurez remarqué, Internet croule sous le nombre de sites. Je ne sais pas combien il s'en créé chaque jour mais c'est assez énorme ! Dont certainement plusieurs traitant du même sujet que le vôtre...
Alors pourquoi voulez-vous en faire un ? Réfléchissez bien à cette question, je n'ai malheureusement pas de réponse à vous donner. Mais si vous pensez que votre site sera totalement inutile alors c'est vous qui voyez si ça en vaut la peine... Mais bon le seul fait de vouloir pratiquer pour progresser est (selon moi) un excellent argument
Quant à la cible... Je fais juste cette petite parenthèse pour souligner le fait qu'un site ne sera pas identique selon que vous visez un public jeune ou non, de débutants ou d'expérimentés. Je ne vais pas débattre plus longtemps là-dessus, mais n'oubliez pas cela lorsque vous ferez votre design et que vous rédigerez votre contenu. Un site professionnel est souvent plus sobre qu'un site de jeu, destiné à un public assez jeune par exemple.
Mais là encore, c'est votre site et c'est à vous de décider !

II. Le matériel indispensable

Rassurez-vous, vous n'aurez pas besoin de tonnes et de tonnes de matériels ! Mais il faut quand même vous équiper un peu pour créer votre site.
Ne vous inquiétez pas, tout est gratuit

D'ailleurs, vous pouvez très bien vous contenter de ce que vous avez sous la main... À savoir le logiciel Bloc Notes ! En effet, pour créer un site, vous devez commencer par vous procurer un éditeur de texte.

Personnellement j'utilise notepad++, un éditeur de texte tout simple mais qui présente de nombreux avantages : onglets, code coloré (très utile pour se repérer lorsque notre code dépasse les quelques lignes)...
Pour le télécharger (c'est rapide et gratuit), clique ici

Si vous utilisez notepad++, voilà une petite manipulation à faire lorsque vous commencez une page :
cliquez sur "langage" puis sélectionnez "html". Vous allez voir, votre code va se colorer et ça sera alors beaucoup plus simple pour vous y repérer !


Et voilà, vous avez tout le matériel nécessaire à la création de votre site !
Maintenant, on peut entrer dans le vif du sujet...

III. Les bases du xhtml


A quoi ça sert ?
Tout d'abord, vous vous demandez peut-être à quoi sert le xhtml... Ce langage permet tout simplement d'afficher du texte, des images, du lien... C'est la base de tout site web et il vous sera toujours très utile !


Les balises
Les balises permettent d'indiquer au navigateur ce qu'il doit faire. Par exemple, mettre un texte en bleu (oui, j'aime le bleu), le mettre en gras, faire un lien à tel endroit, etc. Vous en avez déjà rencontré sur les forums ! Sauf qu'en xhtml, ce ne sont pas exactement les mêmes.

Elles commencent toutes par

Code:

<

et se terminent par

Code:

>

.

Voilà quelques balises très utiles :

Code:

<u>pour souligner du texte</u>

Code:

<b>pour mettre en gras</b>

Code:

<i>pour mettre en italique</i>

Code:

<h1>pour mettre un texte en évidence</h1>

Code:

<h2>pour mettre un texte en évidence</h2>

Code:

<font color='red'>Mettre un texte en rouge</font> <font color='green'>Mettre un texte en vert</font>, etc.

A savoir :
- vous pouvez sélectionner la couleur en fonction de son nom (en anglais), exp : red, white, yellow... mais également en fonction de son code html. Cela donnera donc #000000 pour du noir, #FFFFFF pour du blanc, etc.
- on utilise la balise 'font' car 'font' veut dire 'police' en anglais. Dans cette balise, vous pouvez également choisir la police (verdana, times new roman, etc), sa taille (size='12', size='13', etc)


Comme vous pouvez le constater, elles fonctionnent par paires. C'est-à-dire que la première balise (celle qui montre le début de l'instruction au navigateur) sera de cette forme

Code:

<>

et la seconde (celle qui dit au navigateur que l'instruction est terminée) se présente comme ça

Code:

</>

.


Maintenant que vous connaissez quelques balises, nous allons commencer à créer notre première page

Pour cela, commencez par ouvrir votre logiciel. Comme je l'ai dis plus haut, je vous conseille Notepad++, et c'est à partir de ce logiciel que je vous ferai les exemples ^^


Structure d'une page web
La structure de base d'une page web est toujours la même :

Les balises "head" représentent le haut de page, tout ce qui est écrit entre ces deux balises ne sont pas visibles par le navigateur.
On verra ensuite plus en détails ce qu'on y met, mais en voilà quelques exemples : le titre de la page (celui qui s'affiche au-dessus de la barre de navigation), les mots clefs pour le référencement...
Les balises "body", également indispensables, indiquent au navigateur qu'il devra afficher tout ce qu'il y a à cet endroit là. C'est donc ici que nous allons passer la plupart de notre temps. Vous pourrez donc y écrire tout le contenu de votre site : photos, titre, articles...
Enfin, les balises "html" servent à indiquer au navigateur quel langage est utilisé sur cette page. À noter que le html et le xhtml est plus ou moins la même chose (le xhtml est une amélioration du html). Mais n'ayez crainte, le navigateur comprendra parfaitement votre xhtml !


Deux autres balises très utiles
Lorsque vous écrirez vos textes, vous aurez certainement besoin de deux balises : celle pour indiquer qu'il s'agit d'un paragraphe, et celle pour aller à la ligne.
En effet, toute la mise en page que vous pouvez faire sur votre éditeur de texte ne sera pas prise en compte par le navigateur : donc si vous allez à la ligne ou laissez une marge par exemple, il fera comme si vous n'avez rien fait !
D'où l'importance de ces balises.

Paragraphe :

Code:

<p> et </p>

Retour à la ligne :

Code:

<br />

À noter que dans une ancienne version du html, on utilisait la balise

Code:

<br>

.
Si cette balise fonctionne encore aujourd'hui, évitez quand même de l'utiliser ! Quitte à apprendre quelque chose, autant apprendre la meilleure façon de le faire !


Créer la page d'accueil du site
Maintenant que vous connaissez les balises indispensables ainsi que la structure de base d'une page internet, vous allez pouvoir (enfin !!!) commencer à créer votre site.
Pour cela, ouvrez votre navigateur, placez les balises html, head et body, et ensuite écrivez ce que vous voulez entre les deux balises body. N'oubliez pas les balises pour la mise en page !


Et voilà, votre page d'accueil est prête !

Oui bon... Elle est moche : des écritures noires sur un fond blanc, ça n'a jamais fait rêver personne... Je vous apprendrais plus tard à faire la mise en page de votre site, vous aurez pour ça besoin d'apprendre un autre langage : le css ! Rassurez-vous, il n'est pas beaucoup plus compliqué que le xhtml =)

Mais avant ça, continuons sur le xhtml.


Mettre une image
Vous avez certainement envie de mettre quelques images sur votre site afin de le rendre plus attrayant. Nous allons voir comment faire.
Les balises sont un peu différentes de celles vues jusqu'à présent. En effet, celles-ci ne fonctionnent pas par paire !
La voilà :

Code:

<img />

Comme vous pouvez vous en douter, si vous laissez ça comme ça, aucune image ne s'affichera.
Vous devez donc indiquer à votre navigateur où se trouve l'image (= le chemin).
Imaginons que vous voulez afficher une image nommée "image.jpg" (très original je sais ) et qu'elle est située dans le dossier "images" de votre site. Voilà ce que vous devrez écrire :

Code:

 <img src='images/image.jpg' alt='image' />

"src=" indique au serveur le chemin de l'image. Attention à ce qu'il soit correct, sinon votre image ne s'affichera pas !
Vous vous demandez peut-être à quoi sert "alt' ? En fait, c'est une norme qui a été imposée il y a quelques années. C'est le texte qui s'affiche dans le cas où l'image ne s'affiche pas. N'oubliez pas de l'indiquer à chaque fois !


Faire des liens
À moins que vous ne vouliez faire un site d'une seule page ( ), vous allez très rapidement avoir besoin de savoir faire des liens !
Là encore, c'est très simple !
La balise :

Code:

 <a> et </a>

Vous allez devoir indiquer l'url où mène ce lien, ainsi que son nom.
Par exemple :

Code:

<a href='http://www.monsite.com/pagedulien.html'>clique sur mon lien</a>

Rien de très compliqué, si ?

Petits trucs à connaître :
- la cible (=target) : si vous ne la précisez pas, la page va s'ouvrir dans la même fenêtre automatiquement. Mais vous pouvez également faire en sorte qu'elle s'ouvre dans un autre onglet. Pour cela il faut ajouter

Code:

target=_blank

dans la première balise.
Cela donne donc :

Code:

<a href='http://www.monsite.com/pagedulien.html' target=_blank>clique sur mon lien</a>

- titre du lien : un autre attribut permet d'afficher un petit message lorsqu'on survole un lien, ça peut être très pratique ! Il se présente de cette forme :

Code:

title='message affiché'

Cela donne donc :

Code:

<a href='http://www.monsite.com/pagedulien.html' title='message affiché' target=_blank>clique sur mon lien</a>

Petits exercices
Pour l'instant je n'ai fais que vous dire ce qu'il fallait faire et vous n'avez pas eu trop à réfléchir... ce temps est désormais révolu
A vous maintenant de réfléchir héhé

Alors je vous donne quelques consignes, à vous d'essayer de les faire :

Exercice 1
Vous devez afficher une image et en faire un lien qui dirige vers la page "mapage.html'
- cela doit s'ouvrir dans une nouvelle page
- un texte doit s'afficher lorsque vous placez le curseur dessus

Correction :
[ne regardez pas tout de suite la correction, essayez d'abord de le faire !

Spoiler:

Exercice 2 :
Maintenant, vous allez créer une page complète

- respecter la structure de page
- mettre un titre
- écrire au moins 2 paragraphes (peu importe le contenu)
- mettre une image
- faire un lien
- écrire du texte en rouge
- souligner du texte
- mettre en gras du texte

Allez hop, au boulot !


Correction :

Spoiler:

Et pour finir...


Les commentaires
Vous en aurez rapidement besoin je pense... en tout cas moi je les utilise beaucoup !

Donc déjà, qu'est-ce qu'un commentaire ?
C'est un texte (ou un mot, enfin comme vous voulez quoi) qui vous sert à vous repérer dans votre codage MAIS qui ne sera pas lu par le navigateur. Les internautes ne le verront donc pas !

Pour faire un commentaire en xhtml, on utilise ce système :

Code:

<!-- et -->

Votre commentaire peut s'étendre sur plusieurs lignes sans soucis. Mais n'oubliez pas de refermer la balise !!

Ainsi :

Code:

<!-- mon super commentaire
suite de mon commentaire
encore du commentaire
et blablabla.
-->

Amélioration de la structure de base
En fait, j'ai vraiment simplifié la structure de base là, afin de ne pas vous perdre dans les codes. Mais maintenant que vous êtes des pros du xhtml, je vous met la vraie structure à adopter :

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>Le titre de votre site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
<!-- contenu de votre site à modifer à votre guise -->
  </body>
</html>

ne cherchez pas à comprendre, c'est pas très important de savoir ce que ça signifie... mais par contre, c'est indispensable, donc ne l'oubliez pas


Enregistrement de la page
Lorsque vous enregistrez votre page, utilisez l'extension .html afin que le navigateur sache de quel langage il s'agit.
Aussi, ça donnera : mapage.html
Et oui, tout simplement !

A savoir que la page d'accueil de votre site devra obligatoirement s'appeler : index.html ^^

IV. xhtml avancé

Maintenant que vous avez les bases en xhtml, nous allons pouvoir continuer sur des notions légèrement plus avancées...

Dans cette partie, nous allons voir les tableaux et les formulaires (voir plus si affinités héhé)

Les formulaires

Les formulaires peuvent être très utiles ! Vous pouvez par exemple vous en servir pour permettre à un internaute de s'inscrire puis se connecter sur votre site, ou encore pour des sondages, etc.
Dans cette partie, nous n'apprendrons pas à récupérer les données, car il s'agit de php. Nous apprendrons juste à faire un formulaire complet x)

Tout d'abord, il faut savoir qu'il y a plusieurs types de champs dans les formulaires :
- la zone de texte simple (par exemple pour demander le pseudo)
- cette même zone peut 'crypter' ce que l'internaute y écrit (par exemple le mot de passe). J'ai mis crypter entre guillemets car, nous le verrons plus tard en php, le mot de passe n'est pas vraiment crypté à cette étape là, c'est juste que ce qu'il saisi est remplacé par des étoiles/des ronds à l'affichage. Aussi, s'il y a plusieurs personnes devant l'ordi, personne ne sait ce que vous écrivez !
- les zones de texte plus grande (par exemple pour écrire un long texte, comme votre présentation, etc)
- les listes déroulantes
- les options (une seule case à cocher possible)
- les cases à cocher multiples (le membre peut en cocher plusieurs)

Et voilà ! Avec tout ça, vous allez pouvoir concocter un formulaire complet


La structure de base
Tout formulaire doit se construire de cette manière :

Code:

<form method="post" action="mapage.html">
<p> <!-- endroit où vous mettrez ensuite les différents éléments du formulaire --> </p>
</form>

Explications :
- method='post' : signifie que lorsque le membre cliquera sur le bouton 'valider', il sera renvoyé sur une page.
- action = ' ' : c'est justement ici que vous indiquerez sur quelle page il sera renvoyé. ça peut être sur la même page que celle du formulaire ou une autre, à vous de voir ! C'est sur cette page-ci que vous mettrez le code pour récupérer les infos entrées par le membre (mais je le répète, ceci sera l'objet du cours sur le php et non celui du cours sur le xhtml).
- entre les balises <p> et </p> vous mettrez les différents éléments du formulaire



Le bouton de validation et de remise à zéro du formulaire
Eh oui, car si vous n'en mettez pas, le membre pourra toujours remplir le formulaire mais ça ne servira à rien car vous ne saurez pas ce qu'il y a écrit !

Le bouton de validation se présente comme ça :

Code:

<input type="submit" />

"submit" signifie "soumettre" en anglais, mais vous vous en serez doutés

Petit truc à savoir !
Vous avez peut-être déjà vu des boutons de validation sur lesquels c'est marqué quelque chose (exp : "valider", "ok", "confirmer", "continuer" etc). Sachez que c'est très simple à faire ! Il vous suffit d'ajouter un critère "value" (= valeur).
Voilà comment on le place :

Code:

<input type="submit" value="Et voilà !" />

Fastoche nan ? :p

Le bouton de remise à zéro peut-être très pratique dans certains cas. Il permettra au membre de tout effacer ce qu'il a écrit dans son formulaire, sans avoir à procéder champ par champ (ce qui peut vite être très chiant).
Le voilà !

Code:

<input type="reset" />

Là encore, vous pouvez ajouter le critère "value" pour que quelque chose de particulier soit marqué sur ce bouton.



Maintenant que vous connaissez la structure de base des formulaires et que vous savez comment les envoyer... il serait peut-être temps d'apprendre les différents champs à y insérer, nan ?

la zone de texte simple
C'est la plus simple !
Elle se présente comme ça :

Code:

<input type="text" name="pseudo" />

Explications :
- type : c'est le type de la case, là on demande du texte, donc on marque "text". Vous verrez dans quelques lignes une autre utilisation possible ^^
- name : le nom de cette case. Là j'ai mis "pseudo" car c'était l'exemple que j'avais évoqué tout à l'heure, mais vous pouvez très bien le remplacer par autre chose !
A savoir :
- vous pouvez également ajouter un champ "value", qui sera ce qui sera affiché par défaut dans la case. Par exemple :

Code:

<input type="text" name="pseudo" value="entrez votre pseudo" />

Si vous avez bien suivi, dans la case, il y aura "entrez votre pseudo" d'indiqué. Le membre n'aura qu'à effacé cela pour y mettre son propre pseudo.
Lorsqu'on parlera du php, vous verrez combien cette fonctionnalité peut être utile !



mot de passe
c'est exactement la même chose que ce qu'on vient de voir, sauf que là ça n'est pas du texte qui s'affiche mais des étoiles/ronds (selon le navigateur).

Code:

<input type="password" name="mdp" />

Là encore vous pouvez définir une valeur grâce à "value" ^^



la zone de texte
Tout à l'heure, j'ai cité l'exemple d'un texte de présentation qui serait par exemple placé sur la page du compte du membre. Mais bien sûr, vous pouvez vous en servir pour beaucoup d'autres choses, comme l'espace pour taper un message si vous créez un forum, etc.

Code:

<textarea name="presentation"></textarea>

En anglais, "text area" signifie tout simplement "zone de texte".
Comme d'habitude, remplacez le contenu du "name" par ce que vous voulez. Et bien sûr, il est également possible d'ajouter un champ "value" ^^



les listes déroulantes
Elle peut par exemple servir, toujours dans le cadre de notre formulaire d'inscription, à sélectionner le pays du membre.
La structure de ce type de formulaire est un peu différente de celles vues précédemment, mais ça reste très simple.
Tout d'abord, il faut savoir qu'un formulaire de ce type commence par la balise <select> et se ferme par la balise... </select> ! Et oui, encore une balise qui fonctionne par paire (comme presque toutes les balises en xhtml, au cas où vous auriez oublié ).
Voilà le code :

Code:

      <select name="pays">
          <option value="belgique">Belgique</option>
          <option value="canada">Canada</option>
          <option value="france">France</option>
      </select>

Vous pouvez ajouter autant d'options que vous le souhaitez, là je n'en ai mis que 3, mais il peut y en avoir une infinité !

A savoir :
Quelques petits trucs utiles lorsqu'il y a beaucoup d'options :
- en sélectionner un par défaut. Par exemple, vous voulez que la France soit le champ par défaut de ce formulaire. Le membre pourra bien sûr le changer. Il suffit de procéder comme ça :

Code:

      <select name="pays">
          <option value="belgique">Belgique</option>
          <option value="canada">Canada</option>
          <option value="france" selected="selected">France</option>
      </select>

Vous voyez la différence ? j'ai tout simplement ajouté selected="selected" dans la partie des options, comme attribut ^^
- vous pouvez séparer les différents choix en fonction de plusieurs rubriques. Je vais garder mon choix de pays lors d'une inscription. Je vais créer un premier groupe de pays, ceux qui sont le plus souvent utilisés par les membres, et ensuite je mettrai les autres pays.
ça donne ça :

Code:

<select name="pays" id="pays">
          <optgroup label="Les plus utilisés">
              <option value="france">France</option>
              <option value="canada">Canada</option>
              <option value="belgique">Belgique</option>
          </optgroup>
          <optgroup label="Autres">
              <option value="suisse">Suisse</option>
              <option value="angleterre">Angleterre</option>
              <option value="etats-unis">Etats-Unis</option>
          </optgroup>
      </select>

Explications :
- on garde toujours la même structure que pour une liste déroulante toute simple
- mais cette fois-ci, on ajoute <optgroup> et </optgroup> pour encadrer chaque regroupement d'options. Pas très compliqué n'est-ce pas ?! x)



(petite parenthèse)
label
ça m'a permis d'introduire une nouvelle notion, celles des "label".
Le "label" permet en fait d'indiquer le libellé du champ, visible par le membre. Dans ce cas là, c'était tout simplement l'affichage du nom du regroupement au sein de la liste déroulante. Mais ça peut également être utilisé pour d'autres choses :

Code:

<label for="pseudo">Votre pseudo : </label><input type="text" name="pseudo" id="pseudo" />

Ouh là, j'ai ajouté plein de trucs là oO
N'ayez crainte, c'est très simple.

Explications :
- Entre <label> et </label> vous indiquerez ce qui sera affiché sur le site, à côté de la case à remplir. Dans mon exemple, je lui indique qu'il doit entrer son pseudo.
- for=" " : ça, c'est le nom du champ du formulaire. J'y reviens dans quelques secondes.
- une autre nouveauté : l'apparition de id = " " dans la balise "input" ! Pourquoi le mettre alors qu'on s'en est passé jusqu'à présent ? En fait, cet "id" est très utile, car il permet de relier le label à la case. C'est pour cela que l'id et le label doivent être identiques ! En effet, lorsque vous cliquez sur le label, le curseur se met automatiquement dans la zone de texte correspondante. Très pratique (et pas seulement pour les malvoyants) !



Maintenant que vous avez vu les label et leur utilité, on peut revenir à nos formulaires.


les options
Dans notre page d'inscription, il pourra par exemple permettre au membre de choisir son sexe. Et vu qu'on ne peut pas être à la fois un garçon et une fille (quoique, de nos jours...), il va falloir contraindre l'utilisateur à ne choisir qu'une seule case. C'est tout l'intérêt de ce type de formulaire !
Présentation :

Code:

Vous êtes :<br />
      <input type="radio" name="sexe" value="femme" id="femme" /> <label for="femme">Une femme</label><br />
      <input type="radio" name="sexe" value="homme" id="homme" /> <label for="homme">Un homme</label>

Et voilà !

Explications :
- type='radio' : bon alors là j'avoue que je ne sais pas pourquoi ça s'appelle comme ça, mais peu importe ! L'intérêt c'est de comprendre à quoi ça sert... et ce "radio" sert à dire qu'il n'y a qu'une seule case à cocher possible
- le reste, vous connaissez, on a déjà vu ça



les cases à cocher multiples
C'est plus ou moins comme ce qu'on vient de voir, sauf que là le membre peut cocher plusieurs cases. Par conséquent, on ne peut pas mettre "radio", il va falloir trouver autre chose... Et en l'occurence, il s'agit de "chekbox" ! Voilà comment ça se présente :

Code:

      Cochez les cases désirées<br />
      <input type="checkbox" name="newsletter" id="newsletter" /> <label for="newsletter">Recevoir la newsletter ?</label><br />
      <input type="checkbox" name="reglement" id="reglement" /> <label for="reglement">J'ai lu le règlement</label><br />
      <input type="checkbox" name="veneration" id="veneration" checked="veneration" /> <label for="veneration">Je m'engage à vénérer Elow =D</label><br />

Pas besoin d'explications là, si ?
Si vous en voulez, n'hésitez pas à poster sur le topic =)


Et voilà, maintenant vous savez comment faire un formulaire !
Je vous prépare un petit TD, et ça sera l'occasion pour moi d'ajouter quelques notions supplémentaires...

Exercice

Alors vous allez tout simplement devoir créer un formulaire d'inscription !
Eh oui, on s'en serait douté xD

Alors, dans ce formulaire je veux :
- demandez le pseudo
- mot de pass
- confirmation du mot de pass
- entrer son parrain s'il en a un
- sélectionner son sexe
- sélectionner son pays
- permettre au membre d'écrire un petit texte de présentation
- cocher la case du règlement s'il l'a lu
- case de la newsletter déjà cochée, mais que le membre peut décocher

N'oubliez pas la structure de base et les labels !
Tout ceci renverra sur la page d'inscription

Allez hop, au boulot !!!



Correction

Spoiler:

Si vous avez réussi, félicitations ! Sinon, n'hésitez pas à relire ce cours et à poser des questions x)

Créer un tableau

Les tableaux sont très pratiques, vous allez très certainement les utilisez régulièrement. Faire un tableau est vraiment très simple, cependant vous allez devoir apprendre de nombreuses nouvelles balises

Alors pour commencer, les balises pour ouvrir et fermer un tableau sont celles-ci (balises paires) :

Code:

<table> </table>

Comme d'habitude, c'est entre ces deux balises que vous mettrez votre texte ^^

Comme vous le savez, un tableau fonctionne avec des lignes et des colonnes.
Colonnes :

Code:

<td> </td>

Lignes :

Code:

 <tr> </tr>

Entre ces balises, vous pourrez mettre votre texte.

Par exemple, pour un tableau comme celui-ci :

Pseudo	Ancienneté
Sharyma	5 jours

le code sera :

Code:

<table>
<tr><td>Nom</td><td>Ancienneté</td></tr>
<tr><td>Sharyma</td><td>5 jours</td></tr>
</table>

Pas très compliqué, n'est-ce pas ?




Configurer le tableau

Faire apparaitre les lignes et les bordures
Si vous l'avez testé, vous avez pu remarquer que le code que je viens de donner n'affiche pas les bordures des cases etc. Pour les faire apparaitre, il va falloir toucher à la balise <table>.
Aussi, si on veut une petite bordure, on mettra ce code ci :

Code:

<table border='1'>

Le chiffre peut être remplacé par n'importe quel autre, mais bien sûr, plus il sera élevé et plus les bordures seront épaisses ^^

Définir la largeur du tableau
Peut-être avez-vous besoin que votre tableau fasse une certaine taille. Pour cela, deux solutions : soit les pixels soit les pourcentages.
Pour cela, on intervient encore une fois dans la balise <table> et cette fois-ci on ajoute l'élément 'width' qui signifie "largeur".
Aussi

Code:

<table width='100%'>

fera que votre tableau prendra toute la largeur de la zone de texte (là encore, vous pouvez mettre n'importe quel chiffre) et

Code:

<table width='35px'>

fera en sorte que la largeur totale de votre tableau fasse 35 pixels (idem pour le chiffre).

Définir la largeur d'une colonne
Peut-être aurez vous besoin que certaines colonnes du tableau soient plus larges que d'autres. On va de nouveau utiliser l'élément "width", mais cette fois-ci on va intervenir directement dans la colonne choisie !

Code:

<td width='40px'>

Faire une ligne d'en-tête
Pour que la première ligne de votre tableau soit configurée d'une certaine manière, on ne va pas utiliser les balises <td></td> mais les balises <th> et </th>

Aussi :

Code:

<table>
<tr><th>Pseudo</th><th>Ancienneté</th><th>Connecté ?</th></tr>
<tr><td>Patapouf</td><td>3 jours</td><td>non</td></tr>
<tr><td>Patacrèpe</td><td>18 jours</td><td>oui</td></tr>
</table>

Si vous avez testé ce code, vous remarquerez peut-être qu'il n'y a aucune différence entre les lignes ! C'est tout à fait normal, en fait il faudra avoir recours au CSS pour que les lignes soient différentes. Nous en reparlerons dans un autre cours, mais n'oubliez pas cette balise, elle est très utile !




Divers

Ajouter un titre
Pour afficher un texte au-dessus du tableau, vous pouvez très bien utiliser les balises habituelles (à savoir <p> et </p> au cas où vous auriez oublié ), mais sachez qu'il existe quelque chose de spécifique aux tableaux, à savoir :

Code:

<caption> et </caption>

A savoir que caption signifie "légende" en anglais ^^
Vous mettrez ces balises (ainsi qu'un texte au milieu bien sûr) juste après la balise <table> et avant les différentes lignes et colonnes.
ça donne ça :

Code:

<table><caption>Mon titre</caption><tr><td>Blabla</td><td>Hihi</td></tr></table>

Fusionner des cellules
C'est très utile de savoir fusionner des cellules !
Il existe pour cela 2 attributs différents, un pour fusionner des cellules sur la même ligne (colspan) et un autre pour fusionner deux cellules sur la même colonne (rowspan)
Mémo :
colspan vient de "colomn" qui veut dire "colonne"
rowspan vient de "rows" qui veut dire "rang/rangée/ligne"

Cet attribut est à placer dans la balise <td> ^^

Donc :

Code:

<table><tr><td>Pseudo</td><td>Prénom</td><td>Âge</td></tr>
<tr><td colspan='2'>Maéva</td><td>16 ans</td></tr></table>

Donnera :

Pseudo	Prénom	Âge
Maeva		16 ans

Pour le rowspan, c'est pareil ! ^^




Pour les gros tableaux : en-tête, corps et pied de page
Vous aurez peut-être besoin de faire des tableaux très longs ; dans ce cas, il est très pratique de voir le nom de la colonne affiché sur la première ligne ET sur la dernière ^^
On va donc voir 3 nouvelles balises (et oui, encore d'autres !! )
Première ligne :

Code:

<thead></thead>

Corps :

Code:

<tbody></tbody>

Dernière ligne :

Code:

<tfoot></tfoot>

ça va se présenter comme ça :

Code:

<table>
<thead> <!-- début de l'en-tête du tableau -->
<tr>
<th>Pseudo</th><th>Ancienneté</th><th>Pays</th>
</tr>
</thead> <!-- fin de l'en-tête -->

<tfoot> <!-- début du pied de tableau -->
<tr>
<th>Pseudo</th><th>Ancienneté</th><th>Pays</th>
</tr>
</tfoot> <!-- fin de la dernière ligne -->

<tbody> <!-- contenu -->
<tr>
<td>Bidoubidou</td>
<td>3 jours</td>
<td>France</td>
</tr>
<tr>
<td>Glagagla</td>
<td>56 jours</td>
<td>Canada</td>
</tr>
<tr>
<td>Moules frites</td>
<td>14 jours</td>
<td>Belgique</td>
</tr>
<tr>
<td>Schtroumpf</td>
<td>17 jours</td>
<td>Pays des Schtroumpfs</td>
</tr>
<tr>
<td>LOLMDR</td>
<td>1 jour</td>
<td>Pays de Kevin</td>
</tr>
  </tbody>
</table>

Et voilà !
En fait, il faut commencer par mettre l'en-tête, puis le pied de page, et ensuite seulement le corps du tableau ^^




Mettre un peu de couleurs dans votre tableau !

Parce que oui, un tableau à écritures noires sur fond blanc, c'est pas le must du must...
On va donc apprendre à y mettre un peu de couleur !
Si vous voulez que tout votre tableau soit d'une certaine couleur, il va falloir toucher à la balise <table> ; si vous voulez que ça soit juste une ligne, rendez-vous dans la balise <td> !

On utilisera l'attribut : "bgcolor" (qui vient de "background color" et signifie "couleur de fond").

Pour un tableau entièrement sur fond vert, on notera :

Code:

<table bgcolor='#B0CC56'>

Pour mettre juste une ligne avec cette couleur là, on fera :

Code:

<td bgcolor='#B0CC56'>

Exercice !

Ce cours n'était pas très difficile mais savoir faire un tableau est vraiment très utile, je dirai même indispensable !

Alors un petit exercice pour la route ! Vous allez faire ce tableau :

Pseudo	Argent	Niveau
Little Mule	0€ mouahaha bien fait ! PS : ce commentaire ne fait pas partie du TP xD	Débutante
Sharyma	999999999999999999999€ (a)	Professionnelle
Blablabla	Vient d'arriver

Je ne fais pas de correction, tout est dans le cours !
Mais si vous avez des questions/problèmes, n'hésitez pas

V. Annexes

Quelques autres balises importantes...


Entre <head> et </head>

Code:

<!-- Titre de la page -->
<title>Tutoriel xhtml</title>
<!-- Auteur de la page -->
<meta name="author" content="Sharymat" />
<!-- Description de la page -->
<meta name="description" content="Tutoriel de Sharyma" />
<!-- Mots-clés de la page -->
<meta name="keywords" content="tutoriel, xhtml, apprendre à créer un site" />
<!-- Adresse de contact -->
<meta name="reply-to" content="sharyma@hotmail.fr" />
<!-- Empêcher la mise en cache de la page par le navigateur -->
<meta http-equiv="pragma" content="no-cache" />
<!-- Table de caractères -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- Rafraîchissement automatique au bout de 60 secondes -->
<meta http-equiv="refresh" content="60; URL=http://www.adressedusite.com" />
<!-- Icône du site (favicon) -->
<link rel="shortcut icon" type="image/favicon" href="favicon.ico" />

Bien sûr, ils ne sont pas tous indispensables ^^




Entre <body> et </body>

<!-- pour donner la signification d'un acronyme -->
<acronym title="Foire Aux Questions">F.A.Q.</acronym>





Pour voir toutes les balises utilisées en xhtml, je vous conseille ce site : http://fr.selfhtml.org/navigation/html.htm

A noter que ce tutoriel connaitra une refonte