Hallo!
Sorry!
Ich war in der Früh in Eile und habe nicht gesehen, dass diese Webseiten keine mehr sind, sondern nur noch mit meiner Festplatte verknüpft sind.
Hier alles einzeln:
Zurück zur Überblicksseite
Black Panther Eine Homepage erstellen - Einführung in HTML
Mit Ulli Meybohms Editor eine erste Datei erstellen
* Nach dem Start des Editors wählen Sie unter dem Menü "Datei" den Unterpunkt "Neues HTML Dokument" (Sie können auch das Symbol Neues HTML Dokument anklicken)
* Tippen Sie unter "Titel der Seite" einen beliebigen Namen ein (z.B. Meine erste Seite). Der Titel kann auch leer bleiben.
* Klicken Sie auf "erstellen".
* Schreiben Sie jetzt Ihren Text zwischen und
* Speichern Sie die Seite unter einem beliebigen Namen.
* Zum Ansehen der Seite im internen Internet Explorer klicken Sie auf das Symbol der weißen Seite mit der Lupe Internen Browser aufrufen oder - viel einfacher - drücken die Taste F9.
* Sie werden sehen, dass Zeilenschaltungen oder Einrückungen im Editormodus nichts bewirkt haben. Alle Worte stehen hintereinander.
Hier muss jetzt als nächstes mit HTML-Befehlen gearbeitet werden.
Zeilenschaltung:
Damit Text in eine neue Zeile umgebrochen wird, muss an der Umbruchstelle der Befehl
("break" = umbrechen) eingefügt werden. Sie erzeugen diesen Befehl entweder mit der Tastenkombination Umsch + Zeilenschalttaste oder durch Klicken auf das Symbol Zeilenumbruch.
Beispiel:
Hier ist die erste Zeile
und hier beginnt die zweite.
Absätze:
Um einen Textblock vom nächsten Absatz abzusetzen, wird jeder Absatz mit dem Befehlspaar gerahmt. Dazu wird - wie bei einer Textverarbeitung (z.B. Word) auch - der entsprechende Abschnitt mit dem Cursor markiert. Klicken Sie dann auf das Symbol Absatz oder arbeiten Sie mit der Tastenkombination Strg + Zeilenschaltung.
Beispiel:
Es ist auch Meinungsaustausch,
wenn man mit seiner Meinung zum Chef geht,
und mit dessen Meinung zurückkommt.
(Graffiti)
Wenn ein Kopf und ein Buch zusammenstoßen
und es hohl klingt,
muß es nicht am Buch liegen.
(Georg Christoph Lichtenberg)
Es genügt auch, vor dem neuen Absatz lediglich den Befehl zu setzen. Sauberer ist aber das Einklammern des Absatzes mit dem Befehlspaar.
Tipp:
Um einen neuen Absatz zu beginnen, kann man auch 2 Zeilenschaltungen einfügen:
Prinzipien bei der Struktur von HTML:
Jeder HTML-Befehl beginnt mit der Klammer < und endet mit der Klammer >. Außerdem (mit wenigen Ausnahmen) handelt es sich immer um ein Befehlspaar: Der erste Befehl steht direkt vor dem Abschnitt, für den er gilt, der zweite Befehl (immer erkennbar an der Folge
Fett, kursiv, unterstrichen: , ,
Diese Symbole sind von der Textverarbeitung her bekannt. Das Formatieren funktioniert wie dort.
Überschriften:
Es gibt 6 Größen: h1 bis h6, wobei h1 die größte Überschrift ist.
Nach jeder Überschrift wird automatisch ein Absatz eingefügt.
Schrift und Schriftangaben:
Wenn keine Angaben gemacht werden, welche Schrift der Browser anzeigen soll, wird von ihm die Standardschrift (in der Regel Times New Roman) ausgewählt. Wünscht man andere Schriften, kann man sie angeben, z.B.: . Wählen Sie zum Angeben der Schrift aus dem Menü "Schrift" das Untermenü "Schriftart" und dort die Option "Andere Schriftart...".
Vorsicht: Nicht jede von Ihnen angegebene Schrift wird auch auf dem Browser der SurferInnen angezeigt, sondern nur die auf deren PC installierten!! Wählen Sie deshalb möglichst nur die gängigsten Schriften, z.B. Times New Roman, Arial, Comic sans MS, Verdana, damit das vielleicht mühsam erarbeitete Layout nicht durch ein völlig anderes Erscheinungsbild im Schriftbereich beim Besucher Ihrer Seite zunichte gemacht wird.
Sinnvoll ist es, immer eine Ersatzschrift (innerhalb der Anführungszeichen, mit Komma getrennt) anzugeben. Beispiel:
Weitere mögliche Angaben innerhalb des font-Tags:
* Schriftgröße: size="2"
Größenangaben sind von 1 bis 7 möglich. 7 ist am größten, 1 am kleinsten.
* Schriftfarbe: color="#0000FF"
Die Farben können Sie festlegen unter dem Menü "Einfügen" --> "RGB-Farbe".
Beispiel mit allen Angaben im einleitenden Tag:
Die einzelnen Angaben werden durch Leerzeichen getrennt, ihre Reihenfolge ist egal.
Weiterführung:
Dies sollte nur eine kleine Einführung sein, um das Prinzip von HTML zu verstehen.
* Mehr zum Gestalten Ihrer ersten Datei erfahren Sie im Handbuch Selfhtml, Datei TC.HTM.
* Besonders hinweisen möchte ich auf die weiteren möglichen Angaben im body-tag, der für das Layout sehr wichtig ist: Datei TCC.HTM im Selfhtml-Handbuch
* Außerdem finden Sie weitere Informationen und Anregungen unter "Verschiedene Vorlagen und Bausteine", Punkt "Mögliche Angaben in Tabellen, Frames, Body-Tag, Schrift" und Punkt "Die wichtigsten HTML-Befehle".
Copyright © Johannes Fritzsche Email (erstellt am 15.06.2004)
Zurück zur vorigen Seite
----------------------------------------------------------------------------------
Zurück zur Überblicksseite Eine Homepage erstellen - Vorlagen und Bausteine
Vorbemerkung:
In diesen Vorlagen und Bausteinen finden Sie immer wieder fertigen HTML-Code. Sie können ihn markieren, kopieren und in Ihre Datei einfügen.
Achtung: Beim Meybohm-Editor lässt sich vom internen Browser (Internet Explorer) nicht kopieren. Sie sollten deshalb den externen Internet Explorer aufrufen. (Tastenkombination Strg + F9 oder klicken auf ) Falls das nicht funktioniert müssen Sie ihn erst verknüpfen: Menü "Ansicht" --> "Programmeinstellungen" --> "Zusatzbrowser 1". Siehe auch "Ulli Meybohms HTML Editor einrichten"
ÜBERBLICK:
Layouttipps
Präsentationen
Tabellen
Frames
Hilfen und Bausteine
Formulare
Mögliche Angaben in:
Tabellen, Frames, Body-Tag, Schrift, Absatz/Abschnitt
HTML-Befehle
Eine Auswahl der wichtigsten Befehle
LAYOUTTIPPS:
Neben einem interessanten Inhalt entscheiden das Layout einer Internetseite, die schnelle Verfügbarkeit und Übersichtlichkeit bei diesem Medium, ob ein(e) Besucher(in) länger auf Ihren Seiten bleibt oder nicht. Dauert es z.B. 1 Minute, bis die Begrüßungsseite überhaupt geladen ist (zu große Grafik oder zu viele Grafiken), dann haben sich viele schon wieder verabschiedet.
Deshalb folgende Anregungen:
* Kurz und knapp
Das Medium Internet hat seine eigenen Gesetze. Anders als beim Buch oder der Zeitung sind nicht umfassende Informationen und Hintergrundwissen gefragt. Also keine "Bleiwüsten" sondern gut gegliederte, mit Grafiken aufgelockerte Seiten mit kurzen und prägnanten Aussagen und vielen Verknüpfungen. Für die eher wenigen, die ausführlichere Informationen wünschen, sollte man lieber auf weiteren Seiten die Möglichkeit bieten, mehr zu erfahren. Auf diese Seiten kann man mit "Links" hinweisen ("Mehr Information", "Hintergrundinfos" oder Ähnliches)
* Keine Insidersprache
Als Zielgruppe sollten Sie Außenstehende ins Auge fassen, so wird ein viel größerer Kreis erreicht und niemand durch exklusive Sprache ausgeschlossen.
* Einheitliches Erscheinungsbild
Ein einheitliches Erscheinungsbild auf allen Seiten sorgt dafür, dass Besucher die Seiten mit Ihrer Gemeinde / Ihrem Verein identifizieren. Dazu könnte das Logo auf jeder Seite, gleiche Schrift und Gliederungsmerkmale, gleicher Seitenaufbau und gleiche Farben beitragen.
* "Frames" oder nicht?
Ob Sie sogenannte Frames verwenden oder nicht, hängt vom Umfang Ihres Projekts ab. Ab einer Anzahl von mehr als 20 Seiten empfiehlt sich ihre Verwendung auf jeden Fall: zu Ihrer Arbeitserleichterung und zur besseren Navigation für Besucher Ihrer Homepage. So können Sie in einem Frame (der mit einheitlichem Aussehen immer zu sehen ist) - und damit in einer einzigen html-Datei - das Logo und alle Verweise auf weitere Seiten unterbringen.
Als Beispiel können Sie sich die Homepage der Kirchengemeinden Bellersheim und Obbornhofen auf dieser CD ansehen: Der untere Frame bleibt als Navigationsfenster stehen (Ausnahme: Chronik)
Im Internet: http://www.ev-kirche-bellersheim.de/
(Zu Frames siehe auch den eigenen Abschnitt unten!)
* Layout testen
Was in der Vorschau des Editors den eigenen Vorstellungen entspricht, kann bei den Besuchern Ihrer Homepage auf deren Bildschirm völlig anders aussehen. Bedingt wird das durch folgende Faktoren:
1. Der benützte Browser und seine Schriftgrößeneinstellung
2. Die Größe des Browserfensters (nicht alle maximieren ihn zum Surfen) und die Größe des Bildschirms
3. Die in der Systemsteuerung des PCs eingestellte Bildschirmauflösung
4. Die in der Systemsteuerung des PCs installierten Schriften
Damit Sie ein trotzdem optimales Ergebnis erzielen, hilft nur testen!
Punkt 1. lässt sich leicht durchspielen, wenn Sie Ihre Seite mit mindestens 2 Browsern (Internet Explorer und Netscape) überprüfen und dabei unter dem Menü "Ansicht" jeweils den Schriftgrad verstellen. Erbitten Sie von Freund(inn)en mit anderen Browsern eine Rückmeldung.
Punkt 2 lässt sich simulieren, wenn Sie das Browserfenster verkleinern (auch z.B. in der Größe eines 15-Zoll-Bildschirms).
Bei Punkt 3 sollten Sie einmal Ihre Bildschirmauflösung verstellen (Start --> Einstellungen --> Systemsteuerung --> Anzeige --> Register "Einstellungen" --> Bildschirmbereich). Probieren Sie einmal die Einstellungen 800 x 600 Pixel und 1024 x 768 Pixel.
Auf Punkt 4 haben Sie leider keinen Einfluss. Sie können nur Überraschungen vorbeugen, indem Sie die gängigsten Schriften wählen.
* Feste Seitenbreite durch Tabelle
Bei gedruckten Medien lautet eine der Regeln: Für eine gute Lesbarkeit nicht mehr als 50 bis höchstens 60 Buchstaben pro Zeile.
Ein Problem bei HTML-Dateien ist, dass Zeilen in einem Fließtext so breit sind, wie das Browserfenster.
Um die Breite der Zeilen einigermaßen steuern zu können, empfiehlt es sich, mit Hilfe einer Tabelle eine konstant breite Druckseite "nachzustellen":
Hier wird die Seite gefüllt
Der HTML-Code lautet:
|
bgcolor=#c0c0c0>
[Hier einfügen, was auf das weiße "Blatt" soll!]
|
Erläuterungen:
bgcolor= im body-Tag legt die Farbe außerhalb der - im Beispiel - weißen Seite fest.
sorgt dafür, dass die Seite immer in der Mitte des Fensters platziert bleibt.
border=0 bewirkt, dass die Seite ohne Rand dargestellt wird. Probieren Sie ruhig einmal aus, wie die Seite mit Rand wirkt.
Mit der Zahl hinter cellpadding= wird der Abstand der Schrift (und anderer Elemente) zum Seitenrand festgelegt.
bgcolor= legt die Farbe der Seite fest.
Mit width= wird die Breite der "weißen" Seite festgelegt. Sie sollte nicht breiter als 630 (Pixel) sein. Wenn es noch links oder rechts einen Frame gibt, muss die Seite schmäler werden.
Im td-Tag sorgt die Angabe valign=top (valign = vertical align = vertikale Ausrichtung, top = oben) dafür, dass der Inhalt am oberen Seitenrand ausgerichtet wird.
*
Hintergrundfarben und -bilder
Hintergrundbilder sollten sehr vorsichtig eingesetzt werden. Zu ihnen muss eine passende Schriftfarbe gefunden werden, was bei kontraststarken Hintergrundbildern nicht so einfach ist. Das Gleiche gilt für kräftige Hintergrundfarben (die im Gegensatz zu den Bildern keine Ladezeit brauchen)
Hintergrundbilder finden Sie auf der CD unter Grafik\Hintergruende1 und Grafik\Hintergruende2, außerdem einige unter Grafik\Bilder.
Die zugehörigen HTML-Befehle:
Hintergrundbild: In den body-Tag schreiben Sie background="Datei.gif" Auch das Dateiformat jpg ist dafür geeignet. Hintergrundbilder werden - wenn sie kleiner als das Browserfenster sind - "gekachelt", d.h. ständig wiederholt.
Hintergrundfarbe: In den body-Tag setzen Sie die Angabe bgcolor=#Farbe
Wenn Sie beide Befehle gleichzeitig notieren, wird während der Ladezeit des Hintergrundbildes die Hintergrundfarbe angezeigt.
Gut geeignet sind natürlich helle Hintergrundbilder, die Papierseiten nachahmen. Hier ist ein Beispiel.
*
"Pixelbilder" verwenden: Minibilder ganz groß
Ein guter Trick, um seine Seiten grafisch mit Farbe zu gestalten, ohne dass lange Ladezeiten entstehen, ist die Verwendung von sogenannten Pixelbildern. Es handelt sich um 1 Pixel x 1 Pixel (= die kleinstmögliche Größe: 1 Bildpunkt) große Bilder, die mit bloßem Auge gar nicht sichtbar sind.
Man kann sie übrigens mit einem Fotoprogramm erstellen, indem man eine neue Datei mit der Größe 1 Pixel x 1 Pixel und Bildtyp 8 Bit (256 Farben) erstellt, mit der gewünschten Farbe füllt und als gif-Datei speichert.
Würde man dieses Pixelbild im Maßstab 1:1 einfügen, dann würde innerhalb des image-Tags width=1 und height=1 stehen. Man kann diese Angaben beliebig ändern und auf diese Weise Farbflächen kreieren. Auf diese Weise sind der breite orange Balken oben auf der Seite und der schmale unten, sowie die orangen Link-Quadrate entstanden.
Unter "Grafik\Bilder" finden Sie die Farben blau (_blau.gif), dunkelgelb (_gelbdu.gif, grellgelb (_gelbgrell.gif), grün (_gruen.gif), hellgrün (_gruenhell.gif), lila (_lila.gif), orange (_orange.gif) und rot (_rot.gif).
Beispiel für Farbflächen mit den genannten Farben mit jeweils 30 Pixel Breite und 30 Pixel Höhe:
*
Tabellen verwenden
Für das Erscheinungsbild einer Seite sind Tabellen ein sehr wichtiges (aber leider auch etwas kompliziertes) Gestaltungselement mit sehr vielen Möglichkeiten. Vielleicht sollten Sie sich einmal daran versuchen, wenn Sie die Anfänge der HTML-Sprache und -Seitengestaltung gut beherrschen.
Deshalb hier nur ein kleiner Tipp: Mit Word 97 lässt sich sehr gut und übersichtlich mit Tabellen arbeiten. Versuchen Sie einmal, eine Seite damit zu erstellen und dann als htm-Datei (diese Option bietet Word 97 beim Speichern unter dem Punkt "Dateityp" an) abzuspeichern. Das so erstellte Layout können Sie in das Grundgerüst Ihrer Seite einfügen.
Siehe auch den Abschnitt "Tabellen"!
*
Vorformatierten Text verwenden
Sogenannter "präformatierter Text" (Befehl:
pre = preformatted = vorformatiert) bietet die Möglichkeit, wie bei einer Schreibmaschine zu arbeiten. Das heißt, jedes Leerzeichen, jedes Einrücken und jede Zeilenschaltung oder Leerzeile im HTML-Quelltext wird dargestellt. Die Schrift ist "diktengleich", d.h. jeder Buchstabe und jedes Leerzeichen braucht gleich viel Platz.
Vorteil:
Wenn mehrere Personen Texte für die Homepage schreiben und gestalten, einige sich aber nicht mit der HTML-Sprache auskennen, ist dies eine gute Möglichkeit, Seiten zu gestalten. Die Texte sollten mit "Notepad" bzw. "Editor" (unter Zubehör von Windows) getippt werden. Unter dem Menü "Bearbeiten" sollte "Zeilenumbruch" deaktiviert werden. Die Fensterbreite von Notepad sollte man auf die gewünschte Breite des Textes im Browserfenster einstellen. Natürlich muss jetzt am Fensterrand jedes Mal ein Zeilenumbruch eingefügt werden.
Auch tabellarische Aufstellungen können so sehr viel leichter erstellt werden. Beispiel:
UNSERE BÜROZEITEN:
==================
BELLERSHEIM: OBBORNHOFEN:
-----------------------------------------------------------------
Montag: 8.45 Uhr 14.00 Uhr
-----------------------------------------------------------------
Dienstag: 10.00 Uhr 16.30 Uhr
-----------------------------------------------------------------
Innerhalb von und
können auch alle HTML-Befehle angewendet werden - vor allem kann man so auch Schreibmaschinenschrift vermeiden und farbige Schrift verwenden. Beispiel:
Es war ein wundervoller Wintertag, die Felder mit einem leichten Schnee bedeckt,
die Wintersonne leuchtete mild von dem mit leichten weißen Wölkchen besäten
Himmel. "Was für ein schönes Weihnachtsfest könnten wir feiern!"
so ging es dem über die Felder Schreitenden durch den Sinn, "wenn
dieser elende Krieg nicht wäre!"
In sein Gedächtnis suchte er sich noch einmal die Verse einzuprägen, mit
denen er seine Ansprache im Gottesdienst beginnen wollte...
Nachteile:
Natürlich sieht Schreibmaschinenschrift nicht besonders schön aus - bei tabellarischen Aufstellungen muss man sie aber benutzen (es sei denn, man arbeitet mit Tabellen).
Wenn man vergisst, Zeilenumbrüche zu setzen (was im HTML-Editor nicht auffällt), wird die Seite im Browserfenster so breit, wie die Zeile bis zum nächsten Zeilenumbruch lang ist.
Nachträgliche HTML-Befehle bringen den Zeilenumbruch wieder durcheinander, was zeitaufwendige Änderungsarbeiten erforderlich macht.
Fazit:
Vorformatierter Text ist vor allem für einfache Aufstellungen wie die wöchentlichen Veranstaltungshinweise geeignet oder für längere gleichmäßige Textpassagen ohne zusätzliche HTML-Befehle.
Zurück zum Überblick
PRÄSENTATIONEN:
Präsentationen können auch mit HTML-Dateien erstellt werden.
* Vorteile: Mit HTML erstellte Präsentationen können auf so gut wie allen PCs (auch mit anderem Betriebssystem als Windows!) laufen - sofern diese eine Soundkarte haben. Es braucht also dafür kein eigenes Programm (wie Powerpoint) installiert zu werden.
* Präsentationen können auch auf den Internetseiten (natürlich mit geringerer Qualität) angesehen oder (mit guter Qualität) heruntergeladen werden.
* Auf CD-Rom oder Festplatte können auch sehr große Dateien ("Sound", "Animation" und Fotos/Grafiken) in hervorragender Qualität eingebunden werden.
Nachteil:
* Natürlich gibt es nicht so viele Möglichkeiten, wie z.B. bei Powerpoint.
Ein kleines Beispiel:
Gartenimpression (für den Internet Explorer)
Gartenimpression (für Netscape)
Wie's gemacht wird:
Mit nur 2 Elementen lässt sich eine Präsentation steuern:
1. Automatische Weiterschaltung nach einer voreingestellten Zeit zur nächsten Seite.
Befehl:
Diese Angabe muss zwischen und stehen. Nach content= wird die Sekundenzahl angegeben, nach der die nächste Seite aufgerufen werden soll. Nach url= wird der Name der nächsten aufzurufenden Datei angegeben. Auf diese Weise lassen sich beliebig viele Dateien in eine Reihe schalten. Ruft die letzte Datei wieder die erste auf, gibt es eine ständige Wiederholung.
2. Automatisches Abspielen einer "Sound"-Datei beim Aufrufen der Seite. Das funktioniert mit den beiden verbreitetsten Browsern Internet Explorer und Netscape - leider allerdings mit unterschiedlichen Befehlen. D.h., wenn Sie nicht wissen, welchen Browser der Empfänger / die Empfängerin einer CD-Rom mit Ihrer Präsentation hat, müssen Sie alle Dateien doppelt machen - wobei das recht einfach ist.
* Der Befehl für den Internet Explorer:
Der Code wird hinter eingefügt.
Außer Wave-Dateien (Dateierweiterung .wav) können auch midi-, mp3-Dateien und andere verwendet werden.
Nach src= wird in Anführungszeichen der Name der abzuspielenden Datei angegeben.
Nach loop= geben Sie an, wie oft die Datei abgespielt werden soll (Befehl für ständige Wiederholung: infinite).
* Der Befehl für Netscape:
Beitrag bewerten