4.16. Introduction au HTML : structure de base, balises et attributs : Introduction au CSS
HTML, qui est l'acronyme de HyperText Markup Language, est le langage de balisage utilisé pour développer des pages Web. Ce langage permet de créer des documents lisibles sur pratiquement n'importe quel type d'appareil connecté à Internet. HTML est la base de tout site Web ou application Web.
Structure de base du HTML
Un document HTML a une structure de base qui comprend des balises d'ouverture et de fermeture. La balise d'ouverture indique le début d'un élément et la balise de fermeture indique la fin de cet élément. De plus, un document HTML est composé d'un en-tête et d'un corps.
Le code <html> indique le début et la fin d'un document HTML. Dans cette balise, nous avons le <head> qui contient des informations sur le document, telles que le titre qui apparaît dans la barre de titre du navigateur et des liens vers des fichiers CSS et JavaScript. Le <body> contient le contenu principal du document, tel que du texte, des images, des liens, des tableaux, des listes, etc.
Balises et attributs
Les balises HTML sont les éléments qui définissent la structure du document. Chaque balise a sa propre signification et indique au navigateur comment le contenu doit être affiché. Voici quelques exemples de balises : <h1> pour les titres, <p> pour les paragraphes, <a> pour les liens, <img> pour les images, entre autres.
Les attributs sont utilisés pour fournir des informations supplémentaires sur les éléments. Ils apparaissent dans la balise d'ouverture et sont suivis d'un signe égal et d'une valeur entre guillemets. Par exemple, dans la balise <a href="https://www.example.com">Example</a>, href est un attribut qui indique l'adresse du lien.
Introduction au CSS
CSS, ou Cascading Style Sheets, est un langage de style utilisé pour décrire l'apparence d'un document écrit en HTML. Avec CSS, vous pouvez contrôler la mise en page de plusieurs pages à la fois, ainsi que divers aspects de conception tels que les couleurs, les polices et l'espacement.
Structure CSS de base
Une feuille de style CSS consiste en une liste de règles. Chaque règle ou ensemble de règles se compose d'un sélecteur et d'un bloc de déclaration. Le sélecteur pointe vers l'élément HTML que vous souhaitez styliser. Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules. Chaque déclaration comprend une propriété CSS et une valeur, séparées par deux points.
Sélecteurs et propriétés
Les sélecteurs définissent les éléments auxquels la règle s'applique. Ils peuvent sélectionner des éléments par type, classe ou ID, entre autres. Les propriétés sont des aspects de l'élément que vous pouvez styliser, tels que la couleur, la police, la taille, la marge, le remplissage, etc. La valeur de la propriété définit la façon dont vous souhaitez styliser cet aspect.
Par exemple, la règle CSS ci-dessous applique la couleur rouge au texte de tous les paragraphes (<p>) :
<style>
p {
couleur : rouge;
}
</style>
Dans la règle ci-dessus, « p » est le sélecteur, « couleur » est la propriété et « rouge » est la valeur.
En combinant HTML et CSS, vous pouvez créer des pages Web avec une structure et un design sophistiqués. Cependant, pour ajouter de l'interactivité et des fonctionnalités à un site Web, vous devrez apprendre JavaScript, ce qui constitue la prochaine étape pour devenir un développeur front-end.
