HOME

Wiki: Internet

Browser
Links
Webdesign/html/css


Um das Design einer Webseite einigermaßen sauber zu halten sollte man sich einmal für EINES entscheiden und dann dabei bleiben!
Selbstverständlich kann man im Laufe der Zeit Anpassungen vornehmen.. aber in MEINEM Fall vermische ich immer mehrere..
Darum hier für mich SELBER nochmal einige Grundlagen:

"Tabs" entsprechen zwei Leerzeichen. Da dieser Server ServerSideIncludes nutzt hier die "richtigen" Einrückungen:

<!DOCTYPE html> <!--#include virtual="./ssi/head.html" --> <title>Wiki</title> </head> <body> <!-- wenn der Elternordner poppendewildsau heisst sollte der kinderordner standardgemäss index.html heissen und nicht nochmal poppendewildsau.html !!--> <!--#include virtual="./ssi/footer.html" --> </body> </html>

Der Grund warum in Kinderordnern EIGENTLICH nur index.html enthalten sein soll statt /wiki/design/design.html ist offensichtlich:
Es ERSCHWERT meine Arbeit, dafür können Interessierte einfach durch Änderung des Links(löschen fehlerhafter/veralteter Teile) IMMER auf eine Indexseite hoffen.
Man kann sich beim SCHREIBEN arg vertun, wenn mehrere Dateien offen sind die alle nur index.html heissen -.-

CSS Definitionen:

CSS classes

<kbd class="button">Demo</kbd>DemoDarstellung als klickbarer Button: Weiter ABBRECHEN
<span class="con">Demo</span>DemoConsolenschriftsatz: Alle Zeichen gleich breit 111...www
<span class="cmd">Demo</span>DemoBefehlshervorhebung(Konsole?): mkdir test
<span class="green">Demo</span>DemoHinweistext: Okay
<span class="inv">Demo</span>DemoHervorhebung im Text(invertiert): Demo
<kbd class="key">Demo</kbd>DemoVisualisierung von Tastendrücken: ALT+CTRL+DEL
<span class="mark">Demo</span>DemoHervorhebung im Text: Demo
<span class="path">Demo</span>DemoHervorhebung von Pfaden: /var/etc/fstab
<span class="quest">Demo</span>DemoHervorhebung von Questitems: Pancake
<span class="red">Demo</span>DemoWichtiger Text: Vorsicht!

Table rowspan/colspan

rowspan 2 Zeilencolspan 3 Spalten
einszweidrei
vierfünfsechssieben

<table> <tr><th rowspan="2">rowspan 2 Zeilen</th><th colspan="3">colspan 3 Spalten</th></tr> <tr><td>eins</td><td>zwei</td><td>drei</td></tr> <tr><td>vier</td><td>fünf</td><td>sechs</td><td>sieben</td></tr> </table>

CSS p classes:

<p class="hinweis">Demo</p> (auch Mehrzeilig)

Demo


<p class="warnhinweis">Demo</p> (auch Mehrzeilig)

Demo


<p class="code">          Demo Text</p> schreibt auch Leerzeichen VOR Text!

Demo Text

<p class="hexcode">          Demo Text</p> schreibt auch Leerzeichen VOR Text! Gedacht für 16 Hexbytes mit Leerzeichentrennung.

Demo Text


avif Bilderformat/Einbindung in html

Einbindung von Bildern(dargestelltes Bild png; anklickbares Bild avif, Breite 960 Pixel):
<a href="./img/bild001.avif"><img src="./img/bild001.png" alt="Bild: Drei Beispielhelden" width="960" title="Drei Beispielhelden"></a><br>


Dieses Bildformat erstaunt was die geringe Dateigröße und die wirklich gute Qualität angeht!
Leider vermögen einige Browser es immer noch nicht avif-Bilder problemlos darzustellen..
Nervig ist die lange Zeit zur Kompression(kann bei 4k schon mal eine Minute dauern!)

Bildqualität: 20
Farbtiefe: 10bit

Gimp behält innerhalb einer "Sitzung" die vom Nutzer angegebenen Werte. Wird es jedoch neu gestartet muss man die Werte wieder vorgeben -.-

webp Bilderformat/Einbindung in html

Einbindung direkt als Bild(wegen der guten Qualität keine Verlinkung auf avif nötig):
<img src="./img/bild001.webp" alt="Bild: Drei Beispielhelden" width="960" title="Drei Beispielhelden"><br>
Während gif-Dateien *früher* als Maß der Dinge angesehen wurden(incl. der Möglichkeit von "Animationen" durch Bilderfolgen) eroberten jpg-Dateien(bzw. jpeg) schnell das Internet.
Das Kompressionsformat war.. eher ungenau und verwaschen, Bäume in den komprimierten Bildern hatten "gebrochene" Äste dafür war es schnell und leidlich Platz sparend.
Solange es sich um "kleine" Bilderchen handelte waren beide Formate wesentlich platzsparender als das uralte "pic/bit"-Format.

Ähnlich wie das avif-Format dauert es ETWAS ein Bild einzuschrumpfen, aber das Ergebnis ist ähnlich wie beim Vergleich gif/jpeg:
Texte sind deutlicher lesbar aber andere Teile(Hintergründe, etc.) wirken arg.. weichgespült.

Hier ein Vergleich der Formate:
KodierungAuflösungQualitätBytesHinweis
avif3840*216020%343.348
gif3840*2160-2.759.918
png3840*2160-6.665.037
png3840*2160-1.832.277indizierte Farben: 255
png1920*1080-719.381indizierte Farben: 255, skaliert auf hd
webp3840*216090%978.474
webp3840*216075%504.595
webp3840*216050%373.218
In der Tabelle auf die entsprechende Kodierung klicken sollte die Beispielbilder öffnen..


avif bleibt unschlagbar was die (subjektive) beste Qualität der Bilder bei geringstem Platzverbrauch bietet, allerdings braucht es VIEL Zeit im avif-Format zu exportieren..
gif zeigt deutliche Artefakte(Hintergründe) was vermutlich der geringeren Farbpalette geschuldet ist.
png erzeugt fast identische Qualität wie avif aber überrascht mit extrem hohem Speicherplatzverbrauch..
webp war mir bisher gar nicht als Bildformat bekannt.. ist brauchbar was den Speicherplatz angeht und punktet durch die wesentlich schnellere Kodierung im Vergleich zu avif.

webp(Qualität:70%) erzeugt fast gleich(kleine) Dateien wie mit avif, zwar mit leichten Abstrichen in der Qualität dafür dauert die Konvertierung nur einige Sekunden(statt MINUTEN/avif!)
Allerdings sind einige Pixel-Schriften dadurch übel verwaschen und unscharf, bei kleinen(DOS!) Bilderchen sollte man den Haken bei Verlustlos setzen(dauert dann doch etwas länger bei nur HALBER Dateigröße wie GIF!)



Die Vorgabewerte(gimp) für webp:
Bildqualität 90%
Alpha-Qualität: 100%
Quellen-Typ: default

html5 Icons

@www.alt-codes.net

Darstellungsmöglichkeiten mit den Unicode..Icons?
Man MUSS im html-Code einige Sonderzeichen "umschreiben". Hier ein paar der *bösen* Zeichen:
ZeichenUmschreibung
&&amp;
<&lt;
>&gt;
 &nbsp;
Die Verwendung der Zeichen < und > innerhalb des html-Codes ist NUR für Tags zulässig, z.B. das bekannte Zeilenende <br>
Wird es versehentlich im html Code eingetippt um z.B. die Relation "80<100" anzuzeigen kommt der Browser durcheinander und lässt möglicherweise ganze Anbsätze verschwinden..

Um eine Seite etwas aufzupeppen kann man Unicode-Zeichen einbinden.
Problem 1: Es gibt zu viele.. und dann ein bestimmtes Zeichen wiederfinden?..
Problem 2: WIE fügt man das *richtig* ein?
Überraschenderweise bemängelt der html-Validator das eingefügte Icon NICHT als Fehler. WOW!
Ein ICON kann man als auch(so der Editor das verkraftet) im Quelltext prima sehen..
ICONBezeichnunghtml entityhtml dezhtml hex
🧪Reagenzglas
🔬Mikroskop
☥Ankh-&#9765&#x2625
🤦Face Palm&#129318;
♺Recyle&#9850;
♻Recyle&#9851;
⚛Atom&#9883;
←Pfeil(links)&larr;&#8592;&#x2190;
→Pfeil(rechts)&rarr;&#8594;&#x2192;
♠Pik&spades;&#9824;&#x2660;
♥Herz&hearts;&#9829;&#x2665;
Nur wenige Zeichen haben einen Entity-Eintrag, fehlen die dezimalen oder hexadezimalen Werte.. war ich zu faul die zu suchen ;)
Weitere Zeichen sind z.B. unter www.toptal.com zu finden.
Fast nur Icons(keine Codes) aber eine deutsche Seite mit Suchfunktion: emojiterra.com
Oder eine weitere Seite: graphemica.com 53-160, 163-216, 369-398 asiatische Bildschrift, 217-249, 310-324, 328-360, 399-432, 436-444, 446-464 leer, 500-509 ICONS

Beispiele zum "Zeichnen" in der Konsole: Codepage 437@wikipedia
ZeichenWindowscodeHexHinweis
│ALT+179U+2502
└ALT+192U+2514
├ALT+195U+251C
┌ALT+218U+250C
║ALT+186U+2551
╚ALT+200U+255A
╟ALT+199U+255F
╔ALT+201U+2554
 ALT+255U+00A0Zeichen kann nicht als NBSP kopiert werden -.-

html Quellcode validieren

validator.w3.org nimmt Quelltext oder auch http-Links an und prüft diese auf Fehler.
Diese Seite wurde zuletzt am 31.03.2024 um 18:54 geändert.

(c) 2024 DHLF ☮🇺🇦