Website Bewertung

[Efchen]

Habe einige Klassen hinzugefügt + Menü.

Eigentlich wollt ich noch ein zweites Menü, das später auf der linken Seite stehen soll.

Ohne <div> hätte ich schon einige Probleme: Den ersten Absatz kann ich ohne Probleme platzieren

*MMÄÄÄÄÄÄPPPP*
Positionieren? Hat das was mit Semantik zu tun? Häh?

aber den zweiten müsste in den ersten packen, und mit <br/> trennen, was ja nicht so schön ist.

Du denkst zu weit. Da sind wir doch noch gar nicht.

Du weisst wenn du Webdesign machen willst dann musst du zuerst ein eigenes CMS programmieren

???

 

[Silar]

Eigentlich wollt ich noch ein zweites Menü, das später auf der linken Seite stehen soll.

Das sollte das sein, links platziert wird das ja mit CSS.

*MMÄÄÄÄÄÄPPPP*
Positionieren? Hat das was mit Semantik zu tun? Häh?

Noch nichts, aber man muss sich ja Gedanken darüber machen. :)

 

[Efchen]

Das sollte das sein, links platziert wird das ja mit CSS.

Okay, dann passts. Ich hab nämlich drauf gewartet, dass Du Deine Klassen nicht semantisch benennst, sowas wie "left". Dann hätte ich Dich das Teil nämlich rechts anordnen lassen :-D

Noch nichts, aber man muss sich ja Gedanken darüber machen.

Aber noch nicht zu dieser Zeit. Du behinderst Dich selber, wie Du gemerkt hast. Du denkst über ungelegte Eier nach. Du grübelst über Dinge, die zu dem Zeitpunkt irrelevant sind. Und das Ergebnis ist dann mit großer Wahrscheinlichkeit nicht ganz im Sinne von HTML und die Probleme fangen an...

 

[Silar]

Efchen:
Also der Content mit HTML scheint ja jetzt soweit fertig zu sein. Inhalte wie Text könnte man da ja später noch ergänzen. Jetzt kommt das Design?

 

[Efchen]

Ja, das ist ein valider und semantisch sinnvoller HTML-Code.
Jetzt könntest Du Design+Layout machen.

Ich bin aber der Meinung, dass Du es noch nicht ganz verinnerlicht hast, weiß aber auch nicht mehr, was ich Dir noch anderes erzählen könnte.

 

[Silar]

Okay, Design werde ich später machen.
Eine Frage hätte ich noch zur Semantik: Angenommen ich möchte das <hr> breiter machen. Das kann ich natürlich auch in der HTML-Datei direkt. z.B (<hr style="width:50%;" />). Das würde ich z.B per CSS extern machen. Aber muss man das, wenn man die Datei semantisch machen möchte auslagern in die CSS, und die <hr> in eine KLasse stecken? Das wäre im Endeffekt deutlich mehr Arbeit als es in der HTML-Datei zu machen.

 

[Efchen]

Eine Frage hätte ich noch zur Semantik: Angenommen ich möchte das <hr> breiter machen.

Was hat das mit der Semantik zu tun? Nichts!

Das kann ich natürlich auch in der HTML-Datei direkt. z.B (<hr style="width:50%;" />).

Nein, "Trennung von Inhalt und Layout" bedeutet auch, dass man alles auslagert. Du wirst die Erfahrung machen, dass das alles dann natürlich viel einfacher ist!

Aber muss man das, wenn man die Datei semantisch machen möchte auslagern in die CSS, und die <hr> in eine KLasse stecken?

Nein, aus Sicht der Semantik ist das egal. Aber aus Sicht der "Trennung von Inhalt und Layout" würde ich niemals Inline-Styles verwenden.

Das wäre im Endeffekt deutlich mehr Arbeit als es in der HTML-Datei zu machen.

Aber wenn Du was dran ändern willst und der Inline-Style dann auf mehreren Seiten vorkommt, ist die Arbeit dann wieder größer. Etwas auslagern heißt am Anfang vielleicht einmal Mehrarbeit, aber danach ist der Aufwand immer gering. Die Ersparnis ist also immens. Immer.

 

[Silar]

Wow. Also erstmal großes Dankeschön an Efchen für Deine Mühe mir die Semantik näherzubringen. :) Ich bin verwundert. Gestern noch dachte ich ohne <div> wäre ein Layout nicht möglich, doch siehe da: Es geht! Der Quellcode ist viel schmaler und ansehnlicher. Gestern noch hätte ich den Quellcode noch auf das doppelte bringen können. :) Schade dass in keines der Bücher über HTML/CSS, welches ich gelesen habe etwas über das Design ohne <div> drinnsteht. Kann es btw sein, dass <div> genutzt wird, um z.B <h1> und <h2> zusammenzufassen, und per Attribut 'id' im CSS ein Design zuzuweisen? Wäre vielleicht das einzigst Nützliche, wofür man es gebrauchen könnte.

Hier die 'Übungssite'. CSS hinzugefügt.
Titel

 

[Die Zahl]

Hier die 'Übungssite'. CSS hinzugefügt.
Titel

Ausser <br /><br />, sieht das schon ganz gut aus...

Aber warum charset=us-ascii?

 

[Silar]

Ausser <br /><br />, sieht das schon ganz gut aus...

Ja, da hatte ich das Problem mit den <p>. Ich wollte einen Absatz drin haben, aber nicht zwei getrennte "ground's" haben.

Aber warum charset=us-ascii?

Hatte Scriptly automatisch generiert. Kann ich bei Bedarf ja ändern.

 

[Die Zahl]

Ja, da hatte ich das Problem mit den <p>. Ich wollte einen Absatz drin haben, aber nicht zwei getrennte "ground's" haben

Du kannst Klassen mehrfach benutzen. ID's sind einzigartig. Alternativ kannst du P generell ein margin von z.b. 1em geben für einen Absatzabstand.

Mfg

 

[Silar]

Ich meine eigentlich etwas anderes. Wenn ich die <br/>'s rausnehme, habe ich keinen Abstand mehr zwischen den beiden Absätzen, da es dann so aussehen würde:

     <p class="ground">
     Text 1

     Text 2
     </p>

Dort wäre die Folge, dass der Browser die eigentlichen Absätze zusammenlegt.

Mache ich das aber so:

     <p class="ground">
     Text 1
</p>
<p class="ground">
     Text 2
     </p>

Dann werden beide Textabschnitte zwar getrennt, aber es entsteht eine Lücke ohne background und border, weil das CSS da kein Einfluss mehr hat.

 

[Efchen]

Kann es btw sein, dass <div> genutzt wird, um z.B <h1> und <h2> zusammenzufassen, und per Attribut 'id' im CSS ein Design zuzuweisen?

<div> wird benutzt, um mehrere Elemente zu einer logischen Gruppe zusammenzufassen. Ob das ein <h1> und ein <h2> ist, oder mehrere <p> oder was auch immer.

Wenn ich die <br/>'s rausnehme, habe ich keinen Abstand mehr zwischen den beiden Absätzen, da es dann so aussehen würde

Du bist bei der Semantik. Entferne die <br>s, die haben da keine Existenzberechtigung! Du denkst schon wieder ans Aussehen. Raus mit denen und Lösung zwei eingesetzt. Lösung 1 ist natürlich falsch. So muss es sein:

     <p class="ground">
     Text 1
</p>
<p class="ground">
     Text 2
     </p>

Dann werden beide Textabschnitte zwar getrennt, aber es entsteht eine Lücke ohne background und border, weil das CSS da kein Einfluss mehr hat.

Das ist aber für die semantische Auszeichnung irrelevant. Nimm die <br> raus.
CSS hat mehr Einfluss, als Du glaubst und Du machst die Wahl des richtigen Tags schon wieder vom Aussehen abhängig.
Du bist einfach an einer Stelle, an der ein <div> sinnvoll ist, weil Du Deine Textabsätze gruppieren willst. Das ist ja auch der Grund, warum Du ursprünglich nur einen einzigen Absatz benutzt hast. Weil der Text für Dich eine logische Einheit darstellt - und sowas zeichnet man mit <div> aus!

<div class="ground">
  <p>Text 1</p>
  <p>Text 2</p>
</div>

Und dem div.ground kannst Du jetzt wunderbar Deinen Hintergrund zuweisen.

Abermals siehst Du, dass Du beim Auszeichnen in HTML nicht an das Aussehen denken darfst! Du musst das auch in Gedanken strikt trennen!

Und <div> ist selbstverständlich nicht böse. Genausowenig wie <table>. Aber man setzt jedes Tag eben immer nur da ein, wo es sinnvoll ist. Das ist hier für div der Fall.

 

[Silar]

Ah, gut. Das <div> hatte ich zwar in Gedanken, aber hatte nach einem anderen Weg gesucht das Prpblem zu umgehen. Mit <div> gehts jetzt natürlich. ;)

Gibt es eigentlich auch beim CSS Todsünden?

Aktualisiert: Titel

 

[Efchen]

Man sollte nicht krampfhaft versuchen, Webseiten ohne <div> und ohne <table> zu erstellen. Man muss nur begreifen, was "Semantik" bedeutet und dann kommt eigentlich alles von selber.

Ich weiß nicht, ob es bei CSS auch Todsünden gibt, ich denke mal, hier ist das ganze etwa entspannter, weil wenn man was falsch macht, sieht man das Ergebnis sofort auf dem Bildschirm. Bei HTML sehen Sehende das nicht sofort, wenn sie was falsch machen. Dazu müssten sie schon einen Client benutzen, der die Seite nicht visuell darstellt, sondern den HTML-Code interpretiert. Für einen Browser ist das HTML-Code sogar weitestgehend egal, weil es an sich nur darauf ankommt, ob es sich um Inline- oder Block-Elemente handelt.

Wenn ich in CSS etwas als Todsünde bezeichnen müsste, dann sind es absolute Positionierungen mit dem Ziel, Elemente der Seite pixelgenau im Viewport darzustellen, so wie das vielleicht jeder Anfänger von CSS zuerst glaubt. Auch ich dachte anfangs, dass absoloute Positionierung der eigentliche Durchbruch in CSS ist. Aber weit gefehlt. Ist natürlich Käse, da ja jeder Nutzer was anderes eingestellt haben kann - Schriftgröße, Viewport-Größe, Fonts, usw. usf.

Was den aktuellen Stand Deiner Seite angeht - da steht noch ein <img> irgendwo im Nichts. Eine Grafik ist leider auch nicht zu erkennen, so dass man bewerten könnte, wo das hingehört. Images mit Content werden per HTML (das ist ja Content) eingebunden, Images zur Zierde mit CSS (das ist ja Optik). Ist es ein Image mit Inhalt, kommt es vermutlich in <h1> oder <h2> oder in eine Gruppe aus den beiden Überschriften und dem Image. Ist es nur Zierde, wird es als Background-Image für eine der beiden Überschriften oder einer Gruppe draus angegeben.

Deine Einrückungen versteh ich nicht ganz, aber das ist ja eh nur eine Sache der eigenen Lesbarkeit.

 

[Silar]

Was den aktuellen Stand Deiner Seite angeht - da steht noch ein <img> irgendwo im Nichts. Eine Grafik ist leider auch nicht zu erkennen, so dass man bewerten könnte, wo das hingehört.

Die Grafik ist nur als Logo gedacht, welches man noch als Link platzieren könnte, und das die Grafik nicht zu erkennen ist, ist klar, weil da keine ist. Da ging es mir nur darum, dass da eine Grafik hinkönnte. Ich habe die Größe der Grafik pixelgenau festgelegt, und mit einem border versehen(Die entfernt man, wenn eine Grafike eingefügt wird).

Images mit Content werden per HTML (das ist ja Content) eingebunden, Images zur Zierde mit CSS (das ist ja Optik). Ist es ein Image mit Inhalt, kommt es vermutlich in <h1> oder <h2> oder in eine Gruppe aus den beiden Überschriften und dem Image. Ist es nur Zierde, wird es als Background-Image für eine der beiden Überschriften oder einer Gruppe draus angegeben.

Die Grafik soll ja zu keiner Überschrift gehören, weil sie mit dieser nichts zu tun hat. Und es als background-image in die Überschrift zu packen geht auch nicht, weil das Bild woanders ist, als bei den Überschriften, die weiter rechts sind.

 

[Efchen]

Wenn das Bild aber, so wie ich Dich jetzt verstehe, nur der Zierde dient, dann muss es als background-image eingebunden werden.
Wenn es jedoch zum Content gehört, ein Firmenlogo z.B., dann muss es trotzdem irgendwo hin:
[Invalid] Markup Validation of http://silartut.bplaced.net/ - W3C Markup Validator

 

[Silar]

Die Site ist wieder valide. Ich habe die Grafike einfach mal mit einem Link besetzt, und es in den <h1> Tag gestellt.

<h1>
<a href="/" class="header_image"><img src="#" class="header_image" height="85" width="120" title="Grafik der Site" alt="GRAFIK"/></a>
Eine &Uuml;bungsseite
</h1>

 

[Efchen]

Ein Fehler ist aber noch drin, wo Du mir womöglich antwortest, dass Du das ohne die echte Grafik nicht machen kannst:

Der Alternativtext taugt nichts. Da muss dann auf jeden Fall was rein, was dem Nutzer hilft, wenn er das anstelle eines Bildes angezeigt bekommt.

 

[Silar]

Der Alternativtext war eigentlich nur für mich selbst als Lernender von HTML gedacht. Nämlich das da eine Grafik hingehört. Würde ich dort eine reinstellen, wird der Text natürlich geändert. Beim Footer habe ich z.B auch nur FOOTER stehen anstatt Copyright etc.