deviled
Mitglied
Dabei seit: 05.01.04
Beiträge: 2.552
 |
|
XHTML: Tips
Setzt HTML/XHTML-Wissen vorraus!
DOCTYPEs:
Nun, XHTML bis zur Version 1.1 oder auch HTML hat 3 Typen:
- Strict - also das Reine, welches das W3C empfielt und präferiert, zeichnet sich aus durch die Schlankheit und Trennung von Struktur und Aussehen, was durch CSS gemacht werden soll.
- Transitional - Ist eigentlich mehr oder weniger ein Kompromiss zwischen der Strict-Veriante und der früheren Fehler des HTML durch die Auszeichnung, und die Benutzung der deprecated Elemente, also die Elemente die missbiligt gezeichnet sind, ist teils erlaubt, das sind vorallem Tags wie <font>, oder Attribute wie bgcolor.
- Frameset - Diese Variante unterscheidet sich kaum von der Transitional, erlaubt aber die Benutzung von Frames.
Welche Attribute nun deprecated sind, sieht man hier: http://de.selfhtml.org/html/referenz/varianten.htm
Nun, wieso das wichtig ist:
Jedes Dokument beginnt nicht mit <html>, sondern muss dem Browser auch übermitteln, was es für ein Dokument ist. Wenn man eine neue Seite schreibt, richtig - schreibt, ist die Benutzung der Strict-Variante empfohlen und wird in kommenden Versioenn des XHTMLs richtig sein. Dies macht sich schon daran bemerkbar, indem XHTML1.1 keine 3 Dokument-Typen hat, sondern nur eins, welches der Strict-Variante entspricht.
Genaueres über Doctypes hier: http://puredesign.ch/lounge/artikel/doctype.shtml
Nun, was ist dem an dem oben genannten <font>-Tag so schlecht?
Es war etwa so, dass HTML den <font>-Tag interpretiert hat, weil dies die einzige Möglichkeit war, andere Schriftarten zu benutzen. Danach kam CSS, und dieser Tag wurde unnötig, so dass er berits in HTML4.01 Transitional deprecated wurde, in HTML4.01 Strict gab es ihn bereits nicht mehr.
Wieso denn eigentlich?
XHTML oder auch HTML hat die Grundidee der Trennung von Struktur und Aussehen, so dass man, wenn man das absolut richtig machen will, erst die Seite strukturiert und fertig schreibt und sie erst dann gestaltet - durch CSS, denn Aussehen hat nichts mit Struktur zu tun, und sollte somit mit jedem Browser der HTML/XHTML darstellen kann, das auch auch angezeigt werden. Leider wurde dies aber oft missachtet, und wegen des Browserkriegs Netscape<->IE war es nur die einzige Möglichkeit die Seite richtig zu layoutieren, wenn man Tabellen benutzt, mit denen mal alle Elemente fest macht - in der Struktur des Codes. Aber der Browserkrieg ist vorbei, und mittlerweise gibt es auch viele richtige Möglichkeiten es richtig zu machen(, was WoltLab leider mit der Version =>2.1 des wBB etwas missverstanden hat, aber es hoffentlich mit der Version 3.0 besser machen wird).
Deshalb möchte ich noch einmal hinweisen, dass man klare und richtige Vorstellung des XHTMLs/HTMLs besitzen muss, um später weiterzukommen.
Beispiel: (setzt vorraus, man will etwas layoutieren, und nicht etwas tabellarisch darstellen lassen)
Was man bereits kennt:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
|
<table>
<tr>
<td><span class="headline">Überschrift</span></td>
</tr>
<tr>
<td><span class="text">Text</span></td>
</tr>
</table> |
|
Was eigentlich als richtige Tabelle richtig und kürzer wäre, da <th>-Tag speziell für Tabellenüberschriften gedacht ist:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
|
<table>
<tr>
<th>Überschrift</th>
</tr>
<tr>
<td>Text</td>
</tr>
</table> |
|
Was richtig ist, und das gleiche tut, Div macht einen Container, h2 macht eine Überschrift und p einen Paragraph:
| code: |
1:
2:
3:
4:
|
<div>
<h2>Überschrift</h2>
<p>Text</p>
</div> |
|
Leider gibt es bereits hier Probleme mit dem Internet Explorer, der das Box-Modell nicht korrekt unterstüzt, so dass man auf Ausweichungen und Fehler zugreifen muss, die das ganze ausbessern, nachzulesen hier: http://tantek.com/CSS/Examples/boxmodelhack.html Oder auch nach "box-model-hack" googeln, da es viele verschiedene Möglichkeiten gibt.
Jetzt gibt es aber ein Problem, wie macht man 2 Divs nebeneinander?
Da gibt es 2 Möglichkeiten, eins mit dem CSS-Attribut float, eins mit der Veränderung des Tag-Typs von block zu inline.
Zu float-Element hänge ich lieber einen Link an, wo das Ganze sehr gut erklärt wird: http://css-technik.de/css-examples/219_9/
Zu den Unterschied der Block- und Inlineelementen:
Es gibt 2 Typen der Elementen, einen der Blockartiig sind, und die anderen die Inline-, also "in der Zeile", Elemente sind. Aber vorsicht, Divs als Inline-Elemten zu machen, ist prinzipiell krank. 
Ich denke, viel zu erklären gibt es da nicht, ich schmeiß einfach ein Link hinterher: http://css4you.de/display.html 
Ein weiterer Fehler, den man oft sieht:
| code: |
1:
2:
3:
4:
5:
6:
7:
|
<center>
<div align="center">
<table>
...
</table>
</div>
</center> |
|
Viel einfacher, richriger, banaler und ohne die Benutzung der veralteten Tags geht es so:
| code: |
1:
2:
3:
|
<table align="center">
...
</table> |
|
Nützliche Links zu dem XHTML und CSS:
http://jendryschik.de/wsdev/einfuehrung/xhtml/
http://jendryschik.de/wsdev/einfuehrung/css/
http://www.alistapart.com/
http://www.css-technik.de/
http://barrierefrei.e-workers.de/workshops/ie-fun/index.html << Zeigt wie schlecht IE mit CSS umgehen kann! 
http://www.pixelgraphix.de/csshilfe/
http://www.positioniseverything.net/expl...led-margin.html
http://css-faq.de/
http://de.selfhtml.org/
http://css4you.de/
Und sicherlich viele weitere ...
|
|
