HTML Master Element auf mehreren Seiten einbinden?

Ich bin gerade an meinem Portfolio, welches ich selbst über HTML "code".

Die basic Skills reichen mir dazu eigentlich und den Rest bekomme ich von Codepen, aber eine Frage habe ich, welche ich nicht im Netz beantwortet bekommen habe. Oder zumindest weiß ich nicht genau, nach was ich googeln soll.

Ich habe auf jeder Seite dasselbe Menü.
Muss ich das nun auf jeder Seite händisch einpflegen oder kann ich irgendwie einen HTML-Schnipsel mittels PHP von einer anderen Seite auslesen.

Daher ich habe z.B. ein Stück Code welches auf jeder meiner .html Seiten zu finden ist. Ändere ich diesen Codeschnipsel, wird er automatisch auf allen eingebundenen Seiten ebenfalls geändert. So eine Art "Mastertemplate". Ich hoffe ihr versteht, was ich meine.

Und das am besten mit mehreren Objekten. Z.B. Header, Footer und noch andere Elemente, die dann auf die Unterseiten kommen werden.

Da eine komplette Antwort zu dem Thema vermutlich zu komplex ist, gerne auch einfach ein Tutorial verlinken.

Danke!

3 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, SQL

13.01.2023, 03:35

An sich brauchst du nur den include-Ausdruck von PHP.

Ein Beispiel:

head.html:

<head>
  <title>Some title</title>
  <meta charset="utf-8">
</head>

index.php:

<!doctype html>
<?php include 'head.html' ?>
<body>
  <p>Some text</p>
</body>

Das Argument für die Expression beinhaltet den Pfad zu der Datei, die eingebunden werden soll.

Innerhalb eines PHP-Skripts kannst du mehrere Textschnipsel aus anderen Dateien so einbauen. Du musst lediglich darauf achten, dass das zusammengefügte Ergebnis einem validen HTML-Dokument entspricht.

Ebenso könntest du eine Template Engine (wie z.B. Mustache, Plates oder Twig) einsetzen und hierbei das Layout in verschiedene Templates / Partials auftrennen. Vorteilhaft an diesem Weg ist, dass du deine Templates sogar mit Platzhaltern bestücken und anschließend dynamisch mit Werten befüllen kannst.

NackterGerd

26.02.2023, 16:44

Muss ich das nun auf jeder Seite händisch einpflegen

Nein natürlich nicht

oder kann ich irgendwie einen HTML-Schnipsel mittels PHP von einer anderen Seite auslesen.

Nicht von einer anderen Seite einlesen sondern noch einfacher einfach einmal als PHP Datei erstellen und überein includen ohne extra einlesen

PWolff

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

12.01.2023, 21:08

https://www.google.com/search?q=php+datei+auslesen

HTML-Code ist kein Problem.

vgl.

https://www.php-einfach.de/php-tutorial/php-datei/

NackterGerd

26.02.2023, 16:45

Und warum so umständlich ?

PWolff

27.02.2023, 15:25

@NackterGerd

Du hast insofern natürlich recht, dass include etwas weniger Schreibarbeit bedeutet.

Doch wird anscheinend im Allgemeinen empfohlen, include nur für Seiten zu verwenden, die tatsächlich PHP-Code enthalten. (z. B. https://wiki.selfhtml.org/wiki/PHP/Tutorials/Templates/Dateien_mit_include_nachladen)

PWolff

12.01.2023, 21:11

Achte aber darauf, dass die eingebundene Datei einen korrekt geformten HTML-Abschnitt und weiter nichts enthält, sonst sind womöglich alle Seiten, die ausgeliefert werden, unbrauchbar

Ähnliche Beiträge

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

HTML Code zeitlich unterschiedliche PDF öffnen lassen?

Hallo,

ich probiere gerade einen HTML-Code zu erstellen, bei welchem um z.B. 24 Uhr bis 14 Uhr PDF-A geöffnet wird und von 24 Uhr bis 14 Uhr PDF-B. Ich habe dies auch schon geschafft, aber leider nur durch die Zeit des Gerätes welche die HTML Seite öffnet. Nun meine Frage: Kann ich es irgendwie schaffen, dass es unabhängig von der Gerätezeit, die PDF z.B. immer um 14 Uhr Berlin/Deutschland Zeit wechselt?
Vielen Dank im Voraus!

...zum Beitrag

Kann ich eine Datenbank von einer Webseite extrahieren?

Guten Tag,

ich würde gerne von der Website: "https://www.choicelab.de/schools" alle Daten in einer Tabelle darstellen (Schule, Adresse, Telefonnummer, usw.).

Die Schulen werden jedoch erst angezeigt, wenn man explizite Angaben macht. Das wäre sehr viel Arbeit, das alles selbst herauszuschreiben.

Gibt es eine Möglichkeit, die Datenbank von der Website zu extrahieren? Kennt sich jemand vielleicht mit so etwas aus?

...zum Beitrag

PDO Datenbank Verbindung herstellen & Verwendung von Prepared Statements mit HTML Website Code?

Hallo liebe Community!

Ich versuche mir seit einigen Wochen die Programmiersprache PHP anzueignen. Aktuell versuche ich Daten aus einem Formular von einer einfachen HTML Seite an meine Datenbank zu senden. Dafür möchte ich gerne PDO verwenden da sich damit Daten sicherer speichern lassen sollen.

Mit der Offiziellen Dokumentation komme ich leider nicht so gut zurecht, daher wären meine Fragen an euch:

Wie würde eine solche Verbindung zu meiner Datenbank mit PDO prinzipiell aussehen?
Wie baue ich diese SQL Statements richtig ein, wenn ich Daten von HTML Elementen speichern - laden, sowie eventuell später suchen möchte?

Ich bin für jeweilige Antworten sehr dankbar, gerne auch mit Bildern, Links oder direkten Codebeispielen!

...zum Beitrag

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

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

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

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

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

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

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

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

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zum Beitrag

Tabelle nach SQL-Eintrag aktualisieren?

Hallo!

Ich habe mir ein Tool gebaut, welches Namen von einem SQL-Server holt und anzeigt. Das ganze habe ich schon verwendet, aber dann habe ich mir gedacht, dass es besser wäre wenn ich die Namen auch anhaken könnte. Das hab ich so programmiert aber dann ist mir etwas aufgefallen. Um die Daten aus dem SQL-Server zu aktualisieren habe ich folgendes verwendet:

<meta http-equiv="refresh" content="30">

Dadurch werden die Häkchen jetzt immer wieder gelöscht. Wie könnte man dieses Problem lösen?

...zum Beitrag

Drei Elemente nebeneinander in HTML?

Hallo miteinander ich bin wieder mal am Programmieren und dabei bin ich auf folgendes Problem gestoßen:Links von der Seite sollte die Navigation sein in der Mitte der Inhalt und Rechts sollten die SN wie Facebook,Twitter,Google+,YT verlinkt sein. Jedoch finde ich im web nur anleitungen wie man html so aufbaut das zwei elemente nebeneinander sind also navigation darüber, darunter links inhalt rechts verlinkungen und darunter wiederum ein footer. Jetzt währe ich auf die Methode Float gestoßen und da währen dann auch alle Drei Elemente nebeneinander. Jedoch tritt dann Folgendes Problem auf: Wenn ich einen Footer anfügen möchte ist das Nicht möglich da sich der Footer dann ca 200px unter dem anfang vom Content befindet (hierbei ist das Problem der Cont. hat immer eine mindest Höhe von 500px, das heist der Footer verschwindet hinter dem Cont.) Jetzt die Frage weis jemand von euch eine Möglichkeit in CSS das man drei Elemente nebeneinander anordnet ohne das man den Befehl Float benutzt?

...zum Beitrag

An die Programmierer?

Wie lange würdet ihr eurer Meinung nach brauchen um so eine Seite wie Zalando zu programmieren und mit welchen Programmiersprachen?

...zum Beitrag

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zum Beitrag

Fehler beim Einbinden von CSS in HTML Datei?

Hallo, ich bin noch Anfänger und habe folgendes Problem: die CSS-Codes funktionieren nicht in meiner HTML Datei obwohl es eingebunden sein sollte und im Browser wird ein Fehler angezeigt aber ich weiß nicht was ich machen soll (Hab schon einiges probiert) anbei Bilder dazu, ich hoffe, dass mir jemand helfen kann. Vielen Dank schon Mal!

...zum Beitrag

Kann man bei jeder Internet Seite den Quellcode sehen?

Also kann man von jeder beliebigen Webseite den Code sehen wie sie programmiert wurde also z.B das man den HTML Code sieht?

...zum Beitrag

Brauche Zwei SQL Join Aufgabestellungen, welche Vorschläge habt ihr?

Hallo, ich brauch für meinen Lehrer in der Schule bis morgen zwei Nichttriviale Aufgabenstellungen für den SQL Join (spielt keine Rollen welcher Join), aber wir machen das mit Oracle iAcademy (kein MySQL, sondern Normales von Oracle), also bitte bei den Aufgaben Employees haben. Im Internet finde ich solche Beispiele leider nicht, die entweder, diese Oracle Tabellen (siehe unten) nicht verwenden oder zu einfach sind.

So sehen diese aus:

Und die Aufgaben von mir, wird ein anderer Machen und ich einen von einem anderen Schüler, dass wird vom Lehrer entschieden, wer von welchen die Aufgaben macht.

Also was habt ihr für Vorschläge? Aufgaben sollten nicht leicht sein.

Danke LG

...zum Beitrag

Html Login mit Access Datenbank?

Hi,

Wollte auf meiner Website ein Login erstellen,Jetzt meine Frage kann ich auch Accees als Datenbank nehmen wenn ja wie wäre nice wenn ihr mir auch die einbindungscodes für Html schicken könntet

...zum Beitrag

Fehler bei password verify php?

Ich habe ein Testprogramm geschrieben, in dem man ein Passwort eingibt, dass dann gehasht in einer Datenbank gespeichert wird. Wenn ich mit dem Passwort vergleiche kommt aber nicht true sondern false raus. Das ganze habe ich in WebFTP gemacht.

Als Ausgabe bekomme ich:

123456789 $2y$10$4TMgUO3xGJMCy5iZnd6Be.TBRkIO2Z55GGwgQ5oeToD.ryJZAvvte Richtig In Datenbank übertragen $2y$10$4TMgUO3xGJMCy5iZnd6Be.TBRkIO2Z55GGwgQ5oeToD.ryJZAvvte Falsch Richtig übertragen

Bedeutet das gehashte Passwort wurde richtig gespeichert, aber passwort verify hat beim zweiten mal false zurück gegeben.

Hier ist der php Teil dazu:

<?php
if (isset($_POST["start"])) {
    $password = $_POST["password"];
    $email = $_POST["email"];
    echo $password . " ";
    $passwordHash = password_hash($password, PASSWORD_DEFAULT);
    echo $passwordHash . " ";
    if (password_verify($password, $passwordHash)){
        echo "Richtig ";
    }else{
        echo "Falsch ";
    }
    require_once "data.php"; //Hier wird die Datenbankverbindung gespeichert
    $statement = $pdo->prepare("INSERT INTO tab (email, password) VALUES (?, ?)");
    $statement->execute(array($email, $passwordHash));
    if ($statement){
        echo "In Datenbank übertragen ";
        $sql = "SELECT * FROM tab WHERE email='$email'";
        $user = $pdo->query($sql)->fetch();
        $passwordTest = $user["password"];
        echo $passwordTest . " ";
        if (password_verify($password, $passwordTest)){
            echo "Richtig ";
        }else{
            echo "Falsch ";
            if ($passwordHash == $passwordTest){
                echo "Richtig übertragen ";
            }else{
                echo "Falsch übertragen ";
            }
        }
        die();
    }else{
        die("Es ist etwas schief gelaufen");
    }
}
?>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen