Cours IT Bases HTML 009_Hello HTML
Qu’est-ce que HTML ?
Le réseau, ou plus précisément le World Wide Web, est composé de nombreux documents et ressources liés entre eux. Ces documents et ressources sont écrits en HTML et sont appelés pages web. HTML est la base des pages web et définit leur structure et leur contenu.
Lorsque vous saisissez une URL dans votre navigateur (par exemple, www.zhaojian.net), le navigateur envoie une requête au serveur qui fournit cette page web. Le serveur répond à cette requête et renvoie la page web demandée (c’est-à-dire du HTML) au navigateur. Le navigateur analyse ensuite ce HTML et l’affiche comme la page web que vous voyez habituellement.
HTML (HyperText Markup Language, langage de balisage hypertexte) est un langage de balisage utilisé pour créer et concevoir la structure des pages web. HTML est composé d’une série d’éléments qui peuvent être utilisés pour entourer différentes parties du contenu, le faisant apparaître ou fonctionner d’une certaine manière. Une paire de balises peut ajouter un hyperlien à un texte ou une image, mettre du texte en italique ou en gras, créer des paragraphes, des listes, etc.
[!Résumé]
- HTML n’est pas un langage de programmation, mais un langage de balisage
- Les documents HTML contiennent des balises HTML et du contenu texte (pourquoi pas d’images ?)
- Les documents HTML sont également appelés pages web
Un élément HTML complet
Exemple :
<p>hello HTML!</p>Effet :
Analyse de structure :
[!Résumé]
- Un élément HTML complet se compose de trois parties : balise ouvrante, contenu et balise fermante ;
- Balise ouvrante (Opening tag) : Contient le nom de l’élément (dans cet exemple p), entouré de chevrons gauche et droit. La balise ouvrante marque l’endroit où l’élément commence ou prend effet ;
- Contenu (Content) : Le contenu de l’élément ;
- Balise fermante (Closing tag) : Similaire à la balise ouvrante, mais inclut une barre oblique avant le nom de l’élément. Cela marque la fin de l’élément. Ne pas inclure une balise fermante est une erreur courante des débutants et peut produire des résultats étranges.
Une page HTML complète
Exemple :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello HTML</title></head><body> <p>hello HTML!</p></body></html>Effet :
Analyse de structure :
[!Résumé]
<!DOCTYPE html>— Déclare le type de document HTML. Le type de document est un vestige historique qui indique au navigateur la version et le type du document. Déclaration DOCTYPE en mode strict HTML4 :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html></html>— Élémenthtml, tout le contenu d’une page HTML, parfois appelé élément racine.<head></head>— Élémenthead, son contenu n’est pas visible pour l’utilisateur et inclut des éléments tels que des mots-clés de recherche pour les moteurs de recherche, des descriptions de pages, des styles CSS, des fichiers JavaScript et des déclarations d’encodage de caractères.<meta charset="utf-8">— Élémentmeta, utilisé pour fournir des métadonnées sur le document HTML. L’attribut charset définit le jeu de caractères de votre document sur UTF-8.<title></title>— Élémenttitle. Cet élément définit le titre de la page, affiché dans l’onglet du navigateur et servant également de texte descriptif pour les favoris.<body></body>— Élémentbody. Cet élément contient le contenu que les utilisateurs sont censés voir lors de la visite de la page, y compris du texte, des images, des vidéos, des jeux, des pistes audio jouables ou d’autres contenus.<p></p>— Élément de paragraphe, représente un paragraphe de texte.
Nom de l’élément | Fonction | Exemple |
|---|---|---|
<!DOCTYPE html> | Définit le type et la version du document HTML | <!DOCTYPE html> |
<html> | Définit l’élément racine du document HTML | <html lang="en"> |
<head> | Contient les méta-informations du document, comme le titre, la déclaration du jeu de caractères, les liens de styles et de scripts, etc. | <head>...</head> |
<title> | Définit le titre du document, affiché dans la barre de titre ou l’onglet du navigateur | <title>My Web Page</title> |
<meta> | Fournit des méta-informations sur le document, comme le jeu de caractères, les paramètres de viewport, les mots-clés, etc. | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | Référence des ressources externes, comme des feuilles de style et des icônes | <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
<style> | Définit les styles en interne dans le document | <style>body { font-family: Arial, sans-serif; }</style> |
<script> | Définit ou référence des scripts, peut être contenu dans le document ou référencer des scripts externes | <script src="script.js"></script> |
<noscript> | Définit le contenu affiché lorsque le navigateur ne prend pas en charge les scripts | <noscript>Sorry, your browser does not support JavaScript.</noscript> |
<base> | Spécifie l’URL de base pour tous les liens relatifs de la page | <base href="https://www.zhaojian.net/"> |
Liens :
Extensions VS Code : Remote - SSH Remote Development
Navigateur web Google Chrome Navigateur web Google Chrome (Chine)