Du möchtest gerne Webseiten erstellen, weißt aber noch nicht wie? In diesem Artikel bringe ich dir die Grundlagen von HTML bei.
Was ist HTML und warum sollte man es lernen?
HTML (Hypertext Markup Language) ist eine so genannte Auszeichnungssprache (engl. markup language). HTML bildet den Kern einer jeden Webseite.
HTML ist sehr einfach zu lernen und ein praktisches Werkzeug, um Webseiten zu erstellen oder im Kleineren, etwas im Internet zu veröffentlichen. Denn auch bei Content Management Systemen (CMS) wie WordPress kann es hilfreich sein, HTML Kenntnisse zu haben, auch wenn diese Systeme das Erstellen von Inhalten stark vereinfachen.
Wie funktioniert HTML?
HTML besteht aus verzweigten Elementen, die jeweils durch ein bestimmtes, in eckigen Klammern geschriebenes HTML Tag eingeleitet werden. Die meisten Tags müssen von einem Schluss-Tag abgeschlossen werden, um das Ende zu markieren. Bei einem Absatz muss der Browser ja wissen, wo dieser endet.
HTML Grundgerüst
Eine Webseite besteht immer aus dem folgenden Grundgerüst.
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt!</title>
</head>
<body>
Hallo Welt!
</body>
</html>
Ferner lässt sich dieses in zwei Hauptbereiche einteilen, Head und Body.
Diese werden jeweils mit den gleichnamigen HTML-Tags <head> und <body> eingeleitet und müssen mit </head> und </body> geschlossen werden. Die Bereiche stehen im Quellcode auf einer Ebene.
Head-Bereich
Der Kopfbereich (HEAD) ist dabei vor allem für sogenannte Meta Daten deiner Webseite. Dort stehen also Informationen wie der Webseiten Titel (<title>Hallo Welt!</title>), der im Browsertab angezeigt wird, Verweise auf eingebundene Stylesheets oder Skripte oder andere Daten, die zum Beispiel für Suchmaschinen wie Google oder Bing relevant sind, aber für den Webseiten Besucher sonst nicht direkt ersichtlich sind.
Body-Bereich
Der “Körper”bereich (BODY) deiner Webseite, umfasst den direkt sichtbaren Inhalt. Text, Überschriften, Bilder und alles weitere, was du auf deiner Webseite darstellen möchtest, schreibst du also in den Body-Bereich.
“Nicht direkt ersichtlich” ist übrigens die richtige Beschreibung, denn du kannst dir tatsächlich den Seitenquelltext von jeder Webseite anschauen, indem du irgendwo auf der Seite einen Rechtsklick machst und ‘Seitenquelltext anzeigen’ auswählst (Strg+U in Google Chrome). Insofern kannst du, wenn du möchtest, sogar haargenau herausfinden was Webseite XY z.B. alles in ihrem Kopfbereich stehen hat.
<!DOCTYPE>
Es ist üblich, vor dem einführenden <html>-Tag noch den Typ des Dokumentes mittels des <!DOCTYPE>-Tags festzulegen. Allerdings ist das zumindest für den Browser kein “Muss” und deine Webseite wird auch ohne diesen Tag funktionieren. In der Vergangenheit waren verschiedene HTML Versionen geläufig, die man damit benennen musste, damit der Browser diese verarbeiten konnte. Für die aktuelle HTML5 Version reicht “html” als Angabe innerhalb dieses Tags.
Probier es doch mal aus!
Kopiere das oben genannte Grundgerüst in einen Texteditor deiner Wahl und speicher es als hallowelt.html. Eventuell musst du die Dateiendung (html) selbst auswählen. Diese Datei kannst du nun in einem Browser öffnen. Das ist deine erste Webseite, wenn auch eine sehr primitive.
Die wichtigsten HTML Tags
Deine Webseite kannst du nun mittels der folgenden Tags erweitern. Schreibe diese einfach in den BODY-Bereich deiner Webseite.
Überschriften: <h1> bis <h6>
Es ist sinnvoll, Webseiten oder einzelne Seiten mit Überschriften zu versehen:
<h1>Überschrift Ebene 1</h1> <h2>Überschrift Ebene 2</h2> <h3>Überschrift Ebene 3</h3> <h4>Überschrift Ebene 4</h4> <h5>Überschrift Ebene 5</h5> <h6>Überschrift Ebene 6</h6>
Absätze: <p> und <br>
<p>Dies ist ein Absatz.</p> <p>Dies ist ein Zweiter!</p>
In <p></p> schreibt man einfach den ganzen Text des einzelnen Absatzes. Der Browser interpretiert dies dann als einen solchen und fügt automatisch einen Zeilenumbruch danach ein.
<br> fügt einen Zeilenumbruch ein, ohne dass dieser semantisch für einen Absatz steht. Man sollte möglichst <p> für Textabschnitte verwenden und <br> eher, wenn man zum Beispiel für das Layout Text untereinander darstellen möchte.
Horizontale Trennline: <hr>
<hr> erstellt sowas:
Kommentare
Es ist hilfreich, den eigenen Quellcode zu kommentieren, um vielleicht später etwas einfacher wiederzufinden oder etwas für andere zu erklären, sollte man beispielsweise in einem Team an der Webseite arbeiten.
Kommentare werden mit <!– eingeleitet und enden mit –>. Kommentare sind selbstverständlich nicht auf der Webseite sichtbar, schaut man sich aber den Quelltext deiner Webseite an, wird man sie lesen können.
<!-- Dies ist ein Kommentar. -->
Geordnete und ungeordnete Listen: <ol> und <ul>
Geordnete Listen folgen einer Numerierung (1., 2., 3.,..), ungeordnete Listen beginnen mit einem Aufzählungszeichen.
Jeder Punkt der Liste steht innerhalb eines <li>-Tags.
<!-- Ungeordnete Liste --> Obstsorten: <ul> <li>Äpfel<li> <li>Birnen</li> <li>Bananen</li> <li>Pfirsiche</li> </ul> <!-- Geordnete Liste --> Meine Prioritäten: <ol> <li>HTML lernen</li> <li>CSS lernen</li> <li>JS lernen</li> </ol>
Hyperlinks: <a>
Mit dem <a>-Tag lassen sich Hyperlinks auf andere Seiten deiner eigenen Webseite (separate HTML Dateien) oder anderen Webseiten im Internet erstellen.
Das ist ein <a href="https://www.google.de/">Link zu Google</a>! Und hier verlinke ich auf <a href="./seite2.html">seite2.html</a>. Ich möchte nicht, dass du für <a href="https://google.de/" target="_blank">diesen Link</a> meine Webseite verlässt.
Die Besonderheit des <a>-Tags ist, dass er standardmäßig mit einem Attribut ergänzt wird.
Wichtig: Attribute innerhalb HTML-Tags
Generell lassen sich bei vielen HTML Tags Attribut-Wert Paare innerhalb der eckigen Klammern ergänzen.
In diesem Fall haben wir das Attribut href und als Wert dazu eben den jeweiligen Link, auf den wir verweisen wollen. Der Wert steht immer in Anführungszeichen und wird durch ein Gleichheitszeichen an das Attribut gehängt.
Ein praktisches Attribut für Links ist target. Damit kannst du bestimmen, ob ein Link im selben Fenster geöffnet werden soll (target=”_self”, das ist der Standard, muss man also nicht dazu schreiben) oder in einem neuen Tab (target=”_blank”).
Welche Attribute bestimmte HTML Tags unterstützen, kannst man in einer Dokumentation nachschauen (z.B. hier für <a>, unter “Attributes”, als obsolet gekennzeichnete sollte man natürlich nicht verwenden). Im Zweifelsfall einfach mal nach “html <a>” o.Ä. in eine Suchmaschine eingeben.
Was brauche ich, um eine Webseite mit HTML zu erstellen?
Im Grunde nur einen Browser und einen einfachen Texteditor, wobei im Grunde selbst der einfache Windows Editor ausreichen würde.
Als Browser empfehle ich den Google Chrome, weil dieser sehr nützliche Entwicklertools mitbringt.
Wer etwas angenehmer arbeiten möchte, sollte anstelle eines Texteditor einen vollwertigen Code Editor wie Microsofts Visual Studio Code (mein Favorit) oder Atom verwenden. Diese sind unter anderem speziell auf die Erstellung von Webseiten optimiert und bringen einige sehr gute Funktionen (wie Syntax Highlighting, Live Vorschau und Emmet) mit sich, die man bereits nach kurzer Eingewöhnung nicht mehr missen möchte.
Die Programme sind auch alle kostenlos und sowohl für Windows, Mac OS X und Linux verfügbar, weshalb man sie auf jeden Fall einmal ausprobieren sollte.
Ausblick: Wie kann ich HTML weiter vertiefen?
Schau dir auch CSS3 an und lerne die Grundlagen
Neben HTML sollte man sich auf jeden Fall auch die Stylesheet-Sprache CSS (Cascading Style Sheets) anschauen. Denn während HTML praktisch für Inhalt und Struktur verantwortlich ist, sorgt der richtige Einsatz von CSS erst dafür, dass eine Seite auch ansprechend aussieht.
Ich empfehle, beides gleichzeitig zu lernen und zu benutzen. Sie ergänzen sich perfekt.
So viel wie möglich anwenden und ausprobieren
Man braucht bezüglich HTML und CSS nichts bewusst auswendig lernen, aber auch nicht davor zurückschrecken immer mal wieder etwas nachzuschauen. Das Wichtigste behält man irgendwann automatisch im Hinterkopf, wenn man es erst einmal oft genug in der Praxis verwendet hat.
Also anstatt irgendwelche Bücher oder Dokumentationen auswendig lernen zu wollen, rate ich eher dazu, genug auszuprobieren und einfach mal ein paar kleine Webseiten zu erstellen. Diese muss man ja nicht gleich online stellen oder ausarbeiten. Wie so oft macht Übung den Meister.
HTML Dokumentationen anschauen
Sehr hilfreich sind Dokumentationen zu HTML und CSS. Diese findet man schnell über eine Google Suche zu einem bestimmten Thema, aber es schadet auch nicht, einmal ein bisschen in ihnen zu blättern.
Für HTML und CSS sind die MDN Web Docs (CSS hier) von Mozilla sowie die W3School HTML Reference ganz gut. Allerdings sind beide Webseiten englischsprachig. Auf Deutsch empfiehlt sich SelfHTML, ist meiner Meinung nach aber nicht ganz so gut. Eine deutsche Webseite, die sich mit CSS beschäftigt ist css4you.
Für danach: JavaScript (JS)
Weiterhin wäre es praktisch, die weit verbreitete Skriptsprache JS (JavaScript) bzw. ECMAscript zu lernen. Mit einer solchen Skriptsprache lässt sich auch eine Logik integrieren und man kann eine Seite live auf Nutzer-Eingaben reagieren lassen. Das wäre der nächste Schritt zu einer dynamischen Webseite oder Web App.
Allerdings empfehle ich, sich vorher erstmal ausreichende Grundlagen in HTML und CSS anzueignen.
Ggf. ein Buch über HTML5 und CSS3 lesen
Wer nach einem geeigneten Buch sucht, um HTML, CSS und bestimmte Webtechniken weiter zu erlernen und zu vertiefen, sollte sich einmal HTML5 und CSS3: Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Bootstrap, Responsive Webdesign u.v.m. von Jürgen Wolf anschauen. Das Buch eignet sich dafür sehr gut.
