HTML ist die weit verbreitete Markup -Sprache, um eine Webseitenstruktur zu erstellen. Es bietet verschiedene Tags, die verwendet werden, um der Webseite verschiedene Elemente hinzuzufügen wie z , ,
, Und . Diese Tags sind im Texteditor definiert und im Browser sichtbar. In diesem Artikel wird erörtert:
Voraussetzungen zum Erstellen einer Website So erstellen Sie eine HTML -Seite? So erstellen Sie die HTML -Website mit Code? Wie man HTML -Elemente durch CSS stymt? Voraussetzungen zum Erstellen einer Website
Die Voraussetzungen zum Erstellen einer Website sind:
Ein Texteditor Webbrowser Was ist ein Texteditor?
Ein Texteditor ist ein Computer -Softwareprogramm, mit dem Benutzer Text bearbeiten, speichern und drucken können. Diese Redakteure werden oft als Notepad -Software bezeichnet. Es gibt mehrere Textredakteure wie:
Notizblock Visual Studio -Code Erhabener Text Notiz: Wir werden Visual Studio Code Editor für die Demonstration verwenden. Benutzer können einen der Textredakteure gemäß ihren Vorlieben installieren.
So erstellen Sie eine HTML -Seite?
Die schrittweise Prozedur zum Erstellen einer Website im Visual Studio-Code wird unten erläutert.
Schritt 1: Erstellen Sie einen Projektordner
Erstellen Sie zunächst einen Ordner und nennen Sie ihn so wie Sie möchten. Zum Beispiel haben wir den Dateinamen als "als" angegeben "angegeben"Html ”. In diesem Ordner erstellen wir Unterordner und Dateien für unser Projekt:
Schritt 2: Ordner öffnen
Öffnen Sie den Projektordner, klicken Sie mit der rechten Maustaste und wählen Sie dann das ausMit Code geöffnet Option im Kontextmenü:
Infolgedessen wird das folgende Fenster angezeigt:
Schritt 3: Erstellen Sie ein neues “.HTML ”Datei
Erstellen Sie eine neue Datei, indem Sie auf das Symbol neuer Datei klicken, wie im folgenden Bild gezeigt:
Speichern Sie die Datei mit der “.html " Verlängerung.
Schritt 4: HTML -Code hinzufügen
Fügen Sie den erforderlichen HTML -Code in die Datei hinzu:
Lassen Sie uns ein Beispiel geben, um zu sehen, wie der HTML -Code die Website im Browser ausführt und zeigt.
So erstellen Sie eine Website in HTML?
Um eine Website von Grund auf neu zu erstellen, lesen Sie die folgenden Schritte.
Schritt 1: Erstellen Sie einen Div -Container
Erstellen Sie in HTML eine DIV namens “Container ”. Innerhalb dieser DIV werden wir Elemente zum Erstellen einer Website hinzufügen:
Schritt 2: Fügen Sie "Header" und "NAV" -Eremente hinzu
Im Div -Behälter platzieren Sie eine “" Schild. Das Header -Element enthält ein Bild und eine Navigationsleiste. Insbesondere zeigt die Navigationsleiste eine Liste von Links zu mehreren Abschnitten unserer Website an:
Schritt 3: Hinzufügen von "Abschnitt Banner"
Füge hinzu ein "” Tag mit Klassennamen “Banner ”. Dieser Abschnitt enthält a
Tag zum Übergang:
Schritt 4: Erstellen Sie den Abschnitt „Überus“
Dann erstellen Sie eine “über uns Abschnitt, der Informationen zu unserer Website enthält. Erstellen wir es, indem wir zuerst eine Überschrift mit einem “hinzufügen“
Über uns
LinuxHint ist die beste Online -Tutorial -Website. Von hier aus können Sie anders lernen
Weiterlesen Lassen Sie uns den nächsten Schritt voranschreiten.
Schritt 5: Erstellen Sie den Abschnitt "OurServices"
Als nächstes fügen Sie einen Abschnitt für "hinzu"Unsere Dienstleistungen ”. Dieser Abschnitt enthält die Serviceinformationen zu unserer Website.
Erstellen wir es, indem wir zwei Divs in einem DIV namens hinzufügen “Unsere Dienstleistungen ”. Die erste Div "Dienstleistungen "Enthält Baumdivs mit dem Namen"Service Jeweils mit unterschiedlichen Informationen. Jede "Service ”DIV enthält die mit unterschiedlichen Attributwerten,
und Schaltflächen -Tags:
Wir bieten der Welt eine qualitativ hochwertige Bildung.
Service anzeigen Wir bieten der Welt Kenntnisse über aufkommende Technologien.
Service anzeigen Gerne helfen Sie der Welt.
Service anzeigen Schritt 6: Definieren Sie das „Fußzeilen“ -Element
Um eine Fußzeile der Website zu machen, verwenden Sie die “" Schild. Dieses Element enthält ein Tag, um Inhalte mit kleinerem Text anzuzeigen:
(c) Urheberrecht - Alle Rechte vorbehalten Die Struktur unserer Website ist Don. Lassen Sie uns nun zum Styling zum CSS gehen.
Wie man HTML -Elemente durch CSS stymt?
Schauen Sie sich nun an, wie wir unsere Website mit CSS -Eigenschaften stylen werden.
Stil alle Elemente (*)
* Das Sternchen " * ”Wird in CSS verwendet, um alle oder alle Arten von Elementen auszuwählen und die folgenden Eigenschaften anzuwenden:
“Rand Eigenschaften werden verwendet, um Platz um das Element zu geben. “Polsterung ”Wird verwendet, um Platz um den Inhalt des Elements zu geben. “Kastengrößen ”Bestimmt die Methode, um die Gesamthöhe und Breite des Elements zu berechnen. “Schriftfamilie ”Definiert das Schriftstyling. Stil „H2“ -Tag
H2 Der " “Schriftgröße ”Wird verwendet, um die Größe der Schriftstelle einzustellen. “Schriftgewicht Gibt die Dicke der Schrift an. Stil „Abschnitt“ Element
Abschnitt Zu stylen “Abschnitt ”, Wenden Sie die unterbezeichneten Eigenschaften an:
“Polsterung ”Wird verwendet, um Platz auf dem Inhalt zu geben. “Padding-Bottom ”Wird Platz am Ende des Inhalts anwenden. Stil „Button“ Element
Taste Jede Schaltfläche unserer Website enthält die folgenden Eigenschaften:
“Hintergrundfarbe ”Wendet die Farbe auf den Hintergrund der Taste an. “Farbe Eigenschaft definiert eine Farbe für die Button -Beschriftung. “Grenze ”Eigenschaft wendet einen Rand auf die Schaltfläche an, indem die Breite, den Typ und die Farbe angegeben wird. “Polsterung Eigenschaft wird verwendet, um Platz um den Inhalt des Textes zu geben. “Schriftgröße ”Legt die Größe der Schriftart fest. “Mauszeiger Gibt den Mauszeiger auf Schweber an. Stil „Container“ div
.Container Hier:
“maximale Breite Eigenschaft definiert die maximale Breite des Elements. “Rand Eigenschaften werden verwendet, um Platz um das Element zu geben. Stil „Header“ -Tag
Header Nach dem angegebenen Code -Snippet:
“Polsterung ”Wird genutzt, um Platz oben im Inhalt zu geben. “Padding-Bottom ”Wird am Ende des Inhalts auf Platz eingestellt. “Hintergrundfarbe ”Wird so eingestellt, dass Farbe auf den Hintergrund des Elements angewendet wird. “Anzeige Gibt das Anzeigeverhalten an. Der Flex -Wert wird verwendet, um ein flexibles Layout zu erstellen. “Rechtfertigungsbekämpfung ”Wird flexible Elemente entsprechend dem ihm gegebenen Wert platzieren. “Ausrichtung ”Legt die Elementausrichtung in einem flexiblen Behälter fest. Stil „Header
Header ul Die ungeordnete Liste des Header -Tags ist den folgenden Eigenschaften zugeordnet:
“Listenstil ”Wird verwendet, um der Liste Stil zu verleihen. Im Beispiel haben wir seinen Wert als "als" festgelegt "keiner Um die Unterstreichung aus der Liste zu entfernen. “Anzeige Die Eigenschaft wird verwendet, um das Anzeigeverhalten der Tags anzugeben. Der Flex -Wert wird verwendet, um ein flexibles Layout zu erstellen. Stil „A“ Tag
Header ul li a Die Ankerelemente des Header -Tags sind mit den folgenden Stilen versehen:
“Textdekoration Eigenschaft wird verwendet, um den Text mit verschiedenen Linienstilen zu dekorieren. “Polsterung ”Wird verwendet, um Platz um jeden Anker -Tag zu geben. “Farbe Die Eigenschaft wird so eingestellt, dass Farbe auf den Text des Anker Tags angewendet wird. Stil „Banner“ div
.Banner Die Div mit Namen “Banner ”Wird wie folgt gestaltet:
“Hintergrundbild Diese Eigenschaft wird die URL des Hintergrundbildes zugewiesen. “Hintergrundposition Ist die Position des Bildes als Zentrum. “Hintergrund Wiederholung Die Eigenschaft legt das Bild als Wiederholung fest. “Hintergrundgröße ”Wird als Abdeckung eingestellt, was bedeutet, dass das Bild zum Div passt. “Polsterung ”Gibt Platz an der Spitze des Inhalts. “Padding-Bottom ”Gibt Platz am Ende des Inhalts. Stil „H2“ Tag des Banner Div
.Banner H2 Der
Das Tag des Banner -Divs wird mit diesen Eigenschaften angewendet:
“Farbe Eigenschaft legt die Farbe des Textes fest. “Textausrichtung ”Mit dem Value Center setzt der Text als Mitte ausgerichtet. “Schriftgröße Eigenschaft legt die Schriftgröße des Elements fest. Stil „überus“ div
.über uns Der ".über uns ”Wird verwendet, um auf die Klasse überus zuzugreifen. Der "Textausrichtung Eigenschaft wird den Elementtext in der Mitte festgelegt.
Stil "H2" und "P" Tags von "Aboutus" Div
.Überus H2,Dann setzen Sie die “Padding-Bottom Eigentum als "20px ”Zu beiden
Und
Stichworte.
Stil „OurServices“ Div
.Unsere Dienstleistungen Die Div "OurServices" ist mit "bereitgestellt"Hintergrundfarbe " als "#efefef ”.
Stil „Services“ div
.Unsere Dienstleistungen .Dienstleistungen Das Kind Div “Dienstleistungen "Der Eltern Div"Unsere Ausgaben ”Wird mit den unten beschriebenen Eigenschaften gestaltet:
“Anzeige Die Eigenschaft wird verwendet, um das Anzeigeverhalten festzulegen. Der Flex -Wert macht ein flexibles Layout. “Rechtfertigungsbekämpfung Die Eigenschaft horizontal ausrichtet die Elemente des flexiblen Elements. Stil "Service" Div
.Unsere Dienstleistungen .Service Der ".Unsere Dienstleistungen .Service "Bezieht sich auf die Kinderdiv"Service ”Von Eltern Div"Unsere Dienstleistungen ”Div. Jeder Dienst ist mit der Eigenschaft Textausrichtung mit dem Wertzentrum definiert.
Stil „Button“ Element
.unsere Services -Taste Die Eigenschaft "Rand ”Wird verwendet, um Platz auf dem Button -Element festzulegen.
Stil „Fußzeile“ Element
Fusszeile Das Fußzeile -Tag wird wie folgt gestaltet:
“Polsterung ”Soll Platz oben am Inhalt der Fußzeile geben. “Padding-Bottom ”Soll Platz am unteren Rand des Fußzeileninhalts geben. “Hintergrundfarbe ”Wird so eingestellt, dass sie Farbe auf der Rückseite der Fußzeile anwendet. “Farbe Gibt die Farbe der Schriftart an. “Textausrichtung ”Wird als Zentrum eingestellt. Schritt 5: Speichern Sie die HTML -Datei und öffnen Sie sie im Browser
Speichern Sie die HTML -Datei mithilfe der Schlüsselkombination “Strg+s Oder speichern, indem Sie die "auswählen"Speichern Option aus dem Dateimenü oben linke Ecke des Editors. Klicken Sie dann mit der rechten Maustaste im Arbeitsfenster des Visual Studio Code und klicken Sie auf “Öffnen Sie mit Live -Server Option im Dropdown -Menü wie unten gezeigt:
Notiz: Wenn Sie die Live -Server -Erweiterung nicht installiert haben, folgen Sie unserem anderen dedizierten Beitrag.
Wie Sie sehen können, haben wir unsere Website erfolgreich erstellt und gestylt:
Hier ging es darum, eine Website mit HTML- und CSS -Code zu erstellen.
Abschluss
Die Hypertext -Markup -Sprache ist der Standard, um Webseiten zu erstellen. Es gibt Hunderte von Elementen, die in HTML -Dateien verwendet werden. Jedes Element wird für bestimmte Aufgaben für die Webanwendung verwendet. Um den HTML -Code zu schreiben, ist es wichtig, einen Texteditor wie Sublime Text, Visual Studio Code, Notepad ++ oder mehr zu verwenden. In diesem Artikel wurde die schrittweise Prozedur zum Erstellen einer HTML-Website im Visual Studio-Code erfolgreich erläutert.
