Erstellen Sie Ihre erste HTML-Seite mit Bildern

Einführung

In diesem Lab lernen Sie, wie Sie Ihre erste HTML-Webseite mit einem Bild erstellen, indem Sie einem Schritt-für-Schritt-Prozess folgen. Das Lab führt Sie durch die Einrichtung eines strukturierten Projektverzeichnisses, das Herunterladen einer Bildressource, das Erstellen eines grundlegenden HTML-Dokuments und das Einfügen eines Bildes in die Webseite. Sie gewinnen praktische Erfahrungen bei der Organisation von Webentwicklung-Dateien, der Verwendung von HTML-Bildtags und dem Verständnis, wie Bilder auf Webseiten angezeigt werden.

Am Ende dieses Labs haben Sie eine einfache, aber funktionierende HTML-Seite erstellt, die grundlegende Webentwicklungskompetenzen zeigt, einschließlich Projektstrukturverwaltung, Bildverarbeitung und Erstellung von grundlegenden HTML-Dokumenten. Dieser praktische Ansatz bietet eine solide Grundlage für Anfänger, die ihre Webentwicklungskarriere beginnen möchten.

Projektstruktur einrichten

In diesem Schritt richten Sie die Projektstruktur für die Erstellung Ihrer ersten HTML-Seite mit einem Bild ein. Eine gut organisierte Projektstruktur ist unerlässlich, um Ihre Webentwicklung-Dateien übersichtlich und leicht zu verwalten zu halten.

Die Projektstruktur wurde bereits für Sie durch die VM-Einrichtung eingerichtet. Prüfen Sie das Verzeichnis my-first-webpage:

ls my-first-webpage

Diese Struktur hilft Ihnen, verschiedene Dateitypen zu trennen:

images/ wird Ihre Bildressourcen speichern
css/ kann für Styling-Dateien verwendet werden (obwohl wir es in diesem Lab nicht nutzen werden)

Lassen Sie uns die Verzeichnisstruktur überprüfen:

tree

Beispielausgabe:

.
├── css
└── images

Toll! Sie haben jetzt eine saubere und organisierte Projektstruktur eingerichtet, die es Ihnen erleichtert, Ihre Webentwicklung-Dateien zu verwalten.

Bildressource herunterladen und organisieren

In diesem Schritt laden Sie ein Bild herunter, das Sie auf Ihrer ersten HTML-Webseite verwenden können. Wir werden ein einfaches, frei zugängliches Bild aus dem Internet nutzen und es im images-Verzeichnis speichern, das Sie zuvor erstellt haben.

Zunächst navigieren Sie in Ihr Projektverzeichnis:

cd ~/project/my-first-webpage

Lassen Sie uns überprüfen, ob das Bild korrekt heruntergeladen wurde:

ls images

Beispielausgabe:

landscape.jpg

Wenn Sie die Bilddatei nicht sehen, müssen Sie möglicherweise das folgende Kommando ausführen, um es herunterzuladen. Überspringen Sie diesen Schritt, wenn Sie die Bilddatei im images-Verzeichnis sehen.

wget -O images/landscape.jpg "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"

Prüfen Sie die Details der Bilddatei:

file images/landscape.jpg

Beispielausgabe:

images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3

Das Bild ist jetzt bereit, auf Ihrer HTML-Seite verwendet zu werden. Wir haben ein Landschaftsbild heruntergeladen, das sich gut zur Demonstration des Einfügens von Bildern in HTML eignet.

Grundlegendes HTML-Dokument erstellen

In diesem Schritt erstellen Sie ein grundlegendes HTML-Dokument, das als Grundlage für Ihre erste Webseite dienen wird. HTML (HyperText Markup Language) ist die Standard-Markup-Sprache für die Erstellung von Webseiten.

Navigieren Sie in Ihr Projektverzeichnis:

cd ~/project/my-first-webpage

Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens index.html:

touch index.html

Jetzt fügen wir die grundlegende HTML-Struktur hinzu. Öffnen Sie die Datei index.html in der WebIDE und geben Sie den folgenden Code ein:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>
  </body>
</html>

Lassen Sie uns die wichtigsten Bestandteile dieses HTML-Dokuments analysieren:

<!DOCTYPE html> gibt an, dass es sich um ein HTML5-Dokument handelt
<html> ist das Wurzelelement der HTML-Seite
<head> enthält Meta-Informationen über das Dokument
<body> enthält den sichtbaren Seiteninhalt
<h1> ist eine Hauptüberschrift
<p> ist ein Absatz

Bild in die HTML-Seite einfügen

In diesem Schritt lernen Sie, wie Sie das Landschaftsbild, das Sie heruntergeladen haben, in Ihre HTML-Seite einfügen. Das <img>-Tag wird verwendet, um Bilder in HTML einzubetten.

Öffnen Sie die Datei index.html in der WebIDE und ändern Sie den Inhalt, um das Bild einzuschließen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>

    <h2>Beautiful Landscape</h2>
    <img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
  </body>
</html>

Lassen Sie uns die Attribute des Bildtags analysieren:

src: Gibt den Pfad zur Bilddatei an
alt: Liefert alternativen Text für die Barrierefreiheit
width: Legt die Anzeigebreite des Bildes fest (in Pixeln)

Vorschau und Verständnis der Bildanzeige

In diesem Schritt lernen Sie, wie Sie Ihre HTML-Seite im Vorschau-Modus anzeigen und wie Bilder in Webbrowsern angezeigt werden. Da die LabEx-Umgebung eine WebIDE mit integrierter Vorschaufunktion bietet, können Sie Ihre Webseite sofort sehen.

Um Ihre Webseite im Vorschau-Modus anzuzeigen, suchen Sie nach der Schaltfläche "Go Live" in der WebIDE.

Klicken Sie auf den Ordner my-first-webpage auf der Seite, dann wird automatisch die Datei index.html im Vorschau-Modus geöffnet.

WebIDE-Vorschau der HTML-Seite

Dadurch wird eine Liveansicht Ihrer index.html-Datei geöffnet, die das von Ihnen hinzugefügte Landschaftsbild anzeigt.

Live-Vorschau der HTML-Seite

Lassen Sie uns einige Schlüsselkonzepte zur Bildanzeige in HTML untersuchen:

Bildpfad

Das src-Attribut gibt den relativen Pfad zu Ihrem Bild an:

<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />

Relative Pfade basieren auf der Speicherort der HTML-Datei
Verwenden Sie immer Schrägstriche (/) in Web-Dateipfaden

Bildattribute

width: Steuert die Anzeigegröße des Bildes (in Pixeln)
alt: Liefert eine Textdbeschreibung für die Barrierefreiheit
Sie können auch height verwenden, um die Bildabmessungen festzulegen

Responsive Bilder

Um Bilder responsiv zu gestalten, können Sie CSS verwenden oder die HTML-Attribute anpassen:

<img
  src="images/landscape.jpg"
  alt="Scenic Landscape"
  style="max-width: 100%; height: auto;"
/>

Das style-Attribut wird verwendet, um die Anzeigegröße des Bildes festzulegen. Dies ist eine CSS-Eigenschaft, mit der Sie die Breite und Höhe des Bildes steuern können.

max-width: 100%; stellt sicher, dass das Bild die Breite des Containers nicht überschreitet
height: auto; erhält das Seitenverhältnis des Bildes

Machen Sie sich für jetzt keine Sorgen um CSS, wir werden es in späteren Labs behandeln.

Überprüfen Sie, ob Ihr Bild in der WebIDE-Vorschau korrekt angezeigt wird. Sie sollten sehen:

Das Landschaftsbild
Eine Breite von 500 Pixeln
Eindeutigen, lesbaren alternativen Text

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie sie ihre erste HTML-Webseite erstellen, indem sie eine strukturierte Projektumgebung einrichten und mit Bildern arbeiten. Der Prozess begann mit der Einrichtung einer sauberen Verzeichnisstruktur mithilfe von Terminalbefehlen und der Erstellung eigener Ordner für Bilder und CSS, was bei der Organisation von Webentwicklung-Dateien hilft.

Das Lab führte die Lernenden durch das Herunterladen eines Beispiel-Landschaftsbildes von Unsplash mit wget und demonstrierte praktische Fähigkeiten in der Dateiverwaltung und Ressourcenbeschaffung. Indem die Teilnehmer die Projektdateien systematisch organisierten und eine Bildressource abgerufen haben, haben sie Grundkenntnisse in der Vorbereitung von Webentwicklungsprojekten und der Verwaltung von Bild-Assets für HTML-Seiten erworben.