Créer votre premier site Web : 10 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Dans ce didacticiel, vous apprendrez à créer une page Web de base comportant une feuille de style liée et un fichier javascript interactif.

Étape 1: Création de votre dossier

Créez un dossier pour les fichiers que nous allons créer pour être stockés. N'hésitez pas à le nommer comme bon vous semble, rappelez-vous simplement où il se trouve car nous y enregistrerons des fichiers plus tard.

Étape 2: Création de votre premier fichier

Ouvrez votre éditeur de texte préféré. Dans mon cas, j'utiliserai simplement le bloc-notes intégré de Windows 10. Une fois que vous avez un nouveau fichier, tapez ce qui suit:

Il s'agit de ma première page Web, présentée par un instructable

C'est ce qu'on appelle une balise HTML. Il représente le titre 1. Le texte que nous mettons dans cette balise apparaîtra comme un titre sur la page. Il s'ouvre et se ferme ainsi. Le texte entre les deux balises est ce qui s'affichera dans votre navigateur Web. La partie qui dit donne à cette balise un attribut que nous référencerons à l'étape x. Une fois cela fait, enregistrez le fichier dans le dossier que nous avons créé à l'étape 1 sous le nom index.html.

Étape 3: Ouvrez le fichier

Maintenant que nous avons terminé de naviguer jusqu'au fichier dans le dossier que nous avons créé, faites un clic droit sur le fichier et sélectionnez l'option "Ouvrir avec" et sélectionnez le navigateur Web que vous utilisez. Dans mon cas, il s'agit de Google Chrome. Maintenant, regardez le travail de votre dur labeur jusqu'à présent !

Étape 4: styliser votre page

Tel quel, notre site Web est assez simple. Nous allons ajouter ce qu'on appelle une feuille de style en cascade pour pimenter un peu les choses. Créez un nouveau fichier texte et saisissez ce qui suit:

h1{couleur: bleu; text-align: center;}

Ce que nous disons au navigateur ici, c'est de trouver n'importe quel élément dans une balise h1 (dont nous avons appris à l'étape 2) et de lui donner une couleur bleue et de l'aligner au centre de la page. Enregistrez ce fichier dans le dossier que nous avons créé à l'étape 1 sous le nom style.css.

Étape 5: Liez le Style.css à votre Index.html

À ce stade, nous avons deux fichiers séparés qui ne se connaissent pas. Nous devons indiquer à notre fichier index.html que nous avons un fichier style.css auquel nous voulons qu'il se réfère et en extraire un certain style. Pour ce faire, nous allons ouvrir notre fichier index.html dans notre éditeur de texte, et au-dessus de notre balise h1 nous allons ajouter ce qu'on appelle une balise de lien. La balise link fait exactement ce que son homonyme implique, elle renvoie à quelque chose. Dans notre cas une feuille de style. Allez-y et tapez. La balise de lien est une balise à fermeture automatique, une balise de fin n'est donc pas requise. Le rel signifie relation et href indique au fichier d'index où se trouve notre fichier externe que nous référençons. Enregistrez maintenant ce fichier index.html.

Étape 6: affichez votre nouvelle page stylisée

Revenez à l'étape 3, rechargez votre page Web et regardez comment les changements se reflètent.

Étape 7: Création d'un bouton

Rouvrez votre fichier index.html dans votre éditeur de texte et tapez ce qui suit:

Cliquez moi !

et enregistrez le fichier. Cela crée un élément de bouton sur la page. Une fois enregistré, rouvrez le fichier comme indiqué à l'étape 3 et assurez-vous que le bouton se trouve en bas à gauche de votre page.

Étape 8: Créez votre fichier Javascript

Enfin, nous allons créer notre fichier javascript. C'est ce qui rendra notre site interactif. Ouvrez un éditeur de texte et saisissez ce qui suit:

document.querySelector("#bouton").addEventListener("click", function(){

document.querySelector("#heading").innerText = "Changement de titre à la volée"

})

Ce que nous faisons, c'est demander au document de nous trouver un élément avec l'ID du bouton, et nous allons faire en sorte que le bouton réponde à un événement de clic en changeant le texte d'un élément avec l'ID du titre en "Changement du titre à la volée ". Enregistrez le fichier sous le nom button.js dans le dossier que nous avons créé à l'étape 1.

Étape 9: Liez vos fichiers Javascript et index

Comme nous l'avons fait avec le fichier style.css, nous devons informer notre fichier index.html de notre fichier javascript. En bas, sous tout ce que nous avons fait jusqu'à présent, tapez ce qui suit:

La balise script nous permet d'ajouter un langage de script (dans notre cas, javascript) pour fournir des fonctionnalités à notre page. Nous lui disons de rechercher un fichier appelé button.js et d'ajouter tout le code qu'il contient à notre fichier d'index. Une fois que vous avez saisi cela, enregistrez le fichier et ouvrez-le à nouveau comme indiqué à l'étape 3.

Étape 10: Testez le bouton nouvellement créé

Maintenant, allez-y et cliquez sur le bouton et regardez le changement de cap !

Toutes nos félicitations!! Vous venez de créer votre première page Web interactive ! Je me demande jusqu'où tu pourrais aller plus loin en sachant ce que tu sais maintenant ??