Entfesseln Sie die Freude am Tierhalten: Entdecken Sie Pet's House

Einführung

Wir beginnen eine Reise, um einen willkommenen Online-Raum für Tierliebhaber zu schaffen. Unsere Szene, Pet Paradise, features einen Charakter, Alex der Erfinder, der träumt, Tierbesitzer über eine lebendige und informierende Website zu verbinden. Alex' Ziel ist es, Tierdienste zu präsentieren, Geschichten zu teilen und eine Gemeinschaft aufzubauen. Diese Szene ist so gestaltet, dass sie die Studierenden durch den Prozess führt, Alex' Vision in eine digitale Realität umzusetzen.

Wir werden beginnen, indem wir die Grundlagen von HTML mit einem kleinen Projekt behandeln, wobei wir 3 Labs betonen, die Sie durch den Prozess des Erstellens einer einfachen Webseite führen.

header animation example

In diesem Lab werden Sie den Header-Bereich und das Layout der Startseite für "Pet's House" erstellen. Dieser Bereich ist entscheidend für einen starken ersten Eindruck. Der Header wird das Navigationsmenü enthalten, und das Startlayout wird die Besucher mit der Website vertraut machen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Fortgeschrittener mit einer Abschlussquote von 66% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

HTML-Dokumentstruktur

Wenn Benutzer über das Internet die Webseite durchsuchen, begegnen ihnen verschiedene Formen von Inhalten, darunter Text, Links, Diagramme, Bilder und mehr.

Haben Sie sich jemals gefragt, wie ein Browser diesen Seiteninhalt anzeigt? Wir können F12 drücken, um den Quellcode der Seite anzuzeigen, wie in der folgenden Abbildung gezeigt.

Aus der obigen Abbildung können wir sehen, dass all der Zeicheninhalt in spitzen Klammern < und > eingeschlossen ist. Solcher Inhalt wird als Tag bezeichnet, wobei <> das Öffnungstag und </> das Schließungstag darstellt.

HTML ist eine Sprache, die aus Elementen besteht, die durch Tags dargestellt werden.

HTML (HyperText Markup Language) ist der Code, der verwendet wird, um eine Webseite und ihren Inhalt zu strukturieren.

Hyper: "Hyper" steht im Gegensatz zu "Linear". Frühere Computerprogramme waren größtenteils linear, was bedeutet, dass sie von oben nach unten in der Reihenfolge ausgeführt werden mussten. Mit HTML erstellte Webseiten ermöglichen jedoch die Navigation über Hyperlinks von einer Seite zur anderen.
Text: Im Gegensatz zu kompilierten Programmiersprachen wie C, C++ oder Java ist HTML eine textbasierte Skriptsprache. Ihr Quellcode wird direkt im Browser interpretiert und ausgeführt, ohne die Notwendigkeit einer Kompilierung.
Markup: Das Grundprinzip von HTML besteht darin, Markup (Tags, die aus paarigen spitzen Klammern bestehen) zu verwenden, um zu beschreiben, wie der Inhalt einer Webseite im Browser angezeigt werden soll.
Sprache: HTML ist eine Sprache, aber sie wird interpretiert, nicht kompiliert. Alle seine Markuptags werden vom Browser in das endgültig angezeigte Ergebnis übersetzt.

In diesem Schritt beginnen Sie mit der Einrichtung der Grundstruktur Ihrer Webseite. Erstellen Sie eine neue HTML-Datei namens index.html im Verzeichnis /home/labex/project mit dem Befehl touch ~/project/index.html. Öffnen Sie diese Datei mit Ihrem bevorzugten Texteditor und fügen Sie die grundlegende HTML-Dokumentstruktur hinzu:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!-- Wir werden hier im nächsten Schritt Inhalte hinzufügen -->
  </body>
</html>

Die Deklaration <!DOCTYPE html> sagt dem Browser, welchen Dokumenttyp er zu erwarten hat.
Das Element <html lang="en"> ist das Wurzelelement des HTML-Dokuments.
Das <head>-Element enthält Metadaten (Daten über das Dokument), wie den Titel und die Zeichensatzkodierung.
Das <title>-Element gibt den Titel der Webseite an.
Das <meta charset="UTF-8">-Element gibt die Zeichensatzkodierung für die Webseite an.
Das <body>-Element enthält den sichtbaren Inhalt der Webseite.

Klicken Sie in der unteren rechten Ecke der Umgebung auf Go Live, um Port 8080 zu öffnen, und klicken Sie in der oberen linken Ecke der Umgebung auf Web 8080, um die Seitenergebnisse anzuzeigen.

Webpage preview in browser

Hinweis: Die aktuelle Seite hat keinen Effekt, da der Körper derzeit leer ist. Wir können den Effekt der Seite sehen, wenn wir mehr Tags kennenlernen.

Semantische Elemente

Eine Webseitenlayout besteht normalerweise aus mehreren Schlüsselteilen, von denen jeder einen bestimmten Zweck erfüllt, um sicherzustellen, dass die Benutzeroberfläche sowohl sauber als auch funktional ist:

Header: Dies ist der obere Bereich der Webseite und enthält normalerweise das Logo der Website, das Navigationsmenü, die Anmelde-/Registrierungs-Links usw. Der Header ist einer der ersten Dinge, auf das ein Benutzer aufmerksam wird, daher ist er normalerweise so gestaltet, dass er auffällt und eine einfache Navigationsmöglichkeit bietet.
Navigationsleiste: Obwohl die Navigationsleiste Teil des Headers sein kann, kann sie in einigen Designs auch ein separates Abschnitt sein, der sich oben, seitlich oder unten auf der Seite befindet. Die Navigationsleiste bietet einen schnellen Zugang zu internen Links innerhalb der Website und hilft Benutzern, den Inhalt, an den sie interessiert sind, leicht zu finden.
Hauptinhalt: Dies ist der Kernteil der Webseite und enthält die primären Informationen oder Inhalte, die der Benutzer besucht hat, um ihn zu sehen. Der Hauptinhalt kann weiter in mehrere Abschnitte unterteilt werden, wie Artikel, Blogbeiträge, Produktanzeigen usw., je nachdem, um welchen Zweck und Layout es sich bei der Website handelt.
Seitenspalte: Die Seitenspalte befindet sich normalerweise neben dem Hauptinhalt (entweder links oder rechts) und bietet zusätzliche Informationen oder Funktionen, wie verwandte Links, Anzeigen, Suchfelder, Soziale-Media-Links usw.
Fußzeile: Die Fußzeile befindet sich am unteren Rand der Webseite und enthält normalerweise Urheberrechtshinweise, Kontaktinformationen, Links zu Sitemaps, Datenschutzbestimmungen, Soziale-Media-Icons usw. Die Fußzeile ist der letzte Teil, den Benutzer sehen, wenn sie nach unten scrollen, und bietet grundlegende Informationen über die Website und zusätzliche Navigationsoptionen.

Fügen Sie semantische Elemente (header, main, footer) hinzu, um den Inhalt logisch zu organisieren.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header></header>
    <!--Main Content-->
    <main></main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

 ist ein Kommentar in HTML, der verwendet wird, um Notizen oder Beschreibungen zum Code hinzuzufügen. Er hat keine Auswirkungen auf die Funktionalität des Codes und wird vom Browser ignoriert.
Das HTML-Element <header> repräsentiert ein einleitendes Inhaltsstück, normalerweise eine Gruppe von einleitenden oder navigationsbezogenen Hilfsmitteln.
Das HTML-Element <main> repräsentiert den dominanten Inhalt des <body> eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die direkt mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung in Verbindung stehen oder diesen erweitern.
Das HTML-Element <footer> repräsentiert einen Fußzeile für seinen nächsten Vorfahren, der einen Abschnittsinhalt oder das Wurzelelement eines Abschnitts definiert. Eine Fußzeile enthält normalerweise Informationen über den Autor des Abschnitts, Urheberrechtshinweise oder Links zu verwandten Dokumenten.

Header-Abschnitt

Der Startbereich sollte die folgenden Komponenten enthalten:

Home section components layout

Als nächstes müssen wir das Layout des Header-Bereichs implementieren, der das Logo-Bild und die Navigation enthält.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main></main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

Teilen Sie das Logo und die Navigation in zwei Bereiche mit den <div>- und <nav>-Tags auf.
Das HTML-Element <img> integriert ein Bild in das Dokument.
Das src-Attribut im <img>-Tag wird verwendet, um den Pfad zum Bild anzugeben.
Das alt-Attribut im <img>-Tag wird verwendet, um das Bild zu beschreiben, und wenn das Bild auf der Seite nicht richtig angezeigt werden kann, wird der Inhalt von alt angezeigt.
class im Tag ist ein globales Attribut, und der Inhalt nach dem Gleichheitszeichen ist dem Namen gleich, den man dem Element gibt, und wird von CSS verwendet, um ein bestimmtes Element zu identifizieren und den Stil für das angegebene Element festzulegen.
Das HTML-Element <ul> repräsentiert eine ungeordnete Liste von Elementen, die normalerweise als Aufzählungsliste gerendert wird.
Das HTML-Element <li> repräsentiert ein Element in einer Liste.
Das HTML-Element <a> wird verwendet, um einen Hyperlink zu definieren und einen Link zwischen verschiedenen Seiten zu erstellen.

Hinweis: HTML wird verwendet, um Inhalte auf einer Webseite zu platzieren, während CSS für das Erstellen eines visuell ansprechenden Layouts unerlässlich ist. In diesem Experiment konzentrieren wir uns auf das Lernen von HTML-Inhalten. Um ein besseres Seitenlayout zu erreichen, stelle ich Ihnen auch die vollständige style.css-Datei zur Verfügung.

Layout des Startabschnitts

Als nächstes vervollständigen Sie das Layout des Startbereichs, das aus drei Teilen besteht: Titel, Text und Bild.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main>
      <div class="container">
        <section id="home" class="cover-sect">
          <div class="title-text">
            <h1>Welcome</h1>
            <p>~ This website offers personalised services for pets. ~</p>
          </div>
          <div class="box-feature">
            <img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

Das HTML-Element <section> repräsentiert einen generischen, eigenständigen Abschnitt eines Dokuments.
Das HTML-Element <h1> repräsentiert einen Überschrift für den Inhalt in einem <section>-Element.
Das HTML-Element <p> repräsentiert einen Absatz.

Zusammenfassung

In diesem Lab haben Sie gelernt, den Header und das Layout der Startseite zu strukturieren und zu gestalten, wobei Sie sich auf die Schaffung einer willkommen heißen und navigierbaren Schnittstelle für "Pet's House" konzentriert haben. In diesem Lab wurde die Wichtigkeit von ersten Eindrücken betont und die Grundlage für eine benutzerfreundliche Website gelegt.

Header und Startseite Layout