HTML : Hyper Text Markup Language

(1)

HTML : Hyper Text Markup Language

Jean-Claude Charr

Maître de conférences IUT de Belfort – Montbéliard Université de Franche Comté

(2)

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

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

(4)

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

(5)

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

(6)

Balises

 <h1>,...,<h6> pour définir des entêtes

 <hr/> pour afficher une ligne horizontale

  pour ajouter du commentaire non affiché aux pages HTML

 <p> définir un paragraphe

 <br/> définir un retour à la ligne

(7)

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>

(8)

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>

(9)

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>

(10)

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>

(11)

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.

nom : <input type="text" name="nom" /><br />

M. D. P. : <input type="password" name="mdp" />

</form>

(12)

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

</select>

(13)

Éléments d'insertion de données 2

<form action="MAILTO:address" method="post"

enctype="text/plain">

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

</form>

(14)

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