Kürzel in HTML erschaffen

[Sonic176]

Hallo,

und zwar suche ich eine Möglichkeit, Kürzel in HTML einzubringen. https://pokewiki.de/index.php?title=Hauptseite&action=edit habe ich mir jetzt als Beispiel genommen und ich möchte meinen Code auch irgendwie so gestalten.

Kann mir irgendjemand helfen? Vielen Dank schon mal im Voraus

[Matthias Apsel]

Hallo Sonic176,

Kann mir irgendjemand helfen? Vielen Dank schon mal im Voraus

Wenn ich das richtig verstehe, möchtest du Wiki-Funktionen nachbauen. Das geht mit HTML nicht.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

um das zu konkretisieren: Dazu muss man programmieren. HTML und CSS sind keine Programmiersprachen, sondern nur Beschreibungssprachen für Inhalt und Layout. Das Programm muss zumindest in Grundzügen am Server ablaufen, z.B. mit PHP. Zum Beispiel müssen die Datenbankzugriffe zum Auflösen der Kürzel dort erfolgen.

Einen Teil des Programms kann man auch im Browser in JavaScript laufen lassen, sofern man dafür gute Gründe identifizieren kann; allerdings muss man immer damit rechnen, dass am Client kein JavaScript abläuft und dann auch eine reine Serverlösung anbieten, die die Inhalte zumindest in einfacher Form zugänglich macht.

Rolf

[Linuchs]

ich hänge mich mit einer ähnlichen Frage mal an:

in einem Textarea kann man Textauszeichnungen eingeben, wie hier auch, also etwa **für fett**, wird auch so in der DB gespeichert.

Bei der Ausgabe erzeugt PHP dann <b>für fett</b>

Nun habe ich Farben dazugenommen [a]Bemerkung[a], das wird zu <font color="#4040ff">Bemerkung</font>

(Auf der Suche nach „normierten“ Farben bin auf die 13 Boomwhacker-Farben gestoßen, für jeden Ton der Tonleiter einen: c, cis, ...)

**{e}[a]Bemerkung[a]{e}** wird auch korrekt umgesetzt zu <b><font bgcolor="#ffff1a"><font color="#4040ff">Bemerkung</font></font></b>, aber die Hintergrund-Farbe e (#ffff1a) wird ignoriert.

Offenbar funktioniert <font bgcolor ...> auch alleine nicht (im FF), obwohl es zahlreiche Quellen gibt, die das beschreiben.

Angenommen, dieses bgcolor gibt's nicht mehr, wie setzt man denn eine Kombination aus Vorder- und Hintergrundfarbe um?

fragt Linuchs

[MudGuard]

Hi,

Offenbar funktioniert <font bgcolor ...> auch alleine nicht (im FF), obwohl es zahlreiche Quellen gibt, die das beschreiben.

Angenommen, dieses bgcolor gibt's nicht mehr, wie setzt man denn eine Kombination aus Vorder- und Hintergrundfarbe um?

Da gibt's was ganz neues, nennt sich CSS ...

Ich würd auch eher span als font nehmen. Dem span eine Klasse verpassen (class="NoteCis" oder so)

Und die Farben dann einmalig im Stylesheet definieren.

cu,
Andreas a/k/a MudGuard

[Linuchs]

Da gibt's was ganz neues, nennt sich CSS ...

Habe ich gleich mal gegoogelt. Whow, ist ja der Hammer, hat was mit Kaskaden zu tun, kenne ich von Springbrunnen, sieht toll aus ;-)

Und die Farben dann einmalig im Stylesheet definieren.

Und schon braucht man eine zusätzliche Quelle an anderer Stelle. Ich möchte zusammengehörende Informationen auch zusammen lassen.

Bin gerade dabei, .css Dateien von Schrott zu befreien, der sich in Jahren angesammelt hat und nirgends mehr gebraucht wird. Leider gibt es keinen Verwendungsnachweis.

Viele Webseiten sind vollgeschrottet, da werden divs mit umfangreichen Angaben geöffnet und ohne Inhalt wieder geschlossen. Klar reicht dann die Internetgeschwindigkeit nicht aus. Ich habe den Ehrgeiz meine Seiten so klein und schnell wie möglich zu machen.

Dazu gehört eben, ungenutzte CSS-Angaben möglichst zu vermeiden. Weil ich eine Farbe benötige, soll ich 26 Farbtöpfe laden?

Linuchs

[MudGuard]

Hi,

Und schon braucht man eine zusätzliche Quelle an anderer Stelle. Ich möchte zusammengehörende Informationen auch zusammen lassen.

Ach, und deswegen willst Du das zusammengehörige CSS überall im Code verteilen?

Weil ich eine Farbe benötige, soll ich 26 Farbtöpfe laden?

Ist es sinnvoller, dieselbe Farbkombination zig mal anzugeben?

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

Ach, und deswegen willst Du das zusammengehörige CSS überall im Code verteilen?

Das ist doch compiliertes Markdown. Da ist's nicht so schlimm.

Man könnte natürlich auch im <head> der HTML Datei on demand Styles für die verwendeten Markdown-Stile einsetzen. Bei sauberem EVA Design der Seite sicherlich kein Problem.

Rolf

[Linuchs]

Hallo Rolf,

Man könnte natürlich auch im <head> der HTML Datei on demand Styles für die verwendeten Markdown-Stile einsetzen. Bei sauberem EVA Design der Seite sicherlich kein Problem.

In der Tat kein Problem, aber dann stammen 'style' und 'sein' HTML aus zwei Quellen statt einer. Welchem Gag soll das dienen?

Ihr betet hier offenbar für einen Glauben, der mir fremd ist. Schreibt doch mal sachliche Gründe.

Linuchs

[Rolf B]

Hallo Linuchs,

oder du verstehst mich miss.

Einerseits hast Du reklamiert, dass Du keine unnötigen Styles im CSS um Dich werfen willst.

Ich habe den Ehrgeiz meine Seiten so klein und schnell wie möglich zu machen.

Es kann unter diesem Gesichtspunkt ineffizient sein, bei vielen Style-Wechseln ständig die inline-styles neu zu setzen. Es kann zum Quetschen letzter Bytes sogar interessant werden, custom Tags im HTML zu verwenden (<lnx-whack-cis>) und die zu stylen.

dann stammen 'style' und 'sein' HTML aus zwei Quellen

Das hab ich nicht verstanden, du generierst die Seite doch basierend auf einem Markdown-Text, oder? Im Markdown existieren Kennungen für bestimmte Darstellungen, wie **fett** oder auch deine Boomwhacker-Backgrounds. Es kann - muss nicht - sinnvoll sein, statt inline-styles den Elementen Klassen für die gewünschte Darstellung zu geben und die styles für diese Klassen im <head> der Seite nach Bedarf einzusetzen.

Rolf

[Linuchs]

Hallo Rolf,

Das hab ich nicht verstanden, du generierst die Seite doch basierend auf einem Markdown-Text, oder?

Ach so, <style> im Kopf einer HTML-Seite. Ich dachte an mehrere CSS-Dateien, die im <head> gerufen werden.

Mache ich doch so. Nur mehrere <style> im HTML Dokument:

<style>
#irgendwas h2 {
  color: #f00;
}
</style>

<div id=irgendwas>
  <h2>... und noch was</h2>
</div>

Funktioniert. Könnte man auch bei <h2 direkt reinschreiben. Interessanter wird's für <td von Tabellen, oder <li, deren es hundert gibt.

Linuchs

[Linuchs]

Ach, und deswegen willst Du das zusammengehörige CSS überall im Code verteilen?

Ja ganz bewusst objektorientiert.

Zwar habe ich eine führende basis.css für das gesamte Projekt, aber auf vielen Seiten hole ich mir z.B. einen HTML-Baustein als header, der hat seinen eigenen <style> für die mehrdimensionale Menü-Liste, in der beim Übermausen (mouseover) die untergeordnete Liste aufklappt und ggf. noch Ebene 3. Das allein sind 129 Zeilen CSS, die nirgendwo anders gebraucht werden.

Wenn ich am header etwas ändere, warum sollte ich mehrere Dateien ändern? Das wäre eine zuverlässige Fehlerquelle.

Dann hat manche per PHP eingebundene <form> irgendwelche Sonderbedingungen und so hätte eine zentrale CSS-Datei über 1000 Sonder-Zeilen.

Eine gewisse Zeit gab es das <style scoped>, ein objektorientierter Ansatz, ich liege also nicht vollständig daneben.

Linuchs

[Matthias Scharwies]

Servus!

Ach, und deswegen willst Du das zusammengehörige CSS überall im Code verteilen?

Ja ganz bewusst objektorientiert.

Zwar habe ich eine führende basis.css für das gesamte Projekt, aber auf vielen Seiten hole ich mir z.B. einen HTML-Baustein als header, der hat seinen eigenen <style> für die mehrdimensionale Menü-Liste, in der beim Übermausen (mouseover) die untergeordnete Liste aufklappt und ggf. noch Ebene 3. Das allein sind 129 Zeilen CSS, die nirgendwo anders gebraucht werden.

Weil CSS-Dateien vom Browser im Cache behalten und nur einmal abgerufen werden!

Wenn ich am header etwas ändere, warum sollte ich mehrere Dateien ändern? Das wäre eine zuverlässige Fehlerquelle.

Trennung von Inhalt und Design!

Wenn Du etwas am HTML-Markup änderst, veränderst Du die HTML-Datei(en).

Wenn Du das Design änderst, änderst du zentral ein Stylesheet.

Dann hat manche per PHP eingebundene <form> irgendwelche Sonderbedingungen und so hätte eine zentrale CSS-Datei über 1000 Sonder-Zeilen.

Sowas sollte man soweit wie möglich reduzieren

Eine gewisse Zeit gab es das <style scoped>, ein objektorientierter Ansatz, ich liege also nicht vollständig daneben.

Und warum gibt's das nicht mehr? Überleg mal!

Herzliche Grüße

Matthias Scharwies

[Linuchs]

Weil CSS-Dateien vom Browser im Cache behalten und nur einmal abgerufen werden!

Auch so ein unbegründeter Glaube. Ich schalte im FF die Konsole ein mit [Strg][Shift][K] und rufe diese Seite mehrfach auf.

Zum Beispiel werden folgende Dateien jedesmal geladen:

GET https://forum.selfhtml.org/css/app-7725967a44f93310d393394ae20e8e8c.css?vsn=d (121,9 kB)

GET https://forum.selfhtml.org/js/app-a30087d81677409e46d293ec85a586fd.js?vsn=d (kann FF nicht anzeigen, DuckDuckGo drängelt sich vor)

favicon.ico

Kann es sein, dass der FF keine Infos über das letzte Änderungsdatum bekommt?

Allein die Abfrage, um für 'nicht schuldig' - ähh 'not modifed' - zu plädieren, kostet jedesmal um die 30 ms, da ist auch fix eine halbe Sekunde weg. Ein paar gleichbleibende Zeilen in einer ohnehin zu ladenden Datei mitzusenden erscheint mir als das wesentlich kleinere Zeit-Übel.

Aber es ist zwecklos, mit Logik gegen Glauben zu argumentieren.

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Weil CSS-Dateien vom Browser im Cache behalten und nur einmal abgerufen werden!

Auch so ein unbegründeter Glaube.

Sicher nicht.

Zum Beispiel werden folgende Dateien jedesmal geladen:

GET https://forum.selfhtml.org/css/app-7725967a44f93310d393394ae20e8e8c.css?vsn=d (121,9 kB)

kann ich bestätigen. Müsste man mal Christian fragen, warum das Caching ausgeschaltet ist.

Aber es ist zwecklos, mit Logik gegen Glauben zu argumentieren.

Vielleicht stimmt auch deine Logik nicht. Es ist sicher sinnvoll, die Anzahl der zu übermittelnden Ressourcen zu minimieren. Nicht sinnvoll ist, eine Ressource mehrfach zu übertragen, obwohl sie nur einmal gebraucht wird.

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

Zum Beispiel werden folgende Dateien jedesmal geladen:

GET https://forum.selfhtml.org/css/app-7725967a44f93310d393394ae20e8e8c.css?vsn=d (121,9 kB)

kann ich bestätigen. Müsste man mal Christian fragen, warum das Caching ausgeschaltet ist.

Ist es nicht. War es nicht. Ich weiß nicht, warum der Firefox das hier nicht gecached hat. Als ich das konfiguriert habe, hat er es getan. Und Chrome und Safari tun es noch.

Ich habe jetzt Cache-Control: immutable gesetzt, das hilft zumindest für modernere Firefoxe.

Freundliche Grüße,
Christian Kruse

[Rolf B]

Hallo Linuchs,

Weil ich eine Farbe benötige, soll ich 26 Farbtöpfe laden?

bgcolor ist tot. Es mag Browser geben, die das noch unterstützen, aber bspw. in Chrome wird es ignoriert. Auch auf dem body-Element, für das es mal gedacht war, funktioniert es nicht. Auf <table> Elementen funktioniert es in Chrome noch, aber missbilligt es es auch da. Edit Nachtrag: Es funktioniert auf einigen Elementen (z.B. body und table), aber nicht auf font, span oder div.

Das <font> Element ist ebenfalls tot. Es ist ein Relikt aus HTML 3.2 und war schon in HTML 4 missbilligt.

Für Hintergrundfarben kannst Du ein <span style="background-color:..."> generieren. Oder class="boom_cis". Du musst dann nur mit der Style-Reihenfolge aufpassen, damit das nicht von irgendwoher überklatscht wird, oder !important dahinter schreiben.

Rolf

[Gunnar Bittersmann]

@@Rolf B

bgcolor ist tot. Es mag Browser geben, die das noch unterstützen, aber bspw. in Chrome wird es ignoriert. Auch auf dem body-Element, für das es mal gedacht war, funktioniert es nicht.

Ich kann dir mit 100%iger Sicherheit sagen, dass bgcolor in Chrome auf dem body-Element funktioniert. Ich hab’s letztens bei einigen Targets in der CSSBattle verwendet, um Zeichen zu sparen.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

ah ok. Es lag an jsFiddle, da wurde die Body-Hintergrundfarbe per CSS gesetzt.

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich kann dir mit 100%iger Sicherheit sagen, dass bgcolor in Chrome auf dem body-Element funktioniert. Ich hab’s letztens bei einigen Targets in der CSSBattle verwendet, um Zeichen zu sparen.

Funktioniert natürlich nur mit gültigen Werten; es nicht alles erlaubt, was in CSS geht.

Andererseits ist was erlaubt möglich, was in CSS nicht geht. Das macht es ja gerade für die CSSBattle interessant.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Andererseits ist was erlaubt möglich, was in CSS nicht geht. Das macht es ja gerade für die CSSBattle interessant.

Diese (miesen? 😉) Tricks sind schon öffentlich bekannt, da kann ich sie auch hier posten:

*{background:#6592CF} – 21 Zeichen.

<body bgcolor=#6592CF> – 22 Zeichen, nichts gespart.

Aber: # ist nicht notwendig: <body bgcolor=6592CF> – 21 Zeichen.

Hintenstehende Nullen können weggelassen werden. Farbangaben können geringfügig vom Vorgabewert abweichen; aufgerundet: #6592D0.

<body bgcolor=6592D> – 20 Zeichen.

LLAP 🖖

[Gunnar Bittersmann]

@@Rolf B

bgcolor ist tot.

🎶 Lebt denn das alte bgcolor noch? Es lebt, es lebt! 🤪

LLAP 🖖

[Matthias Apsel]

Hallo Linuchs,

**{e}[a]Bemerkung[a]{e}** wird auch korrekt umgesetzt zu <b><font bgcolor="#ffff1a"><font color="#4040ff">Bemerkung</font></font></b>, aber die Hintergrund-Farbe e (#ffff1a) wird ignoriert.

Angenommen, dieses bgcolor gibt's nicht mehr, wie setzt man denn eine Kombination aus Vorder- und Hintergrundfarbe um?

Über korrekt lässt sich streiten. Aber wenn du partout die Zuständigkeiten nicht trennen möchtest, kannst du es so machen (Nicht nachmachen, Kinder!)

<span style=font-weight:bold><span style=background:#ffff1a><span style=color:#4040ff>Bemerkung</span></span></span>

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

<span style=font-weight:bold><span style=background:#ffff1a><span style=color:#4040ff>Bemerkung</span></span></span>

Ich hoffe, wir sind uns einig, dass es sich hier nicht um HTML handelt, sondern um CSS und damit keine Antwort auf meine Frage ist?

Ich habe es aber inzwischen so gemacht, wofür mich die Kinder hassen werden.

Gruß, Linuchs

[Matthias Apsel]

Hallo Linuchs,

<span style=font-weight:bold><span style=background:#ffff1a><span style=color:#4040ff>Bemerkung</span></span></span>

Ich hoffe, wir sind uns einig, dass es sich hier nicht um HTML handelt, sondern um CSS und damit keine Antwort auf meine Frage ist?

Deine Frage war: „wie setzt man denn eine Kombination aus Vorder- und Hintergrundfarbe um?“ Gestaltung ist Sache von CSS. HTML beschreibt nur, was etwas ist, nicht wie etwas aussehen soll. Insofern ist genau das die Antwort auf deine Frage. HTML ist nicht für die Darstellung zuständig.

Span-Elemente sind Elemente ohne besondere semantische Bedeutung, genau wie die veralteten b- und font-Elemente.

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

Gestaltung ist Sache von CSS.

Na ja, verlinke mal ein Beispiel, in dem der HTML-Code per CSS mal eine Liste <ul> mit anderem CSS eine Tabelle <table> werden kann. Sicher zwei wichtige Gestaltungsmerkmale.

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Na ja, verlinke mal ein Beispiel, in dem der HTML-Code per CSS mal eine Liste <ul> mit anderem CSS eine Tabelle <table> werden kann. Sicher zwei wichtige Gestaltungsmerkmale.

https://codepen.io/gunnarbittersmann/pen/BmjPGr

LLAP 🖖

[Matthias Apsel]

Hallo Linuchs,

Na ja, verlinke mal ein Beispiel, in dem der HTML-Code per CSS mal eine Liste <ul> mit anderem CSS eine Tabelle <table> werden kann.

Der HTML-Code wird durch CSS nicht verändert. Aber ja, man kann durchaus Tabellen wie Listen darstellen. https://wiki.selfhtml.org/wiki/HTML/Tabellen/Responsive_Gestaltung

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

pokewiki.de/ habe ich mir jetzt als Beispiel genommen und ich möchte meinen Code auch irgendwie so gestalten.

Da das aussieht wie MediaWiki, die Software mit der auch die Wikipedia läuft, könntest du dir das tatsächlich auch „einfach“ installieren. Vermutlich wäre das aber mit Kanonen auf Spatzen geschossen…

Gruß
Kalk