Für viele Unternehmer, die sich vorher nie mit HTML beschäftigen mussten, ist der Digitalcode ein Brief mit sieben Siegeln. Dabei lohnt es sich, sich wenigstens die Grundlagen anzueignen, denn die meisten Internetseiten werden mit HTML strukturiert. Bereits mit geringen Kenntnissen lassen sich im Backend recht einfach Anpassungen vornehmen.
Doch was bedeutet HTML eigentlich genau? Die Abkürzung steht für „Hypertext Markup Language“, es handelt sich also um eine Sprache. Wörtlich übersetzt lautet die Bezeichnung „Hypertext-Auszeichnungssprache“. Genau genommen ist HTML also eine Programmiersprache, die im Hintergrund festlegt, was für den Benutzer einer Website dargestellt wird.
Tags und Attribute
Durch festgelegte Zeichenfolgen werden Befehle formuliert, die beispielsweise die Schriftart und -größe bestimmen, eine Überschrift als solche definieren oder mit denen man ein Youtube-Video auf einer Seite einbinden kann. Der Browser interpretiert den Code und zeigt dann den Inhalt nach HTML-Regeln an. Letztlich kann mit jedem Standardtextprogramm ein Dokument in der Auszeichnungssprache verfasst werden.
Die Gestaltung einzelner Elemente einer Website wird durch sogenannte Tags bestimmt. Mit dem <img>-Tag werden beispielsweise Fotos eingebunden, während das <p>-Tag darüber bestimmt, wann ein neuer Absatz in einem Text beginnt. Jeder einzelne Tag besitzt darüber Attribute, die ihn genauer definieren. Möchte man ein bestimmtes Bild einbinden und dafür die Quelle abgeben, muss per HTML-Code die Eigenschaft src mit dem Tag verknüpft werden, welche für source steht. Auch die Breite (width) und die Höhe (height) des Bildes können genau bestimmt werden.
Bilder einbinden
Das Einbinden des Bildes xyz.jpg auf einer Website mit HTML-Codierung würde nun folgendermaßen aussehen:
<img src=“bilder/xyz.jpg“ alt=“Beschreibungs-Text“ width=“200px“ height=“150px“ />
Unser Beispielbild hätte eine Höhe von 150 und eine Breite von 200 Pixel. Als Quelle ist der Beispielordner „images“ angegeben. Um Ladezeit zu sparen, sollte das Bild vor dem Hochladen bereits mit einem Bildbearbeitungsprogramm wie Gimp auf die gewünschte Größe skaliert werden. Zudem ist erkennbar, dass der Tag zunächst mit dem Zeichen < geöffnet und am Ende mit /> wieder geschlossen wird. Ist ein Tag nicht geschlossen, kann die Seite den Befehl nicht erkennen.
Das sogenannte alt-Attribut, in diesem Fall benannt mit „Alternativer Text“, sollte bezeichnen, was auf dem Bild zu sehen ist. Dies ist sinnvoll, um bei deaktivierter Bilddarstellung einen Hinweis auf das Motiv zu geben. Auch für Menschen mit einer Sehbehinderung, die sich den Text der Seite vorlesen lassen, ist dies eine Hilfe. Sie können dem gesamten Inhalt des Textes inklusive der Bildinformation dann besser folgen.
Absätze definieren
Wie oben bereits erwähnt, können mit dem Tag <p> Absätze definiert werden. Das Start-Tag des Absatzes unterscheidet sich vom abschließenden Tag durch einen Schrägstrich (Slash): </p>. Das Grundgerüst eines Absatzes sieht daher so aus:
<p>Dies ist ein Beispieltext, um Ihnen zu zeigen, wie ein Absatz mit Hilfe von HTML-Codes gebaut wird.</p>
Wird der End-Tag weggelassen, kann die Darstellung im Frontend sehr fehlerhaft sein. Einen Tag in jedem Fall zu schließen, ist daher sehr wichtig.
Eine weitere wichtige Unterscheidung ist die zwischen dem <head>- und dem <body>-Tag. Während der <body>-Tag den sichtbaren Inhalt der HTML-Seite beinhaltet, werden mit dem <head>-Tag Informationen codiert, die auf der Seite nicht direkt sichtbar, aber beispielsweise für Suchmaschinen lesbar sind. Ein Beispiel zur Demonstration:
<html>
<head>
<title>Dies steht im Hintergrund und ist für den Leser unsichtbar.</title>
</head>
<body>
<p>Dieser Text hingegen ist sichtbar.</p>
</body>
</html>
Tatsächlich werden Besucher Ihrer Website nach dem Öffnen des Browsers nicht mehr lesen können als den Satz: „Dieser Text hingegen ist sichtbar.“
HTML-Versionen
Natürlich werden die Zeichenabfolgen der HTML-Auszeichnung umfangreicher, je mehr Befehle auf einmal auf einen Textabschnitt angewendet werden sollen. Was an diesen Beispielen aber deutlich wird: HTML ist kein Hexenwerk, es ist eine logisch aufgebaute Sprache, die leicht zu verstehen und daher auch schnell zu lernen ist. HTML-Grundlagen kann sich jeder in wenigen Stunden aneignen, spezielle Kursangebote und auch zahlreiche Online-Tutorials oder Internet-Foren helfen dabei, die Steuerzeichen zu entschlüsseln und korrekt anzuwenden.
Bereits in den 90er-Jahren erschien übrigens die erste HTML-Version. Seither hat sich die Auszeichnungssprache stetig weiterentwickelt. Der Grundaufbau aber ist immer derselbe geblieben: einfache, auf Tags basierende Befehle, die eine Website strukturieren und ihr das gewünschte Gesicht verleihen.