Embedded Files
Les éléments constitutifs d'une page HTML
Les éléments constitutifs d'une page HTML
1 / Quel est le code d'une page HTML de base ?
1 / Quel est le code d'une page HTML de base ?
Code d'une page HTML de base
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma page HTML</title>
</head>
<body>
<h1>Mon premier titre</h1>
<p>Ceci est mon premier paragraphe</p>
</body>
</html>
Ce code est composé de deux éléments principaux :
L'élément <html>, qui est l'élément racine de la page. Il contient tous les autres éléments de la page.
L'élément <body>, qui contient le contenu visible de la page.
Dans la partie <head> de la page, nous pouvons trouver le titre de la page, qui est affiché dans l'onglet du navigateur.
Dans la partie <body> de la page, nous pouvons trouver un titre et un paragraphe. Le titre est affiché en gros caractères, tandis que le paragraphe est affiché en texte normal.
Voici une explication plus détaillée du code
Voici une explication plus détaillée du code
Cette ligne indique au navigateur que le document est un document HTML.
<!DOCTYPE html>
Cette ligne définit la langue du document. Dans ce cas, la langue est le français.
<html lang="fr">
Cette section contient des informations sur la page, telles que le titre.
<head>
<title>Ma page HTML</title>
</head>
Cette section contient le contenu visible de la page.
<body>
<h1>Mon premier titre</h1>
<p>Ceci est mon premier paragraphe</p>
</body>
Cette ligne indique la fin du document HTML.
</html>
Vous pouvez modifier ce code pour créer votre propre page HTML. Par exemple, vous pouvez ajouter des images, des liens, des formulaires, etc.
2 / Ecris moi un <head> HTML standard
2 / Ecris moi un <head> HTML standard
Voici un <head> HTML standard
<head>
<title>Titre de la page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
Ce <head> contient les éléments suivants :
Un titre de page, qui est affiché dans l'onglet du navigateur.
Une déclaration de codage de caractères, qui indique au navigateur le type de caractères utilisés dans la page.
Une déclaration de viewport, qui indique au navigateur la taille de la page à afficher sur l'écran de l'utilisateur.
Un lien vers un fichier CSS, qui contient les styles de la page.
Voici une explication plus détaillée de chaque élément
Voici une explication plus détaillée de chaque élément
Titre de page
<title>Titre de la page</title>
Le titre de page est un élément <title> qui contient le titre de la page. Il est affiché dans l'onglet du navigateur et dans les résultats de recherche.
Déclaration de codage de caractères
<meta charset="utf-8">
La déclaration de codage de caractères est un élément <meta charset> qui indique au navigateur le type de caractères utilisés dans la page. Cela est important pour s'assurer que le texte de la page est affiché correctement.
Déclaration de viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
La déclaration de viewport est un élément <meta name="viewport" qui indique au navigateur la taille de la page à afficher sur l'écran de l'utilisateur. Cela est important pour s'assurer que la page s'affiche correctement sur différents appareils.
Lien vers un fichier CSS
<link rel="stylesheet" href="style.css">
Un lien vers un fichier CSS est un élément <link rel="stylesheet" href="style.css"> qui indique au navigateur d'utiliser un fichier CSS pour styliser la page.
Vous pouvez modifier ce <head> pour ajouter des informations supplémentaires, telles que des métadonnées pour les moteurs de recherche ou des scripts JavaScript.
Voici quelques exemples de métadonnées pour les moteurs de recherche :
<meta name="description" content="Description de la page"> : Cette métadonnée fournit une description de la page pour les moteurs de recherche.
<meta name="keywords" content="Mots-clés"> : Cette métadonnée fournit une liste de mots-clés associés à la page pour les moteurs de recherche.
Voici un exemple de script JavaScript
<script src="script.js"></script>
Ce script est inclus dans la page et sera exécuté par le navigateur lorsque la page sera chargée.
3 / Donne moi les principales balises HTML ?
3 / Donne moi les principales balises HTML ?
Bien sûr, voici les principales balises HTML
Balises de structure ces balises sont utilisées pour organiser le contenu d'une page HTML.
<html> : Définit le début et la fin d'un document HTML. </html>
<head> : Définit le contenu non visible de la page, tel que le titre, les métadonnées et les liens vers des fichiers CSS ou JavaScript. </head>
<body>: Définit le contenu visible de la page, tel que le texte, les images, les liens et les formulaires. </body>
<div>: Crée une division dans le contenu de la page. </div>
<section> : Crée une section dans le contenu de la page. </section>
<article> : Crée un article dans le contenu de la page. </article>
<header>: Crée une en-tête pour la page. </header>
<nav> : Crée une barre de navigation pour la page. </nav>
<footer> : Crée un pied de page pour la page. </footer>
Balises de texte ces balises sont utilisées pour formater le texte dans une page HTML.
<h1> à <h6> : Crée des titres de différents niveaux. </h1> à </h6>
<p> : Crée un paragraphe. </p>
<b> : Met le texte en gras. </b>
<i> : Met le texte en italique. </i>
<strong> : Met le texte en gras. </strong>
<em> : Met le texte en italique. </em>
<u> : Souligne le texte. </u>
<sub> : Met le texte en indice. </sub>
<sup> : Met le texte en exposant. </sup>
<blockquote> : Crée une citation. </blockquote>
<code> : Crée un bloc de code. </code>
<pre>: Crée un bloc de texte préformaté. </pre>
<form> : Crée un formulaire pour collecter des données de l'utilisateur.</form>
<input> : Crée un champ de saisie dans un formulaire.
<textarea> : Crée une zone de texte dans un formulaire. </textarea>
<select> : Crée une liste déroulante dans un formulaire. </select>
Balises d'images: Ces balises sont utilisées pour insérer des images dans une page HTML.
<img> : Insère une image dans la page.
Balises de liens et d'action ces balises sont utilisées pour créer un lien ou une action.
<a> : Crée un lien vers une autre page ou un autre fichier. </a>
<button> : Crée un bouton dans un formulaire. </button>
Voici quelques exemples d'utilisation de ces balises
<html lang="fr">
<head>
<title>Ma page HTML</title>
</head>
<body>
<h1>Mon titre</h1>
<p>Ceci est mon paragraphe</p>
<img src="image.jpg" alt="Ma photo">
<a href="<https://example.com>">Lien vers un site web</a>
<form action="form.php">
<input type="text" name="nom">
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Bien sûr, il existe de nombreuses autres balises HTML, mais celles-ci sont les plus courantes.
Ressources en ligne pour vous initier à l'HTML
Ressources en ligne pour vous initier à l'HTML
MDN Web Docs
👁️🗨️ Introduction au HTML - Apprendre le développement web | MDN
W3Schools
W3Schools
👁️🗨️ HTML Tutorial
Codecademy
Codecademy
👁️🗨️ Learn HTML | Codecademy
CodePen inspiration et exemples
CodePen inspiration et exemples
👁️🗨️ CodePen
Pour aller plus loin avec les balises HTML
Pour aller plus loin avec les balises HTML
MDN Web Docs
Page updated
Google Sites
Report abuse