Créer notre première page web !

Par Akw3l | 24/09/2021 - 23:23

Apprenez à créer votre première page web !

Prérequis :

Sublime Text
Chromes / Firefox / Opera / IE9 / Edge, ou autres navigateurs internets.

1. Commençons par le commencement :

Créer un nouveau dossier et nomme le "mon site web". Et créer y dedans un fichier nommé "index.html" Pensée bien à mettre l'extension de fichier en HTML et non TXT.

Pour la suite vous pouvez créer un dossier "images"

Votre dossier devrait donc ressemblez à ça :

Désormais vous pouvez passer à l'étape suivante.

2. La suite...

Vous pouvez désormais ouvrir sublime text, File (fichier) -> Open Folder (ouvrir un dossier) -> puis séléctionner le dossier de destination ou se trouve votre fichier "index.html" ainsi que "images".

Désormais vous pouvez cliquez sur la gauche de votre page sur le fichier "index.html" et nous allons commencer à écrire notre première partie de code.

Pour tout de suite se familliarisé avec les racourcies vous pouvez marqué <html et faire une tabulation, ce qui va vous écrire votre première partie de code qui est abusolument néscéssaire. Le code écrit devrait ressembler à cela :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

</body>
</html>

Pour y voir un petit peu plus clair vous pouvez suivre mon exemple ci dessous et faire des tabulation avant certain élément pour les espacés, ou bien copier le code ce dessous et remplacer le votre.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
</html>

Pour expliquer en bref ce que fait cette partie de code :

Cette partie de code nous sert à avoir les informations essentielles de la page, Head étant les informations principales, à l'intérieur d'Head nous pouvons voir Meta qui est le formatage de la page, Title étant le titre de la page. (Celui-ci s'affichant en haut dans la barre d'onglet)

Body étant l'endroit principal où nous allons écrire notre code.

Donc pour réellement commencer, nous allons écrire notre premier bout de code qui sera affichable car pour l'instant si nous allons lancer notre page HTML dans notre navigateur via notre explorateur de fichier, rien ne sera affiché, et... C'est normal ! Car pour l'instant nous n'avons rien affiché à l'écran de l'utilisateur !

Dans la partie "Body" nous allons écrire avec la balise <p></p>, la balise <p> nous sert à écrire un paragraphe.

donc dans body nous allons marquer <p puis faire tabulation normalement la balise devrait s'être dupliqué avec un "/" devant le p pour dire que la balise ce ferme.

Nous pouvons donc écrire à l'intérieurs de cette balise <p></p> Notre textes.

Donc notre code devrait ressembler à ça :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<p>Zone de textes de type paragraphes.</p>
	</body>
</html>

Pour pouvoirs voire notre texte affiché sur notre page nous devons sauvegarder notre fichier (CTRL+S) puis nous pouvons désormais nous rendre sur notre page web.

Vous devrez donc avoir ce résultat :

Si vous n'avez pas le résultat voulu retourner au début de ces étapes et vérifier, sinon passer dans l'espace commentaire.

Désormais nous allons voir comme faire des titres (ce qui est notre dernière étape à voir sur ce tutoriel)

Pour faire des titres nous allons utiliser les balise :

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

<h1> étant le titre (header) le plus GROS / GRAS.

<h6> étant le titre (header) le plus petit et le moins gras.

Donc pour utiliser cette balise nous allons avoir la même base que pour les paragraphes.
Nous allons écrire <h1 puis faire tabulation pour avoir <h1></h1>
Puis nous allons par la suite écrire notre texte en <h1> et </h1>

Nous pouvons répétez les étapes mais en mettant <h2> / <h3> / etc...

Notre code devrait donc ressembler à ça :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<p>Zone de textes de type paragraphes.</p>
		<h1>Zone de textes de type Header h1</h1>
		<h2>Zone de textes de type Header h2</h2>
		<h3>Zone de textes de type Header h3</h3>
		<h4>Zone de textes de type Header h4</h4>
		<h5>Zone de textes de type Header h5</h5>
		<h6>Zone de textes de type Header h6</h6>
	</body>
</html>

Ce qui devrait nous donner en résultat sur notre page web :

Le tutoriel numéro 1 est désormais terminé, je vous retrouve dans un deuxième tutoriel dans très peu de temps !