Eine Website besteht aus drei Hauptteilen, die Header, Körper und Fußzeile sind. Diese Teile werden durch die Kombination vieler anderer Elemente wie Überschrift, Absatz, Bilder und mehr erstellt. Insbesondere ist der Header der wichtigste Teil jeder Webseite, da er alle Informationen zur Webseite enthält, einschließlich Titel, Beschreibung und Logo.

In diesem Handbuch werden wir die “besprechen“" Schild. So lass uns anfangen!

HTML -Header -Tag

HTML liefert die “Tag, mit dem der Titel und die Überschrift des zugehörigen Inhalts auf einer Webseite definiert wird. Sie können auch eine Überschrift, Absatz, Logo, Bild und Links im Header hinzufügen.

Syntax

Die Syntax des Header -Tags lautet:

HTML -Elemente

Die Elemente, die Sie in den Header aufnehmen möchten.

Lassen Sie uns zu dem Beispiel wechseln, in dem wir lernen, wie man einen Header erstellt.

Beispiel: So erstellen Sie einen Header?

In der HTML -Datei werden wir zunächst die „verwenden“”Tag zum Erstellen eines Headers. Danach fügen Sie eine Überschrift hinzu "

”Und vier Links mit der“”Tag in der“" Schild. Im "href", hinzufügen "#”Und setzen Sie den Link der Seite, die Sie hinzufügen möchten. Als nächstes weisen Sie die Namen der Links als “zu" zu "Heim","Um","Kontaktiere uns", Und "Datenschutz-Bestimmungen”. Diese Linknamen werden auf der Header der Webseite angezeigt.

Html

LinuxHint

Heim
Um
Kontaktiere uns
Datenschutz-Bestimmungen

Im folgenden Bild sehen Sie, dass der Header erstellt wird:

Sie können den Header auch mit CSS stylen. Hier ist die Methode dazu.

Im CSS werden wir verwenden “Header”Zugreifen auf den in HTML erstellten Header. Verwenden Sie hier die “Textausrichtung"Eigenschaftswert als"Center”Um die Überschrift und Links in der Mitte der Seite auszurichten. Wir werden auch die Hintergrundfarbe des Headers als "festlegenRGB (80, 80, 79)"Und stellen Sie die Farbe der Überschrift als"RGB (206, 158, 34)”. Wir werden die Schriftgröße an “anpassen“30px”. Setzen Sie danach die Polsterung als "30px”.

CSS

Header
Text-Align: Mitte;
Hintergrund: RGB (80, 80, 79);
Farbe: RGB (206, 158, 34);
Schriftgröße: 30px;
Polsterung: 30px;

Das folgende Bild zeigt, dass der Header erfolgreich gestaltet ist:

Jetzt werden wir die Links stylen.

Stillinks

Zuerst verwenden Sie zuerst “A”Zu den Links zugreifen. Hier setzen wir den Wert der "TextdekorationEigentum als "keinerUm die Standarddekoration der Links zu löschen. Setzen Sie danach den Margin-Links als “40px", Randrechte als"30px"Und Margin-Top als"50px”. Am Ende setzen wir die Farbe der Links als "fest"RGB (206, 158, 34)”:

A
Textdekoration: Keine;
Rand-Links: 40px;
Rand-Rechts: 30px;
Rand: 50px;
Farbe: RGB (206, 158, 34)

Hier ist das Ergebnis, das zeigt, dass der Header erfolgreich gestaltet wird:

Header mit Logo

Sie können auch ein Logo zum Kopfball der Webseite hinzufügen. Zu diesem Zweck müssen Sie in der HTML -Datei ein Logo -Bild hinzufügen und mit CSS auf dem Header einstellen.

Beispiel

Hier erstellen wir eine DIV im Header -Tag und nennen die Div -Klasse als “Bild”. Der verbleibende Teil des Headers entspricht dem vorherigen Beispiel:

…

Im CSS werden wir verwenden “.Bild”Um auf das DIV zuzugreifen und ein Logo -Bild mit der“ hinzuzufügenHintergrund" Eigentum. Im "URL ()"Wir werden den Pfad des Bildes als" als "hinzufügen"URL (Logo.png)”. Hier werden wir verwenden “No-RepeatUm die Wiederholung des Bildes zu vermeiden. Am Ende setzen wir die Breite des Logos als "250px"Und die Höhe als"100px”:

.Bild
Hintergrund: URL (Logo.PNG) No-Repeat;
Breite: 250px;
Höhe: 100px;

Mit dem obigen Code wird die folgende Ausgabe erhalten, und es ist ersichtlich, dass das Logo in der oberen linken Ecke des Headers hinzugefügt wird:

Header mit Bild

Es ist auch möglich, einen Header mit dem Hintergrundbild zu erstellen. Lassen Sie es uns erstellen.

Beispiel

Zunächst werden wir das Bild in der HTML -Datei hinzufügen, genau wie im vorherigen Beispiel und dann den Pfad des Bildes in der URL () als "Bild.JPG"Und benutzen Sie eine"No-RepeatWert, um die Wiederholung des Bildes zu vermeiden. Verwenden Sie danach die Eigenschaft von Hintergrundpositionen, um die Position des Bildes als "als" festzustellen "Center"Und die Hintergrundgröße als" als "AbdeckungUm das Bild im gesamten Header einzustellen. Setzen Sie schließlich die Höhe des Bildes als “250px”:

.Bild
Hintergrund: URL (Bild.JPG) No-Repeat;
Hintergrundposition: Zentrum;
Hintergrundgröße: Cover;
Höhe: 250px;

Hier ist das Ergebnis, das zeigt, dass das Bild im Header hinzugefügt wird:

Das ist es! Wir haben das Header -Tag im Detail erklärt.

Abschluss

In HTML die “Das Tag wird verwendet, um den Webseiten -Header zu erstellen. Im Header -Teil der Webseite können die Überschrift, der kurze Absatz, das Logo, das Hintergrundbild und die Navigationsleiste hinzugefügt werden. In diesem Handbuch haben wir das Tag besprochen und ein Beispiel gegeben.