vendredi , 22 juin 2018
Accueil » Informatique » Apprendre HTML 5
Apprendre HTML 5

Apprendre HTML 5

Introduction au Xhtml

Il n’y aura pas de HTML 5. C’est ce qu’a confirmé le W3C (World Wide Web Consortium), l’organisme qui édite les recommandations des langages du Web : le HTML est mort en tant que tel. Certes, pendant des années, il a permis à tous de « bricoler » des pages web plus ou moins bien ficelées, mais il était devenu trop permissif, et surtout se caractérisait par un manque de rigueur assez flagrant.

La rivalité entre Netscape et Microsoft a entraîné la création de balises propriétaires utilisables uniquement dans l’un des navigateurs, chacun s’ingéniant à créer le gadget qui lui attirerait le plus d’utilisateurs.

Xhtml est l´évolution du langage Html.

XHTML (eXtensible HyperText Markup Language) est un langage de balisage (dit aussi langage de marquage) qui permet de structurer le contenu des pages web dans différents éléments.

Html est le langage de base du Web. Il permet l´affichage et la mise en page d´informations et de données.

Votre navigateur (Mozilla Firefox, Internet Explorer, Opera …) est capable de lire le code html du site consulté et de construire la page Web demandée.

Html est un langage simple, utilisant des balises et pouvant s´apprendre en quelques heures.

Xhml est le remplacant du Html. Il est beaucoup moins permissif que le Html et il est un gage de qualité.

Toutes les balises ouvertes doivent être fermées, correctement imbriquées et en minuscules.

Exemple de balises :

Pour afficher le texte :

Un texte en gras centré

Il faut taper le code :

<center>Un texte en <b>gras</b> centré</center>

Un document type Xhtml

Les pages Web sont globalement constituées de la même façon. Nous allons fabriquer notre première page Web.

  1. Créer un fichier texte.
  2. Changer l´extension .txt en .htm ou .html.
  3. Ouvrir le fichier avec un éditeur de texte (Bloc note, Vi, WordPad…).
  4. Copier coller le code suivant, puis enregistrer et ouvrir le fichier avec un navigateur.
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//FR » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr » lang= »fr »>
<head>
<title>Titre de votre Page</title>
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />
</head>
<body>
Le texte entre les balises body est visible.
</body>
</html>

 

 

Les 5 règles de syntaxe XHTML

  • Toute balise ouvrante doit obligatoirement être fermée.

Juste : <span>xhtml</span>
Faux : <span>xhtml<span>

  • Les balises et les attributs doivent être écrits en minuscule.

Juste : <a href= »http://xhtml.le-developpeur-web.com » title= »xhtml »>XHTML</a>
Faux : <A href= »http://xhtml.le-developpeur-web.com » TITLE= »xhtml »>XHTML</a>

  • Les valeurs des attributs doivent être entre guillemet ou apostrophe.

Juste : <span id= »monSpan » class=’spanXhtml’>xhtml</span>
Faux : <span id=monSpan class=spanXhtml>xhtml</span>

  • Chaque attribut doit avoir une valeur.

Juste : <input type= »checkbox » cheched= »checked » />
Faux : <input type= »checkbox » checked />

  • Chaque élément doit être imbriqué correctement.

Juste : <p>j’aime le <strong>xhtml</strong></p>
Faux : <p>j’aime le <strong>xhtml</p></strong>

La différence entre  HTML et XHTML

XHTML HTML
<p>Bonjour</p>

<img src=xxx.gif alt= »image »>

<P>Bonjour</P>

<IMG SRC=xxx.gif ALT= »image »>

 

Pas bien compliqué mais peut-être un peu déroutant pour ceux qui avaient pris l’habitude de mettre
les balises en majuscules pour la lisibilité du code source.

  • A toute balise d’ouverture doit correspondre une balise de fermeture. Fini les balises <p> et <li> orphelines…
XHTML HTML
<p>Bonjour</p>

<ul>

<li>1</li>

<li>2</li>

</ul>

<p>Bonjour

<ul>

<li>1

<li>2

</ul>

 

  • Les balises uniques doivent également comporter un slach / de fin.

 

XHTML HTML
<br />

<img src=xxx.gif alt= »image » />

<br>

<img src=xxx.gif alt= »image »>

 

L’utilisation d’une seconde balise n’est pas en théorie erronée soit par exemple <br></br> mais les
navigateurs des anciennes génération pourraient ne pas l’interpréter correctement, c’est pourquoi
<br /> [avec un espace avant le /] est conseillé. Il en est de même pour les balises meta :
<meta name= »http-equiv » content= »pragma:no-cache » />..

  • Les balises doivent être correctement imbriquées.

 

XHTML HTML
<b><i>gras et italique</i></b> <b><i>gras et italique</b></i>

 

  • La valeur des attributs doit toujours être codées entre des guillemets (et ce même pour des valeurs numériques).

 

XHTML HTML
<table width= »100% »> <table width=100%>

 

  • On évitera aussi les notations compactes ou raccourcies dans les attributs.

 

XHTML HTML
<input checked= »checked »>

<option selected= »selected »>

<frame noresize= »noresize »>

<input checked>

<option selected>

<frame noresize>

 

Pour les amateurs, la liste complète se trouve en Annexe 1.

 

  • Les balises images doivent comporter l’attribut alt pour le texte alternatif.

 

XHTML HTML
<img src= »xxx.gif » alt= »image » /> <img src= »xxx.gif »>

 

  • On utilisera l’attribut id (déjà souvent utilisé en Dhtml) plutôt que l’attribut name pour identifier un élément comme a, applet, frame, iframe, img, and map.

 

XHTML HTML
<img src= »picture.gif » id= »img1″ /> <img src= »picture.gif » name= »img1″>

 

On notera que pour garder une compatibilité avec les navigateurs des générations précédentes, il est
conseillé de garder à la fois name et id avec les mêmes attributs  comme ceci :
<img src= »picture.gif » id= »image1″ name= »image1″ />.

 

  • Précautions pour les scripts et feuilles de style.

    Le problème provient du fait que le langage de script contient des caractères qui n’ont pas la même signification en XHTML. Ainsi le signe < signifie plus petit que en Javascript et est le caractère d’ouverture d’une balise en Html. De même & est un opérateur booléen en Javascript et le début d’un caractère spécial en XHTML.

    La solution consiste à « encapsuler » les éléments de script ou de style dans une section marquée CDATA, afin d’éviter tout problème d’interprétation de ces éléments par le processeur XML.

    <script language= »JavaScript type= »text/javascript »>
    <![CDATA[
    write(« <b>Bonjour le monde !</b> »);
    ]]>
    </script>

    On conseille vivement dans la littérature d’utiliser les éléments de scripts ou de style dans un fichier externe car <![CDATA[ … ]]> n’est pas encore reconnu par des navigateurs comme Internet Explorer ou Netscape. Soit,

    <script language= »Javascript » type= »text/javascript » src= »script.js »></script>

    où script.js contiendrait :
    document.write(« <b>Bonjour le monde !</b> »);

    Pour terminer, il faut souligner que si votre script ne contient aucun de ces caractères prêtant à confusion comme < >, [, ], or & votre script sera valable. Mais dès que vous ajouterez un de ces caractères votre code XHTML ne sera alors plus valide.

 

  • Le XHTML use et abuse [?…] de l’attribut « lang ». On définira la langue utilisée par le document dans la balise de début de document XHTML. Ce qui n’empêchera pas de mettre en exergue les bouts de document qui utilisent une autre langue que celle définie au départ par l’attribut xml:lang de la façon suivante <div lang= »en » xml:lang= »en »>To be or not to be</div>.

 

 

A propos de admin

Répondre

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués d'une étoile *

*