Catégories
Conseils e-commerce

Une introduction à HTML et CSS

Ses jamais été plus 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 basse que presque tout le monde peut le faire.

Bien qu’il soit aussi facile de démarrer, il est tout aussi facile de prendre cette simplicité pour acquise. Finalement, vous souhaiterez ajouter ou modifier quelque chose sur votre boutique et vous vous rendrez compte 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 gagner du temps et l'argent sur la route?

À la fin de cet article, vous devriez connaître les bases du HTML et du CSS et en savoir suffisamment 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 fondamentaux les plus anciens et les plus importants du Web. Il est responsable de la structuration et de la présentation du contenu sur cette même page!

CSS signifie feuilles de style en cascade. Il est chargé de fournir le style et la mise en forme du code HTML.

Ensemble, ce sont les éléments de base nécessaires à tout site Web. Dans cet article, je vais vous expliquer les principes de base 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.

Tout d'abord, plongeons plus profondément dans le HTML et le CSS pour vraiment bien comprendre leur puissance et leurs capacités.

L'anatomie d'un site Web

Nous pouvons facilement comprendre comment HTML et CSS fonctionnent ensemble en les comparant aux parties structurelles d'une maison.

Derrière les murs de chaque maison se trouve 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 peinture, les dimensions de la salle à manger, la couleur des planchers de bois, ainsi que 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

le La balise aide le navigateur à savoir que le type de document avec lequel nous voulons travailler est HTML.

Tête

À l'intérieur de tag est 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 le présente à l'utilisateur final.

Quelques autres éléments trouvés dans le d'une page HTML peut 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 de favicon

Corps

le La balise 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 réalité, vous avez déjà ce dont vous avez besoin.

Si vous utilisez un PC, ouvrez le programme NotePad. Si vous utilisez 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.




Le titre de votre page

Bonjour le monde!

Ceci est notre premier paragraphe.


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 Heading (

)

le

La balise 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 large 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 de titres HTML
La taille de la police diminuera à chaque «étape vers le bas» que vous faites; H1 sera le plus grand et H6 sera le plus petit. Par défaut, ils auront une certaine 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 changer les balises de titre, d'en-tête et / ou de paragraphe. Une fois que vous avez apporté une modification, enregistrez-la, puis actualisez votre navigateur. Félicitations, vous venez de modifier le HTML pour la première fois!

Ça a l'air ennuyeux, non?

Ajoutons-en style sur notre page et apprenez-en plus sur la véritable puissance du CSS.

Afin d'ajouter nos propres styles à ces éléments HTML, nous devons ajouter un

À l'intérieur de la balise de style, nous pouvons entrer toutes nos déclarations. Une déclaration CSS se compose d'un propriété suivi d'un valeur.

Déclaration CSS

Faisons la couleur de notre

différent du reste de notre texte car c'est le plus important et nous voulons qu'il se démarque. Ajoutez ce qui suit entre votre

J'espère que vous devriez maintenant voir quelque chose qui ressemble à ceci! Vous remarquerez que notre "Hello World!" le texte est maintenant bleu. Simple, non?

Modification CSS de H-Tag

Là, vous l'avez fait! Vous avez réussi à modifier le style d'un élément HTML à l'aide de CSS. 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 de tout site Web est l'image toute-puissante. Nous pouvons facilement ajouter une image en incluant le tag comme ça:

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

Remarque: Dans un souci 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 sur 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 la surutilisation du 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:




</span><span style="font-weight: 400;">Le titre de votre page</span><span style="font-weight: 400;">




Bonjour le monde!


Ceci est notre premier paragraphe.


<img src ="https://www.fillmurray.com/400/500"Alt =" image de Bill Murray ">

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 faisiez attention, vous avez remarqué un autre attribut sur le tag, le 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.

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

Ceci est également 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 utilisant 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 pouvoir 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. Voyons la structure d'une balise d'ancrage en ajoutant un lien vers la page Wikipédia de Bill.

<a href ="Www.google.com">Lire son entrée Wikipedia

Ce code indique au navigateur que lorsqu'un utilisateur clique sur le texte: "Lire son entrée Wikipedia", amenez-le sur www.google.com.

Ajoutons ce code juste sous notre élément d'en-tête pour que notre bloc de code ressemble maintenant à ceci:




</span><span style="font-weight: 400;">Le titre de votre page</span><span style="font-weight: 400;">




Bonjour le monde!


<a href ="Https://en.wikipedia.org/wiki/Bill_Murray">Lire son entrée Wikipedia

Ceci est notre premier paragraphe.


<img src ="Https://www.fillmurray.com/400/500" alt =«Image de Bill Murray»>

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

Bases du codage

Traverser la ligne d'arrivée

Je suis allé de l'avant et j'ai conçu 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’écrit, mais que c’est par conception. Ce n'est que la pointe de l'iceberg en ce qui concerne Comment cette page pourrait avoir une apparence ou un style. Je voulais garder les choses simples afin que vous compreniez ce que fait chacune des méthodes de style ci-dessous.

Passons au petit CSS que j'ai dû ajouter pour nous amener aussi loin.

Styliser le corps:

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

corps {
couleur de fond: #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 savoir plus à ce sujet et voir quelques exemples ici sur MOZ.

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

texte-align
J'ai choisi d'aligner tout le texte de ma page au centre. Il y a quelques autres options pour des valeurs comme la gauche et la droite, mais j'ai pensé que c'était mieux centré.

marge
J'ai ajouté une petite marge au corps du document pour lui donner une certaine marge de manœuvre.

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;
boîte-ombre: 2px 5px 5px # 999;
rembourrage: 10px;
rayon de la bordure: 5px;
}

Je n’ai pas fait grand chose mais je voulais donner une certaine présence à la photo de Bill sur la page.

frontière
J'ai ajouté une bordure 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 Steve Zissou).

boîte ombre
Je voulais donner à l'image une impression en trois dimensions, alors j'ai 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 plus à un cadre photo, j'ai ajouté 10 px de remplissage entre elle et la bordure.

rayon de bordure
Juste pour illustrer l'une des capacités les plus cool du CSS, j'ai arrondi les coins de l'image en utilisant border-radius. Quand 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, 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 of

En toute sincérité, j'espère que vous avez été en mesure de me suivre et de 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 préféré ou tout ce que vous voulez.

Si vous avez besoin de faire référence à 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 avec lesquelles tu peux faire juste HTML + CSS. Voici quelques bonnes ressources pour vous permettre d'élargir votre apprentissage:

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *