[Informatique][Site web] Le XHTML

Le XHTML
Cours pour débutant réalisé par Ze-Mystery

Bonjour à tous !
Je met aujourd'hui à votre disposition un cours très simple sur un langage dont tout le monde a, je pense, entendu parler : le XHTML

Mais c'est quoi le XHTML ?

Pour répondre à cette question, commencons par la base des bases : comment fonctionne un ordinateur ?
Il est clair que, pour l'instant, on ne peut pas dire à un ordinateur "Crée moi un site Web" en s'adressant directement à lui. Les informaticiens ont donc inventés plusieurs langages pour que l'être humain puisse communiquer avec nos machines. Les français comprennent et parlent le français : les ordinateurs eux, comprennent uniquement le langage binaire.

Une minute, je suis perdu. C'est quoi ca le langage binaire ?

Disons que...un ordinateur ne comprend que des 1 et des 0. "Bonjour" dans le langage de notre ordinateur peut se traduire par 010000111110011. Cette suite de 0 et de 1 s'apelle le langage binaire. Vous comprenez donc la galère dans laquelle était les informaticiens de l'époque ! C'est alors que les différents langages sont nés. Nous connaissons aujourd'hui le C++, qui permet de réaliser des logiciels. Il en existe pleins d'autres mais je ne les connais pas tous et vous faire une liste serait vraiment trop long
Celui que nous allons apprendre se nomme le XHTML qui, lui, permet de créer des sites Web.

Ou est la difficultée ? Il suffira de dire en XHTML à l'ordinateur "fais ceci, fais cela..." !

Je n'ai jamais dit que ce serait difficile A condition de lire attentivement ce cours bien sur.
La difficultée réside principalement dans le fait de bien se faire comprendre par notre ordinateur adoré. Si tout se passe correctement, il nous obéira au doigt et à l'oeil

Le saviez-vous ?

XHTML veut dire eXtensible HyperText Markup Language
Avant, les créateurs de sites Internet (qu'on appelle les Webmasters) utilisaient l'ancêtre du XHTML, c'est à dire le HTML tout court.

Il ne serait pas plus simple d'apprendre le HTML avant le XHTML ?

Au contraire, puisque le XHTML est consideré comme le langage le plus approprié pour créer un site Web facilement. De plus, il contient de nombreux ajouts qui nous serons utiles.

A savoir

Un site Web n'est pas composé uniquement de XHTML. Il contient aussi du CSS (Cascading Style Sheet, ou "Feuille de style Cascade". Pourquoi ? Vous le verrez lorsque je ferais un cours sur le CSS )
Le XHTML permet de créer la structure de notre site Internet, d'y insérer du texte, des liens et des images
Le CSS lui, ajoute la couleur, la police d'écriture etc...

Vous l'aurez sans doute compris, un site Web sans CSS est morne et monotone. Mais je préfère ne pas vous embrouiller en vous apprenant ces deux langages en même temps. Nous nous contenterons donc du XHTML pour l'instant.

Fin du premier chapitre.

Vous vous demandez surement depuis le début du cours : Quel est le logiciel qui va nous permettre de créer un site web ?

Ce logiciel vous le connaissez tous, il est fourni avec windows, vous l'avez déja utilisé. Vous voyez de quoi je veux parler ?

Non ?

Eh bien du bloc-notes pardi !

Non, je ne me fiche pas du tout de vous, si vous ne me croyez pas, cliquez sur "Affichage" en haut a gauche de votre écran. (Si vous ne trouvez pas cet onglet, cliquez sur "page" en haut a droite)

Puis sélectionnez "Source" (ou "afficher la source") dans le menu déroulant.
Une multitude de petites instructions apparaissent sur un document bloc-notes !

Comme ceci :




Ne vous préoccupez pas de savoir ce que cela signifie.
Sachez juste qu'il s'agit la du code XHTML de notre forum bien aimé !

Si vous connaissez les logiciels tels que DreamWeaver, Ultra Edit, ou Notepad, laissez les tomber. Vous n'en aurez pas besoin même si il est vrai que cela pourrait vous faciliter la tâche.

En ce qui concerne les navigateurs, je vais faire court : que vous soyez sous Internet Explorer ou Mozilla, cela fera l'affaire.

Personellement je me sert de IE et ca marche très bien. Néanmoins, être sous firefox peut être plus pratique pour mettre son site web en ligne, je vous expliquerait tout en détail plus tard.

Si vous êtes sous linux ou mac, ne vous inquietez pas. Il n'y a pas de bloc-note mais il y a des logiciels similaires : Mac a un logiciel intitulé TextEdit et linux peux avoir "Pico" a sa disposition. (la version 2.5 existe aussi sous mac mais est plus dure a utiliser)


Ce chapitre se termine, il est un peu court alors j'en profite pour vous donner quelques précisions :

XHTML = eXtensible HyperText Markup Langage
la base de votre site (la structure générale)

CSS = Cascading Style Sheet (Feuille de style cascade)
La décoration de votre site (les couleurs, la police d'écriture...)

Désolé pour ceux qui savaient déja tout cela mais c'était un chapitre essentiel pour les nouveaux et les débutants.

Chapitre 3 - Les balises

Les balises sont des "signes" qui vous permettent d'inserer des éléments dans les pages de votre site.

Vous avez déja vu des balises. Sur ce forum, les balises sont les instructions qu'on met entre [] et [/]

Par exemple : [ b ] Bonjour ! [ / b ] donne Bonjour ! quand vous écrivez sur le forum.

Les balises d'un site fonctionnent de la même manière. Sauf qu'au lieu d'utiliser les crochets [] et [/] on utilise les petites flèches <> et </>
Donc sur un site, ca donne ca :

Code:

<b> Bonjour ! </b>

Et sur votre page, il sera marqué Bonjour !

Le coin des p'tits malins : Avez vous déja essayé de mettre les balises du forum entre les petites flèches au lieu de les mettre entre crochets ? Essayez donc, vous verrez ! Oh ! Miracle, ca marche ! Et c'est logique chers amis ! Le forum est codé en HTML !

Evidemment, les balises ne s'affichent que sur votre document bloc-notes, les visiteurs du site ne les voient pas.

Liste de quelques balises utiles

Mettre du texte en gras :

Code:

<b> Ecrivez ici </b>

Mettre du texte en italique :

Code:

<i> Ecrivez ici </i>

Mettre du texte souligné :

Code:

<u> Ecrivez ici </u>

Mettre du texte barré :

Code:

<strike> Ecrivez ici </strike>

Ces balises la sont par deux, elles encadrent une instruction (afficher du texte a l'écran, mettre en gras, souligner, mettre en italique ect...)

Mais il existe des balises qui fonctionnent toute seules. Elles servent principalement a afficher une image ou un retour a la ligne.

Elles s'utilisent comme ceci :




Nous en verrons plusieurs par la suite

Jusqu'ici, nous avons vu les différents type de balises qui existaient. Elle vont nous permettre d'ajouter de la vie a notre site (mettre du texte en gras, en italique, ajouter une image, etc...)

Mais il serait trop facile de taper du texte directement sur le bloc-notes en insérant les balises. Aussi, voici ce que doit contenir un bloc-notes avant que vous ne fassiez quoi que ce soit dessus :

Code:

<html>

  <head>
  <title> </title>
  </head>

  <body>
  </body>

</html>

Copiez coller ce code dans un document bloc-notes.

Décomposons tout ceci Prenez un bon verre de soda (parce que l'alcool c'est mauvais pour la santé ) et ouvrez grand les oreilles.

<html> Les balises <html> et </html> sont les 2 principales : c'est la dedans que tout va se passer, donc quand vous tapez <html> votre bloc-notes comprend que vous allez créer une page web

<head> C'est entre les balises <head> et </head> que vous allez écrire le titre (Entre <title> et </title>) mais la balise "head" sert surtout si vous voulez apporter des modifications CSS a votre site. (ici ce ne sera pas le cas donc on ne touchera qu'a "title")

<Title> C'est la qu'on va taper le titre officiel de notre site.

<body> Body en anglais veut dire corps, donc les balises <body> et </body> délimitent le corps de notre site, vous l'aurez deviné, c'est entre ces balises que nous allons écrire le contenu du site web.

Avant de terminer ce long et important chapitre 3, je vais vous présenter la balise que vous allez le plus utiliser, il s'agit de <p> et </p>

P étant l'abréviation de Paragraphe, c'est entre ces balises que vous allez écrire ce que contiendra votre site web.

Vous pouvez alors la rajouter sur votre document bloc-notes (donc entre les balises <body> et </body> si vous avez bien suivi) ce qui devrait vous donner ceci :

Code:

<html>

  <head>
  <title> </title>
  </head>

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

</html>

/!\ Ne confondez pas "sauter une ligne" et "aller a la ligne". /!\
Pour sauter une ligne, il faut tout simplement faire un nouveau paragraphe en réecrivant <p> et </p> (n'essayez pas d'appuyer sur "Enter" , cela dit vous pouvez utiliser cette touche pour mettre de l'ordre dans votre bazar )

Quand au retour a la ligne, il sera nécessaire d'utiliser la balise seule :



Ce que vous écrirez a la suite de la balise sera mis a la ligne ! Et ainsi de suite...

Je vous laisse bidouiller votre bloc-notes, commencez a écrire une idée de votre site car dans le chapitre 4 je vous apprendrais comment avoir un apercu de ce que vous avez écrit.

Chapitre 4 - Apercu de votre site

Tadaaaaaaaaaaam !

Le moment tant attendu : vous allez pouvoir observer votre premier site web !

Et pour cela, il suffit d'enregistrer votre fichier. Mais attention ! Pas n'importe comment !

Bon, pour l'instant on est pas encore la. Il va falloir la remplir un minimum notre page web ! Donc créez un nouveau document bloc-notes et copiez-collez le code HTML du chapitre 3.

Entre <title> et </title> mettez le titre officiel de votre site. (Si vous ne savez pas quoi mettre, écrivez quelque chose du genre "Mon premier site Web")
Puis inscrivez entre <p> et </p> un message de bienvenue. (Exemple : Bienvenue sur mon site, Bonjour a tous ect...)

Notre page contient du texte, on peut maintenant l'enregistrer.

Voici la démarche a suivre, étape par étape :

-Séléctionnez "fichier" puis cliquez sur "Enregistrer sous"
-Choisissez l'emplacement de votre fichier
-Enregistrer le sous le nom que vous voulez, l'important est de mettre .html a la fin ! (ou .htm) c'est grâce a ce .html que votre ordinateur sait que vous voulez faire une Page web. (Si vous ne savez pas quoi mettre, écrivez Essai.html)

Vous pouvez maintenant avoir un apercu de votre page ! Pour ce faire, retrouvez votre fichier la ou vous l'avez enregistré.

Remarque : Vous devriez voir que l'icône de votre fichier est devenue le logo de votre navigateur. (Exemple : Le E entouré d'un cercle jaune pour Internet Explorer)

Ouvrez donc votre fichier .html

Votre première page web s'affiche devant vos yeux :




Remarque : Si vous regardez en haut de votre page web, vous remarquez que l'url n'est autre que l'emplacement du fichier .html Votre site n'est donc pas
en ligne.

Note : Vous pouvez modifier votre page web a tout moment en faisant : Clic droit sur votre fichier .html puis "ouvrir avec" ---> "bloc-notes"

Fin du 4ème chapitre

Chapitre 5 - Les liens

Les liens sont une partie importante dans la réalisation d'un site Internet, en particulier si vous voulez ajouter plusieurs page Web (Une page pour l'accueil, une page pour les news ect...)

Les liens Internes sont ceux qui relient vos pages pour former votre site.

Les liens Externes sont ceux qui dirigent les visiteurs vers un autre site.

La est la difficultée : on ne procède pas de la même manière pour les liens internes et externes.

On va commencer par le plus simple : les liens Externes.

Un petit screenshot pour la forme



Explications :

< Ouvre la balise
a href= Veut dire "Attention, la on va mettre un lien
"https://san-andreas-gta.forumgaming.fr" L'adresse a laquelle vous voulez que votre visiteur soit dirigé. (N'oubliez pas : l'url d'une image ou d'un site se met toujours entre des guillemets)
> fin de l'instruction
ici ! Le "ici !" sera mis en valeur et on pourra cliquer dessus pour se rendre sur le site en question.
Et ensuite viens la fermeture de la balise.

Remarque : C'est une balise par deux comme vous pouvez le voir.

Donc sur votre site, ca devrait faire quelque chose comme cela :

Vous voulez vous inscrire sur un super forum ? Allez ici !

Donc vous savez maintenant faire un lien Externe...mais ca ne marche pas de la même manière si vous voulez faire un lien Interne. Et la suivez bien parce que ca risque d'être difficile.

Créez un nouveau fichier sur votre bloc-notes. Copiez collez le code XHTML (voir chapitre 3) puis mettez un titre et un message de bienvenue comme vu dans les chapitres précedents.

Enregistrez ce document sous Accueil.html

Refaites la même opération. Changez juste le message d'accueil en quelque chose comme "Sur cette partie du site vous pouvez consulter les news !"
Et enregistrez sous News.html

Assurez vous que vous avez enregistré les deux documents dans le même dossier. (Car il ne faut pas que deux pages Web soient éloignées si vous voulez les relier)

Astuce : Vous pouvez enregistrer vos documents .html directement sur votre bureau. L'inconvénient, c'est que si vous avez beaucoup de pages Web sur votre site, vous risquez de ne plus vous y retrouver !

Vous avez maintenant deux pages Web : Un accueil et une page de News

Notre objectif : Les relier par un lien Interne.

Allez sur votre document "Accueil"

A coté du message de bienvenue (toujours entre les balises <p> et </p>) faites comme ceci :



Notez que j'ai surligné ce que vous deviez rajouter sur votre document.

Allez, quelques détails avant qu'on continue :

<a href="News.html" Voila ce qui nous interesse. Si vous y réfléchissez, tout ca est logique ! Puisque notre site n'est pas en ligne, il suffit de mettre le nom du fichier en guise d'url ! C'est la simplicité même mes chers amis

ici ce mot sera mis en valeur, on sera transporté jusqu'a News.html quand on cliquera dessus.

Et enfin, la fermeture de la balise

Voici 2 screenshots qui montrent le résultat :

Sur accueil.html

Fin du 5 ème chapitre.

Dans ce chapitre, vous allez apprendre a afficher une image a l'écran. C'est plus dur que ca en a l'air, croyez moi !

Allez, copiez-collez d'abord le code que nous avons vu dans le chapitre 3 dans un nouveau document bloc-notes.

Il s'agit de celui-ci :

Code:

<html>

  <head>
  <title> </title>
  </head>

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

</html>

Si vous avez déja enregistré un document bloc-note et que vous souhaitez le garder pour la suite du cours, vous pouvez. Assurez vous juste que ce code XHTML est dedans et qu'il ne manque rien.

Pour insérer une image, on utilise la balise seule :

Code:

<img src="emplacement de votre image" alt="nom de votre image" />

Explications :

Code:

<img src

que l'on peut considérer comme un diminutif de image source. le < ouvre la balise, et le img src sert a indiquer que l'on va afficher une image.

Code:

="emplacement de votre image"

le chemin qu'on va devoir emprunter pour trouver l'image voulue. Si on le combine avec img src, en français ca donne quelque chose comme : La, on va afficher une image qui se trouve dans...
Et on met l'emplacement de l'image...

Code:

alt="nom de votre image" />

cette balise est obligatoire pour que votre site soit conforme ! Donc entre les guillemets, mettez par exemple "ordinateur" si vous avez choisi une image d'ordinateur...simple mais obligatoire.

Note : Veillez a enregistrer les images que vous utiliserez sur votre site dans le même fichier (si vous en avez un) où vous enregistrez vos pages web. Cela réduit les risques que vous soyez confrontés a l'horrible petite croix rouge....Evitez également les majuscules, les espaces et les accents dans img src="emplacement de votre image" remplacez les espaces par un underscore (c'est le tiret du 8...) donc si votre image se trouve dans Mes documents, mettez "mes_documents" dans le chemin a prendre.

Raah ! Ca m'énerve ! Je n'arrive pas a insérer une image ! il me met l'agacante croix rouge quand j'affiche ma page web !

Oui, remarquez moi aussi ca m'arrive défois, on ne peut pas toujours réussir.

Mais dans ces moments la, pas de panique ! Il y a imageshack !

Et oui, cet hébergeur n'est pas reservé au forums !
Quand vous uploadez votre image, le nouvel écran d'imageshack apparait en vous proposant toutes sortes de lien. Et vers le bas, il y a une option qui s'apelle "Hotlink for Websites"

C'est le code que cet emplacement vous offre qu'il vous faut mettre dans votre page web.

Note : Vous devez copiez-coller a partir de <img src="... et vous arrêter juste avant la balise :

Code:

</a>

Parce que si vous copiez tout le code, quand le visiteur cliquera sur votre image, il sera dirigé vers le site web d'imageshack.

Cet hébergeur s'occupe de tout, vous n'avez pas besoin de vous occuper du alt. (C'est pas maaaagnifique ca ?)

Imageshack c'est bien, mais il n'est pas toujours fiable. Donc il faut parfois faire l'effort d'afficher l'image soit même avec la bonne vieille balise.

Mais...on peut faire transporter un visiteur sur une autre partie de notre site ou sur une autre page web en le faisant simplement cliquer sur une image ???

Et comment croyez vous que ce forum fonctionne ?

Pour faire cette manipulation, réferez vous au chapitre 5 sur les liens. Et le code a entrer est :

Code:

<a href="url du site ou de la partie de votre site où vous voulez que le visiteur aille"> <img src="emplacement de votre image" alt="nom de votre image" /> </a>

Comme vous le voyez, on encercle tout simplement la balise des images avec la balises des liens.

Et sur imageshack ?

Si vous êtes paresseux, copiez collez le code "Hotlink for Websites" de imageshack en entier cette fois.

Il vous suffit ensuite de remplacer l'URL que propose imageshack par celui que vous voulez.

Fin du 6ème chapitre. Postez vos questions ou commentaires ici : https://san-andreas-gta.forumgaming.fr/Informatique-c3/Informatique-c9/Discussion-informatique-f9/Questions-commentaires-sur-le-cours-HTML-t6128.htm

Cours en construction

Cours en construction

Cours en construction

Cours en construction

Cours en construction

Cours en construction

Cours en construction