Les balises HTML

54
Les balises (X)HTML

description

Cours sur les balises HTML.

Transcript of Les balises HTML

Page 1: Les balises HTML

Les balises (X)HTML

Page 2: Les balises HTML

Langage

Sémantique + Syntaxe = Communication

Document = <!DOCTYPE> + <html> + <head> + <body>

<balise attribut="valeur">Contenu</balise><balise/>

</balise>

<balise>Mot

Page 3: Les balises HTML

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

Page 4: Les balises HTML

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 !

Page 5: Les balises HTML

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

Page 6: Les balises HTML

Structure

Page 7: Les balises HTML

<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>

Page 8: Les balises 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.

Page 9: Les balises HTML

<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>

Page 10: Les balises HTML

<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>

Page 11: Les balises HTML

<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>

Page 12: Les balises HTML

<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>

Page 13: Les balises HTML

Textes

Page 14: Les balises HTML

<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

Page 15: Les balises HTML

<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>

Page 16: Les balises HTML

<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>

Page 17: Les balises HTML

<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

Page 18: Les balises HTML

<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>

Page 19: Les balises HTML

<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

Page 20: Les balises HTML

<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>

Page 21: Les balises HTML

<pre>bloc

Représente du texte pré-formaté.

Note : ne peut pas contenir de <sup>, <sub>, <img/>, <object>

<pre> (__) (oo) /-------\/ / | ||* ||----|| ~~ ~~</pre>

Page 22: Les balises HTML

<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>

Page 23: Les balises HTML

Images

Page 24: Les balises HTML

<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" />

Page 25: Les balises HTML

<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

Page 26: Les balises HTML

<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

Page 27: Les balises HTML

Listes

Page 28: Les balises HTML

<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.

Page 29: Les balises HTML

<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

Page 30: Les balises HTML

Formulaires

Page 31: Les balises HTML

<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>.

Page 32: Les balises HTML

<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 ?

Page 33: Les balises HTML

<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" />

Page 34: Les balises HTML

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.

Page 35: Les balises HTML

<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>

Page 36: Les balises HTML

<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.

Page 37: Les balises HTML

<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>.

Page 38: Les balises HTML

<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>.

Page 39: Les balises HTML

<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>

Page 40: Les balises HTML

<legend>en ligne

Représente un titre de section de formulaire.

<fieldset><legend>Informations personnelles</legend><input type="text" id="email" name= "mail" />

</fieldset>

Page 41: Les balises HTML

Tableaux

Page 42: Les balises HTML

<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>

Page 43: Les balises HTML

<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>

Page 44: Les balises HTML

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.

Page 45: Les balises HTML

<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>

Page 46: Les balises HTML

Métas

Page 47: Les balises HTML

<title>en ligne

Représente le titre du document.

<title>La page web de ma vie</title>

Page 48: Les balises HTML

<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" />

Page 49: Les balises HTML

<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" />

Page 50: Les balises HTML

<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/" />

Page 51: Les balises HTML

<b>, <i>, <u>, <s>, <strike>, <big>, <small>, <tt>,<center>,

<basefont>, <font>,<frame>, <frameset>, <noframes>,

<applet>,<noscript>

(<br/>)

Je vous déconseille…

Page 52: Les balises HTML

Il en reste…

<script>, <style>,<object>, <param/>,

<iframe>,<address>, <hr/>, <bdo>, <dfn>

Page 53: Les balises HTML

<!-- Commentaire -->

Commentaires

<!--<ul> <li>…</li> <li>…</li></ul>-->