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/

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

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)

Kann man mit mehreren Html Dateien auf eine Css datei zugreifen um nicht alles von neu zu kopieren usw. Wenn man für alles eigene classes bzw. ids verwendet zB

...zur Frage

Wie kann man bei HTML eine neue Unterseite machen?

Ich programmiere gerade meine eigene Seite. Die "Home" Seite ist schon fertig, jetzt möchte ich an die Unterseiten gehen, die dann über Home verlinkt werden. Wird das im Code geregelt oder wie?

...zur Frage

An die Programmierer?

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

...zur Frage

Verschachtelte sql abfrage bzw. sortierung?

So, ich habe ein Problem.

Gerne möchte ich daten als liste aus einer datenbank laden. diese daten sollen seiten anzeigen als tabelle, diese seiten haben aber teilweise untergeordnete seiten die in der datenbank unter 'parent' die 'id' des elternelementes und diese wiederum können auch untergeordnete seiten haben.

wie gestalte ich die datenbankabfrage wenn ich die seiten anzeigen will in einer tabelle in der erst die "Höchste" nach dem 'sort' wert absteigend und zwischen diesem sort und dem nächsten "höchsten" datensatz dazwischen die unterseiten erscheinen?

hier ein bild der Tabelle:

anhin ein codeschnipsel der tabelle die ich schon habe:

<?php if (!empty($pages)): ?>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Link</th>
                <th>Titel</th>
                <th>Navigationselement</th>
                <th>Aktionen</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($pages AS $page): ?>
                <tr>
                    <td><?php echo e($page->id); ?></td>
                    <td><?php echo e($page->slug); ?></td>
                    <td><?php echo e($page->title); ?></td>
                    <td><?php echo e($page->nav); ?></td> 
                    <td>
                        <form method="POST" action="./?route=admin/page/delete">
                            <input type="hidden" name="csrf_token" value="<?php echo csrf_token(); ?>" />
                            <input type="hidden" name="id" value="<?php echo e($page->id); ?>" />
                            <input type="submit" value="Löschen" class="button-as-link" />
                        </form>
                        <a href="./?route=admin/page/edit&id=<?php echo e($page->id); ?>">Editieren</a>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
<?php else: ?>
    <p>Es wurden noch keine Seiten angelegt.</p>
<?php endif; ?>

...zur Frage

Navbar und Footer für mehrer seiten verwenden?

Hey Leute,

Wie kann man ein Navbar und footer für mehrere Seiten vervenden? (Also einmal in einer datei schreiben und dann immer diese Datei aufrufen. Ohne, dass ich den Code für navbar und footer jedes kopieren muss)

Hoffentlich wisst ihr was ich meine:)

Danke im Vorraus

...zur Frage

iPad error 500 Website?

Bei mehreren Seiten also Seiten die nicht zusammen gehören kommt immer der Fehler Code 500 ich versteh das nicht. Weil es ist nicht eine Website sondern mehrere

...zur Frage

Wie sollte ich mein Blog System für meine Website machen?

Ich mache momentan mit html, css und javascript eine Website mit einem Blog.

Wie sollte ich das System machen? Sollte ich keine Funktion machen um Beiträge zu erstellen und alles in einem Javascript system erstellen lassen, im Code direkt. Oder eine Page wo ich Beiträge erstellen kann, nur so falls es wichtig ist, es ist ein System mit mehreren Seiten.

Wie folgt auf gebaut: Hauptseite mit Kategorien -> In der Kategorie sind die Beiträge zur Kategorie.

Also sind noch 3 Seiten vor den Beiträgen.

...zur Frage

Javascript/Ajax - Footer von Datei laden lassen?

Ich hab schon einiges an Code ausprobiert, selbst kann ich Javascript oder Ajax nicht besonders, komme aber zu keinen erfolgreichem Ergebnis, kann mir jemand dabei helfen?

Ich möchte lediglich den Footer über ein HTML-File in den Footer einfügen, ist auch nur Text.

WICHTIG: Der Footer soll nicht über den Buttonklick geladen werden, sondern mitsamt der Seite

...zur Frage

Footer Zeilenumbruch?

Wieso kann ich da keine Zeilenumbrüche reintun? Ich glaube das liegt im footer{} aber ich habe keine Ahnung was dort das blockiert. Kann mir jemand helfen? Code:

<html>

<head>

<style>

body{

width: 100%;

height: 100vh;

}

margin: 0;

padding: 0;

font-family: 'Comfortaa';

}

footer{

padding: 3px;

background-color: lightgray;

color: white;

display: flex;

margin-bottom: 0vh;

position: relative;

padding: 30px;

}

footer a, p{

color: black;

text-decoration: none;

}

</style>

</head>

<body>

<h1>Willkommen beim Geissli-Shop!</h1>

<p>Website by

<a href="#">Elifox</a><br></p>

<p>2023

<a href="#">Geissli Gang</a><br></p>

<p>

<a href="Datenschutzerklaerung.html">Datenschutzerklaerung</a><br></p>

<a href="Nutzungsbedienungen.html">Nutzungsbedienungen</a>

</footer>

</body>

</html>

Danke schon im vorraus!

...zur Frage

Bild als Hintergrund Bild in Website einbinden (HTML , CSS )?

Hallo,

Ich Programmiere gerade eine Website in Visual Studio Code und will hinter den Buttons(siehe Bild 2) ein Bild als Hintergrund haben. Nun habe ich das ganze so programmiert (siehe Bild 1) und auch das Bild in die Website Datei eingefügt und alles gemacht. Dennoch sieht das ganze wenn man den liveserver öffnet, so (siehe Bild 2 ) aus und es ist anstatt dem Foto nur das Foto jpg Symbol klein zu sehen . Wie kann ich das ändern so das ich das Bild sehen?

Vielen Dank

...zur Frage

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

...zur Frage

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zur Frage

wie kann ich in javaScript eine Funktion mit einem Tastendruck aufrufen?

Hi Leute,

ich programmiere einen Taschenrechner und möchte dafür eine funktion über die Tastatur aufrufen können. Also wenn ich zum Beispiel eine 2 drück, soll die function calculate(2); aufgerufen weden. Im internet habe ich viele Ergebnisse gefunden, die mich verwirrt haben.

Vielen Dank im Voraus😉

...zur Frage

Welche Methode ist die Beste?

Meine Website besteht aus mehreren Unterseiten welche sich vom Layout nicht unterscheiden. Wenn ich zum Beispiel einen neuen Punkt in der Navigation einbinden will, muss ich das auf jeder Seite einzelnd machen. Mein Plan ist es nun quasi eine foundation.html zu haben, mit folgendem Code

<html>
  <head>
    <title></title>
    usw.
  </head>
  <body>
    <nav>Home etc</nav>
    <main id="point_of_deployment">

    <main/>
    <footer>Footer Zeugs<footer/>
  </body>
</html>

Und weitere Unterdatein die dann den Intalt der Seite Tragen:

index.html, kontakt.html etc.

<p>Text</p>
<img />
usw.

Sodass z.B. index.html die foundation.html um sich herum importiert.

Ich hätte gedacht man macht das z.B. mit PHP. Das habe ich soweit auch schon zum laufen gebracht, finde aber den Weg nicht sehr elegant.

Was haltet ihr für die beste, eleganteste und einfachste Möglichkeit?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen