Langages web HTML et CSS : créer des pages web stylées

Langages web à la base de tout projet digital, HTML et CSS permettent d’indiquer au navigateur web comment afficher la page d’un site sur un ordinateur, une tablette ou un smartphone.

Grâce à leur complémentarité, ces deux langages web vous aident à gérer facilement la structure et le design de vos pages web.

À quoi sert le code HTML ?

Le HTML (HyperText Markup Language) permet d’organiser le contenu d’une page web à l’aide notamment de différentes balises. Il précise les informations qui doivent s’afficher sur la page en tant que : titres, paragraphes, boutons, liens, ou images par exemple.

Toutefois, et même si la dernière version HTML 5 a apporté de nombreuses améliorations pour organiser le contenu, le code HTML ne permet pas de modifier l’apparence d’une page. Les informations inscrites en HTML sont donc restituées sans aucune mise en forme. Pour améliorer le design de votre site, il faudra donc associer les langages web HTML et CSS.

Structurer les pages web avec les balises HTML

Les pages HTML contiennent de nombreuses balises qui permettent de préciser la nature du texte auquel elles sont liées. Entourées de chevrons (< >), elles donnent des instructions à l’ordinateur afin d’afficher le contenu en tant que titre de la page, image ou paragraphe par exemple.

Les balises HTML sont variées, mais en voici quelques exemples :

<title>TheCodingMachine</title> : il correspond au titre de la page qui apparaît dans la barre de titre du navigateur web, en l’occurrence : TheCodingMachine

<h1> </h1>, <h2> </h2 …. <h6> </h6> : il s’agit des différents niveaux de titres présents dans la page web. Si l’on prend l’exemple de cette page :

<h1>Langages web HTML et CSS : créer des pages web stylées</h1>

<p> </p> : le texte situé entre ces balises est un paragraphe

<ul> <ul> ou <ol> <ol> : indique la présence d’une liste à puces ou d’une liste numérotée

<img/> : cette balise permet d’intégrer une image sur la page web.

Qu’est-ce que le langage web CSS ?

Le CSS (Cascading Style Sheets) peut se traduire par : feuilles de style en cascade. Il s’agit d’un des langages web utilisés pour mettre en forme et gérer le design de fichiers HTML ou XML. Il permet notamment de :

Modifier la couleur du texte,

Choisir une police spécifique,

Intégrer des bordures et/ou des marges,

Mettre des images de fond

Adapter la page à la taille des écrans (ordinateur, tablette, smartphone) grâce au responsive design.

Avec CSS vous personnalisez ainsi les pages de vos sites et applications.

Donner du style aux pages web avec les propriétés CSS

Grâce au code CSS, vous indiquez au navigateur web (Google Chrome, Mozilla Firefox, Microsoft Edge…) quelle apparence doit prendre la page créée. Pour donner ces instructions, il faut notamment utiliser les propriétés CSS. Ces dernières sont encadrées par des accolades et précédées par un sélecteur comme p (pour paragraphe), h1, class, ou id.

Parmi les principales propriétés :

font-family : la police du texte,

font-size : la taille du texte,

text-align : l’alignement du contenu,

background-color : la couleur de fond,

border-style : le type de bordure.

Ces propriétés sont suivies de la valeur que vous souhaitez leur attribuer. Cette valeur peut correspondre à une couleur, une taille ou un style. Par exemple :

{

color : red;

border : 2px red double;

}

Cela signifie que le titre principal, que vous avez indiqué dans votre fichier HTML en l’encadrant avec les balises <h1> </h1>, sera écrit en rouge avec une bordure double rouge de 2 pixels de largeur : les langages web HTML et CSS sont donc totalement complémentaires.

Les langages web HTML et CSS n’ont désormais plus de secret pour vous ! Mais d’autres langages de programmation comme PHP et Javascript, ou d’autres termes techniques restent peut-être encore des mystères. Pour vous éclairer sur le vocabulaire tech, n’hésitez pas à prendre connaissance de notre livre blanc « Do you speak technique ? » !

par TheCodM
Publié le 24 février 2022