Ankündigung

Einklappen
Keine Ankündigung bisher.

Neue HTML5-Vorlage meine-erste-homepage.com

Einklappen

Google Responsive Ad

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Neue HTML5-Vorlage meine-erste-homepage.com

    Hallo,

    nach langer Zeit mal wieder was neues für meine-erste-homepage.com.

    Ich habe ein wenig an der neuen HTML5-Vorlage für meine-erste-homepage.com gebastelt.

    Hier der erste Entwurf:

    http://www.meine-erste-homepage.com/...lage/index.php

    Ich freue mich über Kommentare, auch wenn es Fehler in der Vorlage betrifft ;-)

    Die Seite sollte auf Smartphone, Tablet und Desktop-PC funktionieren...
    Nach den Korrekturen will ich die Vorlage auf meine-erste-homepage.com als neue Basisvorlage im (noch zu erstellenden) HTML5-Kurs nutzen!

    MfG Karl
    Zuletzt geändert von admin; 23.09.2014, 20:06. Grund: URL aktualisiert

  • #2
    AW: Neue HTML5-Vorlage meine-erste-homepage.com

    Hi!

    Ich würde dem img statt "width:100%" ein "max-width:100%" geben, damit es nicht größer wird, als es eigentlich ist.

    Die Navigation als Liste umsetzen, vielleicht mit dem nav-Tag (und statt dem sidebar-Div evtl. ein Aside-Tag, entsprechend die html5-Tags footer und header).

    Das wär's auf den ersten Blick

    Kommentar


    • #3
      AW: Neue HTML5-Vorlage meine-erste-homepage.com

      Hi admin,
      du kannst auch die neuen HTML5-Elemente verwenden. Wie z.B. <nav> <header> und <footer>.

      Dies ist wirkt sich positiv bei den Suchdiensten aus und hilft bei der Strukturierung.

      LG

      Localfun
      Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
      Albert Einstein

      Kommentar


      • #4
        AW: Neue HTML5-Vorlage meine-erste-homepage.com

        Hallo,

        ich habe alles umgesetzt und noch einige kleine Features eingebaut. Hier die aktuelle Version: http://www.meine-erste-homepage.com/...lage/index.php

        MfG Karl

        Kommentar


        • #5
          AW: Neue HTML5-Vorlage meine-erste-homepage.com

          Hi,
          der Quelltext ist aber immer noch mit einigen unnötigen DIVs versetzt. Du kannst header, nav, ul und footer doch direkt formatieren. Die meisten DIVs gruppieren hier nichts und einige sind zur Formatierung entbehrlich.

          Bei den IDs würde ich vorausschauend überlegen, ob deren Formatierungen nicht mehrfach vorkommen können und ggf. Klassen vergeben.
          Bzw. statt z.B.
          HTML-Code:
          <footer>
          <div id="footer">&copy; Max Mustermann</div>
          </footer>
          sollte es auch
          HTML-Code:
          <footer>&copy; Max Mustermann</footer>
          tun und im CSS dann footer ohne Raute.

          Abgesehen davon würde ich mir Angaben für Vorder- und Hintergrundfarbe wünschen.

          Gruß
          Ingo


          P.S.: hat jemand eigentlich eine Idee, wieso sich das CSS hier in der Webdeveloper Toolbar nicht editieren lässt?
          Ingo Webdesign

          Kommentar


          • #6
            AW: Neue HTML5-Vorlage meine-erste-homepage.com

            Zitat von Ingo Beitrag anzeigen
            Hi,
            der Quelltext ist aber immer noch mit einigen unnötigen DIVs versetzt. Du kannst header, nav, ul und footer doch direkt formatieren. Die meisten DIVs gruppieren hier nichts und einige sind zur Formatierung entbehrlich.

            Bei den IDs würde ich vorausschauend überlegen, ob deren Formatierungen nicht mehrfach vorkommen können und ggf. Klassen vergeben.
            Bzw. statt z.B.
            HTML-Code:
            <footer>
            <div id="footer">&copy; Max Mustermann</div>
            </footer>
            sollte es auch
            HTML-Code:
            <footer>&copy; Max Mustermann</footer>
            tun und im CSS dann footer ohne Raute.

            Abgesehen davon würde ich mir Angaben für Vorder- und Hintergrundfarbe wünschen.

            Gruß
            Ingo


            P.S.: hat jemand eigentlich eine Idee, wieso sich das CSS hier in der Webdeveloper Toolbar nicht editieren lässt?

            @Ingo

            Hi Ingo, es ist immer nocht ratsam ein Fallback zu haben und beides zu nutzen :-)
            Zuletzt geändert von Localfu; 15.09.2014, 23:32. Grund: schreibfehler
            Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
            Albert Einstein

            Kommentar


            • #7
              AW: Neue HTML5-Vorlage meine-erste-homepage.com

              Hallo Ingo, Hallo Localfu,

              erstmal vielen Dank für die Tipps.

              Da die neue Vorlage ja konsequent nach HTML5 erstellt werden soll, bin ich Ingo für den Hinweis dankbar. Mir ist dabei jetzt erst der Groschen gefallen, dass die DIVs wegkönnen... Ich habe die Seiten entsprechend überarbeitet... Der Code wird immer besser :-) und schlanker...

              Bin gespannt, ob ihr noch was findet...

              Link wie gehabt: http://www.meine-erste-homepage.com/...lage/index.php

              LG Karl

              Kommentar


              • #8
                AW: Neue HTML5-Vorlage meine-erste-homepage.com

                Die Navigation würde ich nicht in das main-Element packen. In dem Fall kannst du vielleicht einfach das section-Element gegen das main-Element tauschen. Die Stylesheets könntest du evtl in einem zusammenfassen und das meta-Tag "keywords" kann glaube ich raus (das "generator" auch)

                Edit: Und das Bild kann aus dem p-Element raus

                Kommentar


                • #9
                  AW: Neue HTML5-Vorlage meine-erste-homepage.com

                  Hallo Trüffelkrieger,

                  mühsam ernährt sich das Eichhörnchen...

                  Erledigt sind:
                  - Absatz (p) beim Bild entfernt
                  - Metaangabe Generator ist weg (weil nicht zwingend notwendig)
                  - Hilfs-Div-Container für die Breite des Inhalts eingebaut (anstatt <main>)
                  - <section> ersetzt durch <main> beim Hauptinhalt

                  Es bleiben in der Vorlage:
                  - Metatag keywords (finde ich immer noch wichtig - auch wenn Google & Co es eventuell ignorieren...
                  - 3 CSS-Dateien fürs bessere Verständnis und weil es auch nicht explizit untersagt ist - sprich es ist korrekt und relativ einfach und übersichtlich verständlich...

                  Schaut nochmal, ob ihr noch was findet und vor allem: sieht es auf allen (modernen) Browsern gut aus?

                  Vielen Dank für eure konstruktive Hilfe!

                  MfG Karl

                  Kommentar


                  • #10
                    AW: Neue HTML5-Vorlage meine-erste-homepage.com

                    Hi,
                    Text- und Hintergrundfarbe ist immer noch nicht definiert.

                    Gruß
                    Ingo
                    Ingo Webdesign

                    Kommentar


                    • #11
                      AW: Neue HTML5-Vorlage meine-erste-homepage.com

                      Hi,

                      ich weiß es nicht ganz genau, aber: Im Header und Footer-Element würde ich den Inhalt noch mal in ein weiteres Element packen. Also den Titel der Seite bspw in ein Überschriften-Element und den Footer-Inhalt in einen Absatz.

                      Sonst sieht das für mich so aus wie Inhalt, der direkt in einem div steht

                      Kommentar


                      • #12
                        AW: Neue HTML5-Vorlage meine-erste-homepage.com

                        @ingo: ich habe die Hintergrundfarbe und die Schriftfarbe im Stylesheet für "body" wie folgt festgelegt:

                        body {background-color:#ffffff;
                        color:#000000;
                        font-family:Verdana, Geneva, sans-serif;
                        margin:0px;}

                        Damit sollte doch auch für alle folgenden, untergeordneten Tags diese Formatierung gelten - falls ich einem Element keine anderen Werte direkt zugeordnet habe... oder habe ich es falsch verstanden...?

                        @Trüffelkrieger: header=h1 erl. + footer=p erl.

                        MfG Karl

                        Kommentar


                        • #13
                          AW: Neue HTML5-Vorlage meine-erste-homepage.com

                          Hi,
                          Zitat von admin Beitrag anzeigen
                          @ingo: ich habe die Hintergrundfarbe und die Schriftfarbe im Stylesheet für "body" wie folgt festgelegt:
                          davon sehe ich hier im Eingangslink weder im CSS noch im Browser nach Aktualisierung nichts - siehe Screenshot.

                          Gruß
                          Ingo
                          Angehängte Dateien
                          Ingo Webdesign

                          Kommentar


                          • #14
                            AW: Neue HTML5-Vorlage meine-erste-homepage.com

                            Hallo Ingo,

                            dass ist noch die alte Version... Hier geht es zur aktuellen: http://www.meine-erste-homepage.com/...lage/index.php und hier sollte alles stimmen :-)

                            MfG Karl

                            Kommentar


                            • #15
                              AW: Neue HTML5-Vorlage meine-erste-homepage.com

                              Hi,
                              Zitat von admin Beitrag anzeigen
                              dass ist noch die alte Version... Hier geht es zur aktuellen: http://www.meine-erste-homepage.com/...lage/index.php
                              hatte ich den Link verpasst?
                              Die Farben sind jetzt definiert. Unschön finde ich aber, dass der Rahmen durch das Menü geht. Ich wüsste das jetzt auch nicht zu beheben und das CSS lässt sich online über die Webdeveloper Toolbar ja ohnehin nicht editieren. Vielleicht lässt Du den Rahmen einfach weg?

                              Gruß
                              Ingo
                              Ingo Webdesign

                              Kommentar

                              Lädt...
                              X