HTML - Introduction

Qu'est-ce que le HTML ?

Le HTML (Hypertext Markup Language) est le langage de balisage standard utilisé pour créer et structurer le contenu sur le web. C'est la base de toutes les pages web et il est utilisé pour définir la structure et la mise en page du contenu qui apparaît sur un site web.

Le HTML utilise un système de balises et d'attributs pour marquer le contenu, tels que :

Ces balises indiquent aux navigateurs web comment afficher le contenu, facilitant ainsi la lecture et l'interaction des utilisateurs avec les pages web.

Dans le développement web, le HTML fonctionne en tandem avec :

• CSS (Cascading Style Sheets) : Utilisé pour styliser et mettre en page le contenu
• JavaScript : Utilisé pour ajouter de l'interactivité et des fonctionnalités aux pages web

Le HTML est une compétence essentielle pour toute personne impliquée dans le développement web, car il fournit la structure de base pour tout contenu web. Apprendre le HTML est la première étape dans la création de sites web et c'est une compétence précieuse pour les designers web, les développeurs et les créateurs de contenu.

<p>Ceci    est   un   paragraphe   avec    des   espaces   supplémentaires.</p>

Ceci est un paragraphe avec des espaces supplémentaires.

<p>Ceci est un paragraphe.</div>

<p>Ceci est un paragraphe.</p>

Histoire du HTML

Le HTML a une histoire qui remonte aux débuts du World Wide Web. Il a été créé par Tim Berners-Lee, un informaticien britannique, à la fin des années 1980 alors qu'il travaillait au CERN (Organisation européenne pour la recherche nucléaire). Berners-Lee a créé le HTML comme moyen de structurer et de partager des documents sur internet.

La première version du HTML a été publiée en 1991 et était très basique. Elle ne comportait que quelques balises pour structurer le texte, comme les titres et les paragraphes. Au fil du temps, le HTML a évolué pour inclure plus de fonctionnalités.

Voici quelques étapes clés dans l'histoire du HTML :

HTML5 est conçu pour être rétrocompatible avec les versions antérieures du HTML, donc les sites web créés avec des versions plus anciennes du HTML fonctionnent toujours avec les navigateurs web modernes. Cependant, de nombreux développeurs web utilisent maintenant HTML5 en raison de ses nouvelles fonctionnalités et de sa fonctionnalité améliorée.

Aujourd'hui, le HTML continue d'évoluer et de s'améliorer, avec l'ajout régulier de nouvelles fonctionnalités et technologies. En tant que colonne vertébrale du web, le HTML joue un rôle important dans la création des sites web interactifs et attrayants que nous utilisons quotidiennement.

Pourquoi apprendre le HTML ?

Le HTML est la base de tous les sites web et constitue une compétence importante pour toute personne impliquée dans le développement web. Que vous soyez un développeur web professionnel ou un débutant amateur, l'apprentissage du HTML est nécessaire pour créer et maintenir des sites web.

Une des principales raisons d'apprendre le HTML est son importance dans le développement web. Le HTML fournit la structure et le contenu d'un site web, qui sont ensuite stylisés avec le CSS et améliorés avec le JavaScript. Sans HTML, il n'y aurait pas de sites web tels que nous les connaissons aujourd'hui. Comprendre le HTML est nécessaire pour créer des sites web bien structurés, sémantiques et accessibles qui fonctionnent sur différents navigateurs et appareils.

L'apprentissage du HTML offre également de nombreux avantages tant pour les professionnels du web que pour les amateurs. Pour les professionnels, la connaissance du HTML est une compétence de base requise pour la plupart des emplois en développement web. Elle permet de créer et modifier des pages web, de résoudre des problèmes et de travailler avec des systèmes de gestion de contenu (CMS) et des frameworks web. Pour les amateurs, l'apprentissage du HTML ouvre des possibilités de création de sites web personnels, de blogs et de portfolios en ligne. Il fournit également une base solide pour l'apprentissage d'autres technologies web et peut être un passe-temps amusant et gratifiant.

Le HTML n'est pas seulement important en soi, mais sert également de base à d'autres technologies web. Une fois que vous maîtrisez bien le HTML, vous pouvez facilement apprendre le CSS pour styliser vos pages web et les rendre visuellement attrayantes. Vous pouvez également apprendre le JavaScript pour ajouter de l'interactivité et des fonctionnalités dynamiques à vos sites web. D'autres technologies web, comme les langages de programmation côté serveur (par exemple, PHP, Python) et les bases de données (par exemple, MySQL), s'appuient également sur le HTML pour afficher du contenu aux utilisateurs.

De plus, comprendre le HTML est précieux pour travailler avec des systèmes de gestion de contenu populaires comme WordPress, Drupal et Joomla. Ces plateformes utilisent des modèles et des thèmes HTML pour contrôler la structure et l'apparence des sites web. Connaître le HTML vous permet de personnaliser ces modèles, de créer vos propres thèmes et de résoudre tout problème qui pourrait survenir.

<p>This    is   a   paragraph   with    extra   spaces.</p>

This is a paragraph with extra spaces.

<p>This is a paragraph.</div>

<p>This is a paragraph.</p>

Débuter avec HTML

Pour commencer à écrire en HTML, vous avez besoin de quelques outils de base : un éditeur de texte et un navigateur web. Un éditeur de texte est un programme qui vous permet d'écrire et de modifier des fichiers texte simples, comme Notepad (Windows) ou TextEdit (Mac). Mais pour une meilleure expérience de codage, vous voudrez peut-être utiliser un éditeur de code conçu pour le développement web, tel que :

• Visual Studio Code
• Sublime Text
• Atom
• Brackets

Ces éditeurs de code ont des fonctionnalités comme la coloration syntaxique, l'auto-complétion et la gestion de fichiers qui rendent l'écriture HTML plus facile et rapide.

Pour visualiser vos pages HTML, vous aurez besoin d'un navigateur web comme Google Chrome, Mozilla Firefox, Apple Safari ou Microsoft Edge. Les navigateurs web lisent le code HTML et affichent le contenu formaté aux utilisateurs.

Créer un document HTML de base est simple. Ouvrez votre éditeur de texte et créez un nouveau fichier. Commencez par écrire la structure du document HTML, qui comprend ces éléments :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page HTML</title>
</head>
<body>
    <h1>Bonjour, le monde !</h1>
    <p>Ceci est ma première page HTML.</p>
</body>
</html>

Décomposons la structure d'un document HTML :

Sauvegardez le fichier avec une extension .html (par exemple, index.html) et ouvrez-le dans votre navigateur web. Vous devriez voir le titre "Bonjour, le monde !" et le paragraphe "Ceci est ma première page HTML." affichés sur la page.

En continuant à apprendre HTML, vous découvrirez comment ajouter plus d'éléments, d'attributs et de contenu pour créer des pages web structurées et visuellement attrayantes. N'oubliez pas de toujours commencer par la structure de base du document et de construire à partir de là.

Éléments et balises HTML

Les documents HTML sont composés d'éléments, définis par des balises. Les éléments sont les blocs de construction d'une page HTML et structurent le contenu, comme les titres, les paragraphes, les listes, les liens et les images. Les balises marquent le début et la fin d'un élément et fournissent des informations sur son but et son contenu.

Un élément HTML comporte trois parties principales :

1. Balise d'ouverture : Commence un élément, entourée de crochets angulaires (< >). La balise d'ouverture contient le nom de l'élément, comme <p> pour un paragraphe ou pour une image.

2. Contenu : Le contenu de l'élément, qui peut être du texte, d'autres éléments, ou les deux.

3. Balise de fermeture : Termine un élément, également entourée de crochets angulaires, avec une barre oblique (/) avant le nom de l'élément. Par exemple,

   ferme un élément de paragraphe.

<p>Ceci est un paragraphe de texte.</p>

Certains éléments, appelés éléments vides ou auto-fermants, n'ont pas de balise de fermeture ni de contenu. Ces éléments se ferment d'eux-mêmes et insèrent du contenu dans la page sans l'envelopper. Voici des exemples d'éléments vides :

<img src="image.jpg" alt="Une image d'exemple">
<br>
<hr>
<input type="text" name="username">

Voici quelques éléments HTML courants que vous verrez :

En apprenant davantage sur HTML, vous découvrirez de nombreux autres éléments, chacun ayant son propre but et ses propres attributs. En imbriquant les éléments les uns dans les autres et en appliquant les balises appropriées, vous pouvez créer des documents HTML bien structurés et significatifs.

Attributs HTML

Les attributs HTML fournissent des informations supplémentaires sur un élément et modifient son comportement ou son apparence. Les attributs se trouvent dans la balise d'ouverture d'un élément et ont un nom et une valeur, séparés par un signe égal (=). La valeur de l'attribut est toujours entre guillemets, simples ('') ou doubles (").

Les attributs sont importants pour personnaliser et améliorer les éléments HTML. Ils peuvent être utilisés pour :

Voici quelques attributs HTML courants que vous verrez :

<img src="logo.png" alt="Logo de l'entreprise" width="200" height="100">
<a href="https://www.example.com" target="_blank">Visiter Example.com</a>
<input type="text" name="nom_utilisateur" required>
<p class="intro" style="font-weight: bold;">Ceci est un paragraphe d'introduction.</p>

Tous les attributs ne fonctionnent pas avec tous les éléments. Chaque élément a son propre ensemble d'attributs valides, et l'utilisation d'attributs non valides ne modifiera pas l'élément.

En travaillant avec HTML, vous apprendrez davantage sur les différents attributs disponibles et comment ils peuvent être utilisés pour créer des pages web dynamiques et interactives. En combinant judicieusement les éléments et les attributs, vous pouvez structurer votre contenu et contrôler son apparence pour créer des sites web attrayants et conviviaux.

Structure d'un document HTML

Chaque document HTML suit une structure de base qui inclut la déclaration doctype et les éléments <html>, <head> et <body>. Cette structure aide les navigateurs et autres outils à comprendre et afficher correctement le contenu.

La déclaration doctype est la première ligne d'un document HTML et indique au navigateur quelle version de HTML est utilisée. En HTML5, la déclaration doctype est simplement <!DOCTYPE html>. Cette déclaration n'est pas une balise HTML mais une instruction pour le navigateur.

Après la déclaration doctype, l'élément <html> est l'élément racine d'une page HTML. Il contient tout le contenu et les structures du document. L'attribut lang dans la balise <html> spécifie la langue du document, comme "en" pour l'anglais ou "fr" pour le français.

À l'intérieur de l'élément <html>, il y a deux sections principales : <head> et <body>.

L'élément <head> contient des méta-informations sur le document qui ne sont pas affichées sur la page elle-même. Cela inclut :

• <title> : Spécifie le titre de la page web, qui apparaît dans la barre de titre ou l'onglet du navigateur.
• <meta> : Fournit des métadonnées sur le document, comme l'encodage des caractères, les paramètres de viewport, les mots-clés et les descriptions.
• <link> : Connecte le document à des ressources externes, comme des feuilles de style CSS ou des favicons.
• <script> : Inclut du code JavaScript ou des liens vers des scripts externes.

L'élément <body> contient le contenu principal du document HTML qui est affiché dans la fenêtre du navigateur. Cela inclut du texte, des images, des liens, des tableaux, des formulaires et d'autres éléments qui composent la partie visible de la page web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bienvenue sur Ma Page Web</h1>
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">À propos</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>À propos de moi</h2>
        <p>Bonjour, je suis Jean Dupont. Je suis développeur et concepteur web.</p>
    </main>
    <footer>
        <p>&copy; 2023 Ma Page Web. Tous droits réservés.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Une structure de document appropriée est importante pour plusieurs raisons :

En suivant la structure de document HTML standard et en utilisant les éléments et attributs appropriés, vous pouvez créer des pages web bien organisées, sémantiquement significatives et accessibles qui fonctionnent bien pour tous les utilisateurs.