Html-Kurs

30.10., 6.11., 13.11. 2003, jeweils um 18:00 Uhr (s.t.) in U0-139

30.10.2003

Begriffsdefinition: "html"

html = hyper text markup language = Hypertext-Auszeichnungssprache = Sprache, um Hypertext aufzuschreiben
Normaler Text ist linear (ein "Buchstabenwurm"). Hypertext ist im Gegensatz dazu ein nicht-lineares Medium zur Präsentation von Texten: er besteht aus mehreren Einheiten von Text, die untereinander vernetzt sind.
Für bestimmte Textarten (z.B. Lexika) ist Hypertext wesentlich besser geeignet als für andere (z.B. klassische Romane)

Wie sieht eine html-Datei prinzipiell aus?

Hier sieht man das Grundgerüst einer html-Datei anhand einer ersten Beispiel-Datei (wird in einem neuen Fenster geöffnet).
Den Quelltext der html-Datei erhält man in den meisten Browsern über die rechte Maustaste oder über einen entsprechenden Menüpunkt. Alternativ kann man die html-Seite auch lokal auf dem Rechner abspeichern und mit Hilfe eines Text-Editors betrachten.
Erläuterung der Beispiel-Datei:
Erste Zeile: Angabe des Dokumenttyps, u.a. der verwendeten html-Version (html 4.01 ist aktuell). Es gibt zwei verschiedene html-Varianten, nämlich die transitional-Variante sowie die strict-Variante. Die transitional-Variante läßt einige ältere Befehle zu, die in den neueren html-Versionen ersetzt wurden und eigentlich nicht mehr verwendet werden sollen. Die strict-Variante läßt nur die Befehle der neueren html-Versionen zu und enthält einige weitere Anforderungen an die Struktur des Dokuments.
Der Sinn der "transitional"-Variante ist die Kompatibilität zu äteren Browsern, die die neuen Befehle nicht kennen (z.B. Netscape 3 u.ä.). Da die transitional-Variante jedoch auch weniger Einschränkungen bezüglich der Struktur des Dokumentes stellt, sollte man sie als Anfänger zunächst verwenden, bis man sich einmal näher damit beschäftigt hat.
Fazit: Einfach die erste Zeile immer so übernehmen, wie sie hier steht und erstmal nicht weiter drüber nachdenken... :)

Der eigentliche Inhalt der html-Datei steht in sog. html-Elementen, welche durch einleitende und schließende tags (<...> bzw. </...>) markiert werden.
Bsp: <html>...</html>
html-Element: Wurzelelement der Datei, muß immer den ganzen html-Teil umfassen (also alles außer der ersten Zeile). Das html-Element hat genau zwei direkte Unter-Elemente, head und body.
head: hier stehen die Kopfdaten der Datei, das wichtigste Element ist der Fenstertitel <title>Fenstertitel</title>. Die weiteren möglichen Angaben werden in einem späteren Kapitel besprochen.
body: Enthält den eigentlichen Inhalt der Datei, also alles, was nachher im Browserfenster auftaucht.
<h1>...</h1> steht für eine Überschrift (header) 1. Ordnung (= groß und wichtig).
<p>...</p> steht für einen Textabsatz (paragraph)
Wie man sieht: tags können (und müssen sogar manchmal) verschachtelt werden:
<html> ... <body> <h1>...</h1> </body> <html>
Beliebte Fehlerquelle: Die Elemente müssen immer in der richtigen Reihenfolge wieder geschlossen werden - das innerste Element zuerst!
Deutsche Sonderzeichen (ä, ö, ü, ß) müssen "maskiert" werden:
ä als ä (a Umlaut)
Ä als Ä
ö als ö
Ö als Ö
ü als ü
Ü als Ü
ß als ß (sz-Ligatur)
Viele - vor allem deutsche - Browser stellen auch ein über die Tastatur eingegebenes "ä" richtig als "ä" dar, darauf kann man sich aber nicht verlassen - fremdsprachige Browser stellen dann ein Fragezeichen ein anderes (fremdsprachiges) Sonderzeichen dar - in Thailand hatte so manche deutsche Webseite z.B. diverse Schnörkel statt deutscher Umlaute zu bieten.
Fazit: Man nehme die saubere Lösung und benutze die oben angegebenen Schreibweisen für die Umlaute, dann kann nichts passieren.
Ein weiteres nützliches Sonderzeichen ist € (Resultat: €).
html-eigene Zeichen müssen ebenfalls maskiert werden, wenn sie als normaler Text auftauchen sollen:
& als & (Ampersand)
< als < (lower than)
> als >(greater than)
Weitere Sonderzeichen kann man bei Bedarf z.B. auf der Sonderzeichenseite von selfhtml nachschauen (http://www.selfhtml.teamone.de.)

Zusammenfassung:

Eine html-Datei ist eine reine Textdatei, in der der Text steht, der auf der Netzseite auftauchen soll. Dieser Text wird in html-Elemente geschrieben, welche dem Browser die gewünschte Struktur und das gewünschte Format des Textes bzw. der einzelnen Textteile mitteilen. Die html-Elemente werden mit Hilfe der tags begrenzt (<xyz>Inhalt</xyz>).
Die verfügbaren html-Elemente zur Strukturierung und Formatierung des Textes sind vordefiniert.
Die einzige Schwierigkeit beim Schreiben von html-Seiten ist es, die verfügbaren html-Elemente (bzw. die tags) und ihre richtige Verwendung zu lernen. Die grundlegenden Elemente lernt man sehr schnell, seltener verwendete Elemente kann man jeweils bei Bedarf nachschlagen (z.B. wieder einmal bei selfhtml).

Erste eigene Experimente

Was muß ich generell beim Bearbeiten von html-Seiten beachten?
Dateinamen klein schreiben, keine Sonderzeichen verwenden (außer vielleicht einem "_"), Dateiendung .htm oder .html
Die Namen der tags und alles in den tags (also zwischen den < und >) klein schreiben (ist zwar für html noch nicht zwingend, aber für neuere Standards schon (xhtml) - außerdem vermeidet man so versehentliche Fehler bei gemischter Groß- und Kleinschreibung.)
html reagiert nur auf das, was explizit (also als tag) angegeben ist, sonstige Zeilenumbrüche, Einrückungen etc. werden einfach ignoriert! (vgl. Zeilenumbrüche im Arbeitstext)

Jetzt nehmen wir uns einen ersten Arbeitstext vor - dafür die Datei lokal auf dem eigenen Rechner abspeichern und mit einem Texteditor öffnen (am besten ein wirklicher Texteditor wie z.B. edit, nicht aber word, das baut gerne Müll in die Datei ein). Wahlweise kann man auch einen echten html-Quellcode-Editor nehmen (z.B. Arachnophilia). Der einzige Vorteil ist dabei das sogenannte syntax highlighting, welches eine farbige Darstellung der verschiedenen Sprachelemente bewirkt und somit die Übersicht etwas erleichtert - wenn man sich einmal eingelesen hat, funktioniert ein regulärer Textedior aber genauso gut.
Zum Anschauen der lokal abgespeicherten Datei wählt man diese im Web-Browser unter Datei öffnen aus.

Überschriften als Überschriften (header) auszeichnen - es gibt h1, h2, h3, h4, h5, h6, die unterschiedlich groß dargestellt werden - ausprobieren; der Sinn dahinter: Ober- und Unterüberschriften. Achtung: Ich muß immer das richtige schließende tag verwenden - auf <h2> folgt </h2>, auf <h3> folgt </h3> etc.
Textpassagen in mehrere Absätze (paragraph) aufteilen
Merke: Bei Paragraphen werden die Zeilenumbrüche vorher und nachher automatisch eingefügt.
Wie kriege ich einen "normalen" Zeilenumbruch hin? Einfach mal <br> ausprobieren.
Merke: Es gibt auch einzeln stehende tags (die also nicht wieder geschlossen werden müssen; man kann allerdings <br /> schreiben (für xhtml notwendig)
Manchmal ganz nützlich: Man kann Kommentare in die html-Datei schreiben, die im Webbrowser nicht angezeigt werden (es sei denn, man schaut sich den Quellcode an, also keine Geheimnummern reinschreiben) - sie sehen so aus: .
Allerdings sollte die Zahl und Größe der Kommentare nicht überhand nehmen, da sie die html-Datei nur unnötig vergröß&ern.
Stellt der Browser die frisch bearbeitete Datei seltsam dar, habe ich vermutlich vergessen, die tags alle in der richtigen Reihenfolge wieder zu schließen.
Merke: Viele Browser stellen auch fehlerhafte html-Dateien einigermaßen lesbar dar, deswegen muß ich immer selber nochmal meinen Quelltext überprüfen, ob ich keine Fehler gemacht habe. Außerdem gilt leider, daß ein und dieselbe Seite in verschiedenen Browsern doch deutliche Unterschiede aufweisen kann - bevor ich eine Seite wirklich ins Internet stelle, sollte ich sie deshalb zumindest mit zwei verschiedenen Browsern getestet haben (Internet Explorer, Opera, Mozilla, Netscape...).

Das Wichtigste bei Hypertext: die Links

Es gibt verschiedene Arten von Links:

Verweise auf eine Datei - entweder lokal oder an einer beliebigen Stelle im www liegend
Verweise auf eine bestimmte Stelle innerhalb einer Datei mit Hilfe sogenanter Anker
E-Mail-Verweise, die ein Mailfenster öffnen

Verweise auf eine andere Datei sehen so aus:<a href="Datei, auf die verwiesen wird">Text, unter dem der Link liegt</a>
Erklärung: a für anchor = Anker und href für hyper text reference. Dabei ist a der Name des Elementes und href="" ein Attribut des Elementes.
Links werden standardmäßig blau und unterstrichen dargestellt.
Zum Üben: speichere die Beispiel-Seite lokal ab und füge in den Arbeitstext einen Link darauf ein:
Wenn die Datei im gleichen Verzeichnis liegt, genügt der Dateiname href="erstesbeispiel.html". Liegt sie ein Verzeichnis höher, schreibt man href="../erstesbeispiel.html". Liegt sie im Verzeichnis meinVerzeichnis, schreibt man href="meinVerzeichnis/erstesbeispiel.html"
Jetzt bitte noch einen Link auf eine externe Seite, z.B. www.tagesschau.de (href="http://www.tagesschau.de") oder diesen Html-Kurs (href="http:www.ktvt.de/htmlkurs/htmlkurs.html").
Ich kann prinzipiell Links auf jeden Dateityp setzen, den ich haben will (html, txt, doc, zip, exe, ppt, pdf, ...). Einige davon werden im Browser direkt angezeigt (html, evtl. auch txt, bei entsprechendem Plugin auch pdf), bei anderen bietet der Browser die Dateien zum Abspeichern an (z.B. pdf, ppt). Will ich also meinen Powerpoint-Vortrag zum Download anbieten, reicht es aus, als Verweis href="meinVortrag.ppt" zu schreiben, der Browser bietet dann automatisch das Abspeichern an, wenn jemand den Link anklickt.
An dieser Stelle sei gesagt, daß man zum Download bereitstehende größere Dateien vorher komprimieren sollte (als .zip o.ä.) - es reduziert unnötige Netzbelastung und außerdem hängt nicht jeder an einer Uni-Leitung :)

Verweise auf eine bestimmte Stelle innerhalb einer Datei sind vor allem bei langen Dokumenten sehr praktisch. Sie bestehen aus zwei Teilen: dem Anker an der Stelle, auf die verwiesen werden soll und dem Verweis auf den Anker. Den Anker definiert man mit <a name="Name des Ankers">Text des Ankers, kann auch leer sein</a>.

<a href="#Name des Ankers">Text des Links</a>

Es sind auch Verweise auf eine bestimmte Stelle in einem anderen Dokument möglich. Dafür wird der Anker wie eben definiert. Der Verweis aus einer anderen Datei heraus auf den Anker funktioniert nun so: <a href="dateiname.html#ankername">Text des Links</a>.
Bei einer nicht lokalen, sondern an einer beliebigen Stelle im www liegenden Datei funktioniert der Verweis analog als <a href="http://www.ktvt.de/htmlkurs/htmlkurs.html#links">Hier gibt's Infos zu Links</a>
Ankernamen dürfen sowohl groß als auch klein geschrieben sein, man sollte sie dann aber einheitlich verwenden (und am besten nicht zwei Anker definieren, die sich nur durch Groß - bzw. Kleinschreibung unterscheiden).

E-Mail-Verweise werden z.B. gerne benutzt, um den Besuchern einer Netzseite eine einfache Möglichkeit für Rückmeldungen zu geben. Sie werden ähnlich zu normalen Verweisen wie folgt definiert:<a href="mailto:gewuenschte@adresse.de">Text des Verweises</a>
Man kann bei E-Mail-Verweisen direkt weitere Informationen zur Mail angeben, die zwar nicht im html-Standard festgelegt sind, aber von den meisten Browsern entsprechend interpretiert werden.
Beispiel:<a href="mailto:katharina@ktvt.de?subject=Huhu!">Text des Verweises</a>
Nähere Informationen zu den weiteren möglichen Angaben im E-Mail-Verweis findet man auf der entsprechenden Seite von selfhtml.

Wie kann ich meinen Text strukturieren?

Zur besseren Übersichtlichkeit verwenden wir im Folgenden einen neuen Arbeitstext.

Wir kennen schon:
- Überschriften: <h1>...</h1> bis <h6>...</h6>
- Absätze: <p>...</p>
- Zeilenumbrüche: <br>

Listen: Es gibt nummerierte und unnummerierte Listen.
Unnummerierte (ungeordnete) Listen definiert man so:

Quelltext:		Resultat:
`<ul>` (unordered list) `<li>erster Listenpunkt</li>` (list item) `<li>zweiter Listenpunkt</li> <li>dritter Listenpunkt</li> </ul>`		Erst ein bißchen Text, um den Effekt zu demonstrieren und dann die Liste: erster Listenpunkt zweiter Listenpunkt dritter Listenpunkt

Nummerierte (geordnete) Listen werden analog wie folgt definiert:

Quelltext:		Resultat:
`<ol>` (ordered list) `<li>erster Listenpunkt</li> <li>zweiter Listenpunkt</li> <li>dritter Listenpunkt</li> </ol>`		Erst ein bißchen Text, um den Effekt zu demonstrieren und dann die Liste: erster Listenpunkt zweiter Listenpunkt dritter Listenpunkt

Zusätzlich gibt es noch sogenannte Definitionslisten, die aus zu definierenden Ausdrücken und der zugehörigen Definition bestehen. Sie werden wie folgt definiert:

Quelltext:		Resultat:
`<dl>` (definition list) `<dt>zu definierender Ausdruck</dt>` (definition term) `<dd>Definition</dd>` (definition definition) `</dl>`		Erst ein bißchen Text, um den Effekt zu demonstrieren und dann die Liste: Ausdruck1 Definition Ausdruck2 Definition Ausdruck3 Definition Ausdruck4 Definition

Längere Zitate können mit <blockquote>Text des Zitates</blockquote> abgesetzt werden - dabei bestimmt (zunächst, nähere Informationen folgen später) der Browser, wie genau das Zitat dann dargestellt wird (meistens eigerückt).
Man kann auch Adressen mit Hilfe von <address>Adresse</address> absetzen - die Darstellungsweise wird wieder dem Browser überlassen.
Trennlinien über die gesamte Fensterbreite bzw. die gesamte Breite des übergeordneten Elementes erzeugt man mit <hr>.

06.11.2003

Und wie formatiere ich meinen Text? - Grundlagen

Hier findet sich ein neuer Arbeitstext, der so ganz nebenher das bisher gelernte wiederholt.
Zunächst eine simple Formatierungsanweisung, die jedoch sehr nützlich sein kann. Normale Leerzeichen werden in html immer als Stellen behandelt, an denen die entsprechende Zeile umgebrochen werden kann (einfachste Verdeutlichung: man verändere einmal kontinuierlich die Größe eines Browserfensters). Es gibt jedoch Stellen im Dokument, an denen kein Umbruch erfolgen sollte, z.B. bei Angaben wie "50 €". Um einen Zeilenumbruch zwischen "50" und "€" zu verhindern, setzt man dazwischen kein normales Leerzeichen, sondern den Befehl   (non breaking space), also 50 €.
Bei html gibt es die üblichen physischen Auszeichnung für Text:
- Fetter Text wird durch <b>Fetter Text</b> erzeugt (bold)
- Kursiver Text wird durch <i>Kursiver Text</i> erzeugt (italic)
- Damit kann man auch fetten, kursiven Text erzeugen: <b><i>fetter, kursiver Text</i></b>
  Bei der Verschachtelung darauf achten, dass man die tags wieder in der richtigen Reihenfolge schließt: von innen nach außen!
- Dicktengleich formatierten Text erzeugt man mit <tt>dicktengleicher Text</tt>.
- Manchmal benötigt man auch ^{hochgestellten} oder _{tiefgestellten} Text, z. B. bei H₂0:
  <sup>hochgestellter Text</sup> (superscript)
  <sub>tiefgestellter Text</sub> (subscript)
Formatieren der Schriftart, -farbe, -größe etc. ist leider etwas komplizierter und folgt deswegen erst im nächsten Abschnitt.
Der Vollständigkeit halber noch zwei weitere Punkte, die jedoch eher selten zum Einsatz kommen:
- Bei html gibt es auch logische Textauszeichnung wie z.B. <em>...</em> (empathisch) oder <strong>...</strong>, deren Darstellung von den Einstellungen des Browsers abhängt. Nähere Informationen finden sich unter http://www.selfhtml.teamone.de/html/text/logisch.htm
- Man kann sog. präformatierten Text angeben, welcher exakt so abgebildet wird, wie er geschrieben wurde (inklusive aller Leerzeichen). Diese Gestaltungsmöglichkeit wird eigentlich nur beim Zitieren des Quelltextes von Programmen verwendet: <pre>Hier steht der präformatierte Text</pre>

Formatieren für Fortgeschrittene: Cascading Stylesheets

In den früheren html-Versionen gibt es diverse Befehle zur direkten Formatierung z.B. von Schriften, die auf vielen Netzseiten auch noch verwendet werden. Mittlerweile sollte man diese Befehle aber nicht mehr verwenden (es sei denn, man benötigt unbedingt Kompatibilität zu alten Browsern, z.B. bei Internet-Shops, die auch mit alten Browsern genauso aussehen sollen, wie der Programmierer es möchte), sondern die sogenannten Cascading Stylesheets (CSS). Die folgenden Beschreibungen wirken auf den ersten Blick vielleicht unnötig kompliziert, man gewöhnt sich aber schnell daran. Zudem erleichtern sie das Arbeiten ganz erheblich, insbesondere bei der einheitlichen Gestaltung mehrerer Webseiten.

CSS ist eine Sprache zur Definition der Formateigenschaften einzelner html-Elemente. Sie sind kein Teil von html, stellen aber eine direkte Ergänzung dar, die von allen neueren Browsern auch unterstützt wird - allerdings sollte man seine fertigen Seiten trotzdem mit den verschiedenen Browsern testen, um unerwünschte Überraschungen zu vermeiden.
Format-Anweisungen können an verschiedenen Stellen des html-Dokumentes auftauchen und haben entsprechend andere Wirkungsbereiche:
- innerhalb eines der bereits bekannten html-Elemente
- innerhalb der noch vorzustellenden, extra für diesen Zweck geschaffenen Elemente <span>...</span> und <div>...<div>.
  Innerhalb von html-Elementen geschriebene Format-Anweisungen gelten jeweils nur innerhalb des entsprechenden Elements.
- im Kopf der html-Datei - diese Angaben gelten für die gesamte Datei
- externe Definition in einer css-Datei, welche im Kopf der html-Datei angegeben wird - Wirkungsbereich ist wiederum die gesamte Datei.

Die einfachste Version: Formatangaben innerhalb der bekannten html-Elemente

Durch <h1 style="color:blue">Text der Überschrift</h1> wird eine blaue Überschrift erzeugt.
<p style="background-color:red">Text des Absatzes</p> erzeugt einen Absatz mit roter Hintergrundfarbe.
Und
<ul><li style="background-color:black;color:white">schwarz-weiß</li> <li style="background-color:yellow;color:green">bunt</li> </ul>
erzeugt eine farbenfrohe Auflistung (so sieht's aus).

Formatangaben innerhalb von html-Elementen werden als Attribut des Elementes geschrieben, also analog zu z.B. href="..." als style="...".
Innerhalb der Anführungszeichen stehen nun eine oder mehrere durch Semikolon getrennte Definitionen der Form name:wert bzw. name:wert;name:wert. Nach der letzten Definition darf ein Semikolon stehen, es ist jedoch nicht zwingend erforderlich. Einige ältere Browser machen Probleme, wenn nach dem Doppelpunkt ein Leerzeichen folgt, deswegen sollte man diese vermeiden.

Die Definitionen zur Festlegung der Vorder- bzw. Hintergrundfarbe lauten color:wert bzw. background-color:wert. Dabei kann der Farbwert entweder mit einer benannten Farbe angegeben werden (s. oben) oder - besser - als Angabe der Rot-, Grün- und Blau-Werte in Hexadezimalform: color:#ffcc99.
Das "#" signalisiert die hexadezimale Schreibweise, dann geben zwei Stellen den Rotanteil, zwei Stellen den Grünanteil und zwei Stellen den Blauanteil an. An jeder Stelle können die Zahlen 0 bis 9 sowie die Buchstaben a bis f stehen (Zahlen auf der Basis eines Sechzehnersystems, nicht des üblichen Zehnersystems, nähere Infos unter http://www.selfhtml.teamone.de/html/allgemein/farben.htm).
Das klingt zunächst kompliziert, läßt sich aber z.B. mit Hilfe von http://www.selfhtml.teamone.de/helferlein/farben.htm stark vereinfachen - einfach mal rumprobieren, bis man die gewünschte Farbe gefunden hat - insgesamt stehen einem mit dieser Notation 16 Millionen Farben zur Verfügung.
Unter http://www.techfak.uni-bielefeld.de/~walter/misc/colorRGB.html findet man z.B. eine umfangreiche Liste an Farben mit ihren jeweiligen Hexadezimalangaben.

Einige Beispiele:
#000000 steht für schwarz,
#ffffff erzeugt weiß,
#888888 erzeugt einen Grauton, #666666 einen dunkleren Grauton, #cccccc einen helleren Grauton,
#ff0000 erzeugt ein reines rot,
#ffeeee erzeugt ein ganz leichtes rosa,#a00000 erzeugt ein sehr dunkles rot
#00ff00 steht für grün
#0000ff steht für blau, #eeffee für ein sehr helles blau, #7777ff für ein mittleres blau
#ffff00 steht für gelb, #aaff00 steht für abgeschwächtes grün mit leicht gelblicher Färbung
#00ffff steht für türkis
#ff00ff steht für magenta, #aa00ff erzeugt eine Mischung zwischen blau und magenta
#804000 erzeugt eine Art braun (Mischung aus dunklem rot und grün)
#ffdc00 erzeugt ein ins Rote gehendes Gelb, welches durch Hinzufügung von etwas blau abgeschwächt wird zu #ffdc64 - der Hintergrundfarbe der Quellcodebeispiele.
Werden Farbangaben als Attribut des body-tags geschrieben, gelten sie für alle Textelemente innerhalb der html Datei, z.B.
<body style="background-color:#663333;color:#ffcc99;">
Solchen Formatanweisungen sind auch in den bereits bekannten Formatierungs-Tags möglich: <b style="color:blue;">Fetter und blauer Text</b> erzeugt fetten und blauen Text.
div ist ein sogenanntes Block-Element, d.h. es beginnt stets mit einem Zeilenumbruch. span ist ein sogenanntes Inline-Element, d.h. es kann auch innerhalb einer Zeile verwendet werden. Werden dem span-Element keine Formatierungsanweisungen mitgegeben, zeigt es keinerlei sichtbare Auswirkungen.

Formatangaben mit Hilfe von `div` und `span`

Formatangaben für Bereiche, die noch nicht in einem html-tag stehen, lassen sich mit den beiden dafür vorgesehenen Elementen div und span realisieren:

<div>...</div> ist ein sogenanntes Blockelement, d.h. es beginnt in einer neuen Zeile und kann andere Blockelemente (wie z.B. <h1>...</h1>,<p>...</p>) enthalten.
<span>...</span> ist ein sogenanntes Inline-Element und bewirkt ohne weitere Angaben gar nichts, noch nicht einmal einen Zeilenumbruch.
Mit <div>...</div> kann man z.B. mehrere Textbausteine innerhalb der html-Datei zentrieren:
<div style="text-align:center">Überschriften, Absätze, Listen, ...</div>
Die Eigenschaft "text-align:center" wird dabei an die in <div>...</div> enthaltenen html-Elemente weitervererbt. So erzeugt
<div> <h1>...</h1> <p>...</p> </div>
das gleiche Resultat wie
<h1 style="text-align:center">...</h1> <p style="text-align:center">...</p>
span verwendet man z.B., um ein einzelnes Wort eines Satzes blau zu färben:
Ein Satz mit einem <span style="color:blue">blauen</span> Wort. ergibt:
Ein Satz mit einem blauen Wort.

Nützliche Formatdefinitionen

Im Folgenden werden einige nützliche Formatdefinitionen aufgezählt. Weitere, seltener verwendete und hier nicht erwähnte Formatdefinitionen finden sich unter http://www.selfhtml.teamone.de/css/eigenschaften/index.htm.

Die Breite und Höhe von Elementen wird durch height und width gesetzt, erlaubt sind numerische Werte wie z.B. Prozent-Angaben.
Ausrichtung von Text-Elementen: text-align, zur Auswahl stehen left - right - center - justify (justify = Blocksatz).
Außenrand: margin-top, margin-bottom, margin-left, margin-right, danach eine numerische Angabe (z. B. in cm oder %)
Es geht auch margin: 1cm 2cm 3cm 4cm für 1 cm oben, 2 cm rechts, 3 cm unten und 4 cm links
Innenabstand: padding-top, padding-bottom, padding-left, padding-right, danach eine numerische Angabe (z. B. in cm oder %)
Rahmen: border[-top, -left, -right, -bottom]-[width, color, style], d.h. erlaubt ist z.B. border-style, aber auch border-top-style
width benötigt eine numerische Angabe
style kann eine der folgenden Angaben erhalten: none (kein Rahmen), dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt durchgezogen)
color benötigt eine Farbe
Eine kleine Beispieldatei.

Schriftformatierung: Es gibt fünf Haupteigenschaften, mit deren Hilfe die Schrift formatiert wird
1. font-family (Schriftart): z.B. Arial, Helvetica, 'Times New Roman' (Schriftarten, die Leerzeichen enthalten, sollten in Anführungszeichen stehen). Sind mehrere Schriftarten angegeben (font-family:Arial,Helvetica,serif), wird vom anzeigenden Browser die erste Schriftart verwendet, die auf dem Rechner installiert ist. Folgende Schriftarten sind auf jeden Fall verfügbar und somit eine gute Wahl als letzte in der Liste der Schriftarten stehen sollte: serif (mit Serifen), sans-serif (ohne Serifen), monospace (dicktengleiche Zeichen).
2. font-style (Schriftstil): italic (schräg) oder normal
3. font-variant (Schriftvariante): small-caps (Kapitälchen) oder normal
4. font-size (Schriftgröße): numerische Angaben (z.B. 12pt oder besser 150%) oder einige vordefinierte Begriffe wie small, medium, large
5. font-weight (Schriftgewicht): bold (fett), bolder (extra-fett), lighter (dünner) oder eine Angabe 100, 200, 300, 400, 500, 600, 700 (entspricht bold), 800, 900
Eine alternative Schreibweise für sämtliche obenstehenden Angaben ist font:Arial small-caps 150%, also font und dann alle gewünschten Eigenschaften in beliebiger Reihenfolge
letter-spacing und word-spacing (plus numerischem Argument) bestimmen den Buchstaben- bzw. Wortzwischenraum
text-decoration: underline (unterstrichen), overline (überstrichen), line-through (durchgestrichen), blink (blinkend, nicht beim Internet Explorer), none
Eine kleine Beispieldatei.

Listenformatierung: list-style-type gib das Format des Aufzählungselementes an, erlaubt sind disc, circle, square bei ungeordneten und - unter anderem - decimal, lower-roman, upper-roman, lower-alpha, upper-alpha bei geordneten Listen sowie none bei beiden Typen.
list-style-position gibt die Einrückung an: inside oder outside - Beispieldatei
Angaben zur Positionierung von Elementen und Textumfluß: siehe http://www.selfhtml.teamone.de/css/eigenschaften/positionierung.htm
Nähere Informationen zu den erlaubten numerische Angaben siehe
http://www.selfhtml.teamone.de/css/formate/wertzuweisung.htm#numerische

Formatangaben im Kopfbereich

Formatangaben können nicht nur innerhalb einzelner html-Elemente, sondern auch im Kopfbereich der html-Datei gemacht werden (also zwischen <head></head>) und gelten dann für die gesamte Datei:

<head> ... <style type="text/css">  </style> ... </head>
So sieht's aus
Der Inhalt des style-tags wird als html-Kommentar verpackt, weil einige ältere Browser sonst Blödsinn darstellen
Die Angaben innerhalb des style-tags haben die Form Selektor1,Selektor2 { Attribut:Wert;Attribut:Wert}. Dabei wird der Name des zu formatierenden Elementes als Selektor benutzt. Die Attribute und Werte werden genauso definiert, wie es in den letzten Abschnitten bereits vorgestellt wurde.
Ein Selektor darf auch mehrfach mit sich ergänzenden Formatangaben vorkommen.

Es gibt noch einige weitere Möglichkeiten, Selektoren zu definieren, die mehr Spielraum bei der Formatierung gestatten:
Sehr interessant für die Formatierung sind einige der sogenannten Pseudoformate:
a:link { font-weight:bold; color:#0000E0; text-decoration:none } a:visited { font-weight:bold; color:#000080; text-decoration:none } a:hover { font-weight:bold; color:#E00000; text-decoration:none } a:active { font-weight:bold; color:#E00000; text-decoration:underline }
definiert das Verhalten von Verweisen (<a ...> ... </a>) je nach deren aktuellen Zustand:
:link = Verweis zu noch nicht besuchten Seiten
:visited = Verweis zu bereits besuchten Seiten
:hover = Verweis, wärend der Anwender mit der Maus darüber führt
:active = Verweis, auf den gerade geclickt wird
Achtung: Diese Angaben sollten immer als letzte im <style> ... </style>-Bereich stehen und stets in der obigen Reihenfolge, da sie sonst eventuell vom Browser nicht korrekt interpretiert werden.
Auch hierzu ein kleines Beispiel.

Selektierung von Elementen innerhalb anderer Elemente: Durch
h1 i {color:blue}
wird erreicht, daß der nur der Inhalt aller i-tags, welche innerhalb von h1-tags vorkommen, blau geschrieben wird. i-tags, welche nicht innerhalb von h1-tags stehen, werden dabei nicht verändert.
Eine weitere wichtige Möglichkeit bei der Formatierung ist die Definition von Klassen, welchen dann im head-Tag ein Format zugewiesen wird.
Klassen werden definiert das Attribut class, welches in jedem html-Tag stehen darf:
<h1 class="betont">Text</h1>
<h2 class="wichtig">Text</h2>
<p class="betont">Text</p>
<span class="wichtig">Text</span>
Die Formatanweisungen im head-Bereich haben dann die folgende Form:
h1.betont { background-color:#ffff00; } .betont { background-color:#0000ff; } .wichtig { font-style:italic; }
Dabei gibt .Klassenname { Definition } Formate an, die bei jedem Auftauchen der Klasse verwendet werden - im obigen Beispiel wird also sowohl der Inhalt des h2-Elements als auch der Inhalt des zweiten Absatzes mit kursiver Schrift dargestellt (Klasse wichtig).
Die mit Hilfe von h1.betont {...} angegebenen Formatanweisungen wirken hingegen nur auf h1-Elemente, denen die Klasse betont zugewiesen wurde.
Die Angabe .betont {...} wirkt sich auf alle Elemente aus, denen die Klasse betont zugewiesen wurde, also auch auf h1-Element der Klasse betont. Die mit Hilfe von h1.betont zugewiesenen Formatangaben haben jedoch Vorrang.
Zum besseren Verständnis gibt es hier wieder mal ein Beispiel.

Zentrale Formatangaben mit CSS-Dateien

Insbesondere bei größeren Projekten ist es sinnvoll, bestimmte Formatangaben zentral in einer css-Datei zu definieren und diese dann nur noch in die html-Datei einzubinden.

Die css-Datei muß eine reine Textdatei sein und darf nur das enthalten, was auch in der html-Datei innerhalb des style-Elementes stehen darf, also Kommentare /*...*/ und Definitionen zentraler Formate: Selektor {Attribut:Wert;Attribut:Wert}
Die Datei wird im Kopfbereich der html-Datei folgendermaßen eingebunden:
<head> <link rel="stylesheet" type="text/css" href="pfadangabe/meineFormatDatei.css"> </head>
So sieht's aus, wenn man die Datei von eben verwendet und die Formatangaben in eine css-Datei verschiebt.
Die Pfadangabe kann dabei entweder relativ oder absolut sein (vgl. den Abschnitt über Links in html).

Kombination verschiedener Formatangaben

Die hier vorgestellten verschiedenen Möglichkeiten der Formatangaben können auch kombiniert werden. Formatangaben werden dabei an innere html-Elemente vererbt (also weitergegeben), eventuell vorhandene innere Definitionen haben aber Vorrang. Beispiel (so sieht's aus):
<head> <style type="text/css">  </style> </head> <body> <p>Absatz, der das Format des gesamten Bodys übernimmt.</p> <p style="background-color:#aaffaa">Absatz mit eigener Hintergrundfarbe und <span style="color:#dd00dd">teilweise</span> sogar eigener Schriftfarbe</p> </body>

Wertvolle Formatierungshilfe: die Tabelle

Ein Gestaltungselement, welches sehr oft zur Gestaltung von html-Seiten eingesetzt wird, sind Tabellen. In den meisten Fällen werden dabei sogenannte "blinde" Tabellen eingesetzt, d.h. Tabellen, deren Zellenbegrenzungen nicht angezeigt werden.
Der prinzipielle Aufbau einer Tabelle (so sieht's aus):
<table border="2">
<tr> (table row)
<th>Kopfzelle der 1. Spalte</th> (table header)
<th>Kopf der 2. Spalte</th>
<th>Kopf der 3. Spalte</th>
</tr>
<tr>
<td>Interessanter Inhalt</td> (table data)
<td>Toller Inhalt</td>
<td>Schöner Inhalt</td>
</tr>
<tr>
<td>Und noch</td>
<td>viel</td>
<td>mehr</td>
</tr>
</table>
Kopfzellen werden dabei automatisch gegenüber den normalen Datenzellen hervorgehoben (meist durch Fettdruck). Man kann sie jedoch auch einfach weglassen und die Tabelle nur aus Datenzellen <td> ... </td> aufbauen.
Sollen einzelne Zellen leer bleiben, empfiehlt es sich, zumindest ein   hineinzuschreiben (also <td> </td>), da sonst - je nach Browser - die Zellenbegrenzungen eventuell nicht dargestellt werden.

Eine Tabelle kann in Kopf-, Körper- und Fußbereich eingeteilt werden. Dies ist einerseits für die Formatierung interessant, andererseits sollte der Browser dann beim Ausdruck langer Tabellen Tabellenkopf und Tabellenfuß auf jeder Seite wiederholen (so sieht's aus):
<table border="2">
<thead>
<tr>
<th>Kopf 1</th>
<th>Kopf 2</th>
<th>Kopf 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Fuß 1</td>
<td>Fuß 2</td>
<td>Fuß 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Körper 1a</td>
<td>Körper 2a</td>
<td>Körper 3a</td>
</tr>
<tr>
<td>Körper 1b</td>
<td>Körper 2b</td>
<td>Körper 3b</td>
</tr>
</tbody>
</table>
Will man die Tabelle wie oben gesehen in verschiedene Bereiche aufteilen, so müssen alle drei Bereiche auftauchen: head, foot und body - und sie müssen in exakt der Reihenfolge definiert werden, wie sie oben steht (erst head, dann foot, dann body).

Einzelne Zellen können sich über mehrere Zeilen bw. Spalten erstrecken:
<td colspan="2">...</td> erstreckt sich über zwei Spalten (column span) und
<td rowspan="3">...</td> erstreckt sich über drei Zeilen.
Insgesamt sollte jede Zeile und jede Spalte der Tabelle immer die volle Anzahl Zellen enthalten, d.h. wenn sich in der ersten Zeile eine Zelle befindet, die sich über drei Spalten erstreckt, sollten in den nachfolgenden Zeilen jeweils drei Zellen vorhanden sein:
<table border="2">
<tr>
<td colspan="3">...</td>
</tr>
<tr>
<td>...</td>
<td colspan="2">...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td rowspan="2">...</td>
</tr>
<tr>
<td colspan="2">...</td>
</tr>
</table>
So sieht's aus.

Man kann eine Tabellenüberschrift definieren, die (theoretisch) auch links bzw. rechts oder unterhalb der Tabelle stehen kann:
<table border="2">
<caption>gewünschte Tabellenüberschrift</caption>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
Achtung! Das caption-Element muß direkt nach dem einleitenden table-Element stehen!
Die Ausrichtung der Überschrift kann man mit Hifle von css bestimmen, diese Angaben werden jedoch leider von den gängigen Browsern nicht interpretiert.
Und wieder mal ein Beispiel.

Tabellen können entweder direkt oder mit Hilfe von CSS formatiert werden. Die direkte Tabellenformatierung ist zwar im aktuellen html-Standard noch zugelassen, man kann jedoch alle gewünschten Eigenschaften auch durch den Einsatz von CSS erreichen. Im Sinne der Einheitlichkeit und Übersichtlichkeit ignorieren wir die direkte Formatierung deswegen einfach kaltlächelnd und gehen direkt zu Tabellenformatierung durch CSS über.

Die Formatierung von Tabellen mit Hilfe von CSS ist im Prinzip bereits bekannt:

Breite und Höhe der Tabelle sowie einzelner Zellen setzt man mit width:90% oder height:50%. Die numerischen Angaben müssen dabei nicht prozentual sein, es empfiehlt sich aber in den meisten Fällen, da man nicht wissen kann, wie groß das jeweilige Browserfenster im Moment ist.
Die Hintergrundfarbe der Tabelle, einzelner Zeilen oder Zellen läßt sich wie bekannt durch background-color:#000000 festlegen.
Die Ausrichtung des Tabellen- bzw. Zellen-Inhaltes wird mit Hilfe von text-align (left, center, right oder justify) bzw. vertical-align (top, middle, bottom und einige weitere Möglichkeiten) gesetzt.
Der Außabstand von z.B. Tabellenzellen zum sie umgebenden Element (Tabellenzeilen) wird mit Hilfe von margin gesetzt.
Der Innenabstand von z.B. Tabellenzellen wird mit Hilfe von padding gesetzt.
Auch die Schrift- und Linkformatierung funktioniert bei Tabellen so, wie sie bereits vorgestellt wurde
Deswegen gibt es an dieser Stelle keine weiteren Erklärungen, sonden nur ein komplexeres Beispiel.
"Blinde" Tabellen werden oft zur ansprechenden Formatierung von Webseiten verwendet. Auch dafür gibt es hier ein etwas ausführlicheres Beispiel, welches auch schon die Einbindung von Graphiken demonstriert (die wird aber auch noch ausführlich erklärt, keine Sorge).

13.11.2003

Jetzt wird's bunt: Graphiken

Graphikformate

Bei der Einbindung von Graphiken in Netzseiten haben sich drei Formate eingebürgert, die auch von allen gängigen Browsern direkt (also innerhalb der Netzseite) dargestellt werden. Dabei handelt es sich nur um pixelbasierte Formate, vektorbasierte Formate konnten sich bisher noch nicht durchsetzen (wem diese Begriffe nicht bekannt sind: einfach ignorieren, es ist nur ein Kommentar am Rande).
gif (graphics interchange format) ist besonders für künstlich erstellte Bilder wie Knöpfe und sonstige Symbole geeignet, nicht jedoch für Photos:
- erlaubt eine hohe Kompression der Graphikdatei ohne dabei auftretende Verluste;
- maximal 256 Farben pro Datei;
- Die Bilder werden meistens interlaced abgespeichert: Bei der Darstellung der Netzseite durch den Browser werden die sehr schnell (und noch sehr unscharf) im richtigen Format dargestellt und dann nach und nach schärfer, bis das Bild ganz geladen ist.
- gif-Bilder können animiert werden;
- Es kann eine transparente Farbe definiert werden, welche nicht dargestellt wird (praktisch z.B. bei nicht rechteckigen Motiven).
jpg (erdacht von der joint photographoc expert group, Endung .jpg, .jpeg oder .jpe) ist besonders geeignet für Photos und andere Bilder mit feinen Farbverläufen, nicht jedoch für Bilder mit wenigen Farben und klaren Linien:
- Hohe Kompression der Bilder, diese ist jedoch verlustbehaftet: je kleiner die Datei, umso schlechter die Bildqualität. Der Qualitätsverlust bei der Kompression äußert sich vor allem im Ausfransen von scharfen Kanten
- bis zu 16 Millionen Farben pro Bild;
Ein neueres, extra für das Internet geschaffenes Graphikformat ist png, welches ein möglicher Ersatz zum gif-Format ist (bei Photos ist jpg immer noch die beste Wahl). Allerdings wird das png-Format nicht von allen Browserversionen unterstützt, weswegen es (noch?) recht selten eingesetzt wird.

Einbinden von Graphiken

Bei der Verwendung von Graphiken ist es sinnvoll, diese in einem eigenen Unterordner abzuspeichern, um das Hauptverzeichnis möglichst übersichtlich zu halten.
Graphiken lassen sich mit Hilfe des img-Elementes in Netzseiten einbinden:
<img src="bilder/meinBild.jpg" alt="ein schönes Bild"> (image, source, Alternativext)
Der Alternativtext wird dargestellt, wenn das eigentliche Bild nicht angezeigt werden kann (z.B. weil der Benutzer das Anzeigen von Bildern deaktiviert hat). Laut html-Standard ist die Angabe eines Alternativtextes Pflicht und sei es nur alt="" (leerer Text). Man sollte generell einen sinnvollen Alternativtext angeben, damit die Netzseite lesbar und navigierbar bleibt, auch wenn die Graphiken aus welchem Grund auch immer nicht angezeigt werden können.
Der Verweis auf die Graphik kann dabei - analog zu Links - auch absolut, also als src="http://www.meine-domain.de/bilder/meinBild.jpg" oder auch als ein Verweis auf ein Bild einer fremden Domain src="http://www.fremde-domain.de/fremdebilder/fremdesBild.jpg". Allerdings führt dieser Verweis in die Irre, wenn das fremde Bild gelöscht oder umbenannt wird.
Man kann und sollte beim Einbinden einer Graphikdatei deren Breite und Höhe mit angeben - ist die Graphikdatei in einem anderen Format abgespeichert, wird sie entsprechend gestreckt bzw. gestaucht (und dabei evtl. verzerrt):
<img src="bilder/meinBild.jpg" alt="ein schönes Bild, 100 Pixel breit und 200 Pixel hoch" width="100" height="200">
Ist die Breite und Höhe einer Graphik derart angegeben, kann der Browser beim Seitenaufbau direkt den entsprechenden Platz für die Graphik reservieren - auch wenn diese noch gar nicht geladen ist. Ist die Breite und Höhe der Graphik hingegen nicht angegeben, wird diese erst angezeigt, wenn sie geladen ist - und die Netzseite dehnt sich dabei ruckartig aus - was sehr unangenehm sein kann, wenn der Benutzer bereits dabei war, den Text unterhalb der Graphik zu lesen und ihm dieser nun nach unten "entspringt".
Hier gibt es mal wieder ein passendes Beispiel.

Graphiken als Verweise

Soll eine Graphik als Verweis verwendet werden (z.B. ein Button), wird das img-Element einfach innerhalb eines entsprechenden Verweis-Elementes geschrieben:
<a href="meinVerweis.html"><img src="bilder/meinVerweisBild.jpg" alt="Hier geht's wohin..."></a>
Bei großen Graphiken und insbesondere bei Photos sollte man zunächst nur einen sogenannten thumbnail, also eine verkleinerte Version des Bildes zeigen, um keine unnötig hohen Ladezeiten zu provozieren. Der thumbnail wird dann mit einem Link auf die ebenfalls vorhandene, größere Version des gleichen Bildes versehen:
<a href="grossesBild.jpg"><img src="bilder/kleinerThumbnail.jpg" alt="Mein Thumbnail"></a>
Hier gibt es mal wieder ein passendes Beispiel.

Graphiken als Schmuck

Hintergrundbilder für die gesamte Seite oder einzelne Elemente werden mit Hilfe von css folgendermaßen definiert:
style="background-image:url(meineBilder/meinHintergrund.jpg)"
Auch bei der Listenformatierung können Graphiken eingesetzt werden:
list-style-image:url(Name der Graphikdatei) bestimmt eine eigene Graphik als zu verwendendes Aufzählungszeichen
Das Formatieren von Graphiken (Ränder, Zentrierung etc.) geschieht mit Hilfe der bereits bekannten css-Angaben.
Details zum Ausrichten von Graphiken und zur Kontrolle des Textumflusses mit css sind unter
http://www.selfhtml.teamone.de/html/grafiken/ausrichten.htm#css zu finden.
Hier gibt es mal wieder ein passendes Beispiel.

Verweis-sensitive Graphiken

Verweis-sensitive Graphiken nennt man diejenigen Bilder, bei denen durch das Anklicken verschiedener Bereiche des Bildes verschiedene Links erreicht werden - man trifft sie häufig in Verbindung mit Landkarten wieder.
Zum bessern Verständnis folgt diesmal als erstes ein Beispiel.
Und so funktioniert's:
<map name="MeineKarte"> <area shape="rect" coords="28,32,112,129" href="quadrat.html" alt="Quadrat"> <area shape="poly" coords="140,126,181,168,254,169,284,119,191,100" href="polygon.html" alt="Polygon"> <area shape="circle" coords="204,41,35" href="kreis.html" alt="Kreis"> </map> <p><img src="myMap.jpg" width="300" height="200" border="0" alt="Ein Bildchen" usemap="#MeineKarte"></p>

Meine eigene Internetpräsenz

Um eine eigene Internetpräsenz erstellen zu können, benötige ich zunächst einen Internetzugang.
Als nächstes benötige ich Speicherplatz auf einem Webserver, welchen ich als Student der Universität Bielefeld kostenlos zur Verfügung gestellt bekomme, alternativ kann ich bei einem Provider für eine geringe monatliche Gebühr Webspace erwerben. Es gibt auch kostenlose Anbieter von Webspace, welche sich z.B. über die Einblendung von Werbebannern finanzieren.
Des weitere benötige ich eine Webadresse, unter der meine Seite erreichbar ist - sei es die eher kryptische Variante à la
wwwhomes.uni-bielefeld.de/ktluk_von_toschanowitz
oder auch die eingängigere Version
www.ich-bin-die-katharina-und-wer-bist-du.de.
Erstere Webadresse erhalte ich als Student der Universität Bielefeld automatisch und kostenfrei, für meine Wunschadresse muß ich hingegen eine gewisse Gebühr an einem entsprechenden Provider zahlen - aber auch hier gibt es eventuell kostenfreie bzw. zumindest sehr günstige Angebote.
Studenten der Uni Bielefeld, die ein Login im Rechenzentrum beantragen, erhalten automatisch webspace, auf den im www unter der Adresse wwwhomes.uni-bielefeld.de/loginname zugegriffen werden kann.
Habt ich mir Speicherplatz auf einem Webserver besorgt, benötige ich nun auch einen Zugang zum Speicherplatz, meistens in Form eines Logins und eines Paßwortes, mit dem ich auf den Speicherplatz von außen zugreifen kann.
Zu guter Letzt benötige ich nun noch ein Programm, um die fertigen Dateien von meinem Rechner zu meinem Server-Speicherplatz zu transferieren - dafür werden meistens sogenannte ftp-Programme verwendet (file transfer protocol). Es gibt eine Vielzahl an kostenlosen ftp-Programmen mit einer leicht zu bedienenden Benutzeroberfläche, im Rechenzentrum ist z.B. ein graphische sftp-Programm (secure ftp) installiert. Alternativ kann ich das Programm jedoch auch direkt aus der Kommandozeile starten und textbasiert arbeiten (z.B. wenn in gerade in der techfak an einem Linux-Rechner sitze).

Für den Zugriff auf den von der Uni zur Verfügung gestellten Webspace benötige ich meinen HRZ-Loginnamen und mein (ursprüngliches?) HRZ-Paßwort, als gewünschte Verbindungsstelle gebe ich dem graphischen Programm www.uni-bielefeld.de an. Damit meine html-Seiten unter obiger Adresse dargestellt werden können, muß ich sie nun nur noch in das automatisch erstellte Verzeichnis docs kopieren. Die Benutzung des graphischen sftp-Programmes sollte dabei selbsterklärend sein.

Benutze ich hingegen ein kommandozeilenbasiertes ftp-Programm, muß ich ein folgende Kommandos kennen:
sftp Loginname@www.uni-bielefeld.de (baue für mein Login die ftp-Verbindung zum Server auf - die explizite Angabe des Logins ist notwendig, wenn das Login an dem Rechner, an dem ich gerade sitze, nicht mit dem Login im HRZ übereinstimmt)
Paßwortabfrage
ls (list - Inhalt des aktuellen Verzeichnisses anzeigen)
mkdir bilder (make directory - erstelle ein Verzeichnis namens bilder)
cd bilder (change directory - wechsele ins Verzeichnis bilder)
cd .. (gehe ein Verzeichnis nach oben)
rm bilder oder rmdir bilder (remove - lösche das (leere) Verzeichnis bilder)
del mist.html (delete - lösche auf dem Webserver die Datei mist.html)
get index.html (kopiere die Datei index.html vom Webserver in das Verzeichnis meines Rechners, in dem ich mich gerade befinde)
put neu.html (kopiere die Datei neu.html vom aktuellen Verzeichnis auf meinem Rechner in das aktuelle Verzeichnis auf dem Webserver)
bye (schließe die ftp-Verbindung wieder)

Habe ich endlich alle nötigen Zutaten besorgt und auch fleißig Seiten konstruiert, sollte ich nun noch bedenken, daß der Standardname für die Startseite von Internetpräsenzen index.html ist (eventuell gibt es auch noch einige weitere eingestellte default wie welcome.html, aber mit index.html kann man auf jeden Fall nichts falsch machen). Wenn ich eine Webseite aufrufe - z.B. http://www.ktvt.de - wird in Wirklichkeit die Datei http://www.ktvt.de/index.html dargestellt.

Wofür ist eigentlich der Kopf da?

Im Kopf der html-Datei kann man neben der Angabe des Titels sowie eventueller style-Angaben noch eine Reihe sogenannter Meta-Angaben treffen, die weitere Informationen zur Datei enthalten. Diese Informationen können z.B. Autor und Inhaltsbeschreibung der Seite sein, aber auch als Angaben für Webbrowser, Webserver oder Suchmaschinen-Robots gedacht sein (z.B. Schlüsselwörter).
Hier eine beispielhafte Auflistung möglicher meta-Angaben, die sich zum Großteil von selbst erklären:
<meta name="author" content="Anna Lyse"> <meta name="description" content="Dieser Beschreibungstext soll bei Suchmaschinen als Beschreibung dieser Datei erscheinen."> <meta name="keywords" content="HTML-Kurs,Goldhamster,Graduiertenkolleg"> (Schlüsselwörter für Suchmaschinen)
Die Schlüsselwörter können dabei auch nach Sprachen aufgeschlüsselt sein:
<meta name="keywords" lang="de" content="Graduiertenkolleg"> <meta name="keywords" lang="en" content="Graduate Programme">
<meta http-equiv="refresh" content="5; URL=http://selfhtml.teamone.de/"> - Nach 5 Sekunden wird der Besucher auf eine andere Seite umgeleitet.
<meta name="robots" content="noindex"> - Suchmaschinen-Roboter sollen diese Seite nicht berücksichtigen (indizieren). Alternative Angaben sind content="index" - diese Seite soll in Suchmaschinen auftauchen sowie content="nofollow" - Suchmaschinen-Roboter sollen den auf dieser Seite angegebenen Links nicht folgen und äquivalent content="follow" - sie sollen den Links folgen.
<meta name="generator" content="kedit"> - diese Angabe wird von allen html-Erstellungsprogrammen wie Frontpage oder Netscape Composer gesetzt - so können die Hersteller z.B. nachschauen, wie oft ihre Produkte verwendet werden. Ich trage hier meistens (als Gag) den Namen des von mir verwendeten Text-Editors ein...

Spielereien mit Fenstern und Unterfenstern (Frames)

Man kann alle Links durch eine zusätzliche Angabe in einem neuen Fenster öffnen, nämlich:
<a href="http://selfaktuell.teamone.de/" target="_blank">
Statt des target="_blank" kann man auch target="halligalli" oder einen beliebigen anderen Namen schreiben - wenn noch kein Fenster diesen Namen hat, wird auch dieser Link in einem neuen Fenster geöffnet (und das soeben geöffnete Fenster passend benannt). Die Größ des neu geöffneten Fensters kann man jedoch nur mit javascript vorbestimmen.

Die Verwendung von Frames vermeide ich auf den von mir betreuten Netzseiten, da diese unter anderem beim Setzen von Lesezeichen oder beim Erreichen der Seite über eine Suchmaschine sehr störend sein können. Mann kann prinzipiell fast jedes Layout auch anders (z.B. mit Hilfe von Tabellen) erreichen und mit css gibt es einige sehr interessante Gestaltungsmöglichkeiten, mit denen man die Funktion von Frames ansatzweise nachbauen kann.
Wer dennoch mehr über Frames wissen möchte, wird hier fündig:
http://www.selfhtml.teamone.de/html/frames/definieren.htm.

Nützliches für Fortgeschrittene

Ein Favicon bzw. das kleine Bild in der Adresszeile läßt sich sehr einfach in die html-Datei einbinden, nämlich durch folgende Angabe im Kopfbereich:
<link rel="shortcut icon" href="meinFavicon.ico">
Die referenzierte Graphikdatei sollte dabei das ico-Format haben, was im wesentlichen ein 16x16 und 32x32 Pixel großes Bitmapformat ist, bei dem die beiden angegebenen Bildgrößen in einer Datei gespeichert werden - im Internet findet man eine Reihe an kostenlosen Programmen, mit denen solche ico-Dateien erstellt werden können.
Ein Beispiel für die Verwendung von favicons findet sich auf meiner Homepage.

Auch ein Passwortschutz für Verzeichnisse im eigenen Webspace ist sehr einfach zu realisieren. Man erstellt eine Datei namens ".htaccess", die folgenden Inhalt hat:
AuthType Basic AuthName "Mein privater Bereich" AuthUserFile /usr/verwaltung/web/.htpasswd require valid-user
Die Pfadangabe hinter AuthUserFile muß dabei absolut sein - und zwar bezüglich der Dateianordnung auf dem Webserver. Für diese Angabe muß ich eventuell einen Administrator fragen!
Die .htpasswd-Datei enthällt nun eine Liste an Logins und Paßwörtern. Dabei ist es sinnvoll (und stellenweise auch vorgeschrieben), das Paßwort verschlüsselt zu schreiben. Die Versschlüsselung des Paßwortes geht z.B. hier:
http://selfhtml.teamone.de/diverses/htaccess.htm#verzeichnisschutz
GKLogin:INBC1x3KyLPhM SpezialLogin:INWwBHFwlX3mc
Diese beiden Dateien - .htaccess und .htpasswd kopiert man nun einfach in das Verzeichnis, welches nur nach Angabe des Paßwortes zu erreichen sein soll.
Mit der .htaccess-Datei kann man übrigens auch angeben, wie z.B. Verzeichnisse dargestellt werden sollen, in denen keine index.html oder andere Dateien enthalten sind.

Auch Formulare lassen sich mit regulärem html erstellen - allerdings kann man sie nur mit Hilfe von php oder anderen Scriptsprachen sinnvoll auswerten.
Will man das Formular nur per Mail auswerten, kann man auch einen vorgefertigten Formmailer verwenden. Informationen gibt es hier:
http://www.selfhtml.teamone.de/html/formulare/index.htm
Hier gibt es Beispiel für ein Formular. Die Auswertung funktioniert (auf meinem Account, in der Uni funktionieren keine php3-Dateien) so (nicht erschrecken, das ist php-Syntax, die müßt ihr nicht lernen...):
Dein Name ist <?php echo $name;?>. Dein Titel ist <?php echo $titel;?>. Dein Alter ist <?php echo $alter;?>.

Technik, die begeistert

Im Folgenden werden einige der oft im Zusammenhang mit Netzseiten genannten Techniken kurz erklärt:

xml: Extensible Markup Language - "die standardisierte Datenfreiheit". Eine Sprache, um Daten in einem Format abzuspeichern, welches man sich selbst definiert (angepaßt an die jeweiligen Anforderungen). Quasi html mit frei definierbaren tags.
In den sogenannten dtd-Dateien steht dabei die Definition der Struktur, anhand derer die xml-Dateien validiert werden.
Einsatzgebiet: die "Zukunft des Datenabspeicherns".
xhtml ist ein Nachbau von html auf der Basis von xml (html ist mit Hilfe einer anderen Sprache namens SGML definiert).
javascript wird vom Browser auf dem Rechner des Betrachters ausgeführt, der Benutzer kann javascript aber deaktivieren. Für Anwendungen, bei denen Daten zentral gespeichert werden müssen (z.B. Gästebücher) nicht anwendbar, da alle Aktionen nur auf dem Rechner des Benutzers ausgeführt werden.
Bekannteste Beispiele:
- Buttons, die beim Überfahren ihre Graphik ändern.
- Neue Fenster in bestimmter Größe und ohne Navigationsleisten öffnen (siehe z.B. www.tagesschau.de).
- Sonstige bunte, sich bewegende Sachen (Ausnahme: animierte gif-Dateien, Änderung der Linkfarbe mit css-Angaben)
cgi: serverseitig common gateway interface - ist an sich keine Sprache, sondern nur eine Schnittstelle. Wird meist in Kombination mit der Programmiersprache perl verwendet.
Erlaubt es, die Anfragen eines Web-Browsers an Programme auf dem Web-Server weiterzureichen und von diesen auszuführen zu lassen wie z.B. bei Datenbanken, Formularen oder Gästebüchern.
Nachteil: die Dateien müssen in ganz bestimmten Verzeichnissen liegen, die Programme können nicht direkt in die Netzseiten integriert werden.
Ein Beispiel für die Verwendung von cgi ist http://www.ebay.de.
php: Hypertext Preprozessor - kann direkt in html-Dateien eingebunden werden, wird direkt auf Server ausgeführt und liefert dem Benutzer normale html-Seiten. Die Seite http://www.a-equine.de ist komplett mit online-Bestellmöglichkeit mit Hilfe von php programmiert (plus mySQL für den Zugriff auf die im Hintergrund laufende Produktdatenbank).
asp: active server pages - vorwiegend unter Windows, keine eigene Sprache, nur eine Umgebung.
java applets sind kleine Programme, die auf dem Rechner des Benutzers ausgeführt werden (z.B. kleine Spiele). Neuere Browser können Java, es kann aber vom Benutzer deaktiviert werden.
active x: Microsofts Konkurrenz zu Java - der Internet Explorer führt active x direkt aus, Netscape und andere Browser benötigen ein entsprechendes plugin.
flash: für Multimedia-Webseiten z.B. mit Diashow-Effekt. Die Seiten werden nur mit einem entsprechenden Plugin korrekt angezeigt.

Jetzt habe ich vor Schreck alles wieder vergessen?!

Kein Problem - selfhtml (http://www.selfhtml.teamone.de), Dein Freund und Helfer, weiß Rat!