Responsive Webseiten-Vorlage

Szenario 1: Das HTML-Element h1 wird als jeweilige Beschreibung der Unterseiten verwendet. Aber welches (sichtbare) Element nimmt dann die zusammenfassende Beschreibung der gesamten Website auf? Ein Element h0 gibt es nicht. Das wäre dann wie ein Buch ohne Titel auf dem Buchdeckel: Wie heißt das Glaubensbuch der Christen mit den zwei Testamenten? Das Kapital?

Szenario 2: Das HTML-Element h1 enthält eine zusammenfassende Beschreibung der gesamten Website. Zur jeweiligen Beschreibung der Unterseiten verwendet man dann Überschriften 2. Ordnung (HTML-Element h2). In die Welt der Bücher übertragen: Auf dem Glaubensbuch der Christen steht Die Bibel, und das Hauptwerk von Karl Marx heißt Das Kapital.

Auf breiten Bildschirmen klappt die zweite Menü-Ebene nach rechts aus. Die Besonderheit dabei ist, daß im a-Element des einleitenden li-Elements kein href-Attribut eingetragen wird. Das ist kein Fehler, sondern ein Stilmittel. Aber Lighthouse meckert nicht vorhandene href-Attribute als Fehler an und zieht deshalb vom SEO-Ergebnis 8 Punkte ab. Also habe ich ein überflüssiges leeres href-Attribut eingefügt; Sie können das auch gerne weglassen. Dieses li-Element ist nur eine Art Überschrift (ergänzt um das doppelte, winklige Anführungszeichen nach rechts: ») für die bei Übermausen ausklappende zweite Menü-Ebene. Sie sehen das links zB beim Menü-Eintrag Extras, Tipps, FAQ ». Leider ist die 2. Menü-Ebene mit reinem HTML und CSS per Tastaturbedienung (TAB- und Eingabe-Tasten) nicht erreichbar. Javascript möchte ich dafür aber nicht einsetzen.

Auf schmalen Endgeräten wie Smartphones ist kein Platz für eine ausklappende 2. Menü-Ebene. Dort werden die Einträge der 2. Ebene genauso wie die Einträge der 1. Ebene angezeigt. Dann aber ist das einleitende li-Element überflüssig, weil es nur unnötig Platz frißt, und wird deshalb ausgeblendet. Um das richtig zu steuern, sind leider zwei zusätzliche CSS-Klassen (keine-anzeige und kein-href) erforderlich. Ich weiß, das sieht im Quellcode nicht schön aus, geht aber zur Zeit nicht anders. Hoffentlich wird die CSS-Pseudoklasse :has() nicht nur im Safari, sondern bald auch in anderen Browsern verfügbar sein. Darauf warten viele Webtätige sehnsüchtig.

Auf schmalen Endgeräten können Sie übrigens zwischen zwei Darstellungsformen wählen: 1.) Standard-Voreinstellung: chaotische Anordnung der Menü-Elemente li (das ist platzsparend) 2.) optional: Reih' und Glied-Anordnung der Menü-Elemente li (alle untereinander). Sie können das am Ende der CSS-Datei /y-code/regeln.css einstellen. Fehlt noch der Hinweis, daß Sie die 2. Menü-Ebene mehrfach verwenden können. Aber überladen Sie Ihr Menü nicht.

Laden Sie die Stylesheet-Datei regeln.css in Ihren Editor. Gleich am Anfang nach der Anweisung :root { sehen Sie vier Blöcke, die überschrieben sind mit Farbschema (Design) Rhodos:, Farbschema (Design) Waldeslust:, Farbschema (Design) Sahara: und Farbschema (Design) Merlot:. Jeder dieser vier Blöcke enthält 40 Einträge mit benutzerdefinierten Eigenschaften (CSS-Variablen). Anschließend folgt die schließende geschweifte Klammer }, die die öffnende Anweisung :root { beendet. Im Auslieferungszustand der Webseiten-Vorlage ist das Farbschema (Design) Rhodos: aktiviert, die anderen drei Farbschemata sind auskommentiert und damit deaktiviert.

Um das Farbschema zu wechseln, müssen Sie das Farbschema (Design) Rhodos: deaktivieren (auskommentieren) und Ihr gewünschtes Farbschema aktivieren (die vorhandene Auskommentierung entfernen). In der Auszeichnungssprache CSS werden (teilzeilige, einzeilige und mehrzeilige) Kommentare eingeleitet mit den Zeichen /* und beendet mit den Zeichen */.

Zu Ihrer Information: Die benutzerdefinierten Eigenschaften (CSS-Variablen) werden weiter unten in den CSS-Regeln (Selektoren und Eigenschaften) verwendet. Aber das war meine Arbeit. Sie brauchen sich um die CSS-Regeln nicht zu kümmern.

Zur Einstimmung lesen Sie am Besten zuerst den vorhergehenden Abschnitt ;-) Kopieren Sie in der Stylesheet-Datei regeln.css einen der vier vorhandenen Farbschemata-Blöcke und fügen die Kopie aus der Zwischenablage vor die Zeile mit der oben erwähnten, schließenden geschweiften Klammer } ein. Sorgen Sie dafür, daß alle zuvor vorhandenen Farbschemata deaktiviert (auskommentiert) sind, und aktivieren Sie das soeben als Kopie eingefügte Farbschema, indem Sie eine etwa vorhandene Auskommentierung entfernen.

Jetzt können Sie Ihrer Kreativität freien Lauf lassen: Ändern Sie in dem soeben als Kopie neu eingefügten Farbschema die Eigenschaftswerte (hinter dem Doppelpunkt) aller 40 CSS-Variablen entsprechend Ihren Wünschen. Die Namen der CSS-Variablen (vor dem Doppelpunkt) müssen Sie beibehalten. Ich habe mich bemüht, den CSS-Variablen sprechende Namen zu geben, so daß ihr Zweck erkennbar ist. Im Zweifelsfall untersuchen Sie mit den Entwicklerwerkzeugen Ihres Browsers bestimmte Elemente, um zu ermitteln, welche CSS-Variablen sie verwenden.

Eine Farben-Übersicht mit Klarnamen, Hex-Code RGB und Dezimal-Code RGB finden Sie zB auf der Seite CSS Color Codes auf quackit.com. In CSS können Sie Farben mit Farbcode oder offiziellen Klarnamen bezeichnen. Wenn die zwei Hex-Werte je für Rot, Grün und Blau beide gleich sind, können Sie den Hex-Code auch abkürzen: Beispiel: Statt #DDEEFF können Sie auch #def schreiben.

Im Download-Paket befindet sich im Wurzelverzeichnis eine Datei namens robots.txt, wie ich sie selber verwende. Eine solche Datei enthält Regeln für Suchmaschinen-robots (Crawler), die festlegen, welche Verzeichnisse und Dateien gecrawlt werden dürfen und welche nicht. Seriöse robots wie googlebot und bingbot halten sich an diese Regeln, aber es gibt viele zwielichtige Crawler, die sich nicht daran halten. Betrachten Sie die mitgelieferte Datei robots.txt als Vorschlag an Sie.

Beachten Sie bitte, daß mit robots.txt-Regeln nur das Crawlen der angegebenen Seiten verhindert werden kann, nicht jedoch die Indexierung. Die Indexierung einer Seite durch Google oder Bing können Sie nur mit dem Meta-Element <meta name="robots" content="noindex"> im head-Element der jeweiligen Seite verhindern. Und das Crawlen der Seite darf nicht in der Datei robots.txt verboten sein. Andernfalls würden Google oder Bing das noindex gar nicht sehen.