xhtml erlernen

[fabio]

hi

bin ja dran, ne homepage zu machen. trommelwirbel.
ja, die läuft aktuell (noch in programmierphase bis ende jahr) noch bei doctype HTML 4.01 Transitional, und ist soweit auch alles valide.
nun, html 4.01 trasitional ist aber etwas, wie soll ich sagen, alt. und man sollte es ja so langsam aber sicher mit xhtml machen.
also, das will ich auch, weil die homepage soll in seiner form so gute 5-6 jahre noch halten ohne grosse änderungen.

also, auf UTF-8 und XHTML setzten sollte mal für den anfang reichen.
nun frag ich mich aber, auf was muss ich alles achten bei XHTML. welchen type soll ich nehmen, strict, oder transitional (frameset fällt raus, da ich gar keine framesets benutz).

gibt es irgendwo ne gute seite wo das wichtigste zu XHTML steht? die komplette docus will ich nicht durchlesen, das ist mir zu viel und zu genau, aber halt so allgemeine infos, wie eben zB <br /> anstatt <br>.

noch was, ich benutze momentan noch zur formatierung der textpassagen <br> und <b> tags, also zB so:

kläre <b>formen</b>, ausgewählte <b>materialen</b> und innovative <b>lösungen</b>. 
<br>
<br>
in unseren <a href="http://www.interni-raumkonzept.ch">schauraum</a> zeigen wir ihnen zeitloses design.

also, um einen neuen absatz zu mchen anstatt mit <p>-aragraphen zu arbeiten, nehm ich einfach den zeilenumbruch. auch um ein wort fett zu machen nehm ich anstatt einer CSS eigenschaft einfach den <b>-tag. dies hauptsächlich weil es vom code her übersichtlicher ist mE.
auf das müsst ich ja verzichten, weil in xhtml 2 ja angeblich nicht mehr vorhanden.
wie wäre aber zB das äquivalent zu drei zeilenumbrüchen in xhtml?

[h3ll]

Übersichtlich hin oder her, <br /> als Absatztrenner ist einfach falsch, egal welche (X)HTML Version.

Gewöhn dir an, Tags so zu verwenden, wie sie gedacht sind, und nicht wie sie in deinem Browser ausschauen. Denn das Aussehen bestimmst du sowieso per CSS. Aber für den Browser (und übrigens auch für die Suchmaschinen) hat <br /> eine vollkommen andere Bedeutung als <p>. Genauso wie es komplett sinnlos ist, eine Überschrift mit <b> oder <font> zu formatieren (betrifft nicht deinen Code, ist nur allgemein gesprochen). Denn eine Suchmaschine erkennt keine solchen Überschriften und dadurch können dir viele Besucher durch die Lappen gehen.

[Blackgreetz]

Also laut meiner Suche fällt bei xhtml 2 zwar <b>-Weg, allerdings bleibt <p> erhalten.., jedoch in einer leicht veränderten Weise zum positiven..

Ein äquivalent zu den 3x br wirst du nicht finden, da es keines gibt (wozu auch?)

Gute Seite kenn ich ansich nicht, aber nach dem anlesen scheint selfhtml nen brauchbare/n Seite/Artikel dazu zu haben: http://de.selfhtml.org/html/xhtml/unterschiede.htm

Alles was da steht müsste glaube auch in xhtml2 noch gelten, aber habs eben nur überflogen..

mfg

[fabio]

Ein äquivalent zu den 3x br wirst du nicht finden, da es keines gibt (wozu auch?)

nun, weil ich nunmal den text so formatieren will, dass es einen text block, dann eine leere zeile, dann wieder textblock, dann zwei leere zeilen hat.
was dann im endresultat so ausschaut:
http://dev.interni-raumkonzept.ch/ (rechte spalte)

safari gibt mir im contenteditable eine leere spalte so aus

<p><br /></p>

da es aber ein <br /> drin hat bin ich nicht sicher ob es auch in xhtml2 gültig sein wird.

ich muss ja irgendwie die abstände zwischen den absätzen definieren können ohne auf margin zurückzugreifen

[unset]

Original geschrieben von fabio
ich muss ja irgendwie die abstände zwischen den absätzen definieren können ohne auf margin zurückzugreifen

Noe. Das "aussehen" bestimmt man ausschließlich über Styles.

[fabio]

ja und trotzdem, wie geb ich dann per CSS an, dass dem jetzigen absatz zwei leere zeilen folgen, bevor ein neuer absatz kommt'?

[PHP-Desaster]

<p class="hatVielAbstandNachUnten">Foo</p>
<p>Bar</p>

.hatVielAbstandNachUnten {
    // Margin einstellen
}

[fabio]

ja das ist mir klar, dass man es so machen könnte, aber dann hat man wieder probleme wenn man in den editor geht.
ich meine so, also, ich schreibe im editor

Hier ist ein text<enter>
<enter>
<enter>
<enter>
und hier ein neuer absatz

ich kann jetzt immernoch mit den pfeiltasten der tastatur von zeile zu zeile rumspringen, und auch was in die "mittlere zeile" reinschreiben.

sobald ich es aber xhtml-normen würde, wäre der text so

Hier ist ein text<abstand:3zeilen>



und hier ein neuer absatz

und ab jetzt könnte ich nicht mehr in die mittlere zeile was schreiben. den sobald ich vor dem "und" den cursor positioniere und den pfeil einmal nach oben drücke, geht der cursor gleich vor "hier".
sprich er würde sich völlig anders verhalten.

weil ein zeilenumbruch bei der texteingabe soll sich nunmal auch wie ein zeilenumbruch verhalten

[fabio]

hm, wäre dann zumindest

<p>&nbsp;</p>

das als zeilenumbruch xhtml konform? dann bei den <p> padding und margin auf 0 setzen und es sieht genau gleich aus.
oder wäre das auch wieder "schlecht" weil der zeilenumbruch im html teil gemacht wird und nicht per css? oder sagen wir es so, was würde dagegen sprechen

[Blackgreetz]

Hmm...
es wirkt irgendwie so, als willst du deine Seite wie ein Textdokument gestalten bzw. so wie man es Dreamweaver machen kann.
Ich mach 3xEnter, dann sollen da auch 3 Zeilenumbrüche sein.. ich formatiere meinen Text in die Mitte, dann soll der im html-Dokument auch in der Mitte stehen..

wäre dann zumindest .. <p> </p> .. das als zeilenumbruch xhtml konform?

Wenn du als konform den Status "valid" nimmst, dann müsste dies zutreffen. Nimmst du es als sinnvoll bzw. "richtig", dann eindeutig nein, weil es nunmal einen <br /> gibt.

Stell dir vor, du willst eine Seite machen: Oben 1 Satz - '30 Freizeilen' - Unten 1 Satz..
1 Zeile = line-height:20px;
Willst du jetzt in deiner Datei wirklich 30x Enter drücken?
Wenn ja, wozu?
Es ist doch unsinnig eine Datei so lang zu ziehen, wenn man es gar nicht brauch.
Aus:

Zeile oben
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
...
<br />
<br />
Zeile unten

Machste dann:

<div style="margin-bottom:600px;">Zeile oben</div>
Zeile unten

Es ist doch aufwendig dauernt runterscrollen zu müssen...


mfg

[fabio]

nun, natürlich braucht ein text keine 30 leere zeilen. das ist klar.
aber eben, schau mal auf http://dev.interni-raumkonzept.ch/profil.htm
dort hat es jeweils eine zeile zwischen den textabsätzen und zwei zeilen bei der untersten zeile.

wie gesagt, wenn ich den text selber formatieren würde, also ich als "admin" den text in richtiges xhtml formatieren würde, mit css die abstände richtig machen und so wäre das kein problem. wenn ich dann manuell halt die abstände mit css reinmachen sollte.

aber wie du bereits erkannt hast, ist dahinter ein CMS aufgebaut, dass der besitzer der homepage selber text eintragen kann, selber fotos uploaden kann, und selber links einfügen kann, ohne dass ich die abstände manuell per css machen muss.

ja, das admin-CMS besteht bereits, ist ne eigenprogrammierung, die relativ wenig formatierungsmöglichkeiten bieten (gerademal fett machen und links einfügen).
hier http://img.skitch.com/20081019-fny9r...gmr4jqwqud.png

weil so wie ich das langsam verstehe, kann es in xhtml gar keine WYSIWYG editoren mehr geben, weil das anscheinend zwei verschiedene konzepte sind. ich meine klar zum programmieren nutze ich weiterhin den texteditor, aber der besitzer soll nachher selbstständig den inhalt einfügen können, ohne auch nur eine spitze klammer überhaupt zu sehen bekommen.

ausserdem tut auch tinymce einen zeilenumbruch als "<p>& nbsp ;</p>" anzeigen, und selbst fett gedrucktes macht tinymce als "<strong>" und nicht mittels CSS font-weight

auf was steuern wir zu? auf ne zukunft wo CMS nicht mehr "erlaubt" ist und jede noch so kleine änderung von einem webmaster gemacht werden muss?

[Blackgreetz]

aber wie du bereits erkannt hast, ist dahinter ein CMS aufgebaut

Gut zu wissen.
Dies ändert die Sache ansich.

Ansich hat dies gar nichts mit dem Problem <p> und <br> zu tun.

Ein Zeilenumbruch ist normal ein <br>
Ein Absatz ist normal ein Absatz <p>

Ob sich xhtml2 und WYSIWYG-Editoren vertragen werden, kann ich nicht beurteilen, weil ich dazu keine Informationen gefunden habe.

Für (X)HTML5 soll man auf jeden Fall einen bestimmten Meta-Tag angeben, der sagt, dass die Seite mit sonem Ding erstellt worden ist und das schlechte Mark Up somit rechtfertigt.

Für dich als Seiteninhaber kannst du bei sowas dann nichts machen:
Wenn der User einen Zeilenumbruch macht, dann ersetzt du ihn mit <br /> und nimmt der das Modul "Absatz" von deinem Editor, dann hast du Glück.

Das diese Editoren sonen schlechten Code ausspucken, wusste ich persöhnlich nun nicht, aber hab mich auch nie damit beschäftigt geschweige denn sie gerne benutzt.

Ansonsten könntest du aber noch mittelsl PHP die Ausgabe von <strong> auf <span style="font-weight:bold;"> ändern.
Gleiches gilt für <br>Text<br>, wenns dich stört.., dann hast du zwar zwischen den <p>-Elementen wieder <br>-Tags, aber manchmal muss man dann mit sowas leben.

mfg

[h3ll]

Das Problem ist nicht das System, sondern der Benutzer. Wenn ein Benutzer ein Absatz machen will, soll er einen Absatz machen, aus und ende. Eine Möglichkeit wäre einen Filter zu verwenden, der den Code validiert und dann invaliden Code entweder korrigiert oder rauslöscht. Dadurch verärgerst du zwar den Benutzer, aber es ist valide. Meistens ist es besser den Benutzer nicht zu verärgern, aber dann musst du eben mit kaputten Code leben können.

Aber das Problem hast du nicht nur in einem CMS sondern auch in anderer Software. Schau dir mal MS Word an. Wieviele Dummies rücken Text mit Leerzeichen ein, weil sie nicht wissen, dass es eine Zentrierfunktion gibt? Das ist dann nicht nur falsch, sondern sieht auch total unprofessionell aus (wenn die Texte zB. in Schlangenlinie eingerückt sind).

Und auch MS Word kennt den Unterschied zwischen Absatz und Zeilenumbruch. Nur 99% der Benutzer nicht...

Eine Lösung wäre den Benutzer so weit einzuschränken, dass er im Prinzip gar nix falsch machen kann. Also kein frei editierbares Textfeld zur Verfügung stellen, sondern das ganze nach dem Baukastensystem aufzubauen. Mach eine Funktion "neuer Absatz", dann soll der Benutzer Text eingeben. Hier lässt du nur reinen Text zu und alles andere wird gnadenlos rausgefiltert. Ist natürlich sehr unflexibel, aber wenns die Ansprüche erfüllt, wäre es ein mögliche Lösung.

Es gibt übrigens fertige Javascript-Texteditoren, die freie Formatierungen zulassen, aber trotzdem validen XHTML-Code ausspucken. Natürlich darf man dann dem Benutzer nicht die Möglichkeit geben im Source-Code rumzupfuschen. Aber hier ist natürlich wieder das selbe Problem wie zB. bei MS Word, dass die ganzen DAUs erst wieder keine vernünftigen Absätze machen, obwohl die Software die Möglichkeit bietet.

[fabio]

nun, wie gesgt der CMS editor ist kein fertiger ala tinyMCE oder so, sondern ein selbst programmierter.
tinyMCE kann man nicht so perfekt ins design einbauen und hat viel zu viele funktionen welche die seite überladen würden. ledigilch für fett und links einen tinyMCE (o.ä) einzubauen wäre etwa das selbe wie mit einem ferrari von der einen strassenseite zur anderen zu fahren um einkaufen zu gehen ^^

also, den code der mein editor ausgibt sieht so aus:

Lorem <span class="Apple-style-span" style="font-weight: bold;">ipsum</span> dolor 
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua.
<div><br></div>
<div>Excepteur <a href="http://www.google.ch">sint</a> occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div><br></div>
<div><br></div>
<div>Letzer satz</div>

(ich habe selbst einige newlines gemacht damit es das php-resource design nicht zu sprengen)
der erste absatz hat eine leere zeile dazwischen, der zweite absatz zwei leere zeilen.
komischerweise wird der erste absatz nicht in ein "<div>" gesetzt.
also das fettmachen ist schonmal korrekt (das class='applestylespan' kann ich ignorieren oder rausschneiden). die absätze werden aber als <div> angezeigt und ncht als <p>, das könnte ich ganz einfach mit <div> ersetzen durch <p>, und das <br> könnt ich durch & nbsp; ersetzen, dann hätt ich so ein resultat.

Lorem <span style="font-weight: bold;">ipsum</span> dolor 
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua.
<p>& nbsp;</p>
<p>Excepteur <a href="http://www.google.ch">sint</a> occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>& nbsp;</p>
<p>& nbsp;</p>
<p>Letzer satz</p>

ich muss dann noch schauen wie ich den ersten absatz mit <p> umklammere, aber da würde ich sicherlich eine phpfunktion zu schreiben können.

wäre es also abgesehen von den <p> nbsp</p> als zeilenumbruch so machbar?

edit:
ja das mit den benutzern ist immer so ne sache, der jenige der das panel benutztn wird hat ne angewohnheit am ende der zeile enter zu drücken, anstatt einfach weiterzuschreiben und dem browser die umbrüche machen zu lassen.
sieht zwar optisch nicht anders aus, aber sobald man die schriftgrösse ändert oder den code anschaut sieht man dass da was falsch ist. hab deswegn auch bei den tooltips im adminpanel (siehe link weiter oben) extra reingeschrieben dass man zeilenumbrüchen nur bei neuen absätzen machen muss.

[Blackgreetz]

Worauf die Frage ansich nun bezogen ist, weiß ich nicht, aber ich denke, ja wäre die richtige Antwort.

<p>&nbsp;</p> = <br><br>..

mfg