World Of Aloe

So legen Sie ein Hintergrundbild in HTML fest

5. August 2019 // von admin

Wenn Sie ein Bild zu einer Webseite hinzufügen möchten, benötigen Sie nur HTML. Wenn Sie ein Bild als Hintergrund für eine Webseite festlegen möchten, benötigen Sie sowohl HTML als auch CSS. HTML steht für Hypertext Markup Language und ist ein Code, der einem Browser sagt, was er auf einer Webseite anzeigen soll. CSS steht für Cascading Style Sheets und dient dazu, das Aussehen und Layout einer Webseite zu ändern. Sie benötigen ein Hintergrundbild, das Sie für Ihre Webseite verwenden möchten. Und sonst erklären wir Ihnen wie Sie ein Hintergrundbild HTML Code und CSS miteinander verwenden.

Einrichten Ihrer Dateien

1
Erstellen Sie einen Ordner, in dem sich Ihre HTML-Datei und Ihr Hintergrundbild befinden. Erstellen und benennen Sie auf Ihrem Computer einen Ordner, den Sie später leicht finden können.
-Sie können den Ordner beliebig benennen, aber wenn Sie mit HTML arbeiten, ist es am besten, sich daran zu gewöhnen, Dateien und Ordner mit kurzen, einzelnen Wortnamen zu benennen.

2
Legen Sie das Hintergrundbild in den HTML-Ordner. Legen Sie das Bild, das Sie als Hintergrund verwenden möchten, in den HTML-Ordner.
-Wenn Sie nicht allzu sehr darauf bedacht sind, sicherzustellen, dass Ihre Website auf älteren Geräten mit langsameren Internetverbindungen gut läuft, sollten Sie sicher sein, dass Sie ein Bild mit höherer Auflösung als Hintergrund verwenden. Einfache Bilder mit hellen, sich wiederholenden Mustern sind auch eine gute Wahl, wenn Sie sich für ein Hintergrundbild entscheiden, so dass Sie jeden darüber liegenden Text lesen können.
-Wenn Sie kein Bild haben, können Sie ein kostenloses Hintergrundbild herunterladen. Wenn Sie ein Bild herunterladen, legen Sie es in den von Ihnen erstellten HTML-Ordner.

3
Erstellen Sie eine HTML-Datei. Öffnen Sie einen Texteditor und erstellen Sie dann eine neue Datei. Speichern Sie die Datei als index.html.
-Sie können jeden beliebigen Texteditor verwenden, auch die Systemtexteditoren von Windows, Notepad und Mac OS X, TextEdit.
-Wenn Sie einen Texteditor für die Arbeit mit HTML verwenden möchten, klicken Sie hier, um Atom herunterzuladen, einen Texteditor, der unter den Betriebssystemen Windows, Mac OS X und Linux funktioniert.
Wenn Sie TextEdit verwenden, klicken Sie vor dem Schreiben der HTML-Datei auf das Menü Format und dann auf Klartext erstellen. Diese Einstellung stellt sicher, dass die HTML-Datei in einem Webbrowser korrekt geladen wird.
Textverarbeitungsprogramme, wie Microsoft Word, sind nicht gut zum Schreiben von HTML geeignet, da sie unsichtbare Zeichen und Formatierungen hinzufügen, die eine HTML-Datei so verändern können, dass sie in einem Webbrowser nicht korrekt angezeigt wird.

Schreiben der HTML-Datei

1
Kopieren und Einfügen des Standard-HTML-Codes. Wählen und kopieren Sie den untenstehenden HTML-Code und fügen Sie ihn dann in Ihre geöffnete index.html-Datei ein.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
body {
background-image: url(“ „);
}

</style>

</head>

<body>

</body>
</html>

2
Fügt die URL des Hintergrundbildes hinzu. Suchen Sie in der Datei index.html die Zeile Hintergrundbild: url(“ „);. Bewegen Sie den Mauszeiger zwischen die Klammern und geben Sie dann den Namen der Hintergrundbilddatei ein. Achten Sie darauf, dass Sie die Dateierweiterung für die Hintergrundbild-Datei angeben.

Wenn du fertig bist, sollte es so aussehen:
Hintergrundbild: url(„background.png“); Wenn Sie einen Dateinamen ohne Dateipfad oder URL verwenden, sucht der Webbrowser im Ordner der Webseite nach dem genannten Bild. Wenn sich die Datei in einem anderen Ordner auf Ihrem Dateisystem befindet, müssen Sie den vollständigen Pfad zu dieser Datei hinzufügen.

Überprüfen der HTML-Datei

1
Öffnen Sie die HTML-Datei in einem Webbrowser. Klicken Sie mit der rechten Maustaste auf die Datei index.html und öffnen Sie sie dann im Webbrowser Ihrer Wahl.
-Wenn der Browser geöffnet wird und Sie das Bild nicht sehen, stellen Sie sicher, dass der Name der Bilddatei im Texteditorfenster index.html korrekt geschrieben ist.
Wenn Sie beim Öffnen des Browsers HTML-Code anstelle des Hintergrundbildes sehen, wurde Ihre index.html-Datei als Rich-Text-Dokument gespeichert. Sie können versuchen, die HTML-Datei in einem anderen Texteditor zu bearbeiten.

2
Nehmen Sie Änderungen an der HTML-Datei vor. Bewegen Sie im Texteditorfenster den Cursor zwischen den Tags <body> </body> und geben Sie dann Hello world! ein. Laden Sie das Browserfenster neu, um den Text über dem Hintergrundbild zu sehen.

Verständnis des HTML-Codes

1
Verstehen Sie HTML- und CSS-Tags. HTML-Code besteht aus offenen und geschlossenen Tags. Das <body> Tag ist das Open Body Tag, und </body> ist das Closed Body Tag. Jedes geöffnete Tag auf einer HTML-Seite muss ein Closing-Tag haben, damit die Seite korrekt angezeigt wird.

2
Verstehen Sie das DOCTYPE-Tag. Jede gut geschriebene HTML-Seite sollte mit <!DOCTYPE html> beginnen. Dies teilt einem Webbrowser mit, dass es sich bei der HTML-Datei um eine HTML-Datei handelt.

3
Nehmen Sie Änderungen an der HTML-Datei vor. Bewegen Sie im Texteditorfenster den Cursor zwischen den Tags <body> </body> und geben Sie dann Hello world! ein. . Laden Sie das Browserfenster neu, um den Text über dem Hintergrundbild zu sehen.

4
Verstehen Sie HTML- und CSS-Tags. HTML-Code besteht aus offenen und geschlossenen Tags. Das <body> Tag ist das Open Body Tag, und </body> ist das Closed Body Tag. Jedes geöffnete Tag auf einer HTML-Seite muss ein Closing-Tag haben, damit die Seite korrekt angezeigt wird.

5
Verstehen Sie das Titel-Tag. Das Tag <title> ist Text, der in der Titelleiste Ihres Browserfensters angezeigt wird, sowie der Text, der in einem Browser-Tab angezeigt wird.

6
Verstehen Sie das Style-Tag. Das Tag <style> kennzeichnet CSS-Inhalte. Alles zwischen den <style> Tags ist CSS-Code.

7
Verstehen Sie das Body-Tag. Jeder Text, der zwischen den <body>-Tags geschrieben wird, erscheint wie geschrieben, es sei denn, es handelt sich um HTML- oder CSS-Code.

8
Nehmen Sie Änderungen an der HTML-Datei vor. Bewegen Sie im Texteditorfenster den Cursor zwischen den Tags <body> </body> und geben Sie dann „Hello world!“ ein. Laden Sie das Browserfenster neu, um den Text über dem Hintergrundbild zu sehen.

Verständnis des CSS-Codes

1
Den CSS-Code verstehen. In Ihrem index.html-Code weist der CSS-Code zwischen den <style>-Tags den Webbrowser an, beim Rendern der Webseite ein Hintergrundbild mit einem bestimmten Namen zum <body>-Tag hinzuzufügen.

2
Überprüfen Sie den CSS-Code.

3
Körper {
Hintergrundbild: url(„background.png“);
}

4
Verstehen Sie die Teile des CSS-Codes. CSS-Stile bestehen aus zwei Teilen, dem Selektor und der Deklaration[4] Im Beispiel ist body der Selektor und
Hintergrund-Bild: url(„background.png“) ist die Deklaration. Ein Selektor kann ein beliebiger HTML-Tag sein. Deklarationen gehen immer zwischen geschweiften Klammern { }.

5
Verstehen Sie die CSS-Deklaration. Die CSS-Deklaration besteht aus zwei Teilen, der Eigenschaft und dem Wert. Zwischen den geschweiften Klammern,
background-image ist die Eigenschaft und url(„background.png“) ist der Wert[5] Die Eigenschaft beschreibt, was gestylt wird und der Wert beschreibt, wie die Eigenschaft gestylt wird. Die Eigenschaft und der Wert sind immer durch einen Doppelpunkt getrennt:.CSS-Deklarationen enden immer mit Semikolons ;.

Kommentare sind geschlossen.