HTML GRUNDKURS
Dieser Leitfaden richtet sich an alle, die noch keinerlei Erfahrung mit der Erstellung von Webseiten haben. HTML kann am Anfang unübersichtlich wirken, aber das Prinzip ist einfach: Ich erkläre hier Schritt für Schritt die absoluten Grundlagen, damit du am Ende ohne Vorkenntnisse deine erste eigene kleine Webseite erstellen kannst.
Was ist HTML eigentlich?
HTML (ausgeschrieben bdeutet es Hypertext Markup Language) ist das grundlegende Fundament jeder Webseite im Internet. Es ist keine komplizierte Programmiersprache, bei der du Mathe oder Logik brauchst. HTML ist eine Struktursprache.
Du nutzt HTML, um dem Browser (z.B. Chrome) zu sagen, um was für einen Inhalt es sich handelt. Du sagst dem Browser quasi: “Das hier ist eine Überschrift”, “Das ist ein normaler Text” oder “Das ist eine Liste”.
System der Tags
HTML funktioniert über sogenannte Tags. Das sind kleine Markierungen, die in spitzen Klammern stehen. Sie sagen dem Browser, wo ein bestimmtes Element anfängt und wo es wieder aufhört.
Fast jedes Element besteht aus zwei Teilen:
Der Start-Tag:
<p>(Hier beginnt das Element)Der End-Tag:
</p>(Hier endet das Element – immer am Schrägstrich/zu erkennen)
Alles, was du zwischen diese beiden Tags schreibst, wird zu dem entsprechenden Element. Beispiel: <p>Das ist ein normaler Text.</p>
Das HTML-Grundgerüst
Jede einzelne Webseite der Welt basiert auf einem festgelegten Rahmen. Bevor du Inhalte einfügst, brauchst du dieses Basis-Gerüst.
So sieht es aus:
Die Erklärung der einzelnen Bereiche:
<!DOCTYPE html>: Diese Zeile steht immer ganz oben. Das teilt dem Browser mit, dass es sich um ein HTML-Dokument handelt.<html>: Das ist der Rahmen für alles. Hier beginnt die Webseite und ganz unten bei</html>endet sie. Ohne das, funktioniert deine HTML Datei nicht.<head>: Hier stehen Hintergrundinformationen, die auf der eigentlichen Webseite unsichtbar sind. Der<title>ist zum Beispiel der Name, der oben im Tab deines Browsers angezeigt wird. (Hier z.B. HTML Grundkurs – Hamstergames.eu)<body>: Das ist der wichtigste Bereich für dich. Alles, was du zwischen<body>und</body>schreibst, wird für die Besucher deiner Webseite auf dem Bildschirm sichtbar sein.
Deine ersten eigenen Inhalte
Um deinen <body>-Bereich mit Sachen zu füllen, brauchst du nur eine Handvoll grundlegender Befehle:
Überschriften (
<h1>bis<h6>):<h1>Willkommen auf meiner Seite!</h1>(Das “h” steht für Heading.<h1>ist die Hauptüberschrift,<h2>eine Unterüberschrift, und so weiter bis<h6>).Textabsätze (
<p>):<p>Hier steht mein erster eigener Text.</p>(Das “p” steht für Paragraph, also Absatz. Jeder neue Absatz bekommt ein eigenes<p>).Fettgedruckter Text (
<b>):<b>Dieses Wort ist wichtig.</b>(Das “b” steht für bold, also fett).Eine Aufzählung (
<ul>und<li>): Eine Liste besteht immer aus dem Rahmen der Liste (<ul>) und den einzelnen Listenpunkten (<li>):
Links: Andere Seiten verknüpfen
Das wichtigste Element des Internets ist der Link (oder auch Hyperlink). Er erlaubt es Nutzern, durch einen Klick auf eine andere Webseite zu gelangen.
Der Tag dafür ist das <a> (das steht für das englische Wort “anchor”, also Anker). Damit der Browser aber weiß, wohin der Klick führen soll, reicht ein einfaches <a> nicht aus. Wir müssen dem Start-Tag eine Zusatzinformation mitgeben – ein sogenanntes Attribut.
Beim Link heißt dieses Attribut href (Hypertext Reference = das Verweisziel).
So sieht ein fertiger Link aus:
Was passiert hier genau?
href="https://hamstergames.eu": Das ist das Ziel. Achte darauf, dass die Internetadresse immer in Anführungszeichen steht.Klicke hier...: Das ist der Text, der auf deiner Webseite sichtbar ist. Er wird für den Nutzer standardmäßig blau und unterstrichen dargestellt. (Mit CSS, auf meiner Seite ist das oftmals eine andere Farbe, leider ist mein CSS nicht so sehr auf Artikel Optimiert, sondern eher auf das generelle Aussehen der Seite, deshalb auch der Mix aus Blau und Orange/Gelb.).</a>: Hier endet der Link. Alles, was nach diesem End-Tag geschrieben wird, ist wieder ganz normaler Text.
Bilder einfügen
Um ein Bild auf deiner Webseite anzuzeigen, nutzt du den <img>-Tag (für “image”, also Bild).
Hier gibt es eine Besonderheit: Im Gegensatz zu Überschriften oder Absätzen hat der <img>-Tag keinen End-Tag. Da ein Bild kein Text ist, den man einklammern muss, steht der Tag für sich allein.
Auch das Bild braucht Zusatzinformationen (Attribute), damit es funktioniert:
src(source / Quelle): Sagt dem Browser, unter welchem Dateinamen oder unter welcher Internetadresse das Bild zu finden ist.alt(Alternativtext): Beschreibt in Textform, was auf dem Bild zu sehen ist. Das ist extrem wichtig, falls das Bild einmal nicht geladen werden kann oder für blinde Nutzer, die sich die Webseite vorlesen lassen.
Ein vollständiger Bild-Befehl sieht so aus:
Hinweis: Wenn du nur katze.jpg schreibst, muss sich die Bilddatei im exakt selben Ordner auf deinem Computer befinden wie deine HTML-Datei.
Ich habe bewusst keine richtige Datei eingebunden!
Zeilenumbrüche erzwingen
Wenn du in einem Textabsatz (<p>) schreibst und auf deiner Tastatur die Enter-Taste drückst, ignoriert der Browser das. Für den Browser ist es trotzdem eine lange Zeile.
Möchtest du innerhalb eines Textes einen harten Zeilenumbruch erzwingen, ohne direkt einen neuen Absatz zu beginnen, nutzt du den <br>-Tag (für “break”, also Bruch/Umbruch).
Genau wie das Bild hat auch der Zeilenumbruch keinen End-Tag.
Tabellen: Daten in Zeilen und Spalten ordnen
Wenn du Werte vergleichen möchtest – zum Beispiel eine Highscore-Liste, Öffnungszeiten oder eine Item-Übersicht – sind HTML-Tabellen das richtige Werkzeug.
Wichtig vorab: Tabellen werden in modernem HTML nur für Daten genutzt, nicht um das Aussehen der Webseite (das Layout) zu bauen.
Eine Tabelle wird Zeile für Zeile von oben nach unten aufgebaut. Dafür brauchst du vier verschiedene Tags:
<table>(Tabelle): Der Rahmen um die gesamte Tabelle.<tr>Table Row (Tabellenzeile): Erstellt eine neue, waagerechte Zeile.<th>Table Header (Tabellenkopf): Eine Zelle in der Kopfzeile (der Text wird meist automatisch fett und zentriert dargestellt).<td>Table Data ( Tabellendaten): Eine ganz normale Zelle mit Inhalt.
Wie liest der Browser das? Er öffnet die Tabelle (<table>), erstellt die erste Zeile (<tr>), packt dort zwei Überschriften-Zellen hinein (<th>), schließt die Zeile wieder (</tr>) und macht dann mit der nächsten Zeile für die Daten weiter.
Unsichtbare Boxen: Der div-Container
Wenn deine Webseite wächst, brauchst du eine Möglichkeit, verschiedene Elemente (wie eine Überschrift, ein Bild und einen Text) zu einer Gruppe zusammenzufassen. Dafür gibt es den <div>-Tag (Division/Bereich).
Ein <div> ist im Grunde eine unsichtbare Box. Wenn du diesen Tag nutzt, ändert sich optisch auf deiner Webseite erst einmal gar nichts. (Außer wenn man Hamster heißt und es mitten im Titel verwenden möchte und aufeinmal ein Zeilenumbruch entsteht…)
Warum braucht man ihn dann? Wenn wir später Farbe oder Design ins Spiel bringen, kannst du dem Browser sagen: “Mache den Hintergrund von Box A grau und zentriere alles, was in Box B steht.” Ohne diese Gruppierungen müsstest du jedem einzelnen Text oder Bild einzeln ein Design zuweisen.
Notizen für dich: Kommentare in HTML
Manchmal möchtest du dir im Code eine Notiz machen, die die Besucher deiner Webseite nicht sehen sollen. Oder du möchtest einen Teil deines Codes kurzzeitig “deaktivieren”, ohne ihn gleich zu löschen.
Dafür nutzt man HTML-Kommentare. Alles, was zwischen <!– und –> steht, wird vom Browser komplett ignoriert.
Fazit
Damit hast du die wichtigsten strukturellen HTML-Elemente kennengelernt! Ab diesem Punkt sieht deine Webseite inhaltlich schon komplett aus, ist aber optisch noch sehr schlicht (schwarzer Text auf weißem Grund).
Ich empfehle dir stark, dich auch mit CSS vertraut zu machen, wenn was bringt es dir, wenn deine Webseite zwar Text anzeigen kann, aber noch aussieht, als wäre es im letzten Jahrhunder stehengeblieben.
In der Reihe “Hamster erklärt” wird es in Zukunft noch mehr Sachen geben, darunter auch eine Starthilfe für CSS (Cascading Style Sheet)