Introduction html

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.


• Exemple (valide) :

• ...

• <p>

• <font color="red">

• Mon texte en rouge

• </font>

• </p>


• 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" >


< mabalise attribut1=1 >

Grammaire du XHTML

• EN XHTML :

- Tout attribut doit forcement recevoir une valeur.

Exemple (valide) :

< mabalise attribut1="1" >


< mabalise attribut1>

Grammaire du XHTML

• EN XHTML :

- Toute balise ouverte doit être fermée.

Exemple (valide) :

< mabalise > texte < /mabalise >


< 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 >


< 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.


• 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.


• Le doctype permet de définir le langage utilisé par la page ainsi que le jeu de règles voulu.

Il existe plusieurs doctype:


• 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">


• 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>



</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>


• <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é.



Organiser Son Texte – Titre• Exemple :


• <!DOCTYPE html



• <html>

• <head>


• </head>

• <body>







• </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 :


• <!DOCTYPE html



• <html>

• <head>


• </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) :


• <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.


• Caractères particuliers

CaractèreCode

numériqueCode HTML Description

" " " Guillemets

& & & Esperluette

< < < Inférieur à

> > > Supérieur à


• 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.


• Caractères diacritiques

Caractère

Code numéri

que

Code HTML

Description

à à à

ˆ ˆ &circ;Accent

circonflexecirc

˜ ˜ &tilde; Tilde tilde

¸ ¸ ¸ Cédille ¸


• Exemple :


• <!DOCTYPE html



• <html>

• <head>


• </head>

• <body>


• <p>

" <br/> &circ; <br/> > <br/> &tilde; <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.


• Exemple :


• <!DOCTYPE html



• <html>

• <head>


• </head>

• <body>



• <p>

<em> Texte du paragraphe 1 Texte du paragraphe 1 </em>

</p>


• 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.


• 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>.


• 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>.


• 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>.


• Il est possible d’utiliser les liens pour envoyer un email.• <a href="mailto:adressemail">Ecrivez-moi</a>


• 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" >


• Exemple :


• <!DOCTYPE html



• <html>

• <head>


• </head>

• <body>


• <p>

<img src=" image1.gif" >

</p>

• </body>

• </html>

Introduction html

Documents

Transcript of Introduction html