Lektion

Webentwicklung 

Einführung in HTML

Willkommen in der Welt der Webentwicklung! Diese Lektion führt Sie in die grundlegenden Bausteine des Internets ein: HTML. HTML steht für HyperText Markup Language und ist die Standardsprache zum Erstellen von Webseiten. Stellen Sie es sich als das Skelett einer Website vor – es liefert die Struktur und den Inhalt.

Ohne HTML wüssten Webbrowser nicht, wie sie Text, Bilder oder Links anzeigen sollen. Es ist unerlässlich für jeden, der daran interessiert ist, Websites zu erstellen, von einfachen persönlichen Seiten bis hin zu komplexen Webanwendungen. Wir beginnen mit den Grundlagen und arbeiten uns bis zur Erstellung eines einfachen Webseitenlayouts vor.

HTML-Struktur: Die Grundvorlage

Jedes HTML-Dokument folgt einer Grundstruktur. Diese Struktur teilt dem Browser mit, dass er eine HTML-Datei liest, und stellt die wesentlichen Elemente für die Seite bereit. Hier ist eine minimale HTML-Vorlage:

            
<!DOCTYPE html>
<html>
<head>
    <title>Seitentitel</title>
</head>
<body>
    <!-- Seiteninhalt kommt hierher -->
</body>
</html>

Lassen Sie uns jeden Teil aufschlüsseln:

  • <!DOCTYPE html>: Diese Deklaration teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt. Sie sollte immer das Erste in Ihrer HTML-Datei sein.
  • <html>: Dies ist das Wurzelelement der Seite. Alles andere kommt in diesen Tag.
  • <head>: Dieser Abschnitt enthält Meta-Informationen über das HTML-Dokument, wie den Titel, den Zeichensatz und Links zu Stylesheets.
  • <title>: Legt einen Titel für die HTML-Seite fest (der in der Titelleiste oder dem Tab des Browsers angezeigt wird).
  • <body>: Hier kommt der gesamte Inhalt Ihrer Webseite hin – der Text, die Bilder, die Links und alles andere, was Benutzer sehen.

HTML-Tags: Elemente und Attribute

HTML verwendet Tags, um Elemente zu definieren. Die meisten Tags treten paarweise auf: ein öffnender Tag und ein schließender Tag. Zum Beispiel ist <p> der öffnende Tag für einen Absatz, und </p> ist der schließende Tag.

Einige Tags sind selbstschließend, das heißt, sie benötigen keinen separaten schließenden Tag. Ein Beispiel ist der <br>-Tag, der einen Zeilenumbruch erzeugt. Tags können auch Attribute haben, die zusätzliche Informationen über das Element liefern. Zum Beispiel verwendet der <img>-Tag (für Bilder) das src-Attribut, um die Bildquelle anzugeben.

Überschriften: <h1> bis <h6>

Überschriften werden verwendet, um Inhalte zu strukturieren und lesbarer zu machen. HTML bietet sechs Überschriftenebenen, von <h1> (die wichtigste) bis <h6> (die unwichtigste). Typischerweise wird <h1> für den Haupttitel der Seite verwendet.

Hier ist ein Beispiel:

            
<h1>Dies ist eine Überschrift der Ebene 1</h1>
<h2>Dies ist eine Überschrift der Ebene 2</h2>
<h3>Dies ist eine Überschrift der Ebene 3</h3>

Absätze: <p>

Absätze werden verwendet, um Textblöcke anzuzeigen. Der <p>-Tag definiert einen Absatz.

Beispiel:

            
<p>Dies ist ein Textabsatz. Er kann mehrere Sätze und Wörter enthalten.</p>
<p>Dies ist ein weiterer Absatz. Absätze werden automatisch durch eine Leerzeile getrennt.</p>

Listen: <ul> und <ol>

HTML bietet zwei Arten von Listen: ungeordnete Listen (<ul>) und geordnete Listen (<ol>). Ungeordnete Listen werden für Elemente verwendet, die keine bestimmte Reihenfolge haben, während geordnete Listen für Elemente verwendet werden, die in einer bestimmten Reihenfolge sein müssen. Listenelemente werden mit dem <li>-Tag definiert.

Hier sind Beispiele für beide:

            
<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ul>

<ol>
    <li>Erstes Element</li>
    <li>Zweites Element</li>
    <li>Drittes Element</li>
</ol>

Links: <a>

Links ermöglichen es Benutzern, zwischen verschiedenen Webseiten oder Abschnitten innerhalb derselben Seite zu navigieren. Der <a>-Tag definiert einen Hyperlink. Das wichtigste Attribut ist href, das die URL des Links angibt.

Beispiel:

            
<a href="https://www.example.com">Besuchen Sie Example.com</a>

Das target-Attribut kann verwendet werden, um festzulegen, wo das verlinkte Dokument geöffnet werden soll. target="_blank" öffnet den Link in einem neuen Tab oder Fenster.

Bilder: <img>

Der <img>-Tag wird verwendet, um Bilder in eine Webseite einzubetten. Das src-Attribut gibt den Pfad zur Bilddatei an. Das alt-Attribut liefert alternativen Text für das Bild, der angezeigt wird, wenn das Bild nicht geladen werden kann, und ist wichtig für die Barrierefreiheit.

Beispiel:

            
<img src="image.jpg" alt="Beschreibung des Bildes">

Erstellen eines einfachen Webseitenlayouts

Lassen Sie uns nun alles Gelernte kombinieren, um ein einfaches Webseitenlayout zu erstellen. Wir werden eine Überschrift, einen Absatz, eine Liste, einen Link und ein Bild einfügen.

Hier ist der vollständige HTML-Code:

            
<!DOCTYPE html>
<html>
<head>
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Webseite!</h1>
    <p>Dies ist eine einfache Webseite, die mit HTML-Grundlagen erstellt wurde.</p>
    <ul>
        <li>HTML lernen</li>
        <li>Programmieren üben</li>
        <li>Großartige Webseiten erstellen</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Besuchen Sie Google</a>
    <img src="placeholder.jpg" alt="Ein Platzhalterbild">
</body>
</html>

Denken Sie daran, "placeholder.jpg" durch den tatsächlichen Pfad zu einer Bilddatei zu ersetzen. Speichern Sie diesen Code als HTML-Datei (z. B. "index.html") und öffnen Sie ihn in Ihrem Webbrowser, um das Ergebnis zu sehen. Sie haben jetzt eine voll funktionsfähige HTML-Seite!



-/- ✔: 0, ✖: 0