Homepage direkt in HTML & CSS Code erstellen
Jede Homepage besteht letztlich aus HTML und CSS Quellcode. Der Unterschied besteht lediglich darin, wie dieser Code erzeugt wird. Bei Webseiten, die mit einem CMS oder Homepage Baukasten erstellt wurden, wird dieser Code dynamisch erstellt. Jedesmal, wenn ein Nutzer eine solche Webseite aufruft, erzeugt das CMS aus der Design-Vorlage und den Datenbankinhalten den entsprechenden HTML und CSS Quellcode. Alternativ kann man eine Internetseite aber auch ohne CMS direkt in HTML & CSS Code erstellen.
Was ist HTML? Welche Rolle spielt CSS?
HTML ist für die Strukturierung von Informationen zuständig, CSS übernimmt das Layout und legt die grafische Darstellung auf dem Bildschirm fest. Bei HTML handelt es sich nicht um eine Programmiersprache, sondern eine Auszeichnungssprache. Zunächst besteht eine Webpage aus Text. Mit Hilfe von HTML wird dieser Text strukturiert. So lassen sich bspw. Überschriften und Absätze als solche Auszeichnen und Elemente wie Bilder und Videos einbinden. Wie diese Überschriften, Absätze und anderen Elemente aussehen, legt wiederum der zugehörige CSS Code fest.
Das ist allerdings eine sehr vereinfachte Darstellung. Denn neben Absätzen, Überschriften und Bildern sind für die meisten Webseiten auch noch Navigationsmenüs, Buttons, Hintergründe etc. notwendig, die auch noch entsprechend angeordnet werden müssen. Nicht zuletzt soll sich die Webseite automatisch an die Bildschirmgröße anpassen, damit sie auf Smartphones ebenso nutzbar ist, wie auf großen Bildschirmen.
Elemente und Tags
Tags sind Buchstabenkürzel in eckigen Klammern, die den Inhalt umschließen. Die Kombination aus Tags und Inhalt wird dann als Element bezeichnet. Zu den wichtigsten HTML-Tags, mit denen sich Einsteiger beim Erstellen einer eigenen Webpage vertraut machen müssen, gehören die Tags zum Erstellen von Absätzen und Links sowie zur Einbindung von Bildern und Grafiken.
Um einen längeren Text auf der Homepage in mehrere Absätze zu unterteilen, werden die Absätze in der Regel durch p-Tags umschlossen. Links werden durch a-Tags festgelegt, wobei dem öffnenden Tag das Ziel der Verlinkung zugewiesen wird. Die Tags zum Anzeigen von Bildern funktionieren ähnlich wie das Definieren von Links. Um ein Bild auf der Webseite anzuzeigen, wird die Adresse des Bildes angegeben.
Wenn das Funktionsprinzip von HTML-Tags einmal verstanden wurde, stellt der Rest keine große Hürde mehr dar.
CSS: Layout & Design
Das Internet ist in erster Linie ein visuelles Medium. Egal wie gut die Informationen auf einer Webpage inhaltlich auch sein mögen, eine saubere und für den Besucher ansprechende Darstellung ist mindestens genauso wichtig. Hierfür stehen die sogenannten Cascading Style Sheets, kurz CSS zur Verfügung. Mit CSS wird die grafische Darstellung von HTML-Elementen festgelegt.
Soll ein Bild zum Beispiel einen Rahmen von einem Pixel Breite erhalten, wird dies per CSS definiert. Auch Links, Tabellen, Absätze und andere Elemente können mit CSS angepasst werden.
Eine vollständige Übersicht und Tutorials zu HTML & CSS ist bei SELFHTML zu finden.
HTML-Quellcode-Editoren
HTML-Editoren sind im Prinzip normale Texteditoren, die zusätzliche Funktionen für die Verwendung von HTML bieten. Hierzu gehört meist die farbige Darstellung der verwendeten HTML-Tags. Oft müssen die Tags nicht manuell eingegeben werden, sondern lassen sich mit Tastaturkürzeln einfügen. Sehr hilfreich ist auch die Funktion, mit der ein geöffneter HTML-Tag automatisch geschlossen wird, was vielen ärgerlichen Flüchtigkeitsfehlern beim Coden vorbeugen kann. Viele Editoren zudem einen integrierten FTP-Client, mit dem der Quellcode auf Knopfdruck bequem auf den Webspace hochgeladen werden kann.