# html ->xhtml w3c strict..



## mita1982 (3. Dezember 2007)

Hallo in der Schule haben wir ein Aufgabe. Und zwar sollen wir eine alte homepage die damals komplett mit tabellen gestalltet worden ist und rollover effekte(bildtausch) mit javascript realisiert worden ist, in XHTML umschreiben. Und zwar nach der DTD vom w3c die STRICT ist.

Mein Problem ist, wie ich jetzt die ganzen Atribute ändern kann? Gibt es im www irgendwo ne Tabelle die die neuen Atribute aufzählt und irgendwie mit den "alten" vergleicht? weil ich mit selfhtml grade mal herrausgefunden hab, dass hspace zB. mit white-space ersetzt wird.

Und in xhtml muss ja jedes tag geschlossen werden, muss ich dann das "img" atribut direkt schließen oder sollte ich danach nochmal </img> schreiben?

Hoffe ihr habt meine Fragen verstanden... 

Um zu validieren haben wir in UltraEdit ein Werkzeug bekommen.

Gerne kann ich auch den code hier reinschreiben.


----------



## lay-z-cow (3. Dezember 2007)

Hi,

also selfHTML ist da eigentlich schon hilfreich:
http://www.selfhtml.net/html/xhtml/unterschiede.htm

Das sollte im Grunde ausreichen.

Gruß

.:lay-z-cow:.


P.S.: Wenn ihr die Webseite technisch einen neueren Stand heben wollt, solltet ihr Dinosaurier-Atttribute wie hspace rauswerfen und stattdessen CSS verwenden.


----------



## mita1982 (3. Dezember 2007)

puh da muss ich erstmal mich da durcharbeiten. DANKE kann eigentlich der phase5 editor auch validieren?


----------



## Gumbo (3. Dezember 2007)

Hier hast du noch eine Gegenüberstellung der in der Transitional- und Strict-Variante erlaubten Elemente und Attribute (siehe DTD-Spalte). Lass dich dabei nicht davon beirren, dass diese nur für HTML 4.01 gelte, da XHTML 1.0 einfach nur HTML 4.01 mit XML-Konformität ist und die Listen somit für HTML 4.01 und XHTML 1.0 gelten.


----------



## mita1982 (3. Dezember 2007)

das ist übrigens der Code kann mir mal einer eine Herrangehensweise zeigen? Ich will das schon selber machen doch eine Starthilfe wäre nicht schlecht:


```
<html>
<head>
<title>Digital Equipment GmbH Deutschland</title>

<script type="text/javascript">

        welon = new Image();
        welon.src = "design/rollover_unternehmen.gif";
        weloff = new Image();
        weloff.src = "design/unternehmen.gif";

        newon = new Image();
        newon.src = "design/rollover_news.gif";
        newoff = new Image();
        newoff.src = "design/news.gif";

        proon = new Image();
        proon.src = "design/rollover_produkte.gif";
        prooff = new Image();
        prooff.src = "design/produkte.gif";

        srvon = new Image();
        srvon.src = "design/rollover_services.gif";
        srvoff = new Image();
        srvoff.src = "design/services.gif";

        allon = new Image();
        allon.src = "design/rollover_allianzen.gif";
        alloff = new Image();
        alloff.src = "design/allianzen.gif";

        preon = new Image();
        preon.src = "design/rollover_pressecenter.gif";
        preoff = new Image();
        preoff.src = "design/pressecenter.gif";

        pubon = new Image();
        pubon.src = "design/rollover_publikationen.gif";
        puboff = new Image();
        puboff.src = "design/publikationen.gif";

        eveon = new Image();
        eveon.src = "design/rollover_veranstaltungen.gif";
        eveoff = new Image();
        eveoff.src = "design/veranstaltungen.gif";

        jobon = new Image();
        jobon.src = "design/rollover_jobboerse.gif";
        joboff = new Image();
        joboff.src = "design/jobboerse.gif";

        hlpon = new Image();
        hlpon.src = "design/help_on.gif";
        hlpoff = new Image();
        hlpoff.src = "design/help.gif";

        seaon = new Image();
        seaon.src = "design/search_on.gif";
        seaoff = new Image();
        seaoff.src = "design/search.gif";

        fedon = new Image();
        fedon.src = "design/feedback_on.gif";
        fedoff = new Image();
        fedoff.src = "design/feedback.gif";


function rollon(imgName) {
        document[imgName].src = eval(imgName + "on.src");
        //document.getElementById(imgName).src = eval(imgName + "on.src");
}
function rolloff(imgName) {
        document[imgName].src = eval(imgName + "off.src");
        //document.getElementById(imgName).src = eval(imgName + "off.src");
}

</script>


</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<center>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="600" height="400" align="center">
<tr>
<td nowrap width="600" height="16" colspan="6" valign="bottom" bgcolor="#990033"><img src="design/horz-burgundy-frame-bar.gif" align="top" hspace=0 vspace=0 width=600 height=16 alt=""></td>
</tr>
<tr>
<td nowrap rowspan="12" width="16" height="368" valign="bottom" bgcolor="#990033">
<img src="design/vert-burgundy-frame-bar.gif" width="16" height="368" align="top" hspace=0 vspace=0 alt=""></td>
<td nowrap rowspan="12" height="368" width="20" valign="bottom"><img src="design/gap1.gif" width="20" hspace=0 vspace=0 height="1" alt=""></td>
<td nowrap width="548" height="50" valign="bottom" colspan="3" align="center">
<!--<img src="design/gap1.gif" width="180" hspace="0" height="1" alt="">-->
<img src="design/logo.gif" hspace="0" width="87" height="35" name="lgo" alt="DIGITAL logo">
<!--<img src="design/gap1.gif" hspace="0" width="281" height="1" alt="">--></td>
<td nowrap rowspan="12" width="16" height="368" valign="bottom" bgcolor="#990033">
<img src="design/vert-burgundy-frame-bar.gif" align="top"  hspace=0 vspace=0 width="16" height="368" alt=""></td>
</tr>
<tr>
<td nowrap width="378" height="36" valign="bottom"><nobr>
<a href="http://www.compaq.com/">
<img src="design/kilroy_compaq.gif" alt="Compaq - find out more" hspace="0" border="0" width="247" height="31" valign="bottom"></a>
<a href="other/ultra2000.html">
<img src="design/kilroy_hinote.gif" border="0" width="128" height="31" hspace="0" valign="bottom" alt="NT/Exchange - Fakten z&auml;hlen mehr als Worte!"></a>
</nobr></td>
<td nowrap width="170" height="36"  colspan="2"><img src="design/gap1.gif" hspace="0" width="170" height="1" alt=""></td>
</tr>
<tr>
<td nowrap width="378" height="25" align="right" valign="top" ><img src="design/gray-hline.gif" width="355" height="1" alt=""></td>
<td nowrap valign="top" align="left" rowspan="9" width="4" height="250"><img src="design/gray-vline.gif" width="1" height="218" alt="">
<img src="design/gap1.gif" align="top" width="3" height="1" alt=""></td>
<td nowrap width="166" height="25" valign="top">
<a href="other/unternehmen.html"  onmouseover="rollon('wel')" onmouseout="rolloff('wel')">
<img src="design/unternehmen.gif" border="0" width="165" height="25" name="wel" alt=""></a></td>
</tr>
<tr>
<td nowrap width="378" height="225" valign="top" rowspan="8">
<img src="design/homepage43.gif" alt="StorageWorks-Produkte jetzt in Compaq-Produktlinie" align="absmiddle" border="0" width="340" height="200">
</td>
<td nowrap width="166" height="25" valign="top">
<a href="other/news.html"  onmouseover="rollon('new')" onmouseout="rolloff('new')">
<img src="design/news.gif" border="0" width="165" height="25"  name="new" alt="News"></a></td>
</tr>
<tr>
<td nowrap width="166" height="25" valign="top">
<a href="other/produkte.html"  onmouseover="rollon('pro')" onmouseout="rolloff('pro')">
<img src="design/produkte.gif" border="0" name="pro" alt="Produkte"></a></td>
</tr>
<tr>
<td nowrap width="166" height="25" valign="top">
<a href="other/services.html" onmouseover="rollon('srv')" onmouseout="rolloff('srv')">
<img src="design/services.gif" border="0" width="165" height="25" name="srv" alt="Services"></a></td>
</tr>
<tr>
<td nowrap width="166" height="25" valign="top">
<a href="other/allianzen.html"   onmouseover="rollon('all')" onmouseout="rolloff('all')">
<img src="design/allianzen.gif" border="0" name="all" alt="Allianzen/Partner"></a></td>
</tr>
<tr>
<td nowrap width="166" height="25" valign="top">
<a href="other/pressecenter.html"   onmouseover="rollon('pre')" onmouseout="rolloff('pre')">
<img src="design/pressecenter.gif" border="0" width="165" height="25" name="pre" alt="Pressecenter"></a></td>
</tr>
<tr>
<td nowrap width="166" height="25" valign="top">
<a href="other/publikationen.html"  onmouseover="rollon('pub')" onmouseout="rolloff('pub')">
<img src="design/publikationen.gif" border="0" width="165" height="25" name="pub" alt="Publikationen"></a></td>
</tr>
<tr>
<td nowrap width="166" height="25" align="left" valign="top">
<a href="other/veranstaltungen.html"   onmouseover="rollon('eve')" onmouseout="rolloff('eve')">
<img src="design/veranstaltungen.gif" border="0" width="165" height="25" name="eve" alt="Veranstaltungen"></a></td>
</tr>
<tr>
<td nowrap width="166" height="50" valign="top">
<a href="other/jobboerse.html"  onmouseover="rollon('job')" onmouseout="rolloff('job')">
<img src="design/jobboerse.gif" border="0" name="job" alt="Jobb&ouml;rse"></a></td>
</tr>
<tr>
<td nowrap width="548" height="32" colspan="3" valign="top">
<img src="design/gap1.gif" width="30" height="1" alt="">
<a href="other/help.html" onmouseover="rollon('hlp')" onmouseout="rolloff('hlp')">
<img src="design/help.gif" border="0" width="60" height="16" name="hlp" alt="Help"></a>
<img src="design/gap1.gif" border="0" width="40" height="16">
<a href="other/search.html"  onmouseover="rollon('sea')" onmouseout="rolloff('sea')">
<img src="design/search.gif" border="0" width="60" height="16" name="sea" alt="Search"></a>
<img src="design/gap1.gif" border="0" width="50" height="16">
<a href="mailto:QualityCenter-GY@digital.com" onmouseover="rollon('fed')" onmouseout="rolloff('fed')">
<img src="design/feedback.gif" border="0" width="60" height="16" name="fed" alt="Feedback"></a>
<img src="design/gap1.gif" border="0" width="60" height="16"></td>
</tr>
<tr>
<td nowrap colspan="6" width="600" height="16"  bgcolor="#990033">
<img src="design/horz-burgundy-frame-bar.gif" align="top" width="600" height="16" alt=""></td>
</tr>
</table>
<br>
<p>
<br>
<center>
</center>
</body>
</html>
```


----------



## lay-z-cow (3. Dezember 2007)

Hi,

Erstmal würde ich den Code richtig einrücken.

Dann würde ich das Layout auf DIVs, Listen, eben sinnvollere HTML-Tags in Verbindung mit CSS umstellen, dann hast du besseren Überblick.

Dann den Inhalt in selbige sinnvoller Form übertragen.

Dann das JS irgendwie per Schleife abhandeln lassen.

Mir auf die Schulter klopfen, weil ich den Code um bestimmt 60% gekürtz habe. 

Erst dann überprüfen, ob auch alles XHTML konform ist, denn es wäre doch blöd das vor dem kürzen des Codes zu tun, oder? 

Gruß

.:lay-z-cow:.


----------



## mita1982 (3. Dezember 2007)

DIVs und CSS bekommen wir später heute haben wir ne Aufgabe bekommen eine andere Seite mit FRAMES machen. Wir fangen klein an:  tabellen, Frames, und später kommen dann DIVs und CSS plus AJAX...

Doch ich will erstmal diese Aufgabe lösen und zwar "einfach" nur xhtml konform machen... gibt es noch ne gute möglichkeit die dann zu validieren?


----------



## Gumbo (3. Dezember 2007)

Ist die Aufgabe daraus einfach nur ein gültiges XHTML-1.0-Strict-Dokument zu machen?


----------



## lay-z-cow (3. Dezember 2007)

Finde ich eine komische Einteilung... aber egal:
http://validator.w3.org/
Da gibst du einfach dein XHTML als Doctype an und dann sagt er dir, was ihm nicht passt 
Mithilfe der anderen Links sollte das so zu bewerkstelligen sein.

Gruß

.:lay-z-cow:.


----------



## mita1982 (3. Dezember 2007)

@Gumbo: Ja das ist die Aufgabe einfach nur xhtml 1 strict zu machen. doch ich versteh das nicht (HEUL...)

bgcolor und height sind unexpected atributes... 

wo finde ich den ersatz dafür


----------



## steff-b (5. Dezember 2007)

der Ersatz sind CSS
Aufgabe also nicht wirklich sinnvoll.

ein XHTML 1.0 strict DTD verlangt eine klare Trennung von Inhalt und Layout.
-> Inhalte ins html und Layout als Style

folgende Seite hilft dir vielleicht weiter um den Unterschied der DTDs und html zu xhtml zu verstehen: http://www.websitedev.de/xhtml/xhtml1/


----------

