Chap1 XHTML

WEB : Cration des Sites Web II
Introduction
Cration des sites web Pr.Benramdane V1.0
Page 1
Introduction
Introduction gnrale XHTML Structure dun document XHTML
Crer du texte et des listes

Les titres Les divisions de la page (paragraphes, divisions)
Les styles physiques (Gras, italique, Taille, exposant,indice,)

Les listes (ordonnes, non ordonnes, imbriques, de dfinitions)
Insrer des images et multimdia Crer des liens Les tableaux Les cadres (frames)
Page 2
Introduction
Dfinition: SGML (Standard Generalized Markup Language)

Historiquement, les langages de balisage sont issus du langage SGML
(Standard Generalized Markup Language) cr en 1986 pour structurer des contenus trs divers.
Ce langage sest rvl trop complexe pour tre appliqu tel quel au Web,
do la ncessit den crer une version allge respectant les mmes principes essentiels.
SGML est une norme internationale pour la reprsentation de documents

textuels sous forme lectronique indpendante des systmes dexploitation et des plate-formes
Un document SGML permet de dcrire et dutiliser dautres langages de

balisage
Page 3
Introduction
Dfinition: HTML(HyperText Markup Language)

HTML est un sous-ensemble simplifi de la norme SGML. Linventeur du HTML (1992), Tim Berners-Lee. Extensions : .HTML .HTM .SHTM .SHTML Orient sur la prsentation des donnes et moins sur la structuration du contenu. Support par toutes les plateformes permet le balisage du texte en vue dune
publication sur le Web .
De nombreux logiciels permettent de crer des fichiers HTML, notamment les

traitements de texte, tableurs, etc. Cependant il vaut mieux se mfier de la
qualit du HTML gnr ainsi et utiliser un logiciel ddi.
Pour ouvrir ces fichiers : tout navigateur Internet. Pour diter ces fichiers : tout diteur de format .TXT (Bloc-notes, Notepad++,...).
Page 4
Introduction
Dfinition XHTML:
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 diffrents lments.
Cela signifie que la mise en place dune page web (titres, paragraphes,
images...) utilisera des caractres pour marquer dune certaine faon les diffrentes parties du texte. Parmi ces caractres de marquage, certains correspondront des liens vers dautres pages web : ce sont des liens hypertexte.
Le X de XHTML vient de XML, soit eXtensible Markup Language ,

langage plus complexe et plus strict que le HTML. Cest lui qui a inspir la transition du HTML vers la forme plus rigoureuse quest le XHTML.
Le XHTML est le langage qui remplace l'ancien, appel HTML. le langage XHTML est une reformulation de HTML pas une nouvelle version
de HTML, en tant que application XML(eXtensible Markup Language).
Page 5
Introduction
Dfinition XHTML:
Le langage XHTML 1.0 devient une recommandation du W3C en
janvier 2000.
Suivi de la version XHTML 1.1 en mai 2001. La famille de langages XHTML est cre et suivie par le groupe de travail
XHTML du W3C, la version actuelle tant la version 1.1. Une rvision 1.2 et une nouvelle version 2.0 sont en prparation.
http://www.w3.org/TR/xhtml1/
Page 6
Introduction
Dfinition: XML
XML (Extensible Markup Language langage de balisage extensible ) est un langage informatique de balisage gnrique. Il
sert essentiellement stocker/transfrer des donnes de type texte Unicode structur en champs arborescents.
<?xml version="1.0" encoding="utf-8"?> <bibliotheque> <livre id="ISB768"> <titre>Histoire et Gographie</titre> <auteur> <nom>Farah</nom> <prenom>Anas</prenom> <adresse>Rue casablanca n19</adresse> <email>farah@gmail.com</email> <telephone>0678986785</telephone> <auteur> <edition> Eyrolles</edition> <livre> </bibliotheque>
Page 7
Introduction
Dfinition: CSS
CSS, cela signifie Cascading Style Sheets , ce qui se traduit en
franais par feuilles de style en cascade. Ce langage nous sert uniquement prsenter la page web. C'est en CSS que l'on dira : Mes titres sont en rouge et sont souligns Mon texte est dans la police arial, Mon nom est centr, Mon menu a un fond blanc..."
La feuille de style fournit la mise en forme des lments de la page,

qui auront t crits en XHTML. Elle sapplique une ou plusieurs pages du site. le dernier style dfini qui est pris en compte.
Page 8
Introduction
W3C: World Wide Web Consortium
Le World Wide Web Consortium, abrg par le sigle W3C, est un

organisme de normalisation but non-lucratif, fond en octobre 1994 comme un consortium charg de promouvoir la compatibilit des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, SPARQL, CSS, PNG, SVG et SOAP.
Page 9
Introduction
Les lments, balises et attributs

Le document final traitement de texte tel que Word , ne laisse
apparatre que le rsultat de votre mise en page, mais en arrireplan, votre traitement de texte a enregistr tous les paramtres de mise en page que vous avez utiliss en plus du texte lui-mme.
Dans un langage de balisage, tout contenu, quil sagisse de texte,

dimage ou dlments multimdias les plus divers, doit tre renferm dans un lment.
En XHTML, comme dans HTML, chaque lment a un nom

dtermin et la liste des lments utilisables est limitative et clairement dfinie dans la DTD (Document Type Definition) lie la version utilise du langage.
Page 10
Introduction
Les lment:
Un lment a la structure suivante :
<nom_element> Contenu </nom_element> Son contenu est prcd par une balise douverture <nom_element> et suivi par une balise de fermeture </nom_element>. Toutes les balises douverture (ou marqueur) commence par le signe < et se terminent par le signe >. La balise de fermeture fait de mme mais le nom de llment est prcd dun slash (/). Les navigateurs interprtent donc les contenus en fonction du nom de llment et attribuent un style par dfaut chacun de ses contenus. Les caractristiques de chaque lment peuvent tre prcises par des informations complmentaires que lon dsigne en tant quattributs de llment. Exemple: la largeur, la hauteur ou de lalignement du contenu.
Page 11
Introduction
Les attributs:
Les attributs dun lment sont toujours dfinis dans la balise
douverture et doivent tre spars les uns des autres par au moins un espace typographique. Chaque attribut doit avoir une valeur, contrairement ce qui se pratiquait dans HTML 4. La valeur de tous les attributs doit tre dfinie entre des guillemets doubles. La syntaxe conforme dun lment ayant des attributs est donc la suivante : <nom_element attribut1="valeur1" attribut2="valeur2" > Contenu de llment </nom_element> Le contenu dun lment peut tre constitu de texte ou dautres lments qui, eux mmes, peuvent en contenir dautres, et ainsi de suite. Cet ensemble dinclusion constitue la hirarchie du document XHTML.
Page 12
Introduction
Les attributs de base de XHTML

les lments disponibles en XHTML ont en commun un ensemble
dattributs ayant chacun le mme rle. Ces attributs se rpartissent en trois catgories: Les attributs courants (noyau); Les attributs dinternationalisation; Les attributs de gestion dvnements;
Page 13
Introduction
Les attributs courants (noyau):

Ils sappliquent quasiment tous les lments. On compte trois
principaux attributs courants et un quatrime encore accept mais dont lemploi est dconseill : Lattribut id : il sert identifier un lment de manire unique en lui donnant un nom, soit pour lui attribuer un style, soit pour y faire rfrence sans ambigut dans un script JavaScript. Lattribut class: il contient le nom dune classe CSS qui contient des dfinitions de styles. Son usage est trs rpandu pour affecter des styles ponctuellement un lment. Lattribut title: il contient un texte qui apparat dans une bulle quand lutilisateur positionne le curseur quelques instants sur un lment. Le texte quil contient peut servir fournir une information ou une explication sur le rle de llment. Lattribut style: il permet de dfinir un style localement pour un lment donn. Il est encore tolr en XHTML 1.1 mais dconseill.
Page 14
Introduction
Les attributs dinternationalisation

Lattribut xml:lang. Il qui remplace lattribut lang de HTML 4. Lattribut dir. Il indique le sens de lecture du contenu textuel dun
lment ; il peut prendre les valeurs ltr (lecture de gauche droite) ou rtl (de droite gauche).
Les attributs de gestion dvnements

Ces attributs permettent de grer les vnements dont un lment
peut tre le sige et qui sont crs par lutilisateur.
Leur contenu est un script crit en gnral en langage Java-Script.
Les DTD HTML 4 dfinissent dix attributs de gestion dvnements
Page 15
Introduction
Les attributs de gestion dvnements
Page 16
Introduction
Un document bien form

Un document XHTML doit respecter certaines rgles simples :
Les lments et les attributs sont sensibles la casse et doivent tre crits en minuscules. Exemple, <body> et non plus <BODY> comme en HTML. Les lments non vides doivent avoir obligatoirement une balise douverture et une balise de fermeture. Par exemple, on ne doit plus crire :
Mais le code suivant:
Les lments vides ne comportent quune seule balise et doivent se terminer par les caractres /> prcds dun espace pour marquer la fin de llment. Par exemple, il ne faut plus crire :
Mais le code suivant:
Page 17
Introduction

Les lments ne doivent pas se chevaucher. Ils doivent donc se conformer au principe premier-ouvert-dernier-ferm. Dans ce cas, le premier lment est le parent du second et celui-ci est enfant du premier.
Tous les attributs doivent avoir une valeur incluse entre des guillemets doubles ("). Les diffrents attributs du mme lment doivent tre spars par au moins un espace. Par exemple, il ne faut plus crire :
Page 18
Introduction

tous les attributs utiliss doit tre donne une valeur, y compris ceux dont la valeur est unique. Par exemple, il ne faut plus crire :
Lattribut name qui servaient identifier certains lments (<a>, <form>, ) est supprim et doit tre remplac par lattribut id. Les scripts et les feuilles de style qui contiennent les caractres < et & peuvent figurer dans des sections CDATA de la faon suivante :
Ces sections ntant pas actuellement reconnues par les navigateurs, mais il faudra en tenir compte dans un avenir proche.
Page 19
Introduction
Un document conforme
Un document XHTML se doit galement de respecter les rgles dinclusion des lments les uns dans les autres, telles quelles sont dfinies dans la DTD choisie. Une DTD dfinit la liste limitative de tous les lments XHTML utilisables et numre ceux qui peuvent y tre inclus. Le respect de ces contraintes est impratif pour que le document soit dclar conforme.
Page 20
Introduction
Validation dun document : le label du W3C

Comme peut le faire un compilateur qui signale les ventuelles erreurs de syntaxe, le validateur du W3C permet de vrifier si le code est bien form et conforme la DTD indique. Pour lancer cette validation automatique, vous devez soumettre lURL ou le code de vos documents XHTML au validateur du W3C accessible ladresse suivante : http://validator.w3.org
Page 21
Introduction
Lenvironnement de travail
Pour crer des pages web avec XHTML et CSS, il faut tre dot dun
environnement de travail adapt. Un simple diteur de texte tel que le Bloc Notes de Windows ou Emacs sous Linux par exemple peut suffire. Quelques outils susceptibles de faire gagner du temps. Les diteurs visuels:
dans ce type dditeurs, vous travaillez graphiquement sur une page en y incluant des lments sans taper une ligne de code. Le plus connu est Dreamweaver, mais il en existe bien dautres plus ou moins perfectionns tel que Golive dadobe. le code que lon ne saisit pas est gnr automatiquement et rien ne garantit quil convienne ou quil soit conforme aux dernires spcifications XHTML,
Voir: http://www.webreference.com/authoring/languages/html/editors/index.html
Les diteurs classiques: Bloc Notes Windows,
Pspad, Notpad++, EditPlus,
Page 22
Introduction
Les diteurs:
EditPlus
La zone contient en plus des menus habituels un ensemble de boutons permettant linclusion instantane du code correspondant une icne (lien, titres, tableaux, etc.).
La zone contient le code de la page
la zone permet de visualiser selon vos besoins du moment la liste des lments XHTML 1.1, celle des proprits CSS 2 ou un explorateur de fichiers.
Page 23
Introduction
Une fois que vous aurez cr lensemble des pages de votre site, il faudra vous assurer quelles ont un aspect identique ou du moins trs semblable dans les diffrents navigateurs du march et les rsolutions dcran affrentes. Quand cette phase de test a t effectue, il ne reste plus qu transfrer lensemble des pages du site vers le serveur distant qui va les hberger pour les mettre la disposition de tous. Vous devez pour cela utiliser un logiciel de transfert FTP (File Transfert Protocol) tel que FileZilla.
1=> serveur FTP 2 => Nom dutilisateur 3=> mot de passe 4 => numro du port (21) 5 => arborescence des dossiers sur le serveur 6 => arborescence des dossiers sur la machine locale.
Page 24
Introduction
Une fois que vous avez cr votre site conforme XHTML et CSS, il
reste savoir le faire connatre. Le moyen le plus simple, et gnralement gratuit, est de le rfrencer dans les annuaires et moteurs de recherche les plus connus comme Google ou Yahoo afin quil soit bien plac en rponse la recherche dun internaute.
Page 25
Introduction
Si vous achetez un nom de domaine choisissez de prfrence un

nom court et facile mmoriser. Les noms longs posent soucis lutilisateur qui se demande alors si les mots se suivent ou sont spars par des tirets, do des interprtations divergentes et des erreurs. Certains moteurs de recherche affichent les sites rpondant aux mmes critres par ordre alphabtique et il vaut mieux que votre nom de domaine commence par a plutt que par z . Les extensions .com (ou .fr en France) sont prfrables .org ou .net car ce sont les premires qui viennent lesprit des internautes sils ont oubli lextension relle. La dfinition dun maximum de mots-cls rapportant objectivement le contenu de votre site est essentielle. Elle doit tre ralise laide de llment :
Une astuce consistait rpter ces mots dans la page et de les crire de la mme couleur que le fond de la page en crant des styles CSS appropris et non plus les balises et les attributs utiliss pour dfinir les couleurs.
Page 26
Introduction
Les 5 rgles de syntaxe XHTML:

Toute balise ouvrante doit obligatoirement tre ferme.
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 lment doit tre imbriqu correctement.

Juste : <p>j'aime le <strong>xhtml</strong></p> Faux : <p>j'aime le <strong>xhtml</p></strong>
Page 27
Introduction
C'est quoi la diffrence entre XHTML 1.0 et XHTML 1.1 ?

XHTML 1.0 accepte d'tre interprt comme un document HTML.
C'est pour cette raison que son type mime est "text/html".
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
XHTML 1.1 n'accepte pas d'tre interprt comme un document HTML.

Pour cette raison, son type mime doit tre "application/xhtml + xml".
<meta http-equiv="Content-type" content="application/xhtml + xml ; charset=ISO-8859-1" />
Actuellement, la plupart des serveurs sont configurs pour envoy "text/html" lorsqu'il s'agit de fichiers ".php", ".html", ".asp"... Il faut donc modifier les donnes envoyes par le serveur, soit directement sur le serveur, soit via un langage serveur.
Page 28
Introduction
Tout document XHTML peut donc dbuter de la mme manire

quun document XML par la dclaration suivante:
<?xml version="1.0" encoding="UTF-8"?>
Elle sera suivie de la dclaration de la DTD suivante

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/OTR/xhtml1/DTD/xhtml1-strict.dtd"> Entte XML avec la version 1.0 et l'encodage iso-8859-1 des caractres. la dclaration de la DTD llment racine <html> Llments <head> <head> incluant au moins llment <title> <body> ayant au moins un lment enfant, ici il ya <h1>
Le fichier contenant ce code doit avoir une extension .html ou .htm

Page 29
Introduction
Le doctype est la DTD (Dclaration de Type de Document) de votre

page web. Il indique votre page web quelles sont les rgles suivre. Le doctype est une ligne d'instruction situe en haut de chaque document XHTML. C'est au dveloppeur web de choisir le doctype selon ses objectifs et ses besoins. Doctype XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/OTR/xhtml1/DTD/xhtml1-transitional.dtd">
Doctype XHTML 1.0 Framset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/OTR/xhtml1/DTD/xhtml1-framset.dtd">
Doctype XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/OTR/xhtml1/DTD/xhtml1-strict.dtd">
Page 30
Introduction
Comme le doctype XHTML strict 1.0 n'acceptent pas les balises de

prsentation du type <font> ou <center>, celles-ci ne doivent plus tre utiliser.
Il faut alors utiliser les styles CSS : c'est plus propre et plus pratique!
Mme pour le doctype XHTML transitional 1.0, ces balises sont dprcies.
Certaines de ces balises sont mme compltement obsoltes et

n'appartiennent aucune norme. En conclusion, que ces balises soient dprcies ou obsoltes, elles sont condamnes, l'avenir, ne plus tre interprtes par les navigateurs!
Page 31
Introduction
Un validateur XHTML est une application en ligne qui permet de valider une de vos pages web au format souhait : XHTML strict 1.0, XHTML transitional 1.0, HTML transitional.
http://validator.w3.org/ Validome (Services de validation HTML / XHTML / WML / XML) permet aux diteurs de sites web de vrifier la syntaxe de leurs documents avec un service de validation sr et trs rapide. (validone: http://www.validome.org)
Page 32
Introduction
Pour structurer sa page web en XHTML, il existe 8 balises principales :

Balise <html> (lment racine d'une page web) Balise <head> (en-tte du document) Balise <body> (corps du document) Balise <title> (titre du document) Balise <meta /> (mta-information du document) Balise <style> (style CSS) Balise <script> (langage de script) Balise <noscript> (texte alternatif aux langages de script)
Page 33
Introduction
La balise <html> est l'lment racine de la page web xhtml (balise

de type BLOC). La balise <html> dfinit le dbut du document xhtml. Aucune balise ne doit se trouver au dessus de la balise <html>, ni en dessous de la balise </html> (sauf le doctype xhtml qui lui se trouve au dessus de la balise <html>).
<!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/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="motcle1,mocle2" /> <meta name="description" content="Description de ma page web." /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html> Page 34
Introduction
La balise <head> est l'en-tte de la page web xhtml (balise de type BLOC). Tout ce que l'on insre dans la balise sont les en-ttes de document : <title>, <meta />, <link />, <script>. Ces en-ttes ne s'affichent pas dans le corps du document ( l'exception de la balise <title> qui s'affiche tout en haut du navigateur).
<!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/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="motcle1,mocle2" /> <meta name="description" content="Description de ma page web." /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html> Page 35
Introduction
La balise <body> est le corps du document de la page web (balise

de type BLOC). Elle contient tous les lments du contenu de la page web xhtml.
<!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/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="motcle1,mocle2" /> <meta name="description" content="Description de ma page web." /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> Ici, mon texte. </div> </body> </html> Page 36
Introduction
La balise <title> est le titre du document de la page web xhtml

(balise de type EN LIGNE)
<!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/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="motcle1,mocle2" /> <meta name="description" content="Description de ma page web." /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> Ici, mon texte. </div> </body> </html>
Page 37
Introduction
Les balises <meta /> contiennent les mta-informations de la page web xhtml (balise de type EN LIGNE)
<!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/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="motcle1,mocle2" /> <meta name="description" content="Description de ma page web." /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> Ici, mon texte. </div> </body> </html>
Page 38
Introduction
La balise Meta DESCRIPTION dcrit le contenu de la page web :

<meta name="description" content="Les balises meta en xhtml." /> La balise Meta KEYWORDS regroupe les principaux mots-cls de la page web par langue. <meta name="keywords" lang="fr" content="meta,balise meta,meta balise,balises meta,meta balises,xhtml" />
La balise Meta CONTENT-TYPE dfinit la table de caractres utiliser :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"" />
La balise Meta CONTENT-LANGUAGE dfinit la ou les langues

utilises :
<meta http-equiv="Content-Language" content="fr" /> <meta http-equiv="Content-Language" content="fr,uk,us" />
La balise Meta CONTENT-SCRIPT-TYPE autorise l'utilisation de

gestionnaire d'vnement via les attributs des balises.
<meta http-equiv="Content-Script-Type" content="text/javascript" />
Page 39
Introduction
La balise Meta AUTHOR dfinit l'auteur de la page web :

<meta name="author" content="ahmed karim,time berners,Claude Franois" />
La balise Meta CATEGORY dfinit la catgorie de la page web :

<meta name="category" content="webmaster,outils webmaster,apprentissage,informatique,internet" />
La balise Meta COPYRIGHT dfinit le copyright de la page web :

<meta name="copyright" content="Xhtml Online, Webmaster Incorporated" />
La balise Meta ROBOTS autorise ou interdit l'indexation par les

robots des moteurs de recherche.
<meta name="robots" content="index,follow" />
Page 40
Introduction
<!DOCTYPE html PUBLIC "-//W3C//DTDstyles CSS de la page web xhtml. La balise <style> dfinit les XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="motcle1,mocle2" /> <meta name="description" content="Description de ma page web." /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <link href="style.css" rel="stylesheet" type="text/css" /> <style> * {padding:0px;margin:0px;} body {background-color:#ffffff;} </style> </head> <body> <div> Ici, mon texte. </div> </body> </html> Page 41
Introduction
La balise <script> permet d'incorporer des scripts dans la page.

<!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/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="motcle1,mocle2" /> <meta name="description" content="Description de ma page web." /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="monscript.js"></script> </head> <body> <div> Ici, mon texte. </div> </body> </html>
Page 42
Introduction
<!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/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre de la page</title> <meta name="keywords" lang="fr" content="motcle1,mocle2" /> <meta name="description" content="Description de ma page web." /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> // <![CDATA[ alert(" bienvenue dans la technologie Xhtml"); //]]> </script> </head> <body> <div> Ici, mon texte. </div> Page 43 </body>
Introduction
Les conteneurs gnriques XHTML sont de 2 sortes :

Balise <div> (balise gnrique neutre de type BLOC) Balise <span> (balise gnrique neutre de type EN LIGNE) <div> tant un lment de type BLOC, il peut contenir des balises
<div> et des balises <span>. Par contre, <span> tant un lement EN LIGNE, il ne peut contenir d'autres <span> et en aucun cas des <div>.
Voici ce qu'il faut faire :
<div> <span>Le xhtml est formidable</span> </div>

Voici ce qu'il ne faut pas faire :
<span> <div>Le xhtml est formidable</div> </span>
Page 44
Introduction
La balise <div> est un lment gnrique neutre de la page web

xhtml (balise de type BLOC ) . La balise <div> est souvent employe pour regrouper d'autres balises dans des zones par thme.
<div> <h1> Le titre de mon bloc</h1> <blockquote>To be xhtml or not to be xhtml ?</blockquote> </div>
La balise <span> est un lment gnrique neutre de la page web

xhtml (balise de type EN LIGNE).
<span><abbr>xhtml</abbr> et <strong> smantique </strong> ne font qu'un!</span>
Page 45

Chap1 XHTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chap1 XHTML

Uploaded by

Copyright:

Available Formats

WEB : Cration des Sites Web II

Cration des sites web Pr.Benramdane V1.0

WEB : Cration des Sites Web II

Introduction gnrale XHTML Structure dun document XHTML

Crer du texte et des listes

Les styles physiques (Gras, italique, Taille, exposant,indice,)

WEB : Cration des Sites Web II

Dfinition: SGML (Standard Generalized Markup Language)

SGML est une norme internationale pour la reprsentation de documents

Un document SGML permet de dcrire et dutiliser dautres langages de

WEB : Cration des Sites Web II

Dfinition: HTML(HyperText Markup Language)

De nombreux logiciels permettent de crer des fichiers HTML, notamment les

WEB : Cration des Sites Web II

Le X de XHTML vient de XML, soit eXtensible Markup Language ,

WEB : Cration des Sites Web II

WEB : Cration des Sites Web II

WEB : Cration des Sites Web II

La feuille de style fournit la mise en forme des lments de la page,

WEB : Cration des Sites Web II

W3C: World Wide Web Consortium

Le World Wide Web Consortium, abrg par le sigle W3C, est un

WEB : Cration des Sites Web II

Les lments, balises et attributs

Dans un langage de balisage, tout contenu, quil sagisse de texte,

En XHTML, comme dans HTML, chaque lment a un nom

WEB : Cration des Sites Web II

WEB : Cration des Sites Web II

WEB : Cration des Sites Web II

Les attributs de base de XHTML

WEB : Cration des Sites Web II

Les attributs courants (noyau):

WEB : Cration des Sites Web II

Les attributs dinternationalisation

Les attributs de gestion dvnements

Leur contenu est un script crit en gnral en langage Java-Script.

Les DTD HTML 4 dfinissent dix attributs de gestion dvnements

WEB : Cration des Sites Web II

Les attributs de gestion dvnements

WEB : Cration des Sites Web II

Un document bien form

WEB : Cration des Sites Web II

Un document bien form

WEB : Cration des Sites Web II

Un document bien form

WEB : Cration des Sites Web II

WEB : Cration des Sites Web II

Validation dun document : le label du W3C

WEB : Cration des Sites Web II

Les diteurs classiques: Bloc Notes Windows,

Pspad, Notpad++, EditPlus,

WEB : Cration des Sites Web II

La zone contient le code de la page

WEB : Cration des Sites Web II

WEB : Cration des Sites Web II

WEB : Cration des Sites Web II

Si vous achetez un nom de domaine choisissez de prfrence un

WEB : Cration des Sites Web II

Les 5 rgles de syntaxe XHTML:

Les balises et les attributs doivent tre crits en minuscule.

Les valeurs des attributs doivent tre entre guillemet ou apostrophe

Chaque attribut doit avoir une valeur.

Chaque lment doit tre imbriqu correctement.