Seite 1 von 14 Inhalt 1. Php ansprechen... 2 2. html... 3 3. Weitere Formatierungen in html... 5 4. Tabellen mit html... 6 a. Grundstrukturen... 6 b. Tabellen formatieren... 11
Seite 2 von 14 1. Php ansprechen php wird vom Server (unserem XAMPP) interpretiert, das heißt, was wir programmieren wird vom Server verarbeitet und an einen Client, der sich beim Server meldet, geschickt. Damit der Server weiß, dass ein php-programm vorliegt, müssen wir das Programm immer folgendermaßen beginnen: <?php dann folgt unser Code, der immer mit ; (Semikolon - Strichpunkt) abgeschlossen wird. Am Ende schreiben wir:?> Damit ist das php-programm beendet. Alles andere wird von einem Browser als sogenannter html-code interpretiert. Damit können wir unser Programm dann gestalten. Dazu später mehr. Schreibe nun im Editor Folgendes: <?php echo "Ich bin da!";?> Speichere die Datei im oben angegebenen Verzeichnis unter "ichbinda.php". Starte nun einen Browser deiner Wahl (ich empfehle Firefox) und tippe in die Adresszeile: localhost/uebungen/anfang/ichbinda.php Ergebnis: Ich bin da! Information: Suche bei Fehlern zuerst selbst, dann frage deinen Partner, wenn es gar nicht geht, mich!
Seite 3 von 14 Merke: In php beginnt man mit <?php und endet mit?> Etwas am Bildschirm anzeigen kann man mit dem Befehl echo Eine php Datei hat die Dateiendung php. 1. Schreibe ein eigenes Programm mit einer anderen Ausgabe 2. Lass dir mit einem Rechtsklick den Quellcode deiner Programmdatei anzeigen 2. html Hypertext Markup Language. Mit dieser Programmiersprache kann man Formatierungen und Gestaltungen vornehmen. Heutzutage wird der Programmcode in php und die Formatierung getrennt gespeichert. Man sollte in einer Datei nicht html und php mischen. Wir werden nun einige einfache Grundbegriffe von html durchnehmen und ausnahmsweise dann mit php in einer Datei mischen. Wie schon gesagt, der Server interpretiert php zwischen den bekannten Zeichen, den Rest interpretiert er als html. Sehen wir uns einmal an, wie das funktioniert: Erstelle eine neue php-datei im Arbeitsverzeichnis mit dem Namen "einfacheformatierung.php". Schreibe wieder mit den Tags : <?php echo "Ich bin da!"; #Gib nun am Ende des Textes vor den Anführungszeichen ein <p> und schreibe
Seite 4 von 14 in eine neue Zeile: echo "Ich auch!";?> Raum für Notizen
Seite 5 von 14 3. Weitere Formatierungen in html Nun werden wir einzelne Wörter formatieren. Gib dazu Folgendes ein: <?php echo "<b>ich</b> <i>bin</i> <u>da</u>!";?> Speichere die Datei im oben angegebenen Verzeichnis unter "einfacheformatierung_format.php". Starte nun einen Browser deiner Wahl und überprüfe. Ergebnis: Ich bin da Löse nun die Aufgaben 1. Was geschieht, wenn man <p>eingibt? 2. Kopiere den Code. Gib nun an Stelle des <p>ein <br> ein. Was passiert? Ergebnis: Ich bin da Ich auch! Ich bin da Ich auch 3. Was passiert, wenn man mehrere Absätze mit p oder br eingibt? 4. Was bewirkt das Rautezeichen #? 5. Was bewirken die einzelnen Formatierungen unter "einfache Formatierungen"? 4. Was bewirkt das Rautezeichen #? 5. Was bewirken die einzelnen Formatierungen unter "einfache Formatierungen"?
Seite 6 von 14 4. Tabellen mit html a. Grundstrukturen Wir haben jetzt fett, kursiv und unterstrichen verwendet. Diese Formatierungen ermöglichen Abwechslung, aber auch Übersicht. Eine sehr gute Möglichkeit zu gestalten und Ordnung einzubringen sind Tabellen. Wir werden nun Tabellen in html erstellen und formatieren. Eine html Datei beginnt mit <html> Es folgt der Kopfbereich (englisch: Head) <head> Die Webseite hat einen Titel: <title> Der Titel der Webseite soll Tabelle heißen. In html werden die einleitenden Tags mit </ > abgeschlossen. Also haben wir: <head><title>tabelle</title></<head> Damit hat unsere Webseite einen Titel. Um im Hauptbereich zu arbeiten, geben wir den sogenannten body-tag (Körper- Bereich) an: <body> Wir erstellen eine Tabelle mit: <table> Gefolgt von Zeile und dann <td> Zelle Alle diese Tags müssen auch abgeschlossen werden mit </.> Wir geben nun also Folgendes ein: (Arbeite mit Strg+c und Strg+v damit du nicht alles tippen musst) <html> <head>tabelle</head> <body> <table><td>hallo</td></table> </body> </html>
Seite 7 von 14 Erzeuge eine neue Datei mit dem Namen tabelle.html. Schreibe den Code in die Tabelle und rufe die Datei im Browser auf. Tabelle.html Raum für Notizen
Seite 8 von 14 Ergebnis: Tabelle Hallo Wo ist denn nun die Tabelle? Dazu müssen wir html zuerst mitteilen, dass es einen Rand (border) ziehen muss: <html> <head>tabelle</head> <body> <table border= 1 > <td>hallo </td> </table> </body> </html> Tabelle2.html Ergebnis: Tabelle Hallo Border verpasst also der Tabelle einen Rahmen. Der Wert danach gibt an, wie dick der Rahmen sein soll. Probiere nun mit verschiedenen Rahmenstärken zu arbeiten. Eine Zelle ist etwas wenig. Wollen wir nun mehrere Tabellenzellen erzeugen, so muss man Folgendes wissen: <table> eröffnet die Tabelle erzeugt eine Zeile <td> schließt die Zeile ab. Vergiss nicht, jeweils die Zeile bzw. die Zelle und am Ende die Tabelle mit dem </ > abzuschließen. Überlege dir vorher, was der folgende Code bewirken könnte, schreibe ihn dann ab und speichere unter Tabelle3.html.
Seite 9 von 14 <html> <head>tabelle</head> <body> <table width="100" border="2" cellspacing="0" cellpadding="0"> </table> </body> </html> Vorweg: bedeutet ein Leerzeichen Bemerkung: Die Einrückungen dienen nur der Übersicht Fülle nun die Zellen mit beliebigem Text und formatiere ihn, wie wir bereits gelernt haben (vergleiche oben). Ergebnis: Tabelle3-formatiert.html
Seite 10 von 14 Erzeuge verschiedenste Tabelle mit unterschiedlichen Spalten- und Zeilen. Formatiere enthaltenen Text. Tabellen sind sehr wichtig für die Übersicht einer Webseite oder darin enthaltener Elemente und die Struktur derselben. Raum für Notizen
Seite 11 von 14 b. Tabellen formatieren Bisher haben wir am Aussehen der Tabelle nicht viel geändert. Wir änderten den Rahmen und die Anzahl der Zellen, sowie den Inhalt. Tabellen kann man aber noch viel bunter gestalten. Kopiere dir den Quellcode von tabelle3.html und arbeite mit diesem Code weiter. Jetzt geht es um Tabellenhintergründe. Wie kann die Hintergrundfarbe geändert werden? Der englische Ausdruck für Hintergrund ist Background. Wenn wir nun im <td> Bereich hier eine Farbe festlegen, so gilt die Hintergrundfarbe für die Zelle. <td bgcolor= ffcc00 > Hier wird die Farbe mit 6 Zeichen festgelegt. Eine andere Möglichkeit ist mit den englischen Namen: bgcolor=orange. Also: <td bgcolor=orange> Der kopierte Quellcode von tabelle3.html wird ergänzt zu: <html> <head>tabelle</head> <body> <table width="100" border="2" cellspacing="0" cellpadding="0"> <td>1</td> <td>2</td> <td>3</td>
Seite 12 von 14 <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td bgcolor=orange>8</td> <td>9</td> </table> </body> </html> Tabelle3-farbig.html Ergänze nun Hintergrundfarben nach deinem Geschmack. Finde heraus, was cellpadding und cellspacing bedeutet und baue dies in deine Tabelle ein. Sieh dir auch immer wieder den erzeugten Quellcode an, indem du auf deinen Webseite rechts klickt und den Quellcode anzeigen lässt. Raum für Notizen
Seite 13 von 14 Ändern der Tabellenbreite und Höhe, Zellinhalte formatieren: Gib folgenden Code ein und versuche herauszufinden, was die einzelnen Befehle bewirken: <table width="518" border="2" cellspacing="2" cellpadding="2"> <td width="85" bgcolor="#ff9933"><div align="left">1</div></td> <td width="333" bgcolor="#cc9900"><div align="center">2</div></td> <td width="90" bgcolor="#f5cd6d"><div align="right">3</div></td> <td bgcolor="#ff9933"><div align="left">4</div></td> <td bgcolor="#cc9900"><div align="center">5</div></td> <td bgcolor="#f5cd6d"><div align="right">6</div></td> <td bgcolor="#ff9933"><div align="left">7</div></td> <td bgcolor="#cc9900"><div align="center">8</div></td> <td bgcolor="#f5cd6d"><div align="right">9</div></td> <td bgcolor="#ff9933"><div align="left">10</div></td> <td bgcolor="#cc9900"><div align="center">11</div></td> <td bgcolor="#f5cd6d"><div align="right">12</div></td> <td bgcolor="#ff9933"><div align="left">13</div></td> <td bgcolor="#cc9900"><div align="center">14</div></td> <td bgcolor="#f5cd6d"><div align="right">15</div></td> </table> Tabelle4-weitere-formatierungen.html
Seite 14 von 14 Ergänze nun Hintergrundfarben nach deinem Geschmack. Versuche die gesamte Tabelle in die Mitte zu setzen. Raum für Notizen cellspacing: cellpadding div div align