Le code HTML est un langage dit descriptif. Obligatoire sur une page web, il a pour but de la structurer à l’aide de balises.
Voyons dans cet article ses principales fonctionnalités et une liste de ses principales commandes
Sommaire
Présentation
Langage HTML
Le code HTML est un langage dit descriptif. Obligatoire sur une page web, il a pour but de la structurer à l’aide de balises. Pour écrire du code HTML directement exécutable par notre navigateur, il nous faut :
- Un fichier texte dont l’extension est remplacé par
.html - Un éditeur de texte de votre choix pour remplir le fichier :
- Simple (bloc-notes windows, …)
- Avec mise en relief du code (notepad++, …)
- Équipé d’un IDE (atom, …)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ceci est un titre de page web</title>
</head>
<body>
<p>Ceci est un contenu de page web</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ceci est un titre de page web</title>
<link rel="stylesheet" href="./chemin/styles.css" />
</head>
<body>
<p>Ceci est un contenu de page web</p>
</body>
<script type="text/javascript" src="./chemin/script.js"></script>
</html>Rôle des balises
Les balises ont un rôle sémantique. Elles expliquent à l’ordinateur le rôle du contenu qu’elles encadrent. Il est donc essentiel d’utiliser les bonnes balises. Par exemple, une balise <strong> ... </strong> signifie que le contenu est important, donc :
- Votre navigateur mettra ce contenu en gras.
- Votre moteur de recherche privilégiera les pages dans lesquels les mots-clés que vous recherchez sont encadrées par cette balise.
Au nombre de 140, les balises peuvent s’imbriquer les unes dans les autres, ou se suivre, mais ne doivent pas se chevaucher ! Elles respectent toute une syntaxe stricte avec :
- Nom : type de balise utilisé
- Attribut : paramètre de la balise. On peut en mettre plusieurs
- Contenu : contenu de la balise
<nom attribut="valeur"> contenu </nom> Balise ouvrante / fermante
<nom attribut="valeur" /> Balise orpheline Les attributs
Chaque balise possède son propre lot d’attribut qui, chacune, modifie son comportement. Cependant, il existe des attributs communes à la plupart des balises :
- class : raccorde la balise à une « classe ».
- id : raccorde la balise à un « nom » unique.
- styles : inclus du code CSS spécifique à la balise.
class et id permettent de référencer la balise. Elles ont quasiment le même rôle. La principale différence est que, contrairement à un nom de id, un même nom de class peut être donné à plusieurs balises :
- On peut affecter un code CSS et JS à une balise à l’aide d’un
id - On peut affecter un code CSS à plusieurs balises à l’aide d’un
class
<p> Ceci est un paragraphe sans attribut </p>
<p id="nom_2"> Ceci est un paragraphe avec un attribut id </p>
<p class="nom_1"> Ceci est un paragraphe avec un attribut class </p>
<p style="color: red;"> Ceci est un paragraphe avec un code CSS inclus </p>Les formulaires
La balise <form> ... </form> crée un espace formulaire dans la page web dans lequel le visiteur de la page rentre des données. Cette balise accepte les attributs suivants :
action=contient l’adresse (URL) du programme (ici en.php) qui reçoit les données (ici"/action_page.php")method=précise la méthode d’envoi des données au programme"get": envoi en clair dans l’URL avec?comme séparateur"post": envoi plus discret à l’aide d’une requête POST
Cette balise définit un espace formulaire, mais le contenu du formulaire est définit par d’autres balises comme
<input><textaera></textaera><label> ... </label><button> ... </button>
Les balises de formulaires
La balise <input> crée un encadré dans l’espace formulaire pour y rentrer des données. On trouve parmi ses attributs :
type=...décrit le type de donnée attendue entre"checkbox","color","date","email","password","text", …name=...décrit le nom associé à la donnée attendue
La balise <textaera> ... </textaera> crée un encadré dans l’espace formulaire pour y rentrer des phases entières. Il fonctionne comme <input type="text">
La balise <label> ... </label> lie à l’aide de son attribut for= un libellé à un élément du formulaire via son attribut id= (<input />, <textaera>, …).
La balise <button> ... </button> crée un bouton associé à espace formulaire dans lequel il est placé. Son attribut :
type=...décrit l’action du bouton une fois cliqué"submit": les données rentrés dans l’espace formulaire sont envoyées"reset": les données rentrés dans l’espace formulaire sont effacées"button": ne fait … rien, utile pour associer le bouton à une action JS
Commandes
Parmi les principales balises, on retrouve les balises :
- d’entête (souvent mises dans
<head> ... </head>) - de listes
- de tableau
- de formulaire
- de structuration de texte
- de structuration de la page web (gabarits)
- génériques (sans aucun sens sémantique)
<link /> Liaison avec une feuille de style
<meta /> Métadonnées de la page web (charset, mots-clés, etc.)
<script> Code JavaScript
<style> Code CSS
<title> Titre de la page
...<h1> Titre de niveau 1
...
<h6> Titre de niveau 6
<p> Paragraphe
<figure> Figure (image, code, etc.)
<strong> Mise en valeur forte
<img /> Insérer une image
<audio> Insérer un son
<video> Insérer une vidéo
<pre> Affichage formaté (codes)
<a> Lien hypertexte
<br /> Crée un retour à la ligne (la touche entrée ne marche pas)
<hr /> Crée une ligne de séparation horizontale
<time> Date ou heure
...<table> Tableau
<caption> Titre du tableau
<tr> Ligne de tableau
<th> Cellule d'en-tête
<td> Cellule
...<form> Formulaire
<fieldset> Groupe de champs
<legend> Titre d'un groupe de champs
<label> Libellé d'un champ
<input /> Champ de formulaire (texte, mdp, case, bouton, ...)
<textarea> Zone de saisie multiligne
<select> Liste déroulante
<option> Élément d'une liste déroulante
<optgroup> Groupe d'éléments d'une liste déroulante
<button> Bouton (valider, réinitialiser, commande JS)
...<header> En-tête
<nav> Liens principaux de navigation
<footer> Pied de page
<section> Section de page
<article> Article (contenu autonome)
<aside> Informations complémentaires
...<span> Balise générique de type inline
<div> Balise générique de type block
...
Pour plus d’indications, lisez cette fiche sur le code CSS – Disposition des blocs
Exemples
<!-- Tableau simple avec en-tête -->
<table>
<tr>
<th>Prénom</th>
<th>Nom</th>
</tr>
<tr>
<td>Jean</td>
<td>Dupont</td>
</tr>
<tr>
<td>Marion</td>
<td>Duval</td>
</tr>
</table>Résultat :
| Prénom | Nom |
|---|---|
| Jean | Dupont |
| Marion | Duval |
<!-- liste simple avec titre -->
<h3>Ingrédients</h3>
<ul>
<li>2 avocats (pelés et avec les noyaux retirés)</li>
<li>le jus d'un citron</li>
<li>¼ de concombre, coupé grossièrement</li>
<li>1 petite tomate, coupée</li>
</ul>Résultat :
Ingrédients
- 2 avocats (pelés et avec les noyaux retirés)
- le jus d’un citron
- ¼ de concombre, coupé grossièrement
- 1 petite tomate, coupée
<!-- liste numérotée avec titre -->
<h3>Ingrédients</h3>
<ol>
<li>2 avocats (pelés et avec les noyaux retirés)</li>
<li>le jus d'un citron</li>
<li>¼ de concombre, coupé grossièrement</li>
<li>1 petite tomate, coupée</li>
</ol>Résultat :
Ingrédients
- 2 avocats (pelés et avec les noyaux retirés)
- le jus d’un citron
- ¼ de concombre, coupé grossièrement
- 1 petite tomate, coupée
<form action="/action_page.php" method="get">
<div>
<label for="first">First name:</label>
<input id ="first" type="text" name="fname" value="John">
</div>
<button type="submit">Envoyer le message</button>
</form> Résultat (ne cliquez pas sur envoyer) :
<form action="/action_page.php" method="get">
<div>
<label for="first">First name:</label>
<input id ="first" type="text" name="fname" value="John">
</div>
<div>
<label for="last">Last name:</label>
<input id ="last" type="text" name="lname" value="Doe">
</div>
<div>
<label for="msg">Message :</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<button type="reset" >Effacer le message</button>
<button type="submit">Envoyer le message</button>
</form> Résultat (ne cliquez pas sur envoyer) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon site web a moi !</title>
</head>
<body>
<header>
<!-- Mon menu -->
</header>
<nav>
<!-- Les titres de mon article -->
</nav>
<section>
<article>
<!-- Le bla bla de mon article -->
</article>
<aside>
<!-- les infos en plus -->
</aside>
<aside>
<!-- encore plus d'infos en plus -->
</aside>
</section>
<footer>
<!-- les infos propres à mon site et a moi :) -->
</footer>
</body>
</html>Résultat : (après mise en forme CSS)
