Structure générale d’un document xhtml et votre première page web
BIENVENUE SUR LE SITE DE LA TECHNOLOGIE.
Accueil                                  Livre d'or                                  Nous contacter                                             forum

Ce site est destiné à tous les technologues, les étudiants scientifiques, les élèves scientifique et toute personne qui s'interesse de la nouvelle technologie.

  Tous ce que j'ai essayé de faire, c’est de vous donner les cours nécessaires dans le domaine de la technologie : électronique, informatiques et télécommunication .

   Tous mes cours sont gratuits alors il faut bien accepter et profiter cette offre si délicieuse.

Vous avez une question ? Posez la une question

Les réponses sont généralement disponibles en quelques minutes

les cours
électronique
analogique
numerique
de puissance

realisation des circuits électronique

informatique
programmation
microprocesseur
réseaux


télécommunications
téléinformatique
réseaux telecoms

système de télécommunication
^

Structure générale d’un document xhtml et votre première page web

1)Structure générale d’un document xhtml

  
2) Votre première page web.

  1)Structure générale d’un document xhtml  

    Dans le cours précédent, on avait juste écrit un texte sur bloc-notes et on l’avait juste enregistré en le donnant un extension *.xhtml, *.html, *.htm. Je sais bien que lorsque vous aviez fait ça, vous aviez sauté avec un éclat de joie en disant : wehhh !!!  J’ai crée un fichier web.   Eh bien je ne peux pas refuser que ce ne fût pas un fichier xhtml mais en réalité, à part l’extension que vous aviez donnée, ce fichier ne possédait aucun critère (norme) qui nous permet de l’identifier étant comme fichier xhtml.


Ah ! Les fichiers xhtml demandent des normes ?

 Eh bien oui ! Vous croyez que vous allez continuer à saisir des textes comme ça et avoir des fichiers xhtml ? Ahahahahah !  Ça aurait dû être plus que facile.

  Eh bien voici la structure d’un fichier xhtml, des normes à respecter.

 Code xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta content="text/html; charset=ISO-8859-1"

 http-equiv="content-type" />

  <title></title>

</head>

<body>

</body>

</html>

Héhéhéhéhh!  Il ne faut pas oublier, cette structure  doit être dans tous fichiers  xhtml. Donc vous devez l’avoir en tête.

En tête ?

   Oui ! Ne soyez pas paresseux, si non je vais vous chasser dans mes cours. Ce ne que le début, si vous voyez ça difficile et que vous ne voulez pas la retenir, vous n’aurez aucune chance  de créer une page web.   (Ah ! je rigole. Je vais vous donner une forme simplifié, peut être ça aidera ce qui ne veulent pas voir ce charabia.

Gayni yapvo hawu ?
Voici la structure simplifiée  

 Code xhtml:

<html>

<head>

  <title></title>

</head>

<body>

</body>

</html>


Ne me dites  pas maintenant que ceci est difficile à retenir car même les enfants de 5 ans sont capables non seulement de la retenir mais aussi de l’appliquer.

 

2)Votre première page web.

   Je sais que maintenant vous n’êtes pas ignorant, bien entendu vous savez très bien qu’il ne s’agit pas d’écrire un texte sur bloc-notes et l’enregistrer en le donnant un extension xhtml qu’on obtient un fichier xhtml. Même si ce fichier a une apparence d’un fichier xhtml et s’ouvre avec les navigateurs web ;  mais ce n’est pas ceux là qui le permettent  d’être un fichier xhtml.

  Apres avoir appris la structure générale d’un document xhtml, ici nous allons utiliser cette structure pour créer notre première page web (ah ! c’est pas seulement notre première page web, mais tous nos pages xhtml, nous utiliserons cette structure). A vous de la retenir car les cours qui suivent, je ne vais pas rester là en vous disant qu’il nous faut cette structure. Je vais juste expliquer ce qui sont nécessaires (cela ne dit pas que cette structure n’est pas nécessaire).

Je vais vous expliquer ces balises 1 par 1 pour que vous puissiez mieux comprendre.

  • Premièrement nous avons  la balise  <html>  </html> : c’est cette balise qui montre que ce que  nous allons saisir est du xhtml ou html.
  • Deuxièmement nous avons la balise <head> </head>. head signifie entête. C’est juste l’entête de la page.  À l’intérieur de la balise head, nous avons la balise <title> <title>. title signifie titre. Ce que nous allons saisir à l’intérieur de cette balise est juste le titre de notre page.
  • Dernièrement, nous avons la balise <body> </body>. Body signifie corps. Tous ce que nous allons saisir à l’intérieur de cette balise constituent le corps de notre page web.

 Eh ! Réveillez vous, nous allons faire un petit exemple.

 Code Xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta content="text/html; charset=ISO-8859-1"

 http-equiv="content-type" />

  <title>ma premiere page web </title>

</head>

<body>

Bienvenue sur mon super site!

Ce site est à moi et je suis sure que vous allez l’adorer

</body>

</html>

 

     Eh bien!  Vous avez déjà réalisé votre première page web. Mais je sais une chose. Vous vous demandiez pourquoi « Bienvenue sur mon super site! Ce site est à moi et je suis sure que vous allez l’adorer » est sur la même ligne et pourtant on ne l’a pas écrit sur la même ligne ?

Eh bien, pour résoudre ce problème, à chaque fois qu’on veut aller à ligne, on va utiliser la balise p : <p> </p>.

 

  • On met une des ces phrases a l’intérieur de la balise p:La balise p montre que le contenu de cette balise s’agit d’un paragraphe.
Exemple :
Code Xhtml:
Bienvenue sur mon super site!
<p>Ce site est à moi et je suis sure que vous allez l'adorer. </p>

Ouh! Si vous remarquez, à chaque fois qu'on a utilisé la balise <p></p>, on saute une ligne et le texte est ecrit à la 3ème ligne.
Eh bien, si vous voulez aller directement à la ligne sans sauter  une ligne, ajouter à la fin du texte ceci <br/>

Exemple :
Code Xhtml:
Bienvenue sur mon super site!<br/>
Ce site est à moi et je suis sure que vous allez l'adorer.

le <br/> indique au navigateur  que le texte qui suit doit  être écrit à la ligne. 

Voila enfin  un petit secret :
Sans se prendre la tête, la phrase  « bienvenue sur mon super  site »  devait être plus grand que les autres phrases. Ce pour cela que je vous recommande de la mettre à l’interieur de la balise h.
Ehéééé ! Ce n’est pas cette balise : <h> </h> si non ça ne sert à rien.
 
Eh quoi alors ?

Disons la balise hx. x étant un nombre entier allant 1 à 6.

Exemple: 

 Code Xhtml:

<h1> bienvenue sur mon super site</h1>

Maintenant, vous pouvez changer la balise, h1 par h2, par h3, par h4, par h5 par h6 et voir ce qui va se passer.

 Voila enfin ce que deviendra notre première page web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta content="text/html; charset=ISO-8859-1"

 http-equiv="content-type" />

  <title>ma premiere page web </title>

</head>

<body>

<h1>Bienvenue sur mon super site!</h1>

 

<p>Ce site est à moi et je suis sure que vous allez l'adorer.</p>

<br />

</body>

</html>

Demo de notre page web:

 

Rappel : si vous voulez, vous pouvez utiliser la structure simplifiée. Aucun problème avec ça.

NAMLALA WUNUNU et rendez sur le cours suivant.