Comment créer la structure d’une page web ? Comment gérer l’apparence des différents éléments de cette même page web ? Deux questions importantes à se poser quand on veut se lancer dans la création d’un site/blog/forum sur internet. Pour y répondre, nous allons nous intéresser aux langages HTML et CSS. Tu vas voir, ce n’est pas bien compliqué, une fois que l’on a compris le fonctionnement des pages.

Les bases du HTML

Qu’est-ce que le HTML ? Pour faire simple, le HTML est le langage utilisé pour créer la structure d’une page web. Prenons comme exemple une pièce de la maison : le salon. Tout ce qui est lié à la structure de la pièce (murs, canapé, table-basse… ) représenterait le HTML. Tout ce qui est lié à la décoration (couleurs, grandeur, type de revêtements… ) représenterait les CSS. Concrètement, le HTML va nous servir à dire que nous voulons créer un type de contenu : paragraphe, liste, tableau, image etc.

Comment fonctionne le HTML

Le langage HTML est composé de balises ouvrantes et fermantes. Il existe cependant quelques balises uniques.

Prenons un exemple simple : la création d’un paragraphe

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Ici, le paragraphe est matérialisé grâce aux balises <p> et </p>. J’indique donc au navigateur que le contenu compris entre ces balises est un paragraphe.

La structure d’une page web

Maintenant que tu as compris le fonctionnement des balises, voici la structure d’une page. Cette structure est celle de base, et est toujours utilisée pour créer une page web.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

Quelques explications sur le code :

  • <html></html> : ces balises limitent le code de la page
  • <head></head> : indiquent les informations relatives à la page, mais qui ne s’afficheront pas
  • <title></title> : c’est ici que se place le titre affiché dans l’onglet de ton navigateur
  • <body></body> : délimitent l’endroit où se trouve le contenu à afficher sur la page

Les balises les plus courantes

Titres

<h1></h1> : titre 1er niveau
<h2></h2> : titre 2ème niveau
<h3></h3> : titre 3ème niveau

Éléments de texte

<p></p> : paragraphe
<ul></ul> : liste à puce
<ol></ol> : liste numérotée
<li></li> : élément d’une liste
<a href="lien"></a> : lien hypertexte
<blockquote></blockquote> : bloc de citation
<strong></strong> : met en gras

Tableau

<table></table> : tableau
<tr></tr> : ligne du tableau
<th></th> : cellule de légende de ligne ou de colonne
<td></td> : cellule du tableau (colonne)

Structure et habillage

<div></div> : définition de bloc
<span></span> : habillage d’élément

Pour aller plus loin, je te propose de te rendre sur le site de Mozilla pour les développeurs. En effet, tu y trouveras des informations complètes sur les bases du HTML. 

Les bases des CSS

Qu’est-ce qu’une feuille CSS ? Il existe une différence fondamentale entre HTML et CSS : le HTML défini le type de contenu, et le CSS indique l’apparence de ce dernier. Si le HTML se place directement dans la page web, la feuille CSS est très souvent séparée de cette dernière. Il est très simple de créer une pareille feuille : on peut passer par un éditeur, ou bien utiliser le bloc note de Windows et enregistrer son fichier en .css.

Comment fonctionne une feuille CSS

Comme pour le HTML, il est assez simple de comprendre ce langage. En effet, ce que l’on a appris avec le précédent, va nous servir pour créer notre feuille de styles. Voici un exemple de code :

p {
 color: blue;
}

Reprenons l’exemple d’un paragraphe. Ici, j’indique dans mon code que tous les paragraphes de la page devront être en bleu.

  • P est le sélecteur. Il détermine le contenu impacté par le code que l’on met en place.
  • Color est la propriété. Elle indique ce qui va changer dans le contenu que l’on a choisi.
  • Blue est la valeur. Elle sélectionne un des changements possibles dans la propriété.

Les propriétés et valeurs les plus courantes

Le fonctionnement est toujours plus ou moins le même. Tout d’abord, on sélectionne le type de contenu que l’on veut modifier. Puis, on choisi sa propriété. Enfin, on détermine la valeur de la propriété que l’on a choisie.

width : longueur d’un élément (s’écrit en pourcentages ou pixels)
height : hauteur d’un élément (s’écrit en pourcentages ou pixels)
color : couleur du texte (peut s’écrire en toutes lettres (exemples : red, blue, yellow… ), en hexadécimale (#000000), en RVB)
background : apparence du fond d’un élément (image, couleur, position, répétition)
border : bordure d’un élément (grosseur en pixels, type de bordure (solid, dotted etc), couleur)
font-size : taille de la police d’écriture (en em ou en pixels)
font-family : nom de la police d’écriture
text-align : alignement du texte (center, left (par défaut), justify, right)
line-height : interligne (nombre de pixels)
letter-spacing : espacement entre les lettres d’un mot

Bien sûr, il y en a beaucoup d’autres ! Cependant, celles-ci sont les plus utilisées. Si tu veux en apprendre un peu plus sur les bases des CSS, je t’invite à te rendre sur le lien que je viens de te mettre.

Voilà, c’est tout pour cette fois. J’espère que ce petit article t’aura aidé à comprendre comment fonctionne ces deux langages indispensables sur le Net. N’hésite pas si tu as des questions, j’y répondrais avec plaisir ! Sinon, dis-moi si tu connais et/ou maîtrise un peu le HTML et le CSS, et comment tu les as appris, si tu le souhaites. A très vite !


Valérie Hoinard

Autrice, graphiste, mais aussi blogueuse, passionnée par le monde et l'imaginaire.

Privacy Preference Center