HTML – die Sprache des WWW

HTML beschreibt als reiner Text (Klartext) die Struktur einer Webseite. Der Browser interpretiert diesen Text und stellt sie entsprechend dar: als einfacher Textabsatz, Überschrift, Auflistung, als Link usw.

Begriffe

  • HTML = HyperText Markup Language (Seitenbeschreibungssprache)
  • Homepage = Startseite
  • Webpage = Webseite
  • Website = gesamter Webauftritt, Struktur und Dokumente auf einem Server
  • Domain = Adresse eines Webservers

Grundstruktur einer HTML-Seite

Die Auszeichnung der Struktur erfolgt über Markierungen, die Tag – gesprochen „täg“ – genannt werden (HTML-Markup). Sie umschließen in HTML entsprechende Bereiche mit einem öffnenden und einem schließenden Tag. Ein Tag ist ein Schlüsselwort innerhalb von spitzen Klammern <…>. Beim schließenden Tag ist zusätzlich ein Schrägstrich (/) vor der Tag-Bezeichnung zu setzen:
<html> … </html>
Die einzelnen von Tags umschlossenen Bereiche sind ineinander geschachtelt und dürfen sich nicht überlappen. Die Grundstruktur einer HTML-Seite zeigt die Abbildung:

Die Regeln für den Aufbau und die Struktur von Texten nennt man allgemein Syntax.

body-Bereich

Im Bereich body wird der vom Browser angezeigte Text mit weiteren Tags strukturiert. Bei dieser Strukturierung wird nur festgelegt, was der Text bzw. der Textbereich eigentlich ist.
Man unterscheidet unter anderem zwischen Absatztags und Zeichentags.
Beispiel
<h4>HTML - die Sprache des WWW</h4>
Das öffnende Tag <h4> signalisiert, dass eine Überschrift der vierten Ebene folgt (h = headline = Überschrift; sechs Ebenen sind möglich). Das schließende Tag </h4> signalisiert das Ende der Überschrift.
weitere HTML-Auszeichnungen – Absatzformatierung
<p> … </p> „Absatz (paragraph)“
<ul> … </ul> „ungeordnete Liste“
<li> … </li> „einzelner Punkt einer Liste“
Beispiel
<h4><em>HTML</em> - die Sprache des WWW</h4>
Der Tag <em> steht für eine betonte Hervorhebung (emphatisch – „mit Nachdruck“). Der Text zwischen <em> und </em> wird meist als kursiv interpretiert, abhängig von der eingestellten Schriftart und Schriftgröße für eine Überschrift der vierten Ebene.
weitere HTML-Auszeichnungen – Zeichenformatierung
<em> … </em> „betont (emphatisch)“
<strong> … </strong> „stark betont“
<code> … </code> „dies ist Quellcode“
<var> … </var> „dies ist eine Variable“
<cite> … </cite> „dies ist ein Zitat aus einer anderen Quelle“
<acronym> … </acronym> „dies ist eine Abkürzung“
Eine gute und einfach strukturiertes Tutorial für HTML ist https://www.w3schools.com/html.

Beispiel

Es gibt einige wenige „Standalone-Tags“, d.h. Tags, die keine Einleitung für den folgenden Text darstellen und deshalb kein abschließendes Tag haben.

Beispiele

  1. Eine Zeile, ein manueller Zeilenumbruch <br>
    und die nächste Zeile
  2. Ein anderes Beispiel ist der Tag für das Einfügen eines Bildes:<img src="Bilddateiname">

head-Bereich

Im head-Bereich einer HTML-Datei ist Platz für zusätzliche Informationen.

Seitentitel

Fügt man <title>Seitentitel</title> im head-Bereich ein, so wird dieser im entsprechenden Tab des Browserfensters angezeigt. Ohne Angabe wird der URL (Uniform Resource Locator) angezeigt.

Meta-Informationen

Diese zusätzlichen Information zur Webseite werden nicht direkt im Browserfenster angezeigt. Sie beinhalten zum Beispiel einen Hinweis zur Codierung der verwendeten Zeichen:
<meta charset="utf-8">

CSS

Im head-Bereich kann eingeschlossen in die Tags <style> … </style> auch das Layout mit CSS definiert werden. Für CSS gibt es eine eigene Syntax.

Beispiel

In der Abbildung wird in Zeile 5 bis 7 die Farbe für eine Überschrift der ersten Ebene mit blau festgelegt. Starke Hervorhebungen werden in kastanienbraun (maroon) dargestellt (Zeile 8-10).

Zusammenfassung

Man sieht an diesem Beispiel einer HTML-Seite deutlich die Trennung von Inhalt und Gestaltung. Es ist zu betonen, dass die Verwendung von Tags eine inhaltliche Auszeichnung darstellt und keine optische Gestaltung. Wie die einzelnen mit Tags markierten Bereiche  dargestellt werden obliegt der Interpretation durch den Browser. Mit CSS kann man dem Browser diese Darstellung vorgeben.

einfache Aufgaben

Website Programmiersprachen

Es ist eine einfache Website zum Thema Programmiersprachen zu entwerfen. Inhalte (Texte) dazu sind im Internet zu recherchieren. (keine weitere Formatierung, nur die Verwendung von Standard-Tags). Programm: Editor

Die Startseite könnte so aussehen:

Website Bildergalerie

Es ist eine einfache Website mit einer Bildergalerie zu entwerfen. Auf der Startseite sieht man kleine Bilder (Thumbnails) in einer Tabelle (3 Spalten), darüber Titel und ein kurzer Text.

Der Klick auf ein Bild führt zu einer Detailseite, die etwa so aussehen könnte