4. Der HTML p Tag

Mit dem p Tag definieren wir Paragrafen, also einzelne Textabschnitte. Wir können nun also folgendes schreiben:

Nach dem Speichern sehen wir, dass die beiden Sätze tatsächlich zu separaten Paragrafen formatiert wurden.

Damit besitzen wir also ein weiteres Hilfsmittel, um Texte sauber zu strukturieren. An dieser Stelle möchte ich dir noch einen weiteren nützlichen Shortcut von Emmet zeigen.

5. Beispieltext mit Emmet generieren

Einen Beispieltext lässt man generieren, wenn man bereits das Grundkonstrukt einer Seite aufgebaut hat, jedoch noch nicht die passenden Inhalte parat hat. Um das Ganze zu testen, schreiben wir nach der Überschrift „Modul 1“ nun mal Folgendes:

Mit der Zahl 5 am Wort „Lorem“ geben wir die gewünschte Anzahl an Wörtern an, die unser Beispieltext haben soll. Nach dem Bestätigen durch die Enter-Taste sehen wir: 

Emmet hat uns einen Dummy-Text bestehend aus fünf Wörtern generiert.

Bei Modul 2 können wir beispielsweise das Gleiche tun, allerdings diesmal den Text mit 15 Wörtern generieren lassen. Dafür schreiben wir:

Anschließend bestätigen wir das Ganze mit Enter und erhalten dann einen Text, der aus 15 Wörtern besteht. Die Platzhalter-Texte sind also ziemlich nützlich!

6. Ein typischer HTML-Einsteigerfehler

Zum Abschluss dieser Lektion möchte ich noch auf einen Fehler hinweisen, der häufig von Einsteigern gemacht wird, nämlich Zwischenüberschriften zu überspringen.

Vielleicht hast du den ersten Beitrag dieser Reihe gelesen und erinnerst dich noch an Folgendes:

Mit HTML definiert man die Struktur einer Website, wohingegen man mit CSS das Aussehen vorgibt und den Content stylt.

In anderen Worten: Lasse keine Überschrift aus.

Wenn es also eine h1- und eine h2-Überschrift gibt und du weiter in die Tiefe gehen möchtest, wähle eine h3-Überschrift. Die Größe der Darstellung kannst du später noch mithilfe von CSS anpassen.

4. Das title-Element

Darüber hinaus taucht typischerweise der Titel des Dokuments im head-Element auf. Diesen gibt man mit dem sogenannten title-Element an.

Wenn wir die Datei nun mal über unseren Browser öffnen, sehen wir, dass der Inhalt tatsächlich noch leer ist:

Das liegt daran, dass wir alles, was den Inhalt betrifft, im body-Element platzieren. Und dieses ist aktuell noch leer.

Doch wo erscheint nun der Titel?
Den Titel sehen wir oben im Tab:

Noch mal zur Wiederholung:

Im head-Element geben wir zusätzliche Informationen an, die das Dokument selbst betreffen. In unserem aktuellen Beispiel haben wir dort den verwendeten Zeichensatz und den Titel angegeben.

Dabei handelt es sich um typische Punkte, die man im HTML Grundgerüst bei jeder Datei angibt.

Wenn wir uns das aktuelle Beispiel etwas genauer ansehen, siehst du vielleicht schon, dass das Ganze recht schnell unübersichtlich wirkt. Das liegt daran, dass sich alles auf der gleichen Einrückungsebene befindet:

Aus diesem Grund markieren wir jetzt mal sowohl das Meta-Tag als auch das title-Element und drücken die Tabulator-Taste. Damit rücken wir den Text eine Ebene weiter nach rechts ein.

Diese Einrückungen haben keine Auswirkungen auf das Dokument an sich, helfen aber uns Entwicklern dabei, es übersichtlicher zu gestalten.

Aus diesem Grund empfehle ich dir, immer mit solchen Einrückungen zu arbeiten, wenn du mehrere Elemente und Tags ineinander verschachtelst. Jede weitere Verschachtelung würde man also wieder eine weitere Tabulatortaste nach rechts einrücken.

5. Das body-Element

Nun kommen wir aber mal zum eigentlichen Inhalt der Webseite, den man, wie bereits erwähnt, im body-Element angibt.

Alles, was wir also später auf der Website anzeigen lassen möchten, platzieren wir im body-Element.

Beispielhaft geben wir dort einmal den folgenden Text ein:

Wenn wir das Ganze jetzt im Browser neu laden, sehen wir, dass der Inhalt des body-Elements tatsächlich im Fenster angezeigt wird:

Das ist also das HTML Grundgerüst, welches du fortan in jedem deiner HTML-Files benötigen wirst. Damit wir dieses nicht jedes Mal neu aufsetzen müssen, kann man dieses Gerüst auch automatisch generieren lassen. In VS Code ist nämlich bereits ein besonderes Plugin namens „Emmet“ vorinstalliert, das uns dabei hilft, HTML- und CSS-Dateien wesentlich schneller zu erzeugen.

6. Das HTML Grundgerüst mit Emmet generieren

An dieser Stelle löschen wir nun den gesamten Inhalt, sodass wir wieder eine leere Datei vor uns haben. Über Emmet können wir uns jetzt also das komplette HTML Grundgerüst mit nur einem Klick erzeugen lassen.

Dafür tippen wir ein Ausrufezeichen ein und drücken die Enter-Taste. Wie du anschließend sehen kannst, hat das Programm nun das komplette HTML Grundgerüst für uns generiert, das wir vorher noch mühsam händisch aufsetzen mussten:

Hier ist allerdings noch die Sprache auf das englische Länderkürzel eingestellt.

Das lässt sich ändern, indem wir in der zweiten Zeile das „en“ zu einem „de“ machen.

Eine weitere Sache, die du wahrscheinlich ebenfalls entdeckt hast, sind die zwei weiteren Meta-Tags im Grundgerüst. Was diese bewirken, ist aber in dieser Tutorialreihe noch nicht von Bedeutung.

Damit sind wir auch wieder am Ende dieses Artikels angekommen. Im nächsten Blogbeitrag wirst du einiges Interessantes über Paragrafen und Überschriften lernen.

3. Combi-Tags in HTML

Zu guter Letzt möchte ich noch darauf hinweisen, dass es für die selbstschließenden Tags auch noch eine andere Schreibweise gibt. Im Falle des br-Elements würde das Ganze folgendermaßen aussehen:

Wenn wir mit dieser Schreibweise den Browser neu laden, ist der Zeilenumbruch nach wie vor gesetzt. Sie ist also ebenfalls gültig.

Doch was soll diese Schreibweise darstellen?

Das Slash soll andeuten, dass es gleichzeitig sowohl das öffnende als auch das schließende Tag nachbildet.

Man kann also bei den selbstschließenden Elementen auch immer nach dem Elementnamen ein Leerzeichen und ein Slash hinzufügen. Das funktioniert genauso und nennt sich in der Fachsprache Combi-Tag.

Damit sind wir auch schon am Ende des heutigen Blogartikels angekommen. Im nächsten Beitrag werden wir mehr über das wichtige HTML-Grundgerüst herausfinden.

3. Das u-Element

Hierzu schreiben wir vor die beiden Wörter <u> und dahinter ein weiteres Mal das Gleiche mit dem Unterschied, dass wir vor dem zweiten u ein Slash-Zeichen einfügen:

<u>Willkommen in</u>

Das mag im ersten Moment zwar etwas komisch aussehen, aber es handelt sich dennoch um ein valides HTML-Element. Wenn wir diese Datei noch mal im Browser öffnen, sehen wir, dass die beiden ersten Wörter tatsächlich unterstrichen sind:

Dieses u-Element ist nur ein Beispiel von vielen. Denn es gibt zahlreiche HTML Elemente, mit welchen man so gut wie alles Vorstellbare umsetzen kann. Die wichtigsten Vertreter wirst du auch noch hier in dieser Tutorialreihe kennenlernen.

Zuvor sehen wir uns aber erst mal den allgemeinen Aufbau eines HTML-Elements genauer an.

4. Der Aufbau eines HTML-Elements

Ein HTML-Element ist im Grunde folgendermaßen aufgebaut:

<element_name>Inhalt</element_name>

Ein HTML-Element gliedert sich grob gesagt in drei Bereiche:

1. das öffnende Tag
2. den Inhalt des Elements
3. das schließende Tag

Erläuterung:

Das öffnende Tag markiert immer den Start eines Elements.

Beim Inhalt befindet sich der Teil des Textes, auf den das HTML-Element angewendet werden soll.

Das schließende Tag beendet das HTML-Element.

Beim oben stehenden Beispiel stellt das <u> also das öffnende Tag dar. Bei den Wörtern „Willkommen in“ handelt es sich um den Inhalt und das </u> ist das schließende Tag.

Das gesamte Konstrukt ist also ein HTML-Element.

Wir können das noch weiter aufgliedern und uns ansehen, wie ein öffnendes Tag im Detail aufgebaut ist. Zunächst kommt ein Kleiner-Zeichen, anschließend folgt der Element-Name und das Größer-Zeichen. Diese Bestandteile ergeben das öffnende Tag.

Danach folgt der Inhalt. Das schließende Tag setzt sich dann fast genau wie das öffnende Tag zusammen. Man leitet es durch das Kleiner-Zeichen ein und dann kommt auch schon der einzige Unterschied zum öffnenden Tag: das Slash-Zeichen. Nun gibt man den Element-Namen an und abschließend das Größer-Zeichen.

Der Unterschied zwischen öffnendem und schließendem Tag ist also lediglich das Slash-Zeichen vor dem Element-Namen. Dass es diesen Unterschied gibt, ist auch ganz praktisch, da man sonst das Öffnende vom schließenden Tag nicht unterscheiden könnte.

Merke dir also:

Ein HTML-Element besitzt fast immer ein öffnendes und ein schließendes Tag. Die Betonung liegt auf „fast“, da es einige wenige Ausnahmen gibt, die wir im nächsten Beitrag noch kennenlernen werden.

So sind also HTML Elemente aufgebaut.

Du hast bereits das u-Element kennengelernt, welches dessen Inhalt unterstrichen darstellt. Logischerweise existieren aber noch zahlreiche weitere HTML Elemente, wie etwa das b-Element.

5. Das b-Element

Das b-Element stellt einen Inhalt fett gedruckt dar. Wenn wir das Wort „HTML“ in unserem aktuellen Beispiel fett gedruckt sehen möchten, bauen wir um dieses Wort das b-Element:

<b>HTML</b>

Auch hier sehen wir wieder den typischen Aufbau eines HTML-Elements.

Zu Beginn haben wir das öffnende Tag. Der Element-Name lautet diesmal „b“ und der Inhalt folgt direkt danach. In diesem Fall stellt das Wort „HTML“ den Inhalt dar, welches wir fett gedruckt anzeigen lassen möchten. Zum Schluss setzen wir das schließende Tag, das wir am Slash-Zeichen erkennen.

Wenn wir das nun so speichern und in den Browser wechseln, siehst du erst mal, dass „HTML“ noch nicht fett gedruckt ist.

Das liegt daran, dass wir das Browser-Fenster noch nicht aktualisiert haben.

Denn immer, wenn wir in einer Datei eine Änderung vorgenommen haben, müssen wir das Browser-Fenster aktualisieren, damit auch dieses die Änderung übernehmen kann.

Wir können das Ganze nun also noch einmal im Browser laden und sehen, dass dieser den Inhalt diesmal fett gedruckt anzeigt:

Darüber hinaus ist es möglich, mehrere HTML Elemente ineinander zu verschachteln.

6. HTML Elemente ineinander verschachteln

Bisher hast du in diesem Beitrag die HTML Elemente b und u kennengelernt, welche uns ermöglichen, Text fett zu drucken und diesen zu unterstreichen.

Man kann auf einen bestimmten Inhalt auch beide Tags gleichzeitig anwenden. Das funktioniert, indem man sie ineinander verschachtelt.

Wenn man also möchte, dass der Text „Willkommen in“ nicht nur unterstrichen, sondern zusätzlich fett gedruckt ist, dann ergänzt man folgendermaßen das b-Tag:

<u><b>Willkommen in</b></u>

Wichtig ist hierbei, dass man auf die korrekte Reihenfolge achtet.

Das Tag, das wir zuletzt geöffnet haben, schließen wir wieder zuerst.

Da das b-Tag zuletzt geöffnet wurde, wird es auch zuerst wieder geschlossen.

Wenn wir das Ganze nun speichern und neu laden, sehen wir, dass es tatsächlich funktioniert:

Die ersten beiden Wörter sind jetzt sowohl unterstrichen als auch fett gedruckt.

Mit den HTML-Elementen hast du auch schon den wichtigsten Grundbaustein von HTML kennengelernt. Durch die heute gesammelten Kenntnisse bist du an dieser Stelle also ideal auf die kommende Lektion vorbereitet.

3. Ein neues Projekt anlegen

In VS Code ist ein Projekt ein Ordner. Wir legen nun also beispielhaft auf dem Desktop einen Ordner an und nennen diesen „htmlyoutube“.

In diesem Ordner werden wir all unsere HTML-Dateien ablegen. Obwohl darin aktuell noch keine Dateien enthalten sind, können wir den Ordner bereits über VS Code öffnen.

Hierzu klicken wir links auf den Button „Open Folder“:

Falls die Leiste samt Button bei dir nicht angezeigt werden sollte, klicke links oben auf das Datei-Icon. Damit erscheint unmittelbar der sogenannte Explorer.

Nachdem wir auf „Open Folder“ geklickt haben, wählen wir den gerade erstellten Ordner „htmlyoutube“ auf dem Desktop aus.

Dass der Ordner in VS Code geöffnet ist, erkennt man daran, dass dessen Name im Explorer erscheint:

Aktuell ist dieser Ordner noch leer. Das ist auch der Grund, weshalb uns das Programm hier nichts Weiteres anzeigt.

Um das zu ändern, erzeugen wir an dieser Stelle unsere erste HTML Datei. Hierzu klicken wir auf das Datei-Symbol, womit wir eine neue Datei im Ordner erzeugen.

Dieser Datei müssen wir nun einen Namen geben. Für unser Beispiel nennen wir sie index.html.

Wie du die Datei nennst, spielt keine Rolle. Die Startseite einer Webseite trägt in der Regel immer den Namen „index“, weshalb ich diesen Namen auch ausgewählt habe.

Ganz wichtig ist aber: Die Dateiendung .html.

Ebenso gültig wäre .htm für HTML-Dateien. Allerdings ist .html die gängigere und empfehlenswerte Variante.

Bei einer Datei mit der Endung .html weiß der Webbrowser direkt, dass es sich um eine HTML Datei handelt und kann diese entsprechend verarbeiten.

Damit weißt du auch schon, wie man neue einsatzbereite HTML-Dateien erzeugen kann. Noch einmal kurz zusammengefasst:

1. Klicke auf das Icon „New File“
2. Gib der Datei einen Namen und füge die Endung .html an

Wie du sehen kannst, ist diese Datei nun rechts im Editor geöffnet.

Man kann eine Datei über das Kreuz-Symbol oben schließen und über den Explorer mit einem Klick darauf wieder öffnen.

Aktuell befindet sich in dieser Datei noch kein Inhalt. Um das zu ändern, schreiben wir beispielhaft etwas Text hinein:

Danach speichern wir die Änderung mit STRG + S auf Windows oder CMD + S auf dem Mac.

4. HTML Datei über den Webbrowser öffnen

Wenn wir nun auf den Ordner auf dem Desktop klicken, sehen wir darin tatsächlich die index.html-Datei und können sie über einen Webbrowser öffnen. Ich selbst verwende Google Chrome, welchen ich dir wärmstens empfehlen kann, da er zahlreiche Entwicklerwerkzeuge zur Verfügung stellt, die später noch hilfreich werden.

Um die Datei nun im Webbrowser zu öffnen, macht man darauf einen Rechts-Klick und öffnet sie über den gewünschten Browser:

Alternativ kannst du auch den Browser öffnen und die Datei darauf ziehen.

Daraufhin öffnet sich im Browser ein Tab mit unserer index.html-Datei. Den Text, den wir zuvor in VS Code in diese Datei geschrieben haben, sehen wir nun auch im Browser:

Was dir aber vielleicht schon direkt auffällt, ist Folgendes:

Während wir in unserer Datei Zeilenumbrüche gesetzt haben und die letzten beiden Wörter jeweils in einer separaten Zeile stehen, stellt der Webbrowser das ganz anders dar.

Das liegt daran, dass wir mit der Dateiendung .html festlegen, dass der Browser die Datei als HTML Datei interpretieren soll.

In HTML müssen wir einen Zeilenumbruch beispielsweise explizit über ein sogenanntes HTML-Element angeben. 

Da wir das in unserem Beispiel nicht getan haben, sehen wir folglich auch keinen Zeilenumbruch in der Darstellung des Webbrowsers. Wir haben es also mit keinem Fehler zu tun.

Damit hast du also schon mal gelernt, wie man eine HTML Datei (engl. HTML-file) einfach erzeugen kann. Zudem hast du erfahren, dass sich diese anschließend auf den Webbrowser ziehen lässt, um den Inhalt der Datei dort anzeigen zu lassen. Wir haben damit eine wichtige Basis für die folgenden Beiträge geschaffen.

Im nächsten Blogartikel werden wir an dieser Stelle anknüpfen und uns ansehen, wie die grundlegende HTML-Syntax aussieht. Denn wie bereits erwähnt, müssen wir sogenannte HTML-Elemente verwenden, um die Struktur einer Website zu definieren.

Jetzt beginnt es also langsam, spannend zu werden!

3. Ist HTML eine Programmiersprache?

Ich habe HTML in den vorherigen Absätzen bewusst als „Sprache“ und nicht als „Programmiersprache“ bezeichnet.

Denn: HTML ist keine Programmiersprache.

Anfänger denken das häufig, aber dem ist nicht so. Denn eine Programmiersprache zeichnet sich dadurch aus, dass man damit eine gewisse Logik implementieren kann. Logik bedeutet, dass man beispielsweise innerhalb des eigenen Programmcodes Entscheidungen treffen kann.

Ein Logik-Beispiel:
Man kann festlegen, wie sich das Programm verhalten soll, wenn bestimmte Bedingungen darin wahr oder falsch sind.

HTML ist dazu nicht in der Lage und ist folglich auch keine Programmiersprache, sondern eine Auszeichnungssprache. Das hat den schönen Vorteil, dass es komplett textbasiert ist.

4. Wie kann man HTML in der Praxis verwenden?

Man benötigt grundsätzlich weder ein besonderes Programm, noch muss man etwas herunterladen, um HTML-Dokumente zu erzeugen. Ein HTML-Dokument ist nämlich nichts anderes als eine einfache Text-Datei mit der Endung .html im Namen.

Somit ist es möglich, mithilfe eines beliebigen Texteditors (bspw. Notepad auf Windows oder TextEdit auf Mac) eine solche Datei zu erstellen. Diese Dateien sind deshalb so wichtig in der heutigen Zeit, weil nahezu jede Internetseite HTML verwendet und sie innerhalb eines Webbrowsers angezeigt werden können.

5. So sieht HTML aus

Auf der folgenden Abbildung siehst du das Beispiel einer HTML-Datei, die bereits Inhalte enthält. Dass du diese im Moment vielleicht noch nicht verstehst, ist an dieser Stelle nicht weiter schlimm. Schließlich wirst du das Ganze bei uns noch Schritt für Schritt lernen.

Wir können diese Datei über unseren Webbrowser öffnen. Ob du dafür Google Chrome, Firefox, Edge oder einen anderen Webbrowser verwendest, spielt dabei keine Rolle. Denn eines haben alle gemeinsam:

Sie können HTML-Dateien anzeigen.

Wenn wir die Datei nun in den Webbrowser ziehen und öffnen, zeigt uns dieser auch schon deren Inhalt an bzw. auf der folgenden Abbildung einen Ausschnitt davon:

Wie du siehst, gibt HTML den Grundaufbau einer Website vor, indem es die Inhalte festlegt, die darauf erscheinen sollen. Also beispielsweise Texte, Überschriften, Paragrafen und Links.

Was aber auch sofort auffällt: HTML allein sieht ziemlich hässlich aus.

Mit einer Website, die aussieht, als wäre sie in den 90ern entstanden, kann man heutzutage wohl nicht mehr punkten. Und genau an dieser Stelle kommt CSS ins Spiel.

6. Was ist CSS?

CSS ist eine Gestaltungs- und Formatierungssprache für HTML. Die Abkürzung CSS steht für Cascading Style Sheets. Man kann damit eine Seite visuell gestalten.

Noch mal kurz zusammengefasst:

• HTML gibt die Struktur einer Website vor und definiert, was auf einer Website zu sehen ist.
• CSS gibt das Aussehen einer Website vor und stylt den Content, der durch HTML vorgegeben ist.

Dank CSS kann man den langweiligen HTML-Seiten Leben einhauchen und sie nach dem eigenen Geschmack designen und formatieren. Zu den Gestaltungsmöglichkeiten zählen unter anderem:

• das Anpassen der Farben für Wörter und Überschriften
• das Festlegen des Layouts für einzelne Textelemente
• die Einstellung der Schriftgröße
• etc.

Weiter oben haben wir bereits den Ausschnitt eines Beispiels für eine HTML-Seite gesehen. Dieses Beispiel kann man jetzt mithilfe von CSS stylen. Das Ergebnis kann zum Beispiel folgendermaßen aussehen:

Wie durch Magie hat sich die langweilige Seite aus den 90ern mithilfe von CSS in eine moderne und professionelle Website der heutigen Zeit verwandelt! Wie das genau funktioniert, wirst du noch in den kommenden Blogbeiträgen dieser Serie erfahren.

HTML- und CSS-Kenntnisse sind für jeden Programmierer wichtig.

Schließlich sind das die Grundpfeiler von allem, was mit dem Web zu tun hat. Aus dem Grund ist es schon mal super, dass du auf diesen Blogbeitrag gestoßen bist und dich mit dem Thema auseinandersetzt.

7. Wie starte ich am besten in die Webentwicklung?

Jetzt, wo du weißt, wie eine Website aufgebaut ist, stellt sich womöglich die Frage:

Wie und wo fange ich an?

Wenn du eigene Webseiten entwickeln möchtest, könntest du nach dem folgenden Plan vorgehen:

• Schritt 1: Arbeite diese HTML-Reihe vollständig durch
• Schritt 2: Sobald du HTML verstanden hast, ist es an der Zeit, CSS zu lernen und deine Inhalte damit zu stylen
• Schritt 3: Beschäftige dich mit JavaScript

8. Wofür benötigt man JavaScript?

Mit der Programmiersprache JavaScript kann man Logik auf der eigenen Website implementieren.

Dadurch lässt sich beispielsweise ein Log-in-System oder eine Warenkorb-Funktion auf einer Webseite einbauen. Zudem können über simple JavaScript Code Snippets auch unterschiedlichste Webanalyse und Tracking Tools (z.B. der Google Tag Manager) auf Webseiten eingebunden werden. Im Endeffekt gibt es tausende Anwendungsbereiche für JavaScript.

Mehr dazu wirst du aber noch grundlegend der Reihe nach in den kommenden Beiträgen lernen.