HTML-Grundlagen - Was Einsteiger wissen müssen
Sie wollen eine eigene Website betreiben? Dann sollten Sie ein wenig HTML können - die wohl einfachste "Programmiersprache" überhaupt.
- Anna Kalinowsky
Die Hyper Text Markup Language (HTML) ist genau genommen keine Programmiersprache, sondern eine Auszeichnungssprache – und deshalb super einfach zu beherrschen. Hier finden Sie alles, was Sie für den Einstieg brauchen.
Hinweis: Dieser Artikel ist der erste Teil eines Tutoriums. Wie Sie mit CSS und DIV Ihrer HTML-Seite ein schickes Layout verpassen, lesen Sie in Teil zwei.
- Wie funktioniert HTML?
- HTML-Editoren
- Das Grundgerüst jeder Seite
- Die wichtigsten Elemente
- Wie geht es weiter?
Wie funktioniert HTML?
HTML ist für viele der erste Kontakt zu irgendeiner Form von Quellcode. Zum einen zeigen Webseiten ihren Quelltext wesentlich freiwilliger als Programme und zum anderen ist HTML wirklich super einfach. HTML ist nämlich keine Programmiersprache und folglich gibt es auch keine komplizierten Logiken, Schleifen, Variablen und so weiter. Es handelt sich um eine Auszeichnungssprache, die im Grunde nur eine einzige Sache macht: Festlegen, wie genau ein Stück Text aussehen, formatiert sein soll.
Zusätzlich können über HTML weitere Medien wie Videos, Bilder oder Audiodateien eingebunden werden. Aber auch hier geht es nur darum zu sagen: Jetzt kommt ein Bild in folgender Größe und mit folgendem Rahmen. Bei HTML5 kommen dann schließlich noch komplexere Elemente hinzu, beispielsweise das so genannte "Canvas", eine Fläche, auf der der Nutzer zeichnen kann.
Ganz grundsätzlich sieht ein Stück HTML-Code beispielsweise so aus:
<h1>Dies ist eine Überschrift der Stufe 1.</h1>
Inhalte stehen bei HTML immer in sogenannten Tags mit spitzen Klammern. Im Beispiel leitet "<h1>" eine Überschrift (Headline) der Stufe 1 ein und "</h1>" beendet die Auszeichnung. Diese Kombination aus ein- und ausleitendem Tag ist Standard für fast alle Elemente. Der Slash (/) findet sich immer im Ende-Tag.
Einleitende Tags können aber auch weitere Optionen haben, wie das Beispiel eines Hyperlinks zeigt:
<a href="www.heise.de">Ein Link zu heise.</a>
Durch das a-Tag wird der Text zwischen den Tags zu einem Link. Das Link-Ziel wird durch "href" (Hyperlink-Referenz) bestimmt. Damit ist die Grundstruktur der Auszeichnungssprache bereits komplett abgehandelt! Natürlich gibt es etliche Elemente, teils mit vielen Optionen, sodass es am Ende nicht immer ganz trivial ist, das gewünschte Ergebnis zu erreichen. Aber zu den wichtigsten Elementen gibt es später mehr, jetzt geht es erstmal an das Grundgerüst einer jeden HTML-Seite.
Womit Sie eine HTML-Datei erstellen können, erklären wir Ihnen in diesem tipps+tricks-Artikel.
HTML-Editoren
Um HTML-Code zu erzeugen und funktionierende HTML-Dokumente zu generieren, sollten Sie einen HTML-Editor verwenden. Diese bieten Entwicklern übersichtliche Benutzerinterfaces und farbliche Kennzeichnung des Codes. Die Entwicklungsumgebung Visual Studio Code ist dafür bestens geeignet und darüber hinaus auch noch kostenlos verfügbar:
Das Grundgerüst jeder Seite
<!doctype html><html> <head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0"> <title>Der Seitentitel</title> </head> <body> <p>Ein simpler Paragraph mit beliebigem Text.</p> </body></html>
Jedes HTML-Dokument sollte mit "<!doctype html>" anfangen. Das ist lediglich die Mitteilung an aufrufende Programme wie den Browser, dass es sich um ein Dokument im HTML-Standard handelt.
Es folgt das einleitende HTML-Tag "<html>" – Ihr gesamter HTML-Code landet zwischen diesem und dem ausleitenden Tag "</html>". Das ist gewissermaßen die große Klammer, die alles zusammenhält. Anschließend folgen zwei weitere solcher Klammern: Im HEAD-Bereich werden Metadaten angegeben und der gesamte Inhalt landet letztlich im BODY-Bereich.
In diesem Beispiel werden im HEAD-Bereich drei wichtige Angaben gemacht: Der Titel sollte immer vorhanden sein; dieser erscheint übrigens in der Titelzeile des Browsers. In den meta-Tags wird hier zunächst die Zeichenkodierung auf das übliche UTF-8 gesetzt – was etwa dafür sorgt, dass Umlaute richtig dargestellt werden. Der zweite meta-Tag legt den sogenannten Viewport fest. Damit ist die Anzeigegröße der Seite gemeint, in diesem Fall soll die Seite so breit sein, wie das anzeigende Gerät (device-witdh) und mit in Originalgröße (initial-scale=1.0) angezeigt werden. Beide meta-Tags sind optional, dürften aber in fast allen Fällen angebracht sein.
Jetzt kommt endlich der spannende Part, wo Sie sich kreativ ausleben können: Im BODY-Bereich steht bislang nur ein einzelner Paragraph, gekennzeichnet durch das p-Tag. Für den Anfang könnten Sie also einfach den obigen Text in eine Textdatei kopieren, diese zum Beispiel "meine-erste-seite.html" nennen und per Drag&Drop auf den Browser ziehen – es erscheint eine langweilige, aber korrekte HTML-Seite.
Die wichtigsten Elemente
Sie kennen nun den Aufbau von HTML-Seiten und -Tags – Zeit, ein paar wichtige Inhaltselemente und ihre zugehörigen Tags kennenzulernen. Ein typischer Textaufbau könnte etwas so aussehen: Überschrift, Absatz, Bild, Unter-Überschrift, Liste, Unter-Unter-Überschrift, Tabelle. Damit ließen sich bereits ziemlich komplexe Webseiten basteln. Die Überschrift der höchsten Hierarchiestufe kennen Sie bereits, alle weiteren laufen nach dem selben Muster:
<h1>Überschrift der Stufe 1</h1><h2>Überschrift der Stufe 2</h2><h3>Überschrift der Stufe 3</h3>
Die Überschriften werden von Stufe zu Stufe kleiner, ganz ähnlich, wie Sie es vielleicht von Texteditoren wie Microsoft Word oder LibreOffice Writer kennen. Absätze per p-Tag hatten wir bereits, Bilder sind neu:
<img src="ein-bild.jpg" width="1000" height="1000" alt="Ein Beispielbild" />
Beim img-Tag für Bilder gibt es zunächst etwas Neues: Es fehlt das separate abschließende Tag – stattdessen wird das Bild-Tag direkt hier per "/>" geschlossen. Warum? Ganz einfach: Es gibt keinen Inhalt, der zwischen zwei Tags stehen könnte. Das Bild wird über die Option "src" (Source/Quelle) angegeben. Wenn Bild und HTML-Datei im selben Ordner liegen genügt der Dateiname, ansonsten müsste der komplette Pfad zum Bild angegeben werden. Über "width" und "height" werden Breite und Höhe angegeben. Statt absoluter Pixel-Werte könnte hier zum Beispiel auch "50%" stehen, um das Bild über die halbe Bildschirmgröße zu zeigen. Die alt-Option sollte nie fehlen: Wenn ein Bild nicht angezeigt werden kann, wird stattdessen dieser alternative Text angezeigt – der entsprechend aussagekräftig sein sollte. Auch für sehbehinderte Nutzer sind diese Tags enorm wichtig.
Und noch etwas kann man am Bild-Tag lernen: Verschachtelung. Wie wäre es, das Bild mit einer Website zu verlinken?
<a href="https://www.heise.de"> <img src="ein-bild.jpg" /> </a>
Statt eines Texts, steht hier innerhalb der a-Tags schlicht ein Bild-Tag und schon ist das Bild anklickbar.
Ein weiteres beliebtes Element ist die Liste - zunächst als nummerierte Version:
<ol> <li>Erster Punkt</li> <li>Noch ein Aspekt</li> <li>Und so weiter</li></ol>
Das ol-Tag leitet eine nummerierte Liste ein, jedes Listenelement wird von einem li-Tag umschlossen. Und wenn Sie lieber eine unnummerierte Bullet-Liste haben möchten, tauschen Sie einfach die ol-Tags gegen ul-Tags aus – so einfach kann Web-Layout sein! Aber nicht alles ist so einfach. Daher zum Schluss ein etwas aufwändigeres Gestaltungselement, eine Tabelle mit zwei Spalten und drei Zeilen:
<table> <tr> <th>Kopf Spalte 1</th> <th>Kopf Spalte 2</th> <th>Kopf Spalte 3</th> </tr> <tr> <td>Zelle 2/1</td> <td>Zelle 2/2</td> <td>Zelle 2/3</td> </tr> <tr> <td>Zelle 3/1</td> <td>Zelle 3/2</td> <td>Zelle 3/3</td> </tr></table>
Das table-Tag umschließt die gesamte Tabelle. Die tr-Tags stehen für "Table Row" und jedes tr-Tag-Paar definiert eine Zeile der Tabelle. Innerhalb dieser Zeilen werden die Spalten definiert: In der ersten Zeile werden über die "Table Head"-Tags (th) zunächst die Spaltenüberschriften festgelegt. In den weiteren Zeilen werden via "Table Data"-Tags (td) die einzelnen Zellen mit Inhalten gefüllt.
Mit Tabellen kann man sich recht lange aufhalten – verschachteln Sie hier einfach mal ein wenig alle Ihnen bekannten Inhaltselemente und Sie werden schnell sehen, dass HTML nicht immer trivial ist.
Wie geht es weiter?
Sie sollten jetzt bereits ganz simple HTML-Seiten erstellen können. Zwei Dinge fehlen noch, damit Sie tatsächlich eine ganze Homepage aufsetzen können. Zunächst mal die Veröffentlichung: Wenn Sie einen Webspace haben, genügt es, die HTML-Dateien in das Hauptverzeichnis zu legen (meistens "www", "www-root" oder "htdocs") und die Startseite "index.html" zu nennen.
Außerdem sollten Sie noch Seiten verlinken können, was genauso funktioniert, wie externe Links:
<a href="seite2.html">Ein Link auf die nächste Seite.</a>
Wenn Sie Ihren HTML-Code lieber sofort im Browser testen möchten, geht das natürlich auch online, beispielsweise bei w3chools.com.
Alle hier erwähnten Code-Beispiel im Online-Editor von w3schools.com.
Um "echte" Webseiten zu erstellen, werden sich Ihnen jetzt vermutlich einige Fragen stellen. Zum Beispiel, wie Sie Schriftarten und Farben festlegen können (Stichwort CSS), wie sich Inhalte in ein sauberes Layout bringen lassen (Container-Elemente) oder wie zum Beispiel Suchformulare angelegt werden. Und natürlich: Videos einbinden. Die Antworten finden Sie hier.
(anka)
