Archiv der Kategorie: Webdesign

Datei-Endungen entfernen per .htaccess

logo-apache.png

Manche Inhaltsverwaltungs-Systeme unterdrücken die Anzeige der Datei-Endungen, also heißen die Webseiten dann zum Beispiel www.example.com/index statt www.example.com/index.html oder www.example.com/index.php.

Doch wie kann man so etwas bewerkstelligen, wenn man gar kein CMS einsetzt, sondern sich statische HTML- oder PHP-Webseiten selbst baut?

Webseiten-Inhalte editierbar machen

beitragsbild-html.png

In diesem Beitrag soll es um zwei verschiedene Dinge gehen:

  1. Man möchte eine fremde Webseite ausdrucken oder als PDF-Dokument speichern. Nur stören einen womöglich Bilder und Werbeanzeigen. Der Wunsch kommt auf, die Seite gewissermaßen abzuspecken.
  2. Man will Bereiche auf einer eigenen Webseite bearbeitbar machen, sodass Text eingegeben werden kann.

HTML: Der Legend-Befehl

Zu den eher selten genutzten HTML-Elementen gehört <legend>. Dieses Element ist für Gruppenüberschriften konzipiert, und es lassen sich damit recht ansehnliche Effekte erzielen. Zu beachten ist aber, dass <legend> bloß in Verbindung mit dem <fieldset>-Element funktioniert, welches nur zur Gruppierung innerhalb von Web-Formularen gedacht ist.


<form>
<fieldset style="box-sizing:border-box;width:100%;">
<legend style="font-weight:bold;">Ode an die Legende</legend>
<p>Lauftext (Fließtext)</p>
</fieldset>
</form>

Ode an die Legende

Lauftext (Fließtext)

Mehrere Bildformate als Alternativen anbieten

Will man neuere Bildformate wie AVIF oder WebP anbieten, kann mich nicht unbedingt davon ausgehen, dass jeder Browser das Bild auch darstellen kann, denn es gibt immer einige Benutzerinnen und Benutzer, die noch mit stark veralteten Browsern durchs Web schwirren.

Man kann sich jedoch dadurch behelfen, dass man das HTML-Element <picture> verwendet, das als Container dient. Ganz oben sollte das Bild mit dem favorisierten Dateiformat stehen, ganz unten die Ausweichmöglichkeit mit einem der alten Bildformate wie JPEG oder PNG.

<picture>
    <source srcset="img/meinbild.AVIF" type="image/AVIF">
    <source srcset="img/meinbild.webp" type="image/webp">
    <img src="img/meinbild.jpg" alt="Bildbeschreibung">
</picture>

PDF in eine Webseite einbetten

Eine PDF-Datei lässt sich mit verschiedenen Methoden in eine Webseite einbinden; mir sind drei HTML-Elemente bekannt, mit deren Hilfe das möglich ist: object, iframe und embed. Und alle drei sind so gut wie untauglich.

Zeitloses Webdesign

Webdesign ist, wie so ziemlich alles in unserer Welt, Trends unterworfen, und die Gestaltung von Webseiten ändert sich immer wieder im Laufe der Zeit. Ich frage mich, ob es aber auch so eine Art zeitloses Webdesign gibt.

Markdown in HTML umwandeln unter GNU/Linux

Markdown

Texte lassen sich ja sehr einfach in der Markdown-Syntax schreiben, die deutlich schlanker als die von HTML ist. Freilich ist der Sprachumfang von HTML auch wesentlich umfangreicher. Markdown eignet sich, anders als HTML, nicht fürs Layout, aber dazu, Texte zu schreiben und mit sehr leicht zu merkenden For­ma­tie­rungs­an­ga­ben auszuzeichnen.

Besondere HTML-Symbole

Manchmal sucht man ja besondere Symbole fürs Webdesign. Um Ladezeiten gering zu halten, bietet es sich an, statt Bilderchen einzubinden, lieber HTML-Code zu benutzen. Ich hatte kürzlich nach einem freundlichen Symbol gesucht, mit dem ich gut hervorheben könnte, dass man meine Blogartikel gern kommentieren kann. Doch was käme in Frage? – Ich stieß schließlich auf einen riesigen Fundus von allerlei Zeichen, und zwar auf der wunderschön gestalteten Website einer Künstlerin namens Sabina Nore. Und da fand ich einen schräg nach unten gerichteten Bleistift – was könnte passender sein, als mit einem Stiftsymbol zum Kommentieren zu ermuntern!

Na gut, niemand wird versuchen, mit einem Bleistift einen Kommentar unter einen meiner Blogartikel zu schreiben. Eher kommt da wohl die Tastatur in Frage. Andererseits: Wenn ich auf meinem Smartphone Text eintippe, nehme ich nicht meine ungeschickten Finger direkt, sondern behelfe mir mit so einem – hm, nennen wir ihn mal: Hilfsstift. Dann passt das Symbol ja doch. Ich hoffe nur, es wird überall auch korrekt angezeigt …