6. Juli 2018 in Tutorials

Was ist HTML?
HTML steht als Abkürzung für Hypertext Markup Language, also etwa Hypertext-Auszeichnungssprache. Entwickelt wurde sie zu Beginn der Neunziger am Kernforschungszentrum CERN und bildet heute eine der Grundlagen des World Wide Web.
Als Auszeichnungssprache dient HTML dabei in erster Linie der semantischen Strukturierung digitaler Dokumente. Das bedeutet, mit Hilfe der Sprache teilt der Entwickler einer Maschine Grundlegendes über eine Webseite mit. Etwa: Dies ist eine Überschrift, das hier ein Absatz, dieser Text bildet eine Sinneinheit. Wie das Dokument dann tatsächlich dargestellt wird, bleibt anderer Software, etwa dem Browser, überlassen.

HTML arbeitet mit Auszeichnungen, englisch: Tags, die Teile des Dokumentes wie ein Klammerpaar umschließen. Der Typ des Tags teilt der Maschine mit, wie er das umschlossene Element behandeln soll. Die Struktur ist dabei fast immer gleich.
Ein Tag öffnet sich mit einem spitzen Klammerpaar, welches die Tag-Bezeichnung enthält.

Es schließt sich mit einem weiteren Klammerpaar und dem gleichen Tag-Bezeichner, allerdings mit einem vorgestellten Slash.

Der folgende Befehl

Dies ist eine Überschrift

teilt einer Maschine zum Beispiel mit, dass es sich bei dem hinterlegten Text ‚dies ist eine Überschrift‘ tatsächlich um eine Überschrift handelt. Je nach Browser wird die Hauptüberschrift anders dargestellt, aber es handelt sich hierbei um eine Browsereinstellung. Einige wenige Tags bilden keine Paare. Um diese auf ein Dokument anzuwenden, reicht der öffnende Tag. Beispiele sind für einen Zeilenumbruch

 

oder zum Einfügen eines Bildes.

Ob Sie die Tag-Bezeichner dabei groß oder klein schreiben, spielt für HTML keine Rolle. Mit Rücksicht auf restriktivere Sprachen hat es sich aber eingebürgert, Tags immer klein zu schreiben.

Für Ihr erstes, eigenes HTML-Dokument benötigen Sie lediglich einen Texteditor (der mit jeder Windows-Version ausgelieferte Editor ist völlig ausreichend) und einen Browser, um Ihr Werk betrachten zu können.
Öffnen Sie den Editor und schreiben Sie einfach folgendes:

Sie haben nun bereits zwei Tags verwendet, die grundlegend für jedes HTML-Dokument sind.teilt dem Rechner mit, dass er alle nachfolgenden Zeilen als HTML-Code zu interpretieren hat.umschließt alles, was ein Browser später anzeigen soll. Es bildet also den Körper der Webseite.
Da Ihr Browser momentan nur ein leeres Dokument darstellen würde, ergänzen Sie den Body einfach um ein wenig Text:

Nun Speichern Sie ihr Werk ab. Wichtig dabei ist, dass Sie ihrem Dokument die Endung .htm geben!

Ein Doppelklick auf die Datei öffnet das Dokument in Ihrem Standardbrowser. Herzlichen Glückwunsch, Sie haben Ihre erste, kleine Webseite in HTML geschrieben.

Eine der effektivsten Möglichkeiten, einen Text semantisch zu gliedern, sind Überschriften. Der Tag, mit dem Sie in HTML eine Überschrift markieren sind die Tags: <h#></h#>
Das H steht hierbei für das englische heading. Das #-Symbol steht für die Zahlen 1 bis 6.
HTML gliedert Überschriften hierarchisch. Die höchste Überschrift bekommt die Zahl 1, alle nachfolgenden Zahlen stehen für Unterüberschriften. Betrachten wir, was der Browser aus Überschriften macht. Ergänzen Sie Ihr HTML-Dokument um folgende Zeilen:

Speichern Sie und öffnen Ihr HTML-Dokument wieder mit einem Doppelklick. Sie sehen, der Browser wählt für jede Überschrift automatisch eine Formatierung, sobald Sie von Ihnen als solche gekennzeichnet wurde.

Was wäre eine Überschrift ohne Text? Absätze werden in HTML-Dokumenten mit dem Tag

markiert. P steht für das englische paragraph. Ergänzen Sie ihr Dokument um diesen Tag und schreiben Sie ein wenig Text hinein.

Speichern Sie es ab und betrachten Ihr Ergebnis anschließend im Browser.

Sie werden bemerken, dass der Browser andere Zeilenumbrüche verwendet, als jene, die im Texteditor dargestellt sind. Dies ist ein gutes Beispiel dafür, dass HTML einen Text nur semantisch ordnet. Nicht jeder wird zum Betrachten einer Webseite die gleiche Monitorgröße verwenden. Ein fester Zeilenumbruch könnte zu einem nicht lesbaren Text führen. HTML hält einen Absatz also nur zusammen wie eine Herde Schafe. Um den Zeilenumbruch kümmert sich aber der Browser.

Anker Werbeblock

Zu einer guten Webseite gehören selbstverständlich auch Bilder.
Ein Bild wird in HTML mit dem Tag

eingefügt.

Dieser Tag besitzt keinen schließenden Partner. Außerdem ist er unser erster Tag mit einem zusätzlichen Attribut. Der Teil src=… teilt dem Computer mit, wo er das Bild findet. Sie können dabei ganze Verzeichnispfade oder auch Webadressen verwenden. Am einfachsten ist es, wenn die Bilder im gleichen Ordner liegen, wie Ihr HTML-Dokument. Dann reicht es, wenn sie dem Tag den Namen des Bildes mit auf den Weg geben. Wählen Sie ein Motiv aus und ergänzen Sie Ihr Dokument entsprechend.

Anschließend können Sie wieder speichern und das Ergebnis im Browser betrachten.

Das Internet lebt von Verlinkungen. Schnell von einem Thema zu nächsten springen, Wörter nachschlagen, Bilder vergrößern…
In HTML erzeugen Sie eine Verlinkung mit dem Tag

Link

Alles, was dieses Klammerpaar umschließt, wird dabei zu einem anklickbaren Link. Das kann ein einzelnes Wort sein, ganze Sätze oder ein Bild. Möchte ich also, dass ihr Beispielbild auf die Google-Seite verweist, ändern Sie den Code wie folgt ab:

Das Tag-Paar umschließt nun den Verweis auf das zuvor eingefügte Bild. Wenn Sie ihr Dokument jetzt abspeichern und erneut in Ihrem Browser öffnen, gelangen Sie über den Klick auf das Bild auf die Google-Seite.

Um den Lesern Ihrer Seite noch mehr Informationen zukommen zu lassen, stehen Ihnen verschiedene Möglichkeiten offen.
1. Da wäre zunächst der Titel-Tag.

Ein Text, den Sie zwischen diese Tags setzen, erfüllt mehrere Funktionen. Er erscheint in der Titelzeile des Browsers, wird verwendet, wenn Sie ein Lesezeichen anlegen und hat große Relevanz für Suchmaschinen.

2. Dann gibt es den Head-Tag.

Wie beim Körper kommt der Head vor dem Body. Text, den Sie zwischen dieses Tag-Paar setzen, erscheint nicht direkt auf Ihrer Webseite. Besuchern wird er in den Metainformationen Ihrer Seite angezeigt. Üblicherweise werden hier der Autor der Seite oder auch das letzte Bearbeitungsdatum erwähnt.

Zuletzt – aber besonders wichtig, wenn Sie nicht alleine an einer Webseite arbeiten – kommt die Kommentarfunktion. In einer Programmiersprache versteht man unter einem Kommentar jenen Text, der zwar mitten im Quellcode steht, von der Maschine beim Lesen aber ignoriert wird. So lassen sich problemlos Anmerkungen in Ihr HTML-Dokument schreiben.
Ein Kommentar beginnt in HTML mit der Zeichenfolge

Zwischen diesen Tags steht Ihr Kommentar.

Der Einstieg in HTML ist nicht schwer. Mit einem einfachen Texteditor und ein paar Tags Erstellen Sie über einem Dokument schnell eine semantische Struktur, die jeder Webbrowser verarbeiten kann und fügen Bilder sowie Hyperlinks ein. Auch der zweite Schritt, die Formatierung mittels CSS, wird mit Sicherheit kein Hexenwerk werden.

Sie kennen die Trainerstunde nur vom Tennis, Golf oder anderen Sportarten? Dabei liegt es doch nahe, dass auch bei MS Office (Excel, Teams, …) oder anderen Computerthemen (Windows, Photoshop, Facebook,…) ein Experte, den man fragen kann, der einem die spezielle Sache erklärt, von großem Nutzen sein kann.

Wir unterstützen Sie bei Ihrer individuellen Aufgabenstellung. Gemeinsam mit dem online Trainer lösen Sie Ihr Problem und erlernen dabei wichtige Kniffe in der jeweiligen Anwendung.