Apprenez les bases de l’XHTML ! (mon site, pas à pas)
Votes : environ (100%) 1 vote

Dans le premier article de la série « Créons un site pas à pas », je vous ai dit que le langage de base qu’on doit apprendre pour pouvoir créer un site web, ou pour au moins savoir comment créer une page web en utilisant le Bloc note, c’est l’HTML (ou l’XHTML).

Et c’est le langage le plus facile à apprendre, donc ne vous paniquez pas :D

En faite, on a fait dans le premier article que de la théorie, alors, accrochez-vous ! Nous allons faire de la pratique en citant les balises et leur explications.

Et si vous vous êtes bloqué dans un coin en suivant ce tutoriel, n’hésitez pas à poster rapidement un commentaire en bas !

Allons-y !

Préparez votre éditeur

Comme je vous ai dit la dernière fois, nous allons utiliser comme éditeur le Notepad++.

Vous pouvez le télécharger le Notepad++ en utilisant ce lien : http://www.01net.com/…/29119.html

Après l’installation, lancez votre programme… Et puis, après le lancement, une fenêtre blanche va s’afficher, c’est un peu comme les navigateurs modernes d’Internet, ce programme est constitué d’un menu, d’onglets et d’une interface pour l’édition.

Bref, pour commencer le travail, ouvrez un nouveau document en cliquant sur « Fichier » > « Nouveau », puis dans le menu en haut, cliquez sur « Langage » > « X » > « XHTML » ou « H » > « HTML ».

Pour enregistrer votre document HTML, cliquez sur « Fichier » > « Enregistrer ». Ou sur l’icône comme dans l’image ci-dessous.

Et voilà, nous allons voir tout de suite, comment créer une page HTML qui marche :)

Let’s GO !

L’HTML et XHTML, qu’elle est la différence

Hmm… Je pense qu’il y en a quelques-uns qui ne font pas la différence :)

Je dois parler un peu pendant 30 secondes pour qu’on puisse commencer le cours.

Ecoutez, l’XHTML est une version plus stricte que l’HTML, il ne vous permet pas l’oublie d’une balise, d’oublier de mettre des guillemets,…

Bref, l’XHTML est basé sur du XML, donc, c’est plus strict, mais c’est le plus puissant, si vous mettez un code, sachez-bien que ce dernier va être traité de la même façon par tous les autres navigateurs ! Donc, c’est plus universel.

Aujourd’hui, la version qui règne, c’est XHTML 1.0, c’est la version la plus récente et la plus flexible, d’ailleurs, cette page est écrite en XHTML 1.0.

Bref, passons à l’essentiel de l’HTML (XHTML), on va parler ensemble de comment écrire des codes qui rendent vie à vos pages WEB !

Passons à la pratique !

La forme générale d’un document HTML :

Bien ! Vous savez maintenant ce que c’est qu’un éditeur, vous l’avez préparé, et vous savez que l’XHTML est le langage que nous allons utiliser pour créer un site web pas à pas !

Commençons alors :)

L’HTML en général est un langage de balisage, toute balise commence par un « < » et se termine par « > », comme « <balise> ».

La balise doit être toujours fermé dans l’XHTML, donc pour la fermer on ajoute un slash avant le premier « <« , comme « </balise> ». Voir le code ci-dessous.

[html] <balise> </balise> [/html]

Il existe même les attributs d’une balise, comme « <balise attribut= »valeur »> </balise> » (les guillemets sont importants dans l’XHTML).

[html] <balise attribut= »valeur »> </balise> [/html]

Dans tout fichier HTML, il existe 3 balises indispensables, ce sont : <html>, <head> et <body>

La balise <html> permet d’identifier le type du fichier, dans notre cas, c’est un fichier html, donc on met « <html> ».

La balise <head>, ou bien, tête, c’est le cerveau de votre page, c’est la partie qui s’intéresse uniquement au navigateur, et c’est la balise qui donne les informations sur le titre de la page à travers la balise « <title> » et c’est elle qui permet d’importer des fichiers de style et des « Scripts » (Nous allons revenir).

Bref, pour l’instant, nous allons parler uniquement du titre de la page.

La balise <body>, c’est le corps de votre site web, et c’est dans cette balise qu’on met le contenu texte, images ou vidéos de votre page :)

Bref, la balise <body> c’est tout ce que vous voyez dans ce site web ! Et la partie dont on va parler plus, car le maximum de travail se déroule avec cette fameuse balise :D

Voici donc une vue intégrale d’un fichier HTML et non pas XHTML.

[html]

<html>

<head><title> Le titre de la pa<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e : easy tutoriel </title> </head>

<body> </body>

</html>

[/html]

Ce n’est qu’un tout petit code ! Écrit en HTML.

Nous sommes plus jeunes ! Passons à l’XHTML :)

L’XHTML, plus puissant !

En faite, la différence, c’est qu’on ajoute quelques ligne dans l’en-tête de votre fichier html. Voici à quoi ressemble un fichier XHTML, copiez le dans votre éditeur.

[html]

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>

Salut le monde !

</body>

</html>

[/html]

Voici à quoi ressemble l’effet de la balise <title> :)

Si vous collez le code ci-dessus dans votre éditeur, enregistrez votre fichier en cliquant sur « Fichier » > « Enregistrer » ou bien tapez « Ctrl+S ».

Et puis, par la suite, enregistrez votre fichier en le nommant « Index.html » ou « Nom-du-fichier.html ».

N’oubliez pas de sélectionner dans le type du fichier « Tous les types (*.*) » pour ne pas créer un fichier avec l’extension « .html.txt » au lieu de « .html ».

Remarque: Vous pouvez utiliser l’extension « .htm » au lieu de « .html ».

Voici à quoi ressemble le fichier que nous avons créé :

Ne vous inquiétez pas ! Si vous avez obtenu le même résultat, je vous félicite, mais ce n’est que le début !

ACCROCHEZ-VOUS !

Comment organiser le texte :

Maintenant, nous allons parler de l’essentiel ! On va commencer par comment mettre du texte et comment l’organiser en utilisant divers codes :)

Premièrement, pour mettre un paragraphe, la balise <p> s’occupe uniquement de ça ! Sans oublier la balise <br /> qui permet de sauter les lignes.

Voici un petit exemple de paragraphes :

[html]
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
<p> bla bla ici, bla bla la bas, easy ici, tuto la bas </p>

<p> Coucou ici, coucou la bas  <br /> Coucou en bas </p>

</body>

</html>

[/html]

Comme vous l’avez remarqué, quand on saute la ligne dans le code HTML, cela n’affecte aucun changement ! Donc, vous pouvez obtenir le même résultat si vous testez le code ci-dessous (en le mettant dans la balise <body>) :

[html]

<p> bla bla ici, bla bla la bas,

easy ici, tuto la

bas

</p>

<p> Coucou ici, coucou la bas  <br /> Coucou en bas </p>

[/html]

C’est totalement la même chose :p

Bien !

Maintenant, je vais parler des titres et l’importance qu’apporte chaque balise à son titre !

Les titres jouent un rôle très important du côté apparence de votre site web, les moteurs de recherche savent plus bien que nous, qu’un titre de grande taille est plus important qu’un titre petit, c’est normale :)

Pour nous, les titres sont aussi des balises, il y en a déjà 6 types de balises destinées aux titres.

Les balises sont :

  • <h1> </h1> : C’est le premier titre à utiliser dans vos pages, autrement dit, c’est le titre le plus important.
  • <h2> </h2> : Vous pouvez utiliser ce genre de titres pour organiser vos paragraphes et donner plus d’importance à chacun de vos paragraphes.
  • <h3> </h3> : Ce type de titre est aussi important, mais pas comme le précédent.
  • <h4> </h4> : Un titre encore moins important.
  • <h5> </h5> : Un titre pas important.
  • <h6> </h6> : Un titre vraiment pas important du tout.
Et comme j’ai dit tout-à-l’heure, les tailles sont définies par défaut, si le nombre devant le « h » est plus petit, le titre va être plus grand.
Vous pouvez tester vous même comment ça paraît, en utilisant le code ci-dessous :
[html]
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
<h1>H1 Titre très important</h1>
<h2>H2 Titre important</h2>
<h3>H3 Titre un peu moins important</h3>

<h4>H4 Titre pas trop important</h4>
<h5>H5 Titre pas important</h5>
<h6>H6 Titre vraiment pas important du tout</h6>
</body>

</html>
[/html]

Maintenant, nous allons parler sur comment mettre une partie de votre texte en valeur. Autrement dit, vous allez découvrir comment faire du texte en gras, en italique ou bien comment mettre une souligné… Tenez ça ! La balise <b> ou <strong> c’est pour le gras, la balise <i> pour l’italique, la balise <u> pour le souligné (underline) et la balise <s> ou <strike> pour barrer le texte :) Voici donc un exemplaire :

[html]
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
Je <b>man<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e</b>, tu <i>man<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>es</i>, ils <s>man<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>ent</s>, <b><i><u>nous man<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>eons</u></i></b> /** PS: J’ai respecté l’ordre des balises **/
</body>

</html>
[/html]

Et si quelqu’un ne mange pas en ce moment, met un commentaire en bas :p

Bref, mettre en valeur son texte permet de rendre son texte plus vivant, et mettant le gras sur les bons mots ou phrases, cela peut améliorer le référencement de page.

Je vais parler de ça aussi dans cette série de tutoriels :)

Des balises pas comme les autres :

Parlons maintenant de quelques autres balises, que nous allons peut être plus les utiliser que rarement, mais bon…

Pour afficher des mots en hauteur, vous pouvez utiliser la balise <sup> (ça sert également pour les puissances dans les maths…).

Voici un exemple :

[html]
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
X<sup>2</sup> + X<sup>2</sup> = 2X<sup>2</sup> <be />
<i>Équation de maths.</i>
</body>
</html>
[/html]

Hmm, ça comment à ennuyer je pense :D Voici donc une liste de plus de 10 balises et leur rôles :

  • <sup> (déjà cité) : Permet de mettre du texte en hauteur (pour les puissances).
  • <sub> : Le contraire du premier (je suis paresseux :p).
  • <blockcote> : Pour mettre une citation (marginalisation du gauche).
  • <acronym> : Pour faire apparaitre une explication à une abreviation, et ça marche comme ça : <acronym value= »EASYTUTORIEL.com »>ET.com</acronym>
Passons maintenant au coeur de chaque page web, oui ! Ce sont les images :)

Comment insérer des images dans une page web

Maintenant, nous allons parler un peu sur l’insertion des images, il n’y a pas qu’une seule balise, mais des dizaines balises, sauf, que dans ce premier chapitre, nous allons parler uniquement d’une seule balise.

La balise la plus connue, permettant d’insérer des images c’est la balise <img>, avec l’attribut src= » » pour définir le lien direct de l’image.

Vous pouvez insérer des images de plusieurs extensions (Jpg, Png, Gif…), vous pouvez redimentionner vos images directement avec les attributs height= » » (pour la hauteur) et width= » » (pour la largeur).

Vous pouvez même mettre un bordure à un couleur de votre choix ! (Sans CSS)

Voici à quoi ressemble un code complet d’une image (SANS UTILISER LE CSS) :

[html]
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
<im<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span> src= »http://SITE.LTD/DOSSIER/ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e.jp<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span> » hei<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>ht= » » width= » » title= »ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e » alt= »ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e » />
<!– OU –>
<im<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span> src= »http://SITE.LTD/DOSSIER/ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e.jp<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span> » alt= »ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e » hei<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>ht= » » width= » » title= »ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e »></im<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>>
<!– Ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e avec bordure –>
<im<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span> border= »1px solid blue » src= »http://SITE.LTD/DOSSIER/ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e.jp<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span> » alt= »ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e » hei<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>ht= » » width= » » title= »ima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e »></im<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>>
</body>
</html>
[/html]

Un site web sans liens, ce n’est rien !

Nous allons découvrir ensemble dans le titre suivant, comment créer des liens texte, et comment rendre une image cliquable :)

Comment ajouter des liens ?

Il faut savoir d’abord ce que signifie le Mot URL (Uniform Resource Locator), comme son nom l’indique, il sert à nommer une page dans le web avec un lien de type : http://votre-site.ntld/dossier/sous-dossier/page.html

Vous pouvez mettre un lien n’importe ou dans votre page, et sur n’importe quel élément, en utilisant la balise <a> et l’attribut href= » » pour définir le lien.

Voici un exemple d’un lien dans un texte :

[html]
<pre><!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
Bonjour,<br />
Et soyez le bienvenue sur <a title= »Easytutoriel.com » href= »http://easytutoriel.com »>Easytutoriel</a> !
</body>
</html></pre>
[/html]

Pour ceux qui veulent savoir comment peut-on changer les couleurs, c’est pour la suite de notre série :) (Pssst, c’est du pur CSS ;))

Bien, vous allez me dire « Et pour une image ? », bah c’est facile ! Il suffit de mettre la balise autour de l’élément que vous voulez qu’il soit cliquable.

[html]
<pre><!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
Bienvenue dans ma pa<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e web !<br />
<a href= »http://lien-direct.ntld/dossier/pa<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e.htm »><im<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span> border= »0″ src= »http://lien-avec-http.ntld/vers/lima<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>e.pn<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span> » alt= » » /></a>
</body>
</html></pre>
[/html]

NB: J’ai mit la bordure en 0 pour éliminer la bordure du lien sur l’image.

Bien, comme je vous ai dit, j’ai parlé uniquement d’une seule manière afin d’afficher une image. Avec le CSS on va faire du boulot des professionnels ! Avec les astuces des grands web designers à travers le monde :D

Bien !

Passons maintenant aux tableaux…

Comment tracer (faire) des tableaux

Pour insérer un tableau, nous devons utiliser la balise <table>, pour la ligne <tr> et pour la colonne <td>. Comment ça marche ? Lisez la suite :)

Voici un exemple d’un code simplifié pour un simple tableau :

[html]
<pre><!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>
</body>
</html></pre>
[/html]

N’oubliez pas de suivre toujours l’ordre, si vous ouvrez table en premier, ne la fermez qu’en dernier :woot:  !

Si vous ne voyez aucun bordure, et que vous voulez ajouter un, vous pouvez utiliser l’attribut border= » », mais c’est un peu moche :(

Testez et vous allez voir…

[html]
<pre><!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
<table border= »1px »>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>
</body>
</html></pre>
[/html]

Donc, on va passer à un autre type de bordures, on va utiliser l’attribut border= » » dans la balise td.

Mettez alors comme dans le code ci-dessous :

[html]
<pre><!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
<table>
<tr>
<!– Des bordures et lar<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>eur définit –>
<td width= »150px » style= »border: 1px solid #D2A901; »> 1 </td>
<td width= »150px » style= »border: 1px solid #D2A901; »> 2 </td>
</tr>
</table>
</body>
</html></pre>
[/html]

En effet, j’ai triché là un peu :p

J’ai intégré l’attribut du CSS style= » » pour faire le bordure, je peux même changer l’arrière-plan :)

Bien, quelques uns vont me questionner et me dire « Comment sauter des colonnes ? » ou « Comment peut-on mettre 5 cases dans une seule ? » Et bah voici la réponse.

Vous devez utiliser l’attribut colspan= »Numéro » dans votre td pour sauter des colonnes ou pour mettre X colonnes dans une seule :

[html]
<pre><!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.or<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>/1999/xhtml » xml:lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » lan<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>= »fr » dir= »ltr »>
<head>
<title>Pas à pas, easytutoriel.com</title>

</head>

<body>
<table>
<tr>
<!– Des bordures et lar<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>g</span>eur définit –>
<td colspan= »2″ width= »150px » style= »border: 1px solid #D2A901; »> 1 </td>
</tr>
<tr>
<td width= »150px » style= »border: 1px solid #D2A901; »> 2 </td>
<td width= »150px » style= »border: 1px solid #D2A901; »> 3 </td>
</tr>
</table>
</body>
</html></pre>
[/html]

Et de même pour les lignes, vous pouvez utiliser l’attribut rowspan= »Numéro », la même utilisation, sauf que cette dernière est spécialement pour la balise <tr> (qui signifie déjà, ligne).

Félicitation !

Savez-vous qu’on peut créer toute une page web en utilisant uniquement un seul tableau ? Avec des images dedans et du texte…

Mais c’est dépassé ! Car les tableau prennent plus d’espace volumique, et donc un long chargement de page, je vais revenir sur le sujet ;)

Donc le CSS comme on a vu est un élément indispensable pour chaque page web, et surtout les pages utilisant le XHTML.

Notre cours n’a pas encore terminé !

Maintenant, je vais parler d’un élément que j’ai utilisé tout au long de ce tutoriel, les commentaires.

Les commentaires, uniquement pour vous !

Je ne parle pas ici des commentaires du site web, mais de vos commentaires dans vos pages HTML.

Il se peut que vous oubliez le rôle ou le style d’une partie de votre code, donc, il vous faut un indicateur uniquement pour vous.

Vos visiteurs ne vont plus le voir, et il existe beaucoup de formes. Voici un exemple d’un commentaire :

[html]

/**

TOUS LES DROITS SONT RESERVES !

EASYTUTORIEL.COM

**/

[/html]

Comme vous le voyez, j’ai utilisé deux slash avec des asterix (/** votre commentaire **/)

Vous pouvez également utiliser le « < » avec 2 tirets, comme dans l’exemple ci-dessous :

[html]

<– ALL RI<span style= »padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit; »>G</span>HTS RESERVED –>

[/html]

J’ai pas encore fini !

Le temps que j’ai prit pour rédiger ce cours (cet article) n’a pas dépassé les 2 jours…

Donc si vous trouvez une erreur dans un code, erreur d’ortho., n’hésitez pas à mettre un commentaire en bas (et pas <!– –> :D).

Bien !

Cet article va être modifié et actualisé chaque semaine, donc, je vous invite à le relire une autre fois !

La prochaine fois, on va parler du CSS (plus long que cet article). On va parler sur la balise <div> que je n’ai pas cité, et plus d’autres balises qui sont uniquement pour le style de votre site web ou de votre page HTML.

Soufiane – Easytutoriel.com