les bases du langage html

Introduction à la programmation HTML

HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer et formater du contenu pour le Web. Il permet de créer des pages Web en utilisant des balises pour définir les différents éléments d’une page tels que les titres, les paragraphes, les listes et les liens.

Éditeurs de texte et éditeurs de code

Pour commencer à programmer en HTML, vous avez besoin d’un éditeur de texte simple comme le Bloc-notes (Windows) ou TextEdit (Mac). Vous pouvez également utiliser un éditeur de code spécialisé comme Sublime Text ou Visual Studio Code qui offre des fonctionnalités avancées telles que la coloration syntaxique et l’auto-complétion.

Structure d’un document HTML

Un document HTML commence par une déclaration DOCTYPE qui indique au navigateur la version d’HTML utilisée. Ensuite vient l’élément <html> qui englobe tout le contenu de la page. Dans cet élément se trouvent deux sections principales: <head> et <body>. La section <head> contient des informations sur la page telles que son titre et ses métadonnées, tandis que la section <body> contient le contenu visible de la page.

Balises et attributs

Les éléments HTML sont définis par des balises qui sont entourées par des crochets angulaires (< et >). Par exemple, pour créer un paragraphe, vous utilisez la balise <p>. Les balises peuvent également avoir des attributs qui fournissent des informations supplémentaires sur l’élément. Par exemple, pour créer un lien vers une autre page Web, vous utilisez la balise <a> avec l’attribut href qui spécifie l’URL de la page liée.

Ajouter du contenu multimédia à votre page HTML

Ajouter une photo

Pour ajouter une image à votre page HTML, vous pouvez utiliser la balise <img> avec l’attribut src qui spécifie l’URL de l’image. Par exemple:

<img src="image.jpg" alt="Description de l'image">

L’attribut alt fournit une description textuelle de l’image qui peut être utilisée par les lecteurs d’écran pour les utilisateurs malvoyants et par les moteurs de recherche pour indexer votre page.

Vous pouvez également utiliser des attributs tels que width et height pour spécifier la taille de l’image en pixels. Par exemple:

<img src="image.jpg" alt="Description de l'image" width="300" height="200">

Il est important de toujours inclure une description appropriée dans l’attribut alt pour améliorer l’accessibilité et le référencement de votre page.

Comment ajouter une vidéo à votre page HTML

Pour ajouter une vidéo à votre page HTML, vous pouvez utiliser la balise <video> avec différents attributs pour contrôler son apparence et son comportement. Par exemple:

<video src="video.mp4" controls>
  Votre navigateur ne prend pas en charge la balise vidéo.
</video>

Dans cet exemple, nous avons utilisé la balise <video> avec l’attribut src pour spécifier l’URL de la vidéo. Nous avons également ajouté l’attribut controls pour afficher les contrôles de lecture de la vidéo.

Vous pouvez également utiliser des attributs tels que width et height pour spécifier la taille de la vidéo en pixels. Par exemple:

<video src="video.mp4" controls width="640" height="360">
  Votre navigateur ne prend pas en charge la balise vidéo.
</video>

Il est important d’inclure un texte de remplacement entre les balises <video> et </video> pour les navigateurs qui ne prennent pas en charge cette fonctionnalité. Ce texte s’affichera si le navigateur ne peut pas lire la vidéo.

Voici un exercice pour vous entraîner à ajouter des vidéos à votre page HTML:

Créez un nouveau document HTML avec un titre et un paragraphe.

Ajoutez une vidéo à votre page en utilisant la balise <video> avec les attributs src et controls.

Modifiez la taille de la vidéo en utilisant les attributs width et height.

Vérifiez que votre vidéo s’affiche correctement dans votre navigateur.

En résumé, pour ajouter une vidéo à votre page HTML, vous pouvez utiliser la balise <video> avec différents attributs pour contrôler son apparence et son comportement.

Conclusion Voici un exemple de structure de base pour une page HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la page</title>
  </head>
  <body>
    <h1>Titre principal</h1>
    <p>Paragraphe de texte.</p>

    <h2>Sous-titre</h2>
    <ul>
      <li>Liste d'éléments</li>
      <li>Liste d'éléments</li>
      <li>Liste d'éléments</li>
    </ul>

    <h2>Sous-titre</h2>
    <img src="image.jpg" alt="Description de l'image">

    <h2>Sous-titre</h2>
    <video src="video.mp4" controls></video>

  </body>
</html>

Dans cet exemple, nous avons utilisé différentes balises pour structurer le contenu de notre page. Nous avons commencé par une déclaration DOCTYPE pour indiquer la version d’HTML utilisée, suivie de l’élément <html> qui englobe tout le contenu de la page.

Dans la section <head> de notre page, nous avons ajouté un élément <title> pour spécifier le titre de notre page. Ce titre s’affiche dans l’onglet du navigateur et est utilisé par les moteurs de recherche pour indexer notre page.

Dans la section <body> de notre page, nous avons ajouté différents éléments pour structurer notre contenu. Nous avons utilisé des balises <h1> et <h2> pour créer des titres et des sous-titres, des balises <p> pour créer des paragraphes de texte et des balises <ul> et <li> pour créer une liste non ordonnée.

Nous avons également ajouté une image en utilisant la balise <img> avec les attributs src et alt, ainsi qu’une vidéo en utilisant la balise <video> avec l’attribut src.

En résumé, cet exemple montre comment utiliser différentes balises HTML pour structurer le contenu d’une page Web.

17/03/2023