Kurs:Internet- und Projektkompetenz/Leitfaden/Homepage Zusammensetzung
Hier findet ihr Infromationen, wie ihr sinnvoll Versatzstücke aus anderen Homepages verwenden könnt und bei euch einbaut, bzw. wie mehrere Dateien in eurer eigenen Homepage angelegt werden können.
Kopieren und Umschreiben existierender Websites
[Bearbeiten]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, solange ihr davor fragt. 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
[Bearbeiten]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 derselbe 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.
Weitere Informationen zur Gestaltung von Links findet ihr unter dem Punkt: Ausgestaltung.
Zentrale Formatierung mit CSS
[Bearbeiten]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.