Web – Réalisation d’une page simple

Hello world

Une fois votre URL tapée (http://www.google.fr), votre navigateur envoie des requêtes au serveur correspondant, puis récupère pour former la page web que vous avez demandée :

Le fichier HTML correspondant
Les éventuels fichiers CSS et / ou JS
Les éventuels médias annexes (photo, musique, vidéo, …)

Je vous propose dans cet article de réaliser votre première page web constituée de 3 fichiers : HTML, CSS et JS

Logiciels requis :

(optionnel) Serveur Web Apache ou NGINX (j’utilise WampServeur)
Éditeur de fichiers texte (j’utilise NotePad++)
Navigateur (Firefox, Chrome, Edge, Opéra, …)

Sommaire

Principe

Préparation

Programme

Vous avez, ci-dessous, 3 exemples de pages web :

Le 1e exemple s’appuie sur un fichier HTML (code 1)
Le 2e exemple s’appuie sur 3 fichiers HTML, CSS et JS (codes 2 à 4)
Le 3e exemple s’appuie sur 3 fichiers HTML, CSS et JS plus complets (codes 5 à 7)

Pour créer la page web de votre choix, il vous suffit de :

Créer un dossier, puis l’ouvrir
Créer 3 fichiers texte (clic droit > Nouveau > Document texte)
Les renommer en index.html, styles.css, script.js
Écrire avec l’éditeur dans chaque fichier les codes de la partie de votre choix
Ouvrir index.html avec votre navigateur préféré

Bravo, vous avez crée votre première page web ! Il ne vous reste plus qu’à comprendre et modifier le code de base pour créer le site de vos rêves !

Si vous choisissez la partie page web basique, seul le fichier index.html est utile. Vous pouvez effacer les autres

Le fichier index.html peut être renommé. Si vous souhaitez aussi renommer les deux autres fichiers, il faudra également porter la modification dans le code de la partie HTML

1. HTML seul2. HTML2. CSS2. JS3. HTML3. CSS3. JS

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Voici mon site</title>
    </head>

    <body>
        <!-- Ceci est un commentaire de code, il ne s'affiche pas --> 
        <h1>Hello World! Ceci est un titre</h1>
        <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris è_é?</p>
        <p>Ceci est un <a href="https://www.ecosia.org/">lien goog... ecosia !</a></p>
    </body>
</html>

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Voici mon site</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    
    <body>
        <!-- Ceci est un commentaire de code, il ne s'affiche pas --> 
        <h1>Hello World! Ceci est un titre</h1>
        <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris è_é?</p>
        <p>Ceci est un <a href="https://www.ecosia.org/">lien goog... ecosia !</a></p>
    </body>
    
    <script type="text/javascript" src="./script.js"></script>
</html>

/* Ceci est un commentaire de code, il ne s'affiche pas */

p {
    color: blue;
  }

//Ceci est un commentaire de code, il ne s'affiche pas
//L'objet "window" est automatiquement crée par un navigateur

window.alert('Hello world!');

<!doctype html> 
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8"> 
        <title>Voici mon site</title>
		
		<!-- Le contenu CSS est chargé et s'applique au moment ou le fichier est appelé --> 
		<link rel="stylesheet" href="./styles.css" />
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body> 
		<h1>Partie 1 - Paragraphes</h1> 
        <div class="partie">
			<p>Ceci est un <strong>paragraphe</strong> normal. Aucun CSS ou JS est appliqué dessus ! è_é</p>
			<p id="p2">Ceci est un <strong>paragraphe</strong> mis en forme via CSS </p>
			<p id="p3">Ceci est un <strong>paragraphe</strong> mis en forme via CSS et l'évènement "souris dessus"</p>
			<p id="p4">Ceci est un <strong id="demo4">paragraphe</strong> modifié via JS</p>
			<p id="p5">Ceci est un <strong id="demo5">paragraphe</strong> modifié via JS et une fonction asynchrone</p>
		</div>
        
		<h1>Partie 2 - Animation CSS</h1>
		<div class="partie">
			<div id="demo6"></div>
		</div>
		
		<h1>Partie 2 - Animation JS</h1> 
		<div class="partie">
			<div id="souris" onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
			<p id="demo7"></p>
		</div>
    </body>
	
	<!-- Le contenu JS est exécuté au moment ou le fichier est appelé -->
	<!-- Il est placé à la fin pour que les éléments sur lesquels il agit soient déjà chargés, sinon erreur --> 
	<script type="text/javascript" src="./script.js"></script>
	
</html>


/* Ce bloc CSS met en forme le contenu de tous les éléments <p> */
p {
	font: Calibri;
	font-style: normal;
}


/* Ce bloc CSS fixe la taille occupé par l'élément class "partie" */
.partie {
  height: 150px;
  position: relative;
}


/* Ce bloc CSS met en forme le contenu de l'élément id "p2" */
#p2 {color: blue;}


/* Ce bloc CSS met en forme le contenu de l'élément id "p3" lors de l'évènement "hover" */
#p3:hover {background-color: gold;}


/* Ce bloc CSS anime en boucle la forme de l'élément id "demo6" */
@keyframes example {
	/* mises en formes successives appliquées par l'animation "example" */
	0%   {background-color:red;    left:0px;   top:0px;  }
	25%  {background-color:yellow; left:100px; top:0px;  }
	50%  {background-color:blue;   left:100px; top:100px;}
	75%  {background-color:green;  left:0px;   top:100px;}
	100% {background-color:red;    left:0px;   top:0px;  }
}

#demo6 {
	/* Objet et mise en forme d'origines sur lequels sera appliquée l'animation "example" */
	width: 50px;
	height: 50px;
	position: relative;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}


/* Ce bloc CSS fixe la taille occupé par l'élément id "souris" */
#souris {
  width: 200px;
  height: 100px;
  position: relative;
  border: 1px solid black;
}


//Ce code JS utilise les objets automatiquement crée par notre navigateur suivant
//window, console, document


//Ce code exécute "show_log()" si l'évènement 'load' est repéré dans l'objet "window" 
// ---- https://developer.mozilla.org/fr/docs/Web/Events
window.addEventListener('load', show_log());

function show_log()
{
	//affiche une phrase dans la console du navigateur (CTRL + MAJ + C)
	console.log('Cette fonction est exécutée une fois quand la page est chargée.');
}


//Ce code modifie le contenu HTML de l'élément id "demo4"
document.getElementById("demo4").innerHTML = "Hello JavaScript!";


//Ce code modifie le contenu HTML de l'élément id "demo5" de manière asynchrone
async function show_compteur()
{
	//Création d'une variable "compteur"
	var compteur = 1;
	while(true)
	{
		//Modification du contenu HTML de "demo5" situé dans l'objet "document"
		document.getElementById("demo5").innerHTML = "Hello JavaScript! " + compteur;
		compteur = compteur + 1;
		
		//Attente de 1000 ms avant de relancer la boucle infinie
		await new Promise(r => setTimeout(r, 1000)); //await arrête uniquement la présente fonction "async"
	}
}

show_compteur(); //Exécution de "show_compteur"


//Ce code repère les coordonnées curseur dans l'élément id "souris", puis l'affiche dans "demo7"
function myFunction(e) // s'exécute à chaque fois que le curseur rentre / bouge dans le cadre "souris"
{
	var x = e.clientX;
	var y = e.clientY;
	var coor = "Coordonnées: (" + x + "," + y + ")";
	document.getElementById("demo7").innerHTML = coor;    //Modifie le contenu HTML de l'élément id "demo7"
	document.getElementById("demo7").style.color = "red"; //Modifie / Ajoute un contenu CSS à l'élément id "demo7"
}

function clearCoor() // s'exécute à chaque fois que le curseur sort du cadre "souris"
{
	document.getElementById("demo7").innerHTML = "Placez votre curseur dans le rectangle au dessus"; //Modifie le contenu HTML de l'élément id "demo7"
	document.getElementById("demo7").style.color = "blue"; //Modifie / Ajoute un contenu CSS à l'élément id "demo7"
}

clearCoor(); // Lancement de clearCoor

Résultats

Vous pouvez observer ci-dessous l’affichage dans un navigateur des 3 pages web présentées plus tôt. Si vous avez un résultat différent, c’est que vous avez fait une erreur.

Page web 1 : image 1, à gauche
Page web 2 : images 2 et 3
Page web 3 : image 4, à droite

Observez le comportement de chacune des 3 pages. Une fois cela fait, prenez du temps pour comprendre, puis modifier le code utilisé pour créer votre propre site. C’est la meilleure méthode pour progresser !

GoodNight Moon