Pourquoi devriez-vous apprendre à coder (un peu) : une introduction au HTML et au CSS

Publié: 2021-08-15
Remarque : Avant d'apporter des modifications au code de votre boutique, assurez-vous toujours de sauvegarder votre site.

Il n'a jamais été aussi facile de démarrer une boutique en ligne. Grâce à des plateformes comme Shopify, vous pouvez acheter un thème, télécharger vos produits et vendre à vos clients en quelques heures ! La barrière à l'entrée est si faible que presque tout le monde peut le faire.

Bien qu'il soit si facile de démarrer, il est tout aussi facile de tenir cette simplicité pour acquise. Finalement, vous voudrez ajouter ou modifier quelque chose sur votre boutique et vous réaliserez que votre thème ne le prend pas en charge. Les développeurs ne sont pas bon marché et la dernière chose que vous voulez faire est de payer quelqu'un d'autre pour quelque chose que vous auriez pu faire vous-même.

Et si je vous disais que vous pourriez passer un peu de temps au départ pour apprendre les bases du fonctionnement des sites Web et que vous gagneriez du temps et de l' argent sur la route ?

À la fin de cet article, vous devriez connaître les bases du HTML et du CSS et en savoir assez pour commencer à bricoler dans votre propre magasin.

Alors prenez quelques minutes pour vous préparer et commençons !

Qu'est-ce que HTML et CSS ?

HTML signifie Hypertext Markup Language. C'est l'un des langages fondateurs les plus anciens et les plus importants du Web. Il se charge de structurer et de présenter le contenu sur cette même page !

CSS signifie feuilles de style en cascade. Il est responsable de fournir le HTML, son style et sa mise en forme.

Ensemble, ce sont les éléments constitutifs nécessaires de tout site Web. Dans cet article, je vais vous expliquer les bases et vous montrer comment coder et styliser votre première page Web.

Puisque je suis un grand fan de Bill Murray (qui ne l'est pas), nous allons créer notre propre sanctuaire sur le Web pour Bill.

Mais tout d'abord, approfondissons le HTML et le CSS pour vraiment avoir une compréhension complète de leur puissance et de leurs capacités.

L'anatomie d'un site Web

Nous pouvons facilement comprendre comment HTML et CSS fonctionnent ensemble en les comparant aux éléments structurels d'une maison.

Derrière les murs de chaque maison se cache une charpente responsable de sa structure. Pensez au HTML comme à un cadre de maison. Il est responsable de la structure d'un site Web.

Fidèle à notre analogie avec la maison, CSS est responsable de choses comme les couleurs de la peinture, les dimensions de la salle à manger, la couleur des planchers de bois et la forme et le style de la table de la salle à manger.

Examinons quelques balises HTML de base et parcourons-les ligne par ligne.

Exemple de balisage HTML

Doctype

La balise <!DOCTYPE html> aide le navigateur à savoir que le type de document avec lequel nous voulons travailler est HTML.

Diriger

À l'intérieur de la balise <head> se trouve l'endroit où nous stockons toutes les métadonnées de notre document. Ces données incluent des éléments tels que le titre, les styles (CSS), la description, etc. Ces données ne sont pas affichées pour l'utilisateur final, mais les navigateurs les utilisent pour déterminer le titre du document ou les styles qu'il doit utiliser lorsqu'il l'affiche pour l'utilisateur final.

Publicité

Certains autres éléments trouvés dans l' <head> d'une page HTML pourraient inclure des informations sur l'auteur, la description de la page ou un lien vers une image utilisée pour le favicon (la petite icône dans un onglet de navigateur).

Exemple d'icône de favori

Corps

La balise <body> contient tout le balisage (code) du site Web. C'est le seul code que l'utilisateur final verra lorsqu'il consultera notre site.

Les outils dont vous avez besoin pour créer un site Web

Pour commencer à écrire du HTML, vous pourriez penser que vous avez besoin d'un logiciel sophistiqué et coûteux, mais ce n'est pas le cas. En fait, vous avez déjà ce dont vous avez besoin.

Si vous utilisez un PC, ouvrez le programme NotePad. Si vous êtes sur un Apple Mac, ouvrez TextEdit.

Maintenant que votre programme d'édition de texte est ouvert, suivez-moi pendant que nous développons le balisage HTML de base ci-dessus. Copiez (Ctrl + C sur Windows / Cmd + C sur Mac) et collez (Ctrl + p sur Windows / Cmd + P sur Mac) le code suivant dans votre éditeur de texte.

<!DOCTYPE html>
<html>
<tête>
<title>Le titre de votre page</title>
</head>
<corps>
<h1>Bonjour tout le monde !</h1>
<p>Ceci est notre premier paragraphe.</p>
</body>
</html>

Enregistrez ce fichier sur votre bureau et ouvrez-le dans votre navigateur Web. Vous devriez maintenant voir votre code traduit ou rendu par le navigateur et il devrait ressembler à ceci :

Exemple de rendu de code

L'élément Titre (<h1>)

La balise <h1> est utilisée lorsque vous souhaitez attirer l'attention et la définition sur certains textes. Dans ce cas, nous voulons le texte "Hello World!" être plus grand et plus visible que le texte suivant.

Hors de la boîte, HTML a six balises d'en-tête différentes que vous pouvez utiliser : h1, h2, h3, h4, h5 et h6.

Exemples d'en-tête HTML
La taille de la police deviendra plus petite à chaque "pas vers le bas" que vous effectuerez ; H1 sera le plus grand et H6 sera le plus petit. Par défaut, ils auront une marge (ou un espacement autour d'eux) pour les séparer des autres éléments de la page et pour donner à l'utilisateur une hiérarchie visuelle.

Prenez une minute pour essayer de modifier les balises de titre, d'en-tête et/ou de paragraphe. Une fois que vous avez effectué une modification, enregistrez-la, puis actualisez votre navigateur. Félicitations, vous venez de modifier le code HTML pour la première fois !

Ça a l'air ennuyeux, non ?

Ajoutons un peu de style à notre page et apprenons-en plus sur la véritable puissance du CSS.

Afin d'ajouter nos propres styles à ces éléments HTML, nous devons ajouter une balise <style> à l'intérieur de la <head> de notre document.

Cette balise enveloppe tout notre CSS. Considérez le contenu de la balise <style> comme le guide de style du navigateur.

Sous la balise <title> sur une nouvelle ligne, ajoutez une balise de style comme celle-ci :

<title>Le titre de votre page</title>

Publicité

<style>

 </style>

À l'intérieur de la balise de style se trouve l'endroit où nous pouvons entrer toutes nos déclarations. Une déclaration CSS se compose d'une propriété suivie d'une valeur .

Déclaration CSS

Faisons en sorte que la couleur de notre <h1> soit différente du reste de notre texte car c'est la plus importante et nous voulons qu'elle se démarque. Ajoutez les éléments suivants entre vos balises <style> , enregistrez votre fichier et actualisez à nouveau votre navigateur.

<style>
h1 { couleur : bleu ; }
</style>

Vous devriez maintenant, espérons-le, voir quelque chose qui ressemble à ceci ! Vous remarquerez que notre « Hello World! le texte est maintenant bleu. Simple, non ?

Modification CSS du H-Tag

Voilà, vous l'avez fait ! Vous avez réussi à modifier le style d'un élément HTML à l'aide de CSS. Est-ce qu'on s'amuse encore ?

Ajouter des images à notre page

Il existe de nombreux autres éléments que vous pouvez inclure sur votre page, mais l'un des plus importants sur n'importe quel site Web est l'image toute-puissante. Nous pouvons facilement ajouter une image en incluant le tag comme ceci :

<img src= "https://www.fillmurray.com/400/500" >

Remarque : à des fins de démonstration, j'utilise un service d'espace réservé pour les images appelé www.fillmurray.com. Vous pouvez utiliser une image sur votre ordinateur local si vous préférez cela.

Autre méthode (astuce de pro) pour récupérer une image d'un site Web : recherchez une image sur un site Web que vous souhaitez utiliser et cliquez dessus avec le bouton droit de la souris. Cliquez sur Copier l'adresse de l'image et l'URL de cette image sera dans votre presse-papiers. Selon votre navigateur, le libellé peut être légèrement différent. J'utilise Google Chrome. Je ne recommande pas l'abus de hotlinking mais pour cette démo ce n'est pas grave.

Comment enregistrer une image à partir d'un site Web

Copiez et collez cet élément d'image et placez-le sous votre balise de paragraphe afin que votre bloc de code complet ressemble au mien :

<!DOCTYPE html>
 <html>
 <tête>
 <title> Le titre de votre page </title>
 <style>
 h1 { couleur : bleu;}
 </style>
 </head>
 <corps>
 <h1> Bonjour tout le monde ! </h1>
 <p> Ceci est notre premier paragraphe. </p>
 <img src = " https://www.fillmurray.com/400/500 " alt = " image de Bill Murray " >
 </body>
 </html>

Enregistrez votre fichier et rechargez votre navigateur et vous devriez maintenant voir quelque chose comme ceci :

Comment commencer à coder votre premier site Web

Si vous avez fait attention, vous avez remarqué un autre attribut sur la balise <img> , l' alt="image de Bill Murray" . Étant donné que le navigateur déchiffre le code et ne peut pas voir la sortie rendue comme vous et moi, il a besoin d'un moyen de connaître le contexte de ce qu'il affiche.

Publicité

En ajoutant une balise ALT (texte alternatif) à notre image, nous pouvons indiquer au navigateur le sujet de notre image.

C'est aussi très important pour le référencement (optimisation des moteurs de recherche) et surtout, ce texte est lu à haute voix pour les utilisateurs aveugles à l'aide d'un lecteur d'écran.

Mais qu'en est-il des liens ?

Aucune introduction à HTML/CSS ne serait complète sans couvrir les liens ! Lorsque vous créez un site Web, vous souhaiterez avoir la possibilité de créer des liens, que ce soit vers des sources externes ou vers d'autres pages internes de votre propre site Web.

Parlons de l'élément d'ancrage. La vraie magie d'un élément d'ancrage est en fait son attribut href. Démontrons la structure d'une balise d'ancrage en ajoutant un lien vers la page Wikipedia de Bill.

<a href= "www.google.com" > Lire son article sur Wikipédia </a>

Ce code indique au navigateur que lorsqu'un utilisateur clique sur le texte : « Lire son entrée Wikipédia », l'amener sur www.google.com.

Ajoutons ce code juste sous notre élément de titre afin que notre bloc de code ressemble maintenant à ceci :

<!DOCTYPE html>
 <html>
 <tête>
 <title> Le titre de votre page </title>
 <style>
 h1 { couleur : bleu;}
 </style>
 </head>
 <corps>
 <h1> Bonjour tout le monde ! </h1>
 <a href= "https://en.wikipedia.org/wiki/Bill_Murray" > Lire son entrée Wikipedia </a>
 <p> Ceci est notre premier paragraphe. </p>
 <img src= "https://www.fillmurray.com/400/500" alt= "image de Bill Murray" >
 </body>
 </html>

Appuyez sur Enregistrer et actualisez le navigateur et, espérons-le, le vôtre ressemble au mien.

Principes de base du codage

Franchir la ligne d'arrivée

Je suis allé de l'avant et j'ai stylisé mon petit hommage à Bill Murray et voici mon résultat final. Je vais parcourir certains des styles ajoutés ci-dessous.

Roulement de tambour s'il vous plaît…

Les bases du HTML et du CSS

Maintenant, vous pouvez voir que ce n'est pas quelque chose d'enthousiasmant, mais c'est par conception. Ceci est juste la pointe de l'iceberg en ce qui concerne la façon dont cette page pourrait ressembler ou être de style. Je voulais garder les choses simples pour que vous compreniez ce que fait chacune des méthodes de style ci-dessous.

Publicité

Passons au petit CSS que j'ai dû ajouter pour nous amener jusqu'ici.

Styliser le corps :

Tout d'abord, dans le corps de la page, j'ai ajouté :

corps {
 couleur d'arrière-plan : #eee ;
 famille de polices : Helvetica, Arial, sans-serif ;
 text-align : centre ;
 marge : 25px ;
 }

Couleur de l'arrière plan
J'ai défini la couleur d'arrière-plan de la page sur un gris très clair en utilisant la valeur de couleur hexadécimale #eee. Vous pouvez en apprendre plus à ce sujet et voir quelques exemples ici sur MOZ.

famille de polices
Je voulais changer la police par défaut des navigateurs Times New Roman. Pour cela, j'ai choisi Helvetica comme premier choix (si l'utilisateur a installé cette police sur son ordinateur), Arial comme deuxième choix (si l'utilisateur n'a pas Helvetica, elle sera par défaut Arial) et comme sauvegarde finale , une police de base sans empattement.

aligner le texte
J'ai choisi d'aligner tout le texte de ma page au centre. Il existe quelques autres options pour des valeurs comme gauche et droite, mais j'ai pensé que pour cela, il semblait mieux centré.

marge
J'ai ajouté une petite marge au corps du document pour lui donner un peu de répit.

Styliser notre image :

Enfin, j'ai stylisé le beau visage de Bill, euh, je veux dire l'élément d'image

img {
 bordure : 10px solide #41bcd6 ;
 box-shadow : 2px 5px 5px #999 ;
 rembourrage : 10px ;
 rayon de bordure : 5px ;
 }

Je n'ai pas fait grand-chose mais je voulais donner à la photo de Bill un peu de présence sur la page.

frontière
J'ai ajouté une bordure de 10px autour de l'image. Le #41bcd6 est une autre valeur de couleur hexadécimale qui rend une couleur bleu clair (une partie de mon thème de couleur subliminal secret de Steve Zissou).

boîte ombre
Je voulais donner à l'image une impression tridimensionnelle, j'y ai donc ajouté une ombre légère. La propriété box-shadow accepte les valeurs de pixel et de couleur qui dictent la longueur, le flou et la couleur de l'ombre. Pour en savoir plus sur la déclaration box-shadow, Moz la décompose bien pour vous ici.

rembourrage
Pour que l'image ressemble davantage à un cadre photo, j'ai ajouté 10 pixels de rembourrage entre elle et la bordure.

bordure-rayon
Juste pour illustrer l'une des capacités les plus cool de CSS, j'ai arrondi les coins de l'image en utilisant border-radius. Lorsque j'ai commencé à créer des sites Web, rien de tel n'existait, et produire des coins arrondis sur le Web était en fait assez difficile. Nous avons parcouru un long chemin depuis lors, et maintenant c'est plutôt simple. Il accepte une valeur comme px ou ems, et ici j'ai choisi de l'arrondir suffisamment pour le remarquer en définissant la valeur sur 5px.

Conclusion

Tout au long de cet article, nous avons travaillé ensemble pour apprendre l'anatomie de base d'un site Web. Nous avons également appris du HTML et du CSS simples qui, finalement, se sont transformés en un petit hommage d'une page assez étonnant à l'un des plus grands acteurs de tous les temps d'une génération.

Plus sérieusement, j'espère que vous avez pu me suivre et créer votre premier site Web de base. Maintenant, si Bill Murray n'est pas votre acteur préféré, je vous mets au défi de modifier ce code pour mettre en valeur votre acteur, groupe ou tout ce que vous voulez.

Si vous avez besoin de référencer ce code à tout moment, revenez lire cet article, ou pour plus de commodité, je l'ai mis sur CodePen ici.

Il y a tellement de choses amusantes que vous pouvez faire avec seulement HTML + CSS. Voici quelques excellentes ressources pour vous permettre d'approfondir votre apprentissage :

Publicité

  • Code Academy : cours d'introduction 100% GRATUIT au HTML/CSS
  • CSS Zen Garden : Le premier exemple sur le Web qui a vraiment « cliqué » pour moi, pour m'aider à réaliser que vous pouvez avoir 100 sites Web d'apparence différente qui utilisent tous le même balisage HTML
  • Animations CSS
  • La Joconde utilisant uniquement CSS
  • Chien husky animé utilisant uniquement CSS
  • CodePen : CodePen est un outil en ligne pour tester en direct et présenter votre code HTML, CSS et JavaScript

Nous n'avons sérieusement fait qu'effleurer la surface dans cet article, je vous encourage donc à en lire plus, à suivre des cours en ligne et à continuer à approfondir vos connaissances !