Configuration du CSS et du HTML pour votre site web : un tutoriel

Preslav Dobrev2022-10-28 · 5 min read

Configuration du CSS et du HTML pour votre site web : un tutoriel

La création de sites web est la première étape pour se lancer dans le développement web. L'une des premières choses que les passionnés de développement web doivent apprendre est comment configurer le CSS et l'HTML pour un site web. En configurant la page d'introduction de base, un débutant peut se familiariser avec les bases de la conception de sites web, perfectionner ses compétences en développement web et apprendre à collaborer avec des développeurs.

Ce tutoriel va vous guider à travers les bases de la configuration des fichiers HTML et CSS pour votre site web. Commençons !

Prérequis

Une compréhension de base de l'HTML et du CSS.

Étape 1 - Configuration initiale

Dans un premier temps, nous allons créer un nouveau répertoire de projet et le nommer demo-project :

mkdir demo-project

1	mkdir demo-project

Ensuite, déplacez-vous dans le répertoire en utilisant la commande cd :

cd demo-project

1	cd demo-project

Dans le dossier du projet, ajoutons les fichiers suivants dont nous aurons besoin pour lancer notre site web de base :

index.html : Ce fichier contiendra tout le code HTML.
styles.css : Nous y conserverons tout le code CSS pour styliser notre site web.
images : Toutes les images nécessaires doivent être conservées dans ce dossier.

Maintenant que nous avons créé notre répertoire de projet et ajouté les fichiers nécessaires, passons à l'étape suivante et ajoutons le contenu HTML dans notre index.html à l'étape suivante.

Étape 2 - Ajout de contenu HTML dans le index.html fichier

Dans le fichier index.html que nous avons créé à l'étape précédente, nous allons ajouter les codes HTML d'introduction. Ces lignes HTML de base serviront d'instructions pour le navigateur, mais ne seront pas affichées sur la page web.

Ajoutez le bloc de code suivant dans votre fichier index.html :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Bienvenue chez CloudSigma !</title>

</head>

<body>

</body>

</html>

Note: Assurez-vous que le fichier index.html soit vide avant d'ajouter ces blocs de code. Pensez également à modifier le titre comme mis en évidence dans la section <title> .

Comprenons les termes utilisés :

<!DOCTYPE html> : Il s'agit d'une déclaration informant le navigateur du type de HTML utilisé dans le document HTML.
- Comme plusieurs versions des normes HTML sont disponibles, spécifier le DOCTYPE permet aux navigateurs d'identifier facilement la version HTML. Par exemple, dans ce guide, nous utilisons la dernière version de HTML5.
<html> : Cette balise informe le navigateur que le contenu qu'elle contient doit être traité comme du HTML. Lors de l'ouverture d'un fichier <html> , assurez-vous de le fermer en utilisant la balise </html> . Cette balise prend en charge l'attribut lang , et vous pouvez spécifier la langue de la page web. Nous avons défini la langue sur l'anglais dans notre tutoriel en utilisant la balise de langue en .
- Visitez le IANA Language Subtag Registry pour découvrir les autres langues disponibles.
<head> : Cela crée une section dans le document HTML et contient des informations sur la page web. Cependant, il n'y a pas de détails sur le contenu, et le navigateur n'affiche aucune information ici dans la section head.
<meta charset="utf-8"> : Spécifie le jeu de caractères du document. Il doit être dans un format Unicode, c'est-à-dire UTF-8, prenant en charge la plupart des langues écrites reconnues.
<title> : La balise <title> informe le navigateur du nom de la page web. Le titre apparaît sur l'onglet du navigateur lorsque le site web est répertorié dans les résultats de recherche.
<link rel="stylesheet" href="css/styles.css"> : Indique au navigateur d'identifier la feuille de style contenant les styles CSS.
<body> : Cette balise contient le contenu principal de la page web. Lors de l'utilisation d'une balise <body> , assurez-vous de la fermer en utilisant la balise </body> .

Étape 3 - Stylisation à l'aide de CSS

Dans le fichier styles.css fichier, ajoutez du style selon les besoins de votre projet. Dans cet exemple, ajoutez les lignes de code suivantes dans votre styles.css fichier :

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Nous avons enfin créé les fichiers HTML et CSS de base dont nous aurons besoin pour lancer notre site Web. De plus, vous pouvez ajouter des images et les conserver dans le dossier images. Enregistrez et fermez le fichier. Après cela, ouvrez le index.html fichier dans votre navigateur Web préféré, et vous verrez une page de base sur votre écran.

Conclusion

Dans ce tutoriel d’introduction, nous avons appris les bases de la configuration de HTML et CSS et créé un site Web rudimentaire. Il est maintenant temps de créer de nouvelles pages, de les peaufiner, d’ajouter du contenu et de tout lier à partir de la barre de navigation. Comme étape suivante, essayez d’ajouter plus de contenu au index.html fichier et mettez-le en forme à l’aide de CSS.

De plus, il existe d’autres tutoriels HTML et CSS que vous pouvez trouver sur notre blog:

Bon développement !

Preslav Dobrev

Auteur · CloudSigma

Preslav Dobrev est un designer créatif chez CloudSigma, axé sur une identité commerciale cohérente à travers des canaux marketing traditionnels et innovants. Il excelle à fusionner la vision artistique avec le marketing stratégique pour créer des récits de marque percutants.