Grundaufbau einer modernen Page

  • Moin,


    Ich bin Anfänger und bitte um Ratschlag.


    Ich habe mir ca. 10 Stunden Infovideos und Tutorials bei Youtube angeschaut, ein wenig probiert und gemacht und getan in Sachen Html/css.


    Habe diverse Grundstrukturen ausprobiert, jedoch nun zum Entschluss gekommen Ich frag besser mal nach (bevor Ich in eine falsche Richtung renne...).


    Ich stehe vor folgendem grundsätzlichem Problem:


    Eine moderne Page erstellen:


    1. Header mit Navigation


    2. einen dynamischen, aus dem header/navigation geladenen Inhalt


    3. einem Footer



    Wie würdet Ihr nach modernen Vorgaben vorgehen?


    Wie würdet Ihr an meiner Stelle anfangen?


    Gruß Thorsten

  • Infovideos und Tutorials haben häufig den Nachteil, dass veraltete Techniken präsentiert werden, vor allem Layout mit Float. Ich empfehle, dich gleich mit Flexlayout vertraut zu machen, das ist etwas, das auf der Höhe der Zeit ist. Grundbegriffe hier bei HTML-Seminar:

    https://www.html-seminar.de/css-flexbox.htm

    Weitgehend vollständige Übersicht:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Erweiterte Layout-Möglichkeiten mit margin:

    https://stackoverflow.com/ques…perties/33856609#33856609


    Zitat

    einen dynamischen, aus dem header/navigation geladenen Inhalt

    Kann man machen, wirft aber einige Probleme auf, siehe hier:

    https://www.homepage-forum.de/…ntent-by-ajax-jquery-load


    Alternative: Für jede Rubrik eine eigene Datei und die Teile, die überall gleich sind, mit PHP-Include einziehen.

  • 2. einen dynamischen, aus dem header/navigation geladenen Inhalt

    Was meinst du den damit genau ?

    Aber ansonsten soltest du mit den html5 Elementen und so arbeiten.

    Da gibst ja schon schöne sachen wie .

    <header>

    <nav>

    <aside>

    <article>

    <footer>

    So ungefähr.

    Ich bin ja selber gerade am bauen.Mehr gesagt noch am rumbauen.

    Deswegen mache es gleich richtig und überlege dir wie deine Seite aussehen soll und so weiter.

    Meine Startseite habe ich bestimmt schon 30 mal geändert und umgebaut und bin immer noch nicht zufrieden und fertig.

    Wenn man von anfang an weiß was man will ersparst du dir viel arbeit.


    Dann solte man Javascripte und CSS Datein immer in einer Extra Datei packen weil es einfacher ist und übersichtlicher.

    Gerade wenn du später noch was ändern willst wie ich muß man dann ewig suchen . Deswegen auf inline styls verzichten.

    Ja ansonsten würde ich sagen leg los ,und fals es probleme gibt dann meld dich einfach hier

  • Hey!


    Danke für eure Antworten.

    -----------------------------------------------------------------------------------------------------------------------------------------------------

    Mein aktueller Versuch sieht so aus:


    <!DOCTYPE html>

    <html>

    <head>

    <title>...</title>

    <meta charset="utf-8"/>

    <meta name="description" content="..."/>

    <meta name="Keywords" content="..."/>

    <link rel="stylesheet" type="text/css" href="style.css"/>

    <script type="text/javascript" src="javascript.js"></script>

    </head>

    <body>

    <div id="header">

    <div id="logo"><img src="img\logo.header.jpg"/></div>

    <div id="res_btn" onclick="show_hide_nav('navbar')" ><img src="img\button.png"/></div>

    <ul id="navbar">

    <li><a href="willkommen.html" target="mainframe">Home</a></li>

    <li><a href="1.html" target="mainframe">1</a></li>

    <li><a href="2.html" target="mainframe">2</a></li>

    <li><a href="3" target="mainframe">3</a></li>

    <li><a href="4.html" target="mainframe">4</a></li>

    <li><a href="impressum.html" target="mainframe">Impressum</a></li>

    </ul>

    </div>


    <div id="mainframe"><iframe name="mainframe" src="index.html"></iframe></div> // DAS KLAPPT SO LEIDER NICHT ...



    <div id="footer"></div>



    </body>

    </html>


    -----------------------------------------------------------------------------------------------------------------------------------------------------


    Wie gesagt, Ich bin leider Neuling in html/css.


    Hat jemand einen für mich nachvollziehbaren Lösungsansatz?


    Wäre Nice !!!!!!!!!!


    Gruß!

  • Meine Empfehlungen:

    Semantische Tags verwenden, also <header> statt <div id="header">, <nav> statt <div id="navbar">, so wie von Basti empfohlen.

    Auf iFrame verzichten, er hat den Nachteil, dass sich die Größe zunächst nicht an den Inhalt anpasst und zusätzliche Tricks mit Javascript erfordert.

    Dann für jede Seite eine einzelne Datei anlegen und die Teile, die auf allen Seiten gleich sind, mit PHP-include einziehen. Also


    index.php:


    header.html:

    1.php:

    usw. für den Footer und die weiteren Seiten.

    Das wäre mein Vorschlag als Ausgangspunkt. Natürlich gibt es andere Möglichkeiten, wie nur eine Seite zu haben und den Main-Content mit Javascript einzuziehen.

  • Super, lieben Dank für deine Hilfe.


    Ich habe eine Verständnisfrage zum Seitenaufbau in diesem Fall:

    gelten für die per php includierten Informationen die im Head vordefinierten Metaangaben?


    Gruß!

  • Ja. Der Effekt des Includierens ist, als ob Du den Text von z. B. header.html kopierst (in die Zwischenablage) und auf der betr. Seite (z. B. index.php) einfügst. Wenn der Text beim Browser ankommt, ist vom include nichts mehr zu sehen, auch nicht für eine Suchmaschine, die den Text analysiert, und das Javascript und CSS aus dem head-Tag wirkt ebenfalls auf die includierten Teile.

  • Okay, php ist halt Neuland für mich... Ich habe noch eine Frage, da es zunächst mal auf Anhieb nicht klappt:

    Benötige Ich aufgrund von php weitere Ordner wie "templates" etc? Falls ja, wie ist der Aufbau notwendig.


    Ach so:

    Sollten der header/footer als ".html" oder als ".php" includiert werden?


    Gruß!

  • Naja, Du brauchst noch einen Apache Webserver. Wurde hier noch nicht besprochen.

  • Moin!


    erst mal danke das Ihr einem Anfänger wie mir Tipps gebt, echt super!


    Ich habe gestern Abend versucht, per XAMPP einen Apache-Server auf meinem Windows10 System zu starten. Das hat ebenfalls erstmal auf Anhieb nicht geklappt.


    XAMPP meldet:


    09:20:18 [Apache] Problem festgestellt!

    09:20:18 [Apache] Port 80 in Benutzung von "Unable to open process" (PID 4)!

    09:20:18 [Apache] Apache wird NICHT starten, wenn die konfigurierten Ports nicht frei sind!

    09:20:18 [Apache] Die blockierende Anwendung muss deinstalliert/deaktiviert/rekonfiguriert werden oder

    09:20:18 [Apache] Apache und das Control Panel müssen auf einen anderen Port zu lauschen


    dann folgt ( logischerweise denke Ich... )


    09:20:21 [Apache] Fehler: Apache wurde unerwartet beendet

    09:20:21 [Apache] Ursache könnte ein geblockter Port, fehlende Abhängigkeiten,

    09:20:21 [Apache] fehlende Berechtigungen, ein Absturz oder ein Abbruch einer anderen Methode sein.

    09:20:21 [Apache] Drücke den Logs Button um error logs zu sehen und prüfe

    09:20:21 [Apache] im Windows Event Viewer für weitere Hinweise

    09:20:21 [Apache] Wenn du weitere Hilfe benötigst, kopiere den kompletten Inhalt des Log Fensters

    09:20:21 [Apache] und füge ihn als Ergänzung in einem neuen Forum Eintrag hinzu.


    Ihr versteht mich sicher, Ich gebe nicht einfach auf verdacht irgendwelche Ports am Router/Firewall frei, deshalb möchte Ich mich kurz absichern:

    Lösungweg via XAMPP:

    - Port 80 am Router / Firewall für XAMPP freigeben.

    Ist das korrekt?


    Alternativ gibt es vielleicht eine einfacherere Lösung, einen PHP Server zwecks Seitenbau auf einem Windows10 Rechner zu installieren?


    Danke für eure Hilfe,


    Gruß T.

  • Okay, Ich habe die IP und den Port für den Server angeglichen. Der Server startet nun laut XAMPP.


    Leider sehe Ich nun, wenn Ich die .php Seite lade, noch immer keine php-include-Abschnitte.


    Erbitte nochmal Hilfe, da ich denke es handelt sich um einen trivialen Fehler wie:

    - Darf Ich die Seite nun noch immer nicht regulär mit dem Firefox starten? Muss Ich die Seite anders öffnen?


    Danke für eure Hilfe und Gruß


    Thorsten

  • Hey mal wieder,


    dank euch bin Ich ein ganzes Stück weiter, super!


    Jetzt kriege Ich keine style.css auf die includes angewandt. Kann mir jemand sagen warum?


    Ich habe das Beispiel so simpel wie möglich gehalten...


    Index.php:


    <!DOCTYPE html>

    <html>


    <head>

    <title>PHP-Include test</title>

    <link rel="stylesheet" type="text/css" href="style.css"/>

    </head>


    <body>


    <?php include("header.php"); ?>


    <main>

    Test

    </main>


    <?php include("footer.php"); ?>


    </body>


    </html>



    Header.php :


    <h1> test header </h1>


    Footer.php :


    <h2> test footer </h2>


    style.css :


    h1 {

    font-weight: bold;

    }

    h2 {

    font-weight: lighter;

    }


    Da steckt ein sehr dummer Anfängerfehler drin?


    Falls ja, sorry .... !!!!


    Gruß T!

  • Okay, nice, das klappt.


    Echt cool das Ihr mir helft !!!


    Javascript würde Ich gerne auch noch verstehen, deshalb:


    Jetzt noch ein Beispiel mit Javascript, der Befehl klappt nicht, warum ist das so?



    Index.php

    <!DOCTYPE html>
    <html>
    <head>

    <title>PHP-Include test</title>

    <link rel="stylesheet" type="text/css" href="style.css"/>

    <script type="text/javascript" src="javascript.js"></script>


    </head>


    <body>


    <?php include("header.php"); ?>


    <main id="main">

    Test

    </main>


    <?php include("footer.php"); ?>


    </body>

    </html>




    header.php



    <h1> test header </h1>




    footer.php



    <h2> test footer.php </h2>




    style.css



    h1 {

    font-weight: bold;


    }


    h2 {

    font-weight: lighter;


    }




    javascript.js



    <script type="text/javascript">


    document.getElementById("main").style.color = "#ff0000";


    </script>





    Nach meinem aktuellen (Anfängerverständnis) habe Ich alles korrekt gelöst.


    Hat jemand eine Idee wo der Fehler ist?



    Gruß Thorsten

  • eigentlich macht man das nicht.

    Code
    1. <main id="main">

    tagname und id den gleichen namen zu geben.

    Eigentlich müsste dein Code trotzdem gehen.Aber versuch mal so.

    Code
    1. <main id="main1">test</main>
    2. <script>
    3. document.getElementById('main1').style.color="red";
    4. </script>

    oder

    Code
    1. <main id="main1">test</main>
    2. <script>
    3. document.getElementsByTagName('main')[0].style.color="red";
    4. </script>
  • Variante 1 geht, vielen Dank!


    Habt Ihr vielleicht dennoch eine Idee, warum meine Variante nicht geht?


    Als Anfänger finde Ich es vielleicht dennoch elleganter, die Javabefehle nicht direkt in jeder .php aus der nav stehen zu haben, sonder outgesourct in einer javascript.js stehen zu haben.


    Erkennt jemand meinen Fehler?


    Gruß!