Für die Betrachtung ist eine Bildschirmbreite von 1024 Bildpunkten angesagt. Notfalls lässt sich der Inhalt auch bei einer Bildschirmbreite von 800 Bildpunkten anzeigen. Hat man nur 640 Bildpunkte Bildschirmbreite, bringt es keinen wirklichen Spaß mehr. Für eine Anzeige auf einem Mobiltelefon war meine Website nicht gedacht. Ein Versuch, sie responsiv zu gestalten, ist um 2016 gründlich fehlgeschlagen. Ein neuer Anlauf dazu begann Anfang 2021. Er war offenbar erfolgreich.
Im Laufe der Zeit habe ich einige Editoren ausprobiert.
Viele der jetzigen Seiten sind ursprünglich mit „Ulli Meybohms HTML EDITOR” entstanden. Dies ist ein komfortabler Freeware-Editor. Er ist quelltextorientiert, erfordert also gewisse HTML-Kenntnisse. Allerdings ist er für die Erstellung von HTML5-Webseiten gegenwärtig (Stand Ende September 2014) nicht geeignet, denn er wurde schon lange nicht mehr aktualisiert. Deshalb verwende ich seitdem das Freeware-Programm „Notepad++”. Es ist für die Neuerstellung und die Pflege von HTML5-Webseiten bestens geeignet.
Wenn man im Quelltext herumbastelt, schleichen sich leicht Syntaxfehler ein. Im Web findet sich der →W3C®Markup Validation Service. Er ermöglicht die Überprüfung einer Webseite auf Syntaxfehler.
Java benutze ich überhaupt nicht. Ich hatte mich mit Java beschäftigt und auch ein wenig damit programmiert. Aber es bringt keinen Spaß zu sehen, dass die gleichen Applets bei dem einen Browser funktionieren und bei dem anderen nicht.
Javascript benutze ich nur sehr sparsam.
Cookies lassen sich mit Javascript recht einfach programmieren. Bei meiner Website werden aber keine Cookies gesetzt. Außerdem ist die Anwendung von Cookies umstritten.
CSS: Die Stilvorgaben sind nützlich und tragen zu einem guten und einheitlichen Erscheinungsbild bei. Außerdem ist fürs responsive Webdesign CSS zumindest in der Version CSS3 hilfreich.
Schriftarten, Textausrichtung und Bildunterschriften: Beim Fließtext verwende ich proportionale serifenlosen Schrift im Flattersatz ohne automatische Trennung. Überschriften sind vorzugsweise zentriert ausgerichtet. Bei Bildunterschriften ist die Schriftgröße etwas verkleinert. Ist die Bildunterschrift breiter als das Bild erscheint die Bildunterschrift im linksbündigen Flattersatz mit automatischer Silbentrennung. Andernfalls erfolgt die Anzeige der Bildunterschrift zentriert.
Generell gilt: Die Bildunterschriften schließen ohne Satzendezeichen ab, wenn sie nur einen einzigen Satz bilden. Bei Bildunterschriften aus mehr als einen Satz schließen alle Sätze der Bildunterschrift mit einem Satzendezeichen ab.
Zur Entscheidung, wie die Bildunterschrift ausgerichtet ist, wird die private Funktion imgbr() verwendet. Ausgewertet wird der zweite Aufrufparameter, d.h. der Parameter nach dem Dateinamen des Bildes:
Home
Sitemap
Die Navigation auf meiner Website
Auswahlseite.box6{border:1px;padding:.39em;margin-left:3.9em;margin-right:3.9em}
<figure> <img ... <figcaption> <div ...>text</div> </figcaption> </figure>
Die genutzte Textausrichtung bei Bildunterschriften basiert auf das in →blog.kulturbanause.de (Abruf 9.7.2019) beschriebene Verfahren. Es erfordert zwei generelle CSS-Festlegungen:
figure {text-align:center}
figcaption {display:inline-block;text-align:left}
Bindestrich, Gedankenstrich und Streckenstrich:
Laut DIN 5008 kann der Bindestrich u.a. als Gedankenstrich, als Rechenzeichen, beim Datum, als Strich für Strecken, als Strich für „bis” und als Strich für „gegen” oder für zwischen„zwischen” verwendet werden. Ich verwende als Bindestrich das Minuszeichen und – als Streckenstrich.
Zum Vergleich zuerst das –, dann das Minuszeichen und dann das —: – - —.
Der Gedankenstrich ist etwas länger als der Streckenstrich. Hier verwende ich den breiteren —.
Der Streckenstrich taucht als – mit Zwischenräumen oder ohne Zwischenräumen auf:
Darstellung für die Strecke Münster bis München: Münster – München oder (bevorzugt) Münster–München
Zitate, Hervorhebungen, Quellenangaben:
Zitate sind zwischen doppelten Spitzklammern
eingekleidet. Sonstige Hervorhebungen stehen zwischen doppelten Gänsefüßchen. Titel von Quellen sind kursiv dargestellt.
Dies ist nicht vollständig in Übereinstimmung mit den Rechtschreibregeln. Es ermöglicht jedoch die optische Unterscheidung. Beispiel:
Im Buch Jürgen Tromp: Alsterdorf bei Tag steht an dieser Stelle nur von der Straße
. Gemeint sein dürfte „von der Alsterdorfer Straße”.
Auslassungen innerhalb von Zitaten sind duch ein eingeklammertes Auslassungszeichen […] markiert. Erkannte Fehler in Zitaten sind durch [sic] gekennzeichnet.
PHP verwende ich seit Anfang 2013. Das Testen der mit PHP erstellten Seiten ist umständlich, da hierfür ein Webserver mit PHP-Unterstützung erforderlich ist. Man kann so etwas auch auf dem Windows-PC installieren. Ich verwendete zunächst auf dem Windows-PC dafür Jana2 als Webserver und den PHP-Server von http://www.php.net/downloads.php (abgerufen Ende Dezember 2012). Die Installation beider Pakete ist recht mühsam. Obwohl Jana2 gut funktioniert, bin ich im Herbst 2013 auf das ebenfalls als Freeware erhältliche Paket XAMPP umgestiegen. XAMPP lässt sich erheblich leichter installieren als Jana2.
Bei den mit PHP erstellten Seiten
| Beispiele für mit Hilfe von PHP verkürzter Schreibweise | |
|---|---|
| In HTML: | <tr><colspan=2> |
| In PHP: | trd(2); |
| In HTML: | <tr><td class=c><img src='Bederkesa_Moerser_Kreisbahn_2.jpg' width=400 height=202 alt='Bederkesa, Schienenbusse ex Moerser Kreisbahn'> |
| In PHP: | lcimg('Bederkesa_Moerser_Kreisbahn_2',0,400,202,'Bederkesa, Schienenbusse ex Moerser Kreisbahn'); |
| In HTML: | <tr><colspan=2><img src='Buegel03.jpg' width=660 height=411 alt='Fehmarnsundbrücke (21.11.2009)'>
<br>Von links nach rechts: Fuß- und Radweg, Fahrstraße für Kraftfahrzeuge, einspurige Bahntrasse hinter der rechten Betonmauer. Die Verspannung zwischen Fahrweg und Brückenbogen ist netzartig ausgeführt. |
| In PHP: | trd(2);imgbr('Buegel03',0,660,411,'Fehmarnsundbrücke','21.11.2009', 'Von links nach rechts: Fuß- und Radweg, Fahrstraße für Kraftfahrzeuge, einspurige Bahntrasse hinter der rechten Betonmauer. Die Verspannung zwischen Fahrweg und Brückenbogen ist netzartig ausgeführt.'); |
| In HTML: | <a href='http://validator.w3.org/' target=_blank title='Externer Link (neues Fenster)'>Validator</a> |
| In PHP: | eEl(H.'validator.w3.org/','Validator'); |
Dateiberechtigungen unter Unix und Unix-Derivaten (chmod): Seltsame Gerüchte kursieren darüber, wie man die Dateiberechtigungen für die Webdateien auf dem Webserver setzen sollte.
Frames habe ich als nützlich empfunden. Da sie leider ab HTML 5 nicht unterstützt werden, habe ich Mitte Mai 2011 sämtliche Frames aus meiner Website entfernt. Vorhergehende Versuche mit eingebetteten Frames (iframes) ergaben keine befriedigende Darstellung, denn bei iframes muss man die Höhe in einem absoluten Maß angeben. Eine relative Höhenangabe in Prozent der Fensterhöhe ist bei iframes zumindest offiziell nicht zulässig.
Hochladen (Upload): Um die geänderten Bestandteile an den Provider zu schicken, verwende ich das Programm →ftp-uploader. Man kann es sich zum Ausprobieren als funktionsreduzierte Sharewareversion herunterladen. Es führt den kompletten ftp-Vorgang durch und schickt nur die Dateien zum Server, die sich seit dem letzten Mal geändert haben oder die neu hinzugekommen sind. Außerdem beinhaltet es einen recht ordentlichen ftp-Klienten. Wenn die Website etwas umfangreicher geworden ist, reicht schnell die Sharewareversion nicht mehr aus und man kann sich dann gegen einen angemessenen Preis registrieren lassen.
Nachteilig ist allerdings, dass das Programm mit den Zeitumstellungen nicht einwandfrei klarkommt. Das Problem lässt sich dadurch entschärfen, dass man nach den beiden jährlichen Zeitumstellungstagen alle Dateien als „bereits hochgeladen” deklariert.
Leider (Stand Oktober 2021) ist der „ftp-uploader” auf einem Stand von anno 2005 stehen geblieben. Besonders stört, dass er nur FTP unterstützt, denn fast alle Hoster akzeptieren FTP nicht mehr. Immerhin wird die (unkomfortable) Möglichkeit der Umgehung dieses Problems mittels eines Umweges über den SSH Client „Tunnelier” der Firma Bitvise vorgestellt.
Hintergrundbilder: Fast jeder Themenbereich hat sein eigenes Hintergrundbild bekommen. Hier handelt es sich zumeist um die Verkleinerung eines zum Thema passenden Bildes. Die Hintergrundbilder sind farbverfremdet, so dass die Farben blasser erscheinen. Damit man die Schrift trotzdem lesen kann, befindet sich die Normalschrift des Textteils auf einem hell gehaltenen Hintergrund ohne Hintergrundbild.
Zusatzfenster werden, sofern sie sich auf der eigenen Website beziehen, in einem einzigen immer gleichen Fenster gehalten. Das bedeutet, es erscheint nur ein einziges Zusatzfenster bzw. nur ein einziger weiterer Tabulator, solange man meine Website nicht verlässt.
ALT und TITLE: Als erzieherische Maßnahme für Webautoren wurde das ALT-Attribut für darzustellende Bilder als notwendig festgelegt. Es soll den Browser veranlassen dann – und nur dann – einen alternativen Text für ein Bild anzuzeigen, wenn das Bild nicht angezeigt wird. Damit soll auch dann eine Aussagen zum Bildhaft sichtbar sein, wenn der User-Agent (z.B. der Browser oder der Suchmaschinenrobot) keine Bilder verarbeitet. Außerdem gibt es Benutzer, die das automatische Laden von Bildern bewusst deaktiviert haben.
Einige Bilder meiner Website – wie die Navigationssymbole – sind reine Dekoration. Hier enthält das ALT-Attribut mit alt eine leere Zeichenkette (alt wirkt wie alt=''). Ich kann mir diese Vorgehensweise leisten, da ich unmittelbar beim Bild stets einen diesbezüglicher Text anzeigen lasse.
Zusätzlich zum ALT-Attribut verwende ich hin vielen Fällen das TITLE-Attribut. Dessen Verwendung ist nicht als notwendig festgelegt. Damit sollen hinterlegten Texte als Erläuterung in Form einer Sprechblase („Tooltip”) angezeigt werden, wenn man den Mauszeiger auf das Bild schiebt und eine kurze Weile wartet. Das TITLE-Attribut besitzen fast alle HTML Elemente. Es dient dazu, erklärende Informationen zu einem Element zu liefern. So kann man z.B. einen Link näher erläutern, ein Akronym aufschlüsseln oder weitere Informationen zu einem Bild liefern. Der Inhalt des Title Attributs wird dann als Tooltip dargestellt.
Beziehen sich das ALT- und das TITLE-Attribut auf dasselbe Bild, so sollten sie nicht den gleichen Inhalt haben, denn sie haben verschiedene Aufgaben.
Suchmaschinen: Praktisch alle externen Anfragen zu meiner Website kommen über Google. Daraus kann man schließen: Es reicht aus, sich bei einer einzigen Suchmaschine (eben bei Google) anzumelden.
Rechtschreibung und tote Links: Zur Bereinigung der Rechtschreibung habe ich keine befriedigende Lösung gefunden.
Die Links habe ich zumindest bei der Erstellung der Seiten geprüft. Sporadisch erfolgt eine erneute Überprüfung mit dem Freeware-Programm xenu.exe. Zumeist führen die Links zu einer Unterseite einer Website, nicht auf die Startseite. Wenn sich die Adresse der Unterseite nicht geändert hat, ist dies die beste Möglichkeit.
Bis vor einigen Jahren war es zuverlässiger, einen Link auf die Startseite der verlinkten Website zu setzen. Allerdings musste dann der Gast dort selbst nach dem gewünschten Thema suchen. Mittlerweile ist es nicht mehr zuverlässig, den Link auf die Startseite zu setzen: Wenn eine Website durch den ursprünglichen Benutzer aufgegeben wurde, so wird sie zunehmend mit anderem Inhalt weiter betrieben. Der neue Inhalt ist häufig Werbung oder aber der Versuch, den Domänennamen zu verkaufen.
Etwa einmal jährlich findet eine Überprüfung aller Seiten statt. Sie umfasst Korrekturlesen, danach lexikalische Rechtschreib- und Syntaxprüfung und abschließend eine Prüfung auf tote Links. Die Überprüfung über den Jahreswechsel 2011/2012 nahm weit über 100 Stunden in Anspruch. Meine Website umfasste seinerzeit rund 1600 Webseiten. Das erklärt den hohen Zeitaufwand.
Einige Websites sperren die Möglichkeit der maschinellen Überprüfung auf Vorhandensein einer Webseite und beantworten die maschinelle Anfrage mit dem HTTP-Statuscode 403 „Zugriff verboten”.
Wahrheitsgehalt: Ich versuche, nur Tatsachen und gelegentlich eine persönliche Bemerkung zu bringen. Tatsachen beruhen jedoch auf Quellen, und heutzutage ist neben eigener Anschauung und Literatur das Internet die Informationsquelle überhaupt. Bei gefundenen Widersprüchen oder Unsicherheiten über den Wahrheitsgehalt weise ich auf diese hin. Ich habe eine Seite als zentrales Quellenverzeichnis eingerichtet. Damit die Nachprüfung erleichtert wird, sind im Text entsprechende Verweise auf dies zentrale Quellenverzeichnis enthalten.
index.htm: Jedes Verzeichnis auf dem Server benötigt eine eigene Datei mit dem Namen index.htm, index.html oder index.php. Die möglichen Dateinamen gibt der Internethoster vor. Fehlt eine solche Datei, so kann unter Umständen das gesamte Inhaltsverzeichnis des betreffenden Verzeichnisses im Browser sichtbar gemacht werden. Der Inhalt einer solchen Datei „index.htm” in einem Unterordner kann sich auf einen Link auf die oberste Seite der Website — diese heißt auch index.htm, index.html oder index.php — beschränken, z.B. so:
<html><head></head> <body> <a href="../index.htm">Hier geht es zum Index der Website</a> </body> <html>Häufig kann man diese Datei mit einem sinnvollen Inhalt füllen: Es kann eine Auswahlseite sein, mit der die Navigation innerhalb dieses Teils der Website gesteuert werden soll.
Downloadsperre für Bilder: Gelegentlich wundert man sich, wieso man von Webseiten die Bilder durch Anklicken mit der rechten Maustaste nicht herabladen kann. Der Trick ist ein einfacher Javascript, der auf der Webseite mit angegeben ist.
Der Script verhindert die Verwendbarkeit der Maustasten und des Contextmenüs, die man zum Herabladen der Bilder benötigt. Der Surfer kann diese lächerliche Maßnahme dadurch umgehen, dass er entweder die Seite komplett herunterlädt, oder dass er Javascript abschaltet, oder im Cache des Browsers sich die entsprechenden Dateien sucht. Ich sehe keinen Sinn in einer solchen „Schutzmaßnahme”, denn sie verärgert ausgerechnet diejenigen, denen die Webseite so gut gefällt, dass sie Teile dauerhaft speichern möchten.
Responsives Webdesign:
Hinsichtlich meiner Website hat die Erweiterung auf responsives Webdesign deutlich länger gedauert als vorher geschätzt. Es hat von Februar 2021 bis Anfang Oktober 2021 gedauert. Ich war über 600 Stunden damit beschäftigt. Daran schlossen sich bis Mitte März 2022 Überarbeitungen zur Verbesserung und Vereinheitlichung der Codierung und für eine bessere Darstellung auf Smartphones an.
Dabei habe ich einiges gelernt. Im Einzelnen: