Einführung in HTML

HTML

HTML (HyperText Markup Language) ist der grundlegendste Baustein des Webs. Es definiert die Bedeutung und Struktur von Web-Inhalten. Neben HTML werden in der Regel andere Technologien verwendet, um das Erscheinungsbild/Präsentation einer Webseite zu beschreiben CSS oder deren Funktionalität/Verhalten JavaScript.

Beispiel einer einfachen HTML-Struktur:

<body>
  <h1>Hallo Welt!</h1>
</body>

HTML-Tag / Element

Ein HTML-Tag wird durch < > umschlossen.

Folgendes Schema verwendet:

<tag> Taginhalt </tag>

Ein paar Elemente (wie z.B. ) haben keinen öffnenden und schließenden Tag, sondern nur einen Tag.

Beispiel:

Das hier ist ein Textabsatz.

HTML verwendet "Markup", um Text, Bilder und andere Inhalte für die Anzeige in einem Webbrowser anzuzeigen

HTML-Markup umfasst spezielle "Elemente" wie <head>, <title>, <body>, <header>, <article>, <section>, <p>, <div>, <span>, <img>, <video>, <ul>, <li> und viele andere

Hier findest du eine Übersicht aller HTML-Elemente: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Baumstruktur des HTML-Codes

HTML-Code ist baumartig strukturiert: Elemente können sich in Unterelemente aufteilen. Die Wurzel, das Ausgangselement der Baumstruktur, ist . Es hat die Unterelemente und , die weitere Unterelemente haben.

Ein Beispiel:

<html>
<head>
  <title>
    Text für den Titel
  </title>
</head>
<body>
  <h1>Eine Überschrift</h1>
  <p>
    Text eines Abschnitts
  </p>
</body>
</html>

HTML-Code einrücken

Die Baumstruktur des HTML-Codes mit Elementen und ihren Unterelemente erkennt man auch daran, dass Unterelemente nach rechts eingerückt werden. So kann man den Anfang und das Ende eines Elements leichter erkennen. Statt Leerzeichen einzufügen, verwendet man zum Einrücken den Tabulator ↹, der meist auf eine Breite von vier oder zwei Leerzeichen eingestellt ist.

Aufgabe 1a

• Gehe im Webbrowser auf https://www.google.de .
• Klicke mit der rechten Maustaste auf den Button Google Suche und gehe auf Element untersuchen.

Aufgabe 1b

Klicke doppelt auf den Inhalt des value Attributes Google Suche und ändere den Text auf einen Text deiner Wahl. Was fällt dir auf?

Eine HTML-Seite erstellen

Aufgabe 2

  • Erstelle ein kostenloses Konto mit deiner (Schul-)Email bei https://codepen.io/pen
  • Erstelle eine jetzt eine HTML Seite mit einer <h1> Überschrift, die den Text Hello World enthält.
Tipps
  • Verwende die einfache HTML-Struktur von oben.
  • Stelle in Codepen unter Einstellung/Settings die Optionen: Auto-Save, Auto-Updating Preview und Format on Save
  • Du kannst mit Ctrl + s jederzeit speichern , der Code wird jetzt automatisch eingerückt werden
  • Bei Code-Fehlern wird dir Code-Pen Hinweise in rot geben (Syntax-Highlighting genannt):

Sprinteraufgabe

  • Binde ein Bild <img> in die Webseite ein
  • Binde youtube Video , siehe Videos und Playlists einbetten - YouTube-Hilfe