Differences

This shows you the differences between two versions of the page.

--- snippets:html [2025-06-12 16:04] – created malte70
+++ snippets:html [2025-10-05 15:11] (current) – Abschnitt „Styling“ hinzugefügt malte70
@@ Line 1: / Line 1: @@
 ====== Snippets: HTML ======
+[[:snippets:start|← Zurück zu :snippets:start]]
 ===== Grundgerüst =====
@@ Line 58: / Line 60: @@
 </file>
-===== Kleine Helfer: ''sitemap.xml'', ''robots.txt'' usw. =====
+===== Kleine Helfer-Dateien: robots.txt, sitemap.xml, humans.txt usw. =====
+==== robots.txt: Suchmaschinen-Indexierung steuern ====
+Ermöglicht es für Suchmaschinen-Crawler den Zugriff auf Teile der Webseite zu verbieten.
+Die meisten großen Suchmaschinen halten sich daran, auch wenn sie es technisch nicht müssen (die Crawler der großen KIs interessiert das hingegen leider herzlich wenig …)
+Siehe auch die [[https://www.robotstxt.org/|Format-Spezifikation von robotstxt.org]].
+Als Beispiel folgt die ''robots.txt'' von [[https://malte70.de|malte70.de]], die das indexieren einige Unterordner verbietet, und auf eine ''sitemap.xml''-Datei verweist:
+<file robots robots.txt>
+# robots.txt for malte70.de
+User-agent: *
+Disallow: /kontakt/
+Disallow: /impressum/
+Sitemap: https://malte70.de/sitemap.xml
+</file>
+==== sitemap.xml: Maschinenlesbare Sitemap ====
+Früher waren auf vielen Webseiten Sitemaps zu finden: Eine Seite mit einer oft verschachtelten Liste aller vorhandenen Unterseiten.
+Die von Google eingeführte ''Sitemap.xml''-Datei bietet eine standardisierte Sitemap im XML-Format, die Web-Crawler auf alle zur Indexierung zur Verfügung stehenden URLs hinweist, und sie so beim Crawling der Seite unterstützt.
+Alle Verweise in der ''sitemap.xml'' sind absolute, idealerweise kanonische URLs, also **keine relativen Links**!
+Zu jeder Unterseite/URL kann optional eine Priorität mit einem Wert von //0.0// bis //1.0// angegeben werden (Standard ist //0.5//), um den Fokus des Crawlers auf Teilbereiche der Seite zu lenken. Zusätzlich kann das Datum der letzten Änderung und die Aktualisierungs-Frequenz angegeben werden.
+  * [[https://www.sitemaps.org/protocol.html|sitemaps.org - Protocol]]
+  * [[https://www.ionos.de/digitalguide/websites/webseiten-erstellen/sitemapxml-datei-erstellen-xml-sitemap-tutorial/|sitemap.xml-Datei erstellen: XML-Sitemap-Tutorial - IONOS]]
+Hier ein kleines Beispiel:
+<file xml sitemap.xml>
+<?xml version='1.0' encoding='UTF-8'?>
+<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
+    xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+	<url>
+		<loc>https://example.com/</loc>
+		<lastmod>2025-06-23</lastmod>
+		<changefreq>weekly</changefreq>
+		<priority>1.0</priority>
+	</url>
+	<url>
+		<loc>https://example.com/page2/</loc>
+		<lastmod>2025-06-25</lastmod>
+		<changefreq>daily</changefreq>
+		<priority>0.7</priority>
+	</url>
+	<url>
+		<loc>https://example.com/page3/</loc>
+		<changefreq>always</changefreq>
+	</url>
+	<url>
+		<loc>https://example.com/archived-page/</loc>
+		<lastmod>2023-05-25</lastmod>
+		<changefreq>never</changefreq>
+		<priority>0.1</priority>
+	</url>
+</urlset>
+</file>
+==== humans.txt: Infos zu den Personen hinter der Webseite ====
+Als Gegenstück zur ''robots.txt'' schlägt [[https://humanstxt.org/DE|die humans.txt-Initiative]] eine Text-Datei vor, die Informationen über die an der Seite beteiligten Personen liefert.
+Idealerweise sollte diese in HTML-Dateien über einen ''<link rel="author">''-Tag verlinkt werden:
+<code html>
+<link rel="author" type="text/plain" href="/humans.txt">
+</code>
+Auch wenn es keinen Standard für den Inhalt der Datei gibt, nutzen viele Seiten (so auch meine eigenen) die Struktur, die auch die Initiative selbst unter [[https://humanstxt.org/humans.txt|humanstxt.org/humans.txt]] benutzt.
+=== Snippet ===
+Als einfaches Beispiel für eine private Seite hier die [[https://malte70.de/humans.txt|humans.txt von malte70.de]].
+Der Banner-Text wurde mithilfe [[http://www.figlet.org/|figlet]] mit folgendem Befehl erstellt:
+<code bash>
+# Font "standard" mit aktiviertem Kerning (Buchstaben berühren sich gerade eben, aber ohne ineinander zu rutschen, was das normale Verhalten von figlet wäre)
+figlet -f standard -k "malte70.de"
+</code>
+<file text humans.txt>
+# humanstxt.org/
+# The humans responsible & technology colophon
+                   _  _        _____  ___        _
+ _ __ ___    __ _ | || |_  ___|___  |/ _ \    __| |  ___
+| '_ ` _ \  / _` || || __|/ _ \  / /| | | |  / _` | / _ \
+| | | | | || (_| || || |_|  __/ / / | |_| |_| (_| ||  __/
+|_| |_| |_| \__,_||_| \__|\___|/_/   \___/(_)\__,_| \___|
+/* AUTHOR */
+	Name:      Malte Bublitz
+	Nickname:  malte70
+	Location:  Bergkamen, NRW, Germany
+	Contact:   https://malte70.de/kontakt/
+/* SOCIAL */
+	Mastodon:   https://ruhr.social/@malte70
+	Instagram:  http://instagram.com/malte_bublitz/
+	Keybase:    https://keybase.io/malte70
+	Github:     https://github.com/malte70
+	Gitea:      https://git.un-hack-bar.de/malte70
+	Facebook:   https://www.facebook.com/malte.bublitz/
+/* SITE */
+	Last update:   2025-06-12
+	Language:      de_DE
+	Software:      Hugo Static Site Generator
+	Technologies:  HTML5, CSS3
+	IDE:           Visual Studio Code
+	Server:        Apache HTTPd
+</file>
+=== Weitere Beispiele für humans.txt-Dateien ===
+  * [[https://humanstxt.org/humans.txt|humanstxt.org/humans.txt]]
+  * [[https://www.google.com/humans.txt|google.com/humans.txt]]
+  * [[https://www.netflix.com/humans.txt|www.netflix.com/humans.txt]]
+  * [[http://cloudspace.com/humans.txt|cloudspace.com/humans.txt]]
+  * [[https://medium.com/humans.txt|medium.com/humans.txt]]
+  * [[http://www.disqus.com/humans.txt|www.disqus.com/humans.txt]]
+  * [[https://www.esa.io/humans.txt|www.esa.io/humans.txt]]
+  * Weitere Beispiele können z.B. [[https://gist.github.com/search?q=humans.txt|mit einer Suche nach „humans.txt“ auf gist.github.com]] gefunden werden
+==== .well-known/*: Well-Known-URIs ====
+Im Verzeichnis ''.well-known/'' können zahlreiche [[https://www.iana.org/assignments/well-known-uris/well-known-uris.xhtml|bei der IANA registrierte]] Dateien abgelegt werden, durch die z.B. unabhängig von der zur Erstellung der Seite verwendeten Software (z.B. das CMS) bestimmte Funktionen unter einer festgelegten URL bereit gestellt werden können.
+Ein paar Beispiele:
+  * ''.well-known/caldav''/''.well-known/carddav'': \\ Kalender- und Kontakt-Synchronisation via CalDAV bzw. CardDAV ([[https://www.rfc-editor.org/rfc/rfc6764.html|RFC6764]])
+  * ''.well-known/change-password'': \\ [[https://w3c.github.io/webappsec-change-password-url/|Automatisierte Passwort-Änderung]] direkt aus einem Passwort-Manager heraus
+  * ''.well-known/security.txt'': \\ [[https://www.rfc-editor.org/rfc/rfc9116.html|Hinweise zum Umgang mit entdeckten Sicherheitslücken]] \\ E-Mail-Kontakt, GnuPG-Schlüssel und mehr in maschinenlesbarem Format, damit Sicherheitsforscher gefundene Lücken einfach und sicher melden können
+===== Styling =====
+==== CSS-Variablen ====
+Werte wie Farben werden oft mehrfach in einem Stylesheet benutzt, und können durch Variablen bzw. Custom Properties an einer zentralen Stelle definiert werden. Dadurch sind Anpassungen am Design auch ohne Präprozessor wie SCSS schnell gemacht.
+Variablen werden meist in der Pseudo-Klasse '':root'' definiert und gelten global, können aber auch auf ein Element beschränkt werden. Mit der Funktion ''var()'' kann dann auf den Wert zugegriffen werden:
+<code css>
+:root {
+	--color-text: #333333;
+	--color-highlight: #990100;
+	--color-background: #F6F6F6;
+}
+body {
+	color: var(--color-text);
+	background: var(--color-background);
+}
+a:link, a:visited {
+	color: var(--color-highlight);
+}
+</code>
+==== <blockquote> ====
+Das ''cite''-Attribut des ''<blockquote>''-Elements verweist auf die URL von der zitiert wird. Mithilfe der CSS-Funktion [[https://developer.mozilla.org/en-US/docs/Web/CSS/attr|attr]] kann diese in einer ''content''-Eigenschaft in CSS verwendet werden:
+<code html>
+<blockquote cite="https://malte70.de/blog/windows-system-ordner-ausblenden-linux-dot-hidden/">
+	GUI-Dateimanager, die <a href="https://docs.gtk.org/gio/">gio</a> für den Dateizugriff nutzen, wie z.B. Nautilus (GNOME), Caja (MATE) & Thunar (Xfce), unterstützen die Datei <pre>.hidden</pre>, um Dateien und Ordner zu verstecken, selbst wenn sie nicht der Linux-Konvention folgend mit einem Punkt beginnen.
+</blockquote>
+</code>
-  * ''robots.txt''
+<code css>
-      * Zugriff auf Teile der Webseite für Suchmaschinen-Crawler verbieten
+blockquote {
-      * Die meisten großen Suchmaschinen halten sich daran, auch wenn sie es technisch nicht müssen (die Crawler der großen KIs interessiert das hingegen herzlich wenig …)
+	margin: 1em 0;
-      * [[https://www.robotstxt.org/|Format-Spezifikation von robotstxt.org]]
+}
-  * ''humans.txt''
-      * Als Gegenstück zur ''robots.txt'' schlägt [[https://humanstxt.org/DE|die humans.txt-Initiative]] eine über ein ''<link rel="author">''-Tag verlinkte Text-Datei vor, die Informationen über die an der Seite beteiligten Personen liefert.
-      * Beispiele:
-          * [[https://malte70.de/humans.txt|malte70.de/humans.txt]]
-          * [[https://humanstxt.org/humans.txt|humanstxt.org/humans.txt]]
-          * [[https://www.google.com/humans.txt|google.com/humans.txt]] (sehr einfach gehalten, statt einzelne Personen zu nennen wird auf eine globale Teamarbeit hingewiesen — das entspricht zwar nicht ganz dem eigentlichen Zweck der ''humans.txt'', ist IMHO aber eine gelungene Variante für ein großes Unternehmen)
-  * ''sitemap.xml''
-      * Unterstützt Suchmaschinen beim Crawling der Seite
-      * Eine maschinenlesbare Liste aller Unterseiten mit ihren kanonischen URLs
-      * Für jede Seite kann eine Priorität mit einem Wert von //0.0// bis //1.0// angegeben werden (Standard ist //0.5//), um den Fokus des Crawlers auf Teilbereiche der Seite zu lenken
-      * Zusätzlich kann das Datum der letzten Änderung und die Aktualisierungs-Frequenz angegeben werden
-  * ''.well-known/...''
-      * Zahlreiche [[https://www.iana.org/assignments/well-known-uris/well-known-uris.xhtml|bei der IANA registrierte]] Dateien, durch die unabhängig von der verwendeten Software bestimmte Funktionen unter einer festgelegten URL bereit gestellt werden.
-      * Ein paar Beispiele:
-          * CalDAV/CardDAV ([[https://www.rfc-editor.org/rfc/rfc6764.html|RFC6764]])
-          * [[https://w3c.github.io/webappsec-change-password-url/|Automatisierte Passwort-Änderung]] direkt aus einem Passwort-Manager heraus
-          * [[https://www.rfc-editor.org/rfc/rfc9116.html|Hinweise zum Umgang mit entdeckten Sicherheitslücken]]: E-Mail-Kontakt, GnuPG-Schlüssel und mehr in maschinenlesbarem Format, damit Sicherheitsforscher gefundene Lücken einfach und sicher melden können
+blockquote::after {
+	display: block;
+	content: " (Quelle: " attr(cite) ") ";
+	color: GrayText;
+}
+</code>