¶ Les bases du web
¶ Les différentes balises
¶ Balises de titre : h1, h2, h3, h4, h5, h6
Ces balises sont utilisées pour structurer les titres et sous-titres d'une page web.
-
Exemple en code :
<h1 id="retour">Ceci est un grand titre</h1> -
Rendu sur une page web :
¶ Ceci est un grand titre
¶ Balises de mise en forme
Les balises de mise en forme permettent de styliser du texte, comme le mettre en gras, en italique ou souligné.
-
Exemple en code :
<strong>Texte en gras</strong> <em>Texte en italique</em> <u>Texte souligné</u> -
Rendu sur une page web :
Texte en gras
Texte en italique
Texte souligné
¶ Les images
La balise <img> permet d’afficher une image. Une image peut être chargée via une URL ou un fichier local. Il est recommandé d’utiliser un chemin relatif pour une meilleure gestion des médias.
Vous pouvez également ajuster la largeur et la hauteur de l'image à l'aide des attributs width et height.
-
Exemple de code :
<!-- Exemple avec une URL --> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ22WNxVx0A_18emadFoqja4aD12kgSsgc6tg&s" width="100px" height="200px"> <!-- Exemple avec une image locale --> <img src="/cours/html/base/coffee-morning-good-morning-coffee-images.gif" width="100px" height="100px"> -
Rendu sur une page web :
Via URL :
Via fichier local :
¶ Les liens hypertextes ou ancres
Les liens hypertextes permettent de naviguer entre des pages ou des sections d’une page via un identifiant (id).
-
Exemple en code :
<a href="#retour">Mon super lien</a>Dans cet exemple, cliquer sur le lien fait remonter la page jusqu'à l'exemple de titre plus haut.
-
Rendu sur une page web :
Mon super lien
¶ Les paragraphes
Pour organiser le contenu, la balise <p> est utilisée pour créer des paragraphes.
Il est déconseillé d'imbriquer des paragraphes, sauf dans des cas spécifiques.
-
Exemple de code :
<p>Mon premier paragraphe</p> <p>Mon second paragraphe</p> <p> Paragraphe "Parent" <p>Paragraphe "Enfant"</p> </p> -
Rendu sur une page web :
Mon premier paragraphe
Mon second paragraphe
Paragraphe "Parent"
Paragraphe "Enfant"
¶ Les sauts de ligne
Pour insérer des sauts de ligne simples, vous pouvez utiliser la balise <br>.
-
Exemple en code :
Ceci est écrit en <br> une seule </br> ligne -
Rendu sur une page web :
Ceci est écrit en
une seule
ligne
¶ La structure de page
La structuration d'une page est fondamentale, aussi bien pour vous que pour le navigateur. Une structure basique (sans contenu) ressemble à ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>Ma super page</title>
</head>
<body>
</body>
</html>
Voyons en détail chaque élément.
¶ Le doctype
La première balise, <!DOCTYPE html>, permet au navigateur de savoir quel type de document il doit interpréter.
Cette balise est obligatoire pour les langages à balises comme le HTML et le XML. Dans notre cas, elle indique un document HTML5.
¶ L'espace de code
Le contenu HTML de la page doit être placé entre les balises <html></html>.
On utilise généralement l'attribut lang pour définir la langue principale de la page, comme dans cet exemple avec lang="fr". Cela permet aux navigateurs modernes de proposer ou non de traduire la page.
¶ L'en-tête de page
L'en-tête de la page se trouve entre les balises <head></head>. Elle contient des informations essentielles pour le navigateur et le référencement (SEO). Voici les principaux éléments qu'on y trouve :
- Méta-données : Utilisées pour configurer la page.
Exemple :
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- Liens vers des ressources externes : Permettent de connecter des fichiers CSS, des polices ou d'autres ressources.
Exemple :
<link rel="stylesheet" href="styles.css" />
- Titre de la page : Défini grâce à la balise
<title></title>, il s'affiche sur l'onglet du navigateur.
Exemple :
<title>Ma super page</title>
- Styles intégrés (déconseillé) : Des styles spécifiques peuvent être ajoutés avec
<style></style>, bien que cela ne soit pas une bonne pratique.
¶ Le corps de la page
Le contenu visible par l'utilisateur se place dans la balise <body></body>.
C'est dans cette section que vous ajoutez tous les éléments comme du texte, des images, des vidéos, ou des scripts interactifs.
La structuration de cette partie est essentielle pour obtenir un code propre, lisible et organisé. Cette structuration sera abordée dans un cours plus avancé.
¶ Conclusion
Dans ce cours, vous avez appris les balises de base ainsi que la structure basique à adopter lors de la création d'une page web. Vous pouvez utiliser ce qui est donné dans ce cours comme modèle ou bien utilisé "emmet" depuis Visual Studio Code (par exemple) pour gagner du temps.