Einführung in HTML. Einführung in HTML. Listen. Gestaltungsmittel in HTML

Transkript

1 Einführung in HTML Einführung in HTML Beschreibung zu HTML: HTML dient zur Strukturierung von Text. Ein HTML-Text besitzt folgenden typischen Aufbau: <HTML> <HEAD> <TITLE> Titel des Textes (Kopfzeile des Browsers) </TITLE> </HEAD> <BODY> HTML-Text (Inhalt des Dokuments) einzelne Elemente des Textes werden durch sogenannte Tags gekennzeichnet. Während die meisten Tags paarweise als öffnendes (<BODY>) und schließendes () Tag auftreten, gibt es auch Tags (<BR>), für die kein schließender Tag benötigt wird Konstrukte können auch verschachtelt werden (keine Überlappung) bei den Tags ist Groß/Kleinschreibung irrelevant Fortlaufender Text kann beliebig formatiert werden. Der Browser behandelt normalerweise Folgen von Spaces, Tabulatorsprüngen und Zeilenumbrüchen im Text wie ein einzelnes Space (Ausnahme: Der Text steht zwischen den Tags <PRE> und </PRE>) Umlaute sollen im HTML-Text folgendermaßen codiert werden: Ä = Ä Ö = Ö Ü = Ü ä = ä ö = ö ü = ü &szuml; = ß einige Zeichen haben in HTML eine besondere Bedeutung und müssen deshalb ebenfalls codiert werden: < = < &gt = > &amp = & für Zeilenumbrüche verwendet man folgende Tags: <br> beginne neue Zeile <par> beginne neuen Absatz (mit halber oder ganzer Leerzeile) <hr> eine horizontale Trennungslinie Gestaltungsmittel in HTML Listen Gestaltungsmittel in HTML: Überschriften: Für Überschriften verschiedener Größe stellt HTML die Tags <H1> (höchste Ordnung, sehr groß) bis <H6> (niedrigste Ordnung, klein) zur Verfügung. Das Ende der Überschrift wird durch ein schließendes Tag </H1> bzw. </H6> gekennzeichnet. Zeilenumbrüche werden vor und nach den Überschriften automatisch eingefügt. einige Tags zur Texthervorhebung: <b> </b> fett <i> </i> kursiv <u< </u> unterstrichen <big> </big> größere Schrift <small> </small> kleinere Schrift <sup> </sup> hochgestellte Schrift <sub> </sub> tiefgestellte Schrift Tag zur Schriftgröße: <font size= > </font> Als Größe können absolute Werte zwischen 0 und 7 oder die relativen Werte +1, -1 angegeben werden gezählte Listen: <ol> <li> Listeneintrag, bekommt "1." vorangestellt <li> Listeneintrag, bekommt "2." vorangestellt </ol> geeignete Zeilenumbrüche vor, nach und zwischen den Listeneinträgen automatisch, keine Verschachtelung gezählter Listen Bullet-Listen: <ul> <li> Listeneintrag, bekommt Punkt vorangestellt <li>... <li>... </ul>

2 Tabellen Hyperlinks Tabellen werden mit <TABLE> eingeleitet und mit </TABLE> beendet. Im Normalfall soll die Tabelle umrandet und die Zeilen durch Linien getrennt werden. Dann ist die Tabelle mit <TABLE BORDER> einzuleiten. jede Zeile beginnt mit <TR> und endet mit </TR> jede Datenzelle innerhalb einer Zeile wird mit <TD> begonnen und mit </TD> beendet. sollen Zellen hervorgehoben werden (Kopfzeile), dann werden sie mit <TH> statt mit <TD> gekennzeichnet Beispiel: <table border> <tr> <th> Berlin </th> <th> Hamburg </th> <th> München </th> </tr> <tr> <td> Buletten </td> <td> Frikadellen </td> <td> Fleischpflanzerl </td> </tr> </table> anklickbare Verweise auf andere Seiten (Hyperlinks) werden zwischen <A HREF=...> und </A> eingeschlossen folgende Fälle können unterschieden werden: Verweis auf Datei im gleichen Verzeichnis: <A HREF="neighbor.html"> Nachbar-Datei </A> Verweis auf eine Datei in einem anderen Verzeichnis am selben Server-Rechner: <A HREF="../anderes_verzeichnis/datei.html">... </A> Verweis auf eine Datei auf einem anderen Server: <A HREF=" </A> Formulare Wie sind PHP-Dateien aufgebaut? Einleitung eines Formulars (innerhalb von <body>): <form action=" method=post> Es können Skripte in PHP, CGI, Java,... eingebunden werden. Bei action gibt man die Internet-Adresse an, zu der der Inhalt des ausgefüllten Formulars geschickt werden soll. Dies kann eine - Adresse sein: oder die http-adresse eines Gateway-Programms Nach der Einleitung des Formulars folgen die einzelnen Elemente des Formulars. Neben Eingabefeldern, Buttons und Auswahllisten sind hier alle üblichen HTML-Konstrukte zur Text-Strukturierung erlaubt. Das Formular endet mit </form>. Innerhalb einer HTML-Seite können auch mehrere Formulare hintereinander stehen. PHP-Dateien fangen mit an und hören mit auf. Sie müssen die Dateiendung *.php haben Beispiel: echo "So könnte eine Datei aussehen\n"; oder <html> <head> <title>hi all</title> </head> <body> echo "Der PHP Code\n"; </body> </html>

3 Kommentare Variable 2 Arten mehrzeilige Kommentare wird mit /* eingeleitet und endet mit */ einzeilige Kommentare: mit // eingeleitet und endet am Ende der Zeile. Beispiele: // Ein Beispielkommentar echo "Hallo Welt!"; // gibt "Hallo Welt!" aus /* Dies ist ein Hello World Script. Damit kann man testen ob PHP auf dem Server installiert und aktiviert ist. */ echo "Hallo Welt!"; // gibt "Hallo Welt!" aus Alle Variablennamen beginnen mit $. Es gibt keine Deklarationen. Der Typ der Variablen wird durch die Wertbelegung festgelegt Beispiel: Name des Skriptes var.php $text = "Ich bin ein String!"; echo $text; echo ("$text,$text,$text"); echo <BR> ; $l = "langer"; $k = "kurzer"; echo "Ich bin ein $l$l$l$l$l$l Text!"; echo <BR> ; echo "Ich bin ein $k Text!"; echo <BR> ; $i = 10; $j = 5; echo $i."+".$j."="; echo $i+$j; Einfache Rechenoperationen (1) Einfache Rechenoperationen (2) "+": Addition, $i+$j, "-": Subtraktion, $i-$j "*": Multiplikation, $i*$j "/": Division, $i/$j "%": modulo, $i%$j: z.b. 23%17 ergibt 6, da 23 geteilt durch 17 gleich 1 Rest 6 ist. ".": Verknüpft Strings: $l = "langer"; $k = "kurzer"; echo $l.$k; ergibt langerkurzer Abkürzungen: $i++ erhöht $i um 1. ++$i erhöht $i ebenfalls um 1. $i-- erniedrigt $i um 1. --$i erniedrigt $i ebenfalls um 1. Der Unterschied zwischen $i++ und ++$i ist: $i=0; echo $i++; gibt 0 aus, anschließend wird $i auf den Wert 1 erhöht. $i=0; echo ++$i; erhöht zuerst $i auf 1 und gibt den Wert 1 aus.

4 Schleifen (1) Schleifen (2) while - Schleife Beispiel: $t = "Ich soll meine Uebungsaufgaben selbst erstellen!<br>\n"; $i = 0; while ($i<10) { echo $t; $i++; } abweisende Schleife Test vor dem ersten Befehl oder $i = 0; do { echo $t; $i++; } while ($i<10); nicht abweisende Schleife, der erste Befehl wird in jedem Fall ausgeführt Beide Male wird der Text der Variablen $t wird 10mal ausgegeben. for Schleife Form: for (ausdruck1;ausdruck2;ausdruck3) {... } Mit ausdruck1 wird die Schleife initialisiert, d.h. die Schleifenvariable wird auf den Anfangswert gesetzt. ausdruck2 gibt die Abbruchbedingung an. In ausdruck3 wird die Schleifenvariable erhöht bzw. erniedrigt. Beispiel: $t = "Ich soll meine Uebungsaufgaben selbst erstellen!<br>\n"; for ($i=0;$i<10;$i++) { echo $t; } Bedingte Anweisungen (1) Bedingte Anweisungen (2) Der if-befehl Beispiel: if ($i<0) { echo "$i ist kleiner als Null\n"; } oder auch if ($i<0) { echo "$i ist kleiner als Null\n"; } else { echo "$i ist nicht kleiner als Null\n"; } Man kann diesen Befehl auch schachteln: if ($i<0) { echo "$i ist kleiner als Null\n"; } else if ($i>0) { echo "$i ist groesser als Null\n"; } else { echo "$i ist Null\n"; } Hat man mehrere Tests der gleichen Variablen, so verwendet man den switch-befehl : switch ($name) { case "Heinrich": echo "Ich bin der kluge Heinrich"; break; case "Hans": echo "Ich bin der dumme Hans"; break; case "Agathe": echo "Ich bin die Agathe und klüger als Heinrich und Hans"; break; default: echo "Wir sind der Rest"; } Falls die Variable $name den Wert "Hans" hat, wird als nächster Befehl echo "Ich bin der dumme Hans"; ausgeführt. Normalerweise würden dann alle nachfolgenden Befehle ausgeführt werden, u.a. echo "Ich bin die Agathe und klüger als Heinrich und Hans"; Dies ist meist nicht erwünscht, man springt deshalb mit break aus dem switch-befehl heraus.

5 Weitere Vergleiche: Funktionen Weitere Vergleichsoperatoren: $i==10: Ist $i gleich 10? $i!=10: Ist $i ungleich 10? $i>=10: Ist $i größer oder gleich 10? $i<=10: Ist $i kleiner oder gleich 10? Kombination: ($i==10) && ($j>0): Ist $i gleich 10 und $j größer als 0? ($i==10) ($j==0): Ist $i gleich 10 oder $j gleich 0? name_der_funktion(parameter1, parameter2,...); Beispiel: phpinfo(); Ausgabe (1) Ausgabe (2) 1. Ausgaben mit echo erzeugen Echo gibt genau einen Parameter aus. Echo ist keine Funktion, sondern ein PHP-Konstrukt, deshalb keine Klammern. Beispiel: echo "Dies ist eine Zeichenkette, die ausgegeben wird"; Zeichenkette in Anführungszeichen Innerhalb der Zeichenkette können HTML-Tags oder Steuerzeichen angegeben werden, also echo "Dies ist eine Zeichenkette, die ausgegeben wird\n"; oder echo "Dies ist eine Zeichenkette, die ausgegeben wird<br>"; Ausgabe mit print: print ("Zeichenkette"); $x=7; Print("Variable:");Print($x); Oder mit printf: $x=10; Printf("Das ist eine Variable %d", $x);

6 Dateien hinzuladen PHP aus HTML aufrufen Die Befehle include("dateiname"); oder require("dateiname"); lesen den Inhalt der Datei dateiname so, als ob er an dieser Stelle stehen würde. Damit kann z.b. einheitliches Layout bei einer größeren Anzahl von Dateien erreicht werden. Unterschied: require wird nur beim ersten Scriptdurchlauf ausgeführt Beispiel: // Dateiname: config.php $name = "Max"; $nachname = "Mustermann"; include "config.php"; // einbinden der config.php echo "Ich bin ".$name." und heiße mit Nachnamen ".$nachname; Der Aufruf geschieht aus Forms: <HTML><TITLE>TEST</TITLE> <BODY> <H3><CENTRE>Das ist HTML</CENTRE></H3> <FORM ACTION= "var.php" METHOD="POST" > <INPUT TYPE="submit" value="eingabe"> </FORM> <H3><CENTRE> Das sehen Sie nur am Anfang </CENTRE> </H3> Die Datei var.php hat den Inhalt des Skriptes von Folie 10 Definition von Formularen in HTML: Eingabe-Elemente für Forms (1) Einleitung eines Formulars (innerhalb von <body>): <FORM ACTION=" METHOD=POST> Es können Skripte in PHP, CGI, Java,... eingebunden werden. Bei ACTION gibt man die Internet-Adresse an, zu der der Inhalt des ausgefüllten Formulars geschickt werden soll. Dies kann eine -adresse sein: ACTION="mailto:herrmann@informatik.uni-halle.de" oder ein PHP-Skript, oder... Nach der Einleitung des Formulars folgen die einzelnen Elemente des Formulars. Neben Eingabefeldern, Buttons und Auswahllisten sind hier alle üblichen HTML-Konstrukte zur Text-Strukturierung erlaubt. Das Formular endet mit </FORM>. einzeilige Eingabefelder: <input name="username" size=40 maxlength=60> Default-Wert Jedes Eingabe-Element muß unter name= einen eindeutigen internen Bezeichnernamen erhalten. Außerdem läßt sich mit type= noch der Typ des Eingabefeldes näher spezifizieren. Möglich sind: type=int ganze Zahlen type=float Fließkommazahlen type=date Kalenderdatum type=url Internet-Adresse type=password verdeckte String-Eingabe size : Länge, mit der das Eingabefeld angezeigt wird, maxlength: tatsächliche Maximallänge des Strings

7 Eingabe-Elemente für Forms (2) Eingabe-Elemente für Forms (3) mehrzeilige Eingabefelder: <textarea name="feedback" rows=10 cols=50> Default- Text</textarea> erzeugt ein Eingabefeld der Grösse 10x50 Auswahllisten: Liste mit mehreren Einträgen, aus einer ausgewählt wird: <select name="top3" size=3> <option> Schiller <option> Lessing <option selected> Goethe </select> Die dritte Option ist vorselektiert (Default-Wert). Mehrfachauswahl mit <select multiple name=...> Checkbuttons: können einzeln selektiert und deselektiert werden: <input type=checkbox name="top2" value="einstein"> Albert Einstein <br> <input type=checkbox name="top2" value="curie"> Marie Curie Radiobuttons: von den Radiobuttons einer Gruppe (gleicher name) wird genau einer selektiert: <input type=radio name="janein" value="ja"> ja <input type=radio name="janein" value="nein"> nein Eingabe-Elemente für Forms (4) Submit-Button: Schickt das Formular ab. <input type=submit value="formular abschicken"> Die Beschriftung des Buttons wird hier durch value bestimmt. Reset-Button: Abbrechen und Löschen aller Eingaben. <input type=reset value="loeschen"> Die Beschriftung des Buttons wird ebenfalls durch value bestimmt. versteckte Elemente: Felder, die dem Anwender nicht gezeigt, jedoch mit übertragen werden. Versteckte Felder sind wichtig, wenn in einer Applikation mehrere Benutzerinteraktionen hintereinander auftreten. In diesem Fall kann der Zustand der Applikation in den versteckten Elementen gespeichert werden. <input type=hidden name="session_id" value="125"> Beispiel für Auswahltypen (1) <html><head> <title>auswahltypen</title></head> <body>  <form action=htmlphp.php method=post name="auswahl" onsubmit="" enctype="multipart/form-data">  <b>auswahltypen</b><br> <br> Auswahlfeld Multiple: <br> <select name=selectmultiple[]" size=4 multiple> <option value="a11" disabled> Auswahl 11 <option selected value="a12"> Auswahl 12 <option selected value="a13"> Auswahl 13 </select><br> </td><br>

8 Beispiel für Auswahltypen (2) Beispiel für Auswahltypen (3) Auswahlfeld Normal:<br> <select name=selectnormal1" size=3> <option value="a1" disabled> Auswahl 1 <option selected value="a2"> Auswahl 2 <option selected value="a3"> Auswahl 3 </select> </td><br><br> Auswahlfeld aufklappbar:<br> <select name=selectauf1" size=1> <option value="a11" disabled> Auswahl 11 <option selected value="a12"> Auswahl 12 <option selected value="a13"> Auswahl 13 </select> </td><br><br> <td > Radiobutton:<br> <input type=radio name="rad1" value="alt1" disabled> wert1<br> <input type=radio name="rad1" value="alt2" checked> wert2<br> <input type=radio name="rad1" value="alt3" checked> wert3<br><br> Checkboxen:<br> <input type=checkbox name="cb1[]" value="opt1" disabled> Option 1<br> <input type=checkbox name="cb1[]" value="opt2" checked> Option 2<br> <input type=checkbox name="cb1[]" value="opt3" checked> Option 3<br> </td> <input type=submit value="ab"></tr> </form> </body> </html> Beispiel für Auswahltypen (4) Beispiel für Auswahltypen (5) <? // Überprüfung des Formulars echo "<u>auswahlfeldtype</u><br>"; echo "Select multiple:<br>"; for ($i=0;$i<3;$i++) echo $selectmultiple[$i],"<br>"; echo "<br>"; echo "Select normal: <br> $selectnormal1<br>"; echo "<br>"; echo "Select aufklappbar: <br> $selectauf1<br>"; echo "<br>"; echo "Radiobutton: <br>$rad1<br>"; echo "<br>"; echo "Checkbox:<br>"; for ($i=0;$i<3;$i++) echo $CB1[$i],"<br>";

9 PHP - Skript Abarbeitung Übergabe von Variablen (1) GET - Methode: <HTML> <BODY> <H3>Uebertragen mit GET-Methode </H3> Wie ist das Wetter? <br> <? php echo $_GET[Wetter]; <br> <H3>Wie hoch ist die Temperatur? </H3> <? php echo $_GET[Temp]; Grad Variablennamen sind case-sensitiv Übergabe von Variablen (1) Übergabe von Variablen (2) GET - Methode: POST - Methode: <HTML> <BODY> <H4>Hallo, hier kann etwas eingegeben werden</h4> <FORM ACTION="vorl1.php" METHOD="POST" > <TEXTAREA NAME="String" ROWS="5" COLS="40"> </TEXTAREA> <BR> <INPUT TYPE="submit" VALUE="Abschicken"> <BR> </FORM> echo "Hi, ich bin ein PHP-Skript!","<br>"; echo "<H4>"; echo $_POST[String]; echo "</H4>"; $_POST[String]="<br> Das war ein Test"; echo $_POST[String] ; Name des PHP-Files: vorl1.php

10 Übergabe von Variablen (3) Komplettes Beispiel (1) POST - Methode: HTML-Datei: <HTML> <BODY> Hallo, hier kann gewählt werden: <FORM ACTION="vorl3.php" METHOD="POST" > <select name="classic" size=3> <option> Mozart <option> Beethoven <option selected> Tschaikowski </select> <input type=submit value="wahl"> </FORM> Komplettes Beispiel (2) Komplettes Beispiel (3) PHP-Datei: vorl1.php: echo "<center><h5>"; echo "Gewählt wurde <br>"; echo "</h5></center>"; echo $_POST[classic]; echo "<br> "; Bis Version 4.0x $classic Wir arbeiten mit Version etch10

11 Verbindung zur Datenbank (Oracle) lesen (1) Verbindung zur Datenbank (Oracle) lesen (2) Allgemeine Voraussetzung: Login auf "users" Aufruf mit dem Browser: Die html- und php-skripte liegen in der homepage unter /public_html Rufende HTML Datei für Verbindung mit der DB <HTML> <HEAD> <TITLE>Ausgabe von empdept</title> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H2><CENTER>Aktivieren der DB-Ausgabe</CENTER></H2> <FORM ACTION="connect.php" METHOD="POST"> <INPUT TYPE="SUBMIT" value="senden" > </FORM> Es werden keine Variablenwerte übertragen aus der DB wird nur gelesen, das PHP-Skript wird durch Klicken auf den SUBMIT Botton aktiviert. empdeptdaten.php Beispiel zum Auslesen <? $host=" "; (Rechnername oder IP-Adresse) $user="name"; (p_login) $passwd="verrate_ich_euch_nicht"; $db="studdb"; $ora_connect=oci_connect($user,$passwd,'//'.$host.'/'.$db); if (!ora_connect){ $ora_conn_erno = oci_error(); // Fehlermeldung in Variable echo ($ora_conn_erno['message']."\n"); // Fehlerm. ausgeben oci_close($ora_connect); // Verbindung schließen } else { // Sonst Ausgabe: Verbindung fehlerfrei echo "Verbindung erfolgreich\n"; oci_close($ora_connect); // Verb. schließen, wird neu eröffnet Verbindung zur Datenbank (Oracle) lesen (3) Verbindung zur Datenbank (Oracle) lesen (4) $ora_connect=oci_connect($user,$passwd,'//'.$host.'/'.$db); $query='select ename, job from emp'; $stid = oci_parse($ora_connect, $query); if (!stid){ $e = oci_error(ora_connect); print htmlentities($e['message']); exit; $r = oci_execute($stid, OCI_DEFAULT); if (!$r) { $e = oci_error($stid); echo htmlentities($e['message']); exit; } /* Ausgabe in einer Tabelle */ print '<table border="1">'; while ($row = oci_fetch_row($stid)) { print '<tr>'; foreach ($row as $item) { print '<td>'.($item?htmlentities($item):' ').'</td>'; } print '</tr>'; } print '</table>'; oci_close($ora_connect); // Datenbank schließen }

12 Eingabe in eine Oracle-DB - Beispiel (1) <HTML> <HEAD> <TITLE>Eingabe in dept</title> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H2><CENTER>Eingabe in dept</center></h2> <FORM ACTION="con_insert.php" METHOD="POST"> <p>abteilungsnummer: <br> <input name="deptno" type="int"></p> <p>abteilungsname: <br> <input name="dname" type="text" size="10" maxlength="15"></p> <p>ort: <br> <input name="loc" type="text" size="10" maxlength="15"></p> <INPUT TYPE="SUBMIT" value="eingabe" > </FORM> Eingabe in eine Oracle-DB - Beispiel (2) $host=' '; // (Rechnername oder IP-Adresse) $user="login"; // (p_login) $passwd="rate_mal"; $db="studdb"; $ora_connect=oci_connect($user,$passwd,'//'.$host.'/'.$db); if (!ora_connect){ $ora_conn_erno = oci_error(); // Fehlermeldung in Variable echo ($ora_conn_erno['message']."\n"); // Fehlerm. ausgeben oci_close($ora_connect); // Verbindung schließen } else {// Sonst Ausgabe: Verbindung fehlerfrei echo "Verbindung erfolgreich\n"; oci_close($ora_connect); // Verbindung schließen, wird neu eröffnet $ora_connect=oci_connect($user,$passwd,'//'.$host.'/'.$db); $sql="insert into dept values($_post[deptno],'$_post[dname]','$_post[loc]')"; Eingabe in eine Oracle-DB - Beispiel (3) Eingabe in eine Oracle-DB - Beispiel (4) $stid = oci_parse($ora_connect, $sql); if (!$stid) { $e = oci_error($ora_connect); print htmlentities($e['message']); exit; } $r = oci_execute($stid); echo "Das ist $_POST[dname]"; if (!$r) { $e = oci_error($stid); echo htmlentities($e['message']);exit;} oci_commit($ora_connect); oci_close($ora_connect); //Verbindung schließen }