Web Engineering
  • Vorwort
  • Einführung
    • Die Arbeitsumgebung
  • HTML
    • Grundlagen HTML
      • Was ist HTML?
      • Struktur
      • Text und Formatierung
      • Listen
      • Bilder
      • Verweise
    • Formulare mit HTML
  • CSS
    • Grundlagen CSS
      • Schrift
      • Farben
    • Übungen
      • ⭐Task-App mit CSS
  • JavaScript
    • Welche Rolle spielt JS?
    • Einführung in JavaScript
    • Formulare verarbeiten
    • Anwendungen mit JS
      • Aktionen ausführen
      • Datenbanken und APIs abfragen
      • Drag & Drop
    • Das JSON-Format
    • Übungen
      • ⭐Task-App mit JS
  • Bootstrap
    • Was ist Bootstrap?
Powered by GitBook
On this page
  • HTML ist eine Beschreibungssprache
  • Wie sieht eine einfache HTML Seite aus?
  • Slides & Video

Was this helpful?

  1. HTML
  2. Grundlagen HTML

Was ist HTML?

PreviousGrundlagen HTMLNextStruktur

Last updated 1 year ago

Was this helpful?

HTML ist eine Beschreibungssprache

HTML steht für Hypertext Markup Language. Wie der Name suggeriert ist HTML eine Beschreibungssprache und keine Programmiersprache.

HTML verwendet sogenannte Tags, um Bestandteile einer Webseite zu beschreiben. Ein Tag ist besteht aus einem definierten Schlüsselwort, das von einem Kleiner- und einem Größerzeichen eingeschlossen ist. Ein HTML Element besteht aus einem öffnenden und einem schließenden Tag. Der schließende Tag sieht genau so aus wie der öffnende, bis auf den Schrägstrich vor dem Schlüsselwort:

<h1>Das ist eine Überschrift</h1>

HTML kennt eine Reihe von Tags, die wir entweder kennen müssen oder , um sie zu verwenden. Um wie oben gezeigt eine Überschrift auf unserer Webseite anzuzeigen, können wir den <h1> Tag nutzen. Mit dem <p> Tag erzeugen wir einen Abschnitt, und der <img> Tag bindet ein Bild auf der Webseite ein.

Der <img> Tag ist ein Beispiel für ein Element mit einem Attribut. Um anzugeben, wo sich das Bild befindet, verwenden wir das src Attribut:

<img scr="https://bilder.de/image.jpg">

Mit Attributen geben wir einem Element zusätzliche Informationen, die es genauer beschreiben. Ein Element kann auch mehr als ein Attribut haben, wie im Beispiel eines Links:

<a href="https://google.de" target="_blank">Link zu Google in neuem Tab</a>

HTML ist keine Programmiersprache. Mit HTML lassen sich Dokumente beschreiben, wir können aber keine ausführbaren Programme damit erstellen. Dazu bräuchten wir Konzepte wie Variablen und Kontrollstrukturen wie Schleifen oder Wenn-Dann-Verzweigungen. Nichts davon existiert in HTML.

Wie sieht eine einfache HTML Seite aus?

Jede Seite beinhaltet eine Menge an Elementen, die auch das HTML-Grundgerüst genannt werden:

<!DOCTYPE html>
<html>
    <head>
        <title>Titel der Webseite</title>
        
        <!-- You can use meta tags to describe your site -->
        <meta charset="utf-8">
        <meta name="author" content="Nicolas Meseth" />
        
        <!-- You can link to files, such as CSS -->
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <h1>Das ist eine Überschrift</h1>
        <p>Das ist ein Absatz</p>    
    </body>
</html>

Slides & Video

Zusätzlich könnt ihr in dem folgenden Video einen ersten Überblick anhand eines Beispiels bekommen:

Die folgenden Slides könnt ihr auch oder .

nachschlagen können
als PDF herunterladen
in einem neuen Fenster öffnen