Leçon

Développement web 

Introduction à HTML

Bienvenue dans le monde du développement web ! Cette leçon vous présentera les blocs de construction fondamentaux d'Internet : HTML. HTML signifie HyperText Markup Language, et c'est le langage standard pour créer des pages web. Pensez-y comme au squelette d'un site web – il fournit la structure et le contenu.

Sans HTML, les navigateurs web ne sauraient pas comment afficher du texte, des images ou des liens. C'est essentiel pour toute personne intéressée par la création de sites web, des simples pages personnelles aux applications web complexes. Nous commencerons par les bases et progresserons vers la création d'une mise en page web simple.

Structure HTML : Le Modèle de Base

Chaque document HTML suit une structure de base. Cette structure indique au navigateur qu'il lit un fichier HTML et fournit les éléments essentiels pour la page. Voici un modèle HTML minimal :

            
<!DOCTYPE html>
<html>
<head>
    <title>Titre de la Page</title>
</head>
<body>
    <!-- Le contenu de la page va ici -->
</body>
</html>

Décomposons chaque partie :

  • <!DOCTYPE html>: Cette déclaration indique au navigateur que le document est un document HTML5. Elle doit toujours être la première chose dans votre fichier HTML.
  • <html>: C'est l'élément racine de la page. Tout le reste se trouve à l'intérieur de cette balise.
  • <head>: Cette section contient des méta-informations sur le document HTML, telles que le titre, le jeu de caractères et les liens vers les feuilles de style.
  • <title>: Spécifie un titre pour la page HTML (qui est affiché dans la barre de titre ou l'onglet du navigateur).
  • <body>: C'est là que tout le contenu de votre page web se trouve – le texte, les images, les liens et tout le reste que les utilisateurs voient.

Balises HTML : Éléments et Attributs

HTML utilise des balises pour définir des éléments. La plupart des balises vont par paires : une balise ouvrante et une balise fermante. Par exemple, <p> est la balise ouvrante pour un paragraphe, et </p> est la balise fermante.

Certaines balises sont auto-fermantes, ce qui signifie qu'elles n'ont pas besoin de balise de fermeture séparée. Un exemple est la balise <br>, qui crée un saut de ligne. Les balises peuvent également avoir des attributs, qui fournissent des informations supplémentaires sur l'élément. Par exemple, la balise <img> (pour les images) utilise l'attribut src pour spécifier la source de l'image.

Titres : <h1> à <h6>

Les titres sont utilisés pour structurer votre contenu et le rendre plus facile à lire. HTML fournit six niveaux de titres, de <h1> (le plus important) à <h6> (le moins important). Typiquement, <h1> est utilisé pour le titre principal de la page.

Voici un exemple :

            
<h1>Ceci est un titre de niveau 1</h1>
<h2>Ceci est un titre de niveau 2</h2>
<h3>Ceci est un titre de niveau 3</h3>

Paragraphes : <p>

Les paragraphes sont utilisés pour afficher des blocs de texte. La balise <p> définit un paragraphe.

Exemple :

            
<p>Ceci est un paragraphe de texte. Il peut contenir plusieurs phrases et mots.</p>
<p>Ceci est un autre paragraphe. Les paragraphes sont automatiquement séparés par une ligne vide.</p>

Listes : <ul> et <ol>

HTML propose deux types de listes : les listes non ordonnées (<ul>) et les listes ordonnées (<ol>). Les listes non ordonnées sont utilisées pour des éléments qui n'ont pas d'ordre spécifique, tandis que les listes ordonnées sont utilisées pour des éléments qui doivent être dans une séquence particulière. Les éléments de liste sont définis à l'aide de la balise <li>.

Voici des exemples des deux :

            
<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ul>

<ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ol>

Liens : <a>

Les liens permettent aux utilisateurs de naviguer entre différentes pages web ou sections au sein de la même page. La balise <a> définit un hyperlien. L'attribut le plus important est href, qui spécifie l'URL du lien.

Exemple :

            
<a href="https://www.example.com">Visiter Example.com</a>

L'attribut target peut être utilisé pour spécifier où ouvrir le document lié. target="_blank" ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre.

Images : <img>

La balise <img> est utilisée pour intégrer des images dans une page web. L'attribut src spécifie le chemin d'accès au fichier image. L'attribut alt fournit un texte alternatif pour l'image, qui est affiché si l'image ne peut pas être chargée et est important pour l'accessibilité.

Exemple :

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

Construction d'une mise en page web simple

Maintenant, combinons tout ce que nous avons appris pour créer une mise en page web de base. Nous inclurons un titre, un paragraphe, une liste, un lien et une image.

Voici le code HTML complet :

            
<!DOCTYPE html>
<html>
<head>
    <title>Ma Première Page Web</title>
</head>
<body>
    <h1>Bienvenue sur ma page web !</h1>
    <p>Ceci est une page web simple créée à l'aide des fondamentaux HTML.</p>
    <ul>
        <li>Apprendre HTML</li>
        <li>Pratiquer le codage</li>
        <li>Construire des sites web géniaux</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visiter Google</a>
    <img src="placeholder.jpg" alt="Une image de remplacement">
</body>
</html>

N'oubliez pas de remplacer "placeholder.jpg" par le chemin réel d'un fichier image. Enregistrez ce code sous forme de fichier HTML (par exemple, "index.html") et ouvrez-le dans votre navigateur web pour voir le résultat. Vous avez maintenant une page HTML entièrement fonctionnelle !



-/- ✔: 0, ✖: 0