HTML, abréviation de HyperText Markup Language, constitue le langage standard pour la création de pages web. Il définit un ensemble de règles que les navigateurs interprètent pour afficher le contenu de manière cohérente. Le navigateur convertit ces balises en une présentation visible pour l'utilisateur.
La structure de base d'un document HTML se présente ainsi :
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
Contenu visible
</body>
</html>
L'instruction `` indique au navigateur d'utiliser le mode standards pour le rendu, assurant ainsi une compatibilité inter-navigateurs. Sans cette déclaration, le mode quirks pourrait être activé, entraînant des différences d'affichage.
Les balises <meta> fournissent des métadonnées sur le document. Par exemple, le jeu de caractères :
<meta charset="UTF-8">
Pour rediriger après un délai :
<meta http-equiv="refresh" content="5; url=https://exemple.com">
Pour les moteurs de recherche, on utilise des balises comme <meta name="description" content="Description de la page">.
La balise <title> définit le titre affiché dans l'onglet du navigateur. Les liens <link> permettent d'intégrer des feuilles de style externes ou des icônes :
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
Les styles CSS peuvent être intégrés directement dans le document avec la balise <style>, ou appliqués en ligne via l'attribut style. Pour une meilleure maintenance, l'utilisation de fichiers CSS externes est recommandée.
Éléments HTML courants
Les balises se divisent en éléments bloc (comme <div>, <h1>) et éléments en ligne (comme <span>, <a>). La balise <a> crée des liens, avec l'attribut target="_blank" pour ouvrir dans un nouvel onglet.
<a href="https://www.exemple.fr" target="_blank">Lien</a>
Les listes sont structurées avec <ul> (non ordonnée), <ol> (ordonnée), et <dl> (définition). Les tableaux utilisent <table>, avec fusion de cellules via colspan ou rowspan.
Fondamentaux CSS
CSS, pour Cascading Style Sheets, contrôle la présentation visuelle. Les sélecteurs ciblent des éléments :
- Sélecteur de type :
div { } - Sélecteur de classe :
.classe { } - Sélecteur d'identifiant :
#id { } - Sélecteur combiné :
div.classe { } - Sélecteur d'attribut :
input[type="text"] { }
Le modèle de boîte CSS comprend la marge (margin), la bordure (border), le remplissage (padding) et le contenu. Les propriétés display contrôlent le rendu, par exemple display: none cache l'élément, display: block le rend en bloc, et display: inline en ligne.
Les propriétés de fond comme background-color et background-image ajoutent de la couleur ou des images en arrière-plan :
.element {
background-color: #f0f0f0;
background-image: url('image.png');
}
Les styles de texte comme color, font-size et font-weight modifient l'apparence du texte. Pour les bordures, des styles variés comme solid, dashed ou dotted sont disponibles :
.cadre {
border: 2px dashed #333;
border-radius: 5px;
}
Les propriétés de positionnemant, telles que float et position, permettent une mise en page avancée. Le curseur peut être personnalisé avec cursor: pointer pour simuler un lien.