Commandes de base HTML5

Le HTML (Hypertext Markup Language) est un langage informatique qui est à la base du fonctionnement de tous les sites web avec le CSS. Ayant fait sont apparition en 1991, son rôle est de gérer et organiser le contenu de chaque page. Grâce à ce langage vous pouvez afficher du texte, des liens, des images… sur votre site.

Il fonctionne avec le langage CSS (Cascading Style Sheets) qui, quant à lui, permet d’arranger le contenu et de définir la présentation (couleur, alignement, taille, …).

Dans les tableaux suivants, vous retrouverez les balises les plus utilisés en programmation HTML.

Balises d’en-tête, de premier niveau et sectionnantes

Balises Fonction
<html></html>Balise principale
<head></head>En-tête de la page
<body></body>Corps de la page
<link />Liaison avec une feuille de style (CSS)
<meta />Métadonnées de la page
<script></script>Code JavaScript
<title></title>Titre de la page
<header></header>En-tête
<nav></nav>Menu
<footer></footer>Pied de page
<section></section>Section de page
<article></article>Article
<aside></aside>Information complémentaire
<!DOCTYPE html>
<html>
<head>

     <meta charset="utf-8">
     <title>Titre de la page</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>  
</head>

<body>


     <!--- Le contenu de votre page -->
</body>

<footer>
     <!--- Le contenu de votre pied de page -->
</footer>
</html>

Balises de textes

Balises Fonction
<p></p>Paragraphe
<h1></h1>Titre de niveau 1
<h2></h2>Titre de niveau 2
<h3></h3>Titre de niveau 3
<h4></h4>Titre de niveau 4
<h5></h5>Titre de niveau 5
<h6></h6>Titre de niveau 6
<strong></strong>Mettre en gras
<em></em>Mettre en italique
<mark></mark>Surligner
<img />Insérez une image
<audio></audio>Insérez un audio
<video></video>Insérez une vidéo
<a></a>Insérez un lien hypertexte
<br/>Retour à la ligne
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Titre de la page</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>  
</head>

<body>
     <h1>Ceci est un titre</h1>
     <p>Ceci est un <strong>paragraphe</strong>. Il s'agit d'un simple <em>exemple</em> pour vous montrer comment cela <mark>fonctionne</mark>.</p>
     <img src="image.jpg" alt="Ceci est une image">
     <audio controls><source src="ma_music.mp3" type="audio/mpeg"></audio>
     <video controls><source src="ma_video.mp4" type="video/mp4"></video>
     <p>Vous pouvez visionner la vidéo sur YT en <a href="https://YT.fr" target="_blank">cliquant ici</a>.</p>
</body>

<footer>
     <!--- Le contenu de votre pied de page -->
</footer>
</html>

Comme vous pouvez le constater avec notre exemple, les balises audio, video, a et img possèdent des attributs. Ils permettent de contrôler le comportement de l’élément.

Attributs de la balise img

AttributsFonction
altSpécifie un texte alternatif pour une image
srcSpécifie le chemin d’accès à l’image

Attributs des balises audio et video

Attributs Fonction
audioDéfinit le contenu sonore
sourceDéfinit plusieurs ressources médias pour les éléments médias

Attributs de la balise a

Attributs Fonction
targetIndique où ouvrir le document lié
downloadIndique que la cible sera téléchargée lorsqu’un utilisateur clique sur le lien hypertexte.
hrefSpécifie l’URL de la page vers laquelle le lien renvoie.

Balises de listes

Balises Fonction
<ul></ul>Liste à puces, non numérotée
<ol></ol>Liste numérotée
<li></li>Elément de la liste
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Titre de la page</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>  
</head>

<body>
     <ul>
          <li>Café</li>
          <li>Thé</li>
          <li>Lait</li>
     </ul>
     <ol>
          <li>Allez à la page boutique</li>
          <li>Achetez le livre</li>
     </ol>
</body>

<footer>
     <!--- Le contenu de votre pied de page -->
</footer>
</html>

Balises de tableau

Balises Fonction
<table></table>Tableau
<thead></thead>Section d’en-tête du tableau
<tr></tr>Ligne de tableau
<th></th>Cellule d’en-tête
<td></td>Cellule de tableau
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Titre de la page</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>  
</head>

<body>
     <table>
          <tr>
               <th>Titre1</th>
               <th>Titre2</th>
               <th>Titre3</th>
          </tr>
          <tr>
               <td>Contenu1</td>
               <td>Contenu2</td>
               <td>Contenu3</td>
          </tr>
     </table>
</body>

<footer>
     <!--- Le contenu de votre pied de page -->
</footer>
</html>

Balise de formulaire

Balises Fonction
<form></form>Formulaire
<label></label>Libellé d’un champ
<input />Champ de formulaire
<textarea></textarea>Zone de texte
<select></select>Liste déroulante
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Titre de la page</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>  
</head>

<body>
     <form>
          <label for="prenom">Prenom :</label>
          <input type="text" id="prenom" name="prenom">
          <label for="nom">Nom :</label>
          <input type="text" id="nom" name="nom">
          <input type="submit" value="Submit">
     </form>
</body>

<footer>
     <!--- Le contenu de votre pied de page -->
</footer>
</html>

Attributs de la balise input

AttributsFonction
type=”checkbox”Définit une 
case à cocher
type=”radio”Définit un bouton radio
type=”submit”Définit un bouton pour soumettre les données du formulaire

Balises génériques

BalisesFonction
<span></span>Balise générique de type inline
<div></div>Balise générique de type block
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Titre de la page</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>  
</head>

<body>
     <div>
          <h2>Encore un titre</h2>
          <p>Encore un <span style="color:green">paragraphe</span>.</p>
     </div>
</body>

<footer>
     <!--- Le contenu de votre pied de page -->
</footer>
</html>
Publicités

Laisser un commentaire