HTML ou CSS: Quelle est la différence?

HTML et CSS sont les deux langages fondamentaux pour la construction de tout site Web. Quelle est la différence?

Tout d’abord, HTML et CSS ne sont pas identiques. Ils fonctionnent en équipe! Ensemble, ils forment les os et la peau de tout site Web. Décomposons chacun individuellement, puis voyons comment ils travaillent ensemble…

HTML signifie Hypertext Markup Language. Voyez le HTML comme le squelette d’un document. Le HTML est ce qui donne la structure au site. Cela se fait par des balises, des éléments et des attributs. Que vous souhaitiez des titres, des listes, des images ou des liens, HTML permet de tout faire.

Commençons par un document HTML de base.

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to One Month</title>
</head>
<body>
    <h1>Big Willie Style</h1>
    <img src=https://i.imgur.com/Vr37Ac3.jpg>
</body>
</html>

Le !DOCTYPE dans la première ligne ci-dessus, indique au navigateur quel type de document il doit traiter. En l’espèce, il s’agit d’un document HTML. La troisième ligne est la section de tête , et en dessous, vous pouvez voir la balise de titre. C’est là que vous mettriez le titre de votre site web. Dans le cas présent, le titre du document est « Welcome to One Month ». Dans le corps (lignes 6 à 9), vous pouvez ajouter une balise H1, tel que nous l’avons fait, qui place le texte à l’intérieur dans le style H1, la plus grande balise d’en-tête qui existe.

Balisez et c’est tout!

Voici quelques autres balises populaires!

Ces balises sont destinées aux en-têtes, un peu comme celles de cet article ! H1 est la balise d’en-tête la plus grande, elle contient donc le texte le plus grand. H6 est quant à elle la plus petite balise d’en-tête et donc, comme vous l’avez deviné, la plus petite option de texte d’en-tête.

<p>
Texte du paragraphe
<br>
Saut de ligne
<img>
La balise img sert à insérer des images dans votre site.
<video>
La balise vidéo sert évidemment à ajouter des vidéos.
<a href>
Nous l’utilisons pour ajouter des liens, et cela signifie “ancre”.
<strong>
Gras
<em>
Italique
<ul>
Listes non ordonnées
<ol>

Listes ordonnées

Les balises enfants

Si vous écrivez une liste non ordonnée <ul> (à puces) ou ordonnée <ol> (numérotée) , il sera nécessaire d’introduire des éléments dans la liste! Pour ce faire, nous utilisons la balise élément de liste <li>. La balise <li> est un enfant des balises <ul> ou <ol>. Ainsi, une liste à puces de nos sitcoms préférées des années 90 ressemblerait à ceci:

<ul>
<li>Seinfeld</li>
<li>Friends</li>
<li>Frasier</li>
<li>Growing Pains</li>
</ul>

CSS

CSS est l’acronyme de Cascading Style Sheet.

Si HTML est le squelette de votre page, CSS est la peau.

Sans CSS, vos sites Web seraient plutôt ennuyeux, ternes et, osons le dire, nus. En CSS, il y a une propriété et une valeur . La propriété est la qualité que vous voulez changer; la valeur est la quantité du changement.

Revenons à notre exemple HTML.

Jetez un coup d’œil à la balise <body>. Nous pouvons augmenter le corps HTML avec CSS en ajoutant des détails. Par exemple, supposons que nous voulions changer la couleur du corps de page. Cela ressemblerait à quelque chose comme ça…

body {
background: red;
}

Ou disons que nous voulons changer la couleur et la taille de tout texte que nous mettons dans le corps.

Cela ressemblerait à ceci…
body {
font-size: 25px; background: blue; color: orange;
}

Ou supposons que vous vouliez changer les attributs de la balise H1. Vous pourriez faire quelque chose comme ça…

H1 {
color: blue; font-size: 100px
}

Utiliser des noms de couleurs, c’est bien, mais si vous souhaitez choisir une palette plus variée, essayez d’utiliser le format hexadécimal (#RRGGBB).

Mais pour que nous puissions tirer parti des possibilités impressionnantes offertes par CSS, nous devons associer notre code HTML à ce dernier. Nous faisons cela en utilisant le code ci-dessous:

Comme vous pouvez le constater, cela indique qu’il existe une relation (rel) entre le HTML et le CSS.

Une autre façon d’implémenter CSS est d’utiliser la propriété des familles de polices. C’est la même chose que d’utiliser un éditeur de texte pour changer la police.

Nous faisons cela en incluant les éléments suivants dans le code:
h1 {
font-family: Arial
}

Étude de cas: Jardin zen CSS

Jardin zen CSS est une merveilleuse vitrine de la relation entre les deux langues

Jardin zen CSS démontre la puissance de CSS. Un clic sur les liens à droite chargera la même page avec une différence perceptible, le CSS. Cela met en évidence ce que CSS peut faire pour changer l’apparence et l’essence de la page.

Voici quelques exemples du jardin…

Points à retenir

Qu’avons-nous appris?

HTML peut exister par lui-même, contrairement à CSS, mais c’est ensemble que la magie opère.
Plus nous en apprenons sur chaque langue, plus nous sommes créatifs avec nos designs. Avec la structure en place, les choix sont infinis.
HTML est le nom; CSS est le verbe. Faisons des phrases!

Apprenez HTML et CSS maintenant!

Si vous souhaitez continuer votre apprentissage d’HTML et CSS, voici quelques ressources:

Apprenez à coder HTML et CSS – Ce cours de codage en ligne vous fera passer de développeur débutant à intermédiaire en 30 jours seulement. Le cours comprend un soutien humain, des vidéos, des projets concrets, une notation et une certification HTML et CSS une fois le diplôme obtenu.
Développeurs Front-end ou Back-end – Quel est le salaire d’un développeur front-end? Back-end? Lequel est plus facile? Ce sont d’excellentes questions à poser lorsque vous commencez. Lisez cet article pour en savoir davantage.
Comment apprendre le Javascript – Maintenant que vous comprenez le HTML et le CSS, qu’est-ce que le JavaScript et comment l’apprendre?