Les Balises HTML

Reconnaitre et comprendre la langage HTML.

Comment trouver un développeur web en 2023. freelance

« Mon site en HTML.«

La syntaxe HTML

L’utilisation efficace des ID et des classes est également abordée, préparant le terrain pour des techniques de stylisme plus avancées et une personnalisation poussée de vos pages web.

La maîtrise de ces concepts est cruciale pour tout développeur web souhaitant créer des sites web structurés, accessibles et bien organisés.

Les Balises de Base du HTML

Ces balises sont indispensables pour débuter avec n’importe quelle page web, en définissant la structure de base nécessaire pour un document HTML5 valide (la norme universelle standard).

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Votre titre ici</title>
</head>
<body>
    <!-- Le contenu visible de votre page -->
</body>
</html>

<!DOCTYPE html> : Définit la version du document HTML (HTML5 ici). Elle doit toujours être la première ligne d’un document HTML.
<html> : Englobe tout le contenu de votre page web (sauf le doctype). Elle accepte en attribut la langue du contenu.
<head> : Contient des informations sur le document (métadonnées), telles que le jeu de caractères et le titre de la page.
<body> : Englobe le contenu visible de la page web.

Les Métadonnées

Un document peut contenir des informations autres que le message en lui même.

Un document HTML a une tête et un corps, tout comme un courrier a un en-tête et un contenu principal.

Dans l’en-tête de notre page (<head>), on met des métadonnées : le titre de la page, l’encodage des caractères, etc.

Ces infos sont comme l’adresse et le timbre sur une lettre : essentielles mais pas directement du contenu visible dans le message.

Le corps (<body>) contient tout ce que les visiteurs voient et avec quoi ils interagissent : textes, images, boutons.

Vous comprenez maintenant la notion Head/Body et le rôle des méta-données ?

NON ?

Les Balises Structurantes

Ces balises aident à organiser le contenu de votre page en sections logiques, facilitant la navigation et l’accessibilité.

Exemple de body bien structuré :

<body>
<header>

</header>

<main>

 <section>

 </section>

</main>

<footer>

</footer>
</body>

<header> : C’est l’en-tête de votre page ou de certaines sections.
<main> : Ici, on met le contenu principal de la page.
<footer> : Et enfin, le pied de page, avec des infos comme les contacts ou les droits d’auteur.
<section> : Cette balise sert à regrouper du contenu thématiquement cohérent.

Le Contenu HTML

Pour enrichir notre page, et pas qu’elle soit un simple document texte, nous avons besoin d’autres balises pour ajouter des liens, des images, des listes, des boutons, etc…

Toutes ces balises ne s’inventent pas et sont disponibles dans la documentation officielle des éléments HTML.

Nous allons voir ensemble progressivement les balises les plus utilisés et suffisantes pour créer un site sur mesure.

Les Balises Incontournables

<h1> à <h6> : Définissent les titres. <h1> est le plus important et devrait être unique sur la page.
<p> : Définit un paragraphe.
<a> : Crée un hyperlien vers une section de la page, du site, ou vers l’extérieur.
<img> : Intègre une image. src spécifie le chemin de l’image, et alt fournit une description textuelle.

<h1>Ceci est un titre principal</h1>

<p>Ceci est un paragraphe expliquant le sujet.</p>

<a href="https://www.exemple.com">Visitez ce Site Web</a>

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

Utilisation des ID et des Classes 🔖

Les ID et les classes permettent de cibler spécifiquement ou classifier des éléments de votre page HTML.

<p id="premier-paragraph">Ceci est stylisé individuellement.</p>

<p class="texte">Ceci est un exemple de paragraphe avec une classe.</p>

ID (id= »… ») : Identificateur unique pour styliser spécifiquement un élément.

Classes (class= »… ») : Peuvent être utilisées sur plusieurs éléments pour appliquer les mêmes règles.

Voyons le résultat

!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site en HTML</title>
</head>
<body>
    <header>
        <h1>Mon Premier Titre</h1>
        <nav>
            <ul>
                <li><a href="#">Accueil</a>/li>
                <li><a href="#">À propos</a>/li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Titre de la section</h2>
            <p>Bienvenue sur mon site web. Voici mon premier paragraphe.</p>
        </section>
        <img src="chemin-vers-mon-image.jpg" alt="Description de l'image">
    </main>
    <footer>
        <p>© 2023 Mon site en HTML.</p>
    </footer>
</body>
</html>

Capture d'écran d'une page html sans css

Et oui c’est moche ! Mais c’est le comportement normal du HTML par défaut.

Nous n’avons pas indiqué au navigateur de nous renvoyer notre page avec un style particulier.

Et c’est le rôle d’un autre langage essentielle en développement web : Le CSS !

La suite ?

À ce stade, vous êtes capable de créer une page HTML basique, vous êtes prêt à passer à la prochaine étape.

Styliser son HTML avec dU CSS