Ma première page - Cours XHTML

Introduction

Intro

Une page XHTML se compose de quatre balises indispensables :

- La balise <HTML></HTML> qui contient toutes les autres balises. Dans tous les cas, votre document source doit commencer par <HTML> (hors DTD) et se finit par </HTML>.
La norme XHTML veut que la balise HTML comporte trois attributs obligatoires :
- xmlns="http://www.w3.org/1999/xhtml" dont la valeur ne change pas
- xml:lang="fr" et lang="fr" dont la valeur change suivant la langue.


- La balise <HEAD></HEAD> qui définit l'en-tête du document. On y place des informations qui ne sont pas visibles.
Par exemple, des scripts, des feuilles de styles, des informations sur l'auteur de la page, et sur la page en elle même (métas informations).

- La balise <TITLE></TITLE> qui se trouve dans la balise <HEAD> donne un titre à la page, c'est le seul élément visible qui se trouve dans l'en-tête.

- La balise <BODY></BODY> contient toutes les informations qui seront visibles, c'est le corps de votre document.

Voici comment elles sont organisées dans le code de la page Html :
Exemple de code :
<html xmlns="http://www.w3.org/1999/xhtmlxml:lang="fr" lang="fr">
  <head>
    <title>
    </title>
  </head>
  <body>
  </body>
</html>

- Au dessus de ce code vient la DTD qui va spécifiée le langage que vous utilisez. Nous utiliserons que la DTD XHTML 1.0 Strict sur laquelle je me base pour mes cours.
Exemple de 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/xhtmlxml:lang="fr" lang="fr">
  <head>
    <title>
    </title>
  </head>
  <body>
  </body>
</html>

Petit rappel

Info

Le XHTML s'étant rapproché du XML, il devient sensible à la casse, c'est à dire que vous ne pouvez plus écrire :<p></P>, mais vous devez écrire : <p></p>.
Il faut maintenant tout écrire en minuscule (balise et attribut)
Cependant, si par hasard vous faites une faute, cela ne devrait pas gêner l'affichage de votre page.
Il se peut que dans mes cours, le nom des balises soit en majuscule, par oublie ou pour les mettre en avant.

Chaque caractère spécial doit être encodé. Par exemple é doit s'écrire é
Voir le tableau des caractères

Donner un titre à votre page HTML.

Exercice

Pour donner un titre à votre page HTML, rien de plus simple.

Première étape :
Ouvrez le générateur de code XHTML (Voir menu à droite de la page).
Cliquez sur "Afficher le générateur de pages XHTML".
Observez la partie où se trouve ces trois petits boutons
vous ne verrez que le nom du Navigateur.

Seconde étape :
Maintenant, mettez du texte (ce que vous voulez) entre <TITLE> et </TITLE>.
Cliquez sur le bouton "VOIR" du générateur.
Votre page a maintenant un titre.

Insérer du texte dans votre page HTML

Info

Nous allons à présent voir comment introduire du texte dans notre page HTML et observer comment il réagit.
Voici du texte.
Faites un copier-coller du texte ci-joint entre <BODY> et </BODY>.

Cliquez sur le bouton "VOIR" du générateur.
Vous venez de faire votre première page XHTML.
Cependant, la norme XHTML 1 veut que le texte contenu dans la balise BODY soit contenu dans une balise de type block ou inline (p, div, span, table, a, ...).Mais par exemple les balises B, I n'en font pas parties.
Je commence à intégrer cette notion dans le glossaire.

Réduisez et augmentez la fenêtre, et observer le texte.
Le texte se reformate suivant la taille de la fenêtre, c'est un élément à retenir lors de la conception de votre page.
Pour ne plus avoir ce problème, il faut insérer votre texte dans un tableau ou spécifier une taille à votre balise via les css:
Exemple de code :
<div style="width:400px">Le texte</div>
ou
<table width="140">
<tr>
<td>Le texte</td>
</tr>
</table>

Les paragraphes

Nous allons maintenant structurer le texte en créant des paragraphes.
Voici du texte.
Le paragraphe se détermine grâce à la balise <P> </P>.

Mettez après la balise <BODY> la balise <p>, copiez/collez le texte ci-joint et mettez à la fin du texte </p>.

Recommencez la manoeuvre à la suite.
Cliquez sur le bouton "VOIR" du générateur.
Vous avez maintenant deux paragraphes.

La balise <P> génère un saut de ligne qui peut varier suivant le navigateur, c'est son inconvénient.
Il est tout à fait possible de justifier le texte d'un paragraphe grâce à la feuille de style text-align ( pour plus d'information voir le glossaire ).
Exemple de code :
<p style="text-align:right">Le text</p>

Allez à la ligne

Pour éviter les sauts de ligne, la balise <BR /> qui ne possède pas de balise de fin, est très utilisée.

Effacez le texte.
Copier-coller le texte et mettez à la fin <br /> et coller le texte une seconde fois.
Cliquez sur le bouton VOIR du générateur.

Vous pouvez très bien insérer entre <P> et </P> une balise <BR />.

Créer un titre de chapitre

Info

Maintenant que vous savez créer des paragraphes, il nous reste à leur donner un titre.
C'est la balise <Hn> </Hn> qui le permet. Le "n" est un chiffre comprit entre 1 et 6 qui détermine la taille du titre. 1 est la plus grosse taille.

Exercice

Première étape :
Ouvrez le générateur de code HTML (Voir menu à droite de la page).
Seconde étape :
Tapez :
Exemple de code :
<H1> votre titre </H1>
Copiez, collez du texte à la suite.Voici du texte.
Puis à la suite recommencez la manipulation en remplaçant <H1> par <H6>.

Vous observez que <Hn> génère un saut de ligne important. Vous pouvez diminuer cet espace grâce au feuille de style :
- margin, padding.

Créer un filet horizontal

Filet horizontal

Je parle dans ce chapitre du filet horizontal (<HR/>), car il est très pratique pour séparer de chapitre, cela donne plus de clarté au document HTML.
Il est très utilisé aussi pour marquer la fin du document. Dans ce cas, on trouve en général des informations sur le copyright.

Exercice

Première étape :
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Seconde étape :
Copiez, collez du texte et taper <hr />. Voici du texte.

Info

Sachez que l'on peut définir la longueur, l'alignement de la balise <HR>.
Pour plus d'information sur les attributs de la balise <HR /> consultez le Glossaire HTML.

Révision des balises <P>, <BR>, <Hn> et <HR>.

Info

Voici un petit exercice qui consiste à recréer une page HTML.
Pour cet exercice, il faut avoir été consulté le glossaire.
La page à recréer.

Définir une couleur de fond.

Info

Une page XHTML n'est pas forcément blanche. Vous pouvez lui donner toutes les couleurs que vous désirez.
Pour cela, il faut introduire la feuille de style background-color dans la balise <BODY>.
Ce qui nous donne pour une couleur de fond noir <BODY style="background-color:Black"> ou <BODY style="background-color:#000000">.

Je mets à votre disposition les couleurs reconnues par Netscape et Explorer (couleur).
Lisez bien la page des couleurs et testez ensuite.

Il est possible de mettre une image en fond, mais nous l'étudierons dans le cours de XHTML "Image".

Définir une couleur de texte.

Info

Vous pouvez lui donner toutes les couleurs que vous désirez.
Pour cela, il faut introduire la feuille de style COLOR dans la balise <BODY>.
Ce qui nous donne pour une couleur de texte blanc <BODY style="color:#FFFFFF"> ou <BODY style="color:White">.
La balise A n'hérite pas de la couleur.

Je mets à votre disposition les couleurs dites web qui sont des couleurs reconnues par Netscape et Explorer (couleur).

Lisez bien la page des couleurs et testez ensuite.

Exercice

Ce petit exercice va vous familiariser avec les feuilles de style.

Je désire un fond bleu et une couleur de texte rouge. Nous allons donc écrire :
- pour le font bleu <BODY style="background-color:#0000FF">
- pour le texte rouge nous allons rajouter la feuille de style COLOR. Ce qui nous donne <BODY style="background-color:#0000FF;color#FF0000">.
Chaque propriétés de feuilles de style sont séparées par un ";"

Ouvrez le générateur et écrivez ce qui vous passe par la tête et visualisez.
La balise HTML et XHTML HEAD contient l'entête du document html, c'est à dire toutes les informations non visibles par l'internaute. C'est une balise ...[Voir]La balise HTML et XHTML TITLE donne un titre à votre document. Il n'a rien à voir avec le nom d'enregistrement du document HTML et XHTML . <TITLE> </T...[Voir]La balise HTML et XHTML P crée un paragraphe. Après chaque balise de fin </P>, il se génère un saut de ligne.<P> </P> Le saut de ligne correspond à ...[Voir]La balise HTML et XHTML BR permet de faire une rupture de ligne(force à aller à la ligne).<BR> La balise HTML BR est une balise simple, c'est à dire q...[Voir]La balise HTML et XHTML H, met le texte en type titre. Il existe six niveaux de titres. <H1> </H1>n peut prendre la valeur de : 1, 2, 3, 4, 5, 6. <H1>...[Voir]La balise HTML et XHTML HR permet de faire une ligne horizontale.<HR> La balise HTML et XHTML HR est une balise simple, c'est à dire qu'elle n'a pas d...[Voir]La propriété de feuille de style css BACKGROUND-COLOR permet de spécifier la couleur de l'arrière plan (couleur de fond) d'un élément HTML ou XTHML.ba...[Voir]La propriété de feuille de style css TEXT-ALIGN permet de spécifier l'alignement horizontal du texte.text-align : left; TEXT-ALIGN : center; text-alig...[Voir]La propriété de feuille de style css MARGIN css permet de gérer les quatres marges extérieures (droite, gauche, haute, basse) d'un élément HTML ou XHT...[Voir]La propriété css PADDING permet de spécifier la marge qui sépare un élément de chacune de ses bordures (marges intérieures)..identifiant{ PADDING : 5...[Voir]