HOME

Wiki: Internet

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>  <title>Wiki</title> </head> <body>   </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>	`Demo`	Darstellung als klickbarer Button: `Weiter` `ABBRECHEN`
<span class="con">Demo</span>	Demo	Consolenschriftsatz: Alle Zeichen gleich breit 111...www
<span class="cmd">Demo</span>	Demo	Befehlshervorhebung(Konsole?): mkdir test
<span class="green">Demo</span>	Demo	Hinweistext: Okay
<span class="inv">Demo</span>	Demo	Hervorhebung im Text(invertiert): Demo
<kbd class="key">Demo</kbd>	`Demo`	Visualisierung von Tastendrücken: `ALT`+`CTRL`+`DEL`
<span class="mark">Demo</span>	Demo	Hervorhebung im Text: Demo
<span class="path">Demo</span>	Demo	Hervorhebung von Pfaden: /var/etc/fstab
<span class="quest">Demo</span>	Demo	Hervorhebung von Questitems: Pancake
<span class="red">Demo</span>	Demo	Wichtiger Text: Vorsicht!

Table rowspan/colspan

rowspan 2 Zeilen	colspan 3 Spalten
rowspan 2 Zeilen	eins	zwei	drei
vier	fünf	sechs	sieben

<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:

Demo (auch Mehrzeilig)

Demo

Demo (auch Mehrzeilig)

Demo

Demo Text schreibt auch Leerzeichen VOR Text!

Demo Text

Demo Text 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>

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 -.-

Mit der neueren Version von Gimp wurden einige WINZIGE Details verändert:
Bei avif könnte man nun einen Haken bei nahezu verlustfrei setzen, doch dann hängt sich das entsprechende Modul auf.
Die Bearbeitungszeit ist überraschend KURZ verglichen mit dem vorherigen Verhalten, aber die Qualität ist nur einen Hauch besser als mit webp.
Die Einstellungen sollten NICHT mehr bei 20% Qualität liegen sondern vielmehr bei 50..75%!

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"> 
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:

Kodierung	Auflösung	Qualität	Bytes	Hinweis
avif	3840*2160	20%	343.348
gif	3840*2160	-	2.759.918
png	3840*2160	-	6.665.037
png	3840*2160	-	1.832.277	indizierte Farben: 255
png	1920*1080	-	719.381	indizierte Farben: 255, skaliert auf hd
webp	3840*2160	90%	978.474
webp	3840*2160	75%	504.595
webp	3840*2160	50%	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:

Zeichen	Umschreibung
&	&
<	<
>	>

Die Verwendung der Zeichen < und > innerhalb des html-Codes ist NUR für Tags zulässig, z.B. das bekannte Zeilenende 
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..

ICON	Bezeichnung	html entity	html dez	html hex
🧪	Reagenzglas
🔬	Mikroskop
☥	Ankh	-	&#9765	&#x2625
🤦	Face Palm		🤦
♺	Recyle		♺
♻	Recyle		♻
⚛	Atom		⚛
←	Pfeil(links)	←	←	←
→	Pfeil(rechts)	→	→	→
♠	Pik	&spades;	♠	♠
♥	Herz	&hearts;	♥	♥

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

Zeichen	Windowscode	Hex	Hinweis
│	`ALT`+`179`	`U`+`2502`
└	`ALT`+`192`	`U`+`2514`
├	`ALT`+`195`	`U`+`251C`
┌	`ALT`+`218`	`U`+`250C`
║	`ALT`+`186`	`U`+`2551`
╚	`ALT`+`200`	`U`+`255A`
╟	`ALT`+`199`	`U`+`255F`
╔	`ALT`+`201`	`U`+`2554`
	`ALT`+`255`	`U`+`00A0`	Zeichen kann nicht als NBSP kopiert werden -.-

testtestttest

html Quellcode validieren

validator.w3.org nimmt Quelltext oder auch http-Links an und prüft diese auf Fehler.

Diese Seite wurde zuletzt am 18.06.2024 um 15:02 geändert.

(c) 2024 DHLF ☮🇺🇦