<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- balise ouvrant l'hypertexte markeup language-->
<head>
<!-- en-tête de la page-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!--Pour affiché les accents et autres caractères "spécifiques" sans bug, ni caractères par défauts-->
<title>Balises HTML, réccapitulatif</title>
<!-- title = nom de la page web, s'affiche dans l'onglet-->
</head>
<body>
<!-- corps de la page-->
<p>taille de texte</p>
<!--Commentaire-->
<!--h1, h2, h3, etc... Titre de niveau 1, 2, 3, etc.. Pour définir la taille du texte - texte s'affiche en gras-->
<h1>Pouet pouet</h1>
<h2>Pouet pouet</h2>
<h3>Pouet pouet</h3>
<h4>Pouet pouet</h4>
<h5>Pouet pouet</h5>
<h6>Pouet pouet</h6>
<!--P= paragraphe, affiche le texte normal, taille standard, sans gras, sans itallique-->
<p>tableaux</p>
<table border="1">
<tr>
<td>1932</td>
<td>1927</td>
</tr>
<tr>
<td>Freaks</td>
<td>Metroplis</td>
</tr>
<tr>
<td>Tod Browning</td>
<td>Fritz Lang</td>
</tr>
<tr>
<td>USA</td>
<td>ALLEMAGNE</td>
</tr>
</table>
<!-- <table></table> = tableau / <tr></tr>= ligne de tableau / <td></td>= cellule -->
<p>Abréviation</p>
<p><abbr title="hypertexte ta moman">HTML</abbr></p>
<!-- abbr pour abbréviation. HTML étant le texte et "hypertexte ta mère" la description de l'abbrégé, qui s'affiche dans une petite bulle lorsqu'on passe la souris sur le texte "HTML"-->
<p>Liste à puces</p>
<ul>
<li>
<p>légumes</p>
<ul>
<li>topinambour</li>
<li>carottes</li>
</ul>
</li>
<li>
<p>fruits</p>
<ul>
<li>bananes</li>
<li>avocats</li>
</ul>
</li>
</ul>
<ol>
<li>
<h3>perturbateurs</h3>
<ul>
<li>Arnaud</li>
<li>Lionel</li>
</ul>
</li>
<li>
<h4>prometteurs</h4>
<ul>
<li>Maxime</li>
<li>Lionel</li>
</ul>
</li>
</ol>
<!--<ul></ul>= liste à puces non numérotée / <ol></ol>= liste numérotée / <li></li>= élément de la liste à puces-->
<p>Tableaux 2</p>
<table border="4">
<tr>
<td colspan="1">Aaaargh</td>
<td rowspan="3">Grrrr</td>
<td>beer</td>
<td>Chantal</td>
<td>beer</td>
<td colspan="3" rowspan="2">Calendredaine</td>
</tr>
<tr>
<td>fichtre</td>
<td rowspan="2">rodhodendron</td>
<td>vélo</td>
<td>beer</td>
</tr>
<tr>
<td colspan="1">pouet</td>
<td>poil</td>
<td>moustache</td>
<td>poil</td>
<td>moustache</td>
<td>poil</td>
</tr>
</table>
<!-- border est un attribut qui définit une valeur, présentement "4", qui définit issu l'épaisseur de la bordure du tableau-->
<!-- Span est un attribut qui fonctionne si on lui définit un style. Ici par exemple col (colspan) et la valeur "1" qui définit le nombre de colonnes sur lesquelles le mot "Aaaargh" va se jouer-->
<!-- rowspan (row=ligne), définit par la valeur, indique le nombres de lignes sur laquelle va se jouer le mot Grrr/rodhodendron/etc...-->
<p>grais itallique, indice, et exposant</p>
<p>Louis XVI <sup> ème </sup> du nom. H<sub>2</sub>O</p>
<!-- Sup = exposant / Sub = indice -->
<p>gérard <strong>Aime</strong> les saucisses de montélimard. Patricia <em>Chante</em> sous la douche, comme une casserole</p>
<!-- strong= texte en gras / em = texte en itallique-->
<p>Ancrage</p>
<p><a href="#bananes"> Clique sur les bananes </a></p>
<p id="bananes">bananes </p>
<!-- <a></a> = hyperlien -->
<!-- id (pas d'espace, pas de chiffre en premier et pas d'accent) est un attribut pour définir une ancre de texte. grace au hastag(#) bananes l'attribut href définit la source. la phrase "cliques sur les bananes" est cliquable et renvoi au terme définit comme "bananes"-->
<p>citations</p>
<blockquote><p>c'est deux canards, ils sont dans la mare, y'en a un des deux qui dit coin-coin, l'autre répond: "ben ça alors, j'allais le dire!</p></blockquote>
<!-- blockquote= pour citation longue, créé un décalage à l'affichage-->
<p><q cite="http://www.google.fr">Va sur gogolerecherche</q></p>
<!-- quote = pour citation également, créé des guillemets à l'affichage de la citation. Comme pour blockquote, on peut rajouter l'attribut "cite" afin d'insérer la source de la citation (URL)-->
<p>Insérer une image</p>
<p><img src="toto.jpg" alt="koala"/></p>
<!-- img = balise pour insérer une image / src = la source de l'image dans le dossier contenant ( il est conseillé de mettre l'image dans le même dossier que le fichier Html correspondant) / atl = même principe que abbr, description de l'image-->
<p> Formulaires </p>
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Ton nom :</label>
<input type="text" name="pseudo" id="pseudo" />
<br />
<label for="pass">Numéro de carte bancaire (fait moi confiance!) :</label>
<input type="password" name="pass" id="pass" />
</p>
</form>
<form method="post" action="traitement.php">
<p>
<label for="ameliorer">Comment pensez-vous que je pourrais améliorer mon site ?</label><br />
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>
</form>
<p> Elements d'options, cases à cocher </p>
<form method="post" action="traitement.php">
<p>
Quel est le sens de la vie? :<br />
<input type="checkbox" name="droite" id="droite" /> <label for="droite">A droite</label><br />
<input type="checkbox" name="gauche" id="gauche" /> <label for="gauche">A gauche</label><br />
<input type="checkbox" name="dtc" id="dtc" /> <label for="dtc">DTC</label><br />
<input type="checkbox" name="jedi" id="jedi" /> <label for="jedi">Obi wan kenobi</label>
</p>
</form>
<!--Form est la balise pour formulaire / input balise pour champ de formulaire ( texte, case à cocher, etc..) / textarea balise qui désigne la zone de saisie / Label balise, pour "libéllés" ou "tag"/"mot-clef"-->
<p> Menu déroulant </p>
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="newzeland">Nouvelle-Zélande</option>
<option value="Scotland">Ecosse</option>
<option value="finland">Finlande</option>
<option value="dtc">Trou du cul du monde</option>
<option value="suede">Suède</option>
<option value="norway">Norvége</option>
<option value="romania">Roumanie</option>
<option value="eire">Irlande</option>
</select>
</p>
</form>
<!-- select désigne la liste déroulante / Option, les options de la liste déroulante / Value est l'attribut qui désigne la valeur newzeland/scotland/finland.... On peut également complexifier le menu déroulant en groupant des options en sous groupe avec la balise <optgroup></optgroup>, généralement suivit de l'attribut label-->
</body>
</html>
Mer 3 Sep 2014 - 15:48
