Webentwicklung ist heute eine der gefragtesten Fähigkeiten. Dabei geht es darum, benutzerfreundliche und ansprechende Websites zu erstellen, die über einen Browser aufgerufen werden können. Der erste Schritt auf dem Weg zum Webentwickler ist das Verständnis von HTML.

HTML (Hyper Text Markup Language) ist das Rückgrat jeder Webseite. Dabei handelt es sich um die Standardsprache zur Strukturierung einer Webseite, die bestimmt, wie Inhalte im Browser angezeigt werden. Während das Erscheinungsbild einer Seite durch CSS (Cascading Style Sheets) und ihre Funktionalität durch JS (Javascript) bestimmt wird, HTML ist für das Grundgerüst oder die Grundstruktur verantwortlich.

Bevor Sie in diesen Teil des Kurses eintauchen, ist es wichtig, bekannte und wiederkehrende Fachjargons zu verstehen, die auf Ihrer Reise verwendet werden. Diese werden Ihnen im weiteren Verlauf helfen, die Konzepte zu verstehen (und es dem Autor auch erleichtern, Dinge zu erklären ;-) ).

Die Jargons verstehen

1. Programmiersprache: Eine Reihe von Anweisungen, die in einer bestimmten Syntax (Art einer Programmiersprache) geschrieben sind und die ein Computer ausführen kann. Denken Sie daran, dass der Computer nur Binärcode (entweder 1 oder 0) versteht. Damit der Computer die Logik versteht und auch einen Kompromiss findet, haben wir (Menschen) eine Programmiersprache erstellt, die einfach zu bedienen ist uns zum Programmieren und auch dazu, dass der Computer es versteht.
2. Compiler: Ein Tool, das in einer Programmiersprache geschriebenen Code in Maschinensprache übersetzt, die ein Computer verstehen und ausführen kann.
3. Syntax: Die Regeln, die die Struktur einer Programmiersprache definieren. Betrachten Sie es als die Art und Weise, wie Wörter in einem Satz so angeordnet werden, dass sie einen Sinn ergeben.
4. Kommentare: Hinweise im Code, die erklären, was bestimmte Teile des Codes bewirken. Kommentare helfen anderen Entwicklern (oder Ihrem zukünftigen Ich), die Logik hinter Ihrem Code zu verstehen.
5. DOM (Document Object Model): Das DOM ist eine baumartige Darstellung des HTML-Dokuments. Jedes Tag in Ihrem HTML wird zu einem Knoten in diesem Baum. Wenn Ihr HTML beispielsweise ein -Tag mit einem

   (Absatz) enthält, erstellt der Browser einen Body-Knoten mit einem Absatzknoten als untergeordnetem Element.

6. Kinder: Sie werden dies im Laufe der Zeit verstehen. Elemente, die in einem anderen Element verschachtelt sind. Beispielsweise würde in HTML ein Absatz-Tag (

   ) innerhalb eines div-Tags (

   ) als untergeordnetes Element von div betrachtet.
7. Element auf Blockebene: Sie werden im Laufe Ihres Fortschritts mit diesem Jargon vertraut gemacht. Dieser Begriff beschreibt normalerweise die Eigenschaft des Elements, dass es die volle verfügbare Breite einnimmt.

---

Mit HTML loslegen

HTML steht für Hyper Text Markup Language

• Hypertext: Bezieht sich auf die Fähigkeit von HTML, verschiedene Dokumente miteinander zu verknüpfen.

• Markup-Sprache: Verwendet Tags zum Kommentieren von Text und definiert, wie er in einem Browser angezeigt werden soll.

Hier ist die Grundstruktur eines HTML-Dokuments:


  
    
  
  
    
Hello, world!
  

• Tags: In HTML werden Tags verwendet, um Elemente zu definieren. Tags werden in spitze Klammern eingeschlossen, z. B. oder

  .

• Elemente: Bestehen aus einem öffnenden Tag und einem schließenden Tag, die Inhalt enthalten können. Beispielsweise ist

  Hallo Welt!

  ein Absatzelement.

---

HTML-Dokumentstruktur

Jedes HTML-Dokument folgt einer Grundstruktur:

1. : Deklariert den Dokumenttyp und die Version von HTML.
2. : Das Stammelement, das alle anderen HTML-Elemente umschließt.
3. : Enthält Metainformationen über das Dokument, wie z. B. den Titel und Links zu Stylesheets.
4. : Legt den Titel der Webseite fest, der in der Titelleiste oder dem Tab des Browsers angezeigt wird.
5. : Stellt Metadaten zum HTML-Dokument bereit, z. B. Zeichensatz, Autor und Ansichtsfenstereinstellungen. Es ist ein selbstschließendes Tag.
6. : Bettet CSS-Code ein, um die HTML-Elemente zu formatieren.
7. : Bettet JavaScript-Code ein, um der Webseite Interaktivität hinzuzufügen.
8. : Schließt den Inhalt ein, der für Benutzer auf der Webseite sichtbar ist.

---

Häufig verwendete HTML-Elemente

Hier sind einige grundlegende HTML-Elemente, die Sie häufig verwenden werden:

• : Definiert einen Absatz.
• : Ein Element auf Blockebene, das zum Gruppieren anderer Elemente verwendet wird.
• : Ein Inline-Element, das zum Gruppieren von Text zu Stilzwecken verwendet wird.
• : Stellt den einführenden Inhalt oder die Navigationslinks eines Abschnitts dar.

• bis
  : Überschriften, wobei

  die höchste Ebene und

  die niedrigste Ebene ist.

• 
  : Fügt einen Zeilenumbruch ein (selbstschließendes Tag – d. h. es besteht keine Notwendigkeit, das Tag zu schließen).
• : Wird zum Erstellen eines HTML-Formulars für Benutzereingaben verwendet.
• : Erstellt ein Eingabefeld, das normalerweise in einem Formular verwendet wird.
• : Erstellt eine Dropdown-Liste.
• : Verknüpft eine Textbeschriftung mit einem Formularelement.