Bienvenue dans ce guide de programmation pour les nuls ! La création d’un site internet est certes intimidante, mais vous pouvez y arriver avec les bons outils et un peu de pratique. Il faut notamment maîtriser les deux langages incontournables du web, dont HTML5 (HyperText Markup Language 5) et CSS3 (Cascading Style Sheets 3).
Qu’est-ce que HTML5 et CSS3 ?
HTML5 est la dernière version du langage HTML. Il sert à structurer le contenu de chaque page web. Il comprend des balises pour les titres, les paragraphes, les images et les liens. Les balises HTML sont mises entre chevrons ou < >. CSS3, quant à lui, est utilisé pour styliser le contenu HTML en définissant les couleurs, les polices, les marges et d’autres aspects visuels. Les attributs de styles en CSS sont mis entre accolades ou { }.
Pour créer un site avec ces deux langages de programmation web, vous devez disposer d’un ordinateur avec un navigateur web à jour (Chrome, Firefox, Safari, etc.). Il faut aussi télécharger un éditeur de texte comme Visual Studio Code, Sublime Text ou Atom pour écrire votre code. En outre, vous devez passer par une plateforme telle que GitHub pour l’hébergement gratuit du site. Voyons maintenant les étapes nécessaires pour la programmation web !
Étape 1 : Créer un fichier HTML de base
Pour commencer, créez un nouveau fichier et nommez-le index.html. Ouvrez-le dans votre éditeur de texte et écrivez ou plutôt collez le code suivant pour créer une structure HTML de base :
<!DOCTYPE html>
<html lang= »fr »>
<head>
<meta charset= »UTF-8″>
<title>Mon premier site web</title>
</head>
<body>
<h1>Bienvenue sur mon site web</h1>
<p>Ceci est ma première page créée avec HTML5.</p>
</body>
</html>
Comment vous pouvez le constater, ce code comprend une balise <head> qui contient les métadonnées du document, dont le titre de la page web. La balise <body> comporte le contenu visible comme un titre et des paragraphes. Vous changerez naturellement le titre, les sous-titres et le corps du texte selon vos besoins.
Étape 2 : Ajouter du style avec CSS3
Voulez-vous ajouter du style à votre page web ? Vous pouvez le faire en créant un nouveau fichier nommé style.css. Ensuite, saisissez ou copiez le code suivant :
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
Ce code définit le style du corps de la page ainsi que des éléments spécifiques comme les titres et les paragraphes. Bien évidemment, il faut vous renseigner sur les codes correspondant aux styles que vous voulez attribuer à votre contenu. Le fichier CSS doit ensuite être lié à votre fichier HTML. Pour ce faire, ajoutez la ligne suivante dans la section <head> de votre fichier HTML :
<link rel= »stylesheet » type= »text/css » href= »style.css »>
Étape 3 : Affichez votre site web
Vous avez maintenant un site web fraîchement créé avec du contenu HTML et du style CSS. Pour le voir en action, ouvrez le fichier index.html dans un navigateur web. Vous accéderez alors à votre page avec le titre et le paragraphe stylisés.
Étape 4 : Ajoutez des éléments supplémentaires
Pour aller plus loin et peaufiner votre travail de débutant en matière de développement web, vous pouvez ajouter des éléments supplémentaires à votre site. Pour mettre une image, par exemple, voici le code HTML :
<img src= »https://via.placeholder.com/150″ alt= »Image d’exemple »>
Pour ajouter un lien vers une autre page, le code HTML à saisir est :
<a href= »https://www.example.com »>Visitez mon site préféré</a>
