4.20. Introduction au HTML : structure de base, balises et attributs : positionnement en CSS
HTML, qui signifie Hyper Text Markup Language, est le langage de balisage standard pour la création de pages Web et d'applications. Avec CSS et JavaScript, HTML est une technologie fondamentale utilisée par la plupart des sites Web pour créer des pages Web visuellement attrayantes, des interfaces utilisateur pour les applications Web et des interfaces utilisateur pour de nombreuses applications mobiles.
Structure de base d'un document HTML
Un document HTML a une structure arborescente, où chaque élément et son contenu sont représentés sous la forme d'un objet DOM (Document Object Model).
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
≪/head>
<body>
<h1>Ceci est un en-head</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
</body>
</html>
Le <!DOCTYPE html> est la déclaration du type de document et aide les navigateurs à afficher correctement les pages Web. Il ne doit apparaître qu'une seule fois, en haut de la page (avant toute balise HTML).
Le code <html> est la racine d'une page HTML. La <head> contient des métainformations sur le document HTML. Le <title> spécifie un titre pour le document HTML (qui est affiché dans la barre de titre du navigateur ou dans l'onglet de la page).
Le <body> définit le corps du document et est un conteneur pour toutes les parties visibles du document HTML.
Balises et attributs HTML
Les balises HTML constituent la base de toute page Web. Ils sont utilisés pour définir et organiser le contenu d'une page Web. Chaque balise HTML possède une syntaxe spécifique qui doit être suivie pour que le navigateur puisse l'interpréter correctement.
Un élément HTML est défini par une balise de début et, généralement, une balise de fin. Le contenu de l'élément est tout ce qui se trouve entre la balise de début et la balise de fin. Quelques exemples d'éléments HTML incluent <h1>, <p>, <div>, <body>, <head>, <title>, etc.
Les attributs HTML sont utilisés pour fournir des informations supplémentaires sur les éléments. Ils sont toujours spécifiés dans l'élément de départ et se présentent généralement sous forme de paires nom/valeur telles que : nom="valeur". Par exemple, l'attribut 'class' est utilisé pour spécifier une ou plusieurs classes pour un élément HTML. L'attribut 'id' est utilisé pour spécifier un identifiant unique pour un élément HTML.
Positionnement en CSS
CSS, qui signifie Cascading Style Sheets, est un langage de feuille de style utilisé pour décrire l'apparence d'un document écrit en HTML. CSS est utilisé pour contrôler la mise en page de plusieurs pages Web à la fois.
Le positionnement en CSS est un concept important qui vous permet de contrôler où et comment les éléments HTML sont positionnés sur la page Web. Il existe plusieurs propriétés de positionnement en CSS que vous pouvez utiliser pour contrôler le positionnement, telles que : "statique", "relatif", "fixe", "absolu" et "collant".
Par défaut, les éléments sont positionnés de manière « statique », ce qui signifie qu'ils sont affichés sur la page dans l'ordre dans lequel ils apparaissent dans le code HTML. Si vous souhaitez déplacer un élément par rapport à sa position normale, vous pouvez utiliser la position « relative ». Si vous souhaitez positionner un élément par rapport à la fenêtre, vous pouvez utiliser la position « fixe ». Si vous souhaitez positionner un élément par rapport à l'élément parent le plus proche (au lieu d'une position « statique »), vous pouvez utiliser la position « absolue ». Si vous souhaitez positionner un élément en fonction du défilement de l'utilisateur, vous pouvez utiliser la position « collante ».
Vous pouvez également utiliser les propriétés 'top', 'bottom', 'left' et 'right' pour déplacer l'élément de sa position d'origine lorsque vous utilisez les propriétés 'relative', 'absolue', 'positions fixes' ou 'collant'.
