:
|
Site: |
Cours VB.net |
|
 2.60 |
Annexe: XHTLM |
 |
 |
Qu'est ce que le XHTML ?
XHTML commence par la lettre X, qui représente le mot extensible. XHTML signifie:Extensible Hyper Text Markup Language. (langage de balisage hypertexte extensible)
XHTML est un langage de balisage servant à l'écriture de pages Web, considéré comme le successeur de HTML , XHTML se fonde sur la syntaxe définie par XML, plus récente et plus simple que la syntaxe définie par SGML sur laquelle repose HTML.
Lire l'article sur le HTML et le XML.
XHTML 1.0 est une simple reformulation de HTML 4. Il s'agit donc uniquement d'un changement de syntaxe et de la dissociation de la forme et du fond.
Qu'est ce qu'une balise ?
Une balise est une "instruction" comprise entre crochets
< > qui possède un nom et parfois des attributs.
Toutes les balises doivent être ouvertes puis refermées (contrairement à
l'HTML ou certaines balises n'ont pas besoin d'être refermées. On retrouvera
donc toujours une balise de début et une balise de fin. La
balise de fin porte le même nom que la balise de début à l'exception du nom
du la balise qui est précédé du signe /.
Exemple:
<titre> cours de XHTML </titre>.
Le nom de la balise et le nom des attributs (contenu entre les crochets) doit
être en minuscule.
En XHTML, les balises sont prédéfinies, on ne peut utiliser que celle qui sont définies par le W3C.
Un attribut est le nom d'une propriété de la balise souvent associé à une valeur, il est mis dans la balise d'ouverture après le nom de la balise, elle est en minuscule:
Exemple:
<link rel="icon" type="image/png" href="images/elitwork/favicon.png"
/>
La balise 'link' a un attribut 'rel' qui prend la valeur "icon". Noter que la valeur est entre "".
Il peut y avoir plusieurs balises intriquées, mais attention à l'ordre des balises de fin qui doivent être dans l'ordre inverse (première balise ouverte, dernière fermée).
En tête d'un document XHTML:
<?xml version="1.0" encoding="UTF-8"?> indique la version xml utilisée et le type d'encodage des caractères (ici l'unicode UTF-8).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
Indique la version XHTML utilisée et l'adresse du dtd.
Elle est réservée au navigateur, n'est pas affichée. A ne pas confondre avec l'en-tête 'head'.
Structure générale d'un document XHTML:
Après l'en-tête, la première balise, la balise 'html' (en minuscule). Elle ne peut contenir que deux types de balises, la balise 'head' appelée entête du document et la balise 'body' ( toujours en minuscules) appelée corps du document qui contient tous le éléments à afficher.
<?xml
version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html >
<head>
....
</head>
<body>
........
</body>
</html>
L'entête contient:
le titre du document (non affiché)
les références externes ( Feuilles de style..)
les méta données: <meta name="keywords" content="
cours visual basic, xml, html" />
Différence de syntaxe avec HTML:
XHTML est plus strict:
-Tous les éléments doivent être explicitement balisés.
HTML : Du Texte
XHTML : <li>Du texte.</li>
Les balises fermantes ne sont pas optionnelles.
HTML : <p> Mon paragraphe
XHTML : <p> Mon paragraphe
</p>
être en minuscules (XML est sensible à la casse).
<em class="important">
HTML :<input type="checkbox" value="..." />
XHTML :</li><input type="checkbox" checked="checked "value="..." /></li>.
XHTML :</li><input type="checkbox" checked="checked "value="..." /></li>.
HTML: <img src="i.png" alt="i">.
XHTML: <img src="i.png" alt="i"/>.</li>
Les basiles vides doivent être fermés ou se terminer par /
HTML: <p>.
XHTML: <p></p> ou <p/>
Dissocier la forme et le fond:
Le HTML ne permet pas de faire la différence entre le contenu à proprement parler et la forme, l'apparence du site. Tant et si bien que les textes, l'essentiel de l'information, s'en trouvaient désordonnés, voire incompréhensibles pour un moteur de recherche.
Les balises XHTML indiqueront la signification des éléments de la page et non pas comment les afficher.
En HTML on indique qu'un mot est en gras (par la balise <b> ou par une feuille de style); on indique ici la forme.
En XHTML on indique que ce mot est important grâce à la balise <strong>; on indique ici le fond: la feuille de style aura elle en charge la manière de mettre en forme ce qui est important.
De même en XHTML on indique que tel texte est une citation.
La feuille de style, ou CSS est l'abréviation de Cascading Style Sheets. Cette feuille nous sert uniquement à présenter la page web. C'est en CSS que l'on dira : "Mes titres sont en vert et sont soulignés, mon texte est dans la police arial en noir.
Exemple de document minimal mais complet en XHTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://vlib.org/">vlib.org</a>.</p>
</body>
</html>
Paragraphe:
<p>..</p> permettent de définir un paragraphe.
En effet, La gestion des fins de lignes est laissée au logiciel de navigation. Comme on ne connaît pas lors de la rédaction les dimensions de la fenêtre dans laquelle les documents seront visionnés, il faut donc indiquer explicitement chaque nouveau paragraphe.
Les balises sémantiques:
<cite>..</cite> permettent d'indiquer que l'on cite une oeuvre un auteur...
Exemple:
Extrait
du livre : <cite>Discours de la méthode</cite> de
<cite>Descartes</cite>
<q>..</q> permettent d'indiquer une citation...
Exemple:
Comme
le disait <cite>Ronsard</cite> : <q>Mignonne allons voir
si la rose...</q>
<blocquote> permettent d'indiquer une citation longue.
Attributs pouvant être employés : cite, lang, dir, title.
<em>..</em> marque une insistance raisonnable (emphase).
<strong>..</strong> marque une insistance forte.
Exemple:
Il est <strong>important</strong> de bien comprendre ces notions.
<abbr> est utilisée pour
indiquer que le contenu est une abréviation. C'est utile que si l'on indique
son sens grâce à l'attribut title.
Attributs pouvant être employés : lang, dir, title.
Exemple :
T'es pas <abbr title="capable">cap</abbr> de faire
du XHTML ?
<dfn> est utilisée pour
indiquer que le contenu est une abréviation.
Exemple :
Le <dfn>xhtml</dfn> est un langage utilisé pour le Web.
<acronym>
est utilisée pour indiquer que le contenu est une abréviation composée les
initiales des mots..
Exemple :
<acronym title="eXtensible Markup Language" lang="en">XHTML</acronym>
est un langage pour le Web.
Mise en forme du document:
On structure le document:
Avec un titre: par la balise <title>
Puis il y a chaque sous titre avec les balises h1, h2, h3, h4, h5.
<h4
id="chapitre1">Chapitre 1</h4>
Enfin
il y a les paragraphes.
<p>..</p> permettent de définir un paragraphe.
En effet, La gestion des fins de lignes est laissée au logiciel de navigation. Comme on ne connaît pas lors de la rédaction les dimensions de la fenêtre dans laquelle les documents seront visionnés, il faut donc indiquer explicitement chaque nouveau paragraphe.
La balise <span> permet de délimiter une zone inline pour ensuite vous permettre d'en modifier l'allure avec les CSS.Attributs pouvant être employés : lang, dir, title.
La balise <div>: même chose que span mais en block. Attributs pouvant être employés : lang, dir, title.
Les listes:
La balise UL permet de définir une liste de lignes, l'attribut type= permet de choisir le symbole de début de ligne.
<UL>
</UL>
LI permet d'ajouter les lignes à la liste:
<LI>Ligne
1</LI>
Exemple
1 Liste avec disque plein (par défaut)
<UL>
<LI>Ligne 1</LI>
<LI>Ligne 2</LI>
<LI>Ligne 3</LI>
</UL>
Il existe des listes numérotées avec les balise li, lo. C'est la css qui détermine les numéros.
Enfin existe les listes de définition avec les balises dl, dt, et dd contenant la définition.
Les images:
Chargeons MonImage.gif.
<img
src="MonImage.gif"
alt="image des alpes" />
L'attribut scr= permet de donner le nom de l'image.
alt indique le texte à afficher si l'image ne peut pas être affichée.
Les liens:
Pour sauter vers un autre site:
<a
href="http://www.mypage.com" title=" Cours VB net">Site
LDF</a>
Les Tableaux:
Permet d'afficher des grilles.
<table
summary="Ce tableau présente des balises xHTML et leur type.">
<caption>Type de quelques balises xHTML</caption>
<thead>
<tr>
<th scope="col">Nom de la balise</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>div</td>
<td>block</td>
</tr>
<tr>
<td>span</td>
<td>inline</td>
</tr>
<tr>
<td>table</td>
<td>block</td>
</tr>
</tbody>
</table>
<table>
permet la création du tableau, son attribut caption indique le titre qui
sera affiché.
<thead> contient l'en-tête du tableau
<tfoot> contient le pied du tableau
<tbody> contient le corp du tableau..
<tr> permet d'ajouter une ligne.
<th> permet d'introduire une cellule titre d'une colonne (scope=col) ou d'une ligne (scope=row) traduisant la nature de son contenu.
Attribut:
<td> permet de créer une cellule.
La balise objet, Script:
<objet> permet d'inclure une applet Java, une bande son, de la vidéo de l'animation flash etc...
<script
type="text/javascript" src="script.js"></script>
Les Formulaires:
Créer une zone de saisie de texte, un label indiquant: Saisissez votre nom.
<label
for="nom">Saisissez votre nom :</label> <input
type="text" name="nom" id="nom" />
Les Cadres ou 'Frames':
Sont possibles, bien que non conformes.
Les Feuilles de style ou CSS.
C'est l'abréviation de Cascading Style Sheets ("Feuille de style"). Ce langage nous sert uniquement à présenter la page web. C'est en CSS que l'on dira : "Mes titres sont en vert et sont soulignés, mon texte est dans la police arial en noir.
La feuille de style ou CSS (Cascading Style Sheets) peut être placée dans head:
ou dans un fichier (d'extension .css) séparé, dans ce cas HEAD contient le lien
<head>
<link rel="stylesheet"
media="screen" type="text/css"
title="Design" href="design.css"
/>
</head>
Exemple de contenu de la feuille de style:
je veux que mes paragraphes soient écrits en bleu, avec une taille de 10
pixels.
p
{
color: blue;
font-size: 10px;
}
h1 { color : red } signifie que les
titres 1 seront en rouge.
h1 est le sélecteur puis entre {} se
trouve la déclaration qui comporte une propriété et une valeur.
h1, p { color : red } 'titre 1
et paragraphe en rouge.
p { margin-left : 1cm ; 'paragraphe en italique avec une marge de 1cm à gauche.
text-style : italic }
Les classes:
Création d'une classe 'rouge' dans la CSS
.rouge { color: red }
(tous ce qui est indiqué 'rouge sera en rouge)
Dans BODY, utilisation de la classe rouge:
<h2 class=rouge>Un titre rouge</H2>
Modifier la couleur des liens:
A:link { color :
fushia; }
A:visited { color : olive; }
A:active { color : green; }
Notion de Cascade:
Il peut y avoir dans HEAD les références de plusieurs feuilles de style, si les CSS touchent aux mêmes éléments , c'est la dernière CSS qui impose sa valeur.
Si une propriété n'est pas défini, c'est la valeur de l'élément parent qui est prises, ou la valeur de l'élément initial ou par défaut.
Création de nouvelles balises.
La création de nouvelle balise est permise, mais selon une méthode standardisée (les DTD) et héritée de XML.
Comment visualiser une page en xhtml?
A- Avec une éditeur de texte comme NotePad.
Dans ce cas on voit le code XHTML, les crochets, les balises...
B- Avec un navigateur WEB .
Comme Internet Explorer, FireFox.
On voit la page sans les balises avec l'aspect habituel des pages du Web.
|
|
 |
|
|