Steffi: Dokumenttyp-Deklaration

Moin Moin,
ich verwende zur Zeit ein bisschen CSS, ein wenig JavaScript und ein kleinen Flashfilm in meinem html Dokument.
Welche Dokumenttyp-Deklaration muß ich verwenden???
Ich tippe mal auf: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" hab aber keinen blassen Schimmer.
Kann mir einer weiterhelfen? Sind die Deklarationen überhaupt noch
sinnvoll bzw. ist es zwingend erforderlich zu deklarieren?
Wie ist der aktuelle Stand?

Ich hab nämlich folgendes Problem: Ich hab eine ganz einfache
html-Seite mit einigen meta-angaben, einen mit CSS positionierten Hintergrund der mit JavaScript einfadet und im Vordergrund einen kleinen Flashfilm, that's all. Bei der jetzigen Deklaration fadet der
Hintergrund nicht ein. Wenn ich die Deklaration weglasse läuft alles einwandfrei.
Die Frage ist ob bei ganz kleinen Seiten die Deklaration überhaupt Sinn macht und die andere Frage wäre wieso es bei der aktuellen Deklaration Schwierigkeiten gibt wo doch die Seite ganz klein ist.

  1. Nabend Steffi,

    Welche Dokumenttyp-Deklaration muß ich verwenden???

    Schau mal hier: http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp

    [...] Sind die Deklarationen überhaupt noch
    sinnvoll bzw. ist es zwingend erforderlich zu deklarieren?

    Mehr denn jeh. Du definierst damit die (X)HTML-"Art", die das Dokument verwendet. Puristen nehmen eher "strict", Anfänger eher "transitional". Und mein Wunsch: Alle verwenden Xhtml. ;)

    Viel Spaß & Grüße,
    Till

    1. Mehr denn jeh. Du definierst damit die (X)HTML-"Art", die das Dokument verwendet. Puristen nehmen eher "strict", Anfänger eher "transitional".

      Das muss nicht sein. Transitional ist ja nicht einfacher als Strict, eher schwieriger, weil mehr erlaubt ist.
      Besser gleich Strict, da kann man weniger falsch machen.

  2. Welche Dokumenttyp-Deklaration muß ich verwenden???

    Das hängt davon ab, welche <http://de.selfhtml.org/html/referenz/varianten.htm#strict_nicht_erlaubt@title=Elemente und Attribute> du verwendest.

    Sind die Deklarationen überhaupt noch sinnvoll bzw. ist es zwingend erforderlich zu deklarieren?

    Ja, sie ist empfehlenswert. Siehe http://de.selfhtml.org/css/formate/box_modell.htm@title=CSS-Box-Modell.

    Bei der jetzigen Deklaration fadet der Hintergrund nicht ein. Wenn ich die Deklaration weglasse läuft alles einwandfrei.

    Dann funktionieren Microsofts <http://de.selfhtml.org/dhtml/modelle/dynamische_filter.htm@title=dynamische Filter> offenbar nur im <http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=Quirks Mode>.

    Roland

    --
    -)
    1. Ich tendiere jetzt zu transitional, aber weiß noch nicht ob html
      oder xhtml.
      Wie sind da die Unterschiede?

      1. Hi,

        Ich tendiere jetzt zu transitional, aber weiß noch nicht ob html
        oder xhtml.
        Wie sind da die Unterschiede?

        HTML ist veraltetes wischiwaschi, während XHTML sehr viel stringenter ist. Du kannst sehr viel weniger Fehler machen, wenn Du Dich an die (sehr viel geringere Zahl von) Regeln hältst. Dazu ist es zukunftsträchtiger, und wenn Du  nicht gerade auf XHTML/1.1 oder 2.0 bestehst, erfreut es sich auch einer angenehmen Unterstützung.

        Du merkst es vielleicht schon: Ich kann nicht verstehen, wie man sich heute noch - zumindest bei neuen Projekten - für HTML entscheiden kann. Wenn Du also keine _expliziten_ Gründe findest, warum Du HTML benutzen solltest, bedeutet das ganz klar, dass Deine Wahl XHTML sein muss.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Ich betreibe das nur hobbymäßig wenn es draußen regnet und grabbel mir die Codes zusammen und alles dann in einen Topf. :-)

          Wenn Du Lust hast kannst Du ja mal kurz drüber schauen, würde mich freuen:

          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <meta name="robots" content="index,follow">
          <meta name="description" content="Mein Online-Film">
          <meta name="keywords" content="Homepage, Steffi">
          <meta http-equiv="pragma" content="no-cache">
          <meta http-equiv="expires" content="0">
          <title>Steffi</title>
          <style type="text/css">
          <!--
          #hintergrund {
          background-image:url(hintergrundbild.jpg);
          background-position:center;
          background-repeat:no-repeat;
          }
          -->
          </style>
          <script type="text/javascript">
          <!--
          document.write("<style type='text/css'>#hintergrund {visibility:hidden;}</style>");
          function initImage() {
           imageId = 'hintergrund';
           image = document.getElementById(imageId);
           setOpacity(image, 0);
           image.style.visibility = "visible";
           fadeIn(imageId,0);
          }
          function fadeIn(objId,opacity) {
           if (document.getElementById) {
            obj = document.getElementById(objId);
            if (opacity <= 100) {
             setOpacity(obj, opacity);
             opacity += 10;
             window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
            }
           }
          }
          function setOpacity(obj, opacity) {
           opacity = (opacity == 100)?99.999:opacity;
           obj.style.filter = "alpha(opacity:"+opacity+")";
           obj.style.KHTMLOpacity = opacity/100;
           obj.style.MozOpacity = opacity/100;
           obj.style.opacity = opacity/100;
          }
          window.onload = function() {initImage()}
          // -->
          </script>
          </head>
          <body id="hintergrund" style="margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px;">
          <div style="position:absolute; top:50%; height:256px; margin-top:-128px; left: 50%; width: 750px; margin-left: -375px;">
          <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="750" height="256" id="steffi">
          <param name="allowScriptAccess" value="sameDomain">
          <param name="movie" value="steffi.swf">
          <param name="quality" value="high">
          <param name="bgcolor" value="#000000">
          <embed src="steffi.swf" quality="high" bgcolor="#000000" width="750" height="256" name="steffi" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
          </object>
          </div>
          </body>
          </html>

          1. Den code einmal zu posten hätte gereicht ...

            1. ups, stimmt! :-)

      2. Ich tendiere jetzt zu transitional,

        Strict ist sauberer, es verzeiht auch weniger Fehler.

        aber weiß noch nicht ob html oder xhtml.

        Was die Darstellung betrifft besteht keiner. XHTML und hier vor allem die Variante strict erleichtert allerdings den Umstieg auf andere XML-Dialekte und ist von daher empfehlenswert.

        Wie sind da die Unterschiede?

        <http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschiede zwischen XHTML und HTML>

        Roland

        --
        -)
        1. Ich betreibe das nur hobbymäßig wenn es draußen regnet und grabbel mir die Codes zusammen und alles dann in einen Topf. :-)

          Wenn Du Lust hast kannst Du ja mal kurz drüber schauen, würde mich freuen:

          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <meta name="robots" content="index,follow">
          <meta name="description" content="Mein Online-Film">
          <meta name="keywords" content="Homepage, Steffi">
          <meta http-equiv="pragma" content="no-cache">
          <meta http-equiv="expires" content="0">
          <title>Steffi</title>
          <style type="text/css">
          <!--
          #hintergrund {
          background-image:url(hintergrundbild.jpg);
          background-position:center;
          background-repeat:no-repeat;
          }
          -->
          </style>
          <script type="text/javascript">
          <!--
          document.write("<style type='text/css'>#hintergrund {visibility:hidden;}</style>");
          function initImage() {
           imageId = 'hintergrund';
           image = document.getElementById(imageId);
           setOpacity(image, 0);
           image.style.visibility = "visible";
           fadeIn(imageId,0);
          }
          function fadeIn(objId,opacity) {
           if (document.getElementById) {
            obj = document.getElementById(objId);
            if (opacity <= 100) {
             setOpacity(obj, opacity);
             opacity += 10;
             window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
            }
           }
          }
          function setOpacity(obj, opacity) {
           opacity = (opacity == 100)?99.999:opacity;
           obj.style.filter = "alpha(opacity:"+opacity+")";
           obj.style.KHTMLOpacity = opacity/100;
           obj.style.MozOpacity = opacity/100;
           obj.style.opacity = opacity/100;
          }
          window.onload = function() {initImage()}
          // -->
          </script>
          </head>
          <body id="hintergrund" style="margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px;">
          <div style="position:absolute; top:50%; height:256px; margin-top:-128px; left: 50%; width: 750px; margin-left: -375px;">
          <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="750" height="256" id="steffi">
          <param name="allowScriptAccess" value="sameDomain">
          <param name="movie" value="steffi.swf">
          <param name="quality" value="high">
          <param name="bgcolor" value="#000000">
          <embed src="steffi.swf" quality="high" bgcolor="#000000" width="750" height="256" name="steffi" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
          </object>
          </div>
          </body>
          </html>

      3. Ich tendiere jetzt zu transitional, aber weiß noch nicht ob html
        oder xhtml.
        Wie sind da die Unterschiede?

        Um es platt zu formulieren: xhtml hat html abgelöst, es basiert auf XML und "ordnet" das html, z.B. werden alle Tags geschlossen. Hier weitere Unterschiede: http://de.selfhtml.org/html/xhtml/unterschiede.htm

        Besser fände ich, Du würdest es mit "strict" versuchen. Halte das Layout erst mal "einfach", verwende vielleicht eine Vorlage z.B. von http://www.einfach-fuer-alle.de/ und verändere die dann ein bisschen.

        Was für eine Website willst Du überhaupt machen?

        Grüße, Till

        1. Ich betreibe das nur hobbymäßig wenn es draußen regnet und grabbel mir die Codes zusammen und alles dann in einen Topf. :-)

          Wenn Du Lust hast kannst Du ja mal kurz drüber schauen, würde mich freuen:

          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <meta name="robots" content="index,follow">
          <meta name="description" content="Mein Online-Film">
          <meta name="keywords" content="Homepage, Steffi">
          <meta http-equiv="pragma" content="no-cache">
          <meta http-equiv="expires" content="0">
          <title>Steffi</title>
          <style type="text/css">
          <!--
          #hintergrund {
          background-image:url(hintergrundbild.jpg);
          background-position:center;
          background-repeat:no-repeat;
          }
          -->
          </style>
          <script type="text/javascript">
          <!--
          document.write("<style type='text/css'>#hintergrund {visibility:hidden;}</style>");
          function initImage() {
           imageId = 'hintergrund';
           image = document.getElementById(imageId);
           setOpacity(image, 0);
           image.style.visibility = "visible";
           fadeIn(imageId,0);
          }
          function fadeIn(objId,opacity) {
           if (document.getElementById) {
            obj = document.getElementById(objId);
            if (opacity <= 100) {
             setOpacity(obj, opacity);
             opacity += 10;
             window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
            }
           }
          }
          function setOpacity(obj, opacity) {
           opacity = (opacity == 100)?99.999:opacity;
           obj.style.filter = "alpha(opacity:"+opacity+")";
           obj.style.KHTMLOpacity = opacity/100;
           obj.style.MozOpacity = opacity/100;
           obj.style.opacity = opacity/100;
          }
          window.onload = function() {initImage()}
          // -->
          </script>
          </head>
          <body id="hintergrund" style="margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px;">
          <div style="position:absolute; top:50%; height:256px; margin-top:-128px; left: 50%; width: 750px; margin-left: -375px;">
          <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="750" height="256" id="steffi">
          <param name="allowScriptAccess" value="sameDomain">
          <param name="movie" value="steffi.swf">
          <param name="quality" value="high">
          <param name="bgcolor" value="#000000">
          <embed src="steffi.swf" quality="high" bgcolor="#000000" width="750" height="256" name="steffi" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
          </object>
          </div>
          </body>
          </html>

          1. Hi Steffi,

            äh, das scheint mir eine Seite zu sein, auf der ein flash-Film laufen soll. Den hast Du aber nicht mitgeschickt, ergo ich sehe gar nichts ;)

            <meta name="keywords" content="Homepage, Steffi">

            Nicht gerade sehr aussagekräftig ... ;)

            <meta http-equiv="pragma" content="no-cache">
            <meta http-equiv="expires" content="0">

            dein Inhalt scheint sich ständig zu ändern?

            <style type="text/css">

            ... wie wäre es mit einer CSS-Datei? & JS auch gleich ...

            <body id="hintergrund" style="margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px;">
            <div style="position:absolute; top:50%; height:256px;

            dort können dann alle styles hinein ...

            Grüße, Till

            1. Ja, muß ich mal beizeiten auslagern, die Styles. Naja, mit den Keywords und so, ich werd wohl nicht unter die ersten 1000 kommen, deswegen laß ichs lieber. Aber kann ich ja auch mal irgendwann vergrößern.

              Kommen wir nochmal zum Dokumenttype zurück. Meinst Du der Code ist so richtig für Transitional xhtml???

              1. Hi Steffi,

                Naja, mit den Keywords und so, ich werd wohl nicht unter die ersten 1000 kommen, deswegen laß ichs lieber. Aber kann ich ja auch mal irgendwann vergrößern.

                Dann laß Sie lieber ganz weg ...

                Kommen wir nochmal zum Dokumenttype zurück. Meinst Du der Code ist so richtig für Transitional xhtml???

                Das kannst Du ganz einfach selber ausprobieren. Bemühe einfach einen (x)html-Validator. Den findest Du z.B. hier:
                http://www.validome.org/ oder hier:
                http://validator.w3.org/

                Viel Spaß noch beim Coden! Till

                1. Funktioniert jetzt durch Zufall!

                  <?xml version="1.0" ?>
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">

                  Habe ich bei self/xhtml gefunden...

                  Da kann man mal sehen, selbst mein eigener Browser braucht eine Deklaration. :-)

                  Danke für die Validator-tips.

          2. So, mal schauen.

            <html>

            Also: hier fehlt ne Deklaration. Wenn du XHTML Strict verwenden willst (wozu ich rate), könnte die so lauten:

            <?xml version="1.0" encoding="UTF-8"?>
            <!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">

            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

            Ist zwar nicht falsch (bis auf den fehlenden Schrägstrich), aber du musst dir sicher sein, dass im meta-Tag, in der XML-Deklaration und im HTTP-Header das Gleiche steht. Zwar ist eindeutig definiert, dass die HTTP-Header-Deklaration Vorrang hat, aber irgendein Browser hält sich nicht daran. Empfohlen ist für den MIME-Typ application/xhtml+xml, aber text/html ist auch erlaubt. Wenn du es ganz korrekt machen willst, kannst du Content Negotiation verwenden, d.h. du weist den Webserver an, Klienten, die application/xhtml+xml akzeptieren, das Dokument als application/xhtml+xml zu senden und dem anderen als text/html. Ähnliches gilt für die Kodierung: Die muss überall, wo sie angegeben wird, übereinstimmen und natürlich muss der Text auch entsprechend kodiert sein.

            <meta name="robots" content="index,follow">
            <meta name="description" content="Mein Online-Film">
            <meta name="keywords" content="Homepage, Steffi">
            <meta http-equiv="pragma" content="no-cache">
            <meta http-equiv="expires" content="0">

            Da fehlen auch überall die Schrägstriche am Ende. Tags müssen in XHTML immer geschlossen werden: <meta/>.

            <!--

            Das könnte kritisch werden, denn dadurch wird der Inhalt zu einem normalen Kommentar, der ignoriert werden muss, wenn der Klient sich standardgemäß verhält. Besser: <[CDATA[. Noch besser: Auslagern in eine externe Datei.

            document.write("<style type='text/css'>#hintergrund {visibility:hidden;}</style>");

            < und > müssen in XHTML escaped werden, wenn sie nicht in einem CDATA-Block stehen.

            <body id="hintergrund" style="margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px;">
            <div style="position:absolute; top:50%; height:256px; margin-top:-128px; left: 50%; width: 750px; margin-left: -375px;">

            Das ist zwar auch nicht falsch, es empfiehlt sich aber eine Auslagerung in externe CSS-Dateien, um Struktur und Darstellung besser zu trennen.

            <embed src="steffi.swf" quality="high" bgcolor="#000000" width="750" height="256" name="steffi" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

            So weit ich weiß, gehört embed nicht zum Standard, aber object müsste in modernen Browsern auch funktionieren.

            Wenn du die Fehler ausgebessert hast, kannst du die Seite validieren. Der W3-Validator wird von manchen Leuten nicht empfohlen, da er wohl keinen echten XML-Parser verwendet und das Dokument nicht gegen ein Schema, sondern gegen eine Dokumenttypdefinition validiert. Besser ist für XHTML ein Schema-Validator.

            Gruß
            Philipp

  3. Hi,

    Welche Dokumenttyp-Deklaration muß ich verwenden???

    die, die zu dem von Dir verwendeten Strukturcode passt.

    Ich tippe mal auf: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" hab aber keinen blassen Schimmer.

    Wenn Du vergehendes[1] XHTML schreibst, ist das adäquat.

    Kann mir einer weiterhelfen? Sind die Deklarationen überhaupt noch
    sinnvoll bzw. ist es zwingend erforderlich zu deklarieren?

    Je nach Philosophie ist es zwingend erforderlich - technisch ist es das nicht. Sinnvoll aber ist es auf jeden Fall. Anders sieht es bei der XML-Deklaration aus, die (je nach DOCTYPE und anderen Bedingungen) zwingend benötigt sein kann, jedoch i.d.R. eher hinderlich ist.

    Ich hab nämlich folgendes Problem: Ich hab eine ganz einfache
    html-Seite mit einigen meta-angaben, einen mit CSS positionierten Hintergrund der mit JavaScript einfadet und im Vordergrund einen kleinen Flashfilm, that's all. Bei der jetzigen Deklaration fadet der
    Hintergrund nicht ein. Wenn ich die Deklaration weglasse läuft alles einwandfrei.

    Das ist ein sehr starkes Indiz dafür, dass Dein Code entweder defekt ist, oder nicht dem entspricht, was Du aussagen möchtest. Durch das Weglassen des DOCTYPE schalten die meisten Browser in den Quirks-Mode, also in den "offenbar hatte der Autor keine Ahnung"-Modus, und korrigieren bzw. - je nach Browser - machen einige bis sehr viele Fehler.

    Die Frage ist ob bei ganz kleinen Seiten die Deklaration überhaupt Sinn macht

    Verlasse das Haus niemals ohne.

    und die andere Frage wäre wieso es bei der aktuellen Deklaration Schwierigkeiten gibt wo doch die Seite ganz klein ist.

    Es kommt nicht auf die Größe an, sondern auf die Technik.

    Cheatah

    [1] Sinngemäße Übersetzung von "transitional".

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes