HTML lernen leicht gemacht: Einführung in HTML

In diesem Blogartikel gibt es eine Einführung in HTML.

HTML steht für HyperText Markup Language. Es ist die grundlegende Sprache, die zum Erstellen von Webseiten verwendet wird.

Grundlage des Webs

HTML ist die Sprache, die das Grundgerüst jeder Webseite bildet. Jede Webseite, die Sie im Internet sehen, wird mit HTML erstellt.

HTML-Datei in Visual Studio Code erstellen

Starten Sie Visual Studio Code, indem Sie das Programm aus deinem Startmenü oder der Taskleiste öffnen.

Neues Projekt oder Ordner erstellen

Falls Sie ein neues Projekt beginnen möchten, können entweder ein neues Verzeichnis erstellen oder ein bestehendes Projekt öffnen. Gehen Sie dazu zu Datei > Ordner öffnen… und wähle Sie den Ordner aus, in dem Sie arbeiten möchtest.

Neue HTML-Datei erstellen

Klicken Sie im Datei-Explorer von Visual Studio Code mit der rechten Maustaste (oder drücken von Strg + N), um ein neues Dokument zu erstellen.
Geben Sie einen Dateinamen ein, der mit der Erweiterung .html endet. Zum Beispiel: index.html.

Aufbau des Dateinamens einer HTML-Datei

  • Name der Datei:
    • Dies ist der eigentliche Name Ihrer Datei. Der Name kann nahezu beliebig gewählt werden, sollte aber aussagekräftig und leicht verständlich sein. Zum Beispiel: index, about, contact, etc.
    • Vermeiden Sie Leerzeichen und Sonderzeichen im Dateinamen. Stattdessen können Sie Bindestriche oder Unterstriche verwenden, z.B. meine-seite oder meine_seite.
  • Erweiterung .html:
    • Die Erweiterung .html zeigt an, dass es sich um eine HTML-Datei handelt. Diese Erweiterung ist notwendig, damit der Browser und andere Programme erkennen, dass es sich um eine Webseite handelt, die im HTML-Format geschrieben ist.

Beispiele:

    • index.html: Hier ist index der Dateiname und .html die Erweiterung. Dies ist eine typische Bezeichnung für die Startseite einer Webseite.
    • about.html: Hier ist about der Dateiname und .html die Erweiterung. Dies könnte eine Seite sein, die Informationen über Sie oder Ihr Unternehmen enthält.
    • contact.html: Hier ist contact der Dateiname und .html die Erweiterung. Dies könnte eine Seite sein, die Kontaktdaten oder ein Kontaktformular enthält.

Markup Language

Eine Markup-Sprache verwendet spezielle Codes, sogenannte „Tags“, um den Inhalt einer Webseite zu strukturieren und zu formatieren. Diese Tags geben an, wie Text, Bilder, Links und andere Elemente auf der Seite angezeigt werden sollen.

Tags und Elemente

HTML verwendet Tags, die in spitzen Klammern (< >) stehen. Ein einfaches Beispiel ist das <p>-Tag, das für einen Absatz steht. Der Text, der innerhalb dieser Tags steht, wird als Absatz formatiert.

Beispiel:

<p>Das ist ein Absatz.</p>

Tags, die geschlossen werden müssen

Diese Tags haben ein Anfangs- und ein End-Tag. Der Inhalt, den sie umschließen, steht zwischen diesen beiden Tags. Das End-Tag hat einen Schrägstrich (/) vor dem Tag-Namen.

Beispiele:

<p>Das ist ein Absatz.</p>

<h1>Willkommen auf meiner Webseite!</h1>

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

Tags, die nicht geschlossen werden müssen

Diese Tags stehen alleine und haben keinen Inhalt, der zwischen einem Anfangs- und einem End-Tag steht. Sie sind sogenannte selbstschließende Tags.

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

Zusammengefasst: Tags, die geschlossen werden müssen, umschließen Inhalte und haben sowohl ein Anfangs- als auch ein End-Tag. Selbstschließende Tags benötigen kein End-Tag, da sie keinen Inhalt umschließen.

Aufbau und Struktur einer HTML-Datei

Eine HTML-Datei ist die Grundlage jeder Webseite. Sie besteht aus einer Reihe von speziellen Markierungen, sogenannten „Tags“, die dem Browser sagen, wie der Inhalt angezeigt werden soll. Hier ist eine einfache Erklärung der grundlegenden Struktur:

Dokumenttypdeklaration (`<!DOCTYPE html>`)

– Das erste Element in einer HTML-Datei. Es sagt dem Browser, dass es sich um eine HTML5-Datei handelt.

Beispiel:

<!DOCTYPE html>

HTML-Tag (`<html>…</html>`)

Umschließt den gesamten HTML-Code und zeigt den Anfang und das Ende des HTML-Dokuments an.

Beispiel:

<html>...</html>

Kopfbereich (`<head>…</head>`)

Enthält Meta-Informationen über die Webseite, die für den Browser und Suchmaschinen wichtig sind, aber nicht direkt auf der Seite angezeigt werden.

Wichtige Elemente im Kopfbereich:

  • <title>…</title>: Definiert den Titel der Webseite, der in der Titelleiste des Browsers angezeigt wird. Ein eindeutiger und aussagekräftiger Titel der Webseite, ist für die Barrierefreiheit einer Webseite wichtig!
  • <meta charset=“UTF-8″>: Gibt die Zeichencodierung der Webseite an.
  • <link rel=“stylesheet“ href=“styles.css“>: Verknüpft eine externe CSS-Datei zur Gestaltung der Webseite.

Zeichencodierung der Webseite

Folgende Angabe ist die Zeichencodierung der Webseite:

<meta charset="UTF-8">
  • Die Zeichencodierung legt fest, wie Zeichen wie Buchstaben, Zahlen und Sonderzeichen auf Ihrer Webseite dargestellt werden.
  • UTF-8 ist eine der beliebtesten Zeichencodierungen und unterstützt nahezu alle Schriftzeichen aus allen Sprachen der Welt.

Warum ist die Zeichencodierung wichtig?

  • Stellt sicher, dass Texte richtig dargestellt werden: Ohne eine richtige Zeichencodierung könnten einige Zeichen falsch angezeigt werden, insbesondere Sonderzeichen und Zeichen aus verschiedenen Sprachen.
  • Vermeidet Darstellungsprobleme: Wenn die Zeichencodierung nicht korrekt angegeben wird, können Fragezeichen oder seltsame Symbole anstelle der richtigen Zeichen erscheinen.
  • Ermöglicht die Verwendung internationaler Zeichen: Mit UTF-8 können Sie Zeichen aus fast allen Sprachen der Welt problemlos auf Ihrer Webseite verwenden.

Beispiel:

<head>
<title>Meine erste Webseite</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>

Körperbereich (`<body>…</body>`)

Enthält den gesamten sichtbaren Inhalt der Webseite, wie Text, Bilder, Links und mehr.

Beispiel:

<body>
<h1>Willkommen auf meiner Webseite!</h1>
<p>Das ist mein erster Absatz.</p>
</body>

Gesamtes Beispiel einer einfachen HTML-Datei

Hier ist ein vollständiges Beispiel einer einfachen HTML-Datei:

<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Willkommen auf meiner Webseite!</h1>
<p>Das ist mein erster Absatz.</p>
<img src="bild.jpg" alt="Ein schönes Bild">
<a href="https://www.beispielseite.com">Besuche meine Beispielseite</a>
</body>
</html>

Erklärung des Beispiels

  • <!DOCTYPE html>: Gibt an, dass dies ein HTML5-Dokument ist.
  • <html>:Beginn des HTML-Dokuments.
  • <head>:Kopfbereich mit Meta-Informationen und Verlinkungen.
  • <title>: Titel der Webseite.
  • <meta charset=“UTF-8″>:Zeichencodierung.
  • <link rel=“stylesheet“ href=“styles.css“>: Verknüpfung zu einer CSS-Datei.
  • <body>:Körperbereich mit sichtbarem Inhalt.
  • <h1>:Hauptüberschrift der Seite.
  • <p>:Absatz mit Text.
  • <img>:Bild mit Quelle und Alternativtext.
  • <a>:Hyperlink zu einer anderen Webseite.
  • </html>:Ende des HTML-Dokuments.

Diese Struktur bildet das Grundgerüst jeder HTML-Datei und ist der Ausgangspunkt für das Erstellen von Webseiten.

Schlussbemerkung

Mit diesem Artikel haben Sie ein Grundverständnis von HTML.

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Weiterlesen

HTML lernen leicht gemacht: Ein inklusiver Kurs für alle

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.

Ein Gedanke zu „HTML lernen leicht gemacht: Einführung in HTML“

  1. Pingback: HTML lernen leicht gemacht: Ein inklusiver Kurs für alle – Barrierefreie Informatik

Schreibe einen Kommentar