Post on 21-May-2015
INTRODUCTION AU XHTML
Site Web
• Un Site Web est composé d'un ensemble de documents structurés, nommés pages web, stockés (hébergés) sur un ordinateur (serveur) connecté au réseau mondial (internet).
• Une page web contient essentiellement du texte, et est souvent enrichie d'images, de sons, de vidéos et de liens vers d'autres pages web.
Navigateur
Un navigateur web est un logiciel informatique qui permet de consulter des documents sur Internet
Les navigateurs web les plus connues sont:– Internet explorer– Mozilla Firefox– Google Chrome.
World Wide Web Consortium
• Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation à but non-lucratif, chargé de promouvoir la compatibilité des technologies du WEB telles que HTML,XHTML, XML, CSS
• C'est un organisme qui n'émet que des recommandations : les concepteurs de navigateurs restent libres de s'y conformer.
World Wide Web Consortium
• Ces normes ne garantissent pas aujourd’hui un rendu identique sur chaque navigateur.
• Ainsi il peut apparaître des incohérences dans une page sous Internet Explorer et non sous Firefox, ou inversement.
• C’est le rôle du programmeur Web de garantir une interface homogène et fonctionnelle quel que soit le navigateur utilisé.
HTML
• Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pages web pouvant être lues dans des navigateurs.
• C'est un langage de description de données.
HTML et CSS
• le W3C préconise de maintenir une séparation entre la structure et la présentation d’un document.
• Il adjoint au HTML la notion de feuille de style à travers le langage CSS (Cascading Style Sheet).
HTML et CSS
• HTML décrit la structure du document, CSS se charge de la présentation.
• Ainsi, un même document HTML peut être présenté de différentes façons à l'aide de différentes feuilles de style.
XHTML
• XHTML est une reformulation syntaxique du HTML plus stricte, qui interdit tout élément de présentation dans le corps du document.
Concepts généraux d’XHTML
• XHTML est un langage non permissif qui suit un ensemble de règles.
• Un fichier écrit en langage XHTML est fichier texte, dont le contenu est structuré à l'aide de repères que l'on appelle des éléments.
• Chaque élément est constitué de balises et d'attributs qui permettent d'apporter des informations sur son contenu.
Balise
• Une balise (Markup en anglais) est une « commande » qui permet un certain rendu lors de son interprétation.
• Une balise est délimitée par un « < » et un « > » respectivement pour ouvrir et fermer la balise.
Balise
• On distingue trois types de balises :
- les balises ouvrantes : <mabalise> ;
- les balises fermantes : </mabalise> ;
- les balises auto-fermantes : <mabalise />.
Balise
• Chaque balise possède un nom (ici « mabalise ») et peut posséder des attributs ou options. Chaque attribut doit posséder une valeur délimitée par des " " (double quotes) ou des ‘ ‘ (simple quotes),
• Les balises fermantes ne possèdent jamais d’attribut.
Balise
• Exemple <mabalise attribut1="attribut1" attribut2="attribut2" > <mabalise />.
Imbrication des balises
• Ce principe de formalisme interdit tout chevauchement de balises.
Imbrication des balises
• Exemple (valide) :
• ...
• <p>
• <font color="red">
• Mon texte en rouge
• </font>
• </p>
Imbrication des balises
• Exemple (non valide) :
• ...
• <p>
• <font color="red">
• Mon texte en
• </p>
• rouge
• </font>
Grammaire du XHTML
• EN XHTML :
- Les noms de balises et attributs sont obligatoirement en minuscule.
Exemple (valide) :
< mabalise >
Exemple (non valide) :
<MABALISE>
Grammaire du XHTML
• EN XHTML :
- Chaque attribut possède nécessairement une valeur introduite par des ‘ ‘ou des " ".
Exemple (valide) :
< mabalise attribut1="1" >
Exemple (non valide) :
< mabalise attribut1=1 >
Grammaire du XHTML
• EN XHTML :
- Tout attribut doit forcement recevoir une valeur.
Exemple (valide) :
< mabalise attribut1="1" >
Exemple (non valide) :
< mabalise attribut1>
Grammaire du XHTML
• EN XHTML :
- Toute balise ouverte doit être fermée.
Exemple (valide) :
< mabalise > texte < /mabalise >
Exemple (non valide) :
< mabalise > texte
Grammaire du XHTML
• EN XHTML :
- Les balises vides doivent être explicites.
Exemple 1 (valide) :
< mabalise />
Exemple 1 (non valide) :
< mabalise >
Grammaire du XHTML
• EN XHTML :
- Les balises doivent respecter la règle d’imbrication.
Exemple (valide) :
< mabalise > < mabalise2 > texte < /mabalise2 > < /mabalise >
Exemple (non valide) :
< mabalise > < mabalise2 > texte < /mabalise > < /mabalise2 >
Grammaire du XHTML
• EN XHTML :
- Tout document se conformant à ces règles est dit syntaxiquement bien formé.
XHTML: structure d’une page
• La structure d’un document XHTML est soumise à des règles inflexibles.
XHTML: structure d’une page
• La déclaration XML:
<?xml version="1.0" encoding="iso-8859-1"?>
• L’encodage correspond au jeu de caractères utilisés par la page ainsi que son format.
XHTML: structure d’une page
• Le doctype permet de définir le langage utilisé par la page ainsi que le jeu de règles voulu.
Il existe plusieurs doctype:
XHTML: structure d’une page
• Le XHTML 1.0 Strict qui se résume aux seules options de modélisation de données de façon stricte. Pas d’attribut de mise en forme.
• Déclaration du doctype XHTML 1.0 strict :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd">
XHTML: structure d’une page
• Le XHTML 1.0 Transitional qui se trouve être un compromis entre le XHTML et l’HTML. Les attributs de mise en forme sont acceptés.
• Déclaration du doctype XHTML 1.0 transitional :• <!DOCTYPE html• PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"• "http://www.w3.org/TR/XHTML1/DTD/XHTML1-
transitional.dtd">
XHTML: Le Document
Un document XHTML se délimite par les balises <html> et </html>.
Exemple :
… <html>
…
</html>
XHTML: Les en-têtes (headers)
• Les en-têtes sont délimitées par les balises <head> et </head>: elles ne sont pas directement destinées à l’affichage.
XHTML: Les en-têtes (headers)-title
• Le contenu de l'élément title est le titre du document : il est affiché dans la barre de titre du navigateur.
Exemple :
…
<head>
<title>Bientôt notre première page</title>
</head>
...
XHTML: Les en-têtes (headers)-meta
• L'élément meta permet de donner des informations supplémentaires sur le document.
XHTML: Les en-têtes (headers)-meta
Exemple :
<head>
...
<meta name="author" content=« Momar Diop"><meta name="keywords" content="HTML, initiation"><meta name="description" content="Cette page fournit une introduction au langage HTML">
...
</head>
XHTML: Les en-têtes (headers)-script
• Cet élément permet d'introduire un script (un petit programme qui s’exécute dans la page).
Exemple :
<head>
<script language="javascript1.2">
…
</script>
</head>
XHTML: Les en-têtes (headers)-link
• Cette balise permet de spécifier les URLs (chemins) des fichiers liés au document .
Exemple :
<head>
…
<link rel="stylesheet" type="text/css" href="cours.css">
…
</head>
XHTML: Le corps - body
• Les balises <body> et </body> délimitent le corps de la page.
Exemple :
…
<body>
…
</body>
…
XHTML: Le corps – Commentaires
• Il est souvent utile de commenter son code source afin d’en faciliter la relecture.
• Les commentaires ne sont pas interprétés par le navigateur, ils sont invisibles à l’écran. Exemple :
<body>
<!--
• Tout ce qui est ici ne sera pas interprété par le navigateur (invisible à l’écran) !
• -->
</body>
XHTML• Exemple :
• <?xml version="1.0" encoding="iso-8859-1"?>
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd">
• <html>
• <head>
• <title>Notre première page</title>
• </head>
• <body>
• <h1> Titre de niveau 1</ h1>
• <h2> Titre de niveau 2</ h2>
• <p> Voici un premier < br /> paragraphe.</ p>
• <p> Voici un deuxième paragraphe.</ p>
• </body>
• </html>
Organiser Son Texte – Titre
• Il existe six niveaux de titres, par ordre d'importance décroissante h1 à h6.
• <h1> </h1> : En général, on s'en sert pour afficher le titre de la page.
• <h2> </h2> : utilisé souvent pour donner un titre aux paragraphes.
• <h3> </h3> : utilisé souvent pour donner un "sous-titre" aux paragraphes.
• <h4> </h4> : peu utilisé.
• <h5> </h5> : peu utilisé.
• <h6> </h6> : peu utilisé.
Organiser Son Texte – Titre• Exemple :
• <?xml version="1.0" encoding="iso-8859-1"?>
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd">
• <html>
• <head>
• <title>Notre première page</title>
• </head>
• <body>
• <h1> Titre de niveau 1</ h1>
• <h2> Titre de niveau 2</ h2>
• <h3> Titre de niveau 3</ h3>
• <h4> Titre de niveau 4</ h4>
• <h5> Titre de niveau 5</ h5>
• <h6> Titre de niveau 6</ h6>
• </body>
• </html>
Organiser Son Texte – Paragraphe
• En XHTML, il est possible de segmenter son texte en paragraphes.
• Chaque paragraphe se trouve entre les balises <p> et </p>.
• L'élément <br /> permet d'insérer un saut de ligne à l'intérieur d'un paragraphe. Avant de l'utiliser, il faut se demander s'il n'y a pas lieu de scinder ce dernier en deux éléments p distincts.
Organiser Son Texte – Paragraphe• Exemple :
• <?xml version="1.0" encoding="iso-8859-1"?>
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd">
• <html>
• <head>
• <title>Notre première page</title>
• </head>
• <body>
• <h1> Titre de la page</ h1>
• <h2> Titre du paragraphe 1</ h2>
• <p>
Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1
</p>
Organiser Son Texte – Paragraphe• Exemple (suite) :
• <h2> Titre du paragraphe 1</ h2>
• <p>
saut de ligne dans le paragraphe <br/> Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1
</p>
• </body>
• </html>
Organiser Son Texte – caractères spéciaux
• Pour assurer un affichage correct de la page, les caractères spéciaux (accentués, …) sont remplacés par leur code HTML.
Organiser Son Texte – caractères spéciaux
• Caractères particuliers
CaractèreCode
numériqueCode HTML Description
" " " Guillemets
& & & Esperluette
< < < Inférieur à
> > > Supérieur à
Organiser Son Texte – caractères spéciaux
• Signes diacritiques : un signe diacritique est un signe graphique qui sert à différencier des mots homographes ou des prononciations différentes d'une même lettre.
Organiser Son Texte – caractères spéciaux
• Caractères diacritiques
Caractère
Code numéri
que
Code HTML
Description
à à à
ˆ ˆ ˆAccent
circonflexecirc
˜ ˜ ˜ Tilde tilde
¸ ¸ ¸ Cédille ¸
Organiser Son Texte – caractères spéciaux
• Exemple :
• <?xml version="1.0" encoding="iso-8859-1"?>
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd">
• <html>
• <head>
• <title>Notre première page</title>
• </head>
• <body>
• <h1> Titre de la page</ h1>
• <p>
" <br/> ˆ <br/> > <br/> ˜ <br/> &
</p>
• </body>
• </html>
Organiser Son Texte – mettre en forme
• Il existe des balises pour mettre en forme le texte.• <em> texte </em> : met en italique le texte.• <strong> texte </strong>: met en gras le texte.• <sup> texte </sup>: met en exposant le texte.• <sub> texte </sub>: met en indice le texte.
Organiser Son Texte – mettre en forme
• Exemple :
• <?xml version="1.0" encoding="iso-8859-1"?>
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd">
• <html>
• <head>
• <title>Notre première page</title>
• </head>
• <body>
• <h1> Titre de la page</ h1>
• <h2> Titre du paragraphe 1</ h2>
• <p>
<em> Texte du paragraphe 1 Texte du paragraphe 1 </em>
</p>
Organiser Son Texte – mettre en forme
• Exemple (suite) :
• <p>
<strong> Texte du paragraphe 1 Texte du paragraphe 1 </strong >
</p>
• <p>
Bonjour M<sup>me</sup>
</p>
• <p>
x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub>
</p>
• </body>
• </html>
Organiser Son Texte – Liens
• Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouvelle page (lien externe) ou vers une autre zone de la page courante (lien interne).
• Un lien sera représenté dans le code par la balise <a>.• L'adresse de destination doit se trouver dans l'attribut href.• <a href="chemin/du/fichier/destination.html">Texte du
lien</a>.• Il faut indiquer le chemin pour accéder à la page de
destination.
Organiser Son Texte – Liens
• Si les 2 pages sont sur le même répertoire, on indique juste le nom de la page.
• <a href="destination.html">Texte du lien</a>.• Si la page de destination se trouve par exemple dans un
sous dossier.• <a href="sous_dossier/destination.html">Texte du
lien</a>.• Lien vers un site externe, on indique l’url complet du site.• <a href="http://www.google.sn">lien vers google</a>.
Organiser Son Texte – Liens
• L’attribut target permet de spécifier la manière dont la page de destination va s’ouvrir.
• _ self : remplace la page courante par la nouvelle page.• _blank : affiche la page de destination dans une nouvelle
page. • <a href="http://www.google.sn" target='_blank'>lien vers
google</a>.• <a href="http://www.google.sn" target='_self'>lien vers
google</a>.
Organiser Son Texte – Liens
• L’attribut title affiche une bulle d’aide lorsque vous pointerez la souris sur le lien.
• <a href="http://www.google.sn" target='_blank' title='lien vers google sur une nouvelle page' >lien vers google</a>.
• <a href="http://www.google.sn" target='_self ' title='lien vers google sur la même page' >lien vers google</a>.
Organiser Son Texte – Liens
• Il est possible d’utiliser les liens pour envoyer un email.• <a href="mailto:adressemail">Ecrivez-moi</a>
Organiser Son Texte – Liens
• Les ancres permettent de naviguer à l'intérieur d'une même page.
• Pour faire une ancre, il faut utiliser le signe dièse (#) suivi d'un mot-clef.
• <a href="#motClef">Texte de mon ancre</a>• [...]• <h2 id="motClef">Texte vers lequel l'ancre est
renvoyée</h2>
Organiser Son Texte – Images
• Pour afficher une image, on utilise la balise <img>.• L'attribut src permet de renseigner le chemin de l'image,• <img src="adresse/de/l/image" >
Organiser Son Texte – caractères spéciaux
• Exemple :
• <?xml version="1.0" encoding="iso-8859-1"?>
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd">
• <html>
• <head>
• <title>Notre première page</title>
• </head>
• <body>
• <h1> Titre de la page</ h1>
• <p>
<img src=" image1.gif" >
</p>
• </body>
• </html>