Homepage mit HTML erstellen

HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. Sie ist die grundlegendste Sprache, auf denen Homepages aufbauen. HTML dient dazu, um beispielsweise eine Überschrift für Browser wie den Internet Explorer oder Suchmaschinen unterscheidbar zu Fließtext, Bildern oder anderen Inhalten zu machen. Dazu werden sogenannte Tags verwendet. Eine Hauptüberschrift wird zum Beispiel von den öffnenden und schließenden Tags <h1> und </h1> umschlossen. Der HTML Code für eine Hauptüberschrift lautet also <h1>Meine Überschrift</h1> . Dadurch können Browser diese Überschrift in Fettdruck, mit größeren Buchstaben und einem gewissen Abstand zum Fließtext darstellen, sodass der Besucher der Homepage auch erkennt, dass es sich um eine Überschrift handelt. Auch Suchmaschinen, die nur den Code scannen, aus dem eine Website besteht, können so eine Überschrift entsprechend schwerer gewichten.

Vereinfacht ausgedrückt kann man sich ein HTML Dokument wie ein Textdokument in einem Programm wie Microsoft Office vorstellen. Ein solches Dokument stellt nur rudimentäre Elemente wie bereits genannte Überschriften unterschiedlicher Rangordnung, Aufzählungen in Punkt-, Strich- oder nummerierten Listen oder Tabellen bereit. Und ein solches Dokument „tut“ auch nichts. Um einer Homepage eine gewisse Interaktivität zu ermöglichen, also beispielsweise unterschiedlich auf richtige oder falsche Eingaben in Formularen reagieren zu können, benötigt man „echte“ Programmiersprachen. Um die in Formulare eingegeben Daten zu speichern (zum Beispiel bei einer Bestellung bei einem Online Shop), oder mit vorhandenen Daten zu vergleichen (zum Beispiel Benutzername und Passwort bei einem Login), benötigt man eine Datenbank. Und um der Website ein grundlegendes Design zu verleihen, was Farbgebung, Positionierung oder Größe unterschiedlicher Elemente auf der Homepage angeht, benötigt man mindestens Kenntnisse in CSS.

Um eine reine HTML Website zu erstellen genügen ein Browser und ein auf Programmiersprachen ausgelegter Editor, zum Beispiel das kostenlose Notepad++. Mit solch einem Editor kann auch Code in anderen Sprachen wie CSS oder PHP geschrieben werden. Alternativ können professionelle Entwicklungswerkzeuge wie das Programm Deamweaver von Adobe verwendet werden. Diese haben eine grafische Oberfläche im Gegensatz zu Editoren wie Notepad++, in die der Text von Hand eingegeben wird. Dreamweaver ist allerdings kostenpflichtig.

Während schlichte Webseiten, die auf HTML und CSS basieren, ohne Weiteres im Browser auf dem lokalen PC geöffnet werden können, benötigen manche Programmiersprachen wie PHP eine Serverumgebung, um zu funktionieren. Hier kann man entweder die Programmierung der Website direkt auf dem Server vornehmen, auf dem man die Website veröffentlicht, wozu man allerdings bereits die Web Dienste Server und Domain gebucht haben muss. Oder man installiert sich auf dem heimischen PC eine Entwicklungsumgebung wie XAMPP, die quasi einen virtuellen Server bereitstellt, und entwickelt die Homepage offline.

Nein. Eine reine HTML Homepage ist von den Funktionen her weder sonderlich umfangreich noch vom Design her ansprechend. Im modernen Web Design werden unter anderem Datenbanken, PHP, CSS, JavaScript und jeweils dazugehörige Frameworks und Bibliotheken eingesetzt. Es gibt also zwei Alternativen dazu, eine Homepage selbst zu programmieren und sich das Wissen in all diesen Bereichen anzueignen. Einerseits kann man sich die Homepage von einem professionellen Dienstleister programmieren lassen. Als Kostenpunkt sollte man hierfür ein Minimum von ca. 1.000 Euro veranschlagen. Das ist für viele Projekte von Privatpersonen oder kleineren Unternehmen entweder nicht angemessen oder auch schlicht nicht finanzierbar. Andererseits kann man auf einen Homepage Baukasten zurückgreifen.

Der Homepage-Baukasten

Ein Homepage Baukasten hat den Vorteil, dass alle modernen Programmiersprachen und -techniken zur Verfügung stehen und genutzt werden können, ohne dass man dafür selbst Programmier-Kenntnisse mitbringen muss. Die Bedienung eines solchen Baukastens erfolgt zu weiten Teilen komfortabel mit der Maus. Der erforderliche Programmcode für die Homepage wird automatisch vom Baukasten im Hintergrund generiert, völlig unabhängig davon, ob es sich um HTML, CSS, PHP oder eine andere Programmiersprache handelt.

So lassen sich auch komplexere Anwendungen wie ein Kalender oder ein Kontaktformular, die weit über die Möglichkeiten von reinem HTML hinaus gehen, binnen weniger Minuten und mit wenigen Klicks einbinden. Eine einfache Website mit ca. drei bis fünf statischen Unterseiten kann mit einem Homepage Baukasten binnen eines knappen Tages realisiert werden. Denn auch das Design der Homepage muss man nicht von Grund auf neu entwerfen oder entwerfen lassen. Vielmehr hat man in einem Homepage Baukasten die Auswahl zwischen unzähligen Design-Vorlagen, sogenannten Templates, die bis ins Detail an die eigenen Vorstellungen und Wünsche angepasst werden können.

So erzielt man ein professionelles Ergebnis, das dennoch individuell und einzigartig bleibt, selbst wenn schon andere Webseiten auf Basis desselben Templates veröffentlicht wurden. Dabei liegt der Preis eines Baukastens für solch eine Homepage nur bei ca. sechs Euro monatlich. Im Preis bereits enthalten sind eine Domain und Speicherplatz. Dies sind Fixkosten, die auch dann entstehen, wenn man nicht einen Baukasten nutzt. Außerdem erhält man mit einem Homepage Baukasten Zugang zu Telefon- und E-Mail-Support, der den Kunden bei technischen und allen anderen Fragen mit Rat und Tat zur Seite steht.

Der Anwender eines Baukasten-Systems bekommt normalerweise keine einzige Zeile HTML-Code zu sehen. Der Baukasten übernimmt vollautomatisch die Generierung des Codes. Dennoch gibt es für fortgeschrittene Anwender durchaus mal das Bedürfnis, selbst Hand an den Code zu legen. Für sie gibt es Baukästen mit integriertem HTML-Editor.

Vorteile eines HTML-Editors

Mit einem Homepage-Baukasten lässt sich auch ohne Programmier-Kenntnisse eine ansprechende, moderne Homepage erstellen. Für fortgeschrittene Anwender, die über HTML- und CSS-Kenntnisse verfügen, lässt sich aber das Beste aus zwei Welten kombinieren: Eigener Programm-Code und vorgefertigte Widgets, die einfach per Drag-and-Drop eingesetzt werden können.

Einfacher Website-Import

Wer bereits eine Homepage auf HTML-Basis im Netz hat, muss diese bei einem Wechsel zu einem Baukasten-System nicht von Grund auf neu aufsetzen. Der bestehende Code der alten Website lässt sich einfach per Copy & Paste in den HTML-Editor des Baukastens übertragen. So ist der alte Webauftritt im Nu wieder hergestellt, und zusätzlich können die vielen tollen Möglichkeiten des Baukastens genutzt werden.

Individuelles Design

Der Homepage-Baukasten stellt für Laien mit seiner Drag-and-Drop-Bedienung das einsteigerfreundlichste, komfortabelste Instrument zur Website-Erstellung bereit. Natürlich sind damit nur Anpassungen und Änderungen am Template - das sind die Design-Vorlagen der Homepage-Baukästen - innerhalb eines gewissen Rahmens möglich. Wer tiefer gehende Eingriffe vornehmen will, muss auf den HTML- und CSS-Editor zurückgreifen, kann aber dafür die Grenzen von Templates komplett aufbrechen und wird mit einer wirklich individuellen Homepage belohnt.

Wissenswertes

HTML-Editoren innerhalb von Homepage-Baukästen verhalten sich ein wenig anders, als man es von der Bedienung und Erstellung einer HTML-Homepage ohne Baukasten gewohnt ist. Ein wenig Einarbeitungszeit sollte man daher einplanen und im Notfall auch nicht davor zurückschrecken, den Support zu kontaktieren. Außerdem sollte man abwägen, ob es nicht auch ausreicht, einzelne Elemente der Homepage mit den HTML-Widgets, die weitaus häufiger in Baukasten-Systemen anzutreffen sind, umzusetzen. Für den Import bereits bestehender HTML-Websites sind die Editoren aber ganz ausgezeichnet geeignet.

Wie von jeder Software gibt es auch von Programmiersprachen Weiterentwicklungen und verschiedene Versionen. HTML5 ist die aktuellste Version momentan und wird gängig zur Erstellung von Homepages verwendet.

Vorteile von HTML5

Bei der Verwendung eines Homepage-Baukastens muss man sich keine Gedanken um die HTML-Version machen. Alle Websites werden heutzutage automatisch in HTML5 generiert. Wer Eingriffe im HTML-Code seiner Homepage vornehmen möchte, kann auf Baukästen mit HTML-Editor zurückgreifen. Dies ist aber ausschließlich erfahrenen Nutzern zu empfehlen.

Aktueller Standard

HTML5 wird seit ca. 2012 als Web Standard verwendet. Es wird von allen aktuellen Browsern unterstützt und ist ca. für die nächsten 5 Jahre zukunftssicher. Außerdem wird es auch von Suchmaschinen in der Bewertung einer Website berücksichtigt. Webseiten mit HTML5 werden von Google und Co. in der Regel besser gereiht als vergleichbare Homepages, die veraltete Web Standards verwenden.

Mehr Funktionen

HTML bringt einige tolle neue Funktionen mit sich. Dazu gehört unter anderem die Möglichkeit, Audio und Video direkt in den HTML-Code einzubinden. Vor HTML5 waren dafür zusätzliche, externe Media-Player Plug-Ins (kleine Zusatzprogramme für Browser, die dessen Funktionsumfang erweitern) wie Flash von der Firma Adobe erforderlich. Als bekanntestes Online Video-Portal hat auch YouTube von Flash-Playern auf HTML5 umgestellt.

Wissenswertes

Da es für normale Anwender, die nicht in die HTML-Programmierung einsteigen möchten und die Komfort-Funktionen von Homepage-Baukästen wie beispielsweise Templates oder andere Vorlagen benutzen, nichts zu beachten gibt, richtet sich dieser Abschnitt an fortgeschrittene Nutzer. Natürlich ist das Thema HTML5 zu umfassend, um hier ausführlich behandelt zu werden, aber zwei Schwerpunkte seien hier herausgehoben:

Unterschied zur HTML 4-Syntax

Seit HTML5 werden Tags wieder geschlossen. Stand bei HTML 4 nur ein einleitendes <p> vor einem Absatz, wird in HTML5 am Ende des Absatzes ein schließender Tag </p> verwendet. Inhaltsleere Tags, z.B. der Zeilenumbruch, werden in sich geschlossen, also <br />.

Medienwiedergabe

Seit HTML5 können Medien direkt in den Code eingebunden und ohne Plug-In im Browser abgespielt werden. Wer seine Videos nicht auf YouTube einstellen will, weil er sie beispielsweise in einem durch Passwort gesicherten Bereich seiner Homepage haben möchte, kann dies mit dem <video>-Tag, im Fall von Audio mit <audio> machen. Ratsam ist es zudem den Tag auf <audio controls> zu erweitern. Dies fügt dem Media-Player im Browser Kontrollelemente wie eine Pause-Taste oder einen Lautstärkeregler hinzu.

Zwischen dem öffnenden und schließenden <audio>-Tag wird mit <source> auf die Quell-Datei verlinkt. Zusätzlich kann man für Nutzer mit älteren Browsern, die noch kein HTML5 beherrschen, eine Nachricht hinterlassen, die bei ihnen an Stelle des Players angezeigt wird.

Eine Audio- oder Video-Datei kann mit Hilfe von HTML5 also wie folgt eingebunden werden:

<audio controls>

<source src=“sound.mp3“ type=“audio/mpeg“ />

<p>Please update your Browser, it does not support HTML5.</p>

</audio>

Was genau sind HTML und XHTML?

Definition und Verwendung

Zunächst handelt es sich bei HTML und XHTML um sogenannte Auszeichnungssprachen. Sie strukturieren ein Dokument so, dass es auch für Programme wie einen Browser, zum Beispiel den Internet Explorer, oder aber Suchmaschinen „verständlich“ wird. Dies ist wichtig, damit Browser ein Dokument korrekt darstellen und Suchmaschinen einzelne Teile des Dokuments richtig gewichten können.

Am besten lässt sich dies veranschaulichen, wenn man sich in die Rolle eines Blinden versetzt. Wenn er einen Text vorgelesen bekommt, muss man ihm beim Vorlesen ebenfalls mitteilen, was eine Überschrift, was ein Zitat oder was auf einem Bild abgebildet ist. Die für einen Sehenden deutlichen Merkmale wie große, zum Teil farblich hervorgehobene Buchstaben und ein gewisser Abstand zum Fließtext, die für ihn eine Überschrift klar erkennbar machen, sind für den Blinden nicht zugänglich. Genauso wenig ist dies für Programme der Fall. Um dieses Problem zu lösen, kommen für das Internet Auszeichnungssprachen wie HTML und XHTLM zum Einsatz. Hier werden unterschiedlichen Inhaltsarten sogenannte Tags zur Seite gestellt. Der Tag für eine Hauptüberschrift lautet beispielsweise <h1>. In HTML 5 würde man also eine Hauptüberschrift wie folgt schreiben: <h1>Meine Hauptüberschrift</h1>. Dadurch wird einerseits eine entsprechende Darstellung der Überschrift in einem Browser möglich. Suchmaschinen können die Hauptüberschrift stärker gewichten als Unterüberschriften und Fließtext, andererseits wird dadurch aber auch die Realisierung eines barrierefreien Internets leichter. Wenn sich Blinde beispielsweise mit einem Sprachausgabe-Werkzeug auf eine Website gehen, kann bei korrektem HTML Code die Hauptüberschrift auch für sie als solche erkennbar wiedergegeben werden.

XHTML und Homepage-Baukästen

Glücklicherweise müssen sich Nutzer von Homepage Baukästen nicht mit Web Programmierung beschäftigen. Homepage Baukästen bieten eine grafische Benutzeroberfläche, die einfach und komfortabel mit der Maus zu bedienen ist. Farben, Schriftgrößen und andere Eigenschaften der Inhalte werden in Auswahlmenüs angeklickt, Informationen für Suchmaschinen in Eingabefelder eingetragen. Bei alledem generiert der Baukasten automatisch den korrekten Code, sei es HTML, CSS oder eine andere Programmiersprache.