Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
projets:ecole:web:initiation_xhtml [Le 22/12/2006, 17:35] _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. | 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. | ||
| Ligne 30: | 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).\\ | 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 />'' | Elle ressemble alors a une balise ouvrante fermée à la fin. exemple : ''<br />'' | ||
| + | |||
| ==== Attributs ==== | ==== Attributs ==== | ||
| - | Les balises peuvent prendre des atributs.\\ | + | Les balises peuvent prendre des attributs.\\ |
| Ces attributs auront une valeur associée.\\ | Ces attributs auront une valeur associée.\\ | ||
| La syntaxe est : | La syntaxe est : | ||
| Ligne 221: | Ligne 224: | ||
| 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. | 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. | ||
| + | |||
| + | |||
| + | |||
| + | |||
| Ligne 274: | Ligne 281: | ||
| 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. | 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 fat spécifier l'attribut ''action'' au formulaire. Par soucis de lisibilité, on spécifiera aussi l'attribut ''method''. | + | 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.\\ | L'attribut ''action'' définit la cible où seront envoyées les données du formulaire.\\ | ||
| Ligne 399: | Ligne 406: | ||
| </code> | </code> | ||
| == Image == | == Image == | ||
| - | Pour insérer une image dans le document, on utilise la balise ''<img />''. Ces 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étiseur vocaux...) | + | 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> | <code> | ||
| <img src="mon_image.png" alt="texte alternatif" /> | <img src="mon_image.png" alt="texte alternatif" /> | ||
| Ligne 411: | Ligne 418: | ||
| Ici on pourrait donc avoir une classe "surligne" qui ajouterait une couleur de fond au texte en CSS... | Ici on pourrait donc avoir une classe "surligne" qui ajouterait une couleur de fond au texte en CSS... | ||
| === Éléments de formulaires === | === É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]]// | ||