PHP/HTML/JavaScript: Code Schnipsel

Die folgenden Code Schnipsel nutze ich auf vielen meiner eigenen Internet Seiten. Meine Seiten erstelle ich fast ausschließlich als PHP Dateien, selbst wenn im Quelltext kein PHP Code enthalten ist.

PHP Code in HTML einbetten


<body>
<h1>Überschrift</h1>
<?php
// ab hier PHP Code, Beispiel:
echo "<h2>Untertitel</h2>";
?>
</body>

Im HTML Block <body> ... </body> befindet sich der HTML Code, der vom Browser verarbeitet und visualisiert wird. HTML Tags - wie z.B. die Überschrift in der zweiten Zeile - können auch als PHP Code erstellt werden. PHP Code wird mit <?php eingeleitet und mit ?> beendet.

Um beliebigen HTML Code in PHP zu verwenden, wird der echo Befehl benötigt. Der HTML Code wird in doppelte Anführungszeichen gesetzt und - ganz wichtig - die Zeile muss mit einem Semikolon abgeschlossen werden.

Beispiel für HTML Code, der Anführungszeichen für Attribute enthält:

<input type="text" name="Vorname" value="Uli">

In PHP Code müssen die doppelten Anführungszeichen durch einfache Anführungszeichen ersetzt werden:

<?php
echo "<input type='text' name='Vorname' value='Uli'>";
?>

JavaScript Code in HTML einbetten


Dafür wird das script Tag benötigt.

<script>
window.close();
</script>

Mit window.close(); wird das aktuelle Fenster geschlossen. Die drei Zeilen können auch in einer Zeile zusammengefasst werden:

<script>window.close();</script>


JavaScript: andere Seite öffnen


<script>location.href='neueseite.php';</script>

<script>location.href='http://www.uherzog.de';</script>


Klickbares Bild


<img src="info.png" onclick="window.open('neuesFenster.php','winNEU','width=700,height=350')">

Mit onclick wird dem Image Tag ein Ereignis hinzugefügt, in diesem Beispiel das Ereignis "beim Klicken". Klickt man auf das Icon wird der JavaScript Code window.open() ausgeführt wird. Im ersten Parameter wird der Verweis angegeben, im zweiten der Name des Fensters und im dritten optional die Größe des Fensters.

Anmerkungen:


Einmal ausprobieren? Auf das folgende Fragezeichen-Icon klicken: (Mauszeiger ändert sich nicht)

Hier die Variante mit dem a-Element: (Mauszeiger ändert sich)


Klickbarer Button/Schalter


Formulare benötigen einen Button, um die eingegebenen Daten zu senden. Buttons können auch unabhängig von Formularen genutzt werden.

<input type="button" value="neues Fenster öffnen" onclick="window.open('neuesFenster.php','winNEU','width=700,height=350')">

Ausprobieren:


Zeichenzähler


In einem Formular kann die Eingabelänge mit dem maxlength Attribut begrenzt werden. Trotzdem kann gerade in textarea Elementen eine Anzeige, wie viele Zeichen noch eingegeben werden können, sehr hilfreich sein.

<form name="Eingabe">
noch <b id="Rest">200</b> Zeichen
<textarea name="Beschreibung" onkeyup="check(200);" maxlength="200" cols="60" rows="6"></textarea>
</form>

Die dazugehörige JavaScript Funktion (im head Bereich definiert):

<script>
function check(maximal)
{
document.getElementById("Rest").innerHTML = maximal - document.Eingabe.Beschreibung.value.length;
}
</script>

noch 200 Zeichen


Rahmen um ein Bild


Die meisten Internet Seiten arbeiten mit Bildern. Um ein Bild in eine Internet Seite einzubinden wird das img Tag benötigt.

<img src="beispiel.png">



Die HTML Standardeinstellung des img Tags zeigt das Bild ohne Rahmen an. Soll dem Bild ein Rahmen hinzugefügt werden, gibt es mehrere Möglichkeiten.

Mit dem Attribut border:

<img src="beispiel.png" border="1">



Das border Attribut wird in der aktuellen HTML Version nicht mehr empfohlen. Alternativ kann über style ein Rahmen hinzugefügt werden, der weitere Gestaltungsmöglichkeiten bietet (Farbe, Rahmenstärke, ...):

<img src="beispiel.png" style="border:2px solid red">



Sollen alle Bilder einer Seite mit einem Rahmen ausgestattet werden, empfiehlt es sich, den Rahmen in den Cascading Style Sheets zu definieren.