Vous avez enfin décidé de vous mettre au langage de programmation du Web ? Le problème qui se pose maintenant est que vous ne savez pas par où commencer ? Pas de panique, je vais tâcher de vous guider au mieux que possible. La base à connaître est le xHTML, le CSS et ensuite, le PHP pour plus tard.

Concentrons-nous sur le premier langage, le xHTML. Ce langage est le successeur du xHTML qui est à l'origine du Web. Avec ce langage, vous pourrez créer votre page, mettre le texte, ajouter des images, etc... Bref, faire votre site.

Ce langage n'est pas très compliqué à apprendre. Après quelques lectures, vous comprendrez très rapidement et vous aimerez programmer à la fin.

Pour coder en xHTML, pas besoin de posséder un logiciel payant, le simple Bloc-Note de Windows suffira amplement. Toutefois, je vous recommande l'utilisation d'un logiciel plus performant comme Notepad++ qui permet de colorer le code. Ainsi, votre travail sera plus clair et vous pourrez vous retrouver plus facilement dans tout se code.

Télécharger Notepad++

Autre logiciel qui sera nécessaire, le navigateur Mozilla Firefox. Comme Internet Explorer, il vous permet de naviguer sur le Web. Si votre site s'affiche correctement sur Internet Explorer et sous Firefox alors vous êtes sur que votre site tournera sur la plupart des navigateurs car les navigateurs, il en existe des dizaines.

Télécharger Mozilla Firefox

[pagebreak]
Maintenant que vous avez téléchargé ces deux logiciels, nous pouvons maintenant entrer dans le vif du sujet et commencer. Premièrement, il faut savoir que le xHTML est composé de balises et d'attributs. Les balises permettent d'insérer des éléments alors que les attributs donne des ordres ou des propriétés aux balises. Le tout permet de créer une page web. Pour commencer, nous nous pencherons uniquement sur ce langage. Pour personnaliser nos pages et mettre de la couleur, nous verrons cela plus loin avec le langage CSS qui est utilisé avec lui.

Les Balises

Les balises permettent d'insérer des liens, des images, des tableaux, des paragraphes, et plus.

Les balises doubles

Les balises doubles sont composé d'une balise ouvrante <balise> et d'une balise fermante </balise>. Vous remarquerez la présence d'un slash / dans celle fermante.

Par exemple, pour afficher du texte en gras, on écrira...
<strong> Mon texte en gras </strong>

En gros, on dit:
Met en gras "Mon texte en gras" et arrête après.

Les balises simples

Les balises simples ne possèdent pas de balise de fermeture. Par contre, on retrouve toujours un slash à la fin. Par exemple : <br />.

Les attributs

Les attributs servent à donner des indications à la balise ou des propriétés à la balise. Un attribut est composé comme ci-dessous :

<balise attribut="valeur">

Les commentaires

Lorsque nous avons une page qui possède énormément de code, il est souvent difficile de se retrouver dans tout se code même pour les experts. C'est pour cela qu'il existe une méthode pour ajouter des commentaires. Je vous invite d'ailleurs à les utiliser souvent afin de ne pas vous perdre et de bien comprendre.

Pour mettre un commentaire, il suffit d'écrire de cette façon

<!-- Mon commentaire et je termine par -->

La page de base

Une page en xHTML possède un code de base obligatoire. Pour l'instant, faites simplement un copier-coller de ce code dont vous aurez besoin plus tard.



Cliquez pour afficher en mode texte (copiable).

Voilà pour notre départ. Nous avons vu qu'il existe des balises qui permettent d'insérer des éléments dans nos pages. Les attributs permettent de spécifier des éléments et le code pour insérer des commentaires nous permet de nous retrouver facilement. Nous savons également que toute page xHTML doit avoir un code de base qui reste identique dans n'importe quelle page.

[pagebreak]
Passons à la seconde étape. Pour l'instant, je crois que je vous ne aie pas perdu car ce n'est rien de  bien compliqué sinon que de la théorie. Maintenant que nous avons notre petite base, nous allons faire notre première petite page en xHTML. Aussi, pour l'instant, nous ne verrons pas la personnalisation de la page (centrer, couleurs, etc...). Cette partie est réservée au CSS qui doit-être utilisé pour cela.

Ouvrez Notepad++ et ouvrez votre page que je vous avais demandé de sauvegarder dans l'autre page.

Un Paragraphe...

Lorsque vous écrivez un texte sur une feuille de papier, vous divisez le tout par paragraphe. Ici, c'est la même chose. Il suffit de taper la balise <p> et de mettre notre texte entre pour enfin terminé avec </p>


Cliquez pour afficher en mode texte (copiable).

Si nous plaçons se code dans notre page, nous devons absolument le mettre entre les balises <body> et </body>. Tout ce qui est dans cette balise sera visible par l'internaute. Ainsi, nous avons donc...


Cliquez pour afficher en mode texte (copiable).

Ouais mais comment on passe une ligne...

...dans un paragraphe ?

En xHTML, passer une ligne à l'écran ne fait absolument rien. Pour passer une ligne, il vous l'indiquer au navigateur. Nous utilisons donc la balise <br />. Cette balise peut-être utilisée autant de fois que vous voulez.

...pour changer de paragraphe ?

Pour changer de paragraphe, il vous suffit de refaire une refaire une seconde balise <p> et </p>. Voyons un exemple...




[pagebreak]

Des titres c'est bien mieux...

C'est bien beau mettre du texte mais sans titre, ce n'est pas très précis pour trouver rapidement une information. C'est pour cela qu'il existe des balises pour insérer des titres. En tout, il en existe 6 qui fonctionne par ordre d'importante.

<h1></h1> : Le plus important. Souvent utilisé pour le titre de la page.
<h2></h2> : Utilisez-le pour identifier vos paragraphes
<h3></h3> : Celle-ci pour les sous-titres
<h4></h4> : Celle-là pour les sous-sous-titres
<h5></h5> : ....
<h6></h6> : La moins importante.

Bon, je crois que vous avez maintenant compris le principe des balises de titre. Plus le chiffre est gros et plus le titre est peu important. Attention, il n'existe pas de <h7>. Ceci arrête <h6>. Le plus souvent, les webmasters utilise uniquement les balises <h1><h2><h3>. En effet, il est très rare d'avoir des textes à six niveaux. Ajoutons des titres à nos paragraphes :




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

Les Balises

<em></em> : Pour mettre un texte en évidence
<strong></strong> : Mettre en gras
 : Mettre en exposant
 : Mettre en indice
<q></q> : Mettre une courte citation
<blockquote><blockquote> : Mettre une longue citation
<acronym></acronym> : Mettre un acronyme, voir ci-dessous

Le cas de l'acronyme...

Pour écrire un acronyme, nous devons utiliser la balise et un attribut.

<acronym title="Cascade Style Sheet">CSS</acronym>

Savoir où les placer...

Il existe deux sortes de balises. Premièrement, il y a ceux de type block et ceux de type inline. Les balises inlines (<strong><em><q>) peuvent être dans un paragraphe. Les balises blocks (<p><h1><blockquote>) ne peuvent être contenu dans une autre balise block. Une balise inline entre dans une balise block mais pas le contraire.

BON :
<h1>Mon titre</h1>
<p> Mon paragraphe <strong>important</strong></p>

MAUVAIS :
<p><h1>Mon titre</h1>Mon paragraphe <strong>important</strong></p>

[pagebreak]

Les images

Une page composée uniquement de texte, c'est terne et plate. C'est pour cela que nous allons maintenant ajouter des images à notre texte. Aussi, ne surchargez pas vos pages d'images. C'est un conseil. Donc pour mettre une image, il faut utiliser la balise <img />. Celle-ci aura deux attributs soit src (qui indique le chemin où l'image est situé) et alt (pour afficher un texte, si l'image ne peut s'afficher). À la fin, nous aurons une structure comme celle-ci :

<img src="salon001.png" alt="Image du salon rouge" />

Le point sur l'attribut Alt

L'attribut Alt est un texte alternatif qui s'affiche quand le navigateur n'arrive pas à trouver l'image. Très pratique car si l'image ne s'affiche pas, Firefox n'affiche rien et Internet Explorer affiche un carré avec une croix rouge.  Le texte alternatif à aussi un seconde utilité. En effet, les personnes qui ont un handicap visuel utilisent des logiciels spéciaux. Ces logiciels ne peuvent voir l'image mais grâce au texte alternatif, ils peuvent dire ce que représente l'image.

Le point sur l'attribut Src

Pour ajouter une image dans une page vous pouvez utiliser deux types de chemins. La grande majorité du temps, nous utilisons le chemin absolu qui est sous la forme de http://www.monsite.com/salon001.png. Vous pouvez également utiliser le chemin relatif dans le cas où votre image est dans le même dossier ou un sous-dossier de l'endroit où la page se trouve (pas clair...). Par exemple : salon001.png ou images/salon001.png.

Les liens

Nous arrivons maintenant au dernier chapitre de ce cours de xHTML. Après ce cours, il vous faudra aborder le second cours sur le CSS mais pour l'instant concentrons-nous sur les liens. Donc, les liens ont pour but de lier des pages ou des sites entre-elle.  Comme pour les images, il existe deux types de liens soit les liens relatifs et ceux absolus. Même chose que pour les images. Un lien possède cette structure : <a href="page.html">Ma Page</a>

Supposons que je fasse un lien relatif vers cuisine.html sur la page salon.html qui se trouve dans le même répertoire que cuisine. Il me suffira de créer un lien qui aura comme valeur cuisine.html. Ainsi, j'aurez <a href="cuisine.html">Allez voir ma cuisine !</a>

Deuxième supposition. Je veux faire un lien sur ma page salon.html vers la page chambre1.html qui se trouve dans le dossier etage2 en relatif. Mon lien sera donc <a href="etage2/chambre1.html">Ma chambre au deuxième étage</a>

Dernière supposition. Je veux faire un lien vers une page d'un autre site. Mon lien sera obligatoirement absolu et aura la forme suivante :
<a href="http://www.lesite2.com/lapage2.html">Le site de Paul</a>.

Un conseil...

Utilisez des liens relatifs de préférence sur votre site. En effet, si vous utilisez des liens absolus pour lier les pages internes de votre site, vous devrez mettre à jour tous les liens lorsque vous changerez d'hébergeur ce qui est loin d'être très pratique.

L'attribut title

Attribut non-obligatoire, title permet d'afficher une infobulles lorsque la souris survole le lien. Très pratique pour apporter quelques précisions sur le lien où on envoie la personne qui visite notre site. Par exemple : <a href="cuisine.html" title="Ma belle cuisine toute neuve">Voir ma cuisine</a>

[pagebreak]

La conclusion !

Voilà nous avons enfin terminé notre apprentissage du langage xHTML. C'était assez long et plate mais maintenant vous pouvez vous vanter de savoir ce langage du web. Bien sûr, les pages que vous faites sont loin d'être jolie car ils n'ont pas de couleurs et de mise en page. C'est pour cela, que nous aborderons le second langage qui vient avec le xHTML, le CSS. Pour l'instant, faisons une pause car il faut me laisser le temps de l'écrire celui-là !

Sur ces mots, je vous laisse reprendre certains passages que vous voudriez pratiquer. D'ailleurs, je vous conseille fortement de vous pratiquer à coder. Cela vous permettra de mieux vous rappeler les différentes balises et attributs. Après tout, il ne faudrait pas oublier le chemin que nous avons fait maintenant.

Disponible en téléchargement

Ce tutoriel est disponible version téléchargeable via cette page.