Les balises (X)HTML
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Les balises (X)HTML
Langage
Sémantique + Syntaxe = Communication
Document = <!DOCTYPE> + <html> + <head> + <body>
<balise attribut="valeur">Contenu</balise><balise/>
</balise>
<balise>Mot
Principes d’XHTML
• Une balise doit être fermée
• Les balises et attributs doivent s’écrire en minuscules
• La valeur d’un attribut doit s’écrire entre
apostrophes ou guillemets
• Un attribut doit avoir une valeur
• Les balises doivent être fermées dans le bon ordre
Bloc / en ligne
•Bloc : Peut contenir des bloc et des en ligne
• En ligne : Peut contenir des en ligne
bloc
en ligne
bloc en ligne
en ligne
+ des données !
Attributs globauxAttributs que l’on va pouvoir utiliser sur toutes les balises
•Core• id : nom• class : nom de classe(s)• style : CSS en ligne• title : tooltip — infobulle• i18n• lang : langue du contenu• dir : direction du texte• events• on* : événements
Structure
<html>Représente un document HTML.
bloc
Note : l’attribut xmlns="http://www.w3.org/1999/xhtml" est obligatoire.
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Mon document</title>
</head><body><h1>Bienvenue !</h1>
</body></html>
<head>bloc
Représente les méta-informations du document.
<head><meta http-equiv="Content-Type" content= "text/html; charset=UTF-8" /><title>Mon document</title>
</head>
Note : Il ne doit y avoir qu’une balise <head> et <body> par document.
<body>bloc
Note : ne peut pas contenir de en ligne directement.en ligne
Représente le corps du document.
<body><h1>Bienvenue !</h1><p>Ce site voue un culte à Friedrich Nietzsche.</p>
</body>
<div>bloc
Neutre.Permet de regrouper.
<div><p>Je voudrais donner, prodiguer ma sagesse…</p><p>Il me faudra pour cela descendre dans les…</p><p>Il me faudra comme toi décliner, ainsi que disent…</p>
</div>
<span>en ligne
Neutre.Permet de regrouper.
<p>Il me faudra comme toi<span><em>décliner<sup>1</sup></em><span>, ainsi que disent les hommes vers lesquels je veux descendre.</p>
<h1…6>bloc
Représentent des titres,permettent de hiérarchiser le document.
Note : ne peuvent pas contenir de blocbloc
<h1>Les aliments</h1><h2>Les légumes</h2><h3>La patate</h3><h3>La tomate</h3>
<h2>Les fruits</h2><h3>Le kiwi</h3><h3>La banane</h3>
Textes
<p>bloc
Représente un paragraphe de texte.
<p>Je voudrais donner, prodiguer ma sagesse, jusqu’au jour où les sages d’entre les hommes se sentiront heureux de leur folie, les pauvres heureux de leur richesse.</p>
Note : ne peut pas contenir de blocbloc
<a>en ligne
Représente un lien hypertexte.
<a href="http://google.fr">Un lien absolu</a><a href="/news/">Un lien relatif</a>
<a href="#moteur-de-recherche">Un lien interne</a>
Attributs :• href : adresse du lien• hreflang : langue de la page ou section ciblée
Note : ne peut pas contenir de <a>
<em>/<strong>en ligne
Mise en exergue (ajoute de l’importance).<strong> est plus important que <em>
<p>Attention, c’est <em>important</em> !</p>
<p>Faites <strong>très</strong> attention !</p>
<abbr>/<acronym>Représente une abréviation (HTML, SNCF)
Représente un acronyme (Laser, Sida).
<p>Aujourd’hui, c’est cours de <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<p>Attention au <acronym title="RAdio Detection And Ranging">Radar</acronym> !</p>
en ligne
<blockquote><q>/<cite>en ligne
bloc
Représente une citation.
Note : <blockquote> ne peut pas contenir de en ligne directement.en ligne
<blockquote><p>Je voudrais donner, prodiguer ma sagesse, jusqu’au jour où les sages d’entre les hommes se sentiront heureux de leur folie, les pauvres heureux de leur richesse.</p>
</blockquote>
<p>Hamlet commença son monologue : <q>Être ou ne pas être ?</q></p>
<sup>/<sub>Mise en exposant.Mise en indice.
<p>C’était ma 1<sup>ère<sup> fois…</p>
<p>J’aime l’<abbr title="Eau">H<sub>2</sub>O</abbr>.</p>
en ligne
<ins>/<del>en ligne
Représente un texte inséré.Représente un texte supprimé.
<p>Jean-Claude Vandamme est un <del>philosophe<del> <ins>acteur<ins> d’origine belge.</p>
<pre>bloc
Représente du texte pré-formaté.
Note : ne peut pas contenir de <sup>, <sub>, <img/>, <object>
<pre> (__) (oo) /-------\/ / | ||* ||----|| ~~ ~~</pre>
<code>/<var><kbd>/<samp>
en ligne
Représente du contenu lié à l’informatique.
<pre><code><var>$x</var> = 3;echo <var>$x</var>; // Affiche <samp>3</samp>
</code></pre>
<p>Tapez <kbd>1</kbd> pour voter pour Cunégonde, et <kbd>2</kbd> pour voter pour Pierre-Alfred.</p>
Images
<img/>en ligne
Représente une image.
Attributs obligatoires :• src : adresse du fichier• alt : texte alternatif
<img src="images/chatons.jpg" alt="De mignons lolcats" />
<map>bloc
Représente des zones pour une image.
<map id="monde"><area shape="rect" coords="0,0,100,90" href="france.html" alt="France" />
</map>
Attributs obligatoires :• id : nom de l’ensemble de zones
<area/>en ligne
Représente une zone.
<map id="monde"><area shape="rect" coords="0,0,100,90" href="france.html" alt="France" />
</map>
Attributs obligatoires :• alt : texte alternatif
Attributs :• shape : forme de la zone• coords : coordonnées de la zone• href : adresse du lien
Listes
<ul>/<ol>/<li>bloc
Représente une liste.
<p>Liste de courses :</p><ul><li>Pizza</li><li>Patates</li><li>Boissons<ul><li>Bière</li><li>Vodka</li>
</ul></li>
</ul>
<p>À faire aujourd’hui :</p><ol><li>Sortir le chien</li><li>Manger</li><li>Cours HTML<ul><li>Finir le cours !</li><li>Donner le cours</li>
</ul></li>
</ol>
Note : <ul> et <ol> ne peuvent contenir que des <li> directement.
<dl>/<dt>/<dd>bloc
Représente une liste de définitions.
<dl><dt>Le kiwi</dt><dd>C’est un fruit, mais aussi un animal</dd><dt>Le litchi</dt><dd>Un excellent fruit exotique</dd>
</dl>
Note : <dt> ne peut pas contenir de blocbloc
Formulaires
<form>bloc
Représente un formulaire.
<form method="post" action="inscription.php">…
</form>
Attributs obligatoires :• action : adresse de soumission
Attributs :• method : type de requête• enctype : content-type pour la soumission
Note : ne doit pas contenir d’autres <form>.
<input/>en ligne
Représente un champ de formulaire.
Attributs :• type : type de champ• name : nom de la donnée (utilisé pour traiter le formulaire)• value : valeur du champ• maxlength : taille maximale de la saisie (en caractères)
• checked : coché ?• disabled : désactivé ?• readonly : en lecture seule ?
<input/>en ligne
Représente un champ de formulaire.
<input type="text" name="prenom" /><input type="password" name="mot-de-passe" />
<input type="checkbox" name="accepte" /><input type="radio" name="sexe" />
<input type="file" name="avatar" />
<input type="submit" /><input type="reset" /><input type="button" value="Bouton inutile" />
<input type="hidden" name="sid" value="123" />
Attributs (<select>) :• name : nom de la donnée (utilisé pour traiter le formulaire)• multiple : permet de choisir plusieurs options• disabled : désactivé ?
Attributs (<optgroup>) :• label : nom du groupe d’options• disabled : désactivé ?
Attributs (<option>) :• value : valeur du champ• selected : sélectionné ?• disabled : désactivé ?
<select><optgroup>/<option>
en ligne
Représente une liste déroulante.
<select><optgroup>/<option>
en ligne
Représente une liste déroulante.
<select name="pays"><option value="ca">Canada</option><option value="jp" selected="selected">Japon</option><optgroup label="Europe"><option value="fr">France</option><option value="de">Allemagne</option>
</optgroup></select>
<textarea>en ligne
Représente un champ de saisie de texte.
Attributs obligatoires :• rows : nombre de lignes• cols : nombre de colonnes
Attributs :• name : nom de la donnée (utilisé pour traiter le formulaire)• disabled : désactivé ?
<textarea name="description" rows="3" cols="80">…</textarea>
Note : <textarea> ne peut contenir que du texte.
<button>en ligne
Représente un bouton.
Attributs :• type : type de bouton• disabled : désactivé ?
<button type="submit">Envoyer</button><button type="reset">Recommencer</button><button type="button">Bouton inutile</button>
Note : ne doit pas contenir <input>, <select>, <textarea>, <label>, <button>, <form>,
<fieldset>, <iframe>.
<label>en ligne
Représente une étiquette associée à un champ.
Attributs :• for : cible de l’étiquette
<label for="email">Adresse mail :</label><input type="text" id="email" name= "mail" />
Note : ne peut pas contenir d’autres <label>.
<fieldset>bloc
Représente une section de formulaire.
Note : doit contenir <legend> directement.
<fieldset><legend>Informations personnelles</legend><input type="text" id="email" name= "mail" />
</fieldset>
<legend>en ligne
Représente un titre de section de formulaire.
<fieldset><legend>Informations personnelles</legend><input type="text" id="email" name= "mail" />
</fieldset>
Tableaux
<table>bloc
Représente un tableau de données.
Attributs :• summary : résumé du tableau
<table summary="…"><thead><tr><th>Nom<th><th>Prénom</th>
</tr></thead>…
</table>
<thead>/<tfoot><tbody>
bloc
Représente des sections de tableau.
<table summary="…"><thead><tr><th>Nom<th><th>Prénom</th>
</tr></thead><tbody><tr><td>Abitbol</td><td>Georges</td>
</tr></tbody>
</table>
<tfoot>…</tfoot>
Attribut (<th>) :• scope : spécifie les données qui doivent être associées à ce <th> (col ou row)
Attributs (toutes) :• rowspan : nombre de cellules à fusionner sur la ligne• colspan : nombre de cellules à fusionner sur la colonne
<tr><th>/<td>
bloc
Représente une ligne de tableau.Représente une cellule d’en-tête.
Représente une cellule.
<caption>en ligne
Représente une légende de tableau.
Note : doit se trouver directement après <table>.
<table><caption>Tableau très intéressant</caption>…
</table>
Métas
<title>en ligne
Représente le titre du document.
<title>La page web de ma vie</title>
<meta/>en ligne
Représente une méta-information du document.
Attribut obligatoire :• content : l’information
Attributs :• name : nom de la méta-information• http-equiv : nom de l’en-tête HTTP
<meta name="auteur" content="Nicolas Le Gall" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link/>en ligne
Représente une relation entre documents.
Attributs :• type : type MIME du contenu• href : adresse du document• media : support pour lequel la relation est faite
<link rel="stylesheet" type="text/css" href="…" media="screen" />
<base/>en ligne
Définis l’adresse de base à utiliser pour les adresses relatives.
Attribut obligatoire :• href : adresse de base
<base href="http://example.org/site/" />
<b>, <i>, <u>, <s>, <strike>, <big>, <small>, <tt>,<center>,
<basefont>, <font>,<frame>, <frameset>, <noframes>,
<applet>,<noscript>
(<br/>)
Je vous déconseille…
Il en reste…
<script>, <style>,<object>, <param/>,
<iframe>,<address>, <hr/>, <bdo>, <dfn>
<!-- Commentaire -->
Commentaires
<!--<ul> <li>…</li> <li>…</li></ul>-->
Related Documents
