Notions de base en HTML
Dans cet article, nous expliquons les notions de base du HTML.
Cela explique les balises principales telles que la déclaration DOCTYPE, les balises <html>, <head> et <body>. Il décrit également les balises, les attributs et les caractères spéciaux.
YouTube Video
Notions de base en HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>Au début du fichier, nous déclarons qu'il s'agit d'un document HTML5, indiquant qu'il suit les règles du HTML5.
-
<html>La balise
<html>est l'élément le plus externe dans un document HTML qui enveloppe tout le contenu. Chaque fichier HTML ne contient qu'une seule balise<html>, et toutes les autres balises y sont imbriquées. Lelang="en"dans la balise d'ouverture<html>s'appelle un attribut et informe le navigateur que le document est écrit en anglais. Cela aide à informer les lecteurs d'écran et les moteurs de recherche de la langue du document. -
<head>La balise
<head>définit les métadonnées (informations) pour la page. Cela inclut le titre de la page, le codage des caractères et les paramètres de conception adaptative. Le design adaptatif se réfère à une méthode conçue pour permettre aux sites web ou applications de s'adapter et de s'afficher correctement sur divers appareils et tailles d'écran. Cela permet aux utilisateurs de voir confortablement le contenu sur différents appareils tels que les smartphones, tablettes et ordinateurs de bureau.<meta charset="UTF-8">définit l'encodage des caractères du document à UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">est un paramètre qui optimise l'affichage pour les appareils mobiles. La page s'ajuste à la largeur de l'écran de l'appareil.<title>représente le titre de la page affiché dans l'onglet du navigateur. Dans cet exemple, le titre 'Notions de base sur le HTML' est défini. -
<body>La balise
<body>contient la partie qui affiche le contenu aux utilisateurs. Dans cette balise, le texte, les images, les liens, etc. sont écrits. -
<main>La balise
<main>représente le contenu principal de la page. Cela inclut les titres et les paragraphes. -
<h1>La balise
<h1>représente le titre le plus important de la page. Il est courant d'utiliser la balise<main>et la balise<h1>une seule fois dans un document. -
<p>La balise
<p>représente un paragraphe. -
<!-- Comment -->Vous pouvez écrire des commentaires en HTML dans ce format. Étant donné que le HTML côté client peut être vu par n'importe qui, n'incluez pas d'informations sensibles telles que des mots de passe ou des clés API dans les commentaires.
HTML a de nombreuses balises, mais faites attention aux points suivants ici. Un fichier HTML se compose d'une déclaration DOCTYPE et d'une seule balise <html>. La balise <html> contient une balise <head> et une balise <body>. En HTML, toutes les balises sont contenues dans la balise <html>, exprimant la structure du texte par des relations parent, enfant et frère, similaires à une structure arborescente. Lors de l'écriture de HTML, concentrez-vous également sur la structure du document.
Balises et Attributs
Ensuite, jetons un coup d'œil aux balises et attributs HTML.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Les balises sont entourées de crochets angulaires (<, >) et consistent généralement en une paire de balises ouvrante et fermante. Cependant, il existe également des balises simples, comme la balise <meta> et la balise <img>, qui ne contiennent pas de contenu. Les balises simples ne nécessitent pas de balise fermante.
Les balises peuvent avoir des attributs, qui fournissent des informations supplémentaires à la balise. Les attributs sont écrits à l'intérieur de la balise ouvrante au format attributeName="value".
Ici, <div> est appelé une balise, et <div>Content</div> un élément.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Les attributs courants en HTML incluent id, class et style. L'attribut id est utilisé pour donner à un élément un identifiant unique, et il ne peut y avoir qu'un seul élément avec le même id sur une page. C'est utile lors de la manipulation d'éléments spécifiques avec JavaScript ou CSS. L'attribut class vous permet de regrouper plusieurs éléments avec CSS ou JavaScript en attribuant un nom de classe. Vous pouvez attribuer la même classe à plusieurs éléments, permettant ainsi de partager des styles. L'attribut style spécifie les styles CSS en ligne pour un élément. Normalement, les styles sont définis dans une feuille de style externe ou dans la balise <style>, mais cet attribut est utilisé lorsque vous souhaitez spécifier des styles directement pour des éléments individuels.
Caractères spéciaux en HTML
Ensuite, examinons les caractères spéciaux en HTML.
En HTML, il existe des caractères spéciaux utilisés pour afficher des symboles et caractères spécifiques. Ces caractères spéciaux sont appelés entités. Les caractères spéciaux commencent par & (esperluette), suivis d'un nom ou d'un numéro, et se terminent par ; (point-virgule).
Caractères spéciaux représentatifs en HTML
Voici quelques caractères spéciaux communs.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Exemples d'utilisation de caractères spéciaux en HTML
En particulier, les crochets angulaires (<, >) et les guillemets doivent être utilisés correctement en HTML.
Les chevrons (<, >) et les guillemets doivent être représentés comme des caractères spéciaux en HTML, comme montré ci-dessous.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
Versions HTML
Jetons un coup d'œil aux versions de HTML ici.
Les versions de HTML ont évolué pour définir la structure et la fonctionnalité des pages web. Voici les principales versions :.
-
HTML 1.0 (1993)
La première version de HTML ne comportait que des fonctionnalités de balisage très basiques. Elle définissait des éléments tels que les liens, les titres, les paragraphes et les listes.
-
HTML 2.0 (1995)
La première version normalisée, avec plus d'éléments ajoutés, y compris la prise en charge des formulaires et des tables.
-
HTML 3.2 (1997)
Davantage de fonctionnalités de mise en page ont été ajoutées, permettant l'intégration d'éléments de style et de scripts. De plus, la mise en page utilisant l'élément
<table>est devenue courante. -
HTML 4.01 (1999)
La séparation de la structure et de la présentation a progressé, et le CSS a été introduit. La création de sites conformes aux normes est devenue recommandée. De plus, l'internationalisation et l'accessibilité des documents ont été améliorées.
-
HTML5 (2014)
La dernière version majeure, introduisant la prise en charge de la vidéo et de l'audio, du canvas, du stockage local, de la géolocalisation et d'autres nouvelles API. Elle est adaptée aux mobiles, permettant le développement d'applications web plus interactives.
HTML5.2 est une version de HTML recommandée en 2017, et c'est une version améliorée de HTML5. Depuis HTML5.2, il est mis à jour en continu en tant que Norme Vivante HTML, au lieu d'avoir un numéro de version statique.
HTML a évolué à travers ces versions, se développant en une technologie web plus flexible et puissante.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.