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)
| |
<p>Hier kommt der Text</p> |
Manueller Zeilenumbruch (break)
| |
<br> |
Fette Schrift (bold)
| |
<b>Hier kommt der Text</b> |
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
| |
<!-- In einem Quellcode wird dieser Text vom Browser nicht angezeigt --> |
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