HTML - Beispielseiten und Empfehlungen zur Gestaltung
Hier finden sich einige HTML-Seiten, die mit einfachsten Mitteln gestaltet sind. Die wichtigsten Elemente sind so dargestellt, daß sie leicht nachvollzogen und dann zur Erstellung eigener Seiten eingesetzt werden können. Öffne die Seite mit dem Thema, das Dich interessiert, mit dem Browser, (Das hast Du ja bereits getan.) und schau Dir den Quelltext, der die Seite erzeugt, an. Das kannst Du innerhalb des Browsers tun, falls er die Option Ansicht ==> Seitenquelltext anbietet. Ansonsten geht das mit jeder Textverarbeitung, am besten mit dem Editor. Dann ist es leicht, die Aufgaben zu lösen und die Konstruktion der Seite zu verstehen. Zu Risiken und Nebenwirkungen frage Deinen Lehrer oder besuche den im Ausgangsbereich angegebenen vollständigen HTML-Kurs.
Nachdem Du die Konstruktion der Seiten in diesem Kurs verstanden hast, solltest Du mit Hilfe der Seiten-Vorlage eigene Seiten für das FSG erstellen können. Versuche dabei, dich für den Anfang auf einfache Mittel zur Gestaltung zu beschränken. Unten auf dieser Seite findest Du einige Empfehlungen zur Gestaltung. Ansonsten kannst Du ja mal bei David Siegel, einem der führenden Web-Designer, vorbeischauen. Die Adresse findest Du ebenfalls im Ausgangsbereich.
Den Ablauf unseres Projekts zur Gestaltung einer Hompage für das Friedrich-Spee-Gymnasium kannst Du stichwortartig unten auf dieser Seite nachlesen. Links zur benötigten Software findest Du im Ausgangsbereich.
Themen
- Kopf und Körper einer leeren HTML-Seite - Diese Seite kann als Grundlage für eigene Seiten verwendet werden.
- Erste Versuche in HTML - Suche nach Tags und Entities.
- Überschriften, Linien, Absätze und Listen - Übungen zur Textgestaltung
- Darstellung von Sonderzeichen - Wie wird in HTML ä,ö,ü und ß geschrieben?
- Einbinden von Grafiken in HTML-Seiten - Bilder und Symbole machen eine HTML-Seite farbig.
- Hypertext durch Links - Durch einen Mausklick an einen anderen Ort gelangen.
- Tabellen - Vielseitige Gestaltungshilfen, die ihre Tücken haben.
- Zusammenfassung - Die wichtigsten Tags im Überblick
- Vorlage - Vorlage für die Erstellung eigener Seiten.
Diese acht Beispielseiten wurden als Vorbereitung auf das Projekt "Homepage" vom Kurs bearbeitet. Danach wurden Sie durch dieses Inhaltverzeichnis zu einem Kurs für Einsteiger verbunden.
Empfehlungen zur Gestaltung von Internet-Seiten
- Weniger ist mehr! - Versuche, nicht alles auf einmal darzustellen.
- Beschränke Dich auf wenige, zueinander passende Farben!
- Vermeide unruhige Hintergrundbilder und zuviele blinkende und bewegte Elemente!
- Eine Seite sollte nicht mehr als drei bis vier Bildschirme umfassen!
- Teste Deine Seite mit verschiedenen Browsern und unterschiedlichen Auflösungen. Manchmal erlebt man sein blaues Wunder.
- Benutze Frames nur, wenn Du die Technik gut beherrscht; sonst geht´s schief.
- Speichere Fotos (Bilder mit mehr als 256 Farben) im JPEG-Format. Durch diese Komprimierung geht Information aus dem Bild verloren. Hebe aus diesem Grund das Original unter einem anderen Namen auf. Teste, wie weit Du ein Bild komprimieren kannst, ohne daß es wesentlich an Qualität verliert. Dazu mußt Du mehrmals mit unterschiedlichen Komprimierungsraten experimentieren. Strebe immer eine möglichst geringe Dateigröße an, um die Ladezeiten Deiner Seiten kurz zu halten. Verkleinere dazu evtl die Bilder (Vergleiche dazu den Fotokurs der Jgst.12 und den Stadtrundgang durch Rüthen).
- Speichere Grafiken und Zeichnungen (Palettenbilder mit maximal 256 Farben) im GIF-Format. Durch diese Komprimierung geht keine Information aus dem Bild verloren. Die Komprimierung wird umso stärker, je weniger Farben das Bild enthält. Hebe das Original unter einem anderen Namen auf, und versuche, mit einem geeigneten Bildbearbeitungsprogramm die Anzahl der Farben zu verringern, ohne daß die Qualität leidet. Dazu sind evtl. mehrere Versuche notwendig. Ansonsten gilt das gleiche wie für JPEG-Bilder (Vergleiche dazu die Skizze unseres alten Schulgebäudes auf der Eingangsseite (4 Farben, 18 KB) oder die Karikatur im Ausgangsbereich (32 Farben, 13 KB)).
- Adressiere Bilder und Links in der eigenen Seite immer relativ! Das vereinfacht das Übertragen auf einen Server.
- Teste Deine Seite, nachdem Du sie auf einen Server geladen hast! Funktionieren alle Links? Sind alle Bilder vorhanden? Wie lang sind die Ladezeiten?
Ablauf des Projekts "Homepage für das Friedrich-Spee-Gymnasiums"
Trotz der nach heutigen Maßstäben (Stand: Februar 1998) bescheidenen Rechnerleistung im Informatikraum (13 386er mit Windows 3.1, ein Pentium 125 mit Windows 95, ISDN-Karte (der von SaN), ein File-Server, Ganzseiten-Scanner, Laser-Drucker, OH-Display, alles vernetzt unter Novell 3.11) klappte die Erstellung der Seiten recht reibungslos.
Arbeitsschritte:
- Ideen-Sammlung anhand von Seiten anderer Schulen (Aus dem Internet heruntergeladen mit WebWhacker)
- Planung der Seiteninhalte und Aufteilung der Bereiche
- Planung der Verzeichnisstruktur und Festlegung der Dateinamen der einzelnen HTML-Dokumente
- Erfassung der Texte (MS-Works) am Arbeitsplatz
- Konvertierung ins HTML-Format am Multimedia-Arbeitsplatz (Star-Writer, haben wir im Rahmen von SaN von Star-Division erhalten)
- Erfassung der benötigten Fotos und Grafiken (Scanner im Informatikraum)
- Vorbereitung der Bilder durch Schüler und den Kursleiter zu Hause
- Erstellen der HTML-Seiten durch die Schüler mit Web-It (Ausgezeichneter HTML-Editor unter Windows 3.1: Im oberen Fenster wird der HTML-Code geschrieben, wobei Elemente wie Listen, Tabellen, Links, etc. durch Buttons automatisch erzeigt werden. Im unteren Fenster erscheint ein Eindruck der Seite im Browser.)
- Speichern der Seiten auf dem Novell-Server und Kontrolle in Netscape am Multimedia-Arbeitsplatz. Danach evtl. Nachbearbeitung am eigenen Arbeitsplatz.
- Hochladen der fertigen Seiten auf den Server des Anbieters mit WS-FTP95 vom Multimedia-Arbeitsplatz aus.
- Kontrolle der Seite im Internet
Felix Pradel, Kursleiter
Inhaltsverzeichnis