html ->xhtml w3c strict..

Status
Nicht offen für weitere Antworten.
M

mita1982

Erfahrenes Mitglied
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.
 
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.
 
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: 
<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>
 
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:.
 
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?
 
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:.
 
@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
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück