Persönliche Webseite mit HTML: Erstellen Sie eine Webseite

Einführung

Willkommen zum HTML Personal Webpage Project! In diesem Lab bauen Sie von Grund auf eine vollständige Single-Page-Website mit den grundlegenden Bausteinen des Webs: HTML. Dieses praktische Projekt richtet sich an Anfänger und führt Sie durch die wesentlichen Tags und Konzepte, die Sie benötigen, um eine strukturierte und inhaltsreiche Webseite zu erstellen.

Sie lernen, wie Sie:

Die grundlegende Struktur eines HTML-Dokuments definieren.
Überschriften und Absätze zur Textformatierung verwenden.
Informationen mit Listen organisieren.
Bilder einbetten und Hyperlinks erstellen.
Daten mit Tabellen strukturieren und ein einfaches Kontaktformular erstellen.

Ein Webserver und grundlegendes Styling (CSS) wurden für Sie vorkonfiguriert. Ihr Hauptaugenmerk liegt auf dem Schreiben von sauberem, semantischem HTML. Sie können Ihre Arbeit in Echtzeit in der Web 8080-Registerkarte in der Lab-Umgebung in der Vorschau anzeigen. Lassen Sie uns beginnen!

Dokumentstruktur mit Head und Body einrichten

In diesem Schritt richten Sie die grundlegende Struktur Ihres HTML-Dokuments ein. Jede HTML-Seite hat eine Standard-Boilerplate-Struktur, die die Tags <!DOCTYPE>, <html>, <head> und <body> enthält.

<!DOCTYPE html>: Diese Deklaration definiert den Dokumenttyp als HTML5.
<html>: Dies ist das Wurzelelement einer HTML-Seite.
<head>: Dieses Element enthält Metainformationen über das Dokument, wie z. B. seinen Titel und Links zu Stylesheets. Der Inhalt innerhalb von <head> wird nicht auf der Seite selbst angezeigt.
<title>: Dies legt den Titel des Browser-Tabs fest.
<body>: Dieses Element enthält den sichtbaren Seiteninhalt, der im Browser angezeigt wird.

Öffnen Sie zuerst die Datei index.html im Verzeichnis ~/project über den Dateiexplorer auf der linken Seite. Die Datei ist derzeit leer. Kopieren Sie den folgenden Code und fügen Sie ihn in index.html ein:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- Content will go here in the next steps -->
    </div>
  </body>
</html>

Nachdem Sie den Code eingefügt haben, speichern Sie die Datei (Strg+S oder Cmd+S). Klicken Sie nun auf die Registerkarte Web 8080 oben in der Lab-Oberfläche. Sie sollten eine leere Seite sehen, aber beachten Sie, dass der Titel des Browser-Tabs nun "My Personal Webpage" lautet.

Formatierten Text mit Überschriften und Absätzen hinzufügen

In diesem Schritt fügen Sie die ersten sichtbaren Inhalte zu Ihrer Webseite hinzu, indem Sie Überschriften und Absätze verwenden. Dies sind grundlegende Tags zur Strukturierung von Text.

<h1>: Dies ist ein Überschriften-Tag der obersten Ebene, der typischerweise für den Haupttitel einer Seite verwendet wird. Suchmaschinen nutzen Überschriften, um die Struktur und den Inhalt Ihrer Webseiten zu indizieren.
<p>: Dies ist der Absatz-Tag, der für Textblöcke verwendet wird.

Fügen wir Ihren Namen als Hauptüberschrift und eine kurze Biografie hinzu. Suchen Sie in Ihrer index.html-Datei den Kommentar  innerhalb des <div class="container"> und ersetzen Sie ihn durch den folgenden Code:

<h1>John Doe</h1>
<p>
  Welcome to my personal webpage! I am a passionate web developer learning the
  fundamentals of HTML. I enjoy creating clean and efficient code to build
  beautiful and functional websites.
</p>

Ihre vollständige index.html-Datei sollte nun wie folgt aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>John Doe</h1>
      <p>
        Welcome to my personal webpage! I am a passionate web developer learning
        the fundamentals of HTML. I enjoy creating clean and efficient code to
        build beautiful and functional websites.
      </p>
    </div>
  </body>
</html>

Speichern Sie die Datei und aktualisieren Sie die Registerkarte Web 8080. Sie sehen nun Ihren Namen und Ihre Biografie auf der Seite angezeigt.

Listen für Fähigkeiten oder Interessen einfügen

In diesem Schritt verwenden Sie Listen, um Informationen wie Ihre Fähigkeiten oder Interessen zu organisieren. HTML bietet zwei Haupttypen von Listen: ungeordnete Listen (<ul>) für Elemente ohne spezifische Reihenfolge und geordnete Listen (<ol>) für nummerierte Elemente. Jedes Element in einer Liste wird mit einem <li> (list item) Tag definiert.

Fügen wir einen Abschnitt für Ihre Fähigkeiten mit einer ungeordneten Liste hinzu. Fügen Sie den folgenden Code unter dem Absatz-Tag (<p>) ein, den Sie im vorherigen Schritt hinzugefügt haben.

<h2>My Skills</h2>
<ul>
  <li>HTML & CSS</li>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Problem Solving</li>
</ul>

Dieser Code fügt eine Überschrift der zweiten Ebene (<h2>) hinzu, um den Abschnitt zu betiteln, und eine ungeordnete Liste (<ul>) mit vier Listenelementen (<li>).

Nachdem Sie den Code hinzugefügt haben, sollte der <body> Ihrer index.html-Datei wie folgt aussehen:

<body>
  <div class="container">
    <h1>John Doe</h1>
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>
  </div>
</body>

Speichern Sie die Datei und überprüfen Sie die Registerkarte Web 8080, um Ihren neuen Abschnitt mit den Fähigkeiten und einer Aufzählung zu sehen.

Links und Bilder mit Attributen hinzufügen

In diesem Schritt machen Sie Ihre Seite dynamischer, indem Sie ein Bild und einen Hyperlink hinzufügen.

<img>: Das Bild-Tag wird verwendet, um ein Bild einzubetten. Es ist ein selbstschließendes Tag und benötigt zwei wesentliche Attribute:
- src: Gibt den Pfad zur Bilddatei an.
- alt: Bietet alternativen Text für das Bild, was für die Barrierefreiheit und für den Fall, dass das Bild nicht angezeigt werden kann, wichtig ist.
<a>: Das Anker-Tag wird verwendet, um Hyperlinks zu erstellen. Das href-Attribut gibt die URL an, zu der der Link führt.

Fügen wir zunächst ein Profilbild hinzu. Das Setup-Skript hat bereits ein Platzhalterbild unter images/profile.png platziert. Fügen Sie das <img>-Tag direkt unter dem <h1>-Tag ein.

Fügen wir als Nächstes einen Link zu einer externen Seite, wie z. B. einem GitHub-Profil, hinzu. Wir platzieren diesen in einem neuen Abschnitt "Find Me Online". Fügen Sie den folgenden Code unter Ihrer Fähigkeitenliste ein:

<!-- Add this img tag below the h1 tag -->
<img src="images/profile.png" alt="A placeholder profile picture" />

<!-- Add this new section below the skills list -->
<h2>Find Me Online</h2>
<p>
  You can find my work on
  <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
</p>

Das Attribut target="_blank" im Link weist den Browser an, den Link in einem neuen Tab zu öffnen.

Der <body> Ihrer index.html-Datei sollte nun wie folgt strukturiert sein:

<body>
  <div class="container">
    <h1>John Doe</h1>
    <img src="images/profile.png" alt="A placeholder profile picture" />
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>

    <h2>Find Me Online</h2>
    <p>
      You can find my work on
      <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
    </p>
  </div>
</body>

Speichern Sie die Datei und aktualisieren Sie die Registerkarte Web 8080. Sie sehen das Profilbild und einen klickbaren Link.

Tabelle für Zeitplan und Formular für Kontakt erstellen

In diesem letzten Inhaltsschritt fügen Sie zwei weitere komplexe Strukturen hinzu: eine Tabelle zur Anzeige eines Zeitplans und ein Formular, das es Besuchern ermöglicht, Sie zu kontaktieren.

<table>: Definiert eine Tabelle.
- <tr>: Definiert eine Zeile in der Tabelle.
- <th>: Definiert eine Kopfzelle (standardmäßig fett und zentriert).
- <td>: Definiert eine Datenzelle.
<form>: Definiert ein HTML-Formular für die Eingabe durch den Benutzer.
- <label>: Definiert eine Beschriftung für ein <input>-Element.
- <input>: Definiert ein Eingabefeld. Das type-Attribut kann text, email, password usw. sein.
- <textarea>: Definiert einen mehrzeiligen Texteingabebereich.
- <button>: Definiert eine klickbare Schaltfläche.

Fügen Sie zunächst eine Tabelle für einen Wochenplan hinzu. Fügen Sie diesen Code unter dem Abschnitt "Find Me Online" ein:

<h2>My Schedule</h2>
<table>
  <tr>
    <th>Day</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Web Development Practice</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>Project Building</td>
  </tr>
  <tr>
    <td>Friday</td>
    <td>Review and Refactor</td>
  </tr>
</table>

Fügen Sie als Nächstes ein Kontaktformular hinzu. Fügen Sie diesen Code unter der gerade erstellten Tabelle ein:

<h2>Contact Me</h2>
<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Send Message</button>
</form>

Speichern Sie die Datei und rufen Sie die Registerkarte Web 8080 auf. Ihre persönliche Webseite ist nun mit einem Zeitplan und einem Kontaktformular vollständig!

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich eine vollständige persönliche Webseite mit HTML erstellt.

In diesem Lab haben Sie die grundlegendsten HTML-Elemente verwendet, um ein Dokument zu strukturieren und Inhalte darzustellen. Sie haben gelernt, wie Sie:

Das grundlegende Gerüst einer HTML-Seite mit <html>, <head> und <body> erstellen.
Text mit Überschriften (<h1>, <h2>) und Absätzen (<p>) formatieren.
Elemente in einer unsortierten Liste (<ul>, <li>) organisieren.
Ein Bild (<img>) einbetten und einen Hyperlink (<a>) erstellen.
Daten in einer <table> strukturieren und Benutzereingaben mit einem <form> sammeln.

Sie haben nun eine solide Grundlage in HTML. Experimentieren Sie gerne weiter, indem Sie Inhalte ändern, weitere Seiten hinzufügen oder fortgeschrittenere HTML-Tags erkunden. Machen Sie weiter so auf Ihrer Reise zur Webentwicklung!