Validation zeigt sämtliche Fehler.

[Hazeline]

Guten Tag,
Mein name ist Dennis und ich habe mich mal ans Schreiben einer Webseite gewagt.

Mein Problem ist jetzt das ich die html. Index Datei mal durch einen Validator geschickt habe und mir wurden sehr viele errors angezeigt.

Mene Frage ist ob das echt so schlecht geschrieben ist das man damit nichts anfangen kann??

Ps: ich Weiss nicht ob ihr die datei öffnen könnt. Bin gerade auf der Arbeit ansonsten muss ich das heute abend nochmal korrekt machen.

 

[Gelöschtes Mitglied 36401]

Die Validator-Fehler sind doch relativ eindeutig. Du hast bei sämlichen Bildern heigt und width eine px Angabe verpasst. Nimm das raus und mache das per CSS

 

[Hazeline]

Okay mehr ist das nicht? Ich habe gelesen das man inhaltlich wichtige Bilder über die doctype Datei einbinden soll. Aber sobald ich zuhause bin probiere ich das gleich aus

 

[Sailor]

.. kurz gesagt - grotten schlecht! Aber nicht so schlecht, dass man nichts daraus kann!
1. Du benutzt Elemente, die in HTML 5 nicht gerne gesehen werden - und die dann auch noch falsch!
height und width in sollten vermieden werden und stattdessen als style eingegeben werden - also so
<img style="width: 330px; height: 150px;" src="blabla.jpg">
statt
<img src="blabla.jpg" width="330" height="150">
und wenn du das schon so machst, dann nur width="330" und nicht width="330px"
2. Allen deinen Bildern fehlt ein alt="irgendwas" Attribut - das ist Pflicht!
3. Man benutzt ein <h1> nur einmal auf der Seite - als Hauptüberschrift. Alle weiteren Überschriften dann entsprechend mit <h2> bis <h6>
4. Hyperlinks aber immer die Form <a href="blabla" ...>irgendwas</a>
aber niemals <a href="blabla" .../>irgendwas.
Deine Facebook- und Twitterlinks sind aber genau so falsch gemacht.

Mach die 4 Dinge oben mal richtig, dann meckert der Validator auch nicht mehr.

 

[Tronjer]

height und width in sollten vermieden werden und stattdessen als style eingegeben werden - also so
<img style="width: 330px; height: 150px;" src="blabla.jpg">
statt
<img src="blabla.jpg" width="330" height="150">

Das ist falsch.

Breite und Höhe sollten als Img-Attribute übergeben werden, weil das den Seitenaufbau beschleunigt. Anschließend können sie theoretisch mittels CSS überschrieben werden, aber niemals per Inline-Style. Der hat einen CSS-Value von 1000 und würde sich nur noch durch !important überschreiben lassen.

 

[Sailor]

@Tronjer
Hat es da eine Änderung/Anpassung an den HTML 5 Specs gegeben :(?
Ist zwar jetzt schon ein paar Tage her, aber mir wurde vom Validator auf w3.org die width und height Attribute im <img> als Warnung und dem Hinweis 'use CSS instead' angezeigt.

 

[Hazeline]

.. kurz gesagt - grotten schlecht! Aber nicht so schlecht, dass man nichts daraus kann!
1. Du benutzt Elemente, die in HTML 5 nicht gerne gesehen werden - und die dann auch noch falsch!
height und width in sollten vermieden werden und stattdessen als style eingegeben werden - also so
<img style="width: 330px; height: 150px;" src="blabla.jpg">
statt
<img src="blabla.jpg" width="330" height="150">
und wenn du das schon so machst, dann nur width="330" und nicht width="330px"
2. Allen deinen Bildern fehlt ein alt="irgendwas" Attribut - das ist Pflicht!
3. Man benutzt ein <h1> nur einmal auf der Seite - als Hauptüberschrift. Alle weiteren Überschriften dann entsprechend mit <h2> bis <h6>
4. Hyperlinks aber immer die Form <a href="blabla" ...>irgendwas</a>
aber niemals <a href="blabla" .../>irgendwas.
Deine Facebook- und Twitterlinks sind aber genau so falsch gemacht.

Mach die 4 Dinge oben mal richtig, dann meckert der Validator auch nicht mehr.

Hart aber fair hab mittwoch das erste mal so etwas gemacht gemacht dafür ist Grotten schlecht doch gar nicht mal so gut D

 

[Hazeline]

Dann bedanke ich mich erst einmal. Sobald ich zu Hause bin ändere ich meine Fehler und lass es dann noch mal durch einen Validator sausen.

 

[Tronjer]

@Tronjer
Hat es da eine Änderung/Anpassung an den HTML 5 Specs gegeben :(?
Ist zwar jetzt schon ein paar Tage her, aber mir wurde vom Validator auf w3.org die width und height Attribute im <img> als Warnung und dem Hinweis 'use CSS instead' angezeigt.

Bei Websites sind zwei Dinge zu berücksichtigen, User-Experience und Semantik. Bei letzterem hilft der Validator, aber im Sinne des ersteren kann man gelegentlich Regeln missachten, sofern man weiß, was man tut.

Als Beispiel sei hier ein Nachrichtenportal (SPON, etc.) genannt, das viel Text und Bilder laden muss. Wenn die Bildgrößen erst nachträglich per CSS zugewiesen würden, ergäben sich beim Seitenaufbau unschöne "Sprünge" und das lässt sich mit der User-Experience nicht vereinbaren.

 

[Hazeline]

So ich bin zuhause angekommen habe alles geändert von den px,h1 und dem schluss eines Hyperlinks /> habe ich alles geändert und in der tat habe ich absolut kein Error mehr. Vielen lieben danke für die schnelle Hilfe

 

[Sailor]

:)... es waren 2 Hyperlinks! Facebook und Twitter.. aber wenn die Fehler weg sind ist ja alles gut!

 

[Hazeline]

<a href="https://de-de.facebook.com/" target="facebook"><img src="iconsfooter/facebook-icon-png-731.png"
alt="Facebook"
class="logo"
width="30"
height="30"></a>/>

<a href="https://twitter.com/?lang=de" target="twitter"><img src="iconsfooter/Twitter-icon.png"
alt="Twitter"
class="logo"
width="30"
height="30"></a>

Habe das jetzt so gelöst. Funktioniert und er mekert nicht mehr. Oder ist das so auch falsch?

 

[Hazeline]

Ohne das zweite /> beim ersten link

 

[Hazeline]

Zumindest sieht es in der Vorschau richtig aus und die CSS datei hat laut Validator auch keine Fehler.

Mit freundlichen Grüßen

 

[Sailor]

Das hast du schon ganz richtig erkannt ... dieses '/>' muss noch weg!
Warum der Validator das nicht anmeckert, kann ich dir nicht sagen. Möglicherweise hält er das für 'Inhalt'...