Apprentissage du langage HTML et CSS

Nous continuons aujourd’hui notre apprentissage du code avec le langage HTML et CSS. Commençons par définir ce que sont le langage HTML et CSS. Le langage HTML est le format de données conçu pour représenter les pages web. Il correspond à la structure des pages web. Les feuilles de style en cascade ou CSS correspondent à la mise en forme des pages web.

Un langage « balisé »

Le langage HTML est donc un ensemble de balises (ou Tags) et d’attributs ; certaines de ces balises sont obligatoires si nous voulons qu’une page web fonctionne correctement. Le doctype est la première balise figurant dans un document HTML : celle-ci permet de préciser qu’il s’agit bien du HTML. La balise html est la suivante : tout le document se trouve dans ce tag. Suit la balise head regroupant les informations liées à la totalité de la page. Enfin la balise body regroupant tout le contenu de la page.

Il existe de nombreux autres tags ; vous trouverez ici une liste des tags existants https://developer.mozilla.org/fr/docs/Web/HTML/Element

Une mise en forme avec « style »

Nous l’avons vu, les CSS permettent de mettre en forme la structure d’une page web précédemment élaborée grâce au langage HTML. Les CSS vont donc vous permettre de définir la couleur de votre contenu, la police du texte, l’alignement des textes, les bordures : une véritable mise en page.

Deux attributs pour appliquer des styles CSS aux éléments d’une page ne doivent pas être confondus : l’id et la classe. Le premier ne doit désigner qu’un seul objet du document ; le deuxième peut désigner plusieurs objets du document. Vous trouverez ici plus d’informations concernant les attributs id et class https://www.alsacreations.com/article/lire/535-quelle-est-la-difference-entre-une-classe-class-et-un-id.html

Nous finirons par vous parler d’une bonne pratique qui vous permettra de vous faciliter le travail : l’indentation du code. Cette technique permet une lecture plus facile et agréable du code en utilisant des décalages en début de lignes (grâce à [Tab]) : pour illustrer cette pratique, voici un exemple avant/après indentation du code.

Étienne

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *