Les bases du html et du css en 5 minutes
Réaliser une page web n’est pas réservé aux seuls diplômés en informatique et aux utilisateurs de logiciels complexes. Quatre lignes…
Réaliser une page web n’est pas réservé aux seuls diplômés en informatique et aux utilisateurs de logiciels complexes. Quatre lignes…
Réaliser une page web n’est pas réservé aux seuls diplômés en informatique et aux utilisateurs de logiciels complexes. Quatre lignes de code suffisent pour bâtir la structure d’un site – et le styliser. HTML permet d’organiser les différents contenus et CSS s’occupe de l’apparence visuelle : de quoi faire passer une simple idée à une interface agréable et fonctionnelle en un rien de temps.
Une page HTML s’ouvre toujours par la déclaration < !DOCTYPE html>, qui signale au navigateur que c’est un document HTML5.
La balise <html> suit, englobant l’ensemble du contenu de la page. Dans cette balise se trouvent deux parties : l’entête, définie par la balise <head>, et le corps de la page, balisé avec <body>.
La section <head> renferme des informations cruciales tel que le titre de votre page (<title>), les liens vers vos feuilles de styles CSS, les jeux de caractères (<meta charset="UTF-8">) ou vos scripts externes. Tout ce qui se trouve dans cette section n’est pas visible sur votre page mais est vital pour le bon fonctionnement du site et son apparence.
C’est dans le <body> que se loge tout ce que l’utilisateur voit sur son écran : textes, images, liens, formulaires… Pour structurer correctement ces éléments afin que votre contenu soit accessible et optimisé pour le référencement, plusieurs éléments et bonnes pratiques sont à prendre en compte :
<header>, <nav>, <section>, <article>, <footer> pour délimiter les différentes parties de la page.<h1> à <h6> pour structurer le contenu et faciliter la navigation.<img> avec un bon texte alternatif alt.<form>, pour interagir avec les utilisateurs, en suivant les bonnes pratiques de validation et d’ergonomie.<a>, pour naviguer entre les pages ou sections.C’est grâce à ce travail de structuration que votre page HTML sera plus intelligible par le navigateur, le moteur de recherche, et l’utilisateur, améliorant ainsi l’expérience et le référencement.
Le HTML offre un ensemble de balises pour organiser et présenter le contenu.
Les titres, par exemple, sont définis par les balises <h1> à <h6>, où <h1> représente le titre principal et les autres sous-titres de niveaux inférieurs. Les paragraphes sont créés avec la balise <p>, idéale pour regrouper des blocs de texte.
Pour insérer des liens, on utilise la balise <a> avec l’attribut href pour spécifier l’adresse cible. Les images, quant à elles, s’intègrent grâce à <img>, qui nécessite l’attribut src pour l’URL de l’image et alt pour la description alternative, essentielle pour l’accessibilité. Les listes, qu’elles soient à puces (<ul>) ou numérotées (<ol>), permettent d’énumérer facilement des éléments grâce à la balise <li>.
D’autres balises courantes incluent <div> pour structurer des sections sans signification particulière, ou <span> pour cibler une portion de texte à styliser.
Enfin, il existe des balises sémantiques comme <header>, <main>, <nav>, et <footer> qui permettent de donner plus de sens à l’organisation de la page, facilitant l’accessibilité et le référencement.
Une bonne utilisation de ces balises essentielles garantit une structure claire, à la fois pour l’utilisateur final et pour les outils d’indexation du web.
Le CSS (Cascading Style Sheets) est le langage de mise en forme des pages web.
Il permet de contrôler l’apparence des éléments HTML (couleur, taille, disposition…). On peut appliquer du CSS directement dans l’en-tête de la page en utilisant la balise