HTML : Suite
Sommaire
- 1 Les balises élémentaires:
- 2 Les niveaux de titres et paragraphes
- 3 Un peu de formattage
- 4 Insérer une image
- 5 Ajouter un lien
- 6 Les listes
- 7 Les tableaux
- 8 Les conteneurs
- 9 Les formulaires
- 10 Les listes déroulantes
- 11 Forcer les sauts de lignes
- 12 Insérer un espace insécable
- 13 Les entités
- 14 Les deux modèles de contenus:
- 15 Sources
- 16 Outils pratiques:
Les balises élémentaires:
Les balises élementaires : <html></html>, <head></head>, <body></body>
Un document HTML possède une section header (elle contient des méta-données propres au document en cours ainsi que des information relatives aux feuilles de styles et scripts) et une section body le code du contenu visible ( seul le contenu de la balise body est visible par l'utilisateur ).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> titre du document </title> </head> <body> contenu de la page web </body> </html>
Les niveaux de titres et paragraphes
Les balises: <h1></h1>...<h6></h6>, <p></p>
<h1> Un titre de premier niveau </h1> <p> un paragraphe </p> <h2> Un titre de second niveau </h2> <p>un second paragraphe</p> <p> un dernier paragraphe </p> <!-- ce commentaire ne sera pas visible par l'utilisateur -->
Un peu de formattage
Les balises: <i></i>, <b></b>, <u></u>
<i>un texte en italique</i> <b>un texte en gras</b> <u>un texte souligné</u>
!!! HTML connaît deux types de styles, les styles logiques (interprétés) et les styles physiques (non interprétés). Chaque type de navigateur interprète les styles logiques différemment. Par exemple, le style logique <em> (pour "emphatique") sera affiché en rouge avec soulignement simple par un navigateur et en italique par un autre. Autres exemples de styles logiques: <strong> (accentué) et <cite> (citation). Les styles physiques, tels que italique, souligné et gras sont représentés tels qu'ils sont indiqués ( il est préférable de les utiliser ).
Insérer une image
Balise : <img />
<img src="peter.jpg" width="200" height="150" alt="My friend Peter"/>
l'attribut "alt" permet d'afficher un texte dans la cas ou l'image ne peut être affichée. Cet attribut devrait toujours être présent.
Ajouter un lien
balise: <a></a>
ceci est un lien vers <a href="http://www.google.com">google</a>.
C'est la valeur de l'attribut "href" qui contient l'url ( absolue ou relative) de la ressource visée
Un example de lien relatif:
Ceci est un lien vers une autre page de mon site web <a href="../categorie1/mapage.html">une page</a>
'Un example de lien associé à une image':
<a href="/"><img src="logo.gif" alt="home page"></a>
Définir une ancre (insertion d'un lien dans la page courante)
En deux temps : définir la cible à l'intérieur du docment et créer le lien.
Par exemple, pour créer une note en bas de page:
<a href="#note-1">notes[1]</a> <a name="note-1">nom</a>
Créer un lien vers une adresse électronique
La syntaxte de base est la suivante :
<a href="mailto:prenom.nom@provider.net">prenom nom@provider.net</a>
Il faut cependant absolument éviter d'écrire une adresse mail dans une page web. Celle çi sera automatiquement detecté par les spammeurs. Il vaut mieux créer un lien vers une page contenant un formulaire de contact.
Pour Wordpress, il est possible d'installer des plugins anti-spam: http://wordpress.org/extend/plugins/search.php?q=antispam+mail ou d'utiliser la fonction intégrée à wordpress prévue à cet effet :
http://codex.wordpress.org/Protection_From_Harvesters
Les listes
Balises : <ul></ul>, <ol>, <li> ...
Il existe 3 type de listes, voici seulement présentée les listes ordonnées et non-ordonnées.
Les listes ordonées
<ol>
<li>premier élement de la liste</li>
<li>second élement de la liste</li>
<li>troisième élement de la liste</li>
</ol>
Les listes non ordonnées ( les plus courantes):
<ul>
<li>premier élement de la liste</li>
<li>second élement de la liste</li>
<li>troisième élement de la liste</li>
</ul>
Les tableaux
Les balises: <table></table>, <tr></tr>, <th></th>, <td></td>, <thead></thead>, <tfoot></tfoot>
Tableau simple
Un tableau est construit définit par les balises "<table></table>. Les lignes sont définies par les balises "<tr></tr>" et chaque celulle par les balises "<td></td>" ou "<th></th>" pour définir une cellule d'en.
<table>
<tr>
<th>Poisson</th>
<td>20 euros</td>
<td>500 grammes</td>
</tr>
<tr>
<th>Viande</th>
<td>15 euros</td>
<td>900 grammes</td>
</tr>
</table>
Tableau avec une ligne d'en-tête, une ligne de pied et une légende
<table>
<caption>Mes courses</caption>
<thead>
<tr>
<th>Aliment</th>
<th>Prix</th>
<th>Poids</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>35 euros</th>
<th>1400 grammes</th>
<tr>
</tfoot>
<tbody>
<tr>
<th>Poisson</th>
<td>20 euros</td>
<td>500 grammes</td>
</tr>
<tr>
<th>Viande</th>
<td>15 euros</td>
<td>900 grammes</td>
</tr>
</tbody>
</table>
Les conteneurs
balises: div, span
Ils sont très largement utilisé conjointement avec les attributs "id" et "class" pour définir la structure de la page.
L'élément div est un conteneur générique pour le contenu de flux qui en soi ne représente rien. Il permets de définir des groupements de balises qui pourront correposndre à des zones de la page
<div id="menu">
<h2>Le titre de mon bloc</h2>
<ul>
<li>accueil</li>
<li>contact</li>
</ul>
</div>
<div id="contenu-principal">
<h2>Le titre de mon bloc</h2>
<p>To be xhtml or not to be xhtml ?</p>
</div>
L'élément span est un conteneur générique pour le contenu phrasé qui par lui-même ne représente rien.
<p><span class="info">Variable declared twice</span></p> <p><span class="warning">Undeclared variable</span></p> <p><span class="erreur">Bad syntax for variable name</span></p>
Les formulaires
Les balises : <form></form>,<fieldset></fieldset>, <legend></legend>, <label></label>, <input />, <textarea></textarea>, <button></button>.
Un formulaire simple de contact
<form>
<input type="text" name="nom"/>
<input type="submit" value="ok" />
</form>
Ajoutons un label
<form>
<label for="nom">nom: </label>
<input type="text" name="nom" id="nom"/>
<button>valider le formulaire</button>
</form>
Notez l'attribut "for" de la balise "label" qui associe ce label à l'élement dont la valeur de l'attribut "id" est "nom". De plus, le champ "input" de type "submit" a été remplacé par un élement "button".
Un formulaire plus complet
Ajoutons un champ de texte multiple pour la saisie d'une description, ainsi que des checkbox et radiobox.
<form>
<label for="nom">nom : </label>
<input type="text" name="nom" id="nom"/>
<label for="prenom">prénom : </label>
<input type="text" name="prenom" id="prenom"/>
<label for="description">description : </label>
<textarea rows="10" cols="10" name="description" id="description"></textarea>
<label for="graphiste">graphiste</label>
<input type="radio" name="graphiste" id="graphiste" />
<label for="developpeur">développeur</label>
<input type="radio" name="developpeur" id="developpeur" />
<label for="newsletter">recevoir la newsletter</label>
<input type="radio" name="newsletter" id="newsletter" />
<button>valider le formulaire</button>
</form>
Les listes déroulantes
<form> <select> <option>un</option> <option>deux</option> </select> </form>
Ajouter des sections au formulaires ( grouper des élements)
<form action="sauvegarde-contact.php" method="post">
<fieldset>
<legend>Informations principales</legend>
<label for="nom">nom : </label>
<input type="text" name="nom" id="nom"/>
<label for="prenom">prénom : </label>
<input type="text" name="prenom" id="prenom"/>
<label for="description">description : </label>
<textarea rows="10" cols="10" name="description" id="description"></textarea>
</fieldset>
<fieldset>
<legend>Informations secondaires</legend>
<label for="graphiste">graphiste</label>
<input type="radio" name="graphiste" id="graphiste" />
<label for="developpeur">développeur</label>
<input type="radio" name="developpeur" id="developpeur" />
<label for="newsletter">recevoir la newsletter</label>
<input type="checkbox" name="newsletter" id="newsletter" />
</fieldsset>
<button>valider le formulaire</button>
</form>
Forcer les sauts de lignes
Balise: <br />
<p>
vidi lecta diu et multo spectata labore <br />
degenerare tamen, ni vis humana quotannis <br />
maxima quaeque manu legeret. sic omnia fatis <br />
in peius ruere ac retro sublapsa referri, <br />
non aliter quam qui adverso vix flumine lembum <br />
remigiis subigit, si bracchia forte remisit, <br />
atque illum in praeceps prono rapit alveus amni.
</p>
Insérer un espace insécable
Entité:
Sweetened carbonated beverages, such as Coca Cola, have attained world-wide popularity
Les entités
voir : http://alexandre.alapetite.fr/doc-alex/alx_special.html
Les deux modèles de contenus:
- inline: éléments au niveau du caractère et chaînes de texte
- block: éléments de type bloc, par exemple, paragraphes et listes
Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général, les éléments de bloc commencent sur une nouvelle ligne, et non les éléments en-ligne. Pour des informations concernant les blancs, les sauts de ligne et le formatage des blocs, veuillez consulter la section sur le texte.
Les élements de type "block" (XHTML)
p | h1|h2|h3|h4|h5|h6 | div | ul | ol | dl | pre | hr | blockquote | address | fieldset | table
Les elements de types "inline"(XHTML)
br | span | bdo | map | object | img | tt | i | b | big | small | em | strong | dfn | code | q |
samp | kbd | var | cite | abbr | acronym | sub | sup | input | select | textarea | label | button
Sources
Tutoriaux :
http://www.w3.org/MarkUp/Guide/ (en)
http://www.w3.org/MarkUp/Guide/Advanced.html (en)
http://openweb.eu.org/articles/xhtml_une_heure (fr)
http://xhtml.le-developpeur-web.com/ (fr)
Les documents de références :
XHTML : http://www.w3.org/TR/xhtml1/dtds.html (en)
HTML4 : http://www.la-grange.net/w3c/html4.01/sgml/dtd.html (fr)
http://www.la-grange.net/w3c/html4.01/ (FR)
Outils pratiques:
Faux texte : http://www.lipsum.com/
Validateur : http://validator.w3.org/#validate_by_uri
Couleurs : http://fr.wikipedia.org/wiki/Couleurs_du_Web
Voir aussi : CSS , 3eme année
