[HTML&CSS] kleine, aber interessante "Testseite"

Wir sammeln alle Infos der Bonusepisode von Pokémon Karmesin und Purpur für euch!

Zu der Infoseite von „Die Mo-Mo-Manie“

    Hallihallo!
    Ich habe mit der Webseitenprogrammierung angefangen.
    Hier haben wir im Anhang eine kleine Webseite :D
    Öffnet einfach die HTML-Datei: "index.html" (wer will, der darf auch den Ordner "data", in dem alle wichtigen Dateien drin sind, öffnen :D )
    Vorschläge für Verbesserungen sind erwünscht!

    Ich hab mir das mal genauer angeschaut und möchte dir etwas Feedback geben :)


    Ein paar Fehler hast du drin:

    • In Zeile 3 ist das html-Tag nicht korrekt geschlossen (fehlendes > )
    • Paragraphen (p) dürfen nicht innerhalb von Ankern (a) sein (Z. 22, Z. 27). Wenn du den Text innerhalb eines Ankers mit CSS verändern möchtest, kannst du es am Besten direkt die Anker ansprechen (ggf. mit einer Klasse) oder das Inline-Element <span> verwenden

      HTML
      <a href="#">Ich bin ein <span>Link</span></a>


    • In Zeile 30 befinden sich leere Paragraphen. Wenn es dir da um Zeilenbrüche ging, solltest du dir mal <br> / <br /> oder die CSS-Eigenschaft "display: block" anschauen, je nach dem, was grad passender wäre


    Abgesehen davon noch ein paar Tipps:

    • Statt dieser ganzen Angaben zur HTML-Version etc. im Doctype und html-Tag benutze lieber HTML5, es ist der aktuelle Standard und da sind solche Angaben nicht mehr vorhanden:

      HTML
      <!DOCTYPE html><html><!-- [...] -->


      (Angabe der Sprache über das lang-Attribut im html-Tag ist aber natürlich möglich)

    • Es ist sehr unübersichtlich, wenn du alle Dateien in einen data-Ordner packst. Du kannst am Besten für css-Dateien und Bilder je einen eigenen Ordner (z.B. style und img) erstellen
    • Füge bei Bildern ein alt-Attribut ein, für den Fall, dass die Bilder nicht geladen werden sollten, wird stattdessen der angebene Text angezeigt

      HTML
      <img src="img/image.png" alt="Alternativer Text" />


    Aber für den Anfang ist der Quellcode per se recht gut, die Feinheiten und so kommen, wenn du erst einmal vertraut mit HTML, CSS etc. bist.

    @Marv
    Mach bestimmt noch heute (muss auf chrissicx.lima-city.de das ganze noch hochladen ;D)
    @Niernen
    zu den Fehlern:

    • ">" ergänzt
    • hat aber funktioniert... (geändert)
    • eigentlich ging es mir nur darum, dass die Smileys nicht vor dem Milza stehen

    die Tipps:

    • ich habe es im Tutorial so gesehen und habe mir das auch als Vorlage abgespeichert ;)
    • Es funktioniert und ich kenne mich aus.

    Im Anhang ist die neue Seite. (Habe noch das :ot: Bild entfernt (es war mal geplant, es einzusetzen...) und in der CSS

    CSS
    h2
{
    font-size: 18pt;
}


    entfernt(weil kein h2 mehr da war ^.^ ))
    die seite ist nun immer unter "www.cx-testseite.tk" verfügbar

    Tjo dann kann ich ja auch mal ein wenig Feedback geben.



    Den Seitentitel in Caps find ich nicht so schön, normale deutsche Rechtschreibung ist in der Regel immer besser. Ein Favicon würde ich auch begrüßen.
    Ansonsten stimmt die Farbkombination nicht so, versuch es mal mit Adobe Kuler um schöne Kombinationen zu finden. Ich würde dir aber nicht empfehlen mehr als 3 Farben zu wählen, für Anfänger ist das meistens noch zu schwer.


    Des Weiteren würed ich dir empfehlen mit padding ein wenig Abstand zwischen Text und Boxrand zu bringen.
    Wenn du in einer Box Überschriften wie h1 benutzt, benutze keinen Text der größer ist als die Schriftgröße des h1. Wenn du Text trotzdem hervorheben willst, dann mach ihn fett mit <strong> oder unterstreiche ihn.
    Willst du eine Überschrift für einen Paragraphen etc. nutzen, dann benutz <h2>, damit ist die Überschrift kleiner als die "Hauptüberschrift" dennoch hervorgehoben.
    Beim Thema Schriftgröße muss ich noch hinzufügen, dass du bei normalem Fließtext bei der Standardgröße bleiben solltest. Die Fonts sind nämlich auf diese Größe ausgelegt und sind im Zweifelsfall schlechter zu lesen wenn du deren Größe änderst.



    Wenn du weitere Boxen erstellst, sollte diesen ein spezifischer Nutzen zukommen. In übergroßer Schriftgröße zu fragen wie toll du bist, wäre es meiner Meinung nicht wert dafür extra einen Kasten an der Seite zu erstellen, aber das geschmackssache.
    Unter deinem Footer "Eine Seite von Christian Häußler alias chrissicx[Milza]" sollte nichts mehr kommen, schon garnicht ein Haufen zusammenhangsloser Bilder.



    Wenn du Bilder auf deiner Webseite benutzt, dann geh lieber sicher dass diese nicht rechtlich geschützt sind.
    Ich kann mir nämlich ziemlich gut vorstellen, dass du die Woltlab Smileys nicht so ohne weiteres nutzen darfst.



    Ich hoffe mal dass du dir die Tipps ein wenig zu Herzen nimmst,


    Marv