Inhaltsverzeichnis
Nachdem du im ersten Teil dieser Reihe bereits ausführlich gelernt hast, was HTML überhaupt ist, werden wir in diesem Beitrag jetzt damit beginnen und das ganze Thema mal zum Anfassen anzusehen.
Entwicklungsumgebung installieren – HTML lernen
Wir werden also eine Entwicklungsumgebung installieren, dort werden wir unser Projekt anlegen und eine erste HTML-Datei erzeugen. Lass uns also direkt rein starten! Zuvor noch der kurze Hinweis: Du kannst unsere Programmieren-Lernen-Komplettlösung auf unserer Lernplattform okurs.de aktuell vollkommen kostenlos testen. Mit Premium erhältst du nämlich Zugriff auf alle unsere Kurse, die insgesamt weit über 1.000 Videos umfassen. Du lernst dort unter anderem, wie du komplette Webprojekte wie beispielsweise diese Lieferantendienst-Webanwendung von Grund auf selbst programmieren kannst. Wenn dann doch mal Fragen aufkommen sollten, dann steht sogar ein tolles Community-Forum für dich bereit. Wenn du also wirklich das Programmieren lernen möchtest, dann schau unbedingt mal bei Premium vorbei!
So, im Intro hatte ich bereits erwähnt, dass wir in diesem Beitrag jetzt erstmal gemeinsam eine Entwicklungsumgebung installieren werden. Und wenn du den ersten Teil dieser Reihe gelesen hast, dann verwundert dich das jetzt vielleicht ein bisschen, denn dort hatte ich ja geschrieben, dass das Coole an HTML ist, dass es textbasiert ist und wir im Prinzip nichts auf unserem Computer installieren müssen, um eben HTML-Dateien zu erzeugen. Und das ist auch korrekt, denn man könnte einfach einen simplen Texteditor öffnen, auf Windows beispielsweise Notepad oder einen anderen vorinstallierten Editor oder in meinem Fall auf einem Mac zum Beispiel TextEdit, und dann könnte man hier einfach sein HTML reinschreiben, das Ganze als Punkt-HTML-Datei abspeichern, und dann hätte man ebenfalls eine gültige HTML-Datei.
In der Praxis arbeitet aber kein Programmierer mit einem simplen Texteditor, und zwar weil eine Entwicklungsumgebung wie beispielsweise Visual Studio Code (kurz: VSCode) den Workflow massiv beschleunigt. Das wirst du spätestens in den noch folgenden Videos dieser Reihe selbst erfahren. Genau aus diesem Grund werden wir uns jetzt im ersten Schritt mal gemeinsam die Entwicklungsumgebung VSCode installieren.
VSCode installieren – HTML Lernen
Hier direkt der Hinweis: Denn ich weiß, diese Frage wird irgendwann in den Kommentaren aufkommen. Ja, du kannst auch jede andere Entwicklungsumgebung deiner Wahl verwenden. In diesem Kurs werden wir beispielhaft einfach nur mit VSCode arbeiten, da ich VSCode persönlich sehr gerne nutze und es dir eben auch wärmstens empfehlen kann. Aber wie gesagt, auch jeder andere Texteditor oder jede andere Entwicklungsumgebung wäre hier auf jeden Fall eine Option und du kannst damit dann auch arbeiten. Es ist im Endeffekt nur eine persönliche Präferenz.
Um dir VSCode herunterzuladen, öffnest du jetzt mal in einem Webbrowser zunächst mal die Internetseite codepunkt.visualstudio.com/download.
Im nächsten Schritt werden wir nun unsere erste HTML-Datei erzeugen. Dazu klicken wir in der linken Seitenleiste auf „New File“, geben der Datei den Namen „index.html“ und speichern sie im Ordner „HTML Bremer Community“. Jetzt können wir unsere erste Zeile HTML-Code schreiben:<!DOCTYPE html>
Dieser Code gibt an, dass wir eine HTML-Datei schreiben und dass diese nach dem HTML5-Standard geschrieben wird.
Als nächstes schreiben wir den HTML-Grundgerüst-Code, der in jeder HTML-Datei enthalten sein sollte:
HTML Grundgerüst – HTML Lernen
<html>
<head>
<title>HTML Lernen - Bremer-Community.de</title>
</head>
<body>
<h1>Willkommen beim HTML Lernen von Frank Panzer</h1>
<p>HTML ist eine Markup-Sprache, mit der Webseiten erstellt werden.</p>
</body>
</html>Dieser Code definiert den Anfang und das Ende des HTML-Dokuments. In den <head>-Tags können wir Informationen über unsere Seite einfügen, wie zum Beispiel den Titel, der im Browser-Tab angezeigt wird. Im <body>-Tag wird der eigentliche Inhalt der Webseite geschrieben.
Bedeutung der einzelnen Tags – HTML Lernen
Jetzt können wir unserem <body>-Tag ein paar HTML-Elemente hinzufügen, zum Beispiel einen Titel und einen Absatz:<html> <head> <title>HTML Lernen – Bremer-Community.de</title> </head> <body> <h1>Willkommen beim HTML Lernen von Frank Panzer</h1> <p>HTML ist eine Markup-Sprache, mit der Webseiten erstellt werden.</p> </body> </html>
Mit <h1>-Tags können wir Überschriften definieren, hier haben wir eine Überschrift der höchsten Ebene gewählt. Mit <p>-Tags können wir Absätze definieren.
Schlusswort – HTML Lernen
So, das war’s erstmal für diesen Teil. In diesen Beitrag haben wir gemeinsam eine Entwicklungsumgebung installiert und unsere erste HTML-Datei erzeugt. Wir haben gelernt, wie man den HTML-Grundgerüst-Code schreibt und wie man HTML-Elemente hinzufügt. Im nächsten Teil werden wir uns mit weiteren HTML-Elementen beschäftigen und lernen, wie man Text formatiert.
