HTML est le langage de balisage largement utilisé pour créer une structure de page Web. Il fournit des balises différentes qui sont utilisées pour ajouter différents éléments à la page Web tels que , ,
, et . Ces balises sont définies dans l'éditeur de texte et visibles sur le navigateur. Cet article discutera:
Prérequis pour créer un site Web Comment créer une page HTML? Comment créer un site Web HTML avec code? Comment styliser les éléments HTML via CSS? Prérequis pour créer un site Web
Les conditions préalables pour créer un site Web sont:
Un éditeur de texte Navigateur Web Qu'est-ce qu'un éditeur de texte?
Un éditeur de texte est un logiciel informatique qui permet aux utilisateurs de modifier, de stocker et d'imprimer du texte. Ces éditeurs sont souvent connus comme un logiciel de bloc-notes. Il existe plusieurs éditeurs de texte, tels que:
Bloc-notes Code Visual Studio Texte sublime Note: Nous utiliserons l'éditeur de code Visual Studio pour la démonstration. Les utilisateurs peuvent installer l'un des éditeurs de texte en fonction de leurs préférences.
Comment créer une page HTML?
La procédure étape par étape pour créer un site Web dans le code Visual Studio est expliquée ci-dessous.
Étape 1: Créez un dossier de projet
Tout d'abord, créez un dossier et nommez-le comme vous le souhaitez. Par exemple, nous avons spécifié le nom du fichier comme «Html ". Dans ce dossier, nous créerons des sous-reprendurs et des fichiers pour notre projet:
Étape 2: dossier ouvert
Ouvrez le dossier du projet, cliquez avec le bouton droit, puis sélectionnez le «Ouvrir avec le code ”Option dans le menu contextuel:
En conséquence, la fenêtre suivante sera affichée:
Étape 3: Créez un nouveau ".fichier html ”
Le, créez un nouveau fichier en cliquant sur la nouvelle icône de fichier comme indiqué dans l'image ci-dessous:
Enregistrez le fichier avec le «.html " extension.
Étape 4: Ajouter le code HTML
Ajoutez le code HTML requis dans le fichier:
Perdons un exemple pour voir comment le code HTML s'exécute et affiche le site Web du navigateur.
Comment créer un site Web dans HTML?
Pour créer un site Web à partir de zéro, consultez les étapes ci-dessous.
Étape 1: Créez un conteneur «div»
Dans HTML, créez un div nommé «récipient ". Dans cette div, nous ajouterons des éléments pour créer un site Web:
Étape 2: Ajoutez des éléments «en-tête» et «nav»
À l'intérieur du récipient Div, placez un «" étiqueter. L'élément d'en-tête comprend une image et une barre de navigation. Plus précisément, la barre de navigation affiche une liste de liens vers plusieurs sections de notre site Web:
Étape 3: Ajouter la «bannière de section»
Ajouter un "" Tag avec nom de classe "bannière ". Cette section contient un
Tag pour la rubrique:
Étape 4: Créez la section «À propos»
Ensuite, créez un "à propos de nous »Section qui contiendra des informations sur notre site Web. Créons-le en ajoutant d'abord une rubrique avec un "
À propos de nous
Linuxhint est le meilleur site Web de tutoriel en ligne. De là, vous pouvez apprendre différent
En savoir plus Passons de l'avant vers l'étape suivante.
Étape 5: Faire la section «OurServices»
Ensuite, ajoutez une section pour «Nos services ". Cette section contiendra les informations de service sur notre site Web.
Créons-le en ajoutant deux divs à l'intérieur d'un div nommé «Nos services ". La première div "prestations de service "Contiendra des divs d'arbres avec le nom"service "Chacun avec des informations différentes. Chaque "service »Div contient les valeurs d'attribut avec différentes,
et balises de bouton:
Nous fournissons une éducation de qualité au monde.
Afficher le service Nous fournissons au monde une connaissance des technologies émergentes.
Afficher le service Heureux d'aider le monde.
Afficher le service Étape 6: Définissez l'élément «pied de page»
Pour faire un pied de page du site Web, utilisez le «" étiqueter. Cet élément contient une balise pour afficher du contenu avec un texte plus petit:
(c) Copyright - Tous droits réservés La structure de notre site Web est Don. Maintenant, passons au CSS pour le style.
Comment styliser les éléments HTML via CSS?
Maintenant, consultez comment nous allons styliser notre site Web en utilisant les propriétés CSS.
Style Tous les éléments (*)
* L'astérisque « * »Est utilisé dans CSS pour sélectionner tout ou partie des éléments et appliquer les propriétés suivantes:
"marge »La propriété est utilisée pour donner de l'espace autour de l'élément. "rembourrage "Est utilisé pour donner de l'espace autour du contenu de l'élément. "dimensionnement en boîte »Détermine la méthode pour calculer la hauteur et la largeur globales de l'élément. "famille de polices »Définit le style de police. Tag de style «H2»
H2 Le " "taille de police ”Est utilisé pour définir la taille de la police. "poids de police »Spécifie l'épaisseur de la police. Élément de style «section»
section Styliser "section », Appliquez les propriétés indiquées ci-dessous:
"padding "Est utilisé pour donner de l'espace au-dessus du contenu. "rembourrage «Appliquera de l'espace au bas du contenu. Élément de style «bouton»
bouton Chaque bouton de notre site Web conservera les propriétés suivantes:
"Couleur de l'arrière plan »Applique la couleur à l'arrière-plan du bouton. "couleur »La propriété définit une couleur pour la légende du bouton. "frontière »La propriété applique une bordure au bouton en spécifiant la largeur, le type et la couleur. "rembourrage »La propriété est utilisée pour donner de l'espace autour du contenu du texte. "taille de police »Définit la taille de la police. "le curseur »Spécifie le pointeur de la souris sur le plan de volant. Style «conteneur» div
.récipient Ici:
"largeur maximale »La propriété définit la largeur maximale de l'élément. "marge »La propriété est utilisée pour donner de l'espace autour de l'élément. Tag de style «en-tête»
entête Selon l'extrait de code donné:
"padding "Est utilisé pour donner de l'espace en haut du contenu. "rembourrage ”Est défini sur l'espace au bas du contenu. "Couleur de l'arrière plan "Est défini pour appliquer la couleur sur l'arrière-plan de l'élément. "afficher »Spécifie le comportement d'affichage. La valeur flexible est utilisée pour faire une disposition flexible. "justifier "Placera les éléments flexibles en fonction de la valeur qui lui est donnée. "align-items ”Définit l'alignement de l'élément dans un conteneur flexible. Style «En-tête
en-tête ul La liste non ordonnée de la balise d'en-tête est associée aux propriétés suivantes:
"style de liste "Est utilisé pour donner du style à la liste. Dans l'exemple, nous avons défini sa valeur comme «aucun «Pour supprimer le soulignement de la liste. "afficher »La propriété est utilisée pour spécifier le comportement d'affichage des balises. La valeur flexible est utilisée pour faire une disposition flexible. Style «A» Tag
en-tête ul li a Les éléments d'ancrage de l'étiquette d'en-tête sont fournis avec les styles suivants:
"textaine-décoration »La propriété est utilisée pour décorer le texte avec différents styles de ligne. "rembourrage "Est utilisé pour donner de l'espace autour de chaque balise d'ancrage. "couleur ”La propriété est définie pour appliquer la couleur au texte de la balise d'ancrage. Style «bannière» div
.bannière Le div avec nom "bannière «Est stylé comme suit:
"image de fond "Cette propriété se voit attribuer l'URL de l'image d'arrière-plan. "position de fond "Est la position de l'image en tant que centre. "Répétition du fond »La propriété définit l'image comme aucune répétition. "taille de l'arrière-plan "Est défini comme la couverture, ce qui signifie que l'image s'adapte au div. "padding "Donne de l'espace au sommet du contenu. "rembourrage »Donne de l'espace au bas du contenu. Style Tag «H2» de Banner Div
.bannière h2 Le
La tag de la bannière div est appliquée avec ces propriétés:
"couleur »La propriété définit la couleur du texte. "alignement de texte ”Avec le centre de valeur définira le texte comme un centre aligné. "taille de police »La propriété définit la taille de la police de l'élément. Style «À propos» div
.à propos de nous Le ".à propos de nous "Est utilisé pour accéder à la classe. Le "alignement de texte »La propriété est définie le texte de l'élément au centre.
Style «H2» et «P» Tags de «À propos» div
.À propos de H2,Ensuite, définissez le "rembourrage «Propriété comme«20px "À la fois le
et
Mots clés.
Style «NORSERVICES» DIV
.Nos services Le div «nôtre» est fourni avec «Couleur de l'arrière plan " comme "#efef ".
Style «Services» div
.Nos services .prestations de service L'enfant div "prestations de service "Du parent div"ouverts «Est stylé avec les propriétés décrites ci-dessous:
"afficher »La propriété est utilisée pour définir le comportement d'affichage. La valeur flexible fait une disposition flexible. "justifier »La propriété aligne horizontalement les éléments de l'élément flexible. Style «Service» Div
.Nos services .service Le ".Nos services .service "Fait référence à l'enfant div"service "De parent div"Nos services »Div. Chaque service est défini avec le texte de la propriété avec le centre de valeur.
Élément de style «bouton»
.Bouton OurServices La propriété "marge ”Est utilisé pour régler l'espace en haut de l'élément bouton.
Élément de style «pied de page»
bas de page La balise de pied de page est stylée comme suit:
"padding "Est prêt à donner de l'espace sur le dessus du contenu du pied de page. "rembourrage «Est réglé pour donner de l'espace au bas du contenu de pied de page. "Couleur de l'arrière plan "Est défini pour appliquer la couleur à l'arrière du pied de page. "couleur »Spécifie la couleur de la police. "alignement de texte "Est défini comme le centre. Étape 5: Enregistrez le fichier HTML et ouvrez-le dans le navigateur
Enregistrez le fichier HTML en utilisant la combinaison de clés "Ctrl + s "Ou enregistrez en sélectionnant le"Sauvegarder ”Option dans le menu des fichiers dans le coin supérieur gauche de l'éditeur. Ensuite, cliquez avec le bouton droit dans la fenêtre de travail du code Visual Studio et cliquez sur "Ouvert avec le serveur en direct ”Option dans le menu déroulant comme indiqué ci-dessous:
Note: Si vous n'avez pas installé l'extension du serveur en direct, suivez notre autre message dédié.
Comme vous pouvez le voir, nous avons réussi à créer et à styliser notre site Web:
Il s'agissait de créer un site Web avec le code HTML et CSS.
Conclusion
Le langage de balisage hypertexte est la norme pour créer des pages Web. Il y a des centaines d'éléments utilisés dans les fichiers HTML. Chaque élément est utilisé pour certaines tâches spécifiques pour l'application Web. Pour écrire le code HTML, il est essentiel d'utiliser un éditeur de texte comme le texte sublime, le code Visual Studio, Notepad ++, ou plus. Cet article a expliqué avec succès la procédure étape par étape pour créer un site Web HTML dans le code Visual Studio.
