Webseiten gestalten

Auf der Seite HTML-Grundlagen wurde gezeigt, wie man in HTML das Grundgerüst einer Webseite erstellt und die Webseite speichert. Allerdings enthält eine Webseite mit lediglich einem Grundgerüst noch nicht viel Inhalt. Hierfür muss man eine Webseite gestalten und mit Inhalten füllen. Da vorausgesetzt wird, dass jede Webseite ein HTML-Grundgerüst mit einem HEAD- und BODY-Bereich benötigt und im BODY-Bereich die Befehle untergebracht werden, um die im Browser sichtbaren Elemente wie z.B. Text und Bilder darzustellen, wird ab dieser Seite nicht mehr der gesamte Code mit dem kompletten Grundgerüst für die Webseite gezeigt, sondern nur die relevanten Teile der Codezeilen.

Es gibt eine Vielzahl an Befehlen, um die Inhalte einer Webseite festzulegen, die im BODY-Bereich untergebracht werden, da sie auf der Webseite angezeigt werden sollen. Zu den wichtigsten Inhalten zählen unter anderem:

• Texte
• Bilder
• Hyperlinks
• Tabellen
• Videos
• Dokumente, Programme und sonstige Dateien
• Formularfelder

Zu den am häufigsten eingefügten Elementen auf einer Webseite gehören Texte. Hierbei ist vor allem wichtig, dass die Texte gut strukturiert sind. Wenn man z.B. eine Überschrift einfügen möchte, dann sollte man das auch mit dem dazugehörigen Befehl tun. Einerseits hilft man damit sehbehinderten Menschen, die Webseite besser zu verstehen, andererseits können Suchmaschinen oder andere auslesenden Programme die Struktur der Webseite besser einordnen.

Wenn man auf eine Webseite mit HTML Bilder einfügen möchte, dann sind hierbei vor allem folgende Dinge zu beachten:

• Organisation der Bilder: Auf einer Webseite werden zu unterschiedlichen Themen Bilder eingefügt. Es sollte ein klares Konzept über die Ordnerstruktur erarbeitet werden, in der die Bilder abgelegt werden, damit man sie bei Bedarf schnell findet. Denn, Bilder müssen häufig ausgetauscht und gelöscht werden.
• Dateiformat der Bilder: Browser können verschiedene Bildformate darstellen. Auf Webseiten werden die Bilder vor allem in den Formate JPG, GIF und PNG eingebunden.
• Größe der Bilder: Damit den Benutzern unnötige Ladezeiten erspart bleiben, sollten die Bilder auf die notwendige Größe und Breite reduziert werden. Außerdem sollten die Bilder komprimiert werden.

Die schnelle Ausbreitung des Internets ist vor allem den Hyperlinks zu verdanken. Der Name der Seitenbeschreibungssprache HTML ist sogar daraus abgeleitet worden und bedeutet ausgeschrieben Hypertext Markup Language. Mit Links werden Webseiten so miteinander verbunden, dass man sehr schnell von einer Webseite zu eine anderen "springen" kann. Bei Hyperlinks ist zu beachten, dass man verschiedene Elemente verwenden kann, wenn man Links einfügen möchte, z.B. Texte, Bilder oder sogar DIV-Container. Als Linkziele können Webseiten, E-Mailadressen oder sonstige Dateien definiert werden.

In der Anfangszeit des Internets wurden Tabellen häufig dafür verwendet, um das Design einer Webseite festzulegen. Da Tabellen jedoch nicht dafür gedacht sind, wurden nach und nach viele Webseiten auf tabellenlose Webdesigns umgestellt. Tabellen sind für die Darstellung tabellarischer Inhalte gedacht und sollten auch nur dafür verwendet werden. In Zeiten immer kleiner werdenden Displays und dem Einsatz von responsive Webdesign ist man bei Tabellen außerdem mit dem Problem konfrontiert, dass sie einen bestimmten Platz einnehmen, wenn die Inhalte übersichtlich dargestellt werden sollen. Es gibt jedoch auch hier einige Lösungsansätze, um Tabellen in responsive Webdesigns zu implementieren.

In den Anfängen des Internets waren Videos kaum verbreitet. Aufgrund schneller Datenverbindungen und dem Aufblühen der Videoportale werden auf vielen Seiten verstärkt Videos eingesetzt. Hierbei sind vor allem folgende Dinge wichtig:

• Die Videolänge: Es sollte bei der Videolänge immer eine richtige Balance für den jeweiligen Zweck gefunden werden. Bei Dokumentationen sind z.B. längere Videos normal. Bei anderen Videos kann es dagegen sinnvoll sein, diese in Abschnitte zu unterteilen. So können sich die User die Teile anschauen, die für sie relevant sind.
• Das Videoformat: Auch für Videos gibt es verschiedene Formate, die in den Browsern abgespielt werden können, z.B. swf, mp4 oder webm. Man sollte nach Möglichkeit ein Standardformat wählen, sodass zumindest die meisten User keine Zusatzprogramme zum Abspielen benötigen. Auch sollte die Ursprungsdatei in einem Format vorliegen, das einfach in ein anderes Format konvertiert werden kann.
• Ablage der Videos: Durch die Verbreitung von Videoportalen ist es nicht zwingend notwendig, die Videos auf dem eigenen Server abzulegen. Man kann sie auch auf Videoportalen ablegen. Der Vorteil dabei ist, dass man an Bandbreite spart und den Server entlastet. Sollen die Videos auf dem eigenen Server abgelegt werden, so sollte man wie bei den Bildern ein Konzept für die Ordnerstruktur erarbeiten, in der die Videos abgelegt werden sollen.

Auf vielen Webseiten werden viele Dateien in Form von Dokumenten oder gar Programmen bereitgestellt, die heruntergeladen werden können. Hierbei sollte vor allem auf folgende Dinge geachtet werden:

• Software zum Lesen der Dokumente: Wenn man Dokumente bereitstellt, dann sollte darauf geachtet werden, dass nicht jeder eine Software zum Lesen der Dokumente besitzt. Im Internet hat sich für Dokumente z.B. das Format PDF etabliert, da die Lesesoftware Adobe Reader kostenlos heruntergeladen werden kann. Auf Formate, die kostenpflichtige Programme voraussetzen oder wenig verbreitet sind, sollte verzichtet werden.
• Packen von zusammengehörigen Dateien: Wenn man viele Dateien bereitstellt, die zusammengehören, sollte man diese nach Möglichkeit mit einem Packprogramm in eine Datei packen. Hierbei sollte man keine exotischen Packformate verwenden, sondern eins bei dem man annehmen kann, dass viele Menschen das Programm zum Entpacken besitzen, z.B. das Packformat ZIP oder RAR.

Formulare dienen hauptsächlich für Eingaben, die von den Benutzern über die Tastatur gemacht werden können. In HTML können zwar sehr schnell Formularfelder erstellt werden. Allerdings ist zu beachten, dass für die Prüfung, Verarbeitung und Übertragung der Daten, z.B. per E-Mail oder in Datenbanken, Programmierung notwendig ist. Allein mit HTML sind die Formularfelder so gut wie ohne Wirkung.