Construire votre propre site Web pour les débutants : 5 étapes

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

Que vous ayez déjà rêvé d'être programmeur informatique ou que vous ayez déjà utilisé un site Web, qui avouons-le, c'est presque nous tous, les technologies de l'information sont devenues l'épine dorsale des affaires. Bien que la programmation puisse sembler un peu effrayante au début, mon objectif est de vous enseigner les bases fondamentales de la conception Web afin qu'après ce didacticiel, vous puissiez créer votre propre page Web. Avec cela à l'écart, allons-y !

Fournitures

• Un Macintosh ou un PC Windows (bien que les distributions Linux puissent également être utilisées, je les saute pour l'instant car il s'agit d'une introduction pour débutant).
• Votre choix d'éditeur de texte (Notepad sur Windows, TextEdit sur Mac) ou votre choix d'IDE. D'après mon expérience, j'ai trouvé que Visual Studio Code fonctionne le mieux pour moi-même, je vous recommande donc également de le vérifier ici: https://code.visualstudio.com/ sans oublier qu'il fonctionne sur toutes les plates-formes de système d'exploitation.

Étape 1: Balises et un peu d'histoire

Une fois que vous avez décidé de votre choix d'éditeur de texte ou d'IDE, commençons par les bases.

Croyez-le ou non, HTML ou HyperText Markup Language existe depuis près de 30 ans maintenant et chaque année, de plus en plus d'améliorations sont apportées au langage. Maintenant, vous demandez peut-être comment un navigateur interprète-t-il ce qu'il faut afficher à l'écran ? Cela se fait en quelques parties:

Le formatage des documents HTML est simple. Vous avez deux sections appelées la tête et le corps. L'en-tête d'un site Web contient du code qui n'est pas visible pour l'utilisateur. Ceci est utilisé pour lier les feuilles de style et déclarer d'autres bits nécessaires pour que le site s'affiche correctement. Après la tête, le corps est pour ainsi dire, le corps du site Web. C'est ici que vous pouvez faire entendre votre voix et montrer au public vos fantastiques compétences en HTML ! Maintenant, ce n'est pas aussi simple que de simplement taper du texte dans le corps et de l'afficher exactement comme vous le souhaitez, mais c'est presque aussi simple dans un sens avec l'utilisation de choses que nous appelons des balises.

Voici quelques-unes des balises HTML de base:

• title – qui est utilisé pour dire au navigateur quel est le titre de la page. C'est également ce que vous voyez lorsque vous regardez l'onglet d'une page Web.
• h1, h2, h3, h4 – qui sont utilisés pour différentes tailles d'en-tête, h1 étant la plus grande et h4 la plus petite. Je couvrirai plus à ce sujet dans la section suivante.
• p – paragraphe, utilisé pour écrire des paragraphes de texte. Comme des paragraphes sur un papier.
• br – break, qui insère une pause en ligne avec le texte.
• a – utilisé pour créer des liens vers d'autres pages, comme un lien cliquable.
• img - utilisé pour lier une image à la page Web.
• ul, ol, li – listes non ordonnées, listes ordonnées et éléments de liste.
• – utilisé pour faire des commentaires en ligne dans le code qui ne seront pas vus par l'utilisateur final.

Et voici quelques balises CSS (visuelles):

• couleur - utilisé pour attribuer une couleur spécifique à un élément spécifique ou défini sur la page Web.
• font-size – utilisé pour changer la taille de la police sur la page.
• background-color – utilisé pour changer la couleur de fond de certains éléments ou de la page entière.

J'ai également joint une petite aide-mémoire pour vous aider si vous vous sentez un peu perdu, mais ne vous inquiétez pas, vous vous y habituerez en un rien de temps ! De plus, www.w3schools.com est également une ressource fantastique pour toutes vos questions de programmation. Ils m'ont définitivement fait gagner du temps ou aussi.

Essentiellement, la façon dont le navigateur lit le fichier est simple. Il va ligne par ligne et traite fonction par fonction. Les caractères sont utilisés pour déclarer une balise telle que

et sont utilisés pour fermer la balise tels que

. Ceci est important sinon le navigateur ne sait pas où s'arrêter. Entre le

et

tags, c'est là que vous entrez ce que vous voulez !

Étape 2: Configuration de l'éditeur

Maintenant que nous avons couvert un peu les éléments de base d'un site Web HTML, plongeons-nous et essayons-le par nous-mêmes. Pour cette prochaine étape, j'utiliserai Visual Studio Code pour programmer le site Web, mais la disposition du code sera la même si vous êtes plus à l'aise avec le Bloc-notes ou TextEdit.

Dans le Bloc-notes:

• Avec le Bloc-notes, le programme se lance avec un fichier vierge, ce qui le rend très facile à démarrer. Cela nous permettra également de sauter quelques étapes par rapport à l'utilisation de VS Code. Commençons par enregistrer le fichier au bon format.
• Cliquez sur Fichier > Enregistrer
• Entrez un nom pour votre fichier suivi de.html et sous Type de fichier, sélectionnez tous les fichiers. Cliquez sur enregistrer.

Dans le code VS:

• La meilleure façon pour vous de profiter de toutes les fonctionnalités de l'IDE est de commencer par créer le fichier et de dire à l'IDE de quel type de fichier il s'agit. Cela peut être fait comme suit:
• Cliquez sur Fichier > Nouveau fichier
• Un fichier vierge s'ouvre
• Ensuite, vous voudrez commencer par enregistrer le fichier, bien que vide, car cela permettra à l'IDE de comprendre quel type de fichier le produit final sera. Lors de l'enregistrement, assurez-vous d'inclure l'extension.html à la fin du nom du fichier. Cliquez sur enregistrer.

Étape 3: Plans

Après avoir enregistré avec succès votre fichier filename.html, commençons par créer le cadre de notre page Web. Rappelez-vous ci-dessus quelles parties clés du fichier nous devons déclarer avant de pouvoir commencer à créer le reste de la page HTML. Astuce: au démarrage du framework du site, la balise HTML !DOCTYPE indique au navigateur que le fichier qu'il lit est un fichier html. Cela peut être utile si vous avez différents types de code dans le même fichier et que vous souhaitez basculer entre les interprètes. Pour la portée de cet instructable, nous n'en parlerons pas trop, mais si après cet Instructable vous êtes curieux d'en savoir plus sur le développement HTML, n'hésitez pas à essayer. Je vais insérer la balise HTML !DOCTYPE en haut du fichier pour les meilleures pratiques. N'oubliez pas d'ouvrir et de fermer avec.

Voici où enregistrer le fichier avant de commencer la programmation est utile, maintenant que l'IDE sait qu'il fonctionne avec un fichier HTML, il utilisera intellisense pour terminer l'expression et proposer des suggestions afin que vous n'oubliiez pas accidentellement de fermer une balise. Notez que pour ceux d'entre vous qui utilisent le Bloc-notes, intellisense n'est pas disponible comme dans l'IDE. Nous commençons par saisir les balises head et body comme suit: (voir deuxième image).

Maintenant que la configuration des documents est terminée, nous pouvons nous lancer dans les courses et nous amuser !

Étape 4: Codez; Code; Code;

Nous pouvons commencer par insérer un titre pour notre fichier nouvellement créé. Entrez ce que vous voulez. N'oubliez pas qu'il s'agit du nom qui apparaît dans l'onglet du navigateur. Commençons également par saisir une rubrique pour notre site. Rappelez-vous d'avant comment nous procédons. Ai-je entendu h1/2/3/4 ? C'est correct!

Avant de continuer, je trouve utile d'ouvrir notre fichier dans une fenêtre de navigateur afin que nous puissions voir en temps réel comment nos modifications se reflètent dans le navigateur. Vous pouvez le faire en cliquant sur Fichier > Enregistrer pour enregistrer le fichier, en naviguant jusqu'au dossier dans lequel le fichier HTML est enregistré, pour moi c'est le bureau, et utilisez le navigateur de votre choix pour ouvrir le fichier et voudriez-vous le regarder, voilà votre page Web ! Remarque: J'utilise personnellement Safari comme navigateur de choix sur mon ordinateur, cependant, dans le développement Web, Firefox est le navigateur de référence pour les tests car il fonctionne avec presque tous les langages de script Web.

Comme vous pouvez le voir, le titre s'affiche sur l'onglet, ainsi que notre rubrique h1. Je préfère que la fenêtre du navigateur du fichier soit ouverte à côté de l'IDE, car lorsque vous modifiez l'IDE et que vous enregistrez, les modifications sont instantanées dans le navigateur.

N'hésitez pas à essayer d'ajouter des balises et de jouer avec les différentes choses que vous pouvez faire avec HTML. Comme vous pouvez le voir ci-dessous, j'ai ajouté quelques paragraphes, des pauses, un lien hypertexte externe vers Instructables.com, une image (qui peut être liée à partir d'une source externe ou dans le même répertoire que celui où le fichier. HTML est stocké), un exemple de liste non ordonnée, une liste ordonnée et enfin un commentaire.

Si vous voulez essayer d'ajouter des options de couleur et d'arrangement, vous pouvez entrer une balise de style dans l'en-tête du fichier. C'est à ce moment-là que cela passe du HTML au CSS, mais pour des raisons visuelles, je vais entrer quelques lignes pour que vous puissiez voir comment cela fonctionne. Essentiellement, le fonctionnement de CSS est qu'il vous permet de contrôler les éléments HTML dans les fonctions en utilisant des crochets { } pour entrer votre code dans un élément HTML spécifique.

Étape 5: Réflexions finales

Et voila; vous avez créé avec succès votre première page Web ! Parce qu'il s'agit d'un guide pour débutant, je souhaite que votre première expérience avec HTML soit agréable. La meilleure façon d'apprendre d'après mon expérience est de plonger et d'essayer les choses, de voir ce que vous pouvez faire avec votre code et aussi de voir comment vous pouvez casser votre code. Cela renforce l'intégrité et vous aide à mieux comprendre comment et pourquoi le code fonctionne comme il le fait. N'oubliez pas que www. W3Schools.com est une excellente ressource pour les questions et qu'ils offrent même un bac à sable virtuel dans le navigateur pour essayer votre code. J'espère que vous avez appris quelque chose et bon codage !