Les balises HTML

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 globaux
Attributs 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 bloc
bloc
<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 bloc
bloc

<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 ﬁchier
•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éﬁnitions.
<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 bloc
bloc

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éciﬁe 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>

<base/>
en ligne
Déﬁnis 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>

Commentaires

Contact
Nicolas Le Gall
[email protected]
twitter.com/neovov

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

Les balises HTML

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

TLE-9-Prepare-Salad-and-Dressing.pptxkkk

LESSON 1 ABOUT MEDIA AND INFORMATION.pptx

GRADE-8-AQUACULTURE-WEEKQ1.pdfdfawgwyrsewru

Feelings PP Game FOR CHILDREN IN ELEMENTARY SCHOOL.pptx

Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx

Jeopardy_Figures_of_Speech.pptxvdsvdsvsdvsd