Kleine Einführung in HTML für TutorInnen

eBologna – AP 3
Dokumentation & Materialien
Kleine Einführung in HTML für TutorInnen
Viele werden es schon bemerkt haben, so manche haben schon damit erste Versuche gemacht:
WebCT Vista verfügt über einen implementierten HTML-Editor, der vor allem bei der optischen
Gestaltung eines Kurses mehr Gestaltungsfreiraum ermöglichen soll.
Aber wie funktioniert das, und was ist eigentlich HTML? Welche Voraussetzungen brauchen Sie,
um damit arbeiten zu können? Was ist alles möglich?
Im Folgenden sollen diese Fragen kurz beantwortet werden; erweitert um zahlreiche Verweise
und Links zu anderen hilfreichen Quellen. Bezug genommen wird dabei hauptsächlich auf die
Arbeit mit WebCT Vista und die dadurch bedingten Anforderungen (und auch Einschränkungen).
Verweisen möchte ich hier auch auf das Kursangebot des ZID und vor allem auf die im
Folgenden oft herangezogene deutschsprachige HTML-Referenz SELFHTML:
Link: http://de.selfhtml.org
Was ihr Autor Stefan Münz da geleistet hat ist nahezu unglaublich, neben eingehenden und
verständlichen Erklärungen bietet er viele Vertiefungen Tipps, Tricks, Hinweise und
Detailinformationen, die hier leider keinen Platz finden. Zudem werden die Inhalte auch gratis als
Download angeboten, sodass Sie sie wirklich jederzeit an ihrem PC oder Laptop/Mac zur
Verfügung haben. Ausdrücklichste Empfehlung!
Gegliedert ist diese Einführung in einen theoretischen Teil, der das allernötigste
Hintergrundwissen vermitteln soll, und einen praktischen Teil, in dem Sie Schritt für Schritt
eine erste einfache Webseite basteln. Danach folgt eine kleine Liste mit Verweisen zu hilfreichen
Webseiten.
Grundsätzlich möchte ich allen ans Herz legen, zuerst die nachfolgend zitierte Wikipedia-Seite
über HTML zu lesen, da sie einen verständlichen und kompakten Überblick vermittelt und viele
der später verwendeten Begriffe kurz erklärt.
Sie finden sie unter http://de.wikipedia.org/Html
Beginnen wir mit einer kurzen Einführung in drei wichtige Bestandteile aktueller Webseiten:
HTML, XHTML, CSS
1
eBologna – AP 3
Dokumentation & Materialien
Was ist HTML/XHTML?
„Die Hypertext Markup Language (HTML), oft auch kurz als Hypertext bezeichnet, ist eine
textbasierte Auszeichnungssprache zur Darstellung von Inhalten wie Texten, Bildern und
Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und
werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer
Webseite enthält HTML auch Metainformationen (zusätzliche Angaben), die die Intention oder
Bedeutung des Textes zusammenfassen oder auch Informationen z. B. über die Sprache oder
den Autoren geben. Die Auszeichnungssprache wurde vom World Wide Web Consortium (W3C)
bis Version 4.01 weiterentwickelt und soll nun durch XHTML ersetzt werden.“
(aus: http://de.wikipedia.org/wiki/Html , Stand: 23.10.2006)
HTML-Dateien bestehen also aus Text. Zur Textauszeichnung gibt es bestimmte Zeichen aus
dem normalen (anglo-europäischen) Zeichenvorrat. Sie ahnen es also vielleicht schon: Es ist
weitaus einfacher als es auf den ersten Blick scheinen mag, auch die Syntax dieser
Auszeichnungssprache ist – rudimentäre Englischkenntnisse vorausgesetzt – relativ leicht zu
erlernen.
Wer sich den Quelltext auf Webseiten ansehen möchte, kann dafür in den meisten Browsern per
Rechtsklick oder über das Menü die Funktion „Quelltext anzeigen“ oder „show source“ wählen.
Der Browser öffnet dann ein neues Fenster und zeigt das HTML-Dokument so, wie er es vom
Server empfangen hat.
Wie am Ende der zitierten Wikipedia-Definition erwähnt ist HTML bzw. XHTML eine
Auszeichnungssprache, die ständig weiterentwickelt wird. Behalten Sie diese Tatsache im Kopf,
da sie später noch wichtig wird. Und lassen Sie sich nicht verwirren: „Altes“ HTML ist auch für
moderne Browser noch verständlich, Sie müssen nicht gleich anfangen XHTML zu lernen – die
Übergänge sind fließend, wie bei einer Sprache, in die immer wieder neue (Mode)Wörter
einfließen. Wichtig ist hauptsächlich, durchgehend nach einer gültigen Version zu arbeiten, also
„sauberen“ Quelltext zu schreiben und eine Syntax zu verwenden, die von der Mehrzahl der
Webbrowser auch verstanden und richtig dargestellt wird.
2
eBologna – AP 3
Dokumentation & Materialien
Was brauche ich eigentlich für die Arbeit mit HTML?
Nun, da es sich um Text handelt, lediglich ein Programm um HTML zu schreiben.
Keinesfalls dafür geeignet sind gängige Textverarbeitungsprogramme wie Microsofts Word oder
Open-Office: Zwar kann man auch mit ihnen fallweise ein Dokument in ein HTML-Dokument
umwandeln und so eine Webseite erzeugen, allerdings ist der damit erzeugte Quelltext teilweise
unsauber und unübersichtlich aufgebaut (was die Nachbearbeitung zu einer Qual macht und
HTML-Lernen nahezu unmöglich), zudem verfügen sie nicht über die vielen nützlichen
Zusatzfunktionen, die ein guter HTML-Editor bietet.
Wichtig: Ein HTML-Dokument muss entweder als .html oder .htm abgespeichert werden, um
als solches erkannt zu werden!
Unterschied zwischen quelltextbasierten Editoren und
WYSIWYG-Editoren:
Unterschieden wird zwischen zwei Arten von HTML-Editoren: Auf Quelltext basierten und so
genannten WYSIWYG-Editoren. Tatsächlich bieten die meisten aktuellen Editoren beide
Funktionen an.
In WebCT Vista bereits integriert ist ein so genannter WYSIWYG-Editor (WYSIWYG = What You
See Is What You Get – Was Sie sehen ist das, was rauskommt). Der Text wird am Bildschirm
während der Arbeit (zumeist) so angezeigt wie auch später in Ihrem Webbrowser. Dieser Editor
ist in der Handhabung vor allem bei der Textbearbeitung ähnlich den verbreiteten
Textverarbeitungsprogrammen – wie etwa Word oder Open-Office -, d. h. auch das Einbinden
von Grafiken ist möglich.
WYSIWYG-Editoren bieten gerade für den Einstieg also eine relativ bequeme Möglichkeit,
einfache Webseiten schnell zu erstellen und sind inzwischen auch meist fixer Bestandteil bei
CMS/Blogging-Seiten. Die Nachteile jedoch sind, oft eingeschränkte Bearbeitungsmöglichkeiten,
Abhängigkeit von einer aufrechten Internetverbindung und die Tatsache, dass diese Editoren
unter Umständen ungültiges HTML produzieren. Die Darstellung im Webbrowser wird damit
abhängig von dessen Fähigkeit, den Quelltext richtig zu interpretieren.
Außerdem werden Sie kaum HTML verstehen lernen, wenn Sie nicht direkt mit dem Quelltext
3
eBologna – AP 3
Dokumentation & Materialien
arbeiten. Es empfiehlt sich daher, mithilfe der WYSIWYG-Funktion nur das Grundgerüst einer
HTML-Datei zu erstellen und die Feinarbeit manuell am Quelltext zu erledigen.
Die meisten quelltextbasierten Editoren wiederum bieten neben der WYSIWYG- und QuelltextFunktion meist auch Werkzeugleisten, Menübefehle, integrierte Hilfe und Dialoge, um den
Quelltext komfortabler zu bearbeiten, fallweise Syntaxbibliotheken, die Möglichkeit
Sonderzeichen automatisch einzufügen oder auch mehrere Seiten gleichzeitig in Tabs zu
bearbeiten. Zudem sind viele mit Plugins erweiterbar bzw. von Anfang an ausgestattet, die
zusätzlich die Bearbeitung von CSS, Javascript, Java oder auch PHP ermöglichen. Letztendlich
zählt aber nur, womit Sie am Besten arbeiten können!
Wie komme ich zu einem HTML-Editor?
Neben den bekanntesten unter den HTML-Editoren wie dem recht teuren Dreamweaver oder dem
Microsoft-Produkt Frontpage – das bei manchen Office-Paketen standardmäßig installiert ist, gibt
es eine Reihe kostenloser Editoren zum Download.
Alternativ können Puristen und Puristinnen auch in einem simplen Texteditor wie Notepad
(Windows) oder Vim (LINUX) ohne Menüs oder Mausunterstützung (bei Vim) arbeiten. Für eine
Vorschau müssen Sie ihre Dateien in diesem Fall aber jedes Mal als .htm- oder .html-Datei
abspeichern und mit einem Webbrowser öffnen – auf den ersten Blick unpraktisch, aber zum
Lernen vielleicht gar nicht so übel.
Eine Liste mit einem Überblick über HTML-Editoren, die Sie herunterladen und gratis benutzen
können finden Sie etwa hier:
Link: http://aktuell.de.selfhtml.org/links/html-editoren.htm (Stand Oktober 2006)
Persönlich empfehlen möchte ich folgende auch dort angeführte Programme: HTML PHASE 5,
NVU oder jEDIT: Sie sind entweder plattformunabhängig oder für verschiedene Betriebsysteme
downloadbar; zudem für Privatanwender kostenfrei!
4
eBologna – AP 3
Dokumentation & Materialien
Ein Beispiel anhand eines Screenshots
Der vom Autor neben jEdit zumeist verwendete Phase 5 Editor: HTML-Auszeichnungen sind
durch Syntax-Highlighting farblich markiert (Blau/Rot). Über die Menüzeile lassen sich Tabellen,
Listen etc. einfach einfügen, durch einen Tastendruck auf die F9 Taste lässt sich bequem in die
WYSIWYG-Vorschau wechseln (Wobei das Endergebnis natürlich unbedingt mit verschieden
Browsern überprüft werden sollte!). Verschiedene Plugins wie etwa zur Überprüfung der HTMLVersion, Arbeitssprache oder Dateiverwaltung runden das Paket ab. Zudem lässt sich auch die
SELFHTML-Hilfe einbinden!
HTML-editieren in WebCT Vista
Auch der WYSIWYG-Editor in WebCT Vista bietet Syntax-Highlighting und lässt sich auf
Vollbildmodus umschalten, was ihn auch für die Quelltextbearbeitung geeignet macht.
Allerdings sind Sie hier auf eine zuverlässige Internet-Verbindung angewiesen und haben
wesentlich weniger Zusatzfunktionen. Sie öffnen ihn, indem Sie etwa eine neue Inhaltsdatei
5
eBologna – AP 3
Dokumentation & Materialien
erstellen oder ein bestehendes HTML-Dokument im Dateimanager mit Mausklick auf das
Bleistiftsymbol zum Bearbeiten öffnen.
Auf die gleiche Art und Weise können Sie in der „ERSTELLEN“-Ansicht auch Kopf- und Fußzeile
etwa der Startseite Ihrer Kurse bearbeiten und dort HTML einfügen!
Für welchen Editor Sie sich entscheiden bleibt Ihnen überlassen. Für den Anfang empfehle ich
einen reinen Texteditor oder einen der empfohlenen quelltextbasierten Editoren. Aus diesen
können Sie per Copy & Paste offline erstellten HTML-Quelltext auch schnell in den WebCT VistaEditor einfügen.
Copy & Paste ist überhaupt ein beliebtes Mittel, gerade bei HTML. Dadurch, dass professionelle
Webseiten immer verschachtelter und mit PHP aufgebaut sind wird Copy & Paste zunehmend
schwierig – zumindest für Anfänger – allerdings sollten Sie sich nicht davor scheuen, explizit frei
gegebene Beispiele zu kopieren, um so schneller zu lernen! Bedenken Sie nur, dass Sie eventuell
auch Fehler mitkopieren.
Eine HTML-Datei erkennen Sie nicht nur an ihrer Endung .htm oder .html, sondern auch an ihrer
Struktur: Gehen Sie doch einmal auf die Seite http.//unet.univie.ac.at und sehen Sie sich den
Quelltext an! Entweder per Rechtsklick mit der Maus oder über das Menü im Browser müssen Sie
die Funktion Seitenquelltext anzeigen oder view source auswählen.
Was Sie dann sehen ist ein XHTML-Quelltext, der auf den ersten Blick verwirrend aussehen mag,
aber nach ganz bestimmten Regeln strukturiert ist – und den Sie nach der Lektüre dieser
Einführung und zwei kleinen Übungen zum Großteil lesen können und verstehen werden!
Wenn Sie das geschafft haben, steht Ihren eigenen Übungen nichts mehr im Weg. Denn eines
kann Ihnen kein Tutorial abnehmen: Auch wenn die Grundregeln von HTML schnell erlernt sind
und es jede Menge Quelltextbeispiele im Internet gibt – ganz ohne Üben geht es letztlich leider
doch nicht.
Aber nun sehen wir uns doch einmal die Grundstruktur von HTML an.
6
eBologna – AP 3
Dokumentation & Materialien
Allgemeine Struktur einer HTML-Datei
Ein HTML-Dokument besteht aus drei Bereichen:
1. Der Dokumenttypdeklaration (DTD) ganz am Anfang der Datei, die angibt welche
HTML/XHTML-Version verwendet wird.
2. Dem HTML-Kopf (HEAD) – der hauptsächlich technische oder dokumentarische
Informationen enthält, die nicht direkt im Browser sichtbar sind und den Titel (TITLE) der
Webseite einschließt.
3. Dem HTML-Körper (BODY), der den Inhalt des im Webbrowser sichtbaren Teils
enthält.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel der Webseite</title>
<!-- Evtl. weitere Kopfinformationen -->
</head>
<body>
<!-- Inhalt der Webseite. z.B: -->
<h1>Kapitel 1</h1>
</body>
</html>
Das Wurzelelement HTML schließt vom Start-Tag <html> bis zum Schluss-Tag </html> den
gesamten Inhalt einer HTML-Datei ein.
Innerhalb von <body>...</body> steht der Inhalt. Im Falle eines Textes z. B. erstmal eine
Überschrift, zwischen „<!—`` bis „-->“ eingeschlossener Text oder Befehle sind
„auskommentiert“, d. h. sie werden auch nicht ausgeführt und sind für den Webseiten-Betrachter
nicht sichtbar (es sei denn über die Quelltextansicht)!
Dies ist übrigens äußerst hilfreich: Wenn Sie etwa nach einem Fehler im Quelltext suchen,
müssen Sie nicht alles Fragwürdige löschen, Sie können auch verdächtige Bereiche
„auskommentieren“ bis der Fehler gefunden wurde. Im professionellen Bereich helfen im
Quelltext versteckte Kommentare anderen, sich in fremden Dokumenten zurechtzufinden und
daran weiterzuarbeiten. Am Beliebtesten ist wohl die Möglichkeit, dadurch auch Veränderungen
im Quelltext zu dokumentieren, Copyright–Ansprüche geltend zu machen bzw. explizit zur
Weiterverwendung aufzufordern.
7
eBologna – AP 3
Dokumentation & Materialien
Grundgerüst einer XHTML-Datei
Wenn Sie aber XHTML-konform schreiben wollen, sieht das Grundgerüst ähnlich aus, es gibt aber
ein paar Details am Anfang zu beachten. Der WYSIWYG–Editor in WebCT Vista arbeitet übrigens
mit einem XHTML-Standard!
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beschreibung der Seite</title>
</head>
<body>
<!—Hier bitte was sinnvolles reinschreiben-->
</body>
</html>
Anders als bei HTML wird bei XHTML zu Beginn die XML-Deklaration angegeben.
Danach folgt wie bei HTML die Dokumenttypdeklaration, im einleitenden <html>-Tag muss der
verwendete XML-Namensraum mit einem Attribut namens xmlns angegeben werden.
Mit diesen Angaben ist die Datei als XHTML-Datei deklariert. Danach folgt wieder normales
HTML, allerdings muss man dann nach den XHTML-Regeln schreiben, die etwas anders sind.
Befassen Sie sich mit diesen Unterschieden aber erst, wenn Sie schon etwas vertrauter mit HTML
sind! Erwähnt wird XHTML hier dennoch, unter anderem da der in WebCT Vista verwendete
Editor standardmäßig ein XHTML-Grundgerüst erzeugt.
Mehr Wissenswertes zu XHTML in deutscher Sprache erfahren Sie hier:
Link: http://de.wikipedia.org/wiki/Extensible_Hypertext_Markup_Language (Stand: 23.10.2006)
Nachdem Sie jetzt das Grundgerüst gesehen haben, kommen wir zu den darin enthaltenen
HTML-Elementen und Tags.
HTML-ELEMENTE UND TAGS
Der Inhalt von HTML-Dateien steht in HTML-Elementen, diese werden durch Tags markiert.
Tags werden in spitzen Klammern notiert und sind (meistens) solange gültig, bis sie
wieder geschlossen werden. Um mit allen HTML/XHTML-Versionen kompatibel zu sein, sollten
Tags prinzipiell klein geschrieben werden!
8
eBologna – AP 3
Dokumentation & Materialien
Um etwa eine Überschrift 1. Ordnung zu erzeugen, müsste im HTML-Quelltext Folgendes stehen:
<h1>Überschrift </h1>
Etwa so sähe es im Browser aus:
Überschrift
Das Tag <h1> (h steht für heading = Überschrift) markiert also den Beginn einer Überschrift 1.
Ordnung, das Schlusstag </h1> markiert das Ende des Gültigkeitsbereiches.
Ein abschließendes Tag beginnt immer mit öffnenden spitzen Klammer und einem Schrägstrich
"</"
Mit <div align=“center“>...</div> etwa wird ein Bereich festgelegt, innerhalb dessen alles
zentriert in der Bildmitte dargestellt wird.
Um einen Textabschnitt fettgedruckt darzustellen (engl. bold), muss er also z. B. zwischen <b>
und </b> stehen, kursiv gesetzter Text wird von <i> bis </i> eingeschlossen, mit <font
color=“red“ size=“12“ line-height=“20“>Nur ein Beispiel</font> wird der enthaltene Text 12
Pixel hoch und in rot dargestellt (zu Farben später mehr), die Zeilenhöhe mit 20 Pixeln
festgelegt, und und und ...
Elemente und Attribute lassen sich miteinander kombinieren, allerdings nicht beliebig!
(Sie können ja probehalber in einem WebCT Vista-Kurs in eine Start- oder Fußzeile ein Tag
einfügen, z. B. eine Überschrift: Sie werden, da Sie ja in eine bereits bestehend Webseite
einfügen, auch ohne HTML/XHTML-Grundgerüst korrekt angezeigt!)
Eine Ausnahme bilden so genannte Standalone-Tags, die bei älteren HTML-Versionen nicht
geschlossen werden müssen, so zum Beispiel <br> für einen Zeilenumbruch (engl. break).
In XHTML allerdings müssen Standalone-Tags sehr wohl geschlossen werden.
Während ein HTML-Beispiel für einen Zeilenumbruch also so aussähe:
Textteil 1 <br>
Textteil 2
Sähe es in XHTML folgendermaßen aus:
Textteil 1 <br />
Textteil 2
Alternativ könnte man statt dem „sich selbst schließenden“ <br /> in XHTML auch <br><br/>
notieren.
9
eBologna – AP 3
Dokumentation & Materialien
Sie sehen also: Wir haben hier drei verschiedene Varianten, einen simplen Zeilenumbruch zu
erzeugen. Alle drei werden von aktuellen Webbrowsern richtig interpretiert, wichtig ist nur, dass
Sie sich für eine Variante entscheiden und diese dann auch innerhalb eines HTML-Dokumentes
beibehalten.
Sie müssen auch weder eine neue Sprache mit völlig unverständlichen regionalen Dialekten
lernen, noch jede einzelne „Vokabel“ auswendig können: Diese Arbeit nehmen Ihnen
„Wörterbücher“ in Form von Online-Syntaxreferenzen oder in HTML-Editoren enthaltene
Bibliotheken ab.
Und bevor wir zu einer kompletten HTML-Datei kommen, noch etwas Grundsätzliches zu Tags:
HTML ist eigentlich nicht dazu da, Text visuell zu formatieren wie mit einem
Textverarbeitungsprogramm! HTML soll Text strukturieren, wie in unserem ersten Beispiel:
<h1>..<h1> definiert eine Überschrift, wie groß und fett sie am Bildschirm erscheint hängt vom
Webbrowser und dem verwendeten System beim Betrachter ab!
Es gibt eine Unzahl an Tags zur Textformatierung: Sie können sie bei Bedarf in den SELFHTMLVerzeichnissen nachschlagen. Wenn Sie später mehr Übung haben, können Sie auch beginnen
HTML-Grundgerüst und Angaben zur Textverarbeitung (in einer .css Datei) zu trennen. Für den
Beginn wäre das zu viel, daher nur eine kurze Einführung:
HTML UND CSS
Viele Tags gelten mittlerweile als veraltet (wie z. B. <b>...</b>, <font>..</font>), vor allem
sollten früher gebräuchliche absolute Angaben zu Breite, Höhe, Farbe etc. innerhalb des HTMLQuelltextes vermieden werden.
Diese Aufgabe kann von CSS (Cascading Style Sheets) Formatvorlagen übernommen werden:
Anstatt im HTML-Quelltext jeden Textteil einzeln zu formatieren wird eine .css-Datei erstellt, in
der alle gewünschten Formatierungsbefehle eingetragen werden. Diese wird mit der HTML-Datei
verknüpft, Textstrukturierung und dessen visuelle Formatierung werden also voneinander
getrennt. CSS ermöglicht es, die Darstellung dem jeweiligen Ausgabemedium anzupassen und
bietet weitaus mehr als HTML, wenn es um Farbe, Schrift oder die Positionierung von Bildern
geht.
Einen kurzen Überblick über CSS bietet einmal mehr Wikipedia, zudem ist es natürlich
10
eBologna – AP 3
Dokumentation & Materialien
ausführlich in SELFHTML dokumentiert.
Link zu CSS in Wikipedia: http://de.wikipedia.org/wiki/Cascading_Style_Sheets (Stand:
23.10.2006)
Ein Beispiel wäre die vorher erwähnte Unet-Webseite:
Im Head eingeschlossen finden sich die Zeilen:
<link rel="stylesheet" media="screen" href="/ZID/css/screen.css" type="text/css" />
<link rel="stylesheet" media="print" href="/ZID/css/print.css" type="text/css" />
Die erste Zeile dient den Formatierungsbefehlen für die Bildschirmanzeige, die in der Datei
screen.css abgespeichert sind, die zweite jenen zur Ausgabe auf Druckern.
Nach den einführenden Bemerkungen zu HTML/XHTML und CSS wird es nun wirklich Zeit für das
erste komplette selbst erstellte HMTL-Dokument:
HTML/XHTML und WebCT Vista
Wenn Sie in WebCT Vista eine neue Inhaltsdatei erstellen und von der WYSIWYG-Ansicht auf
Quelltext umschalten, sehen Sie Folgendes:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<title></title>
</head>
<body>
</body>
</html>
Das Grundgerüst der von WebCT Vista erstellten HTML-Datei ist, wie sie am xmlns-Attribut
sehen, eine XHTML-Datei. Solange Sie also in der WYSIWYG-Ansicht arbeiten, erzeugt der Editor
XHTML-Quelltext.
Sollten Sie also selbst erstellten Quelltext hier einfügen, laufen Sie womöglich Gefahr zwei
verschiedene Standards zu mischen. Die Seite wird wahrscheinlich trotzdem meistens ohne
Probleme angezeigt, da die meisten modernen Browser damit zurechtkommen. „Sauberer
Quelltext“ ist es allerdings nicht – es wäre ähnlich unschön wie neue und alte Rechtschreibung in
11
eBologna – AP 3
Dokumentation & Materialien
einem Text zu mischen.
Sie sollten daher entweder von Anfang an XHTML-konform schreiben (zu Beginn wohl etwas zu
mühsam) – oder Sie löschen im von WebCT Vista erstellten Quelltext das Grundgerüst und
ersetzen es durch das von Ihnen bzw. Ihrem Editor verwendete, was für Anfänger einfacher ist.
Wenn Sie das Gefühl haben, die Grundregeln von sauber geschriebenem HTML zu verstehen,
können Sie allmählich mit dem Umstieg auf XHTML beginnen.
(Am allerglücklichsten sind natürlich jene, die einen Editor mit funktionierender Fehlerkontrolle
auch für verschiedene HTML/XHTML-Versionen besitzen.)
Alternativ gibt es auch einige Adressen, unter denen man den Quelltext später auf seine Validität
überprüfen kann:
http://infohound.net/tidy/ (Stand: 23.10.2006)
http://www.w3.org/People/Raggett/tidy/ (Stand: 23.10.2006)
http://validator.w3.org/ (Stand: 23.10.2006)
Empfehlenswerte Lektüre zum Thema in SELFHTML im Kapitel: Regeln beim Editieren von
HTML
HTML-ÜBUNG 1: Eine erste Seite mit Verweisen
Noch kurz zur Erinnerung:
1. Tags stehen in spitzen Klammern,
2. werden klein geschrieben,
3. bis auf wenige Ausnahmen immer geschlossen,
4. Attribute in Tags werden zwischen „“ oder ‚’ gesetzt! Welche Art Ihnen mehr
zu sagt ist gleich, aber behalten Sie ein Schema bei!
Also, basteln wir uns unser eigenes, erstes HTML-Dokument:
Übrigens: Wie bei jeder PC-gestützten Arbeit gilt: Speichern! Speichern! Speichern!
Manche Editoren nehmen Ihnen das durch eine Autosave-Funktion ab, aber verlassen Sie sich
nicht darauf, denn nichts ist ärgerlicher als mehrere Seiten Text noch einmal schreiben zu
müssen!
Erstellen Sie ein noch leeres Dokument mit dem Editor Ihrer Wahl und speichern Sie es unter
12
eBologna – AP 3
Dokumentation & Materialien
dem Dateinamen index.htm oder index.html.
Warum index.htm? Sollten Sie später eine eigene Webseite erstellen wollen, brauchen Sie eine
Startseite, mit der alles beginnt. Wie bei jeder gut geordneten Textsammlung steht der Index
ganz am Anfang (oder am Ende), so auch bei HTML. Für die Arbeit in WebCT Vista brauchen
Sie das nicht zu tun, solange Sie die Grundstruktur beibehalten und Ihren Quelltext
nur in bereits erzeugte Inhaltsdateien einfügen.
Schreiben Sie nun erst einmal ein Grundgerüst – die Dokumenttypdeklaration lassen wir erstmal
weg:
<html>
<head>
<title>Beispiele für Verweise</title>
</head>
<body>
<h1>Empfohlene Links</h1>
<p>
<a href="http://www.univie.ac.at/">Universität Wien</a>
Start- und Informationsseite der Universität Wien<br />
<a href="http://elearning.univie.ac.at ">Elearning Universität Wien</a>Einstieg zur
Elearning-Plattform der Uni Wien<br />
<a href="http://de.selfhtml.org/">Selfhtml</a>
Deutsche HTML - Referenz<br />
</p>
<p>
<a href="Seite2.htm">Weiter zu Seite 2</a><br />
<a href="./">Weiter zu Seite 3</a>
</p>
</body>
</html>
Speichern Sie das Dokument nun ab und öffnen Sie es mit Ihrem Browser.
Gratuliere! Sofern Sie ungefähr (je nach Browser) folgende Seite sehen, haben Sie soeben Ihre
erste eigene Webseite erstellt; hoffentlich nicht nur per Copy & Paste ☺
13
eBologna – AP 3
Dokumentation & Materialien
Sie sehen eine Überschrift 1. Ordnung, einen mit <p> begonnenen Zeilenumbruch, dazwischen
eine Linksammlung, nach der der Zeilenumbruch mit </p> wieder geschlossen wird.
Zur Notation im Quelltext: Leerschritte und Zeilenumbrüche im Quelltext dienen nur der
Übersichtlichkeit! Für einen sichtbaren Zeilenumbruch müssen Sie Tags verwenden, genauso
können Sie den Quelltext auch in einer Wurst schreiben:
<html><head><title></title></head><body><h1>Empfohlene Links</h1></body></html>
usw. Spätestens bei längerem Quelltext wird es aber schwer, sich da zurechtzufinden.
Verweise/Links in HTML
Das HTML-Element „a“ (a = anchor = Anker) gilt für Verweise (links). Damit aus diesem
Element ein funktionierender Link wird, ist das Attribut href nötig (href = hyper reference =
Hyper(text)-Referenz). Auf das href-Attribut folgt das gewünschte Verweisziel, also die korrekte
Adresse der Datei, auf die verweisen wird. Als Inhalt des a-Elements, also zwischen <a> und
</a>, notieren Sie den Text, der dem Anwender als Verweis angeboten wird (bei den meisten
Webbrowsern andersfarbig, meist unterstrichen).
Bei Verweisen auf Webadressen besteht der Link logischerweise aus kompletten
http://etc.pp-Adressen, idealerweise bei Linksammlungen um einen kurzen Kommentar ergänzt.
Bei internen Verweisen – zum Beispiel auf lokale Ziele wie Ihre (noch nicht erstellte) zweite
Seite , müssen Sie die Regeln für Referenzieren in HTML verwenden. In WebCT Vista ist die
Hilfe-Funktion geeignet, die korrekte (WEBDAV)-Adresse herauszufinden, auf die Sie verweisen
14
eBologna – AP 3
Dokumentation & Materialien
müssen. Ich empfehle daher, zuerst nur einzelne Dokumente zu bearbeiten, bevor Sie eine
verschachtelte Struktur mit aufeinander verweisenden Webseiten erstellen!
Prinzipiell gilt: Solange all Ihre HTML-Dateien im gleichen Verzeichnis liegen, genügt als Verweis
der Dateiname – wie z. B Seite1.htm. Wenn Sie auf ein untergeordnetes Verzeichnis namens
bilder Verweisen, in dem z. B Ihr Bild1.jpg ist, würde der Verweis auf dieses Bild
<a href=“bilder/bild1.jpg“>Verweis zu Bild 1</a> lauten.
Die Farben für Verweise sind bei Webbrowsern standardmäßig blau für noch nicht besuchte und
violett für bereits besuchte Seiten. Sie können dies natürlich ändern, allerdings brauchen Sie
dazu auch Stylesheets (CSS).
Wie das genau geht erfahren Sie im SELFHTML-Abschnitt: Verweise optisch gestalten mit
CSS.
In Ihrer Index.htm findet sich am Ende ein Link zu einer Seite namens Seite2.htm: Diese
werden wir nachher noch erstellen!
Grafiken in HTML
Wenn Sie aber etwa ein Bild nicht nur als Verweis anbieten, sondern direkt auf der Seite
anzeigen oder gar als Hintergrundbild verwenden wollen, dann müssen Sie Folgendes beachten:
Für die Darstellung im Webbrowser muss Ihr Bild ein bestimmtes Format verwenden – gemeint
ist hier nicht die Größe sondern die Dateiart!
Geeignete Grafikformate für die Darstellung in Webbrowsern sind GIF und JPEG sowie PNG.
Wenn Sie selber Grafiken erzeugen oder eigene Photos verwenden möchten, die noch nicht in
einem dieser Formate vorliegen, sollten Sie ein Bildbearbeitungsprogramm verwenden, das die
Konvertierung in JPEG und GIF erledigt.
Näheres dazu erfahren Sie bei SELFHTML im Abschnitt Grafikformate für Web-Seiten.
Definiert wird ein Bild mit dem Standalone-Tag <img>, dazu kommen zur korrekten Bildanzeige
wie bei Verweisen noch Attribute, nämlich src (img = image = Bild, src = source = Quelle) und
15
eBologna – AP 3
Dokumentation & Materialien
alt (für alternativ – Alternativtext, der sichtbar wird falls das Bild nicht angezeigt werden kann.)
Dieses Attribut muss notiert werden, kann aber leer gelassen werden.
Eine Grafikreferenz zu bild1.jpg, das 200 Pixel hoch und 400 Pixel breit ist und im gleichen
Verzeichnis wie unsere index.htm liegt sähe also zum Beispiel so aus:
<img src=“bild1.jpg“ height =“200“ width=“400“ alt=““ />
Im obigen Beispiel wurde das img Tag XHTML-konform geschlossen. Sie können aber auch nur
die HTML-Grundform <img src=““ alt=““> verwenden.
Unbedingt beachten sollten Sie die Grafikgröße, um lange Ladezeiten zu vermeiden (diese und
andere Einstellungen lassen sich mit Bildbearbeitungsprogrammen optimieren, zudem sollten Sie
idealerweise Breite und Höhe (standardmäßig in der Maßeinheit Pixel = px) angeben – müssen
aber nicht.
Sollte ein Bild zu groß sein und Sie kein Bildbearbeitungsprogramm zur Verfügung haben,
können Sie die Anzeigengröße der Bilder im Browser auch mit relativen Prozentangaben ändern,
z. B. <img src=“bild1.jpg“ height=“50%“ width=“50“ />, oder so auch Verzerrungseffekte
erzeugen! Allerdings kann es dabei zu einer schlechteren Anzeigenqualität kommen, da ein
Browser nun mal kein Bildbearbeitungsprogramm ist.
Details dazu und weitere Möglichkeiten erfahren Sie im SELFHTML-Abschnitt Grafiken und
dessen Unterkapiteln, auch das für Seitenlayouts sicher spannendste Kapitel, wie Sie Ihre
Grafiken auf der Seite positionieren können, passt aus Platzgründen leider nicht hier hinein.
HTML-ÜBUNG 2: Farben, Grafiken, Grafiken als Verweise
Gehen wir noch einmal zu unserer index.htm und erweitern sie mit einem Bild – und ändern im
<body>-Element probehalber gleich die Hintergrundfarbe.
Die Angabe zur Hintergrundfarbe erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit dem
Attribut bgcolor bestimmen Sie die Farbe für den Bildschirmhintergrund (bgcolor = background
color = Hintergrundfarbe).
Es gibt zwei Möglichkeiten, Farben in HTML zu definieren, entweder durch Angabe der RGB
16
eBologna – AP 3
Dokumentation & Materialien
(Rot/Grün/Blau)-Werte in Hexadezimalform oder durch die Angabe eines Farbnamens (wie in
dem <font> Beispiel bei Elemente und Tags). Wenn die Hintergrundfarbe geändert wird ist es
meistens auch sinnvoll, aus Kontrastgründen die Textfarbe zu ändern.
Genaueres dazu in Selfhtml: Farben definieren in HTML; Farben für Hintergrund, Text und
Verweise!
Widmen wir uns nun unserem zweiten Quelltext: Speichern Sie diesen als Seite2.htm!
<html>
<head>
<title>Beispiele für Verweise</title>
</head>
<body bgcolor="#CCFFFF">
<!-- Grafik als Verweis -->
<a href="http://unet.univie.ac.at">
<img src="http://www.univie.ac.at/ZID/img/zidlogo.gif" border="0" alt="Universität
Wien" /></a>
<!-- Beginn Linkliste -->
<h1>Empfohlene Links</h1>
<p>
<a href="http://www.univie.ac.at/">Universität Wien</a> Start- und Informationsseite
der Universität Wien<br />
<a href="http://elearning.univie.ac.at ">Elearning Universität Wien</a> Einstieg zur
Elearning-Plattform der Uni Wien<br />
<a href="http://de.selfhtml.org/">Selfhtml </a> Deutschssprachige HTML - Referenz
</p>
<p>
<a href="index.htm">zurück zur ersten Linkseite</a><br />
<a href="./">Weiter zu Seite 3</a>
</p>
<!-- Grafik ohne Verweis -->
Siegel der Universität Wien:<br />
<img src="http://www.univie.ac.at/de/img/siegel.jpg" />
</body>
</html>
Was Sie jetzt sehen, ist neben einer anderen Hintergrundfarbe nicht nur das Logo des ZID – es
ist zugleich auch ein Link zu dessen Startseite.
17
eBologna – AP 3
Dokumentation & Materialien
Links zu Bildern, die bereits in andere Webseiten eingebettet sind, sind aus zwei Gründen
kritisch:
Erstens aus Copyright-Gründen – fragen Sie, bevor Sie was „klauen“! Zweitens braucht nur das
„verlinkte“ Bild von seinem Ursprungsort gelöscht oder in ein anderes Verzeichnis verschoben zu
werden und Sie sehen nur noch einen leeren Rahmen mit Alternativtext.
Empfehlenswerter ist es also, Grafiken aus dem Web z. B. mit Rechtsklick/„Ziel speichern unter“
abzuspeichern, wenn Sie sie dauerhaft verwenden wollen. Wenn Sie viele Bilder auf Ihrer
Webseite einsetzen wird es für die Übersichtlichkeit im Dateimanager sinnvoll sein, diese in
einem eigenen Verzeichnis abzuspeichern. Denken Sie daran, die Verweise dann auch zu
aktualisieren!
Sie können also eine Grafik in einen Link einbetten und so Grafiken anstelle von Verweistexten
definieren. Die Angabe border=“0“ verhindert, dass der Browser einen Rahmen um das Bild
zieht. Dadurch ist es aber auch nur noch durch die Veränderung des Mauszeigers als Verweis
erkennbar! Selber HTML zu schreiben heißt also auch, stets einen Kompromiss zwischen
Formschönheit und Benutzerfreundlichkeit zu finden.
Herzlichen Glückwunsch!
Damit wäre die erste kleine Einführung in HTML auch schon beendet. Es gibt sicher noch jede
18
eBologna – AP 3
Dokumentation & Materialien
Menge konkrete Fragen speziell zur Textformatierung und Layout-Feinheiten, und ich möchte Sie
ermutigen, sich die Lösungen dazu selber zu erarbeiten beziehungsweise online nach
Quelltextbeispielen zu suchen. Sie werden so sehr viel schneller lernen.
Dadurch, dass Sie jetzt die im Hintergrund arbeitende Sprache ein wenig verstehen und
schreiben können, haben Sie hoffentlich Lust bekommen mehr und mehr selber auszuprobieren.
Ich wünsche allen viel Spaß und hoffe, dass Sie mit Üben, Abschauen, „schamlosen“ Kopieren
und Ausprobieren immer mehr lernen und auch zu Ihrer eigenen Freude und zum eigenen
Nutzen anwenden können. Die besten Anleitungen und Tipps zu HTML finden sich logischerweise
weniger in schnell veraltenden Büchern als vielmehr im Internet selber – nützen Sie das und
scheuen Sie sich nicht davor, Fragen zu stellen!
Anbei noch eine Liste mit Adressen, die Ihnen bei Ihren ersten Schritten mit HTML sehr hilfreich
sein können.
19
eBologna – AP 3
Dokumentation & Materialien
LINKLISTE
Universität Wien:
Der zentrale Informatikdienst der Universität Wien bietet neben umfangreichen Schulungen und
Unterlagen zu WebCT Vista und eLearning auch HTML-Grundkurse an:
http://www.univie.ac.at/ZID/ (Stand: 23.10.2006)
Das eLearnigCenter der Universität Wien:
http://elearningcenter.univie.ac.at/ (Stand: 23.10.2006)
Wikipedia (deutsch):
Obwohl akademisch umstritten neben „googeln“ immer noch die effektivste Art, sich schnell
Informationen zu besorgen – auch zu HTML.
http://de.wikipedia.org/html (Stand: 23.10.2006)
Deutschsprachige HTML-Tutorials:
Die absolute Referenzseite, wenn es um HTML geht:
http://de.selfhtml.org (Stand: 23.10.2006)
Das Selfhtml-Helferlein, z. B für die korrekte Auszeichnung von Farben in HTML:
http://de.selfhtml.org/helferlein/index.htm (Stand: 23.10.2006)
Eine gleichfalls ausgezeichnete Einführung in XHTML, CSS und Webdesign:
http://jendryschik.de/wsdev/einfuehrung/ (Stand: 23.10.2006)
Überprüfung von HTML-Dokumenten auf Version und Richtigkeit (englisch):
http://validator.w3.org/ (Stand: 23.10.2006)
http://infohound.net/tidy/ (Stand: 23.10.2006)
http://www.w3.org/People/Raggett/tidy/ (Stand: 23.10.2006)
20
eBologna – AP 3
Dokumentation & Materialien
Empfehlenswerte HTML-Editoren und Bildbearbeitungsprogramme:
Aus persönlicher Erfahrung empfehle ich bei den Gratis-Programmen für HTML-Editoren
wahlweise PHASE 5, NVU oder jEdit. Bei Grafikprogrammen als Bildbetrachtungsprogramm mit
kleinen Bearbeitungsmöglichkeiten IrfanView, als Grafikerstellungsprogramm GIMP. Das sind
natürlich rein persönliche Vorlieben!
http://aktuell.de.selfhtml.org/links/html-editoren.htm (Stand: 23.10.2006)
http://aktuell.de.selfhtml.org/links/grafik-programme.htm (Stand: 23.10.2006)
Lukas Schmallegger
Wien, Oktober 2006
Unterstützt mit Mitteln des bm:bwk im Rahmen der Ausschreibung e-Learning/e-TeachingStrategien an Universitäten und Fachhochschulen
21