Un site gratuit sur le web en 5 leçons – 2.HTML & CSS
Publié le 10 juillet 2020
Voici un article qui a pour but de vous initier au HTML/CSS qui est le langage par défaut interprêté par les navigateurs pour afficher une page web.
HTML: je décris mon contenu
Le HTML est le langage informatique standard évalué par les différents navigateurs. La plupart des site sont donc construits en HTML. Si l’on construit un site en HTML/CSS, on crée un site qu’on va appeler plus généralement site statique. Ce terme statique s’oppose aux sites dynamiques qui en général font appel à une base de données et pour lesquels il existe souvent une administration où l’on peut gérer les contenus (on utilise souvent le mot CMS).
Ici, on va essayer de comprendre en quoi consiste le HTML. Vous allez voir, ce n’est pas sorcier. Le HTML est un langage descriptif. Il va décrire le contenu qu’il possède à l’intérieur de ses balises.
L’ossature
Pour commencer, on va parler de l’ossature d’un fichier HTML de base. Nous en sommes à la version 5 du langage HTML et c’est cette version que nous allons étudier. Commençons par créer un fichier index.html (vous pouvez faire cela dans votre éditeur de code, de mon côté je choisis vscode). Et nous allons y copier le doctype suivant (doctype = ossature de base d’un fichier html).
<!doctype html><html lang="fr"><head> <meta charset="utf-8"> <title>Titre de la page</title></head><body> ... <!-- Le reste du contenu --> ...</body></html>
Nous aurons donc le doctype qui explique au navigateur que nous allons utiliser du HTML. Ensuite nous avons notre première balise ouvrant et fermante <html></html>. Cette balise html contient l’attribut lang qui ici est égal à fr. Faites bien attention à la notation des balises, c’est important de respecter cela pour que les navigateurs puissent convenablement interpréter le code.
Nous avons ensuite la balise head. C’est l’entête de notre page. On y définit ici le charset utilisé (cela permet par exemple de gérer l’affichage des caractères accentués) et on y place aussi le titre de notre page. Vous pouvez modifier ce titre et afficher votre page dans un navigateur. Vous verrez que ce titre s’affiche dans l’onglet de votre page.
C’est ensuite le tour du body qui va contenir l’ensemble du contenu textuel et image de la page.
Complétons un peu ce contenu
Commençons par notre plus grand titre. C’est lui qui aura la plus haute importance au niveau du contenu de notre page.
<h1>Mon grand titre</h1>
C’est une balise ouvrante et fermante. Il suffit de placer notre contenu à l’intérieur. Encore un concept, cette balise est une balise block (à l’opposé d’inline). Le contenu placé avant et le contenu placé après va interagir avec lui à la manière d’un block. Pour l’instant, on peut dire que les balises block vont se placer les unes en dessous des autres. Il existe 6 niveaux titre. Vous avez donc la possibilité d’aller assez loin dans la hierarchie de votre page.
Essayons un paragraphe:
<p>Ceci est mon paragraphe. Une partie du contenu sera en <strong>gras</strong></p>
De nouveau, nous sommes face à une balise block ouvrante et fermante. Et à l’intérieur de celle-ci, nous avons imbriqué une balise strong ouvrante et fermante elle-aussi mais par contre cette balise a la particularité d’être inline. Si vous visualisez ce contenu dans le navigateur, vous verrez que le mot gras est bien en gras mais ne va pas à la ligne.
Continuons avec une image:
<img src"EMPLACEMENT_DE_L_IMAGE" alt="Descrption de l'image" />
Nous sommes cette fois-ci en présence d’une balise unique qui s’ouvre et se ferme directement. Elle n’entoure pas un contenu textuel. Dans ce cas-ci, il faut lui donner des arguments pour qu’elle comprenne ce qu’elle doit faire. Ici, on lui donne 2 arguments:
- src: où l’on spécifie le chemin de l’image
- alt: où l’on donne un texte alternatif si jamais l’image n’est pas trouvée ou pour les personnes malvoyantes par exemple.
Vous pouvez récupérer ce fichier HTML simple sur mon Github.
Il n’est pas nécessaire de connaitre sur le bout des doigts l’ensemble des balises disponibles. Il existe des sites qui listent ces balises, n’hésitez pas à vous en servir. Il vaut toujours mieux comprendre ce que l’on fait que recopier ou apprendre des balises par coeur. Vous verrez aussi qu’avec l’habitude, on utilise souvent les mêmes balises.
CSS: je décore mon contenu
Après avoir rempli le contenu de ma page, je vais le styliser. C’est maintenant qu’entre en jeu le CSS.
Le CSS est un langage assez simple où l’on désigne le contenu que l’on veut styliser et quand celui-ci est ciblé, on lui dit à quoi il doit ressembler.
Il y a trois endroits où l’on peut écrire du CSS:
- directement sur les balises HTML. On appelle ça du style inline,
- dans la balise head de notre page HTML,
- ou alors dans un fichier CSS à part (c’est la meilleure pratique).
Quelques règles pour s’échauffer
Commençons par styliser notre paragraphe qu’on a écrit plus tôt. Et nous allons faire le plus simple et le plus efficace, c’est à dire du CSS inline:
<p style="color:red;">Ceci est mon paragraphe. Une partie du contenu sera en <strong style="color:#ff0000;">gras</strong></p>
Vous pouvez voir ci-dessus la notation de style sur une balise inline. J’ai mis du rouge sur mon paragraphe en nommant ma couleur ‘red’. Le CSS possède un certain nombre de couleurs limité que l’on peut nommer. Mais on peut bien sûr utiliser un code hexadécimal pour avoir un panel de couleurs beaucoup plus important. j’ai mis un exemple sur la balise strong. Je continue de pousser mes changements sur git pour que vous puissiez voir l’évolution des fichiers.
Ajoutons deux règles sur notre titre mais cette fois-ci dans le head de notre page HTML:
<head><meta charset="utf-8"><title>Titre de la page</title><style>h1{color:green;font-size:44px;}<style></head>
Je place donc une balise ouvrante et fermante ‘style’ dans laquelle je vais pouvoir placer mes règles de style. Je cible ma balise H1. J’ouvre et je ferme mes accolades et à l’intéreur de celles-ci, il y a deux règles, la couleur verte et la taille du texte en pixel.
Je vais maintenant déplacer l’ensemble de ces règles dans une feuille de style séparée ce qui est la bonne pratique. Vous pouvez observer ce changement dans les fichiers sur github. Il faut d’abord définir dans le head où trouver cette feuille de style:
<link rel="stylesheet" href="style.css">
Ensuite, on bascule les différentes règles sous forme de liste et en fonction des différentes balises.
Si on ouvre le fichier HTML dans un navigateur, on peut voir que le résultat est équivalent à notre étape précédente. par contre, notre code est beaucoup plus propre, le HTML d’un côté et le CSS de l’autre.
Il exsite un paquet de règles CSS pour décorer votre site web, je vous laisse faire une petite recherche sur google pour trouver la liste des règles à votre disposition.
Les id et les class
Ca fait déjà pas mal d’informations tout cela mais avant de vous laisser, j’aimerais aborder encore un dernier concept. Comment faire pour cibler une balise qui est présente plusieurs fois dans votre page et qui doit avoir un style différent. Vous ne pouvez plus simplement appeler le nom de la balise dans votre CSS. il va falloir trouver une autre solution. Cette solution, ce sont les id et les class. Ce sont des attributs que vous pouvez placer sur vos balises HTML. Voici un exemple:
<p id="monId" class="maClasse">Ceci est un second paragraphe</p>
Vous pouvez ensuite appeler ces ids et ces classes dans votre CSS pour les styliser. Quelle est la différence entre id et class? Un id est unique et ne peut être appelé qu’une seule fois dans une page HTML alors que la classe peut-être appelée autant de fois que l’on veut.
Vous pouvez voir dans mon fichier CSS comment j’ai appelé un id et une classe.
Voilà pour aujourd’hui. Il y a encore beaucoup de choses à dire sur ces deux langages mais je vous laisse déjà vous entrainer avec cela. Vous pouvez valider votre code HTML sur le site officiel. Vous aurez des infos sur les erreurs de code que vous auriez pu commettre.
Table des matières: