In diesem Beitrag erhalten Sie eine kurze Einführung in Webdesign mit Fokus auf Hypertext Markup Language. HTML ist eine textbasierte Auszeichnungssprache, die hauptsächlich im WWW (World Wide Web) eingesetzt wird. HTML dient zur Gestaltung und Verknüpfung von Text und Bild.

Editiere, Betrachten und Veröffentlichen von HTML

Der Quellcode einer "HTML Datei" ist in reinem Text geschrieben. Somit kann eine Homepage bereits mit einem einfachen Texteditor geschrieben werden (z.B. Editor, Simpletext etc.). Zur Interpretation von HTML benötigt man einen HTML-Browser, welcher standardmässig bei jedem Betriebssystem installiert ist (z.B. Internetexplorer, Firefox, Safari etc.).

Möchte man eine Webseite nicht nur lokal (auf dem eigenen Rechner) betrachten, sondern online veröffentlichen, muss der gesamte Ordner der Homepage mit den HTML-Dateien und den dazugehörenden Bildern auf einen Webserver gestellt werden.

Ordnerstruktur einer Webseite

Eine Korrekte Bezeichnung und übersichtliche Struktur der Ordner und Dateien sind für die Programmierung einer Homepage sehr wichtig. Für die Namen der Ordner dürfen keine Umlaute, Sonderzeichen und Leerschläge benutzt werden. HTML-Dateien werden mit dem Anhang .html bezeichnet. Bereits ein kleiner Rechtschreibfehler kann einen Link ungültig machen.

Um die Kontrolle bei der Entwicklung einer Website zu bewahren, schlage ich folgende Dateistruktur vor:

homepage/ (Hauptordner)

index.html (Startseite z.B. für ein Intro)

home.html (Übersichtsseite)

themen/ (Ordner 1)

thema1.html (Inhaltsseite 1)

thema2.html (Inhaltsseite 2)

bilder/ (Ordner 2)

bild1.jpg (Vollbild 1)

bild2.jpg (Vollbild 2)

thumbnails/ (Unterordner)

thumb1.jpg (Vorschau vom Vollbild 1)

thumb2.jpg (Vorschau vom Vollbild 2)

Wird mit einem Browser der Hauptordner angeklickt, wird automatisch die index.html-Seite geöffnet

Gerüst einer einzelnen HTML-Datei

Eine einzelne Webseite besteht im Wesentlichen aus drei Teilen:

Dokumenttyp-Beschreibung (Angabe zur verwendeten HTML-Version)
Header (Seiteninformationen z.B. Angaben zu Seitentitel u.ä.)
Body (anzuzeigender Inhalt z.B.Text, Links, Grafikreferenzen usw.)

Im Code sieht das folgendermassen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>...</head>
<body>...</body>
</html>

Tags

Tags sind Befehle, die vom Browser ausgeführt werden. Diese beginnen oft mit einer spitzigen Klammer <...>, besitzen dazwischen evt. ein oder mehrer Attribute und enden mit einem abschliessenden Tag mit Schrägstrich </...>. Tags können auch verschachtelt werden. Beispiele:

Einfache Textblöcke (pause)

Hier kommt der Text

Manueller Zeilenumbruch (break)

 

Fette Schrift (bold)

Hier kommt der Text

Hyperlink (hyper reference)

<a href=“Linkpfad“>Linktext</a>

Bild aus einer Quelle z.B. einem Ordner in der Seite anzeigen (image source)

<img src="/cms/Bildpfad" width="300" height="200" alt="Alternativtext">

Die Bildhöhe und -breite werden in Pixel angegeben.

Farben von Text und Hintergrund

<body bgcolor="#663333" text="#FFCC99" link="#FF9966" vlink="#00FF00" alink="#0000FF">

Die Angabe der Farbe ist in einem Hexidezimalen RGB-Code: #RRGGBB.

Versteckte Kommentare

Hiermit können Angaben zu Autor, Erstellungsdatum, Urheberrechte, Programmierhinweise etc. gemacht werden, die vom Browser nicht angezeigt werden und nur im Quellcode sichtbar sind.

Quellen und Links

Selfhtml gilt als Klassiker: http://de.selfhtml.org/html/index.htm

Marco Abrar's HTML-Wörterbuch ist besonders für Einsteiger geeignet: http://ww3.de/inhalt.htm

Beispiel einer einfachen Homepage zum Spielen

Download homepage_bsp

HTML (Hypertext Markup Language)