HTML und CSS in PHP einbinden

Thema in Kurzform

• Wir können innerhalb einer echo-Anweisung problemlos HTML-Tags schreiben.
• Haben die HTML-Tags Attribute (z.B. style, class), müssen diese in einfache Anführungszeichen gesetzt werden.

Inhaltsverzeichnis

1. HTML in PHP einbinden
2. Attribute von HTML-Tags
3. CSS in PHP einbinden

HTML in PHP einbinden

Um innerhalb eines PHP-Programms eine HTML-Ausgabe am Bildschirm zu erhalten, verwenden wir die uns schon bekannte Anweisung echo:

echo "Hallo Welt!";

echo ist die PHP-Anweisung, die eine Zeichenkette als Text im Browserfenster ausgibt. Dieser Text ist dann im Browser generierter HTML-Text.

Wollen wir HTML-Tags verwenden, funktioniert das nach demselben Prinzip:

echo "Ich bin ein <strong>fetter</strong> Text <br>";
echo "Ich bin ein <i>kursiver</i> Text";

Wir haben nach dem Schlüsselwort echo in doppelten Anführungszeichen handelsübliche HTML-Tags eingebaut. Diese werden auch als solche interpretiert. Hier das Resultat des obigen Codes mit Textauszeichnungen und Zeilenumbruch:

Ich bin ein fetter Text
Ich bin ein kursiver Text

Attribute von HTML-Tags

Wie gehen wir mit HTML-Tags um, die Attribute enthalten, wie zum Beispiel:

<img src="falconbyte.jpg">

Das Problem hier ist, dass HTML-Attribute oftmals ebenfalls innerhalb von doppelten Anführungszeichen stehen (hier das Atttribut "falconbyte.jpg"). Wir können diesen HTML-Code deshalb so nicht in unser PHP-echo packen!

Die Lösung: Wir ersetzen die doppelten Anführungszeichen der HTML-Atrribute durch einfache Anführungszeichen. So können wir den HTML-Tag mit seinen Attributen in das PHP-echo integrieren:

echo "<img src='falconbyte.jpg'>";

Und schon wird das Bild am Bildschirm angezeigt.

CSS in PHP einbinden

Analog dazu können HTML-Tags mit CSS-Stylesheets inline durch das Attribut style ausgezeichnet werden:

echo "<h1 style='color: red; border: 2px solid black;'>This is a Headline</h1>";

Wie oben schon gesehen, stehen die Attribut-Werte innerhalb einfacher Anführungszeichen. Das gilt genauso für unsere h1-Überschrift, die über das style-Attribut ein Design erhält. Zwischen den einzelnen CSS-Eigenschaften steht, wie gewohnt, ein Semikolon.

Für den Fall, dass wir einen HTML-Tag innerhalb eines PHP-echo mit einer CSS-Klasse auszeichnen möchten, verwenden wir das Attribut class:

echo "<h1 class='headline'>This is a Headline</h1>";

Auch hier wird der Attibut-Wert in einfache Anführungszeichen geschrieben. Die doppelten Anführungszeichen bleiben der echo-Anweisung vorbehalten.