Kurs:Internet- und Projektkompetenz/Leitfaden/Homepage Ausgestaltung

Mit den hier aufgeführten Bausteinen kann die Homepage weiter ausgestaltet werden. Insbesondere wenn ihr von den Standard-Attributen der einzelnen Elemente (aus die Art und Weise, wie sie dann letzlich dargestellt werden) abweichen wollt, empfiehlt sich zur einfacheren Umgestaltung die zentrale Formatierung mit CSS!

Wichtige Bausteine der HTML-Syntax

Die Syntax ist im Prinzip das Handwerkszeug zum Erstellen einer Website - die Hintergrundinformationen, wie ein HTML-Dokument strukturiert ist und wie tags verwendet werden, habt ihr bereits bekommen. Mit diesem Wissen könnt ihr einzelne Elemente wie Bausteine in eure Website einbauen.

Eine sehr gute Kurzreferenz/Übersicht über diese und weitere Elemente und Attribute findet sich unter: SELFHTML.org.

Am häufigsten werdet ihr wohl diese brauchen:

Auszeichnungen zur Textformatierung

Textabsätze

<p>...</p>

Übliches Element zur Textstrukturierung: Nach jedem Absatz fügt der Browser einen Zeilenumbruch mit etwas Abstand zum weiteren Text ein.

Überschriften

<h1>...</h1> / <h2>...</h2> / <h3>...</h3> / ...

Überschriften werden grundsätzlich größer als der übrige Text dargestellt und der Browser fügt auch automatisch einen gewissen Abstand zu anderen Elementen ein. Aber auch Überschriften gibt es in verschiedenen Größen, wobei <h1> (Überschrift der 1. Ordnung) die Größte ist und <h6> die Kleinste.

Textausrichtung

align="left"
align="center"
align="right"
align="justify"

Die Textausrichtung ist eine Angabe, die nicht für sich stehen darf, sondern immer nur in den Klammern eines anderen Elements wie <p> oder <h1> beigefügt werden kann. Solche Angaben nennt man Attribute. Wie sich die Textausrichtung auswirkt, sollte ja bereits aus Word bekannt sein - die oben genannten Varianten entsprechen: Linksbündig, zentriert, rechtsbündig, Blocksatz. Diese Angabe muss jeweils nur im eröffnenden tag gemacht werden, wie hier in den Beispielen:

<p align="right">Dieser Text ist rechtsbündig.</p>
<h1 align="center">Diese Überschrift ist zentriert.</h1>

Zeilenumbruch

<br />

Einfach Zeilenumbrüche können jederzeit in einen Textabsatz eingefügt werden - der Abstand zur nächsten Zeile ist dabei nicht so groß, wie er zu einem neuen Absatz wäre. Die Wirkung ist sehr vergleichbar zum drücken der Eingabetaste in Word (in HTML-Dokumenten reicht die Eingabetaste allerdings nicht aus, um einen Zeilenumbruch zu erzwingen.)

Verweise / Links

<a href="http://www.google.de">...</a>

Auf diese Weise können Links eingefügt werden. Wie beim Beispiel Google müssen anderen Websites immer mit "http://" eingeleitet werden, da sonst nach einer Datei im eigenen Webspace gesucht wird (zur Ordnung von mehreren Dateien im eigenen Webspace, siehe den Punkt "Aufbau der Projektseite".) HTML-Dokumente werden standardmäßig im selben Browserfenster geöffnet. Soll eine Seite in einem neuen Fenster angezeigt werden, muss hinter der Adresse noch ein Attribut stehen - das sieht beispielsweise so aus:

<a href="http://de.wikiversity.org" target="_blank">...</a>

Dateiformate, die der Browser nicht öffnen kann, können entweder heruntergeladen oder mit einem anderen Programm geöffnet werden. Es ist kein Problem Links in den Fließtext einzubauen, das heisst man kann das <a>-Element auch in einen Absatz oder eine Überschrift integrieren.

Listen

<ul> <li>...</li> <li>...</li> </ul>
<ol> <li>...</li> <li>...</li> </ol>

Hierbei handelt es sich um Listen, wobei <ul> "unordered list" bedeutet und einfache Aufzählungszeichen verwendet (Punkte, o.ä.) und <ol>, "ordered list", die einzelnen Punkte durchnummeriert. Beispielsweise könnte eine nicht-nummerierte Liste so aussehen:

<ul>
  <li>These</li>
  <li>Befragung (Fragebogen)</li>
  <li>Auswertung & Abschlusspräsentation</li>
</ul>

Der Effekt lässt sich mit dem der Zeichen * bzw. # in der Wiki-Technik vergleichen - das Beispiel von oben würde also in etwa so angezeigt werden:

• These
• Befragung
• Auswertung & Abschlusspräsentation

Physische Textauszeichnung

<b>...</b>
<i>...</i>
<u>...</u>
<small>...</small>
<big>...</big>

Diese Textauszeichungen können wie das <a>-Element in den Fließtext eingebaut werden, um einzelne Wörter oder Sätze hervorzuheben. Der Reihenfolge nach haben sie folgende Bedeutungen: bold = fett, italique = kursiv, underlined = unterstrichen, small = kleiner als normal, big = größer als normal.

Schriftformatierung

<font size="7">Riesiger Text</font>
<font color="blue">Blauer Text</font>
<font face="Arial">Schriftart Arial</font>

Auch diese Einstellungen sollten vom Prinzip her aus Word bekannt sein. Die normale Schriftgröße ist size="3", bei der Schriftart sollte man keine allzu exotischen wählen und die Farbe kann entweder aus den 16 Standardfarben oder in Hexadezimalschreibweise (Beispiel: #0000FF = blauer Text) angegeben werden. In der Regel reichen aber die Standardfarben aus und lassen sich auch leichter finden bzw. merken. Die wichtigsten sind: black, green, navy (=dunkelblau), purple, silver, gray, red, lime (=hellgrün), yellow, blue, white. Mit der Hexadezimalnotation hätte man eine Auswahl aus Millionen von Farben - wer diese nutzen will, kann die richtige Notation am besten über Programme wie Paint oder Photoshop herausfinden.

Gliederungselemente

Um eure Seite noch übersichtlicher zu gestalten, könnt ihr über Listen und Überschriften hinaus noch weitere Elemente verwenden - diese sind vor allem:

Trennlinie

<hr>

Diese Querlinie (hr = horizontal rule) durchzieht standardmäßig die ganze Breite der Seite und schafft so einen klaren Bruch im Text - vor allem praktisch zur deutlicheren Trennung nicht direkt zusammgehöriger Textabsätze. Mit den Attributen kann sie allerdings auch verkürzt oder dicker gemacht werden und ihre Position bestimmt werden:
<hr width="250" size="5" align="center"> wäre also eine dicke horizontale Linie in der Mitte der Seite, die sich nur etwa über ein Viertel der Gesamtbreite erstreckt.

Tabelle

<table> (markiert Anfang und Ende der ganzen Tabelle) <tr> (table row markiert Anfang und Ende einer Zeile) <th> (table head bezeichnet eine Kopfzelle) <td> (table data eine Datenzelle)

Wie viele Zeilen eine Tabelle hat ist also abhängig von der Zahl der <tr>-Elemente innerhalb einer Tabelle und die Zahl der Spalten ergibt sich aus den Kopf- oder Datenzellen zwischen zwei <tr>-tags.

Auch wenn die Homepagegestaltung mit Tabellen möglich ist, ist ihr eigentlicher Sinn die Darstellung von Inhalten im Rahmen der Seite. Eine Tabelle zur Fragebogenauswertung könnte beispielsweise folgendermaßen aussehen:

<table border="1">
  <tr>
    <th>Frage \ Antwort (in %)</th>
    <th>Ja</th>
    <th>Nein</th>
    <th>Vielleicht</th>
  </tr>
  <tr>
    <th>Sind Äpfel rot?</th>
    <td>31%</td>
    <td>29%</td>
    <td>40%</td>
  </tr>
  <tr>
    <th>Sehen sie das politisch?</th>
    <td>87%</td>
    <td>3%</td>
    <td>10%</td>
  </tr>
</table>

Frage \ Antwort (in %)	Ja	Nein	Vielleicht
Sind Äpfel rot?	31%	29%	40%
Sehen sie das politisch?	87%	3%	10%

Um eine einheitliche Größe verschiedener Tabellen zu gewährleisten (normalerweise passen sie sich automatisch an die Menge ihres Inhaltes an) kann mit "width" die Breite einer Zelle/Spalte in % oder px angegeben werden.

Block Element

<div></div>

Dieses Element, ohne weitere Angaben, dient nur dazu Text in Blöcke zu gliedern (division = Abteilung) - es ist praktisch nicht vorformatiert. Allerdings eignet es sich hervorragend dazu, eigens formatiert zu werden - somit können Kasten, farbige Felder, etc. hergestellt werden. Hier für sei die zentrale Formatierung mit CSS nochmals wärmstens empfohlen, da sich das Block Element so am effektivsten einsetzen lässt!

Neben den oben aufgeführten Textformatierungen bieten sich hier also auch die Attribute Ausrichtung, Rahmen und Hintergrundfarbe an.
Die schnellste Eingabe bei mehreren Formatierungen wird mit "style" eingeleitet, beispielsweise:

<div style="align: center; width:300px; height:80px; border:thick solid red;
background-color:yellow; font-color:red; text-align:center;">
<b>Block Element</b><br />Dieses Block Element könnte als Warnbox, wichtiger Hinweis
oder nervig-aufdringlicher Werbebanner dienen!</div>

(Die Aufteilung in drei Zeilen ist natürlich nicht nötig, sondern soll hier nur dafür sorgen, dass der Text nicht über den Bildrand hinausgeht.)

Block Element
Dieses Block Element könnte als Warnbox, wichtiger Hinweis oder nervig-aufdringlicher Werbebanner dienen!

Bei der Eingabe der Attribute muss allerdings genau auf die verwendeten Zeichen und Abstände geachtet werden, da sonst in der Regel das ganze Element falsch dargestellt wird. Die Eingestellten Attribute sollten nun selbsterklärend sein. Lediglich der border bedarf vielleicht noch der Erklärung: Hier wird zunächst die Breite des Randes angegeben, als nächstes die Ausführung desselben und schließlich die Farbe. In diesem Beispiel wurden vordefinierte Begriffe verwendet, aber statt thin, medium oder thick könnte die Breite auch wieder in px angegeben werden oder die Farbe als Hexadezimalwert. Lediglich die Darstellungsweise kann nur aus bestimmten Vorgaben ausgewählt werden, beispielsweise noch dotted, inset (für 3D-Effekt) oder double.

Für die volle Bandbreite an Formatierungen und Attributen sollte jedoch die erwähnte Seite SELFHTML.org herangezogen werden: Über die Suchfunktion können auch einzelne Element- und Attributbeschreibungen schnell in der ausführlichen Dokumentation nachgeschlagen werden!

Bilder

<img src="...">

Nicht nur um die Homepage weiter auszuschmücken, sondern auch (oder vor allem) um Diagramme dort einzufügen, könnt ihr in eurer Homepage auf im Netz befindliche Bilder verweisen. Die URL des Bildes wird in den Anführungsstrichen nach src= angegeben - die Regeln dafür sind die gleichen wie bei gewöhnlichen Links, nur dass hier eben direkt die Grafik in der Seite angezeigt wird.

Die meisten der weiter oben bereits beschriebenen Attribute könnt ihr für Bilder auch verwenden: border, width, height, align, vertical-align düften die wichtigsten sein, wobei die Veränderung der angezeigten Größe nur in geringen Maßen verwendet werden sollte, aus den im nächsten Absatz angegebenen Gründen. Zudem könnt ihr mit alt="..." eine Bildbeschreibung eingeben, die angezeigt wird, wenn entweder die Grafik nicht angezeigt werden kann oder der Benutzer mit dem Mauszeiger darauf deutet.

Bitte achtet dabei immer darauf wie viele Bilder ihr auf eurer Seite anbringt und in welchem Format:
Zu viele Bilder machen die Seite nicht nur unübersichtlich sondern auch langsam (und verschwenden den, zumindest bei arcor.de, begrenzten monatlichen Datentransfer.) Ähnlich kann sich aber auch das Bildformat auswirken: In der Regel sollten eure Bilder im .jpg-Dateiformat abgespeichert sein, bei einfachen Grafiken bietet sich auch das meist noch kleinere .gif-Format an, während beispielsweise .bmp-Dateien sehr viel mehr Speicher verbrauchen. Auch auf die Bildgröße solltet ihr vor dem Upload achten: Eingescannte oder mit der Digicam fotografierte Bilder haben meist eine viel höhere Auflösung, als auf dem Bildschirm überhaupt angezeigt werden kann, was die Dateigröße wieder enorm in die Höhe treibt. Auch wenn ihr das Bild auf der Seite (durch entsprechende Größen-Attribute oder durch skalieren in FrontPage) verkleinert anzeigen lasst, bleibt die Dateigröße die selbe! Verkleinert das Bild also vor dem Upload mit einem Bildbearbeitungsprogramm auf die richtige Größe. Geeignete Bildprogramme dafür wären beispielsweise alle Photobearbeitungsprogramme, IrfanView oder GIMP (die beiden letzteren werden kostenlos im Internet zum Download angeboten.)

Ihr könnt Bilder übrigens auch direkt als Link auf eine andere Seite verwendet, in dem ihr statt einem Text einfach das img-Element zwischen die beiden <a>-tags setzt. Als Beispiel sähe das IPK-Logo mit Verweis auf die IPK-Hauptseite so aus:

<a href="http://www.projektkompetenz.de" target="_blank"><img style="border:0;width:87px;height:80px"
src="http://www.ku-eichstaett.de/Fakultaeten/SLF/romanistik/didaktik/Forschung/ipk/bilder/logo.gif"
alt="IPK-Homepage"></a>

(Die Aufteilung in drei Zeilen ist natürlich nicht nötig, sondern soll hier nur dafür sorgen, dass der Text nicht über den Bildrand hinausgeht.)