Comment créer son site internet

Comprendre l’importance du HTML et son rôle dans la structure des sites web.

Comment trouver un développeur web en 2023. freelance

« En mode codage.«

🚫 HTML n’est pas un Langage de Programmation 💻

Bien que fondamental pour le web, le HTML est un langage de balisage conçu pour structurer les documents, et non pour créer des programmes exécutables.

Avant de plonger dans l’écriture de notre code HTML, nous devons choisir un éditeur adapté.

Alors que le bloc-notes peut sembler suffisant, un éditeur spécialisé comme Visual Studio Code (VS Code) offre des fonctionnalités qui faciliteront grandement notre apprentissage et notre production de code.

Aller droit au but

💻 Visual Studio Code

Visual Studio Code n’est pas juste un éditeur de texte ; c’est un environnement de développement intégré (IDE) léger et puissant, adapté au développement web.

Avec ses fonctionnalités de coloration syntaxique, d’auto-complétion, et de prévisualisation en direct, il est conçu pour améliorer votre productivité et réduire les erreurs de code.

Visuel d'un code html au bloc notes, pas de coloration syntaxique ni d'erreurs signalées — Visuel d’un code html au bloc notes, pas de coloration syntaxique ni d’erreurs signalées

Visuel d'un code html sur Visual Studio Code, coloration syntaxique et les erreurs sont signalés — Visuel d’un code html sur Visual Studio Code, coloration syntaxique et les erreurs sont signalés

Installation de VS Code

Téléchargement : Rendez-vous sur le site officiel et téléchargez la version correspondant à votre système d’exploitation.
Lancez l’installeur et suivez les instructions. L’installation est rapide et sans difficulté.

Qu’importe le choix de votre éditeur, le principe et les codes restent les mêmes !

Écriture du Code HTML

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

Création du Fichier : Dans votre dossier de projet, faites un clic droit, sélectionnez « Nouveau Document Texte », et nommez-le avec l’extension .html (la première page que votre navigateur appelle, c’est l’index, index.html).
Édition : Ouvrez votre fichier comme vous ouvrirez n’importe quel document. (File => Open file ou open Folder si vous souhaitez travailler dans votre dossier directement (c’est ce que je fais perso ! ).
Copiez-collez le code suivant et enregistrez.

<!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>

Félicitations, vous venez de créer votre page d’accueil !

Tous les navigateurs reconnaissent le format de votre fichier et traduisent pour nous être humain ce qu’il contient.

Ces navigateurs nous permettent d’inspecter le code qu’ils nous renvoient.

Inspection de la Page Web : Après avoir enregistré votre fichier, ouvrez-le dans votre navigateur et utilisez l’outil « Inspecter » pour voir comment le navigateur interprète votre code.

Même une page vide peut révéler des balises essentielles générées automatiquement par le navigateur.

Rendu html d'une page vide dans l'inspecteur d'élément. On y voit les balises nécessaires : html, head, body — Rendu html d’une page vide dans l’inspecteur d’élément. On y voit les balises nécessaires : html, head, body

Rendu html de notre page dans l'inspecteur d'élément. On y voit toutes les balises et contenu que nous avons inséré. — Rendu html d’une page avec une structure html de base dans l’inspecteur d’élément. On y voit toutes les balises et contenu que nous avons inséré.

Le langage HTML

Démarrons par une introduction au concept fondamental des balises HTML.

Cela aidera à établir une compréhension solide de la manière dont le HTML fonctionne et de son importance dans la structure des sites web.

Les Balises HTML

Les balises HTML sont entourées de crochets angulaires (< >).

Elles viennent généralement par paires : une balise ouvrante et une balise fermante.

La balise fermante est identique à la balise ouvrante, mais inclut une barre oblique (/) juste après le crochet angulaire ouvrant.

Elles sont utilisées pour marquer et organiser le contenu, indiquant au navigateur comment afficher ce contenu.

Ceci est un paragraphe.

 : La balise ouvrante.
 : La balise fermante.

Lorsque vous utilisez un éditeur de texte et que vous sélectionnez un bout de texte puis cliquez sur « mettre en gras« . Vous spécifiez en réalité à votre éditeur d’entourer ce texte de la balise .

L’exemple suivant sera plus pertinent :

capture d'écran d'un wysiwyg pour expliquer le fonctionnement d'une balise html

Tous les langages web utilisent l’anglais !  pour underline, qui signifie souligné en anglais.

Certaines balises ne nécessitent pas de balise fermante, parce qu’elles attendent des instructions particulières.

Exemple avec les images qui attendent la source et que l’on peut compléter de certains attributs respectant la syntaxe suivante :

nomdelattribut= »mon_parametre ».

<img src="img/image.jpg" alt="description de l'image" width="250px">

La suite ?

Maintenant que vous avez compris comment créer une page HTML et survolé son langage, vous êtes prêt à passer à la prochaine étape.

Comprendre TOUTES LES BALISES HTML