Différences

Ci-dessous, les différences entre deux révisions de la page.

--- projets:ecole:web:initiation_xhtml [Le 16/12/2006, 12:50]
_Enchained
+++ projets:ecole:web:initiation_xhtml [Le 23/02/2021, 08:06] (Version actuelle)
Amiralgaby tag n'étant pas utilisé ailleurs supprimé
@@ Ligne 1: / Ligne 1: @@
-====== Initiation au XHTML ======
+{{tag>programmation internet}}
->page en cours d'élaboration
+----
+====== Initiation au XHTML ======
 Cette page résulte de la session de cours qui s'est déroulé le 14.12.06 sur le chan #ubuntu-fr-classroom du réseau Freenode.
 Ce cours a été mené par [[utilisateurs:_Enchained]].
 ===== Présentation =====
-Le XHTML est un langage de balisage servant à créer des pages web. Il est la dernière norme proposée par le [[http://w3.org|w3c]].
+Le XHTML est un langage de balisage servant à créer des pages web. Il est la dernière norme proposée par le [[http://www.w3.org|w3c]].
 La version 1.0 que l'on va utiliser ici est en fait une simple reformulation du langage HTML avec une syntaxe XML.
 De ce fait, il sert de langage de transition entre le HTML et le XML. Il offre donc la possibilité de créer une page qui sera lue à la fois par un ancien navigateur ne comprenant que le HTML et les nouveaux navigateurs qui interprètent le XML.
@@ Ligne 29: / Ligne 32: @@
 Certaines balises n'ont qu'un seul élément. On pourrait les qualifier de balises //simples// ou //auto-fermantes// (Note: ces termes sont personnels).\\
 Elle ressemble alors a une balise ouvrante fermée à la fin. exemple : ''<br />''
 ==== Attributs ====
-Les balises peuvent prendre des atributs.\\
+Les balises peuvent prendre des attributs.\\
 Ces attributs auront une valeur associée.\\
 La syntaxe est :
@@ Ligne 161: / Ligne 165: @@
 La DTD //Strict//, elle, vise à réaliser un site web en séparant contenu (structure) et sa mise en page. C'est la façon la plus rigoureuse de faire un site web et donc celle qu'on choisira. L'intérêt de la séparation du contenu et de la mise en page est que tout le design sera géré via un seul fichier (une feuille de style CSS), et donc on pourra changer le design d'un site entier en modifiant un seul fichier.
@@ Ligne 178: / Ligne 183: @@
 <head>
   <title>titre de la page</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="Content-Type" content="text/xhtml+xml; charset=utf-8" />
 </head>
 </code>
@@ Ligne 185: / Ligne 190: @@
 L'élément ''<body>'' contient le contenu affiché (corps du document).
 ===== Modèle de page =====
@@ Ligne 190: / Ligne 199: @@
 Voici donc un modèle de page XHTML dans lequel il ne reste plus qu'à insérer le contenu :
 <code>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="Content-Type" content="text/xhtml+xml; charset=utf-8" />
   </head>
   <body>
-    contenu du document
   </body>
 </html>
 </code>
+===== Les balises =====
+==== Types de balises ====
+Il existe deux types de balises. Le type aura un impact sur le comportement, le positionnement et l'affichage de l'élément.
+=== block ===
+Les éléments de types "block" sont des éléments en rapport avec la **structure générale** du document et qui marquent le "plan" de la page comme les titres, paragraphes, blocs de citation, listes, ...
+Ils sont placés par défaut les uns en dessous des autres dans le navigateur et forment un bloc. Ils peuvent prendre des dimensions (largeur, hauteur, profondeur) et peuvent être positionnés (avec les CSS) pour sortir du flux du document. Ils peuvent contenir d'autres éléments blocs (eux aussi positionnés et dimensionnés) et/ou des éléments inline.
+=== inline ===
+Les éléments "inline" ("en ligne" ou encore "au fil du texte") sont utilisés pour **enrichir localement** des portions de texte : liens hypertextes, emphases et renforcement, ou tout autre effet possible sur du texte...
+Par défaut les éléments de type inline sont placés "dans le flux", c'est à dire à la suite du texte sans en perturber la disposition. Ils ont aussi des marges internes et externes nulles.
+==== Principales balises ====
+=== Balises Block ===
+== Titres ==
+On peut utiliser six niveaux hiérarchiques de titres.
+On utilise la balise ''<hX> </hX>'', où ''X'' est un nombre entre 1 et 6, 1 étant le niveau le plus important :
+<code>
+<h1>Titre le plus important</h1>
+<h2>Titre moins important</h2>
+<h3>Titre encore moins important</h3>
+<h4>Titre encore moins important</h4>
+<h5>Titre encore moins important</h5>
+<h6>Titre le moins important</h6>
+</code>
+Cette balise déroge à la règle des balises block puisqu'elle ne peut pas contenir un autre élément block.
+== Paragraphe ==
+La balise ''<p> </p>'' délimite un paragraphe de texte.\\
+Entre deux paragraphes, le navigateur insère en général un espace (marge extérieure par défaut). L'erreur la plus courante est de vouloir augmenter l'espace entre 2 paragraphes en y insérant des balises de retour à la ligne ''<br />'', ce qui est sémantiquement incorrect. La marge extérieure des paragraphes se modifie via les CSS.
+<code>
+<p>un paragraphe de texte...</p>
+<p>un autre paragraphe</p>
+</code>
+== Bloc de citation ==
+La balise ''<blockquote> </blockquote>'', comme son nom l'indique (pour les anglophones), spécifie un bloc de citation. Le texte inséré dans un bloc doit être contenu dans un/des paragraphe(s).
+<code>
+<blockquote>
+  <p>premier paragraphe de la citation</p>
+  <p>deuxième paragraphe de la citation</p>
+</blockquote>
+</code>
+== Div (conteneur) ==
+La balise ''<div> </div>'' est l'exception sémantique du XHTML, puisqu'elle n'a **pas de sens**. C'est un conteneur qui sert à regrouper d'autres balises block pour structurer le document. Utile avec l'utilisation de CSS, mais attention à ne pas tomber dans l'excès et à mettre des ''div'' partout. Pensez à utiliser les bonnes balises, en fonction de leur sens (sémantique).
+<code>
+<div>
+  <p>...</p>
+  <div>
+    <p>...</p>
+  </div>
+  ...
+</div>
+</code>
+== Formulaires ==
+Les formulaires permettent au visiteur de communiquer avec votre page, ou vous même. Ils permettent au visiteur d'entrer des données qui seront alors traitées par la suite.
+La balise ''<form> </form>'' délimite un formulaire. Au minimum, il faut spécifier l'attribut ''action'' au formulaire. Par soucis de lisibilité, on spécifiera aussi l'attribut ''method''.
+L'attribut ''action'' définit la cible où seront envoyées les données du formulaire.\\
+Elle peut être l'adresse d'une page php qui traitera les données, une adresse email de la forme ''mailto:adresse@email.com'' ou vide (La page s'enverra elle-même les données).\\
+//Note : Si vous utilisez l'envoi à une adresse email sans script de traitement, il faudra spécifier en plus l'attribut ''enctype="text/plain"'' dans la balise ''form''//.
+L'attribut ''method'' peut être ''get'' ou ''post''.\\
+Si en envoie les données en GET, les données du formulaire sont transmises dans l'url. C'est à dire, si on envoie une donnée ''nom'' contenant ''truc'', à la page ''traitement.php'' (page spécifiée dans action), on arrivera sur la page ayant pour URL : ''traitement.php?nom=truc''.\\
+Si on envoie les données en POST, on ne voit pas (sauf avec des outils spécifiques) les données envoyées. C'est donc déjà plus approprié pour envoyer un mot de passe par exemple... imaginez une url de la forme page.php?motDePasse=truc ...
+**Exemple**
+<code>
+<form action="mailto:adresse@email.com" method="post" enctype="text/plain">
+...
+</form>
+</code>
+<code>
+<form action="traitement.php" method="post">
+...
+</form>
+</code>
+<code>
+<form action="page.php" method="get">
+...
+</form>
+</code>
+== Tableaux ==
+La balise ''<table> </table>'' permet d'insérer des tableaux dans les pages. On utilise alors à l'intérieur de ''table'', les balises ''<tr> </tr>'' pour délimiter les lignes, et à l'intéreur de ces lignes, les balises ''<td> </td>'' pour délimiter les cellules ou ''<th> </th>'' pour les cellules d'en-têtes. De plus, on peut ajouter une légende au tableau avec la balise ''<caption> </caption>''.
+<code>
+<table>
+  <caption>Mon tableau</caption>
+  <tr>
+    <th>colonne 1</th>
+    <th>colonne 2</th>
+    <th>colonne 3</th>
+  </tr>
+  <tr>
+    <td>cellule 1-1</td>
+    <td>cellule 1-2</td>
+    <td>cellule 1-3</td>
+  </tr>
+  <tr>
+    <th>cellule 2-1</th>
+    <th>cellule 2-2</th>
+    <th>cellule 2-3</th>
+  </tr>
+</table>
+</code>
+== Listes à puces (ordonnées/non ordonnées) ==
+Il existe deux types de listes à puce : liste ordonnée et non ordonnée.
+La liste ordonnée est délimitée par la balise ''<ol> </ol>'' (''ol'' pour //ordered list//) et la liste non ordonnée par la balise ''<ul> </ul>'' (''ul'' pour //unordered list//).
+Dans les deux cas, un élément (item) de liste est délimité par la balise ''<li> </li>'' (''li'' pour //list item//).
+Un élément de liste peut contenir une autre liste à puce et donc créer ainsi des listes imbriquées.
+**Liste non ordonnée (Liste à puces)**
+<code>
+<ul>
+  <li>élément de liste</li>
+  <li>élément de liste</li>
+  <li>élément de liste</li>
+</ul>
+</code>
+**Liste ordonnée (Liste à numéros)**
+<code>
+<ol>
+  <li>élément de liste</li>
+  <li>élément de liste</li>
+  <li>élément de liste</li>
+</ol>
+</code>
+**Listes imbriquées**
+<code>
+<ol>
+  <li>élément de liste</li>
+  <li>élément de liste</li>
+  <li>
+    <ul>
+      <li>élément de liste</li>
+      <li>élément de liste</li>
+      <li>élément de liste</li>
+    </ul>
+  </li>
+  <li>élément de liste</li>
+</ol>
+</code>
+=== Balises inline ===
+== Liens hypertextes ==
+La balise ''<a> </a>'' permet de transformer du texte en un lien hypertxte.
+L'attribut ''href'' est utilisé pour spécifier la cible du lien.
+<code>
+<p>Visitez le <a href="http://doc.ubuntu-fr.org">wiki Ubuntu-fr</a> pour en savoir plus sur votre distribution préférée !</p>
+</code>
+**Cas des ancres**
+Lorsque vous affectez un **id** à une balise (par exemple, ''<ul id="menu">''), vous pouvez emmener le visiteur directement à cette "ancre" par un lien de la forme ''page.html#ancre'' ou simplement ''#ancre'' si l'ancre est sur la même page.
+<code>
+...
+<ul id="menu>
+  ...
+</ul>
+...
+<p><a href="#menu">retour au menu</a></p>
+...
+</code>
+== Emphase simple ==
+Pour //mettre en valeur// du texte, on utilise la balise ''<em> </em>''. Par défaut la plupart des navigateurs graphiques afficheront ce texte en italique, mais l'apparence du texte mis en emphase peut être modifiée via les CSS (comme pour toutes les balises)...
+<code>
+<p><em>Ce texte</em> est plus important que le reste</p>
+</code>
+== Emphase forte ==
+Pour insister plus fortement sur du texte, on utilisera ''<strong> </strong>'' qui est plus fort que ''em''. Par défaut les navigateurs graphiques représenteront ce texte en gras.
+<code>
+<p><em>Ce texte</em> est plus important que le reste, mais <strong>celui ci</strong> l'est encore plus !</p>
+</code>
+== Citation ==
+La balise ''<q> </q>'' sert à insérer une citation. Firefox par exemple, insèrera des guillemets typographiques autour de ce texte.
+<code>
+<p>
+  <q>Le voyage est court. Essayons de le faire en première classe.</q> (de <em>Philippe Noiret</em>)
+</p>
+</code>
+== Image ==
+Pour insérer une image dans le document, on utilise la balise ''<img />''. Ses attributs minimaux sont ''src'' qui spécifie le chemin de l'image et ''alt'' qui donne un texte alternatif, au cas où l'image ne pourrait être affichée (raisons techniques, navigateurs en mode texte, ou synthétiseurs vocaux...)
+<code>
+<img src="mon_image.png" alt="texte alternatif" />
+</code>
+== Span ==
+Tout comme la balise ''div'' de type block, il existe une balise n'ayant aucun sens dans les balises inline : ''<span> </span>''.
+Cette balise peut servir surtout pour appliquer ses propres classes en CSS.
+<code>
+<p>Du texte et <span class="surligne">un texte spécial surligné</span> par exemple...</p>
+</code>
+Ici on pourrait donc avoir une classe "surligne" qui ajouterait une couleur de fond au texte en CSS...
+=== Éléments de formulaires ===
+Tous ces éléments se placent à l'intérieur de la balise ''<form> </form>''.
+== Champ texte ==
+<code><input type="text" name="le_champ" value="texte par défaut" /></code>
+L'attribut ''type'' spécifie qu'il s'agit d'un champ texte. L'attribut ''name'' est le nom du champ, qui sera utilisé pour récupérer les données entrées (avec du php, javascript etc). L'attribut ''value'' est facultatif et sert à spécifier un texte prédéfini dans le champ.
+== Champ de mot de passe ==
+<code><input type="password" name="pass" /></code>
+Le champ pour mot de passe est le même que celui de type texte, mais avec l'attribut ''type="password"'' et il affichera des **** au lieu du texte lorsque l'utilisateur entre les données dedans. Firefox par exemple, reconnait ce champ et vous propose d'enregistrer le mot de passe...
+== Champ caché ==
+<code><input type="hidden" name="champ_cache" value="donnée à envoyer" /></code>
+Les champs cachés permettent d'envoyer avec le formulaire des données invisibles pour le visiteur, comme des informations complémentaires inutiles pour le visiteur mais utiles au traitement des données pour vous...
+== Boutons radio ==
+<code>
+<input type="radio" name="choix" value="1" checked="checked" /> choix 1
+<input type="radio" name="choix" value="2" /> choix 2
+<input type="radio" name="choix" value="3" /> choix 3
+</code>
+Ce sont les boutons ronds que l'on peut cocher. Cocher un bouton décoche automatiquement les autres boutons du même "groupe". On spécifie le même "name" pour les boutons du même groupe pour rendre ce comportement possible.\\
+Le texte mis à coté du bouton et la valeur envoyée ne sont pas forcément les même. Le texte affiché est utile pour le visiteur et la valeur vous est utile pour le traitement du formulaire.\\
+L'attribut ''checked="checked"'' peut être ajouté pour cocher un bouton par défaut.
+Ils servent à donner une réponse unique parmi plusieurs choix (utile pour faire des quizz par exemple...)
+== Cases à cocher ==
+<code>
+<p>De quel moyen de transport avez-vous peur ?</p>
+<input type="checkbox" name="choix" value="voiture" /> La voiture
+<input type="checkbox" name="choix" value="bus" /> Le bus
+<input type="checkbox" name="choix" value="avion" /> L'avion
+<input type="checkbox" name="choix" value="train" /> Le train
+</code>
+Elles ressemblent aux boutons radios dans la syntaxe, mais ici, plusieurs cases peuvent être cochées simultanément. Tout comme les boutons radios, on peut ajouter ''checked="checked"'' pour cocher une case par défaut.
+== Liste déroulante ==
+<code>
+<select name="choix">
+  <optgroup label="première catégorie">
+    <option value="1">choix 1</option>
+    <option value="2">choix 2</option>
+  </optgroup>
+  <optgroup label="deuxième catégorie">
+    <option value="3">choix 3</option>
+    <option value="4">choix 4</option>
+    <option value="5">choix 5</option>
+  </optgroup>
+</select>
+</code>
+Ceci créera une liste déroulante avec cinq entrées réparties en deux catégories.\\
+L'attribut ''name'' de la balise ''select'' est le nom qu isera utilisé pour l'envoi de l'entrée sélectionnée. La valeur envoyée sera celle de l'attribut ''value'' de la balise ''option'' sélectionnée par l'utilisateur.\\
+//Note : Les optgroup sont complètement optionnels est servent à séparer les entrées de la liste en plusieurs sous-groupes. Par exemple pour une liste des départements français séparés en régions...//
+== Bouton ==
+<code><input type="button" name="le_bouton" value="appuyez ici" /></code>
+Ceci crée un simple bouton avec le texte "appuyez ici" inscrit. Libre à vous, par la suite, d'y associer des fonctions javascript par exemple...
+== Bouton d'initialisation ==
+<code><input type="reset" value="tout effacer" /></code>
+Bouton servant à remettre à zéro le formulaire avec ici, le texte "tout effacer" inscrit.
+== Bouton d'envoi ==
+<code><input type="submit" value="OK" /></code>
+Lorsque l'on clique sur ce bouton, le contenu du formulaire est envoyé en fonction des paramètres ''action'' et ''method'' passés à la balise ''form''.
+----
+//Contributeurs : [[:utilisateurs:_Enchained]]//