Thomas Pottman: Stil?

Hallo,

im Zuge Vorbereitungen für meine eigene Homepage, habe ich mir unter anderem mehrere Homapages angeschaut. Dabei fiel mir auf, das jeder seinen Quelltext "anderst" schrieb. So stieß u.a. auf folgende Auszüge (vereinfacht):

// 1
<HTML>
<HEAD>
<TITLE> Titel <TITLE>
</HEAD>
<BODY>
Text
</BODY>
</HTML>

//2
<HTML>
  <HEAD>
  <TITLE> Titel </TITLE>
  </HEAD>
  <BODY>
  Text
  </BODY>
<HTML>

//3
<html>
<head>
  <title> Titel </title>
</head>
<body>
  Text
</body>
</html>

//4
<html>
  <head>
    <title> Titel </title>
  </head>
  <body>
    Text
  </body>
</html>

Nun frage ich euch, liebe "Forumiten", wie ihr es mit euren Quelltexten halten, in welcher Form ihr diese schreibt, sei es nun eine von dem obrigen, oder eine andere. Auch würde ich gerne wissen, wie man sie schreiben sollte, auch im Bezug auf Verständlichkeit, und noch kommende Standards.

  1. hi

    Nun frage ich euch, liebe "Forumiten", wie ihr es mit euren Quelltexten halten, in welcher Form ihr diese schreibt, sei es nun eine von dem obrigen, oder eine andere. Auch würde ich gerne wissen, wie man sie schreiben sollte, auch im Bezug auf Verständlichkeit, und noch kommende Standards.

    offiziellen Standards ist das komplett egal. Imho ist es eim einfachsten, wenn man im <head> erstmal jede Angabe in genau eine Zeile setzt (verschachtelungen gibt es hier nicht, daher machen einrückungen wenig sinn).
    Im <body> sollte man dagegen so  notieren:
    <div>
      <p>in<span>halt</span></p>
    </div>

    ..also das innerste block-Element ohne zusätzliche Leerzeichen um den Inhalt. Damit vermeidet man dann, dass durch irgendwas Browser abdrehen. inline-Elemente sind wirklich in einer Zeile zu notieren.
    2 spezielle Kandidaten:
    <br/> sollte am Ende der Zeile stehen und auch im Quellcode einen Zeilenumbruch darstellen
    <hr/> kann getrost eine eigene Zeile sein.

    Bei CSS empfehle ist sowas:

    body{
      margin: 0px;
      padding; 0px;
    }

    ..übersichtlich ;) Dabei sollte man aich gleich angewöhnen immer eine Einheit anzugeben, damit man gar nicht erst durcheinander kommt.

    Grüße aus Bleckede

    Kai

    1. MOIN!

      Im <body> sollte man dagegen so  notieren:
      <div>
        <p>in<span>halt</span></p>
      </div>

      ..also das innerste block-Element ohne zusätzliche Leerzeichen um den Inhalt. Damit vermeidet man dann, dass durch irgendwas Browser abdrehen. inline-Elemente sind wirklich in einer Zeile zu notieren.

      Genauso! Obwohl ich oft den Inhalt im innersten Blockelement in eine neue Zeile schreibe und auch einrücke. Das ist vor allem dann hilfreich, wenn ich 'Inhalt' und weitere Blockelemente auf einer Ebene habe...
      Da ich während der BEarbeitung eigentlich fast nur Opera zur Vorschau nehme, kriege ich auch keine Fehlinterpretationen durch zuviel Lehrzeichen/Umbrüche (bei Tabellen macht das der REst der Browser ja ganz gerne). Nach bearbeiten fährt dann mein 'HTMLtune'-script drüber, das alle Umbrüche und überflüssige Leerzeichen entfernt (in der neusten VErsion auch Kommentare). Danach zeigen auch die minderen Browser alles richtig an und zudem spare ich im Durchscnitt (meine Seiten sind in der REgel recht verschachtelt, habe daher viele LEerzeichen) 25% ateigröße!

      Bei CSS empfehle ist sowas:

      body{
        margin: 0px;
        padding; 0px;
      }

      MAche ich genauso, bloß  das padding: 0px; besser funzen dürfte...

      Grüße aus einem Keller...

      Arne.

      1. hi

        body{
          margin: 0px;
          padding; 0px;
        }
        MAche ich genauso, bloß  das padding: 0px; besser funzen dürfte...

        Opera will padding:0px; _alle_ anderen margin:0px;

        Grüße aus Bleckede

        Kai

        1. Hallo,

          Opera will padding:0px; _alle_ anderen margin:0px;

          aber keiner will padding; 0px;    ;-)))))

          Chräcker

          1. MOIN!

            Opera will padding:0px; _alle_ anderen margin:0px;

            aber keiner will padding; 0px;    ;-)))))

            Dank dir Chräcker!
            Genau das meinte ich....

            Gruß,

            Arne.

  2. im Zuge Vorbereitungen für meine eigene Homepage, habe ich mir unter anderem mehrere Homapages angeschaut. Dabei fiel mir auf, das jeder seinen Quelltext "anderst" schrieb.

    Nun frage ich euch, liebe "Forumiten", wie ihr es mit euren Quelltexten halten, in welcher Form ihr diese schreibt, sei es nun eine von dem obrigen, oder eine andere.

    Anders, meistens mit einem Zeichen Einrückung bei Tabellenreihen, grundsätzlich etwas chaotisch.

    Auch würde ich gerne wissen, wie man sie schreiben sollte, auch im Bezug auf Verständlichkeit,

    Schreibe Deine Seiten so, wie _Du_ sie verstehst. Du wirst im Laufe der Zeit schon selber merken, ob es bei Deinem Stil Probleme gibt, wenn Du nach Wochen wiedermal an der Seite arbeiten willst und nicht auf Anhieb erkennen kannst, wo vorne und hinten ist.

    Ich halte davon abgesehen das dritte Beispiel für einen guten Weg.

    und noch kommende Standards.

    Du solltest lediglich:

    • die Tag- und Attributsnamen klein schreiben (<html> statt <HTML>),
    • Attributwerte in Anführungszeichen setzen ("<span class="wichtig">),
    • darauf achten, offene Tags nach Möglichkeit immer zu schließen (<li></li>),
    • Sachen wie <center>, <font> oder <b>, von denen das W3C abrät, vermeiden,
    • Tags ihrer Bestimmung nach benutzen, also <p> statt <br><br>, <li> für Listen (statt <br>-Zeilen) oder Tabellen für Tabellendaten, nicht zum Seitenlayout.

    Beim "Sauberhalten" hilft Dir der HTML-Validator des W3C, Modus HTML 4 strict: http://validator.w3.org.

    Gruß,
      soenk.e

  3. //3
    <html>
    <head>
      <title> Titel </title>
    </head>
    <body>
      Text
    </body>
    </html>

    //4
    <html>
      <head>
        <title> Titel </title>
      </head>
      <body>
        Text
      </body>
    </html>

    Ich bevorzuge eine Mischung zwischen 3 und 4, hauptsache ich kanns lesen ;)

  4. Moin!

    // 1
    <HTML>
    <HEAD>
    <TITLE> Titel <TITLE>
    </HEAD>
    <BODY>
    Text
    </BODY>
    </HTML>

    Diese Schreibweise wird schnell unübersichtlich, wenn die Inhalte im <body> komplizierter verschachtelt sind. Vor allem Tabellenlayouts (sind ja immer noch gerne genommen, auch wenn sie eigentlich aussterben sollten) sind auf diese Weise unmöglich zu überblicken.

    //2
    <HTML>
      <HEAD>
      <TITLE> Titel </TITLE>
      </HEAD>
      <BODY>
      Text
      </BODY>
    <HTML>

    Das ist kein Vorteil gegenüber //1, nur wird die Datei pro Zeile um zwei Leerzeichen größer.

    //3
    <html>
    <head>
      <title> Titel </title>
    </head>
    <body>
      Text
    </body>
    </html>

    Das ist im Prinzip gut: Die entscheidenden zwei Bereiche <head> und <body> sind noch nicht eingerückt, deren Inhalte aber sind es. Spart Leerzeichen.

    //4
    <html>
      <head>
        <title> Titel </title>
      </head>
      <body>
        Text
      </body>
    </html>

    Das ist die konsequenteste Art der Einrückung: Ein klammerndes Tag erfordert eine weitere Einrückebene.

    Mein Favorit derzeit:

    <html>
    <head>
    <title> Titel </title>
    </head>
    <body>
    <div>
      Text
    </div>
    <div>
      <div>
        Text
      </div>
      <div>
        Text
      </div>
    </div>
    </body>
    </html>

    Also die erste Ebene unterhalb von <body> noch nicht einrücken, sondern erst die zweite Ebene.

    Auch würde ich gerne wissen, wie man sie schreiben sollte, auch im Bezug auf Verständlichkeit, und noch kommende Standards.

    Einrückungen sind eigentlich unerläßlich. Dafür sollte eine Methode genommen werden, die in allen Editoren der beteiligten Entwickler funktioniert. Ich nehme für eine Einrückebene grundsätzlich zwei Leerzeichen, und keinerlei Tabulatoren. Die können, wenn die Editoren sie unterschiedlich behandeln, ein Layout innerhalb kürzester Zeit zerreißen. Manche Editoren unterscheiden Leerzeichen und Tabs und haben eine einstellbare Tabulatorbreite (z.B. 4 Leerzeichen). Andere Editoren haben fest eingestellt 8 Leerzeichen für einen Tab. Noch andere Editoren wandeln Tabs in Leerzeichen um und speichern die Seite dann ohne Tabs (das ist dann der Tod des Layouts). Und wenn ein Entwickler Leerzeichen benutzt, und der andere Tabs, der eine immer sechs Leerzeichen macht, wo der andere nur einen Tab setzt, und die Editoren der beiden dann noch gegeneinander arbeiten - dann ist ganz Ende.

    Mit anderen Worten: Für die Standard-Setzung (was Einrückungen angeht) bist du selbst verantwortlich. Hauptsache einheitlich. ;) Aber sich (auch von Programmiersprachen) den guten Stil anderer Programmierer abzugucken ist sicherlich nicht verkehrt.

    - Sven Rautenberg

  5. Hallo.

    Schon mal von Lintern http://google.de/search?q=code+lint gehört? Ich bevorzuge den Stil, den Tidy+indent mir ausspuckt:

    Tue 21.05.02  2:55 c:>tidy -i f.html

    Tidy (vers 30th April 2000) Parsing "f.html"

    "f.html" appears to be XHTML 1.0 Transitional
    no warnings or errors were found

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org" />
    <style type="text/css">
    hallo {murks: hastenichgesehn;}
    </style>

    <title></title>
      </head>

    <body>
        <div>
          foobar
        </div>
      </body>
    </html>

    1. hi

      no warnings or errors were found

      huh? Also ich seh einen - <title> muss erstes Child-Element von <head> sein in XHTML... keinen Ahnung warum, aber is so.

      Grüße aus Bleckede

      Kai

      1. hi

        Tach

        no warnings or errors were found

        huh? Also ich seh einen - <title> muss erstes Child-Element von <head> sein in XHTML... keinen Ahnung warum, aber is so.

        Behauptung: obige Aussage ist falsch.

        Beweis:
        Aus der strict.dtd zu XHTML:

        <!ELEMENT head (%head.misc;,
             ((title, %head.misc;, (base, %head.misc;)?) |
              (base, %head.misc;, (title, %head.misc;))))>

        Als erstes ist %head.misc erlaubt (1. Zeile)
        Danach entweder (2. Zeile) title, gefolgt von misc, eventuell gefolgt von base und weiterem misc
        Oder (3. Zeile) base, gefolgt von misc, gefolgt von title und misc.

        %head.misc ist wie folgt definiert:
        <!ENTITY % head.misc "(script|style|meta|link|object)*">
        kann also leer sein oder eine beliebige Anzahl in beliebiger Reihenfolge von script, style, meta, link und object

        Da als erstes %head.misc; kommt und dieses nicht notwendigerweise leer ist, muß title also NICHT an erster Stelle stehen.

        qed

        Grüße aus Bleckede

        Kai

        Andreas