Comment coder une page internet et la styliser ?

Aujourd’hui, Morpheus Formation vous propose cet article intitulé “Comment coder une page internet et la styliser”. Cet article a pour but de vous apprendre comment créer votre première page internet. Pour cela, nous allons diviser le processus en différentes étapes.

Mais comment fonctionne une page internet ?

Une page internet est tout simplement un code source qui est interprété par un navigateur. Il existe plusieurs navigateurs et il est nécessaire d’en utiliser un pour pouvoir suivre cet article.

Qu'est-ce qu'un code source ?

Le code source est un texte comportant des instructions écrites dans un langage de programmation. Il va être interprété par un logiciel ou un navigateur par exemple.

Le but, donc, de cet article est de vous apprendre les bases servant à réaliser une page internet. Pour cela, nous allons nous pencher sur les langages HTML et CSS. Ces deux langages sont des langages servant à la programmation web et sont parmi les plus connus !

Le HTML permet d’insérer du contenu à l’aide de balises. Et le CSS permet de mettre en forme le contenu.

À l’aide d’autres langages comme PHP ou JavaScript, il vous est possible d’améliorer votre site !

Prérequis :

un navigateur internet
une connexion internet

Niveau requis : Novice

Sommaire

Installation de l'éditeur
Créer sa page HTML
Créer sa feuille de style CSS
Lier la feuille de style CSS à la page HTML
Conclusion

Sommaire

Installation de l’éditeur

La première étape pour réaliser une page internet est d’installer un éditeur de texte.

Celui-ci vous permet d’écrire votre code source, la plupart des éditeurs de texte proposent des aides lors du développement de vos applications. Avec un seul éditeur, il vous est possible de coder sous différents langages.

Aujourd’hui, les plus connus sont :

Vous avez de la chance, ils sont tous gratuits !

Durant le reste de cet article, nous allons utiliser l’éditeur Visual Studio Code, aussi utilisé par notre alternant développeur web !

Créer sa page HTML

Une fois l’éditeur de texte installé, nous pouvons commencer à coder !

Première règle à savoir :

Un code HTML est un langage dit de balise, donc dès que l’on souhaite insérer du contenu, il faut ouvrir puis fermer la balise.

Deuxième règle :

Un fichier HTML se trouve entre les balises <html>...</html>. Cette balise sert au navigateur à identifier le langage.

Troisième et dernière que vous devez connaître :

Dans la balise <html>...</html>, il y a deux sous-balises.
La première balise <head>...</head> qui servira principalement à donner un nom au document et à insérer les imports.
La deuxième balise <body>...</body> sert à insérer le contenu de la page.

Nous allons ainsi former le squelette de notre fichier HTML.

<html>
	<head>

	</head>

	<body>

	</body>
</html>

Pour commencer, nous allons donner un nom au document. Celui-ci se trouve dans une balise <title>...</title> et est visible dans l’onglet du navigateur.

<html>
	<head>
		<title>Document</title>
	</head>

	<body>

	</body>
</html>

Pour que l’on puisse continuer sur les différents points qui vont suivre, nous allons ajouter du contenu.
Nous allons ajouter un titre principal à notre page à l’aide d’une balise <h1>...</h1>. Ces balises vont de h1 à h6 et la taille du titre est de plus en plus petite.

Nous allons aussi ajouter d’autres éléments :

un paragraphe avec du Loremp Ipsum à l’aide de la balise <p>...</p>
une liste avec la balise <ul>...</ul> où chaque ligne sera dans une balise <li>...</li>
et pour finir, un tableau dans une balise <table>...</table>, où chaque ligne sera dans une balise <tr>...</tr> et chaque colonne dans une balise <td>...</td>

Il faut aussi nommer votre fichier avec l’extension .html, par exemple, index.html.

Et voici le rendu de la page dans le navigateur :

Dès lors que notre code HTML est prêt, nous pouvons le styliser. C’est parti !

Créer sa feuille de style CSS

Ce qu’il faut savoir avec le CSS, c’est que l’on crée des styles que nous affectons à des noms référencés dans le HTML qui lui est lié.

Par exemple, dans notre fichier HTML fait, nous avons une balise <h1>, dans le CSS nous allons donc créer un style avec le nom “h1” pour qu’il s’affecte à cette balise. À cette balise, nous allons changer la couleur du texte en rouge et le mettre en italique.

Pour que le navigateur comprenne qu’il s’agit d’une feuille de style, il faudra que vous nommiez votre fichier avec l’extension .css, par exemple, style.css.

Nous allons donc coder :

h1 {
	color: red;
	font-style: italic;
}

Pour styliser tous les éléments que nous avons réalisés dans le fichier HTML, nous allons leur ajouter des styles.

Pour le tableau, on ajoute une couleur de fond en gris :

table {
	background-color: gray;
}

Pour la liste, on enlève les puces de chaque élément :

ul {
	list-style-type: none;
}

Et pour le paragraphe, on lui met le texte en gras :

p {
	font-style: bold;
}

Notre fichier CSS devrait ressembler à ça :

Lier la feuille de style CSS à la page HTML

Dès lors que nous deux fichiers sont prêts, il est temps de les lier pour que le style s’applique sur le HTML.

C’est très simple !

Pour ce faire, dans le fichier HTML, plus précisément dans la balise <head>...</head>, vous allez renseigner la liaison.

Il suffit d’écrire la ligne suivante :

<link rel=”stylesheet” href=”style.css”>

Et c’est tout !

Votre fichier HTML devrait ressembler à ça :

Et voici le rendu final :

Conclusion

Vous venez à l’aide de cet article de créer votre première page internet et de la styliser !

Si vous voulez pousser votre page plus loin, vous pouvez vous renseigner auprès de la documentation HTML et CSS.

Pour que vous puissiez apprendre de la meilleure façon, le mieux est de pratiquer !

As-tu aimé cet article ?

Clique sur l'étoile pour l'évaluer !

Note moyenne 0 / 5. Nombre de votes : 0

Aucun vote jusqu'à présent ! Tu peux être le premier à évaluer cet article.