Benutzer:EEL/Arbeiten mit HTML

Liebe IPK-Teilnehmer!

Nachdem mit den ersten beiden Homepage Rundmails eine kleine Einführung in die Technik und den Quelltext / Code hinter HTML geliefert werden sollte, werde ich jetzt mit einigen "Bausteinen" weitermachen, die ihr mit diesen Grundlagen in eure Homepage einbauen können solltet.

1. Wichtige Bausteine der HTML-Syntax
2. Kopieren und Umschreiben existierender Websites
3. Aufbau der Projektseite

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.

Am häufigsten werdet ihr wohl diese brauchen:

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.

Eine sehr gute Kurzreferenz/Übersicht über diese und weitere Elemente und Attribute findet sich unter: http://de.selfhtml.org/navigation/html.htm

Kopieren und Umschreiben existierender Websites

Auch wenn es natürlich nicht die feine Art wäre, fremde Websites einfach so zu kopieren, denke ich dass keiner der IPK-Teilnehmer etwas dagegen hätte, wenn ihr Teile seines Quelltextes für eure Homepage kopiert. Nachdem ihr wisst, wie ein HTML-Dokument aufgebaut ist, sollte es kaum Schwierigkeiten machen Stellen richtig zu kopieren und bei euch einzufügen. Das einzige auf was ihr wirklich achten müsst, ist dass der Aufbau der Seiten zusammenpasst: Seiten, die mit Frames gestaltet sind, lassen sich beispielsweise nur schwierig in eine Seite einbauen, die Tabellen zur Gliederung nutzt - und um CSS-Formatierungen zu übernehmen, muss mehr kopiert werden als nur der <body>-Teil des Dokumentes.

Den Quelltext anderer Seiten könnt ihr euch aber immer ansehen: Wählt einfach mit Rechtsklick auf die Seite oder unter Ansicht --> "Seitenquelltext anzeigen" aus! So könnt ihr von fertigen Homepages auch einiges lernen. Leider ist der Quelltext von Seiten, die mit WYSIWYG-Editoren erstellt wurden, oft zu wirr und mit unnötigen Informationen überladen, als dass man noch richtig durchblicken könnte.

Eine Sache, die sich aber auf jeden Fall zu kopieren lohnt, sind die HTML-Kopfdaten, die bisher noch kaum verwendet wurden. Das sind die Angaben, die gleich zu Beginn des HTML-Dokumentes stehen und für den auswertenden Browser vorweg einige Dinge "klarstellen" sollen. Da es sich hierbei um recht schwierige Syntax handelt, die noch dazu in den meisten Fällen gleich sein sollte, ist es am einfachsten die Anfangszeilen einfach zu kopieren und damit den eigenen Kopf des Dokumentes zu ersetzen.

Um die richtige Darstellung einer Homepage zu gewährleisten, sollten folgende Angaben in der ersten Zeile, noch vor dem <html>-tag, gemacht werden:

Für Seiten mit Frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Für Seiten ohne Frames (also Tabellen oder CSS):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Diese oder ähnliche Angaben werdet ihr im Quelltext der meisten öffentlichen Websites wiederfinden. Weitere Angaben finden sich in der Regel zwischen den <head>-tags:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <meta name="keywords" content="IPK, Projekt, Land">
  <meta name="description" content="Projektseite einer Gruppe des IPK-Kurses">
  <title>Projektname</title>
</head>

In der ersten Zeile wird ein standardisierter Zeichensatz festgelegt (wer ungewöhnliche Sonderzeichen verwenden möchte muss diesen eventuell umstellen - ansonsten dürfte das Beispiel oben eine ganz gute Wahl sein.) In der zweiten Zeile werden Schlüsselwörter für Suchmaschinen wie Google eingegeben, jeweils durch Kommata getrennt. Die dritte Zeile enthält eine kurze Beschreibung eures Projektes (für die Vorschau bei Suchmaschinen) - hier könnt ihr beispielsweise den kurzen Einführunstext einfügen, den ihr für die erste Version eurer Seite geschrieben habt. Die <title>-Zeile kennt ihr ja bereits.

Aufbau der Projektseite

Natürlich besteht eine ordentliche Homepage nicht nur aus einem Dokument, wie bisher, sondern aus einer Reihe von verlinkten Dateien. Diese können in eurem Webspace abgespeichert werden, wie Dateien auf eurer Festplatte - ihr könnt auch Ordner erstellen, um bei einer großen Website den Überblick zu bewahren. Verlinken könnt ihr eure Dokumente mit dem <a>-Element: Dabei müsst ihr nicht mal die ganze URL angeben, wenn sich die Dateien auf eurem Webspace befinden, sondern für Dateien im gleichen Ordner reicht der Dateiname - etwa so:

Hier geht es zur <a href="Auswertung.html">Auswertung des Fragebogens</a>.

Wenn sich die Datei in einem Ordner befindet, muss dieser angegeben werden, beispielsweise als:

href="Fragebogen/Auswertung.html"

Wenn sich die aktuelle Datei in einem anderen Ordner befindet, kann durch zwei Punkte zum übergeordneten Ordner zurückgekehrt werden. Zum wechseln von "Fragebogen/Auswertung.html" zu "Grundlagen/Theorien.html", würde der Link folgendermaßen lauten:

Vgl. dazu die <a href="../Grundlagen/Theorien.html">grundlegenden Theorien</a>.

Am besten ist es, eure erste Seite gleich so zu gestalten, dass ihr für die folgenden am Grundgerüst nichts mehr verändern müsst. Um ein neues Dokument zu erstellen, könnt ihr diese dann einfach kopieren und die Inhalte verändern, während der Aufbau im großen und ganzen der Selbe bleibt. Wenn ihr im Nachhinein noch etwas an der Gestaltung eurer Seite ändern wollt, müsst ihr die Änderungen jeweils auf allen Dokumenten einzeln vornehmen. Eine Ausnahme bildet hier lediglich die Gestaltung mit einer zentralen CSS-Datei.

Zentrale Formatierung mit CSS

Bisher waren die CSS-Formatierungen nur in den Kopfdaten des HTML-Dokuments. Man kann diese Formatierungsangaben aber auch in einer eigenen Datei abspeichern, auf die alle HTML-Dokumente zugreifen. Der Vorteil ist, das mit jeder Veränderung an den Einstellungen in dieser einen Datei, die Formatierung in allen darauf zugreifenden HTML-Dokumenten der Website gleichzeitig verändert wird. Das erspart bei nachträglichen Veränderungen logischerweise einiges an Arbeitsaufwand!

Um eine zentrale CSS-Datei einzurichten, fügt ihr im Kopf eures HTML-Dokuments, nach der Zeile mit den <title>-tags, folgende Zeile ein:

<link rel="stylesheet" type="text/css" href="formatierung.css">

Die Formatierungsangaben kopiert ihr einfach in eine neue Datei, die ihr "formatierung.css" nennt und auf euren Webspace hochladet. Natürlich kann die Datei auch umbenannt und beliebig viele verschiedene Stylesheets verwendet werden. Beispiele dafür finden sich auch auf meiner Projektseite - http://home.arcor.de/eelber/ Für die Starseite wird dort "splash.css" und für die normalen Seiten "ipkjap.css" verwendet. Diese Dateien können auch im Browser als einfacher Text angesehen und kopiert werden.