Comment créer une page HTML simple
Tout en commençant le développement Web, les débutants peuvent ne pas connaître la méthode pour créer une page HTML simple et l'exécuter. Ainsi, ce manuel démontrera:
- Prérequis pour créer une page Web
- Comment créer une page HTML simple?
- Comment styliser une page HTML simple?
Prérequis pour créer une page Web
Pour créer une page Web, les conditions préalables sont:
- Éditeur de texte
- Navigateur Web
Éditeur de texte comme condition préalable à la création de la page Web
Un logiciel informatique qui permet aux utilisateurs de modifier, de stocker et d'imprimer du texte est un éditeur de texte. Plusieurs éditeurs de texte peuvent être utilisés pour créer des programmes Web, des pages Web, et plus encore, comme le code Visual Studio, le texte sublime, le bloc-notes, etc. Si vous êtes un débutant, alors le bloc-notes est relativement facile à utiliser. Mais pour les grands projets, il est préférable d'utiliser tout autre éditeur comme le texte sublime ou le code Visual Studio.
Le navigateur Web comme condition préalable à la visualisation de la page Web
Un navigateur Web est un logiciel qui vous emmène n'importe où sur Internet. Il récupère des informations et les affiche sur un écran.
Comment créer une page HTML simple?
Maintenant, commençons à créer une page HTML simple étape par étape.
Étape 1: Créez un dossier vide
Tout d'abord, créez un dossier vide comme référentiel de notre projet:
Étape 2: Open Text Editor
Pour écrire du code HTML, choisissez d'abord l'éditeur de texte de votre choix. Par exemple, nous utiliserons Notepad ++, et son espace de travail ressemblera en quelque sorte à ceci:
Étape 3: Ajouter des éléments HTML à l'éditeur de texte
Les éléments HTML sont utilisés pour construire différents composants du document HTML. Par exemple, pour ajouter un paragraphe,
La balise est utilisée, les balises de cap sont indiquées comme
,
,
,
, , et . Pour ajouter une image, une balise peut être utilisée. Toutes ces balises sont ajoutées dans les balises de démarrage et de fermeture de l'élément racine .
. Pour ajouter une image, une balise peut être utilisée. Toutes ces balises sont ajoutées dans les balises de démarrage et de fermeture de l'élément racine .
Par exemple, nous avons ajouté l'exemple de code HTML dans notre fichier comme suit:
Html
Bienvenue dans ma première page HTML.
L'image ci-dessous montre un exemple de code écrit dans l'éditeur de Notepad ++:
Étape 4: Enregistrer le fichier
Enregistrez le fichier HTML dans le dossier que vous avez créé dans la première étape en cliquant sur le «Sauvegarder«Option comme indiqué ci-dessous:
En conséquence, il vous sera demandé de spécifier le nom du fichier et son type. Après cela, cliquez sur le "Sauvegarder”Bouton comme indiqué ci-dessous:
Étape 5: Ouvrez le fichier avec le navigateur Web
Pour voir comment le fichier HTML apparaît dans le navigateur, suivez les étapes ci-dessous:
- Tout d'abord, ouvrez le dossier où le fichier HTML est enregistré.
- Sélectionnez le fichier et cliquez avec le bouton droit sur le fichier. En conséquence, un menu déroulant apparaîtra.
- Ensuite, sélectionnez le "Ouvrir avec”Option puis choisissez le navigateur que vous souhaitez utiliser pour ouvrir la page Web. Par exemple, nous avons sélectionné «Google Chrome»:
En sélectionnant le navigateur, le code HTML générera le résultat comme suit:
C'est ainsi que nous pouvons créer une page HTML simple. Vous pouvez appliquer des styles à ces éléments HTML à l'aide de CSS.
Comment styliser une page HTML simple?
CSS, ou feuille de style en cascade, est utilisé pour spécifier comment les éléments HTML sont affichés sur le navigateur Web. Il permet aux utilisateurs d'appliquer plusieurs propriétés de style aux éléments HTML afin que la page Web soit plus attrayante et attrayante.
Maintenant, stylissons la page HTML créée ci-dessus à l'aide des propriétés CSS:
- Tout d'abord, ajoutez une balise dans la section tête du fichier HTML.
- À l'intérieur, H1 est utilisé pour accéder au
Tag sur lequel nous appliquerons différentes propriétés.
- Pour ajouter la couleur de la police, utilisez le «couleur«Propriété et définit sa valeur comme«rouge".
- Le "alignement de texte«La valeur de la propriété est définie comme«centre», Ce qui signifie que l'en-tête sera affiché au centre.
- Ensuite, pour souligner le titre, le «textaine-décoration«La propriété est définie comme«8px souligné Gray», Où 8px représente la largeur de la ligne, souligne la propriété de décoration, et le gris est la couleur. Les utilisateurs peuvent définir les valeurs de la propriété en fonction de leurs préférences.
- De même, nous appliquerons certaines propriétés au
élément aussi.
Vous trouverez ci-dessous le code du scénario décrit ci-dessus:
Enregistrez le fichier, puis ouvrez-le dans le navigateur Web:
C'est super! Nous avons appris à créer une page HTML simple et à le styliser avec certaines propriétés CSS.
Conclusion
Pour développer un site Web, d'abord, les utilisateurs doivent apprendre les langues HTML et CSS en tant que langue HTML fournit la structure de la page Web et pour embellir les pages Web, nous utilisons les propriétés CSS. Ces propriétés sont définies en fonction du choix de l'utilisateur. Pour créer un fichier HTML simple, vous pouvez utiliser un éditeur de texte ou un éditeur de code et suivre la procédure donnée. Ce manuel a expliqué comment créer une page HTML simple avec CSS à l'aide d'une implémentation pratique.