Thorsten - cours XML Gobelins - Mardi 10 Novembre 2009
Xhtml eXtensible HyperText Markup Language,
SGML ( XHTML, HTML, XML) est un langage informatique
inventé en 1989 par timothy Berners-Lee, KBE, citoyen britannique résidant aux Etats-Unis, a été anobli en reconnaissance de services rendus pour « le développement global d'Internet » grâce à son invention du Web, comme système d'organisation, de liaison et de navigation de pages sur l'Internet. c'est lui qui a inventé le premier navigateur
L'inventeur de l'Hypertexte Ted Nelson en 1965 il a l'idée que l'on peut écrire ou lire une page "au delà" d'une manière non linéaire (aller de l'au delà d'un texte d'une page à l'autre)
http://ted.hyperland.com/
C'est le premier à réaliser un lien hypertext Douglas endelbart 1968
http://fr.wikipedia.org/wiki/Douglas_Engelbart
Douglas B. Engelbart est un inventeur américain et un pionnier de l'informatique. Il est célèbre pour avoir inventé la souris, pour ses travaux sur le développement de l'interface homme-machine et pour avoir développé le système hypertexte, les réseaux informatiques et les premières interfaces graphiques (GUI).
Douglas endelbart demo 1er lien hypertexte
http://sloan.stanford.edu/MouseSite/1968Demo.html
http://video.google.com/videoplay?docid=-8734787622017763097#
Concept Vannevar Bush
"as we make think"
http://www.theatlantic.com/doc/194507/bush
il décrit ce qu' était un ordinateur
Pour comprendre les mécanismes des langages de marquage (xhtml, html, xml)
Organisation des données
3 types d'organisation
1 - Personnelle ( possible pour une quantité limitée de données)
2 - Tabulaire (excel, base de données etc..)
3 - Hierachique arborescente (organiser par catégories par rubriquage)
Les données CSV = Common Separated Value = texte brut
Comment représenter les données de façon claire pour que le programme informatique puisse les traiter sans équivoque?
exemple : des courses à Carrefour vêtements chemises pantalons
Printemps parfun BHV Vis mirroir
c'est avec le "système des blocs" que l'on va représenter ces données
comment déterminer le début et la fin d'un bloc?
c'est le "système de marquage de bloc" "des marqueurs" appelé "balises" "tags"
------------------------------------------
cela donne : un fichier en XML extension .xml
<courses> début d'un bloc
<carrefour>
<vêtements>
<chemises>lacoste</chemises>
<pantalons>text</pantalons>
</vêtements>
</carrefour>
<Printemps>
<parfun>Chanel</parfun>
</printemps>
</courses> fin d'un bloc
---------------------------------------
Pour les navigateurs il faut des marqueurs identifiés
le Xhtml c'est du html qui respecte les normes XML
Historiquement parlant c'est le HTML qui est apparu puis ensuite l'XML puis le Xhtml
et avant le html il y avait le SGML langage très avancé et très complexe
Exerxice
Carnet d'adresse
Nom, Prénom, email
<carnetadresses> <contact>
<Nom>Lebreton</Nom>
<Prénom>julie</Prénom>
<Mail>ljulie@ffv.fr</Mail>
<vip/> spécifie que c'est un vip sans mettre de valeur - le fait de fermer la balise en elle même le slash se met à la fin quand il n'y a pas de valeur à donner
</contact>
<contact>
<Nom>dupond</Nom>
<Prénom>olivier</Prénom>
<Mail>odupond@fft.fr</Mail>
</contact>
</carnetadresses>
Les normes du XML
toujours en minuscules, pas de noms composés
un retour ligne, le rupture ligne en html <br/> c'est une balise unique sans ouvertureinserer une image <img .... /> c'est une balise unique sans ouverture
une balise <img > ou <br> n'existe pas uniquement <img .... /> <br/>
<vip/> spécifie que c'est un vip sans mettre de valeur - le fait de fermer la balise en elle même le slash se met à la fin quand il n'ya pas de valeur à donner
on peut aussi mettre une information supplémentaire sur cette balise un attribut
<contact vip"yes" > on le marqueur qui est le nom de la balise plus son attribut (l'information doit être courte).
Avantage le Xml est très interessant pour traiter une quantité moyenne de données pas besoin de faire une base de donnée
"Menu autocomplétion" dans une recherche par exemple dans google propose des mots
faire valider son code super important
http://validator.w3.org/
A chaque fichier xml on doit associé un mode d'emploi d'utilisation correct des balises
ajout des règles d'utilisation = DTD doctype definition extension .dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Public c'est à dire accessible au public et l'adresse http où elle se trouve
Ouvrir la dtd pour l'analyser
rechercher dans la DTD un "element" c'est une balise
<!ELEMENT html (head, body)>
"le plus souple c'est le html transitionnel"
aujourd'hui quand on parle d'html c'est du xhtml
CSS Inline
http://www.tizag.com/cssT/inline.php
Faire une page html
on utilise le jeu d'encodage charset=utf-8 les accents ne sont pas encodé il s'écrive normalement dans le code
celui que l'on utilisait avant le jeu d'encogae europe occidentale : charset=iso-8859-1" dans ce cas là les caractères spéciaux sont encodé
La balise <title> très importante pour le référencement
que signifie http-equiv="Content-Type"
Qu'est ce que les entêtes "http"
les entêtes c'est les premières informations qui transitent entre le client et le serveur et le sens inverse
Pour rendre visible ces entête sur firefox télécharger add-on firefox "live http headers"
Balises méta <meta >informations supplémentaires sur l'ensemble de la page liste de mots clés
On crée les nouvelles balises méta celles ci s'adressent aux moteurs de recherche
Méta avec informations importantes mais pas obligatoire
<meta name="keywords" content=" chat, chien"> c'est le méta de mot clés
<meta name="descriotion" content=" ce site a pour but de faire connaitre les chats"> c'est le méta pour la description du contenu du site, phrase qui apparaît dans google dans la description du site à ne pas négliger
dans l'entête on met les styles
<style type="text/css"> obligatoire si on fait du xhtml
</style>
preférences/indicateur de code/ cocher le 2 bouton radio "après saisie de la fin...d'ouverture">"
code source libération extrait
<script type="text/javascript">
//<![CDATA[
startTag = "";
endTag = "";
var result = false;
if(!isPubActive == 0){
sas_pageid = "252/82917";
sas_formatid = 2556;
sas_target = GLOBAL_SAS_TARGET + "ambient=summary;objectId=channel9";
result = SmartAdServer(sas_pageid,sas_formatid,sas_target);
if(result != false){
document.write(startTag+result);
}
}
//]]>feuille de style de libération est composé de 5648 lignes
http://l.liberation.fr/css/libe.css
Les couleurs hexadécimales Rouge Vert Bleu #ffcc00 équivaut à écrire #fc0
F pour couleur à fond au maximun
Palette "web Safe" 256 couleurs
---------------------------------------
body{background-color:#fc0} héxadécimale
ou
body{background-color: rgb(0,255,0)} décimale
-------------------------------------------
inserer du javascript dans l'entête
tout plus value graphique est fait par javascript
quand javascript fait des requêtes serveur c'est de l'Ajax
conforme aux normes
<script language="javascript" type="text/javascript"> </script>
<script language="javascript" type="text/javascript">
alert("hello world")
</script>
-début code---------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="chat, siamois" />
<meta name="description" content="Ce site a pour but de " />
<style type="text/css">
body{background-color: rgb(0,255,0)}
h1{color: #F90}
</style>
<script language="javascript" type="text/javascript">
//alert("hello world")
</script>
<title>Chat siamois</title>
</head>
<body>
<h1>Titre principal</h1>
<h2>Sous titre</h2>
<h3>Chapeau</h3>
<p>paragraphe1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
<p>paragraphe2 magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
--fin de code ---------------------------------
// deux slashs pour les signifier les commentaires en javascript
Important ! la balise <pre> </pre> est utilisé pour texte preformaté, le texte garde donc le formatge d'origine avec les tabulations espaces et retour à la ligne.
la marque of du web dans dreamweaver/commande/inserer un commentaire mark of the web
pour éviter en locale quand on ajoute du javascript dans le code html qu'une fenêtre d'alerte s'affiche.
les Balises logiques exemple "h1" indique que c'est un titre
Les balises sémantiques :
exemple pour une citation <cite></cite> ce texte se mis automatiquement en italique
pour indiquer qu'un mot est plus important on insère la balise <strong>plus important</strong> le texte passe en gras
pour mettre en avant un texte <em>plus important</em> emphasis
les balises <b> et <i> ne doivent plus s'utiliser uniquement la mise en forme doit e^tre dans les css
Faire des blocs de citations <blockquote></blockquote> provoque un retrait à gauche et à droite
dans dreamweaver par defaut quand on clique sur italique il met la balise <em> et pour bold il met <strong>
Les tables (tableau) les utiliser uniquement quand il y a des données tabulaires
Les listes struture l'arborescence pour faire des sommaires ou des barres de navigations
<ol> ooder list = liste ordonée numérote les lignes
<ul> unorder list = liste non ordonné
<li> list item = item de liste
sélecteur de descendance
li {background-color:#060}
li li {background-color:#C30}
li li li {background-color:#9F0}
Pour enlever les puces des listes
li {background-color:#060; list-style:none}
la barre de nav doit être toujours en haut dans le code même si sur la page il sera en bas
<div> (division) et la balise <span >n'a pas de sens sémantique elle est neutre
un calque c'est un element positionner de manière (absolue ou relative)
le z-index:1 z-index:2 donne le niveau d'empilement des calques les uns avec les autres
-début code---------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="chat, siamois" />
<meta name="description" content="Ce site a pour but de " />
<style type="text/css">
body{background-color: rgb(0,255,0)}
h1{color: #F90}
pre{ font-weight:bold}
li {background-color:#060; list-style:none}
li li {background-color:#C30}
li li li {background-color: #0FF}
#toto{ position:absolute; top:0px; height:50px; z-index:1; background-color:#CFF; left:251px; width:50px}
#port{ position:absolute; top:0px; height:20px; z-index:2; background-color:#C00; left:60px; width:50px}
</style>
<script language="javascript" type="text/javascript">
//alert("hello world")
</script>
<title>Chat siamois</title>
</head>
<body>
<ul>
<li> avant <span id="toto">propos</span>
<ul>
<li>histoire
<ul><li><span id="port">portugal</span></li>
<li>france</li>
</ul>
</li>
<li>géographie</li>
</ul>
</li>
<li> Xhtml</li>
<li> css</li>
</ul>
<a href="http://www.google.fr">liens1</a>
</body>
</html>
--fin de code ---------------------------------
Le lien hypertexte
<a>lien</a> mettre les attributs au lien href=""
<a href="http://www.google.fr">liens1</a>
Xhtml eXtensible HyperText Markup Language,
SGML ( XHTML, HTML, XML) est un langage informatique
inventé en 1989 par timothy Berners-Lee, KBE, citoyen britannique résidant aux Etats-Unis, a été anobli en reconnaissance de services rendus pour « le développement global d'Internet » grâce à son invention du Web, comme système d'organisation, de liaison et de navigation de pages sur l'Internet. c'est lui qui a inventé le premier navigateur
L'inventeur de l'Hypertexte Ted Nelson en 1965 il a l'idée que l'on peut écrire ou lire une page "au delà" d'une manière non linéaire (aller de l'au delà d'un texte d'une page à l'autre)
http://ted.hyperland.com/
C'est le premier à réaliser un lien hypertext Douglas endelbart 1968
http://fr.wikipedia.org/wiki/Douglas_Engelbart
Douglas B. Engelbart est un inventeur américain et un pionnier de l'informatique. Il est célèbre pour avoir inventé la souris, pour ses travaux sur le développement de l'interface homme-machine et pour avoir développé le système hypertexte, les réseaux informatiques et les premières interfaces graphiques (GUI).
Douglas endelbart demo 1er lien hypertexte
http://sloan.stanford.edu/MouseSite/1968Demo.html
http://video.google.com/videoplay?docid=-8734787622017763097#
Concept Vannevar Bush
"as we make think"
http://www.theatlantic.com/doc/194507/bush
il décrit ce qu' était un ordinateur
Pour comprendre les mécanismes des langages de marquage (xhtml, html, xml)
Organisation des données
3 types d'organisation
1 - Personnelle ( possible pour une quantité limitée de données)
2 - Tabulaire (excel, base de données etc..)
3 - Hierachique arborescente (organiser par catégories par rubriquage)
Les données CSV = Common Separated Value = texte brut
Comment représenter les données de façon claire pour que le programme informatique puisse les traiter sans équivoque?
exemple : des courses à Carrefour vêtements chemises pantalons
Printemps parfun BHV Vis mirroir
c'est avec le "système des blocs" que l'on va représenter ces données
comment déterminer le début et la fin d'un bloc?
c'est le "système de marquage de bloc" "des marqueurs" appelé "balises" "tags"
------------------------------------------
cela donne : un fichier en XML extension .xml
<courses> début d'un bloc
<carrefour>
<vêtements>
<chemises>lacoste</chemises>
<pantalons>text</pantalons>
</vêtements>
</carrefour>
<Printemps>
<parfun>Chanel</parfun>
</printemps>
</courses> fin d'un bloc
---------------------------------------
Pour les navigateurs il faut des marqueurs identifiés
le Xhtml c'est du html qui respecte les normes XML
Historiquement parlant c'est le HTML qui est apparu puis ensuite l'XML puis le Xhtml
et avant le html il y avait le SGML langage très avancé et très complexe
Exerxice
Carnet d'adresse
Nom, Prénom, email
<carnetadresses> <contact>
<Nom>Lebreton</Nom>
<Prénom>julie</Prénom>
<Mail>ljulie@ffv.fr</Mail>
<vip/> spécifie que c'est un vip sans mettre de valeur - le fait de fermer la balise en elle même le slash se met à la fin quand il n'y a pas de valeur à donner
</contact>
<contact>
<Nom>dupond</Nom>
<Prénom>olivier</Prénom>
<Mail>odupond@fft.fr</Mail>
</contact>
</carnetadresses>
Les normes du XML
toujours en minuscules, pas de noms composés
un retour ligne, le rupture ligne en html <br/> c'est une balise unique sans ouvertureinserer une image <img .... /> c'est une balise unique sans ouverture
une balise <img > ou <br> n'existe pas uniquement <img .... /> <br/>
<vip/> spécifie que c'est un vip sans mettre de valeur - le fait de fermer la balise en elle même le slash se met à la fin quand il n'ya pas de valeur à donner
on peut aussi mettre une information supplémentaire sur cette balise un attribut
<contact vip"yes" > on le marqueur qui est le nom de la balise plus son attribut (l'information doit être courte).
Avantage le Xml est très interessant pour traiter une quantité moyenne de données pas besoin de faire une base de donnée
"Menu autocomplétion" dans une recherche par exemple dans google propose des mots
faire valider son code super important
http://validator.w3.org/
A chaque fichier xml on doit associé un mode d'emploi d'utilisation correct des balises
ajout des règles d'utilisation = DTD doctype definition extension .dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Public c'est à dire accessible au public et l'adresse http où elle se trouve
Ouvrir la dtd pour l'analyser
rechercher dans la DTD un "element" c'est une balise
<!ELEMENT html (head, body)>
"le plus souple c'est le html transitionnel"
aujourd'hui quand on parle d'html c'est du xhtml
CSS Inline
http://www.tizag.com/cssT/inline.php
Faire une page html
on utilise le jeu d'encodage charset=utf-8 les accents ne sont pas encodé il s'écrive normalement dans le code
celui que l'on utilisait avant le jeu d'encogae europe occidentale : charset=iso-8859-1" dans ce cas là les caractères spéciaux sont encodé
La balise <title> très importante pour le référencement
que signifie http-equiv="Content-Type"
Qu'est ce que les entêtes "http"
les entêtes c'est les premières informations qui transitent entre le client et le serveur et le sens inverse
Pour rendre visible ces entête sur firefox télécharger add-on firefox "live http headers"
Balises méta <meta >informations supplémentaires sur l'ensemble de la page liste de mots clés
On crée les nouvelles balises méta celles ci s'adressent aux moteurs de recherche
Méta avec informations importantes mais pas obligatoire
<meta name="keywords" content=" chat, chien"> c'est le méta de mot clés
<meta name="descriotion" content=" ce site a pour but de faire connaitre les chats"> c'est le méta pour la description du contenu du site, phrase qui apparaît dans google dans la description du site à ne pas négliger
dans l'entête on met les styles
<style type="text/css"> obligatoire si on fait du xhtml
</style>
preférences/indicateur de code/ cocher le 2 bouton radio "après saisie de la fin...d'ouverture">"
code source libération extrait
<script type="text/javascript">
//<![CDATA[
startTag = "";
endTag = "";
var result = false;
if(!isPubActive == 0){
sas_pageid = "252/82917";
sas_formatid = 2556;
sas_target = GLOBAL_SAS_TARGET + "ambient=summary;objectId=channel9";
result = SmartAdServer(sas_pageid,sas_formatid,sas_target);
if(result != false){
document.write(startTag+result);
}
}
//]]>feuille de style de libération est composé de 5648 lignes
http://l.liberation.fr/css/libe.css
Les couleurs hexadécimales Rouge Vert Bleu #ffcc00 équivaut à écrire #fc0
F pour couleur à fond au maximun
Palette "web Safe" 256 couleurs
---------------------------------------
body{background-color:#fc0} héxadécimale
ou
body{background-color: rgb(0,255,0)} décimale
-------------------------------------------
inserer du javascript dans l'entête
tout plus value graphique est fait par javascript
quand javascript fait des requêtes serveur c'est de l'Ajax
conforme aux normes
<script language="javascript" type="text/javascript"> </script>
<script language="javascript" type="text/javascript">
alert("hello world")
</script>
-début code---------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="chat, siamois" />
<meta name="description" content="Ce site a pour but de " />
<style type="text/css">
body{background-color: rgb(0,255,0)}
h1{color: #F90}
</style>
<script language="javascript" type="text/javascript">
//alert("hello world")
</script>
<title>Chat siamois</title>
</head>
<body>
<h1>Titre principal</h1>
<h2>Sous titre</h2>
<h3>Chapeau</h3>
<p>paragraphe1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
<p>paragraphe2 magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
--fin de code ---------------------------------
// deux slashs pour les signifier les commentaires en javascript
Important ! la balise <pre> </pre> est utilisé pour texte preformaté, le texte garde donc le formatge d'origine avec les tabulations espaces et retour à la ligne.
la marque of du web dans dreamweaver/commande/inserer un commentaire mark of the web
pour éviter en locale quand on ajoute du javascript dans le code html qu'une fenêtre d'alerte s'affiche.
les Balises logiques exemple "h1" indique que c'est un titre
Les balises sémantiques :
exemple pour une citation <cite></cite> ce texte se mis automatiquement en italique
pour indiquer qu'un mot est plus important on insère la balise <strong>plus important</strong> le texte passe en gras
pour mettre en avant un texte <em>plus important</em> emphasis
les balises <b> et <i> ne doivent plus s'utiliser uniquement la mise en forme doit e^tre dans les css
Faire des blocs de citations <blockquote></blockquote> provoque un retrait à gauche et à droite
dans dreamweaver par defaut quand on clique sur italique il met la balise <em> et pour bold il met <strong>
Les tables (tableau) les utiliser uniquement quand il y a des données tabulaires
Les listes struture l'arborescence pour faire des sommaires ou des barres de navigations
<ol> ooder list = liste ordonée numérote les lignes
<ul> unorder list = liste non ordonné
<li> list item = item de liste
sélecteur de descendance
li {background-color:#060}
li li {background-color:#C30}
li li li {background-color:#9F0}
Pour enlever les puces des listes
li {background-color:#060; list-style:none}
la barre de nav doit être toujours en haut dans le code même si sur la page il sera en bas
<div> (division) et la balise <span >n'a pas de sens sémantique elle est neutre
un calque c'est un element positionner de manière (absolue ou relative)
le z-index:1 z-index:2 donne le niveau d'empilement des calques les uns avec les autres
-début code---------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="chat, siamois" />
<meta name="description" content="Ce site a pour but de " />
<style type="text/css">
body{background-color: rgb(0,255,0)}
h1{color: #F90}
pre{ font-weight:bold}
li {background-color:#060; list-style:none}
li li {background-color:#C30}
li li li {background-color: #0FF}
#toto{ position:absolute; top:0px; height:50px; z-index:1; background-color:#CFF; left:251px; width:50px}
#port{ position:absolute; top:0px; height:20px; z-index:2; background-color:#C00; left:60px; width:50px}
</style>
<script language="javascript" type="text/javascript">
//alert("hello world")
</script>
<title>Chat siamois</title>
</head>
<body>
<ul>
<li> avant <span id="toto">propos</span>
<ul>
<li>histoire
<ul><li><span id="port">portugal</span></li>
<li>france</li>
</ul>
</li>
<li>géographie</li>
</ul>
</li>
<li> Xhtml</li>
<li> css</li>
</ul>
<a href="http://www.google.fr">liens1</a>
</body>
</html>
--fin de code ---------------------------------
Le lien hypertexte
<a>lien</a> mettre les attributs au lien href=""
<a href="http://www.google.fr">liens1</a>
Articles
