====== Snippets: HTML ====== [[:snippets:start|← Zurück zu :snippets:start]] ===== Grundgerüst ===== Features: * Einige essenzielle Meta-Tags * Print-Stylesheet * Großes PNG-Favicon (Kein 32×32 Pixel Windows-Icon, der Internet Explorer ist längst Geschichte!) * Grundgerüst für den Seiteninhalt: Header, Navigation in einer Seitenleiste, Inhalt und zum Schluss ein Footer HTML-Grundgerüst

Seitentitel

HTML5-Grundgerüst

Lorem ipsum

Lorem ipsum dolor sit amet. […]

 ===== 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: # robots.txt for malte70.de User-agent: * Disallow: /kontakt/ Disallow: /impressum/ Sitemap: https://malte70.de/sitemap.xml ==== 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: https://example.com/ 2025-06-23 weekly 1.0 https://example.com/page2/ 2025-06-25 daily 0.7 https://example.com/page3/ always https://example.com/archived-page/ 2023-05-25 never 0.1 ==== 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 ''''-Tag verlinkt werden: 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: # 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" # 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 === 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: :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); } ====
==== Das ''cite''-Attribut des ''
''-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:
GUI-Dateimanager, die gio für den Dateizugriff nutzen, wie z.B. Nautilus (GNOME), Caja (MATE) & Thunar (Xfce), unterstützen die Datei 
.hidden
, um Dateien und Ordner zu verstecken, selbst wenn sie nicht der Linux-Konvention folgend mit einem Punkt beginnen.
blockquote { margin: 1em 0; } blockquote::after { display: block; content: " (Quelle: " attr(cite) ") "; color: GrayText; }