HTML lernen

Wenn man meine Homepage sieht, ist das erste, was einem auffällt wahrscheinlich:
ist das erste, was einem auffällt, wahrscheinlich:
Ich habe keine Ahnung von CSS und eigentlich auch HTML (und JavaScript, aber das kommt viel später).

Daher notiere ich mir hier alles, was ich erstmal zu HTML lerne, gängige Fehler, die ich gemacht habe, oder einfach nur Informationen. Wenn einiges an Material zusammen gekommen ist, werde ich hier ein richtiges Tutorial basteln.

Bis dahin oder um einfache Informationen zu bestimmten Tags nachzuschlagen, eignet sich diese Dokumentation sehr gut dazu.

Die harte Arbeit vorab

Bevor ich überhaupt die Idee entwickelte, eine eigene Homepage zu basteln, dachte ich, eine Website online zu stellen sei ein Kinderspiel. Oh boy was I wrong...

Ich habe bei der Domain angefangen. Wie soll die URL der Website lauten? Bei mir lautet die Domain "tinkastime.de", also ich wollte meine Website unter "www.tinkastime.de" erreichen. Glücklicherweise war diese Adresse unbenutzt und so konnte ich bei IONOS mir die Domain "tinkastime.de" kaufen.
Anmerkung: Einige Fachbegriffe werden Themenübergreifend verwendet oder mehrere Wörter beschreiben das gleiche. Ich blicke da selbst noch nicht ganz durch.

Was ich nicht wusste, die Website muss irgendwo gehostet werden und anders als eine Domain, wurden Hostings für relativ viel Geld angeboten. Ich habe sehr oft gelesen, dass man einfach einen eigenen Server aufsetzen könnte, aber davon hatte ich noch weniger Ahnung. Am Ende erfuhr ich von Github Pages und da ich schon einen Github Account besaß und mich mit Git doch etwas auskannte, wird meine Website von Github gehostet. Vielen Dank Github! Hier das Tutorial.

HTML Dateien erstellen

Ich benutze zum Programmieren normalerweise Visual Studio Code (Download-Link). Hat man sich dazu entschieden, wo die Dateien gespeichert werden soll, öffnet man den Ordner, der in VSC als "Explorer" bezeichnet wird. Neue Dateien lassen sich hier ganz einfach erstellen, wobei nach dem Dateinamen das ".html" kommen muss (z.B. "index.html").
Die Extension "open in browser" von TechER erlaubt es mir, die HTML Datei im Browser zu öffnen und gibt mir so ein gutes, visuelles Feedback.

Wenn ich meine HTML Datei überarbeite und speichere, lässt sich die lokale Website durch das einfache "Neu laden" sofort aktualisieren, aber damit die Website im Internet aktualisiert wird, muss man seine Änderungen auf Github commiten und dann eine Zeit lang warten. Also commite lieber nach kleinen Meilensteinen und bearbeite Kleinigkeiten lokal.

Die ersten HTML-Tags

<!DOCTYPE html> - Muss in der ersten Zeile des HTML-Dokuments stehen, da sie dem Computer klar macht, dass es sich hier um ein HTML-Dokument handelt.
<html> </html> - Ist der erste Tag, in dem alle anderen Tags enthalten ist.
<body> </body> - Ein HTML-Dokument teilt sich in zwei Teile auf, dem Head-Teil und dem Body-Teil. Nur der Body-Teil ist der sichtbare Teil, der auf der Website dargestellt wird.
<h1> </h1> - Text innerhalb dieser Tags werden als Überschrift dargestellt
<p> </p> - Text innerhalb dieser Tags werden als Paragraph angezeigt.
<br> - Fängt innerhalb eines Paragraphen eine neue Zeile an. Zwei <br> hintereinander sorgen dementsprechend für eine leere Zeile, aber ein neuer <p>-Abschnitt hat den selben Effekt.
Die eckigen Klammern < > werden von HTML benutzt, um Tags zu erkennen. Um die Zeichen trotzdem im <p> anzeigen zu lassen, braucht es &lt und &gt.
<a href="Link">Text</a> - Gibt einen Link an, der mit href gesetzt wird. In dem <a>-Tag steht der Text, der anstelle der URL angezeigt werden soll. Zwischen den <a>-Tags steht der Text, der anstelle der URL angezeigt werden soll. Vergiss das > zwischen dem Link und dem Text nicht.
<ul> </ul> - Erzeugt eine unsortierte Liste. Die Listenelemente werden in der Reihenfolge dargestellt, wie sie im HTML-Dokument niedergeschrieben wurden.
<li> </li> - Alle Listenelemente müssen jeweils in diesen Tags stehen.

Inline- und Block-Elemente

HTML-Elemente können inline oder blockartig sein. Das hat einen Einfluss darauf, wie die Elemente auf der Website positioniert werden. Blockartige Elemente werden immer in einer neuen Zeile eingefügt und ihre Breite erstreckt sich über die ganze Website.
Daher lässt sich mein Inhaltsverzeichnis nicht so einfach neben den Text platzieren, da sowohl <p> als auch <ul> und <li> Block-Elemente sind.