Lektionen
Start
Jetzt lernen
CodeGym /Kurse /Python SELF DE /Einführung in HTML

Einführung in HTML

Python SELF DE
Level 29 , Lektion 0
Verfügbar

1. Tags in HTML

Was ist HTML?

HTML (HyperText Markup Language) ist eine Auszeichnungssprache, die zur Erstellung und Strukturierung von Webseiten verwendet wird. Mit HTML können wir den Inhalt der Seite organisieren, indem wir verschiedene Tags und Attribute verwenden, damit der Browser weiß, wie die Informationen angezeigt werden sollen. In dieser Vorlesung schauen wir uns die grundlegenden HTML-Konzepte an, wie Tags, Tag-Bäume, Attribute, Einzel-Tags und die Struktur eines HTML-Dokuments.

In HTML sind Tags die Schlüsselelemente, die es ermöglichen, den Inhalt zu markieren. Sie umschließen Text und andere Elemente, damit der Browser versteht, wie genau diese angezeigt werden sollen. Zum Beispiel geben die Tags <h1> und <p> dem Browser an, dass der Text darin eine Überschrift oder einen Absatz darstellt.

Tags werden in spitzen Klammern <> geschrieben. Die meisten Tags werden geöffnet und geschlossen, d.h. sie bestehen aus einem Anfangs- und einem End-Tag. Zum Beispiel:

HTML 
                      
                        <h1>Das ist eine Überschrift</h1>
                        <p>Das ist ein Textabsatz.</p>
Java university

Hier ist <h1> der Anfangs-Tag und </h1> der End-Tag.

Tag-Baum

Ein HTML-Dokument hat eine hierarchische Struktur, bei der Tags ineinander verschachtelt sind und eine baumartige Struktur bilden. Dieser „Tag-Baum“ definiert, wie die Elemente auf der Seite miteinander verbunden sind und in welcher Reihenfolge sie angezeigt werden.

Hier ist ein Beispiel für einen einfachen Tag-Baum:

Python 

<html>
<head>
  <title>Beispielseite</title>
</head>
<body>
  <h1>Seitentitel</h1>
  <p>Hier steht ein Absatztext.</p>
</body>
</html>

In diesem Beispiel ist der Tag <html> das Root-Element, in dem sich <head> und <body> befinden. Im <body> befinden sich die Tags <h1> und <p>. Solch eine Struktur ermöglicht es, den Inhalt der Seite logisch anzuordnen.

Attribute

Attribute in HTML werden verwendet, um Tags zusätzliche Informationen hinzuzufügen. Diese befinden sich im Anfangs-Tag und bestehen aus einem Namen und einem Wert. Zum Beispiel:

HTML 

<a href="https://example.com">Link zur Website</a>
<img src="image.jpg" alt="Bildbeschreibung">
  • href gibt die Adresse des Links an.
  • src – der Pfad zum Bild.
  • alt – alternativer Text, der angezeigt wird, wenn das Bild nicht geladen werden kann.

Attribute ermöglichen es, den Elementen zusätzliche Eigenschaften hinzuzufügen, wie z.B. eine ID (id), Klassen (class), Stile (style) und vieles mehr.

Einzel-Tags

Einige HTML-Tags enthalten keinen inneren Inhalt und benötigen keinen End-Tag. Solche Tags werden als Einzel-Tags bezeichnet. Zum Beispiel wird der Tag <img> verwendet, um ein Bild einzubinden, und seine Struktur sieht so aus:

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Bildbeschreibung">
HTML 
  
    <img src="image.jpg" alt="Bildbeschreibung">

Weitere Beispiele für Einzel-Tags:

  • <br> – für einen Zeilenumbruch.
  • <hr> – für das Hinzufügen einer horizontalen Linie.

2. Einführung in ein HTML-Dokument

Ein HTML-Dokument beginnt mit der Deklaration <!DOCTYPE html>, die dem Browser angibt, dass es sich um ein HTML5-Dokument handelt. Danach folgt der Root-Tag <html>, der die Tags <head> und <body> enthält. Im <head> befinden sich die Metadaten des Dokuments (Titel, Stile, Skripte), und im <body> der Hauptinhalt der Seite.

Beispiel für ein HTML-Dokument

Python 
      
        <!DOCTYPE html>
        <html lang="de">
        <head>
          <meta charset="UTF-8">
          <title>Meine erste Seite</title>
        </head>
        <body>
          <h1>Willkommen!</h1>
          <p>Das ist ein Beispiel für ein HTML-Dokument.</p>
          <a href="https://example.com">Besuchen Sie unsere Website</a>
        </body>
        </html>
  • <!DOCTYPE html> teilt dem Browser mit, dass das Dokument in HTML5 geschrieben ist.
  • <html lang="de"> gibt die Sprache des Dokuments an.
  • <meta charset="UTF-8"> legt die Kodierung fest, um Zeichen korrekt anzuzeigen.
  • <title> legt den Seitentitel fest, der in der Browser-Tab-Leiste angezeigt wird.

Zusätzliche Tags im <head>

Der Tag <head> enthält Informationen, die nicht direkt auf der Seite angezeigt werden, aber für die Funktionalität der Website wichtig sind. Im <head> können folgende Tags hinzugefügt werden:

  • <meta name="description" content="Seitenbeschreibung"> – eine kurze Beschreibung der Seite für Suchmaschinen.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> – ermöglicht, die Seite für mobile Geräte anzupassen.
  • <link rel="stylesheet" href="styles.css"> – Einbindung einer CSS-Datei mit den Stilen.
  • <script src="script.js"></script> – Einbindung einer externen JavaScript-Datei.

Diese Tags tragen dazu bei, die Nutzererfahrung zu verbessern, die Seite für Suchmaschinen zu optimieren und die notwendigen Ressourcen einzubinden.

Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION