Qu'est-ce que le HTML ?
HTML signifie H yper T ext M arkup L anguage
HTML est le langage de balisage standard pour les pages Web
Les éléments HTML sont les blocs de construction des pages HTML
Les éléments HTML sont représentés par des balises <>
Éléments HTML
Un élément HTML est une balise de début et une balise de fin avec du contenu entre :
<h1>Ceci est un titre</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
Attributs HTML
- Les éléments HTML peuvent avoir des attributs
- Les attributs fournissent des informations supplémentaires sur l'élément
- Les attributs viennent dans des paires nom/valeur comme charset="utf-8"
Un document HTML simple
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Exemple expliqué
Les éléments HTML sont les blocs de construction des pages HTML.
- La
<!DOCTYPE html>déclaration définit ce document comme étant HTML5 - L'
<html>élément est l'élément racine d'une page HTML - L'
langattribut définit la langue du document - L'
<meta>élément contient des méta-informations sur le document - L'
charsetattribut définit le jeu de caractères utilisé dans le document - L'
<title>élément spécifie un titre pour le document - L'
<body>élément contient le contenu visible de la page - L'
<h1>élément définit un grand titre - L'
<p>élément définit un paragraphe
Documents HTML
Tous les documents HTML doivent commencer par une déclaration de type de document : <!DOCTYPE html>.
Le document HTML lui-même commence par <html>et se termine par </html>.
La partie visible du document HTML est comprise entre <body>et </body>.
Structure des documents HTML
Ci-dessous une visualisation d'un document HTML (une Page HTML) :
Remarque : seul le contenu de la section <body> (la zone blanche ci-dessus) s'affiche dans un navigateur.
En-têtes HTML
Les titres HTML sont définis avec <h1>des <h6>balises to.
<h1>définit la rubrique la plus importante. <h6>définit la rubrique la moins importante :
Exemple
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Paragraphes HTML
Les paragraphes HTML sont définis avec des <p>balises :
Exemple
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Liens HTML
Les liens HTML sont définis avec des <a>balises :
Exemple
<a href="https://www.w3schools.com">This is a link</a>
La destination du lien est spécifiée dans l' hrefattribut.
Images HTML
Les images HTML sont définies avec des <img>balises.
Le fichier source ( src), le texte alternatif ( alt),
widthet heightsont fournis en tant qu'attributs :
Exemple
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
Boutons HTML
Les boutons HTML sont définis avec des <button>balises :
Exemple
<button>Click me</button>
Listes HTML
Les listes HTML sont définies avec des balises (liste <ul>non ordonnée/à puces) ou
<ol>(liste ordonnée/numérotée), suivies de <li>
balises (éléments de liste) :
Exemple
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Tableaux HTML
Un tableau HTML est défini avec une <table>balise.
Les lignes du tableau sont définies avec des <tr>balises.
Les en-têtes de tableau sont définis avec des <th>balises. (gras et centré par défaut).
Les cellules de tableau (données) sont définies avec des <td>balises.
Exemple
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Programmation HTML
Chaque élément HTML peut avoir des attributs .
Pour le développement et la programmation Web, les attributs les plus importants sont id et class. Ces attributs sont souvent utilisés pour traiter les manipulations de pages Web basées sur des programmes.
| Attribut | Exemple |
|---|---|
| identifiant | < id de table ="table01" |
| classer | <p class ="normal"> |
| style | <p style ="font-size:16px"> |
| Les données- | <div data -id="500"> |
| sur clic | <input onclick ="maFonction()"> |
| surmouseover | <a onmouseover ="this.setAttribute('style','color:red')"> |
Tutoriel HTML complet
Ceci a été une brève description de HTML.
Pour un didacticiel HTML complet, accédez au didacticiel HTML de W3Schools .
Pour une référence complète des balises HTML, accédez à Référence des balises W3Schools .