XHTML-CSS Les balises, attributs et éléments

Cours XHTML-CSS Les balises, attributs et éléments, tutoriel & guide de travaux pratiques en pdf.

L’ESSENTIEL DU XHTML

Les balises, attributs et éléments

 Les balises(ou marqueurs ou tag)
En effet dans une page XHTML, en plus du texte, vous allez trouver un autre élément au milieu : ce sont les balises.
Une balise commence par un chevron ouvrant « < » et se termine par un chevron fermant « > ». Par exemple :
<nom-de-la-balise>
Les balises sont invisibles pour le visiteur, elles servent de marqueurs pour indiquer quelque chose(donner une instruction) au navigateur. Par exemple, une balise permet d’indiquer que tel texte est le titre de votre page, cet autre texte est une citation etc etc…
Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d’autres au contraire sont toutes seules.
• Les balises existant par paire : ce sont les plus courantes. On écrit la première balise, on tape du texte, puis on « ferme » la balise en la réécrivant avec un slash devant « / ». Par exemple :
<balise-paire>mon texte</balise-paire>
• Les balises seules : elles sont un peu plus rares, mais il y en a quand même. On s’en sert en général pour insérer un élément dans une page.
Ce type de balise se termine toujours par un slash « / », mais cette fois le slash se trouve à la fin de la balise.
<balise-seule />
 Les attributs (propriétés, caractéristiques)
Les attributs sont un moyen de donner des précisions sur une balise. On peut trouver des attributs sur les deux types de balises (par paire ou seule). La syntaxe est : non-attribut = “valeur-attribut”
Par exemple, prenons la balise seule <image />. C’est bien beau de dire qu’on insère une image, mais encore faut-il indiquer laquelle. On fera ça avec un attribut :
<image nom= »soleil.jpg » />
Ici, l’attribut est « nom », et il a pour valeur « soleil.jpg ». Cela indique que l’image que l’on veut insérer s’appelle « soleil.jpg » tout simplement.
Dans le cas d’une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante.
 Les éléments
Un élément est l’ensemble composé d’une balise ouvrante, d’un contenu (du texte et/ou d’autres balises), et de la balise fermante correspondante. Voici un exemple faisant intervenir la balise , qui permet de renforcer une partie de texte :
Il ne faut jamais oublier de fermer les balises!
Dans cet exemple, nous distinguons :
• l’élément jamais ;
• le contenu d’élément « jamais » ;
• la balise ouvrante ;
• la balise fermante correspondante .
La bonne compréhension de la structure des éléments est indispensable. Elle aura de nombreuses applications par la suite, mais c’est paradoxalement un sujet rarement connu des webmasters. Les éléments HTML ont chacun une structure particulière. Il en existe deux familles
: les éléments de type bloc et les éléments au fil du texte, dits en ligne (ou inline). Ce type dictera tous leurs comportements : positionnement, affichage, etc.
La distinction fondamentale est assez claire. Les blocs distinguent des parties entières comme des titres, des paragraphes, des listes, des citations, etc. Les éléments en ligne sont prévus pour enrichir localement des portions de texte (lien hypertexte, emphase, renforcement, etc.).
 Les règles se syntaxe (à retenir)
Avant de terminer cette petite partie théorique, je vais vous donner ici quelques règles pas bien compliquées qu’il faudra retenir si vous voulez faire une parfaite petite page web :
• Les balises existent soit par paires (<balise> </balise>) ; soit toutes seules, mais dans ce cas il faut mettre un / à la fin de la balise (ex. : <balise />)
• Les noms des balises et attributs s’écrivent toujours en minuscules
• Les valeurs des attributs peuvent contenir des majuscules
• S’il y a des attributs dans une balise fonctionnant par paire, on ne les met que dans la balise ouvrante.

Notre première page web

Nous allons créer une première page web. Pour ce faire :
 Créer un dossier (Clic droit +Nouveau+Dossier) n’importe où sur le disque dur (ex : monsite)
 Ouvrer une page Bloc-notes
 Enregistrer (Fichier + Enregistrer Sous) cette page sous le nom essai.html dans le dossier que vous venez de créer
Structure générale d’une page HTML
<html>
<head>
<title>Titre de la page < /title>
</head>
<body>
(Contenu)
</body>
Début de la page html
Entête de la page, contenant des informations importantes pour les navigateurs et moteurs de recherche
Le corps qui contient tous les éléments qui s’affichent dans la fenêtre du navigateur
</html>
 Indiquons la grammaire au navigateur
Fin de la page html
Il existe plusieurs versions du langage HTML, cohabitant sur le Web. On indiquera aux navigateurs la version retenue pour un document donné en préfaçant celui-ci d’un doctype accompagné d’une DTD, ou « définition de type de document ». C’est cette DTD qui définit la grammaire précise du document. Ce doctype est un code spécifique placé au tout début d’un document HTML. Il précise au navigateur le langage retenu pour l’écriture de la page : HTML ou XHTML, en version stricte ou transitionnelle, etc. C’est non seulement un moyen de s’assurer que le document sera bien interprété par les navigateurs, mais aussi un élément indispensable à sa validation par l’organisme de référence, le W3C. XHTML (et HTML) existent en deux versions principales :
• Transitional (transitionnelle), version prévue pour réaliser la transition vers la version strict, est par conséquent beaucoup plus permissive que cette dernière.
• Strict est la version rigoureuse que nous utiliserons. Beaucoup d’éléments ou d’attributs y sont devenus obsolètes (et interdits). Il s’agit notamment des balises et propriétés de mise en forme (<center>, , « align »…). Le but est de pousser les développeurs à utiliser le CSS pour la présentation et de limiter le document HTML au seul contenu.
On trouve encore d’autres doctypes, proposant par exemple les cadres (frames), mais nous les éviterons car ces techniques sont à déconseiller et entravent l’accessibilité des sites web.
À l’heure actuelle, il existe 7 doctypes, tous aussi valides et conformes selon le W3C : HTML 4.01 frameset, HTML 4.01 transitional, HTML 4.01 strict, XHTML 1.0 frameset, XHTML 1.0 transitional, XHTML 1.0 strict et XHTML 1.1.
Le concepteur web est libre de choisir son doctype selon ses besoins et convictions.
Par exemple, les versions frameset autorisent les cadres et les versions transitionnelles permettent d’insérer des éléments de mise en page au sein du code HTML.
Dans ce cours nous ferons du xhtml strict d’où le doctype suivant :
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN »
« http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
 Indiquer la langue et l’encodage du document : lang et charset
Les normes du Web imposent d’autres déclarations obligatoires dans l’en-tête de tout document XHTML : les spécifications de langue et d’encodage. Survolons-les rapidement.
La langue du document est précisée dans la balise <html> comme suit :
<!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 »>
L’encodage est spécifié dans l’espace délimité par les balises <head> et </head>, à l’aide de l’attribut charset. Par exemple :
<!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 évocateur</title>
<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-15″ /> </head>
L’encodage du document indique aux navigateurs les caractères potentiellement utilisés dans le texte de la page. Pour un document en français, on pourra choisir entre :
• iso-8859-1 qui est l’encodage classique, presque complet pour les langues de l’Europe occidentale ;
• iso-8859-15 qui complète le précédent par quelques caractères supplémentaires, tels que le signe € ou le caractère oe ;
• utf-8 qui permet d’utiliser la plupart des caractères de la majorité des langues du monde : c’est un code de l’Unicode.
 Les commentaires
Les commentaires sont des informations que vous écrivez pour vous. Les commentaires n’apparaissent pas aux yeux des visiteurs. Vous pouvez par exemple utiliser les commentaires pour marquer des repères si votre page XHTML est très grosse, ou pour vous servir de rappel.
Un commentaire est une balise un peu spéciale commençant par <!– et terminant par –>
 Premier Test
Saissisez ce code dans votre page essa.html sous Bloc-notes et faites Ctrl+S pour enregistrer
<!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 » > <head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″ />
</head>
<body>
< !—Ceci va s’afficher dans la fenêtre du navigateur –>
Bonjour Tout le monde. Je suis très heureux d’avoir réussi ma première page web </body>
</html>
Allez voir dans votre répertoire (dossier) de travail, vous apercevez le même fichier essai.html avec l’icône de votre navigateur par défaut, Double-cliquer sur ce fichier et voyez le résultat dans la fenêtre de votre navigateur.

Les principales balises HTML standards

Depuis la naissance du HTML, le W3C a créé de nombreuses balises. Au fur et à mesure des versions successives de HTML (et des conflits d’intérêt entre les navigateurs), beaucoup d’éléments ont été déclarés « dépréciés » (traduction fréquente mais incorrecte du faux-ami deprecated, qui indique plutôt une désapprobation), ou obsolètes. HTML 4 (XHTML 1) compte actuellement une trentaine de balises de type bloc et autant de balises en ligne.
Nous n’aborderons ici que les balises principales et les plus utiles. Compte tenu des objectifs de cet ouvrage, nous passerons sous silence les balises obsolètes, créées originellement.