Zu Beginn möchte ich sagen, HTML ist nicht wirklich eine Programmiersprache. Mit HTML code kann man vorgeben, wie eine Website strukturiert ist. Jedoch kann man in HTML keine Variablen setzen, oder Schleifen programmieren, man kann allerdings mit anderen Sprachen wie z.B. Javascript auf das DOM (Document Object Model) zugreifen.
Wie lernt man am besten HTML?
Wie auch bei anderen Sprachen, lernt man HTML am besten in dem man selbst ein Projekt umsetzt. Einige Tutorials können zwar hilfreich sein, aber seine eigene Seite in HTML aufzubauen wird den Lernprozess beschleunigen.
Beim den ersten Versuchen mit HTML eignet sich ein Online HTML Editor wie dieser hier: https://html-online.com/editor/
Damit muss man nicht ständig das Dokument refreshen wenn man mit localhost arbeitet.
Wie schaut ein HTML Dokument aus?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Das erste HTML Dokument</title>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<p>Der erste Satz in HTML</p>
</body>
</html>
HTML Projekte für Anfänger
- Eigene Homepage
- Taschenrechner (mit Javascript)
Das Internet bietet mittlerweile sehr viele Möglichkeiten und gehört zu Recht zu den größten Informationsquellen. Damit ein Webbrowser wie beispielsweise Google Chrome oder auch Mozilla Firefox den Inhalt einer Website wiedergeben kann, benötigt dieser HTML.
Was HTML eigentlich ist und wie ihr damit am besten startet, zeigen wir euch im folgenden Ratgeber. Viel Spaß beim Lesen.
Was ist HTML?
Jede Website, die man im Internet finden kann, basiert auf HTML. Hierbei handelt es sich um eine Abkürzung, die für Hypertext Markup Language steht. Streng genommen ist HTML keine Programmiersprache, sondern eine Auszeichnungssprache, wobei es sich durchaus wie programmieren anfühlt.
Um mit HTML starten zu können, reicht bereits ein simpler Texteditor wie Notepad, wobei sich vor allem für große Projekte, Komplettlösungen wie Microsoft Expression Web oder Eclipse besser eignen. Damit eure Website allerdings vom Webbrowser auch gelesen werden kann, muss diese die Endung .html oder .html besitzen.
Alternativ gibt es auch noch kostenlose Online-Editoren, wie diesen hier: https://html-online.com/editor/
Die Geschichte von HTML
HTML wurde ab 1989 entwickelt und erblickte 1992 das Licht der Welt. Das Ziel dahinter war nicht das World Wide Web, denn das gab es zu dieser Zeit noch nicht, sondern es sollten Forschungsergebnisse vergleichbar und zugänglich gemacht werden. Aus diesem Gedanken entwickelte sich dann das Internet wie wir es heute kennen und auch HTML entwickelte in der Folge deutlich weiter.
Überblick über die einzelnen Versionen
Im Laufe der Entwicklung hat sich HTML stets weiterentwickelt, wobei wir hier einmal eine kurze Übersicht geben wollen:
– HTML von 1992 (ohne Nummer und gibt nur Text wieder)
– HTML von 1993 (ohne Nummer, gibt jetzt auch Bilder und kursive Schrift aus)
– HTML+ (geplant, aber nie erschienen)
– HTML 2.0 von 1995 (kann jetzt auch Formulare darstellen)
– HTML 3.0 (nie erschienen)
– HTML 4.0 von 1997 (Stylesheets und Skripte werden eingeführt)
– HTML 4.0.1 von 1999 (ergänzte die Version 4.0 um kleinere Korrekturen)
– HTML 5.0 von 2014 (erschuf ein neues Vokabular und das DOM Management wurde eingeführt)
– HTML 5.1 von 2016 (kleinere Verbesserungen im Vergleich zu 5.0)
– HTML 5.2 von 2017 (kleinere Verbesserungen und aktuell genutzte Version)
HTML: so beginnt ihr mit der Programmierung
HTML besitzt seine eigene Syntax, das heißt der Text kann nicht einfach in ein Textdokument eingegeben werden, sondern benötigt eine gewisse Form. Während wir Menschen durch Absätze, Leerzeichen und Überschriften wissen, wie man einen Text zu hat, weiß das der Browser nicht.
Wenn jetzt beispielsweise eine Überschrift und weiterer Text einfach eingegeben wird, erkennt das der Browser nicht und würde es einfach in einer Zeile ausgeben. Damit genau das nicht der Fall ist und der Browser weiß, wie man die folgenden Zeichen zu lesen hat, gibt es die Syntax welche aus einem offenen und geschlossenen Tag (<> und </>) besteht.
Die Grundstruktur einer Website auf Basis von HTML 5 sieht dabei wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Das html Attribut leitet hierbei eure Website ein und schließt alle Werte innerhalb dessen ein. Im head Bereich kommen Attribute, die selbst nicht auf der Website erscheinen, wie beispielsweise title, das den Titel im Browser anzeigt, wenn ihr die Website öffnet. Darüber hinaus werden im head auch noch andere Bereiche eingebunden, wie beispielsweise eine Javascript-Abfrage (diese ist zu Beginn allerdings noch nicht wichtig).
Im body kommt der Inhalt der eigentlichen Website. Hierzu gehören beispielsweise Überschriften, die in absteigender Reihenfolge mit h1 usw. abgekürzt werden. Mit dem p wird eine Textzeile als Absatz eingefügt. Dank des br Tag kann eine Zeile an einer bestimmten Stelle gebrochen werden.
Das ist selbstverständlich alles etwas verwirrend, daher gibt es hier einmal eine Auflistung der wichtigsten Tags.
– html: Leitet eure Website ein
– head: Der Kopfbereich eurer Website und gibt beispielsweise euren Webseitentitel an
– title: Zeigt den Titel eurer Website an
– body: Innerhalb dessen kommen alle wichtigen Tags, die den Text eurer Website formatieren
– p: Gibt den Text als reinen Text aus
– h1: Dient als Hauptüberschrift, dann absteigend (bspw. h2, h3, usw.)
– ol: Leitet eine sortierte Liste
– li: Ein Listeneintrag
– ul: Gibt eine unsortierte Liste aus
Learning by Doing: So gelingt der Start
Wenn ihr jetzt die HTML Programmiersprache lernen wollt, dann klappt das am besten, indem ihr einfach beginnt, denn nichts ist besser als einmal anzufangen. Hierzu nehmen wir zuerst einmal unsere obige Struktur und beginnen diese auszufüllen.
Zuerst füllen wir den title aus, indem wir zwischen die beiden Tags „Meine erste Website“ schreiben. Damit ist der erste Schritt getan und so wollen wir uns den body einmal anschauen, denn hier steht noch nichts.
Also fügen wir zunächst mit dem p eine Zeile hinzu und schreiben dort „Willkommen auf meiner eigenen Website, hier findet ihr folgendes:“
Schauen wir uns unser Beispiel doch einmal an:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Website</title>
</head>
<body>
<p>Willkommen auf meiner eigenen Website, hier findet ihr folgendes:</p>
</body>
</html>
Wundert euch nicht über die Einrückung, diese machen wir zur Übersicht, kann aber auf Wunsch auch weggelassen werden.
Jetzt wollen wir noch eine unsortierte Liste einfügen und unser p-Text soll zur Überschrift formatiert werden:
<ul>
<li>Mein Steckbrief</li>
<li>Meine Hobbys</li>
<li>Meine Urlaubsorte</li>
<ul>
Hierbei ist es wichtig, alle Listenpunkte innerhalb dem öffnenden und schließenden Tag einzufügen, da es ansonsten zu Fehlern kommt. Jetzt formatieren wir noch unseren Text als Überschrift:
<h2>Willkommen auf meiner eigenen Website, hier findet ihr folgendes:</h2>
Insgesamt sollte eure Website jetzt so ausschauen:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Website</title>
</head>
<body>
<h2>Willkommen auf meiner eigenen Website, hier findet ihr folgendes:</h2>
<ul>
<li>Mein Steckbrief</li>
<li>Meine Hobbys</li>
<li>Meine Urlaubsorte</li>
<ul>
</body>
</html>
Speichert jetzt eure Seite doch einmal als Website.html ab und bestaunt euer erstes Ergebnis. Ihr seid schon eine Stufe weiter, dann schaut euch doch unser Javascript Tutorial an.
Keine Lust auf HTML?
WordPress Seiten können auch mit einem PageBuilder wie Elementor erstellt werden.
- Drag & Drop Editor
- Viele Widgets
- keine Programmierkenntnisse notwendig
Weitere Beiträge:
Optimale Ladezeit Website – wie schnell sollte sie sein?
Die optimale Ladezeit deiner Website Du besitzt eine eigene Homepage, du bist bereits über die Planungs- und Konzeptionsphase hinaus und deine Website steht so weit
