Handbuch Webdesign: AllInOne

Wenn Sie im HTML-Code "c00lfont2u" als Schriftart vorgeben, und dann Ihre Seite auf einem Computer betrachten auf dem es keine Schriftart namens "c00lfont2u" gibt, dann wird statt dessen die Standardschriftart (Times) ver­wendet. Abbildung 17 zeigt die Standard-Schriftarten, die auf den Betriebssystemen Windows 95 und Mac OS 9 sicher installiert waren. Beachten Sie auch die Größen­unterschiede: Alle Schriftarten sind in der Größe 12 Punkt abgebildet, erscheinen aber verschieden groß. Diese Schriftarten sind also seit vielen Jahren im Web bekannt und gerne verwendet, weil sie seit vielen Jahren zur Verfügung stehen. Abbildung 18 zeigt eine aktuellere Statistik für die 800 Browser getestet wurden.

Aus dieser Statistik können Sie z.B. herauslesen, dass die Schrift "Haettenschweiler" auf 63% aller Computer installiert ist. Wenn man nur die Apple-Computern betrachtet sind es nur 13%, bei Linux-Rechnern nur 14%. (Auf Windows-Rechnern ist sie entsprechend häufiger um auf den Durchschnitt von 63% zu kommen). Es ist deswegen sinnvoll, nicht eine bestimmte Schriftart zu verlangen, sondern eine Liste von Schriftarten vorzugeben: wenn die erste Schriftart auf der Liste nicht installiert ist wird die zweite verwendet, dann die dritte,..... Abbildung 19 zeigt drei Beispiele für solche Listen.

 Verdana, Tahoma, Arial, Helvetica, sans-serif;
 "Times New Roman", Georgia, Times, serif;
 "Courier New", Courier, monospace;

Eine gute Sammlung von Links zum Thema Web-Typografie bietet Dr.Web's Weblog^[3]

Es gibt zwei unterschiedliche Methoden, Schriftarten in Webseiten einzubetten, so dass sie bei Bedarf herunter geladen und verwendet werden können. Um eine Schriftart in dieser Weise zu verwenden, brauchen Sie eine (meist kostenpflichtige) Lizenz. Ein Trick um den Einsatz von Fonts zu vermeiden ist das Ersetzen von Text (hauptsächlich Überschriften) durch Bilder mit Hilfe von Stylesheets.^[4]

[Bearbeiten] Nicht kontrollierbare Schriftgrößen

Als WebdesignerIn werden Sie nicht dafür bezahlt, den Zeilenumbruch zu erledigen. Das ist die Aufgabe des Browsers. Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die Absätze geeignet in Zeilen umbrechen, wie in Abbildung 20 gezeigt.

Abbildung 20: Zeilenumbruch im Browser

[Bearbeiten] Unbekannte Lesereihenfolge

Wenn Ihre Website aus mehreren Webseiten besteht, haben Sie keine Kontrolle darüber, in welcher Reihenfolge diese Seiten gelesen werden. Ganz im Gegenteil: Web-LeserInnen gehen sehr selektiv vor, und navigieren sehr lange, bevor sie sich "zum Lesen niederlassen".

[Bearbeiten] Keine eindeutiger Eingang

Die LeserInnen "betreten" Ihre Site auch nicht durch die "Eingangstüre" - also über die von Ihnen definierte Hauptseite. In Abbildung 21 sehen Sie ein Beispiel.

Abbildung 21: Navigationsstruktur und Reales Navigationsverhalten

[Bearbeiten] Links und Lesereihenfolge

Die dicken Pfeile symbolisieren die Links, die zwischen den Seiten existieren. Die dünnen Pfeile symbolisieren den Weg, den eine bestimmte Leserin durch die Seite nimmt. Diesen Weg kann man aus dem Logfile des Servers rekonstruieren: Sie kommt von Google, wo Sie die "Seite 1" gefunden hat. Von dort navigiert sie zur "Hauptseite", und von dort weiter zu "Seite 5". Hier verlässt sie die Site wieder - vielleicht, indem Sie dreimal auf den "Zurück"-Button drückt um wieder zu ihren Suchergebnissen bei Google zu kommen, oder indem sie das Browserfenster schließt, oder indem sie eine neue URL eintippt, Im Logfile der Website ist das nicht mehr erkennbar. Die Hauptseite ist ein neuralgischer Punkt jeder Website - die zentrale Navigationsstelle. Die Gestaltung der Hauptseite ist also sehr wichtig. Ein "Deckblatt", oder eine "Intro-Seite" braucht eine Website hingegen nicht. Das ist eine Idee aus der Print-Welt, die am Web keinen Sinn macht.

[Bearbeiten] Verschiedene Zusatzprogramme und Plugins

Jeder Browser kann HTML und "reinen Text" darstellen. Falls der Browser Bilder darstellen kann, dann in den Formaten gif und jpg, eventuell auch png.

[Bearbeiten] Zusatz­programme

Alle anderen Formate (Word, CAD-Pläne, Audio und Video-Dateien, Flash, PDF, ...) können aber trotzdem im Web eingebunden werden. Der Browser kann Zusatzprogramme starten, um diese Formate darzustellen. Das ist technisch immer möglich, ob es sinnvoll ist, ist eine andere Frage. Spielen wir die Sinnfrage am Beispiel von Office-Dokumenten (Word, Excel, Access) durch.

• Nicht jede LeserIn hat Excel, Word und/oder Access auf ihrem Computer. z.B. Apple, z.B. Palm Pilot, z.B. Linux
• Office-Dokumente können Makro-Viren enthalten. Deswegen
• können Sie Probleme bekommen wenn Sie einen Virus verbreiten
• sind die Leute vielleicht nicht gewillt Office-Dokumente von Fremden entgegenzunehmen.
• Office-Dokumente sind meist sehr groß, jedenfalls größer als ein entsprechendes HTML-Dokument. Die längere Download-Zeit könnte Leute abschrecken.
• Office gibt es in vielen verschiedenen Versionen. Um möglichst viele Leute zu erreichen, muss man eine leicht veraltete Version (z.B. das Word-Format von Office 2003) anbieten.

Wenn Sie das alles bedenken, und dann zu dem Schluss kommen, dass es im konkreten Fall sinnvoll ist, z.B. ein Excel-Dokument in Ihre Website einzubauen, dann ist das technisch ganz einfach: Sie setzen einen Link zur Excel-Datei. Für verschiedene LeserInnen wird die Handhabung sich unterschiedlich darstellen:

1. Beispiel: Billy G. benutzt einen Windows-Rechner mit der neuesten Office-Version, um Ihre Seite anzusehen. Wenn er auf den Link klickt bekommt er eine Warnung mit dem ungefähren Inhalt: "Achtung, das könnte gefährlich sein". Wenn er trotzdem weitermacht, wird Excel gestartet und die Datei geöffnet.

2. Beispiel: Alyssa P. Hacker benutzt einen Linux-Rechner, dort gibt es kein Excel. Wenn Sie auf den Link klickt, erscheint ein Fenster "Unbekannte Datei, wollen Sie die Datei speichern". Sie kann die Datei so herunterladen und mit OpenOffice öffnen, oder auf Diskette zu einem Windows-Rechner tragen.

[Bearbeiten] Plugins

Ein Spezialfall von Zusatzprogrammen für Webbrowser sind Plugins. Diese übernehmen die Darstellung eines rechteckigen Bereiches innerhalb einer Webseite. Ein bekanntes Beispiel ist das Flash-Plugin zur Darstellung von swf-Dateien.

Abbildung 22: Plugin im Webbrowser und das Kontextmenü (beim Rechtsklick)

In Abbildung 22 wird das Rechteck am rechten Rand der Webseite nicht vom Webbrowser selbst, sondern vom Flash-Plugin dargestellt. Für die LeserIn ist das nicht erkennbar. Erst wenn sie/er die mit der rechten Maustaste in diesen Bereich klickt erscheint ein Flash-spezifisches Kontext-Menü, wie in der Abbildung rechts neben der Webseite gezeigt. Welche Verbreitung die verschiedenen Plugins haben, ist schwer zu sagen. Macromedia, die Firma die Flash herstellt, publiziert auf Ihrer Website eine Statistik laut der 97% aller Browser das Flash-Plugin benutzen (siehe Abbildung 23). Wenn man nach anderen Statistiken im Web sucht, kommt man aber zu ganz anderen Ergebnissen. Verschiedene Sites bieten Statistiken über die jeweils eigenen Zugriffe. Hier bilden sich die Vorlieben des jeweiligen Zielpublikums ab. Abbildung 24 zeigt zwei Statisiken von einer Forum-Site (sunniforum.com) im arabischen Raum, und einem Webcounter-Anbieter. Mit 51% bzw. 89% Anteil des Flash-Plugins findet man hier ganz andere, und widersprüchliche Zahlen. Es bleibt also bei jedem Projekt einzeln abzuwägen, ob Plugins für das Zielpublikum der Site sinnvoll sind oder nicht.

[Bearbeiten] Zusammenfassung

Wenn Sie in diesem Buch lernen, wie man Webseiten erstellt, sollten Sie dabei nie vergessen, dass Sie ihr Ausgabemedium, den Browser in dem Ihre Webseite schlussendlich dargestellt wird, nicht kontrollieren können, und dass dieses Ausgabemedium sehr vielfältig ist - genau so vielfältig wie die Menschen, die diese Programme benutzen. Ein paar mögliche Szenarien:

• Home-User in der 1.Welt, die viel Geld haben und sich aus Spaß am Computer immer die neueste Hardware leisten, immer die best-mögliche Internetanbindung haben, immer die neueste Software benutzen.
• Firmen-User, die mit dem Computer vorlieb nehmen müssen, den Ihnen die EDV-Abteilung zur Verfügung stellt. Das heißt selbst im Jahre 2006 vielleicht noch 1024x768 Auflösung, Windows XP, ein veralteter Browser und keine "Spass-Plugins" wie Flash.
• BesucherInnen von Internet-Cafés irgendwo auf diesem Globus, die weder Software noch Hardware kontrollieren, sondern verwenden müssen, was da ist. Und das ist vielleicht ein sieben Jahre alter PC mit ebenso alter Software.
• Blinde, die mit einem Text-To-Speech Programm oder einer Braille-Ausgabezeile im Web surfen, wie oben in Abbildung 4 gezeigt.
• Menschen mit Rot-Grün Blindheit, die zwar den Text und die Bilder sehen, aber nicht zwischen bestimmten Farben unterscheiden können.
• Menschen mit eingeschränkter Feinmotorik, die nur schwer mit einem Maus umgehen können.

und so weiter.

[Bearbeiten] XHTML

[Bearbeiten] Einleitung

Dieses Kapitel ist sehr trocken geschrieben, es handelt nur vom HTML-Code und den genauen Vorschriften, wie dieser Code zu schreiben ist. Verlieren Sie dabei nie aus dem Auge: es geht um die Gestaltung von Webseiten. Das Ergebnis der trockenen Arbeit mit dem Code ist immer eine Webseite. Hoffentlich eine lesbare, bunte, interessante Webseite – auch wenn der Code selbst Ihnen unleserlich, trist und uninteressant erscheinen mag. Den Code beherrschen heißt, durch ihn hindurch die lebendige Webseite sehen zu können.

Vielleicht erlernen Sie mit HTML zum ersten Mal so etwas Ähnliches wie eine Programmiersprache. Dazu gehört auch der Erwerb des Fachvokabulars: Tags, Attribute, Whitespace, Character Entities – diese Fachbegriffe müssen Sie verstehen und korrekt verwenden können.

[Bearbeiten] XHTML und HTML

Die Abkürzung HTML steht für "HyperText Markup Language". HTML wird vom World Wide Web Consortium standardisiert. 4.01 ist die letzte/höchste Version von HTML, nach dieser Version wurde von HTML auf XHTML umgestellt. XHTML ist zu XML kompatibel, deswegen das X am Anfang.

Es ist etwas schwieriger, korrektes XHTML zu schreiben als korrektes HTML, da die Schreibweise in HTML weniger genau geregelt ist. Die aktuellen Browser stellen sowohl HTML als auch XHTML dar. Wir werden XHTML verwenden, es aber einfach HTML nennen.

Die wichtigsten Prinzipien und die wichtigsten HTML-Tags (für Links, Bilder, Tabellen, Formulare) werden hier kurz vorgestellt. Alle Details können und sollen Sie bei selfhtml ^[5] oder in einem ähnlichen Referenzwerk nachschlagen. Sie sollten – wie bei allen Themen – parallel auch andere Quellen zu HTML konsultieren und die Aussagen in diesem Buch kritisch hinterfragen!

In diesem Kapitel wird nur der HTML-Code beschrieben, nicht das Erstellen von HTML-Dateien mit einem Programm, das nach dem "what you see is what you get" – Prinzip funktioniert. Sie können den HTML-Code mit jedem Text-Editor erstellen. Die HTML-Datei sollten Sie – auch während Sie die Datei noch erstellen und verändern – immer wieder in einem Browser betrachten und überprüfen, ob das Ergebnis Ihren Vorstellungen entspricht. Der Arbeitsablauf ist immer:

1. Code im Editor ändern
2. Datei im Editor abspeichern
3. in den Browser wechseln
4. Die Anzeige im Browser aktualisieren / neu laden

Und wieder zurück zu Punkt 1. So lange wiederholen, bis die Webseite fertig ist.

[Bearbeiten] Characterset

HTML-Dateien bestehen aus reinem Text, auch ASCII-Text genannt – so wie Dateien mit der Endung .txt.

Achtung: Erstellen Sie Ihren HTML-Code nicht mit dem Programm Wordpad unter Windows. Dieses Programm kann zwar ASCII-Text erzeugen, aber auch Dokumente im rtf-Format. Das kann zu dem in Abbildung 25 gezeigten Fehler führen:

Hier wurde der Text nicht (nur) mit HTML-Tags formatiert, sondern auch mit der von WordPad angebotenen Formatierungs-Leiste. Verwendet man diese, dann erscheint der Text zwar im Programm Wordpad größer / fett, im Browser sieht er dafür nicht mehr richtig aus.

Die korrekte Art, HTML zu speichern, ist entweder ANSI, auch bekannt als Format ISO 8859-1 (Latin-1). Das ist der traditionelle Computer-Zeichensatz ASCII, ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie die Umlaute üöä ÜÖÄ sowie ß é ñ. (Um ganz genau zu sein, wird seit Einführung des Euros und des €-Zeichens ISO 8859-15 (Latin-15) verwendet – das ist Latin-1, ergänzt um das Euro-Zeichen und ein paar Ligaturen für Französisch.) Unter Windows und Linux wird dieses Format standardmäßig verwendet, nur am Mac müssen Sie beim Speichern im TextEdit darauf achten, das richtige Format, nämlich ?Westeuropäisch (Windows Latin 1)? einzustellen.

Eine Alternative zu Latin-1 ist Unicode in der Variante utf-8. Das hat den Vorteil, dass Sie die Sonderzeichen verschiedener Sprachen in einem Dokument mischen können. Falls Sie Ihre HTML-Datei als utf8 speichern, müssen Sie das im Head der HTML-Datei angeben, siehe Tags für den Head.

[Bearbeiten] Zeichenreferenzen

Zeichenreferenzen (engl.: character entities) dienen dazu, bestimmte Zeichen darzustellen. Eine Zeichenreferenz hat immer die Form &entityname; Folgende Zeichenreferenzen müssen Sie verwenden:

Folgende Zeichenreferenzen müssen Sie nicht verwenden, Sie können das Zeichen auch direkt im HTML-Code eingeben. Die Schreibweise als Zeichenreferenz ist vielleicht praktisch, wenn Sie das Zeichen nicht auf Ihrer Tastatur finden können (z.b. auf einer englischen Tastatur).

Die Umlaute ü, Ü, ö und Ö funktionieren nach dem gleichen Prinzip wie ä und Ä.

[Bearbeiten] HTML-Tags

Die gewünschte Formatierung des Textes wird mit HTML-Tags angegeben.

• Tags sind zwischen spitzen Klammern ("kleiner" und "größer"-Zeichen) eingeschlossen.
• Zu (fast) jedem "Anfangs-Tag" gibt es einen "End-Tag", der sich nur durch einen Schrägstrich vom Anfangs-Tag unterscheidet. Z.B. <p>hier der Absatz</p>.
• "alleinstehende" Tags müssen in XHTML mit einem Schrägstrich am Ende geschrieben werden: <br /> (früher, in HTML, ging auch <br>)

Die wichtigsten Tags werden weiter unten noch vorgestellt. Welche Tags es gibt und was sie jeweils bewirken, ist im HTML-Standard festgelegt. Sie können nicht einfach einen neuen Tag erfinden.

[Bearbeiten] Whitespace

Sogenannter whitespace - das sind mehrere Leerzeichen, Tabulatoren und Zeilen­umbrüche hintereinander – wird vom Browser völlig ignoriert. Ob Sie also in Ihrer HTML-Datei ein Leerzeichen oder 7 Leerzeilen einfügen macht keinen Unterschied. Die beiden Dokumente werden vom Browser gleich dargestellt:

 <p>Halli Hallo</p>

 <p>
 Halli
 Hallo
 </p>

Abbildung 27: Zwei HTML-Dokumente die gleich dargestellt werden Nur die Tags beeinflussen die Darstellung der Webseite. Sie müssen den Tag <br /> verwenden, um einen Zeilenumbruch auf der Webseite zu erzeugen – dies ist aber nur selten sinnvoll, da der Browser einen automatischen Zeilenumbruch durchführt.

[Bearbeiten] Attribute

Manche Tags können Attribute enthalten. Ein Beispiel ist der Tag <img>, der ein Bild in die Webseite einfügt (Englisch: Image). Die wichtigsten Attribute von <img> sind src (von Source = Quelle) und alt (Alternative Darstellung). (Ein häufiger Fehler ist es, scr statt src zu schreiben)

  <img src="neu.gif" alt="Das ist neu!" />

Es ist egal, in welcher Reihenfolge Sie die Attribute schreiben. Ebenso sind Zeilenumbrüche, Tabulatoren, Leerzeichen auch hier, innerhalb eines Tag ohne Auswirkung auf die Darstellung im Browser:

  <img alt="Das ist neu!" src="neu.gif" />
  <img 
 alt="Das ist Neu!" 
 src="neu.gif" 
 bli="bla, blu"
 />

Das Attribut bli, welches HTML nicht kennt, wird wie andere unbekannte Attribute vom Browser einfach ignoriert. Der Wert eines Attributes wird in Anführungszeichen geschrieben, auch Zahlen (das war in HTML noch nicht verpflichtend):

   <img alt="Das ist Neu!" src="neu.gif" 
 width="50" height="15" />

ACHTUNG: ein häufiger Fehler ist es, das zweite Anführungszeichen zu vergessen:

   <img alt="Das ist neu!"
 src="neu.gif><p>Text nach dem Bild, der "zufällig"   
   auch Anführungszeichen enthält – aber das kommt nicht immer vor. .</p>
   <p>Und noch mehr Text</p>

Wenn Sie, wie in Abbildung 28 gezeigt, das zweite Anführungszeichen vergessen, hat das enorme Auswirkungen auf die Darstellung der Webseite: der Browser sucht konsequent nach dem zweiten Anführungszeichen, wenn es sein muss bis zum Schluss des Dokuments. In diesem Beispiel findet er schon in der nächsten Zeile ein Anführungszeichen. Damit ist der Wert des Attributs beendet. Nun sucht der Browser noch nach der schließenden spitzen Klammer des img-Tags. Das Ergebnis ist, dass der Text gar nicht im Browser angezeigt wird.

[Bearbeiten] Kompatibilität

Neue Tags, die z.B. ein Browser nicht erkennt, sind zu ignorieren - es gibt keine Fehlermeldungen. Wenn das W3C in einer zukünftigen XHTML-Version 21 beispielsweise den neuen Tag <jump> (hüpfenden Text) einführt, können Sie diesen Tag auf Ihrer Webseite verwenden. Der Text wird jedoch nur in den neuesten Versionen der Browser (die schon XHTML 21 kennen) hüpfend dargestellt. In Netscape 6 oder MSIE 5 wird der Tag <jump> ignoriert:

Bevor Sie also einen neuen Tag einsetzen, sollten Sie sich darüber im Klaren sein, welche Versionen der Browser diesen Tag darstellen und wie viel Prozent Ihres Zielpublikums schon eine passende Browser-Version benutzen. Meist können Sie eine Seite so gestalten, dass auch mit älteren Browsern der gesamte Inhalt lesbar ist.

Das war eine Überlegung zur Kompatibilität der Browser. Auch Menschen sind nicht kompatibel: so sind ca. 9% aller Männer und ca. 0,8% aller Frauen rot-grün-blind^[6] - verwenden Sie also nicht den Farbunterschied zwischen rot und grün, um wichtige Information anzuzeigen.

[Bearbeiten] Text formatieren

Folgende Tags nennt man blockbildende Tags weil sie im Browser immer als rechteckige Fläche angezeigt werden, als "Block":

Da diese Tags nicht ineinander verschachtelt werden können ist der folgende Code nicht korrekt:

´ <h1><p>Absatz in der Überschrift</p></h1>

Es gibt keinen Absatz in der Überschrift. Entweder ein Stück Text ist ein Absatz, oder es ist eine Überschrift:

  <h1>Überschrift</h1>
  <p>Absatz</p>
  <p>noch ein Absatz</p>

Der Browser stellt zwischen den blockbildenden Tags jeweils einen Abstand dar. Dieser kann mit Stylesheets verändert, bzw. auf Null gesetzt werden. Im Browser Firefox kann man als zusätzliches Hilfsmittel die ?Web Developers Toolbar? installieren. Mit dieser Toolbar können Sie sich unter anderem die ?Blocks? der blockbildenden Elemente anzeigen lassen wie in Abbildung 31.

Format für kleinere Text-Abschnitte müssen Sie innerhalb eines Blocks verwenden, sie werden auch als inline-Tags bezeichnet:

Der <font>-Tag ist ein "altmodischer" Tag, der durch Stylesheets ersetzt wurde, und den Sie in neuen Dokumenten möglichst nicht verwenden sollten. Um alte Dokumente zu bearbeiten, müssen Sie diesen Tag aber kennen. Diese inline-Tags können ineinander verschachtelt werden:

   <p>Absatz mit 
   <b>fett und <i>fett-kursiv</i></b> ist in Ordnung </p>

Beim Verschachteln muss die Reihenfolge passen:

   <p>Absatz mit 
   <b>fett und <i>fett-kursiv</b></i> ist in Ordnung </p>

[Bearbeiten] Bilder

Wenn in einer Webseite Bilder verwendet werden, so sind diese jeweils als eigene Datei gespeichert. Enthält eine Webseite z.B. vier Bilder, dann besteht das ?Gesamtkunstwerk? aus fünf Dateien: einer HTML-Datei, und vier Bild-Dateien.

Wenn Sie die gesamte Webseite auf USB-Stick speichern und mitnehmen wollen, müssen Sie alle fünf Dateien mitnehmen! Falls die Bilder in einem Unter-Ordner gespeichert waren, muss auch diese Ordnerstruktur erhalten bleiben.

Noch ein Wort zur Größe von Bildern: Bei den Breiten- und Höhen-Angaben (width und height) sollten Sie immer die echte Größe des Bildes (gemessen in Pixel) angeben. Wieso? Betrachten wir die zwei möglichen Fälle:

• Bild ist in Wirklichkeit kleiner, width- und height-Angaben sind zu groß
• Bild ist in Wirklichkeit größer, width - und height-Angaben sind zu klein
  Größer dargestellt

Im ersten Fall wird das Bild im Browser nicht gut aussehen: in einem Bild, das zu groß dargestellt wird, werden die einzelnen Pixel sichtbar. Kompressions-Artefakte ? das sind Bildfehler, die durch die Kompression entstehen ? werden besser sichtbar. In Abbildung 33 sehen Sie typische jpeg-Artefakte rund um die Nase.

Abbildung 33: Ein Pixel-Bild wird auf 4-fache Breite und Höhe vergrößert

Im zweiten Fall (verkleinerte Darstellung) gibt es keine Probleme mit der Bildqualität, sondern mit der Übertragungszeit.

Das Bild in Abbildung 34 ist im Original 450x450 Pixel groß, und hat eine Dateigröße von 115KB. Diese 115KB müssen übertragen werden, auch wenn das Bild dann im Browser kleiner (z.B. 225x225 Pixel groß) dargestellt wird. Die Alternative wäre, das Bild im Grafikprogramm auf 225x225 Pixel zu verkleinern. Dabei wird auch die Dateigröße kleiner, in diesem konkreten Beispiel 35KB. Das ist ein Faktor 3 in der Dateigröße, und damit auch in der Download-Zeit. Der typische Arbeitsablauf ist also:

• Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
•  ?Beste? Version des Bildes archivieren
• Bild im Grafikprogramm auf die richtige Dimension und Format bringen
• Fertiges Bild in den Web-Ordner kopieren
• <img>-Tag in das HTML-Dokument einfügen.

Das Bild wird wie ein Wort im Text behandelt, und kann nicht frei auf der Webseite positioniert werden. Später lernen Sie verschiedene Methoden kennen, wie man Text und Bild mittels Tabellen oder Ebenen doch noch positionieren kann. Bis dahin gilt: Wenn Sie das Bild wie in Abbildung 35 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr hässliches Layout.

Abbildung 35: Bild mitten im Absatz

Besser ist es, das Bild in einen eigenen Absatz zu setzten, und den Absatz dann z.B. zu zentrieren:

Als Bildformate für Webseiten können nur Pixel-Formate verwendet werden:

Es kann jedes Bild in allen drei Formaten gespeichert werden. Ideal wäre, das Format auszuwählen, in dem das Bild nichts an Qualität verliert, und die Dateigröße möglichst gering ist. Der vorher beschriebene Arbeitsablauf kann also weiter verfeinert werden

• Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
• Das Ergebnis, ein Bild mit hoher Auflösung + Dateigröße,
  Format z.B. tiff oder jpg mit geringer Kompression archivieren
• Bild im Grafikprogramm auf die richtige Dimension und Format bringen;
  Ergebnis: Bild im Format gif, jpg, png, Dateigröße möglichst klein (=web-tauglich).
• Fertiges Bild in den Web-Ordner kopieren
• <img>-Tag in das HTML-Dokument einfügen

Das Ergebnis ist ein web-taugliches Bild im richtigen Ordner.

[Bearbeiten] Links + Anker

Das Web heißt Web, weil es wie ein Spinnennetz ist ? die Stränge dieses metaphorischen Netzes sind die Hyperlinks. Links im Web sind unidirektional, sie funktionieren nur in eine Richtung. Sie können von Ihrer Seite zur ORF-Seite einen Link machen, Sie können nicht von der ORF-Seite zu Ihrer Seite einen Link machen. Bevor Sie einen Link setzen, müssen Sie sich über zwei Dinge klar werden:

1. Welcher Text auf Ihrer Webseite soll anklickbar sein?
2. Wohin soll der Link führen (URL)?

Alle Links auf einer Seite sind gleich gestaltet, normalerweise sind sie alle blau und unterstrichen. Mit Stylesheets können Sie diese Gestaltung ändern.

Stilistischer Tipp: Vermeiden Sie Formulierungen wie ?Klicken Sie hier, um zu Yahoo zu gelangen?. Die LeserInnen Ihrer Seite wissen, wie ein Link zu bedienen ist. Schreiben Sie e