HTML : Hyper Text Markup Language
Jean-Claude Charr
Maître de conférences IUT de Belfort – Montbéliard Université de Franche Comté
HTML n'est pas un langage de programmation
HTML est un langage de balisage
Une balise est un mot clé entouré par <> ou </>
e.g. <html>, </html>
Un fichier html contient du texte et des balises
Les navigateurs (e.g. IE, firefox) affichent seulement le
Description générale
3
Premier exemple
Code
<html>
<body>
<h1>Titre</h1>
<p>Paragraphe</p>
</body>
</html>
Affichage
Titre
Paragraphe
Pour éditer vos pages html, utilisez emacs
Sauvegardez les avec une extension .html ou .htm
Élément HTML
C'est tout le contenu d'une paire de balise (<motclé>, </motclé>) et les deux balises.
Ex : <p id=x>du texte … </p> un seul élément html
composé de la balise ouvrante <p>, balise fermante </p>, attribut id=x et le contenu "du texte ...".
Un élément html peut contenir d'autres éléments html.
Un document html est composé d'éléments html imbriqués.
Attribut
Les attributs donnent des informations supplémentaires sur les éléments html
Ils sont toujours définis dans la balise ouvrante
Un attribut est formé d'une paire nom/valeur
Ex : <a href="adresse de la page">Lien</a>
La valeur de l'attribut est toujours entre guillemets
Balises
<h1>,...,<h6> pour définir des entêtes
<hr/> pour afficher une ligne horizontale
<!-- commentaire --> pour ajouter du commentaire non affiché aux pages HTML
<p> définir un paragraphe
<br/> définir un retour à la ligne
Hyperliens
● Passer à une nouvelle page web.
Ex : <a href="url">aller à la page suivante</a>
• Passer à une section dans la même page web Ex : <a name="lien">Section 1</a>
<a href="#lien"> Aller à la section 1</a>
• Passer à une nouvelle page et à une section prédéfinie
Ex : <a href="url#lien">Aller à la section 1</a>
• Envoyer un mail à une adresse prédéfinie
Ex : <a href="mailto:adresse?Subject=Bonjour">
envoyer email</a>
Images
• <img> Permet d'afficher une image Ex : <img src="url" alt="image …"/>
• Créer un lien avec une image
Ex : <a href="lien">
<img src="url" alt="texte" width="32"
height="32" />
</a>
Tableaux
Ex : <table border="1" cellpadding="10">
<caption>table à 2 lignes et 2 colonnes</caption>
<tr>
<th rowspan="2">entête</th>
<td>colonne 2, ligne 1</th>
</tr>
<tr>
<td>colonne 2, ligne 2</td>
</tr>
</table>
Listes
Listes ordonnées Ex : <ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Listes non ordonnées Ex : <ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
Formulaires
• Les formulaires sont utilisés pour passer des données au serveur
• La balise <form> est utilisée pour créer des formulaires
• Un formulaire peut contenir des éléments pour l'insertion de données.
<form name="form" action="action.php" method="get">
nom : <input type="text" name="nom" /><br />
M. D. P. : <input type="password" name="mdp" />
<input type="submit" value="Submit" />
</form>
Éléments d'insertion de données 1
• Radio Buttons
Ex : <input type="radio" value="valeur" /> valeur
• Checkboxes
Ex : <input type="checkbox" value="valeur" /> valeur
• Drop-down list
Ex : <select name="voitures">
<option value="saab">Saab</option>
<option value="fiat" selected="selected" > Fiat </option>
</select>
Éléments d'insertion de données 2
<form action="MAILTO:address" method="post"
enctype="text/plain">
<fieldset>
<legend>Personnel:</legend>
Name: <input type="text" name="name" /><br />
E-mail:<input type="text" name="mail" size="20"/>
</fieldset>
Commentaire : <textarea rows="10" cols="30"> Entrez vos commentaires </textarea>
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
La balise <head>
• Peut contenir des scripts, des liens vers les feuilles de style, …
• <title> définit le titre de la page html
• <link> définit un lien à la feuille de style
• <style> définit le style de la page html
• <script> définit un script executé par le navigateur
