Probleme mit Validation Check

Webcharly · 16 März 2010

Hallo Community...

...ich sitze derzeit noch an der Entwicklung einer Homepage
und wollte nunmal meine Startseite mit dem The W3C Markup Validation Service
überprüfen lassen.

Das Ergebniss hat mich allerdings gewaltig verwirrt da er mir 51 Errors, 3 warning(s) anzeigt. Da ich allerdings dem Englischen leider nicht allzu maächtig bin brauche ich ein wenig Hilfe aber zunächstmal hier den Quelltext meiner Startseite. (Kein Link, Homepage ist Offline)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
<head>
<title>Tagespflege "4 Jahreszeiten"</title>
<link href="css/navi.css" type="text/css" rel="stylesheet" />
 
 
</head>
<body>
<!-- Seite -->
<div id="seite">
<!-- kopfbereich -->
<div id="kopfbereich"><p><a href="welcome.html" style=" text-decoration:none; color:white;">Tagespflege</a><br/><a href="welcome.html" style=" text-decoration:none; color:white;">" 4 Jahreszeiten "</a></p></div>
<div id="schatten"></div>
 
<!-- steuerung Links -->
<div id="steuerung">
<ul>
<div id="schatten2"></div>
<li><a href="welcome.html">Startseite</a></li>
<div id="schatten"></div>
<div id="schatten2"></div>
<li><a href="ueber_mich.html">Über mich</a></li>
<div id="schatten"></div>
<div id="schatten2"></div>
<li><a href="organisation.html">Organisation</a></li>
<div id="schatten"></div>
<div id="schatten2"></div>
<li><a href="impressum.html">Impressum</a></li>
<div id="schatten"></div>
<div id="schatten2"></div>
<li><a href="kontakt.html">Kontakt</a></li>
<div id="schatten"></div>
</ul>
</div>
 
<!-- Steuerung Rechts -->
<div id="steuerung2">
         <p>
         <div id="schatten2"></div>
         <ul>
         <li><a href="entscheidung.html">Warum für eine Tagesmutter entscheiden ?</a></li>
         <div id="schatten"></div>
         <div id="schatten2"></div>
         <li><a href="besondere.html">Besondere Angebote</a></li>
         <div id="schatten"></div>
         <div id="schatten2"></div>
         <li><a href="zuschuss.html">Zuschüsse zur Tagespflege</a></li>
         <div id="schatten"></div>
         <br/><hr><br/>
         <div id="schatten2"></div>
         <li><a href="waldmaus.html">Tagespflege "Waldmäuse"</a></li>
         <div id="schatten"></div>
         <div id="schatten2"></div>
         <li><a href="tagespflegeburo.html">Tagespflegebüro Uelzen</a></li>
         <div id="schatten"></div>
         </ul>
         </p>
</div>
<!-- inhalt -->
<div id="inhalt">
         <h1>Tagespflege "4 Jahreszeiten" in Uelzen</h1><hr><br/>
         <p>
         Die heutige Zeit macht es Eltern nicht immer leicht, Beruf und Kind und die wenige eigene Freizeit unter einen Hut zu bringen.<br/><br/>
         Es gibt zahlreiche Gründe, weshalb eine Betreuung durch eine Tagesmutter unumgänglich sein kann:
         </p>
         <p>
         <ul>
         <li>Aufnahme in den Kindergarten meist erst ab dem 2. Lebensjahr</li>
         <li>fehlende Kindergarten- oder Krippenplätze</li>
         <li>der Wunsch nach individueller Betreuung als Vorbereitung auf den Besuch eines Kindergartens</li>
         <li>wechselnde Arbeitszeiten</li>
         <li>möglichst frühzeitige gewollte oder notwendige Rückkehr ins Berufsleben</li>
         <li>eigene Freizeitgestaltung</li>
         ect.<br/><br/>
         Sehen Sie selbst, warum die <a href="entscheidung.html" title="Warum für eine Tagesmutter entscheiden ?">Entscheidung für eine Tagesmutter</a> auch ihre Vorteile haben kann!
         </ul>
         </p>
</div>
 
<div id="fussbereich">| &copy 2010 by Webmaster | <a href="welcome.html" target="_self">Startseite</a> |</div>
<div id="schatten"></div>
</div>
         <center><img src="bilder/tagespflege2.jpg" ></img></center>
         <center>Bisher waren <script language="JavaScript" type="text/javascript" src="[URL]http://www.onlex.de/_counter.php4?username=Webcharly"></script[/URL]> Besucher hier.</center>
</div>
</body>
</html>

Kann mir, einem HTML + CSS Neuling, bitte jemand dieses Ergebniss erklären ?

Anmerkung: Bitte seht darüber hinweg das ich einen fremden Counter verwende. ;)

Edit: Entschuldigung, ich habe leider zuspät gesehen das für dieses Problem bereits einen Thread gibt in dem ich das hätte posten sollen. Ich hoffe aber dennoch das Ihr mir vielleicht helfen könnt. DANKE!

LG

Efchen · 16 März 2010

Können wir nicht. Wie lauten die Fehler?

Syntaxfehler:
- Was ich auf Anhieb sehe: <div> darf nicht innerhalb von <ul> stehen, da darf nur <li> stehen. Auch kein unausgezeichneter Text.
- Die Angabe eines Charsets fehlt.
- <center> ist physische Inhaltsauszeichnung und muss weg. Zentrieren mit CSS.
- <img> ist ein inhaltsleeres Tag, hat also kein </img>. In XHTML werden inhaltsleere Tags so geschrieben: <img ... />
- In <script> gibts kein Attribut "language".

Semantische Fehler:
- <br> zur Erzeugung eines Abstands hat nichts in HTML verloren.
- Wieso brauchst Du nach einer Überschrift eine logische Trennung (<hr>)? Das macht keinen Sinn. Überschriften gehören eigentlich immer zu einem nachfolgenden Inhalt. Du willst vermutlich nur "border" in CSS für die Überschrift.
- <br><br> zur Erzeugung einer Leerzeile ist semantischer Unfug. Setze margin/padding per CSS.
- Der fussbereich ist als Gruppe ausgezeichnet, enthält aber nur Text. Richtige Auszeichnung wäre daher <p>.
- Fehlerhafte Semantik unterhalb des Fußbereichs.

Webcharly · 17 März 2010

Guten Morgen Efchen...

Efchen schrieb:
- Was ich auf Anhieb sehe: <div> darf nicht innerhalb von <ul> stehen, da darf nur <li> stehen. Auch kein unausgezeichneter Text.

Ich nehme mal an das Du damit auf diesen Bereich hier ansprichst.

Code:

<!-- steuerung Links -->
<div id="steuerung">
<ul>
<div id="schatten2"></div>
<li><a href="welcome.html">Startseite</a></li>
<div id="schatten"></div>
<div id="schatten2"></div>
<li><a href="ueber_mich.html">Über mich</a></li>
<div id="schatten"></div>
<div id="schatten2"></div>
<li><a href="organisation.html">Organisation</a></li>
<div id="schatten"></div>
<div id="schatten2"></div>
<li><a href="impressum.html">Impressum</a></li>
<div id="schatten"></div>
<div id="schatten2"></div>
<li><a href="kontakt.html">Kontakt</a></li>
<div id="schatten"></div>
</ul>
</div>

Die <div>´s die Du hier ansprichst wie z.b. "schatten" und "schatten2" sollen eine Schatten Grafik (die ich selbst erstellt habe), direkt über und unter eines Navigationsbuttons anzeigen die ich über CSS anzeigen lasse. Ich muß gestehen als HTML Neuling weiß ich keine bessere Lösung.

Efchen schrieb:
- <center> ist physische Inhaltsauszeichnung und muss weg. Zentrieren mit CSS.

Ok, sehe ich ein. Ich habe, so denke ich mal, mir es einfach "zu einfach" gemacht. Hat aber soweit, zu dem Zeitpunkt seinen Zweck erfüllt. Ich werde es aber dennoch ändern und in CSS machen.

Efchen schrieb:
- <img> ist ein inhaltsleeres Tag, hat also kein </img>. In XHTML werden inhaltsleere Tags so geschrieben: <img ... />

Ok, auch diesen Fehler sehe ich ein. Ich habe auch hier wieder zu sehr in HTML gedacht als in XHTML in dem nicht mal alle <tag>´s mit einem </tag> abgeschlossen werden. Ich denke mal so sehe die Rätsels Lösung aus:

Code:

<img src="bilder/tagespflege2.jpg" [COLOR=red]/>[/COLOR]

Efchen schrieb:
- In <script> gibts kein Attribut "language".

Ok, das sehe ich ein aber das der "Counter", der mit diesem Script in HTML eingefügt wird, ein externer ist und der Counter laut angabe des Betreibers so in HTML eingefügt werden soll, belasse ich es auch dabei. Ich denke, dies wäre zumindest empfehlenswert.
Natürlich gibt es die möglichkeit einen eigenen Counter mit JavaScript und/oder PHP zu schreiben aber ich werde mich mit JavaScript und/oder PHP erst beschäftigen, sobald ich HTML und CSS aus dem FF behersche. Alles andere wäre erstmal humbug. :)

Efchen schrieb:
- <br> zur Erzeugung eines Abstands hat nichts in HTML verloren.

Ich weiß leider als HTML Neuling keine Alternative als <br /> um in gewissen Bereichen einen einen gewollten Abstand zu schaffen als ständig mit <p> zu arbeiten.

Efchen schrieb:
- Wieso brauchst Du nach einer Überschrift eine logische Trennung (<hr>)? Das macht keinen Sinn. Überschriften gehören eigentlich immer zu einem nachfolgenden Inhalt. Du willst vermutlich nur "border" in CSS für die Überschrift.

Das liegt daran das ich <hr> als optisch schönere Trennline fand anstatt "border" in CSS zu verwenden. Ich weiß das ich in CSS die Überschriften Klassifizieren könnte und so auslegen das bei jeder Überschrift automatisch eine Trennlinie mit border gesetzt wird aber wie gesagt fand ich das mit <hr> optisch schöner.

Efchen schrieb:
- <br><br> zur Erzeugung einer Leerzeile ist semantischer Unfug. Setze margin/padding per CSS.

In dem Fall war für mich das <br><br> wieder einfacher als in CSS margin/padding zu verwenden das ich mit <br><br> es selbst handhaben konnte wo ich einen bestimmten abstand erzielen wollte. Ansonsten hätte ich dafür in CSS weitaus mehr Zeilen schreiben müssen. Ich denke, ich war mir einfach zu Faul dafür.

Efchen schrieb:
- Der fussbereich ist als Gruppe ausgezeichnet, enthält aber nur Text. Richtige Auszeichnung wäre daher <p>.

Ok, sehe ich ein. Wird geändert.

Efchen schrieb:
- Fehlerhafte Semantik unterhalb des Fußbereichs.

Auf was genau beziehst Du das. Meinst du das letzte </div> Tag ?

lg

Efchen · 17 März 2010

Webcharly schrieb:
Die <div>´s die Du hier ansprichst wie z.b. "schatten" und "schatten2" sollen eine Schatten Grafik ...

Das ist ja irrelevant. Es ist ein Fehler.

Ich muß gestehen als HTML Neuling weiß ich keine bessere Lösung.

Hat ja mit HTML primär auch gar nichts zu tun. Denn Layout und Design, also alles, was irgendwie mit dem Aussehen zu tun hat, macht man mit CSS.

Hat aber soweit, zu dem Zeitpunkt seinen Zweck erfüllt.

Ein verwirrter Client, wie z.B. Suchmaschinenrobots, ist sicher keine Zweckerfüllung. <center> dient in HTML keinem Zweck.

Code:
Ich denke mal so sehe die Rätsels Lösung aus:

Code:

<img src="bilder/tagespflege2.jpg" [COLOR=red]/>[/COLOR]

Nein. Das Pflichtattribut "alt" fehlt. Da kommt der Alternativtext rein, der angezeigt wird, wenn das Image nicht dargestellt wird (ob aus Fehlergründen, oder weil der Nutzer einen Text- oder Vorlesebrowser nutzt, ...).

Ok, das sehe ich ein aber das der "Counter", der mit diesem Script in HTML eingefügt wird, ein externer ist und der Counter laut angabe des Betreibers so in HTML eingefügt werden soll, belasse ich es auch dabei.

Du wolltest wissen, was Dein Code für Fehler aufweist. Sinn macht es nicht, falschen Code zu liefern, auch nicht, wenn das irgendjemand empfiehlt.

Ich denke, dies wäre zumindest empfehlenswert.

Definitiv nicht

ich werde mich mit JavaScript und/oder PHP erst beschäftigen, sobald ich HTML und CSS aus dem FF behersche. Alles andere wäre erstmal humbug.

Das sehe ich genauso :-)

Ich weiß leider als HTML Neuling keine Alternative als <br /> um in gewissen Bereichen einen einen gewollten Abstand zu schaffen als ständig mit <p> zu arbeiten.

In HTML schafft man keine Abstände. Alles, was mit dem Aussehen zu tun hat, wird über CSS geregelt. Vergiss es, das mit HTML machen zu wollen. Nichts ist falsch an <p>. Das definiert einen Textabsatz. Wenn Du mehrere Absätze hast, zeichnest Du diese mit mehreren <p>...</p> aus. Abstände stellst Du später mit CSS (margin/padding) ein.

Das liegt daran das ich <hr> als optisch schönere Trennline fand anstatt "border" in CSS zu verwenden.

Und schon wieder der Fehler, dass Du mit HTML die Optik einstellen willst. Dafür ist HTML nicht da! HTML definiert die Semantik. <hr> definiert eine logische Trennung, keine optische. Daher ist es an dieser Stelle vermutlich falsch. Verwende dafür border. Die kannst Du ja genauso aussehen lassen, wie hr bei Dir im Browser aussieht. <hr> wird vom Browser ja auch mittels CSS formatiert.

Ich weiß das ich in CSS die Überschriften Klassifizieren könnte und so auslegen das bei jeder Überschrift automatisch eine Trennlinie mit border gesetzt wird aber wie gesagt fand ich das mit <hr> optisch schöner.

Es ist aber falsch, wenn Du auch nur irgendein Tag verwendest, um damit die Optik zu steuern. Physische Inhaltsauszeichnung wird nicht mehr mit HTML gemacht, seit es CSS gibt.

In dem Fall war für mich das <br><br> wieder einfacher als in CSS margin/padding zu verwenden

Faulheit führt zu Fehlern.

Ansonsten hätte ich dafür in CSS weitaus mehr Zeilen schreiben müssen. Ich denke, ich war mir einfach zu Faul dafür.

In manchen Sprachen sind Sätze der selben Bedeutung länger als in anderen. Da schreibst Du aber auch in der selben Sprache weiter und switchst not to another language, nur weil Du weniger schreiben musst, oder?

Auf was genau beziehst Du das. Meinst du das letzte </div> Tag ?

Nein, ich meine die beiden <center> und deren Inhalte.

Webcharly · 17 März 2010

Also gut, aus deinem Kommentar entnehme ich folgendes Fazit das ich bewerkstelligen sollte das ich allerdings auch beherzigen sollte bzw. werde.

Ich muß mich mehr mit CSS beschäftigen :mrgreen:

Jedenfalls, vielen Dank für Deine spezifischen Antworten. Ich werde einfach nochmal alles überarbeiten.

lg

Efchen · 17 März 2010

Du musst Dich auch mehr mit HTML beschäftigen. CSS funktioniert nur, wenn Du HTML perfekt beherrschst. Aber ich sehe auch bei HTML noch Defizite.
Wenn Du aufgrund dieser Defizite ständig den HTML-Code ändern musst, kann es Dir passieren, dass Du daraufhin auch das Stylesheet anpassen musst. Und das wäre dann ja doppelte Arbeit. Die Basis aus HTML sollte valide und semantisch sinnvoll sein, bevor man mit CSS anfängt.

lowsaxonian · 17 März 2010

Webcharly schrieb:
...Da ich allerdings dem Englischen leider nicht allzu maächtig bin

Moin,

ich verwende immer diesen Validator. Englisch ist zwar nicht mein Problem, aber ich bin zu faul, immer in 2 Sprachen zu denken...

Efchen schrieb:
Faulheit führt zu Fehlern.

Das beziehe ich nicht auf meine obige Aussage ;-)

Grüsse aus NDS
low

Efchen · 17 März 2010

Wobei fremde Validatoren oftmals anders arbeiten und andere Fehler auswerfen. Der verlässlichste ist halt der aus dem Hause, wo die Standards festgelegt werden.

Und ich habe noch niemanden gesehen, der ohne grundlegende Englischkenntnisse mit Computersprachen (ich sage absichtlch nicht "Programmiersprachen") problemlos umgehen konnte. Da lobe ich mir die Zeiten von früher, wo es Computerspiele nicht auf deutsch gab und man durch Spielen Englisch gelernt hat :-)

Probleme mit Validation Check

Webcharly

Neues Mitglied

Efchen

Guest

Webcharly

Neues Mitglied

Efchen

Guest

Webcharly

Neues Mitglied

Efchen

Guest

lowsaxonian

Neues Mitglied

Efchen

Guest

Neueste Beiträge