448
Johann-Christian Hanke 6. Auflage Auf der CD: PHP 5, MySQL 5, Apache-Webserver, PSPad, Notepad++, Aptana Studio, XAMPP, Videos zur Installation und Einrichtung, Programmiercode aus dem Buch

[Johann-Christian Hanke] PHP Und MySQL Für Kids(BookFi.org)

Embed Size (px)

Citation preview

  • Johann-Christian

    Hanke

    H

    a

    n

    k

    e

    8674

    Johann-Christian Hanke

    6. Au age

    Auf der CD:

    PHP 5, MySQL 5, Apache-Webserver,

    PSPad, Notepad++, Aptana Studio,

    XAMPP, Videos zur Installation

    und Einrichtung, Programmiercode

    aus dem Buch

    Der Bestseller aktualisiert in der 6. Au age!Alles redet von PHP und MySQL! Und unzhlige Webseiten-Programmierer setzen die Program-miersprache PHP und die Webdatenbank MySQL mit viel Erfolg und Spa ein. Du mchtest auch in diese Liga aufsteigen und tolle Webseiten mit PHP und MySQL erstellen?Dann ist dieses Buch von Johann-Christian Hanke genau richtig fr dich! Du lernst zum Beispiel, wie du die Besucher auf deiner Webseite zhlst und ein Gstebuch einrichtest, in dem deine Freunde Nachrichten verffentlichen knnen. Selbst eigene Umfragen, Formulare fr Feedback und ein kleines Weblog kannst du bald selbst erstellen. Falls du einmal nicht weiterweit, springt dir Hund Buf zur Seite und gibt dir gerne hilfreiche Tipps. Und das ist lngst nicht alles, was das Buch zu bieten hat!Die CD ist randvoll mit Tools, die du fr deine Webseiten-Programmierung brauchst. Die Videos zur Installation und Einrichtung helfen dir, damit du sofort mit dem Programmieren loslegen kannst.

    Auf der CD ndest du alles, was du zum Program-mieren brauchst:PHP 5, MySQL 5, den Apache-Webserver, die Edito-ren PSPad, Notepad++ und Aptana Studio, phpMy-Admin, XAMPP, SELFHTML, Videoworkshops, Lsun-gen zu den Aufgaben und den Programmiercode aus dem Buch

    ISBN 978-3-8266-8649-8

    Ebenfalls in dieser Reiheerschienen:

    ber den Autor:Johann-Christian Hanke ist ein erfolgreicher Fach-buchautor und gibt Kurse an einer Volkshochschule in Berlin.

    System-voraussetzungen: Alle Windows-Versionen sowie Mac OS X und Linux

    Ab 11 Jahre, aber auch fr Erwachsene, die eine wirklich einfache Einfh-rung suchen.

    23,3 mm

    Probekapitel und Infos erhltst du unter:

    [email protected]

    (D) 19,95

    Regalsystematik:ProgrammierungISBN 978-3-8266-8674-0

    8674.indd 18674.indd 1 07.01.2010 10:48:5107.01.2010 10:48:51

  • PHP und MySQL fr Kids

  • Johann-Christian Hanke

    PHP und MySQL fr Kids

  • Bibliografische Information Der Deutschen BibliothekDie Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet ber abrufbar. Bei der Herstellung des Werkes haben wir uns zukunftsbewusst fr umweltvertrgliche und wiederverwertbare Materialien entschieden. Der Inhalt ist auf elementar chlorfreiem Papier gedruckt. ISBN: 978-3-8266-8674-0 6., aktualisierte und erweiterte Auflage 2010

    E-Mail: [email protected] Telefon: +49 89/2183-7928 Telefax: +49 89/2383-7620

    2010 bhv, eine Marke der Verlagsgruppe Hthig Jehle Rehm GmbH Heidelberg, Mnchen, Landsberg, Frechen, Hamburg.

    Printed in Germany

    Lektorat: Katja Vlpel Korrektorat: Petra Heubach-Erdmann Satz und Layout: Johann-Christian Hanke, Berlin

    Dieses Werk, einschlielich aller seiner Teile, ist urheberrechtlich geschtzt.Jede Verwertung auerhalb der engen Grenzen des Urheberrechtsgesetzes ist ohne Zustimmung des Verlages unzulssig und strafbar. Dies gilt insbesondere fr Vervielfltigungen, bersetzungen, Mikroverfilmungen und die Einspeicherung und Verarbeitung in elektronischen Systemen.

  • fr Tabea, Florian und Linus

  • 7

    Inhaltsverzeichnis

    Vorwort 15

    Was bedeutet eigentlich Programmieren? 15 Wozu sind Datenbanken da? 16 Was kannst du mit PHP und MySQL alles machen? 17 Was ist ein Webserver und wozu brauchst du den? 18 Wie arbeitest du mit diesem Buch? 18 Was brauchst du fr dieses Buch? 19 Wie gut kommst du mit dem Computer klar? 20 Was ist neu in Auflage 6? 22 Wo gibts Hilfe, wenn es mal klemmt? 24

    1 Deine coole Homepage mit HTML 25 Richte dir einen Projektordner ein! 26 HTML auf Knopfdruck mit PSPad 28 So wirds perfekt: berschriften, Abstze und mehr 35 Hier bin ich: Ein Bild einfgen 40 Meine Hobbys kurz aufgelistet 43 Coole Links zu coolen Pltzen 45 Meine drei Lieblingsfcher in einer Tabelle 47 Schickes Layout mit Style Sheets 49 Schn bunt hier: Farben zuweisen 53 So legst du die exakte Breite fest 57 Eine Umfrage! Wie findest du meine Page? 59 Tipps und Tricks zu PSPad 61 Schlussbemerkung 64 Zusammenfassung 64 Ein paar Fragen 65 und ein paar Aufgaben 65

  • 8

    Inhaltsverzeichnis

    2 Installiere deinen eigenen Webserver! 67 Warum eigentlich ein Webserver? 68 Wie teuer ist die Homepage mit PHP/MySQL? 71 How! Im Reich des Apachen 75 Ganz einfach: Webserver selbst installiert! 75 Nur noch etwas Handarbeit und fertig! 81 Testen: phpinfo() auf localhost 83 Schlussbemerkung 86 Zusammenfassung 87 Ein paar Fragen 87 und eine Aufgabe 88

    3 Hallo echo Hallo Welt 89 Daten ausgeben mit echo 90 Variablen: Mein rechter, rechter Platz ist leer 94 Ausgabe verschnern mit HTML-Tags 96 Wie Pech und Schwefel: Strings verketten 97 Kleine Zeilenumbruchkunde 101 Maskenball: Das Escape-Zeichen \ 103 Keinen Durchblick? Kommentare setzen! 105 Fehlermeldung? Cool bleiben! 106 Schlussbemerkung 108 Ein paar Fragen 109 und ein paar Aufgaben 109

    4 Spa mit Datum und Uhrzeit 111 Immer up to date 112 Wer hat an der Uhr gedreht? 115 Pause muss sein: Die if-else-Entscheidungsstruktur 116 Der Tag vergeht: Zwischentne mit elseif 123 Feldvariablen: Wochentage aufschreiben 125 Arrays die Zweite: Es geht auch krzer! 128

  • 9

    Inhaltsverzeichnis

    Assoziativ: Monatsnamen als Array 129

    und wieder die Kurzform 131 Den Monat ausgeben 132 Schlussbemerkung 133 Zusammenfassung 133 Ein paar Fragen 134 und ein paar Aufgaben 135

    5 Seiten mit Passwort schtzen 137 Formular fr das Passwort 138 Senden mit Methode: post oder get? 139

    Ausgabe des Passworts 141 Testen mit if-else 143 Schnheitsfehler? Variablentest mit isset()! 144 Mehr Mglichkeiten mit switch 147 Inhalt mit include einbinden 151 Mehr Sicherheit: Endungs- und Ordnertricks 152 Schlussbemerkung 154 Zusammenfassung 155 Ein paar Fragen 156 und ein paar Aufgaben 156

    6 Etwas Mathe: Taschen(geld)rechner 157 Nicht ohne Grund: Grundrechenarten 158 Rechenpraxis: Zwei mal Drei macht Vier 159 Einnahmen minus Ausgaben: Taschengeldrechner 160 $_SERVER['PHP_SELF']: Daten an sich selbst schicken 164 Wie viel bleibt brig? Prozentrechnung! 165 Traurige Sulen: Ergebnis als Diagramm 169 Plus, Minus, Mal, Geteilt? Select! 170 So liest du ein SELECT-Feld aus 172

  • 10

    Inhaltsverzeichnis

    Rechner de luxe: Wir schreiben eine Funktion 174 Der Rechner im Einsatz 177 Schlussbemerkung 180 Zusammenfassung 180 Ein paar Fragen 181 und ein paar Aufgaben 181

    7 Schleifen: Die Gratulationsmaschine 183 Die while-Schleife 184 Prfung zu Fu: do while 189 Der Bestseller: for 190 Und die Geburtstagskerzen? 192 Have a break: Abbruchbedingung einfgen 194 Und noch eine Schleife: foreach 195 Schlussbemerkung 199 Zusammenfassung 199 Ein paar Fragen 199 und ein paar Aufgaben 200

    8 Frs Feedback: Formmailer selbst gestrickt 201 Die Funktion mail() 202 E-Mail mit Datums- und Zeitstempel 204 Das Feedback-Formular 205 Professionell mailen: Fehler unterdrcken 207 Formular um ein Name-Feld erweitern 210 Backslashes entfernen mit stripslashes() 211 Prfen! Sind alle Felder ausgefllt? 212

    Inhalt in die Formularfelder schreiben 216 Erweiterter Fehlertest: Mindestlnge und E-Mail-Check 221 Krnender Abschluss: Universal-Formmailer 227 Schlussbemerkung 231

  • 11

    Inhaltsverzeichnis

    Zusammenfassung 232 Ein paar Fragen 232 und ein paar Aufgaben 233

    9 Surfer wiedererkennen mit Cookies 235 Was sind Cookies? 236 Grundeinstellungen im Browser 239 Krmelmonsters Keksfabrik: Cookies backen 241 Der Keks bekommt ein MHD 243 Herumkrmeln: Cookies verspeisen 244 Aufgegessen: Cookies lschen 245 Schlussbemerkung 246 Zusammenfassung 246 Ein paar Fragen 246 und ein paar Aufgaben 246

    10 Besucherzhler selbst gebaut 247 Zwei Dateien: So funktioniert das Beispiel 248 Hitmaschine: Ein Textcounter 248 Datei zum Lesen ffnen 249 Der geheimnisvolle Dateizeiger 250 Daten in eine Textdatei schreiben 252 Rechtevergabe mit chmod 253 Counter de luxe mit Cookies 256 So funktioniert das Skript 257 Schlussbemerkung 258 Zusammenfassung 258 Ein paar Fragen 258 und ein paar Aufgaben 259

    11 Eine Umfrage mit grafischer Auswertung 261 So sieht das Beispiel aus 262 Durch Komma separierte Textdatei 263

  • 12

    Inhaltsverzeichnis

    Text am Trennzeichen zerlegen 266 Die unsichtbare Tabelle fr das Diagramm 267 und wieder etwas Mathe: Dreisatz 268 Die Umfrageseite: So funktioniert das Skript 270 Schummeln verboten: Mehrfachvotes unterdrcken 273 und wieder entsteht ein Array 274 Schlussbemerkung 277 Zusammenfassung 277 Ein paar Fragen 277 und ein paar Aufgaben 278

    12 Das eigene Gstebuch 279 (Zu) simpel gestrickt: Version 1 280 Hacking-Versuche unterbinden 283 Die Funktionen nl2br() und readfile() 283 Schon besser: Gstebuch Version 2 284 So vermeidest du Doppeleintrge 286 Gstebuch sicherer machen 290 Schlussbemerkung 291 Zusammenfassung 292 Ein paar Fragen 292 und ein paar Aufgaben 292

    13 Ein Adressbuch fr dein Team 295 Planung ist die halbe Miete 296 Geniales Tool: phpMyAdmin 298 Etwas SQL zum Anlegen der Datenbanktabelle 300 Die Datentypen im berblick 304 Trage ein paar Adressen ein! 307 Alle Teammitglieder da? Schaue nach! 312 Daten als HTML-Tabelle ausgeben 317 Mit PHP: Eingabeformular selbst gestrickt 327

  • 13

    Inhaltsverzeichnis

    Schlussbemerkung 332 Zusammenfassung 332 Ein paar Fragen 333 und ein paar Aufgaben 334

    14 Gstebuch de luxe als Datenbanktabelle 335 Datenbanktabelle planen 336 Daten erst einmal ausgeben 338 Das Eingabeformular entsteht 343 Mit Sicherheit: Reloadsperre und Magic Quotes 348 Nicht alle Datenstze auf einmal 354 Links fr die seitenweise Ausgabe 357 Schlussbemerkung 361 Zusammenfassung 361 Ein paar Fragen 362 und ein paar Aufgaben 362

    15 Weblog fr Kids: Das Mini-CMS 365 Pflichtenheft: Zuerst planst du das Projekt 366 Schickes Design: Die Ausgabe aller Daten 368 Datenbankabfrage: Der MySQL-Teil im berblick 372 News von Gestern? ltere Eintrge anzeigen! 375 Passwortschutz mit Cookie 377 So bindest du die Beitrge ein 379 HTML in PHP mit heredoc 380 Mehr gefllig? Hier klicken! 383 Die Funktionen strlen() und substring() 385 Schlussbemerkung 389 Zusammenfassung 389 Ein paar Fragen 390 und ein paar Aufgaben 390

  • 14

    Inhaltsverzeichnis

    16 Aktivitten verwalten: Wer kommt mit ins Kino? 391 Das Adressbuch bekommt Gesellschaft 392 Ist das noch normal? Daten aufteilen! 395 Nicht vergessen: Das Eingabeformular 399 Bitte besttige: Name und Nutzer-ID 403 Wer kommt mit? Aus zwei mach drei! 406 SQL fr Profis: Von Joins und Funktionen 411 Schlussbemerkung 416 Zusammenfassung 417 Ein paar Fragen 417 und ein paar Aufgaben 417

    17 Automatisch Geburtstagsgre versenden 419 MySQL und dein Dienstleister 420 ALTER TABLE: Neue Spalte mit ADD COLUMN 420 Vorberlegung: Pseudo-Cronjob einrichten 421 So klappts: Das Geburtstags-Skript 422 Schlussbemerkung 426 Zusammenfassung 427 Ein paar Fragen 427 und ein paar Aufgaben 428

    Anhang A: Fr Eltern und Lehrer 429

    Anhang B: Hochladen der Seiten mit FTP 431

    Anhang C 437

    Empfehlenswerte PHP-Editoren 437 PHP und MySQL lernen 438

    Stichwortverzeichnis 439

  • 15

    Vorwort

    PHP was ist das? Lass mich dazu eine kleine Geschichte erzhlen!

    Es war einmal ein Typ, der hie Rasmus. Und Rasmus hatte eine eigene Homepage. Zugegeben, das ist heute nichts Besonderes. Doch damals (1994) besaen die meisten Homepages den Charme einer verhauenen Mathearbeit. Es fehlte der Pfiff. Das rgerte unseren Helden. Kurzerhand schrieb Rasmus ein paar Befehle, um seine Homepage aufzupeppen. Eine neue Programmiersprache war geboren! Er nannte sie Personal Homepage-Tools, kurz PHP.

    Und weil PHP so einfach war, fanden sich bald ein paar andere Computer-experten, die immer mehr Pepp zu PHP hinzufgten. Gemeinsam entwi-ckelten und entwickeln sie PHP zur einer richtig coolen Homepage-Aufpepp-Sprache: Egal ob Besucherzhler oder Gstebuch alles das konnte nun mit relativ wenig Aufwand gebastelt werden.

    Wenn du dieses Buch liest, gibt es schon die PHP-Version 5.4 oder sogar schon 6 da ist in der Zwischenzeit also allerhand passiert. Auch auf deiner Homepage wird mit PHP bald allerhand passieren. Versprochen!

    Doch wozu brauchst du dieses Datenbankprogramm namens MySQL? Und was ist das genau? Das erzhle ich dir gleich! Doch vorher sprechen wir ber die Sache, um die sich im Buch (fast) alles dreht ber das Pro-grammieren.

    Was bedeutet eigentlich Programmieren?

    Programmieren ist wenn man dem Computer sagt, wo der Hase lang luft. Du gibst dem Computer Befehle, die er automatisch ausfhren muss.

    Angenommen, Lars Labertasche bestellt auf deiner Homepage drei Eimer deiner selbst gebrauten Spezial-Kaugummis mit Sprechblasen-Garantie. Dann soll der Homepage-Computer diese Bestellung an dich per E-Mail weiterleiten. Und zwar so schnell wie mglich. Damit der Computer das auch so macht wie du willst, schreibst du ihm alles vorher genau auf. Du gibst dem Rechner die entsprechenden Befehle und Anweisungen.

  • 16

    Vorwort

    Vorwort

    Und da liegt der Hase im Pfeffer: Computer verstehen kein Deutsch! Du musst wohl oder bel die Sprache der Computer lernen. Diese heit in un-serem Fall eben PHP.

    Wenn Lars hinterher doch 5 Eimer Lakritzschnecken oder 3 Sack Gem-sezwiebeln geliefert bekommt, hast du wohl einen Programmfehler ge-macht. Aber das steht auf einem anderen Blatt. Programmfehler gehren zur Programmierer-Karriere dazu wie der Geigerfleck am Kinn eines Violinspielers.

    Wozu sind Datenbanken da?

    Angenommen, dein kleines Geschft auf der Homepage startet richtig durch: Lars ist inzwischen Stammkunde geworden. Neben Lars bestellen noch Lukas, Laura, Tim, Michelle und Jan regelmig deine selbst gekoch-ten Kaugummis. Tglich kommen unzhlige Bestellungen.

    Um weniger Stress zu haben, mchtest du nicht mehr jede einzelne Bestel-lung vom Computer geschickt bekommen. Du befiehlst dem Computer, alle Bestellungen in eine Liste zu schreiben. Solch eine Liste ist aufgebaut wie eine Tabelle: Alles steht fein suberlich untereinander.

    Diese eine Tabellen-Liste wird nun als Datenbanktabelle bezeichnet. Das ist sehr bersichtlich, weil jede Bestellung in einer eigenen Zeile steht.

    Halt, da wre noch eine Kleinigkeit: Wenn du Datenbanktabellen einset-zen willst, brauchst du wieder ein spezielles Programm, das Datenbank-programm. Und hier nehmen wir MySQL. Warum? Weil MySQL viel kann, nichts kostet und sich wunderbar mit PHP vertrgt.

    Merke dir: Eine Datenbanktabelle ist eine Art Liste in Tabellenform. Sie hilft dir, deine Daten effektiver zu speichern. Du kannst sie, musst sie aber nicht einsetzen. Eine oder mehrere zusammengehrige Datenbanktabellen wer-den auch als Datenbank bezeichnet.

    Am Beispiel eines Gstebuches zeige ich dir spter, wie man es ohne und mit Datenbankuntersttzung machen kann. Apropos machen

  • 17

    Was kannst du mit PHP und MySQL alles machen?

    Was kannst du mit PHP und MySQL alles machen?

    Fast alles! Wie wre es mit einem Zhler? Dem eben erwhnten Gste-buch? Der Umfrage? Du mchtest die aktuelle Uhrzeit auf der Homepage anzeigen? Das Datum? Du willst dem Surfer mitteilen, dass er schon einmal auf deiner Homepage war. Kein Problem! berprfe, ob das Formular (z. B. fr die Kaugummi-Bestellung!) richtig ausgefllt wurde. Zeige Lars Laber-tasche alle Bestelldaten noch einmal an. Schreibe ein Programm, welches deinen fleiigen Bestellern bei jeder Bestellung eine Dankes-E-Mail schickt.

    Das Grte: Vieles davon geht sogar schon allein mit PHP. Doch ein Daten-bankprogramm wie MySQL ist dann ungeschlagen, wenn viele Informatio-nen verknpft werden mssen. Klingt kompliziert? Nehmen wir an, du er-weiterst das Angebot deines kleinen Internet-Ladens. Nun gibt es neben den Kautschis auch Lakritzschnecken mit eingebautem Drehwurm, Pfefferminzbonbons mit Anisgeschmack und andere selbst gemachte Leckereien. Wie stellst du deine Kstlichkeiten ins Netz? Du trgst alle Da-ten fein suberlich untereinander in eine weitere Datenbanktabelle ein.

    Es gibt also eine extra Liste fr deine Sigkeiten und eine weitere Liste fr die Bestellungen. Das macht es fr den Computer einfacher, die Daten zu verwalten, weil alles wunderbar geordnet ist.

    Doch damit nicht genug. Weise den Computer an, Bestellung und Adress-daten in getrennten Tabellen zu fhren. Das ist ungeheuer praktisch, denn nun muss Lars seine Daten nicht bei jeder Bestellung neu eingeben. Er be-kommt einfach eine Nummer und wird jedes Mal anhand dieser Nummer vom Computer wiedererkannt.

    Lange Rede, kurzer Sinn: Im Endeffekt hast du ein richtiges kleines Sys-tem von miteinander verknpften Datenbanktabellen. Fr jeden Zweck gibt es die passende Tabelle: Eine fr die Produkte, eine fr die Kunden und eine fr die Bestellungen. Alle Tabellen gehren zusammen: Das ist ungeheuer praktisch und effektiv. Damit hast du eine tolle Datenbank geschaffen!

    Wenn du dieses Prinzip verstanden hast, kannst du praktisch alles mit PHP und MySQL machen. Und dieses tolle Prinzip schauen wir uns in den letz-ten Kapiteln des Buches und auch im Fortsetzungsband PHP und MySQL Praxisbuch fr Kids etwas nher an.

  • 18

    Vorwort

    Vorwort

    Was ist ein Webserver und wozu brauchst du den?

    Was zum Teufel ist denn nun der Webserver? Es ist dein Homepage-Computer. Also der Rechner, auf dem deine Homepage liegt. Moment mal, denkst du hier vielleicht. Meine Homepage liegt doch z. B. auf mei-nem Rechner daheim. Dort habe ich sie erstellt und dort kann ich sie mir jederzeit ansehen.

    Das stimmt schon, an deinem Rechner kannst du deine Homepage sehen. Und du kannst sie deinen Kumpels zeigen. Doch damit alle etwas von dei-nen Seiten haben, musst du diese erst auf den Homepage-Computer im Web hochladen. Also auf den sogenannten Webserver.

    Das Wort Server kommt vom Englischen to serve. Das bedeutet soviel wie dienen. Der Webserver ist der Diener im Web. Hier liegen die Websei-ten, die Homepages. Der Webserver dient so allen Besuchern. Denn die Besucher knnen die Seiten nun vom Webserver abrufen und mit ihrem Browser betrachten.

    Der Webserver sorgt brigens auch dafr, dass PHP und MySQL richtig gut funktionieren. Er fhrt also die von dir aufgeschriebenen Programmbefehle aus. Erst dann zeigt er dem Besucher die gewnschte Seite.

    Der bekannteste und beste Webserver heit brigens Apache. Ja richtig, Apache wie der gleichnamige Indianerstamm. Bei solch einem tollen Na-men muss die Sache ziemlich cool sein. Das ist sie auch! Die Arbeit mit PHP, MySQL und dem Apachen macht irrsinnigen Spa. How!

    Wie arbeitest du mit diesem Buch?

    Lahmes Lesen ist out, Selbermachen ist in: Dieses Buch enthlt nicht nur sturen Text und de Programmanweisungen, sondern vor allem Beispiele, Tipps und Tricks. Mitmachen ist also Pflicht. Es lohnt sich!

    Doch wenn du mal keine Lust zum Abschreiben hast (oder dich immer wie-der verschreibst), ist das auch nicht schlimm! Ich habe dir alle Beispiele auf die CD gepackt. Ansonsten zeige ich dir schnell noch, welche Symbole be-sonders wichtig sind.

  • 19

    Was brauchst du fr dieses Buch?

    Arbeitsschritte

    > Wenn du dieses Zeichen siehst, heit das: Achtung, Action! Es gibt etwas zu tun. Schreibe eine Programmzeile, whle einen Befehl oder fhre einen Indianer-Freudentanz auf, weil dein Programm endlich funktioniert.

    Stolperfallen und Rettungsringe

    Dieses Symbol findest du dagegen immer dann, wenn es problematisch wird. Hund Buffi hilft dir, Stolperfallen von vornherein zu umgehen. Lies also besonders grndlich, wenn du auf dieses Zeichen stt. Vielleicht ist das ja gerade der Rettungsring, den du in diesem Moment brauchst? Aber auch Tipps und Tricks bauen wir in solche Ksten ein.

    Besonders wichtige Stellen im Buch

    Immer wenn solch ein Ausrufezeichen am Textrand erscheint, wird es besonders wichtig. Du solltest den entsprechenden Kasten vielleicht zweimal lesen.

    Fragen und Aufgaben Wiederholung ist die Mutter der Porzellankiste (oder so hnlich). Deshalb gibt es am Ende jedes Kapitels ein paar Fragen und ein paar Aufgaben. Wie heit es so schn: bung macht den Meister. Die Antworten und die L-sungen zu den Aufgaben findest du auf der beiliegenden CD.

    Was brauchst du fr dieses Buch?

    Nun, einen Platz im Bcherregal. Spa beiseite, natrlich einen Computer! Es muss nicht einmal der allerneuste Rechner sein. Hauptsache Windows und ein Internet-Browser sind vorhanden. Wir geben uns dabei ganz be-scheiden, es mssen nicht die neusten Versionen sein. Du kannst sogar noch Windows 98 verwenden. Oder natrlich Windows 2000, Me bzw. das aktuelle Windows XP. Vom Prinzip her ist das Vorgehen bei allen Versionen gleich. Sollte es hier Unterschiede geben, mache ich dich rechtzeitig darauf aufmerksam.) Bei den Browsern ist Firefox sicher die beste Wahl, aber auch der Internet Explorer, Opera, Safari oder Google Chrome sind geeignet.

  • 20

    Vorwort

    Vorwort

    Alles andere findest du auf der CD! Mehr brauchst du nicht! Tatsache, um den Rest musst du dich nicht km-mern. Auf CD liefern wir dir alles andere mit, damit du sofort loslegen kannst. Hier findest du unter anderem:

    0 PSPad eine sehr gute Windows-Freeware zum Erstellen von Homepa-ges mit PHP, ein Programm vom Ja Fiala.

    0 Aptana Studio, die auf Java basierende Alternative fr Nutzer von Linux und Mac OS. (Aber auch fr Windows-Nutzer!)

    0 PHP selbst (zum Programmieren der dynamischen Webseiten) und MySQL (das Datenbankprogramm, um mit Datenbanktabellen Ordnung zu schaffen)

    0 phpMyAdmin (eine Art grafische Oberflche fr MySQL, damit du Da-tenbanken und Tabellen bequem einrichten kannst)

    0 Apache-Webserver (damit du alles auf dem eigenen Computer auspro-bieren kannst und so tust, als ob du einen eigenen Webserver httest. How!)

    0 XAMPP: Ein Super-Programm, welches dir alle bisher genannten Sachen fast vollautomatisch auf deinem Rechner einrichtet

    0 FileZilla, ein Programm zum Hochladen deiner Homepage auf den Web-server

    0 SELFHTML, eine schon fast zu profimige Einfhrung in HTML, die Sprache zum Erstellen von Homepages

    0 NotePad++, ein flinker Windows-Editor zum schnellen Bearbeiten von PHP-Dateien.

    Wie gut kommst du mit dem Computer klar?

    Du solltest dich schon ein wenig mit dem Computer auskennen. Du kommst mit Maus und Tastatur klar? Prima! Dann kann kaum etwas schief gehen. Wenn du zustzlich noch weit, was Ordner sind und wie man diese anlegt, gehrst du schon in die Profi-Liga. (Und wenn nicht, ist das halb so wild, ich zeige es dir.) Im Notfall fragst du einfach deine Freunde, Geschwister oder Eltern. Vielleicht kennen die sich ja aus. Oder sie spendieren dir ein anderes Buch aus der Reihe fr Kids? Zum Beispiel PCs fr Kids (zu Windows Vista) von Hans-Georg Schumann.

  • 21

    Wie gut kommst du mit dem Computer klar?

    Was ist neu in Auflage 4 und 5? Fnf Auflagen in fnfeinhalb Jahren das htte sich der Autor dieses Bu-ches nicht trumen lassen. Die erste Auflage erschien 2003, die fnfte 2008. Vielen Dank fr das groe Vertrauen! Wir freuen uns riesig ber die-sen Erfolg. Grund genug, den gesamten Inhalt kritisch zu berprfen und behutsam zu modernisieren.

    Soviel vorweg: Schon in der vierten Auflage von 2007 gab es umfangreiche Neuerungen, Ergnzungen und Erweiterungen! Hier ging es vor allem um das Thema Sicherheit. Die fnfte Auflage haben wir nochmals durchgese-hen und an vielen Stellen verbessert.

    Wichtig: Das Thema Sicherheit Besonders das Thema Sicherheit spielt inzwischen eine immer wichtiger werdende Rolle. Die Spamattacken werden immer heftiger, die Hacker im-mer dreister. Selbst groe Programme wie das Content-Management-System Joomla oder Foren wie phpBB werden bzw. wurden Opfer von Ha-ckerattacken. Aus diesem Grund haben wir schon fr Auflage 4 alle Skripte auf Sicherheit hin berprft und in manchen Fllen etwas erweitert. Au-erdem geben wir dir an vielen Stellen wertvolle Tipps und Tricks, wie du deine Skripte von vorn herein gegen Angriffe von auen schtzen kannst.

    Sicherheit ist ein Prozess, kein Zustand. Was heute noch als sicher gilt, kann morgen mglicherweise schon erfolgreich gehackt werden. Auch ist der Aufwand fr absolut sichere Skripte so hoch, dass du alleine fr ein wirklich sicheres Gstebuch mehrere hundert Zeilen Code schreiben msstest. Wir versuchen, den Mittelweg zu finden zwischen einfacher Verstndlichkeit und Durchschaubarkeit auf der einen Seite und Sicher-heit der Skripte auf der anderen Seite. Man kann es noch immer und immer ein Stckchen aufwendiger treiben. Aber an irgendeiner Stelle muss dann auch Schluss sein.

    Videoworkshops In Auflage 4 haben wir erstmals Videoworkshops eingefgt. In diesen Vi-deos fhren wir dir beispielsweise die Installation von PHP und MySQL mit dem Tool XAMPP vor, damit du sofort mit dem Programmieren lose-legen kannst. Du findest alle Videos im Ordner videos. Rufe die Datei index.html auf. Die Videos liegen im Flashformat vor. Mehr Informati-onen findest du in der Datei liesmich.txt.

  • 22

    Vorwort

    Vorwort

    Was ist neu in Auflage 6?

    Wenn du dich bisher gewundert hast, kann ich dich beruhigen: Du hast das richtige Buch erwischt. Vor dir liegt tatschlich schon die sechste Auflage von 2010. Und das kam so: Kurz vor Weihnachten 2009 erreichte mich der Hilferuf aus dem Verlag: Wir haben nur noch ganz wenige Exemplare auf Lager. Der Titel ist schneller ausverkauft als gedacht. Wir wrden das Buch am liebsten sofort in einer neuen Auflage drucken!

    Sofort war ein echtes Problem. Denn fr eine weitere Auflage hatte ich mir ganz heftige Aktualisierungen vorgenommen. Ich wollte die Inhalte im Buch grundlegend modernisieren und meine Anleitungen fr die Zukunft fit machen. Das bedeutet:

    0 Alle HTML- bzw. PHP-Dateien mssten im immer weiter verbreiteten Universalzeichensatz Unicode (UTF-8) gespeichert werden. Denn viel-leicht mchtest du auch einmal fremdsprachige Seiten mit allen mgli-chen Sonderzeichen erstellen und pflegen? Mit UTF-8 kannst du selbst Chinesisch rckwrts darstellen, deutsche Umlaute und Sonderzeichen sowieso. Und da inzwischen auch MySQL die Daten im Format UTF-8 si-chert, wre das auch aus diesem Grund sehr wichtig.

    0 Dafr msste ich einen neuen, Unicode-fhigen PHP-Editor finden, denn der gute alte Weaverslave von Thomas Weinert (der Editor der ers-ten fnf Auflagen) wre mit dem Thema UTF-8 leider berfordert. Scha-de, Thomas, dass du noch keine Zeit zum Aktualisieren hattest! Schn, dass ich mit PSPad von Jan Fiala einen guten Ersatz gefunden habe.

    0 Auerdem msste ich beim Thema Datenbankzugriff auf die moderne-ren PHP 5-Funktionen zurckgreifen. Schon aus Sicherheitsgrnden! PHP 5 ist inzwischen der Mindeststandard, praktisch alle Anbieter ha-ben von PHP 4 auf PHP 5 umgestellt! Und veraltete Techniken gehren nun mal nicht in ein PHP- und MySQL-Lehrbuch. Eine Menge Arbeit im Interesse der Sicherheit!

    0 Die Installation des sogenannten lokalen Webservers (wir verwenden im Buch XAMPP) hat sich gendert. Auch hier msste ich eine komplett neue Anleitung schreiben.

    0 Auch die Informationen zu den Dienstleistern msste ich aktualisieren, denn innerhalb eines Jahres kann viel geschehen.

    0 Weiterhin wre es schn, wenn ich mehr Tipps fr Mac- und Linux-Nutzer einbauen knnte, denn vor allem der Apple Macintosh gewinnt immer mehr Freunde. (Auch wenn es nur bei Tipps bleiben wird fr ausfhrliche Anleitungen fehlt leider der Platz.)

  • 23

    Was ist neu in Auflage 6?

    Nun, was soll ich dir schreiben: Ich habe es geschafft! Die vollstndig aktu-alisierte 6. Auflage liegt vor dir. Weihnachtsbaum, Kerzenschein und Be-scherung sind ausgefallen Silvesterparty und Katerfrhstck auch! Dafr habe ich Tag und Nacht geschrieben, recherchiert, Code getippt und Code geprft. Bis kurz vor dem Drucktermin. Denn das bin ich dir schuldig eine gut verstndliche PHP-Anleitung auf der Hhe der Zeit.

    Und wenn das Buch so gut ankommt wie die Vorauflagen, hat sich die M-he auf jeden Fall gelohnt! Danke fr dein Vertrauen!

    Danke auch an die vielen, vielen Leser, die mir Tipps, Korrektur- und Ver-besserungsvorschlge geschickt haben. Ganz besonderer Dank geht an Sandra, Jonas und vor allem an Falk Joensson (http://jcoud.de). Gerade du, Falk, hast mir mit deinen umfangreichen Korrektur- und Verbesse-rungsvorschlgen sehr geholfen. Nobody is perfect und ich schon gar nicht. Wie gut, dass es solche aufmerksamen Leser gibt wie dich!

    Das Betriebssystem spielt keine Rolle! Wundere dich nicht, wenn im Buch mal der eine oder andere Browser auf-taucht. Der Grund ist ganz einfach: Ich habe die Anleitungen auf verschie-denen Rechnern getestet. Ich zeige dir sowohl Abbildungen vom Internet Explorer 8 unter Windows 7 als auch Bildschirmfotos des alten Internet Explorer 6 aus Windows XP. Auch Firefox ist natrlich vertreten.

    Warum diese Vielfalt? Du sollst sehen, dass das Ergebnis nicht vom Be-triebssystem oder Browser abhngt. HTML, PHP und MySQL sind plattform-unabhngig, sie laufen berall! Selbst auf dem Macbook Pro mit Snow Leopard oder dem altersschwachen Schulrechner mit Windows 2000 oder Linux. Im Web beim Dienstleister sowieso und der arbeitet in der Regel unter Linux! Hauptsache, du hast das richtige Webserver-Programm und den passenden Code-Editor.

    Apropos Code-Editor: Da die meisten Leser mit Windows arbeiten, kommt der im Buch vorgestellte Code-Editor PSPad aus der Windows-Welt. Er ist schlank und schnell und luft daher auch auf lteren Rech-nern. Du kannst den Anleitungen jedoch auch an Macs oder Linux-Rechnern folgen. Verwende lediglich ein anderes Entwicklungswerkzeug, einen anderen Editor. Programmcode und Ergebnis bleiben gleich. Fr Mac- und Linux-Nutzer empfehle ich Aptana Studio. Du findest dieses Tool auf der CD im Ordner programme/aptana. Aptana Studio ist sehr leistungsfhig, bentigt dafr aber einen schnellen Rechner.

  • 24

    Vorwort

    Vorwort

    Wo gibts Hilfe, wenn es mal klemmt?

    Melde dich einfach! Fr dieses Buch hat der Autor eine eigene Serviceseite im Web eingerichtet. Surfe zu www.phpkid.de! Hier findest du ein Forum, wo du mit anderen Lesern diskutieren und dir Hilfe holen kannst. Weiterhin listen wir brandheie Tipps und Tricks zu Dienstleistern auf und informieren dich zu nderungen nach dem Druck. Auerdem kannst du Fragen stellen, die wir dir dann hoffentlich schnell beantworten. Und du findest evtl. Feh-lerberichtigungen, denn auch Autoren sind nur Menschen.

    Du hast Lust bekommen auf mehr? Dann legen wir dir die Fortsetzung dieses Titels namens PHP und MySQL Praxisbuch fr Kids (2. Auflage) sehr ans Herz. Dabei stehen auf dem Programm: ein komplettes Forum mit Userverwaltung, das Schreiben eines RSS-Feedreaders, ein komfor-tables Fotoalbum und sogar das Planen und Programmieren eines Con-tent-Management-Systems. Ganz nebenbei schnupperst du sogar noch ein wenig Objektorientierungsluft und lernst, wie man richtig guten Co-de schreibt. Gleicher Autor, gleicher Verlag, gleicher Preis.

    Voil - jetzt geht es aber los mit PHP und MySQL! Doch zuvor lernst du noch etwas HTML und CSS. Gleich auf den nchsten Seiten. Einverstanden?

  • 25

    1 Deine coole Homepage mit HTML

    Auf los gehts los! Wenn du mit PHP programmieren willst, musst du HTML knnen. HTML ist schlielich die Sprache, mit der eine Homepage geschrie-ben wird. Ohne HTML macht PHP keinen Sinn. Du kannst noch kein HTML? Nicht schlimm! In diesem Kapitel lernst du das Wichtigste zum Thema. Glaube mir, es ist kinderleicht. Na ja, fast

    Du kannst schon HTML? Umso besser! Mache trotzdem mit, denn in diesem Kapitel zeige ich dir ein super Programm: einen sogenannten HTML- und PHP-Editor. Und ich verrate dir, wie du dein Projekt am besten organisierst.

    In diesem Kapitel lernst du,

    $ wie man eine HTML-Seite erstellt

    $ wie man berschriften und Abstze notiert

    $ wie man Grafiken in die Seite einfgt und mit Farben arbeitet

    $ wie man Querverweise setzt, die Hyperlinks

    $ wie man Tabellen erstellt

    $ wie man der Seite mit Style Sheets ein schickes Layout verpasst

    Doch bevor es losgeht, besprechen wir gleich zu Beginn ein paar Dinge, die verdammt wichtig sind.

  • 26

    Deine coole Homepage mit HTML

    Kapitel

    1 Richte dir einen Projektordner ein! Ordnung ist das halbe Leben, geht dir dieser Spruch auch so auf die Nerven wie mir? Dabei kann ein wenig Ordnung im Nachhinein viel Zeit sparen! Und schon sind wir beim Thema Ordner. Richte dir zuerst einen Projektord-ner fr deine Experimente ein. Diesen nennen wir phpkid und legen ihn direkt unter der FESTPLATTE C: ab!

    Projektordner phpkid einrichten Wie geht das? Ganz einfach!

    > Starte zuerst den Windows Explorer. Die coolste Methode: Du hltst die Taste [Win] auf deiner Tastatur gedrckt. Das ist in der Regel die zweite oder dritte Taste von links in der unteren Reihe. Du erkennst sie am Windows-Logo. Jetzt tippst du mutig und unverzagt ein [E] wie echt einfach oder wie Explorer. Zack schon startet das Ordner-Verwaltungs-Programm namens Windows Explorer.

    > Was nun, sprach das Huhn? Achte darauf, dass dein Laufwerk C: (die Festplatte) markiert ist. Klicke also auf der linken Seite auf das Sym-bol fr deine FESTPLATTE. Es befindet sich unterhalb des Symbols COMPUTER (Windows 7 bzw. Vista) bzw. ARBEITSPLATZ (Windows XP).

    > Und nun richtest du deinen Ordner ein. In Windows 7 klickst du ein-fach auf die Schaltflche NEUER ORDNER:

    In Windows Vista gibt es diese praktische Schaltflche leider noch nicht. Dort klickst du auf den Meneintrag ORGANISIEREN und whlst den Me-npunkt NEUER ORDNER. In Windows XP und Windows 2000 ist der Weg noch etwas lnger. Du klickst im Men DATEI auf den Befehl NEU. Ein weiteres Men klappt zur Seite. Whle hier den Befehl ORDNER.

  • 27

    Richte dir einen Projektordner ein!

    > Jetzt erscheint ein Platzhalter-Ordner mit der Bezeichnung Neuer Ordner. Dieser Platzhaltername ist markiert. Du kannst ihn also direkt berschreiben. Klicke noch nirgends, sondern tippe einfach los. Tippe den Namen des neuen Ordners, im Beispiel phpkid.

    > Geschafft? Dann drcke einfach [Enter]! Fertig ist der neue Ordner. Suche doch einmal deinen neuen Ordner. Du findest ihn im linken Bereich des Windows-Explorers. Er wird alphabetisch zwischen den anderen Ord-nern einsortiert. Sollte dein Ordner nicht gleich zu sehen sein, ist das nicht schlimm. Der Windows Explorer ist manchmal ein langsamer Geselle, er vergisst das Aktualisieren der Ansicht. Hilf etwas nach, drcke auf die Funktionstaste [F5] auf deiner Tastatur.

    Hoppla, du hast dich beim Ordnernamen verschrieben? Oder der Ordner wurde an der falschen Stelle eingerichtet? Kein Problem! Wenn du einen Ordner umbenennen willst, klickst du ihn kurz an. Drcke nun die Funk-tionstaste [F2]. Schon ffnet sich der Ordnername und du kannst ihn korrigieren. Besttige die Umbenennungsaktion wieder mit [Enter]. Na-trlich lsst sich so ein Ordner auch lschen. Markiere ihn und drcke die Taste [Entf] auf deiner Tastatur. Schon ist der Ordner weg!

    Einen weiteren Unterordner einrichten Weil das so gut geklappt hat, machen wir es gleich noch einmal. Erstelle diesmal einen Unterordner namens html. Dieser Ordner soll direkt unter-halb von phpkid entstehen. Diesen neuen Ordner nutzen wir fr unsere ersten Gehversuche mit HTML.

    > Markiere den Ordner phpkid im Windows Explorer. Klicke ihn also im linken Bereich an.

    > Whle nun wieder NEUER ORDNER (ORGANISIEREN|NEUER ORDNER bzw. DATEI|NEU|ORDNER) und richte den Unterordner html ein.

    Gewhne dir bei der Namensgebung fr Ordner und Dateien generelle Kleinschreibung an. Die Ordner sollen also phpkid und html und nicht Phpkid und Html heien. Das ist deshalb so wichtig, weil der Webserver (Homepage-Computer) spter ganz pingelig zwischen Gro- und Klein-schreibung unterscheiden wird. Und wenn du hier etwas vermischst, wird die Homepage im Web nicht oder nicht richtig angezeigt. Bei genereller Kleinschreibung kann hier jedoch nichts anbrennen. Okay?

  • 28

    Deine coole Homepage mit HTML

    Kapitel

    1 Bitte blende die Dateiendungen ein! rgert dich auch, dass du unter Windows die Dateiendungen normalerwei-se nicht siehst? Jede Datei hat ja eine typische drei- bis vierstellige Endung, die nach einem Punkt an den eigentlichen Dateinamen angehngt wird. Mit .doc kennzeichnet man Word-Dateien, .txt steht fr Textdateien, .html fr HTML-Dateien und .php fr PHP-Dateien.

    Normalerweise siehst du diese Endungen nicht. Das ist sehr rgerlich, denn wir brauchen sie! Fr unseren Kurs musst du die Dateiendungen unbedingt eingeschaltet haben!

    > Rufe den Windows Explorer auf. Wie ging das noch? Halte dafr bei-spielsweise die [Win]-Taste auf deiner Tastatur gedrckt und tippe kurz ein [E]. Whle nun im Men ORGANISIEREN den Befehl ORDNER UND SUCHOPTIONEN. (Windows XP: EXTRAS|ORDNEROPTIONEN.)

    > Geschafft? Das Dialogfenster Ordneroptionen erscheint. Gehe ins Register ANSICHT, es ist das zweite Register.

    > Suche nach einer Option, die je nach Windows-Version folgenderma-en heit: Erweiterungen bzw. Dateinamenerweiterungen bei bekann-ten Dateitypen ausblenden. Sie ist abgehakt. Nimm das Hkchen weg!

    > Besttige deine Einstellungen durch Klick auf OK. Nun siehst du bei allen Dateinamen auch die typische Endung und weit genau, um welchen Dateityp es sich handelt.

    Nimm das entsprechende Hkchen weg, klicke es einfach an!

    HTML auf Knopfdruck mit PSPad

    Vorhang auf, die Show beginnt. Nele, Tim und Buffi, Jan (Programmautor) und ich (Buchautor) prsentieren: PSPad, den freien Code-Editor fr Win-dows! Es handelt sich praktisch um ein Programm zum Schreiben deiner Homepage. Neben HTML beherrscht PSPad aber auch PHP und andere Pro-grammiersprachen. Geschrieben hat das tolle Programm Jan Fiala, die Homepage von PSPad findest du unter www.pspad.com.

  • 29

    HTML auf Knopfdruck mit PSPad

    So wird PSPad installiert PSPad liegt auf der CD fr dich bereit! Die Installation ist kinderleicht und erfolgt Schritt fr Schritt per Setup Wizard (Installationsassistent).

    > Starte den Windows Explorer, z. B. durch Gedrckthalten von [Win] (die Taste mit dem Windows-Logo) und kurzem Tippen von [E]. Schaue in den linken Bereich des Windows Explorers. Gehe zum Laufwerk fr die CD und hangele dich durch bis zum Unterordner programme/pspad.

    > Hier siehst du die Datei pspad454inst_en.exe. Doppelklicke auf diese Datei. Je nach Windows-Version erscheinen erst warnende Dia-logfenster, die du besttigen musst. Klicke z. B. auf AUSFHREN bzw. JA.

    > Geschafft? Das Fenster Welcome to the PSPad Editor Setup Wizard ist erschienen? Prima! Folge den Schritten der Installation.

    > Klicke auf NEXT, um zum nchsten Bildschirm zu gelangen. Klicke vor I accept the agreement. Nun klickst du erneut auf die Schaltflche NEXT und hangelst dich Schritt fr Schritt durch die gesamte Installa-tion!

    > Klicke also immer wieder auf NEXT. Die Voreinstellungen gehen in Ordnung, die kannst du stets bernehmen.

    > NEXT verschwindet, die Schaltflche INSTALL erscheint? Dann hast du eine weitere Etappe auf deinem Weg erreicht. Klicke auf INSTALL jetzt endlich wird das Programm auf deiner Festplatte eingerichtet!

    > Klicke zum Schluss auf FINISH. Das Programm startet ganz automa-tisch und zwar auf Deutsch!

    Wenn du das entsprechende Hkchen im letzten Schritt belassen hast, legt PSPad automatisch eine Verknpfung auf dem Desktop an. Auerdem er-scheint es als Programmeintrag in der sogenannten Schnellstartleiste rechts neben der START-Schaltflche! Das ist wirklich genial!

  • 30

    Deine coole Homepage mit HTML

    Kapitel

    1 Eine HTML-Datei erstellen PSPad ist gestartet? Jetzt erstellst du im Handumdrehen deine erste HTML-Seite. Doch vorher sollten wir uns noch fr die richtige HTML-Variante entscheiden. Ich schlage das klassische HTML 4 vor.

    Hast du schon etwas Ahnung von HTML? Fragst du dich auch, welches die richtige HTML-Schreibweise sei? Die klassische oder die Neufor-mulierung namens XHTML mit strengeren Regeln? Fakt ist, dass die Ent-wicklung von XHTML als eigenstndige Sprache gerade erst eingestellt wurde. An HTML 5 dagegen wird fleiig gewerkelt der Klassiker lebt also weiter. Zwar wird es auch von HTML 5 wieder eine strengere XHTML-Variante geben. Aber eben nur als alternative Syntax. Wir blei-ben daher im Buch bei der Schreibweise der bewhrten, klassischen Ver-sion 4.01 und zwar ohne X vor dem HTML.

    Und so erzeugst du in PSPad eine Musterseite im klassischen HTML 4.01:

    > Whle im Men DATEI den Befehl NEU. Das Dialogfenster Neu er-scheint. Klicke auf die Registerzunge Neue Datei aus Vorlage erstellen.

    > Scrolle zum Zweig HTML und klicke auf den Eintrag HTML 4.01 Transi-tional. Klicke danach auf BEARBEITEN, nicht auf OK. (OK wrde eine neue HTML-Seite in den Editor einfgen, die auf diesem Grundgerst beruht. Doch das Grundgerst ist noch nicht ganz perfekt!)

    Klicke auf die Schaltflche Bearbeiten, noch nicht auf OK.

    > Du hast auf BEARBEITEN geklickt? Super! Jetzt erscheint das eben er-whnte Grundgerst. Und zwar direkt als Vorlage! Du kannst und musst diese Grundgerst-Vorlage wunschgem ndern.

  • 31

    HTML auf Knopfdruck mit PSPad

    Die HTML-Vorlage von PSPad anpassen So sieht es aus das HTML-Grundgerst. Fr meinen Geschmack gibt es noch einige Schnheitsfehler. Und bevor wir die einzelnen Zeilen genauer betrachten, merzen wir diese Schnheitsfehler einfach aus.

    Die von mir gezeigten Zeilennummern sind bei dir in PSPad nicht sicht-bar? Whle ANSICHT/ZEILENNUMMERIERUNG.

    1 2 3 4 5 6 Untitled 7 8 9 10 11

    Soviel vorweg: HTML besteht aus Text, der durch sogenannte Tags gesteu-ert wird. Jedes Tag steht in spitzen Klammern. Es gibt in der Regel ein Tag zum Einschalten und eins zum Abschalten. Das Abschalt-Tag bekommt zustzlich einen Slash (/) vorangestellt.

    Die Taste mit den spitzen Klammern findest du links unten auf der Tasta-tur. Drcke [ musst du zustzlich die []-Taste gedrckt halten.

    Die Dinge, die mich stren, habe ich unterstrichen. Es sind zum Glck nicht viele. In Zeile 2 nderst du das cs in de. (Es sei denn, du mchtest deine Webseiten auf Tschechisch erstellen. Unser Programmautor Jan stammt aus Tschechien, das ist der Grund fr cs.)

    Die Passage windows-1250 am Ende von Zeile 4 ersetzt du durch utf-8. UTF-8 ist der Universalzeichensatz, der die Zeichen aller wichtigen Spra-chen enthlt. Damit decken wir einen viel weiteren Bereich an Sprachen ab als mit dem Windows-Zeichensatz. Schlielich ist Windows nicht der Nabel der Welt!

  • 32

    Deine coole Homepage mit HTML

    Kapitel

    1 Zeile 5

  • 33

    HTML auf Knopfdruck mit PSPad

    Eine HTML-Datei erstellen Voil jetzt endlich erzeugst du eine HTML-Seite. Whle wieder DATEI|NEU, Register Neue Datei aus Vorlage erstellen. Navigiere erneut zum Zweig HTML und diesmal doppelklicke gleich auf HTML 4.01 Transitional. (Mar-kieren und Klick auf OK geht auch.) Erneut entsteht das oben gezeigte, ideale Grundgerst einer HTML-Datei. Allerdings nicht als Vorlage, sondern gleich als HTML-Datei. Und die schauen wir uns jetzt etwas genauer an!

    Die lange Zeile 1 ist eine Ausnahme, eine reine Formalie. Dahinter steckt die sogenannte Dokumenttypdeklaration (kurz DTD). Damit zeigen wir, dass es sich um HTML in der Version 4.01 handelt (bergangsfassung). Zu lang, das Biest? Von dieser DTD gibt es zum Glck auch eine Kurzform:

    Aus Platzgrnden verwende und zeige ich im Buch ab Kapitel 2 nur noch die Kurzform. Soviel vorweg: In HTML 5 soll das ganze DTD-Gebilde dras-tisch verkrzt werden: . Zum Glck!

    Der eigentliche Beginn steckt im Tag , hier geht es los. Wie die meisten Tags tritt auch dieses Tag paarweise auf: Auf das Einschalt-Tag folgt ein Ausschalt-Tag. In Zeile 10 wird das Tag per wieder abgeschaltet! Im Tag befindet sich das Attribut lang mit dem Wert de. Damit zeigen wir, dass diese Webseite in Deutsch verfasst ist.

    Als nchstes folgt der Kopf, der Head. Dieser steckt zwischen den Tags , also zwischen Zeile 3 und Zeile 6. Wichtig ist der Titel (). Was du zwischen diesen Tags notierst, erscheint spter in der Titelzeile des Browsers. Also in der blauen Leiste ganz oben.

    > Trage hier doch einmal etwas Sinnvolles ein. Ersetze Hier Titel eintra-gen einfach durch den Text Homepage von Computerhund Buffi!

    Was bedeutet Zeile 5? Mit diesem sogenannten Meta-Tag lege ich den Zeichensatz fest. Mit charset=utf-8 sorge ich dafr, dass du mit Umlau-ten wie , , und dem arbeiten kannst. Ein Ausschalt-Tag ist in diesem Fall ausnahmsweise nicht ntig. Meta-Tags treten nicht paarweise auf.

    Frher wurden Umlaute und Sonderzeichen wie das umschrieben. Statt schrieb man z. B. und aus wurde usw. usf. Das wurde durch ersetzt. Dank utf-8 ersparen wir uns diese Qual und ermglichen den Einsatz praktisch beliebiger Zeichen. Deine Homepage ist damit gleich gut gerstet fr alle Sprachen der Welt!

  • 34

    Deine coole Homepage mit HTML

    Kapitel

    1 In Zeile 7 wird der Krper des Dokuments eingeschaltet, der sogenannte Body. Zeile 9 schaltet den Body wieder ab. Speichern nicht vergessen! Vergiss nicht, dein Projekt zu speichern. HTML-Dokumente sind Textdoku-mente. Sie werden mit der Endung htm bzw. html versehen. Ich schlage den Namen index.html vor. Warum? Eine Hauptseite wird in aller Regel index.html genannt!

    Und so speicherst du in PSPad:

    > Whle im Men DATEI den SPEICHERN-Befehl (oder tippe die Tasten-kombination [Strg] + [S], das geht viel fixer!). Das Dialogfenster zum Speichern erscheint, der Fokus steht auf dem Feld Dateiname.

    > Tippe den Dateinamen ein, im Beispiel index.html. Navigiere zu dem Ordner, in dem du speichern mchtest. Im Beispiel gehst du zu C:\phpkid\html im Feld Speichern in muss jetzt html stehen.

    > Klicke auf SPEICHERN, um die neue HTML-Datei zu sichern.

    Achte darauf, die Datei im richtigen Ordner abzulegen!

    > Schaue in den linken Bereich, zum Toolfenster mit dem Mini-Explorer. Diesen Mini-Explorer erreichst du ber das zweite Register. Navigiere hier zu dem Ordner, in dem du gespeichert hast. Im Beispiel gehst du zu C:\phpkid\html und klickst den Ordner html an.

    > Im unteren Bereich des Toolfensters findest du die Dateiliste. Hier sollte die index.html als Symbol zu sehen sein. Hat es geklappt?

    Du kannst dieses pfiffige Toolfenster auch ausblenden. Whle AN-SICHT|TOOLFENSTER oder die Tastenkombination [Strg] + [F2]. Eine erneu-te Wahl dieses Befehls blendet das Toolfenster wieder ein.

  • 35

    So wirds perfekt: berschriften, Abstze und mehr

    So wirds perfekt: berschriften, Abstze und mehr

    Und, wie schauts aus? Bewundere deine Seite doch einmal in der Vor-schau! Dafr bietet dir PSPad folgende zwei Mglichkeiten:

    ffnen im internen Browser Das ffnen im internen Browser ist ganz einfach. Drcke die Funktionstaste [F10], klicke das Weltkugel-Symbol an oder whle HTML|VORSCHAU IM IN-TERNEN BROWSER. Schon ffnet sich ein neues Fenster und zeigt deine Seite.

    Noch besser jedoch ist die externe Browservorschau. Dabei ffnet sich der Browser in einem eigenen Fenster und du hast den vollen berblick. Nur hier wird auch der ungeheuer wichtige Seitentitel dargestellt, also der Text zwischen den Tags .

    ffnen im externen Browser Schaue in den linken unteren Bereich, zum Toolfenster. Whle oben das zweite Register, das mit dem Ordnersymbol. Achte darauf, dass der Ordner

    html unter phpkid markiert ist. Schaue dann etwas tiefer und zwar dorthin, wo die einzelnen Dateien des markierten Ordners angezeigt werden.

    Klicke mit der rechten Maustaste auf die zu ffnende Datei, rechtsklicke im Beispiel also auf index.html. Das Kontextmen erscheint. Whle ganz oben den

    Befehl FFNEN. Die HTML-Seite wird im Standardbrowser geffnet, in aller Regel ist das der Internet Explorer, bei mir jedoch der Firefox.

    Du mchtest einen anderen Browser whlen? Dann verwende den Befehl FFNEN MIT und suche den anderen Browser heraus. Der Browser ist nicht aufgelistet? Suche ihn aus dem Dateisystem deiner Festplatte heraus. Das gelingt beispielsweise ber die Schaltflche DURCHSUCHEN bzw. PROGRAMM AUSWHLEN. Mozilla Firefox liegt in der Regel unter dem Pfad C:\Programme\Mozilla Firefox.

  • 36

    Deine coole Homepage mit HTML

    Kapitel

    1

    Die HTML-Seite in der externen Vorschau. Als Browser habe ich den Firefox gewhlt.

    Die Seite ist leer, aber der Seitentitel von Zeile 4 steht schon da. Wo? Na ganz oben in der Titelzeile des Browsers. Dort steht nun ebenfalls Home-page von Computerhund Buffi.

    Du wunderst dich, warum bis jetzt noch kein Inhalt im Dokument zu se-hen ist? Du hattest doch noch nichts hineingeschrieben! Der Bereich zwischen ist schlielich noch leer! Nur der Seitentitel ist schon vorhanden und der wird ja auch angezeigt!

    Leben einhauchen: berschriften und Absatz

    > Hauche deinem Dokument Leben ein: Klicke dazu in die bisher noch leere Zeile. Es ist die Zeile 8. Wir wagen uns nun an den Body. Schaffe ruhig durch mehrmaligen Druck auf [Enter] ein paar Zeilen Platz.

    Auch der Buch-Hund Buffi wollte es sich nicht nehmen lassen, endlich mit einer eigenen Homepage aufzuwarten. Bitte sehr in diesem Kapitel darf er endlich aktiv werden.

    Orientiere dich an Buffis Beispiel. Schreibe es ab. Ich empfehle dir, die HTML-Befehle erst einmal exakt so aus dem Beispiel zu bernehmen. (Nur den Text kannst du so ndern, dass er auf dich zutrifft!)

    Homepage von Buffi Guten Tag! Mein Name ist Buffi! Ich bin von Beruf Computerkinder-Hund mit allumfassender Allgemeinbildung. Meine Freunde heien Tim und Nele. Hier zeige ich dir ein Bild von mir!

  • 37

    So wirds perfekt: berschriften, Abstze und mehr

    So wird der Code in PSPad dargestellt. Du kannst ruhig immer wieder [Enter] drcken, um den Code ordentlich auszurichten. Auf die Anzeige im Browser hat das keinen Einfluss.

    Was haben wir da gemacht? Wir fangen mit einer berschrift an! Mit dem Tag-Paar kennzeichnest du die heading 1, die Hauptber-schrift. Hier schmettert dir Buffi sein Homepage von Buffi entgegen.

    Im Text gibt es gleich noch eine weitere berschrift, und zwar Hier zeige ich dir ein Bild von mir! Es ist eine heading 2, eine Unterberschrift auf zweiter Stufe. Diese wird stets vom Tag-Paar eingerahmt. Insgesamt gibt es brigens sechs berschriftsebenen, du knntest also auch eine , usw. einsetzen.

    Doch ein HTML-Dokument besteht nicht nur aus berschriften. Was ist mit dem Textabsatz mittendrin? Auch hierfr gibt es das passende Tag-Paar. Textpassagen umwickelst du einfach mit dem Tag-Paar ein. Das p steht dabei fr paragraph, zu Deutsch Absatz.

    Die Homepage beginnt mit einer Hauptber-schrift.

  • 38

    Deine coole Homepage mit HTML

    Kapitel

    1 Wenn du mchtest, kannst du den Text innerhalb von Tags durch das so-genannte Stil-Attribut style (Attribut = Eigenschaft) gestalten. Deine berschriften und Abstze stehen normalerweise bndig am linken Rand, also linksbndig. Deine Hauptberschrift soll auer der Reihe zentriert (mittig) ausgerichtet werden? Ergnze im Einschalt-Tag einfach das Attribut-Werte-Paar style="text-align: center" und zwar nach einem Leerzeichen. Hinter diesem Stil-Attribut style verbirgt sich die Gestaltungssprache CSS. Die Angabe text-align: bezieht sich auf die Textausrichtung und center steht fr zentriert.

    Dann sieht es so aus:

    Homepage von Buffi

    Falls du die berschrift dagegen nach rechts setzen mchtest, notierst du das folgendermaen: .

    Probiere es ruhig einmal aus! Es gelingt mit berschriften und Abstzen, mit sogenannten Blockelementen. Genug probiert? Dann kannst du diesen Zusatz auch wieder lschen. Ich verzichte im Beispiel auf diesen Zusatz!

    Ich empfehle dir dringend, CSS zu lernen, damit du die wichtigsten Attribu-te und Werte zum Gestalten kennst!

    Tags zur Hervorhebung von Zeichen Sicher gibst du dich nicht mit blankem Text zufrieden. Das wre doch langweilig! Schau einmal in den Absatz. Auch hier findest du schon weitere interessante Tags vor.

    Mit (b wie bold) kannst du Wrter oder Wortgruppen hervorhe-ben. Sie werden dann fett angezeigt. Das Tag-Paar (wie italic, kursiv) dagegen sorgt fr eine Kursivstellung der entsprechenden Passage.

    Die Tag-Paare und galten bis vor kurzem noch als veraltet. Als Alternative sollte man zu und greifen. Die gute Nachricht: und werden in HTML 5 weiterleben, wenn auch mit leicht vernderter Bedeutung. Es gibt also keinen Grund, auf diese klassischen Tags zu verzichten!

    Geht auch: Stelle die berschrift einfach in

    die Mitte!

  • 39

    So wirds perfekt: berschriften, Abstze und mehr

    Die wichtigsten HTML-Tags im berblick In dieser Tabelle zeige ich dir die wichtigsten HTML-Tags und ihre Bedeu-tung im berblick:

    Tag-Paar Bedeutung Wie siehts aus? Heading 1

    berschrift 1 fett, sehr gro

    berschrift 2 fett, gro berschrift 3 fett, mittelgro berschrift 4 fett, normal berschrift 5 fett, klein berschrift 6 fett, sehr klein bold fett Text wird fett dargestellt strong stark Text wird ebenfalls fett italics kursiv Text wird kursiv dargestellt emphatic

    hervorgehoben Text wird ebenfalls kursiv

    langes Zitat wird eingerckt dargestellt.

    small klein Text wird verkleinert dargestellt

    Wenn du eine Linie setzen mchtest, verwendest du das Tag . Dieses Tag braucht ausnahmsweise kein End-Tag.

    Auerdem gibt es den sogenannten break, einen Zeilenumbruch. Wenn du ein Wort auf eine neue Zeile setzen mchtest, setzt du davor einfach das Tag . Damit rutscht das Wort auf die neue Zeile, ohne dass gleich ein neuer Absatz beginnt. Auch bentigt kein End-Tag.

    An dieser Stelle gleich ein interessantes Detail: Die Schreibweise (fr eine Linie) bzw. (fr den break, Zeilenumbruch) ist die klassi-sche Schreibweise. Du findest auf vielen Seiten auch die XHTML-Variante bzw. vor. Dabei bekommt das Tag nach einem Leerzei-chen einen internen Ausschalt-Slash, so einen Schrgstrich.

    Das macht man deshalb, weil in der XHTML-Schreibweise jedes Tag aus-geschaltet werden muss. Und da ein - oder -Tag nun mal kein Ausschalt-Tag kennt, schaltet man es einfach intern ab. In der Praxis fin-dest du beide Schreibweisen vor. Selbst PHP verwendet Elemente aus XHTML. (Wir aber bleiben bei der bewhrten klassischen Schreibweise.)

    Genug gelabert, jetzt wollen wir unsere Homepage mit einem Bild etwas aufpolieren!

  • 40

    Deine coole Homepage mit HTML

    Kapitel

    1 Hier bin ich: Ein Bild einfgen Hast du irgendwo ein Foto von dir auf der Festplatte herumliegen? Viel-leicht vom Scanner oder der Digicam? Hauptsache es liegt im Format GIF, JPG oder PNG vor. (Andere Formate sind fr das Internet nicht geeignet.)

    Du hast momentan keine derartige Grafik? Dann nimm zum ben ein-fach ein Bild von mir! Du findest die Datei buffi.png auf der CD im Ordner beispiele/kapitel01.

    Wichtig: Dein Bild sollte nicht zu hoch und breit sein. Es sollte also, wenn du es im Grafikprogramm aufrufst, nicht die ganze Breite und Hhe des Bildschirms ausfllen. Die Abbildung von Buffi ist 445 Pixel breit und 310 Pixel hoch. (Pixel sind Bildpunkte, eine Maeinheit auf dem Bildschirm.)

    Fgen wir das Bild nun ganz schnell in unsere Homepage ein! Und zwar unterhalb der schon vorbereiteten berschrift 2.

    > Achte zuerst darauf, dass die Grafik im gleichen Ordner liegt wie dei-ne HTML-Datei. Das ist zwar nicht unbedingt ntig, macht das Einf-gen aber einfacher. Kopiere das Bild also in den Ordner html. Die Bei-spielgrafik fr Buffi heit buffi.png.

    > Sorge in PSPad dafr, dass der Mini-Editor mit der Dateiansicht sicht-bar ist. Du weit schon, per Toolfenster, zweites Register. Du schaltest das Toolfenster ber das Men ANSICHT ein bzw. aus.

    > An welcher Stelle mchtest du die Grafik einfgen? Schaffe hier eine Leerzeile, drcke also auf [Enter]. Und jetzt geht es los: Ziehe die Grafikdatei aus der Dateiliste direkt in das Dokument. Und zwar an die gewnschte Stelle:

    Klicken und ziehen so einfach fgst du eine Grafik ein.

  • 41

    Hier bin ich: Ein Bild einfgen

    Hurra, die Grafik ist da! Das entsprechende Tag wurde fix und fertig einge-fgt, mit allem Drum und Dran. Im Beispiel sieht die lange Zeile so aus:

    Das Attribut-Werte-Paar border="0" dient zum Unterdrcken einer even-tuellen Umrandung.

    Hintergrund dieser border-Geschichte: Wenn eine Grafik zum Hyperlink gemacht wird, bekommt sie dadurch automatisch eine krftige blaue Umrandung. Das ist nun einmal so bei Hyperlinks auf Grafiken. Um diese hssliche Umrandung zu unterdrcken, schreiben PSPad und andere Edi-toren zur Sicherheit das Attribut-Werte-Paar border="0".

    Grafik nur innerhalb eines Blocks einfgen Wir sind noch nicht fertig mit der Grafik und mit den Regeln. Denn es gilt weiterhin: Eine Grafik sollte stets innerhalb eines Absatzes eingefgt werden. Oder innerhalb eines anderen sogenannten Block-Elements. (Tipp: Auch eine berschrift wie oder ist ein Block-Element.) So verlangt das der Standard zu HTML 4. Und wir wollen im Buch schlielich genau nach Standard vorgehen!

    Okay, wenns denn so gewnscht wird, machen wirs einfach. Wir packen die Grafik zustzlich noch in ein Block-Element. Welches nehmen wir? Den Absatz! Setze also vor der Grafik das einleitende -Tag. Schalte es hinter der Grafik mit wieder ab.

    Erst durch diese Erweiterung haben wir eine standardgerecht eingefgte Grafik!

    Was bedeuten die Attribute von ? Schaue dir das eben eingefgte Tag fr die Grafik doch etwas genauer an. Es handelt sich um das Tag . Zuerst fllt dir vielleicht auf, dass auch kein Endtag bentigt. Wieder eine Ausnahme. Doch was bedeuten die Attribute?

  • 42

    Deine coole Homepage mit HTML

    Kapitel

    1 0 Das Attribut src steht fr source, Quelle. Als Wert gibst du den Grafik-namen in Gnsefchen an. (Sollte sich die Grafik in einem Unterordner befinden, musst du den Pfad ebenfalls notieren.)

    0 Das Attribut alt sorgt nicht etwa dafr, dass die Grafik alt aussieht. Im Gegenteil! Dieses Attribut erzeugt einen sogenannten Alternativtext. Der ist wichtig fr Suchmaschinen und fr Leute, die nicht gut sehen knnen. (Sie lassen sich diesen alternativen Text vom Browser einfach vorlesen!) Nach dem Gleichheitszeichen tippst du ein beschreibendes Wort oder eine Wortgruppe. Ersetze also den Platzhaltertext von PSPad beispielsweise durch eine Wortgruppe wie Computerkinder-Hund Buffi.

    0 Das Attribut title stelle ich dir in der nchsten Abbildung vor. Es er-zeugt nun einen Titel fr das Bild. Den Effekt siehst du, wenn du den Mauszeiger ber die Abbildung fhrst. Auch hier knnte ruhig mehr Text stehen aus Platzgrnden lasse ich das im Beispiel jedoch sein.

    0 Die Attribute width und height kmmern sich um Breite und Hhe der Grafik. Die Grafik von Buffi ist im Beispiel 445 Pixel breit und 310 Pixel hoch. Die Reihenfolge, in der man die Attribute angibt, ist dabei egal. Du kannst sie auch vertauschen.

    Es gibt brigens eine modernere Schreibweise fr die drei Attribute border, height und width. Und zwar mit der Stil- und Formatierspra-che CSS. Ersetze border="0" height="310" width="445" einfach durch: style="border: 0; height: 310px; width: 445px;". Du schreibst also nur noch das style-Attribut und setzt alle weiteren CSS-Anweisungen in Gnsefchen. Mehr zu CSS folgt weiter hinten!

  • 43

    Meine Hobbys kurz aufgelistet

    Mit dem style-Attribut von CSS sieht das -Tag dann so aus:

    Meine Hobbys kurz aufgelistet

    Noch nicht fertig! Schreibe auf, welchen Hobbys du frnst! Skateboardfah-ren? Inlineskaten? Lesen? Programmieren? Manga-Zeichnen? Pokemon-Karten sammeln? WoW spielen? Was auch immer: Fr solche Dinge bieten sich in idealer Weise die Listen an.

    Mit Aufzhlungspunkten: Ungeordnete Liste Im ersten Vorschlag verwenden wir eine sogenannte unordered list, eine ungeordnete Liste. Das entsprechende Tag-Paar heit . Die einzelnen Listen-Eintrge wiederum werden in eingekleidet. Dieses li steht dabei als Abkrzung fr list item.

    Schluss mit dem Englischunterricht, ran an das Beispiel. Ich zeige dir den gesamten Rest des Dokuments. Die Liste beginnt unter der neu eingefgten H3 Ich habe folgende Hobbys. Ergnze also noch die berschrift und lege dann mit deinen Hobbys los!

    ... Hier zeige ich dir ein Bild von mir!

    Ich habe folgende Hobbys: Sterne betrachten Inlineskaten Harry Potter lesen Homepages fr Freunde erstellen

  • 44

    Deine coole Homepage mit HTML

    Kapitel

    1 In einer solchen unordered list bekommt jeder Aufzhlungspunkt einen kleinen Kreis vorangestellt. Sieht doch irgendwie knuffig aus, nicht wahr?

    Eins, zwei, drei: Ordnung schaffen durch Nummerierung Du mchtest deine Hobbys lieber durchnummerieren? Auch dieser Wunsch lsst sich leicht erfllen! Bringe Ordnung ins Chaos: Verwende eine ordered list.

    Ersetze einfach das Tag-Paar durch . Wie von Geis-terhand werden deine Eintrge nun durchnummeriert.

    Ich habe folgende Hobbys: Sterne betrachten Inlineskaten Harry Potter lesen Homepages fr Freunde erstellen

    Das Schnste: Du kannst nun nachtrglich so viele Eintrge hinzufgen, wie du mchtest. Die Nummerierung passt sich immer wieder an!

    Skaten, Lesen, Home-page erstellen? Hier ist

    die Liste fr deine Hobbys!

  • 45

    Coole Links zu coolen Pltzen

    Coole Links zu coolen Pltzen

    Was wre das Web ohne die Hyperlinks? Ein Nichts! Es wrde gar nicht existieren! Erst durch diese Kreuz- und Querverweise werden deine Seiten richtig lebendig. Linke zu den schnsten und interessantesten Pltzen im Web. Wirf deine Anker aus.

    Einfache Hyperlinks erstellen Auf welche Seiten verlinkst du? Buffi whlt seinen Heimatverlag und netterweise auch die Seiten des Buchautors (Danke, Buffi!). Hier die ent-sprechenden Adressen, die sogenannten URLs.

    0 http://www.it-fachportal.de

    0 http://www.phpkid.de

    Zum Erstellen von Querverweisen (Links) verwendest du das -Tag. Das a steht fr Anker. Du wirfst also einen Anker aus. Als Ziel verwendest du die entsprechende Webadresse. Und dafr brauchst du zustzlich das Attribut href. Denn erst mit diesem Attribut kannst du die Zieladresse fr an-geben. Geschafft? Danach notierst du den beschreibenden Text. Hier ein Beispiel:

    Mein Heimatverlag

    Nicht vergessen: Das Tag wird zum Schluss natrlich durch abge-schaltet.

    Eine Web-Adresse muss bei Hyperlinks stets ausgeschrieben werden. Die einfache Abkrzung nach dem Motto www.it-fachportal.de oder gar it-fachportal.de ist hier nicht erlaubt. Im Zweifelsfall wird der Link nicht funktionieren.

    Hobby by Number: Eine durchnummerierte Liste.

  • 46

    Deine coole Homepage mit HTML

    Kapitel

    1 So sieht der Quelltext fr das gesamte Hyperlink-Beispiel von Hund Buffi aus: Besuche doch einmal folgende Seiten: Mein Heimatverlag - Serviceseite zum Buch

    Auf eine berschrift hat Buffi diesmal verzichtet. Der Abschnitt mit den Hyperlinks wurde in einen Absatz () eingehllt. Doch was passiert innerhalb dieses Absatzes?

    Zur Abwechslung findest du diesmal das Tag-Paar vor. Praktisch als berschrifts-Ersatz. Dadurch wird die entsprechende Passage fett hervorgehoben und strkerer betont.

    Danach hat Hund Buffi einen Zeilenumbruch gesetzt, den schon bespro-chenen break . Solch ein Umbruch erzeugt eine neue Zeile. Dabei ent-steht jedoch kein neuer Absatz! (Du erkennst es in der Vorschau: Der Ab-stand zwischen den Zeilen ist geringer!)

    Nun folgen die Hyperlinks nebeneinander, aus optischen Grnden nur durch einen Bindestrich voneinander getrennt.

    Parke doch einmal den Mauszeiger ber einem Hyperlink. Schon erscheint das Verweis-Ziel in der Statuszeile, also in der unteren Zeile des Browsers.

    brigens: Du musst nicht immer auf eine externe Webseite verweisen. Setze Links vor allem innerhalb deines Web-Projekts. Verweise von ei-ner Seite auf die andere. Du willst auf der Startseite auf eine Unterseite namens hobby.html verweisen? Diese liegt im gleichen Ordner wie die Startseite? Als Linkbeschreibung soll der Text Meine Interessen verwen-det werden? Dann sieht der interne Links so aus:

    Meine Interessen

    Unbesuchte Hyperlinks sind per Voreinstellung

    blau, besuchte frben sich lila.

  • 47

    Meine drei Lieblingsfcher in einer Tabelle

    Wie wre es mit ein paar Tipps und Tricks zu Hyperlinks?

    > Du mchtest, dass sich nach Klick auf den Link ein eigenes Fenster bzw. ein neuer Browsertab ffnet? Dann notiere ganz einfach zustz-lich das Attribut-Werte-Paar target="_blank" im -Tag:

    Mein Heimatverlag

    > Du mchtest, dass beim Darberfahren mit dem Mauszeiger ein in-formativer Beschreibungstext auf dem Hyperlink erscheint? Dann er-gnze das schon bekannte Attribut title (Beschreibungstitel). Gib als Wert ein beschreibendes Wort oder eine Wortgruppe an:

    Lernsoftware und mehr

    > Du mchtest die Farbe der Hyperlinks ndern? Die Unstreichung ab-schalten? Das alles gelingt mit Style Sheets. Blttere einfach ein Stck weiter nach hinten, dort verraten wir dir mehr zu diesem The-ma.

    Meine drei Lieblingsfcher in einer Tabelle

    Schreiben wir zur Abwechslung doch mal eine Tabelle. Warum? Weil es Spa macht! Und weil Tabellen auf HTML-Seiten eine ganz wichtige Rolle spielen. Und weil du Tabellen kennenlernen solltest. Sind das genug Grn-de? Dann los!

    Grundaufbau der Tabellen Was musst du zu Tabellen wissen? Nicht viel!

    0 Jede Tabelle wird vom Tag-Paar eingerahmt. (Table ist das englische Wort fr Tabelle!)

    0 Eine Zeile steht innerhalb von (table row heit Tabellen-zeile).

    0 Eine einzelne Zelle (das Tabellenkstchen) wird zwischen gequetscht. Mit td ist table data genannt, frei bersetzt Zellinhalt.

  • 48

    Deine coole Homepage mit HTML

    Kapitel

    1 0 Mchtest du eine Zelle besonders hervorheben, whlst du statt einfach fr table head. Eine solcherart gestal-tete Zelle wird fett hervorgehoben. Der Inhalt wird zentriert.

    Das Beispiel Zuerst zeige ich dir das Beispiel. Eine Tabelle besteht aus Zeilen und Spal-ten. Diese werden durch die Tabellenkstchen (Zellen) gebildet.

    Das Beispiel sieht im Quelltext folgendermaen aus:

    LieblingsfachWarum? InformatikWeil ich der Beste bin! PhysikWeil wir lernen, wie ein Motor funktioniert. ZeichnenWeil der Lehrer mit uns Manga-Comics zeichnet.

    Die Beispiel-Tabelle besteht aus vier Zeilen

    und zwei Spalten.

  • 49

    Schickes Layout mit Style Sheets

    Die Erklrung Durchschaust du die Struktur? Zuerst setzen wir das einleitende Tag und drcken schon ein paar Mal [Enter]. Damit schaffen wir etwas Luft. Nicht vergessen: Schalte das -Einschalt-Tag gleich jetzt am Ende der Tabelle mit wieder ab!

    Damit die Tabelle einen Rahmen erhlt, arbeite ich gleichzeitig mit dem Attribut-Werte-Paar border="1". Das einleitende Tabellen-Tag sieht also so aus: . (Wenn du den Rahmen vergrern willst, erhhst du einfach den Wert hinter border. Mit border="5" be-kommst du beispielsweise einen 5 Pixel dicken Rand.)

    Danach definiere ich die erste von vier Zeilen. Ich schreibe , lasse da-nach ein paar Zeilen frei und setze das abschlieende . Wenn du willst, kannst du alle vier Zeilen schon derart vorbereiten, hier zumindest zwei Zeilen:

    ...

    ...

    Nun kmmern wir uns um die einzelnen Kstchen der Tabelle. Die erste Zeile bekommt zweimal spendiert. Es soll schlielich der Tabellenkopf werden. In den brigen Zeilen begngen wir uns mit je zwei-mal fr den normalen Zellinhalt.

    Wie gesagt, was dann in der Zelle selber erscheinen soll, wird einfach zwi-schen bzw. notiert. So weit, so gut. Aber ich wuss-te gar nicht, dass Buffi noch zur Schule geht

    Schickes Layout mit Style Sheets

    Coole Seite? Von wegen! Bis jetzt sieht unser Projekt aus wie eine Kakerla-ke hinterm Kchenschrank farblos und platt. Dagegen sollten wir etwas unternehmen, und zwar mit Style Sheets. Lege Schriftart, Schriftgre und Farben fest! Verpasse den Hyperlinks einen Mouseover-Effekt. Du wirst staunen, mit wie wenig Aufwand man seine Seiten aufpeppen kann.

  • 50

    Deine coole Homepage mit HTML

    Kapitel

    1 Style Sheets sind eine ganz fabelhafte Geschichte. Du legst einmal fest, wie deine Homepage auszusehen hat. Das machst du am besten in einer extra Datei. Dadurch erstellst du eine Art Musterschablone. Dieses Ge-staltungs-Muster kannst du nun beliebig oft fr weitere HTML-Seiten verwenden. Das spart viel Arbeit! Wichtig: Style-Sheet-Dateien sind Textdateien mit der Endung .css.

    Verweis auf CSS-Datei setzen Also, frisch ans Werk. Worauf wartest du noch? Die extra Stil-Datei soll im Beispiel phpkid.css heien. Sie wird im gleichen Ordner entstehen wie unsere HTML-Datei. Doch zuerst setzen wir einen Verweis auf diese Datei. Wir binden sie also in unser HTML-Dokument index.html ein. Und zwar in den Kopfbereich, in den Head:

    > Suche diese Zeile:

    > Klicke hinter diese Zeile und drcke [Enter]. Damit erzeugst du eine leere Zeile dort notierst du gleich den Verweis zur Stildatei. Das ge-lingt mit dem Tag und seinen Attributen:

    Insgesamt sieht der Anfang der HTML-Datei also so aus:

    1 2 3 4 Homepage von Computerhund Buffi 5 6 7

    Lass dich von der Syntax dieser Zeile 6 nicht zu sehr entmutigen. Wichtig ist das Attribut href. Hinter dem Gleichheitszeichen setzt du den Namen der CSS-Datei ein, umkleidet von Gnsefchen.

  • 51

    Schickes Layout mit Style Sheets

    Du speicherst deine HTML-Datei, aktualisierst die Vorschau und es pas-siert rein gar nichts? Na klar! Wir haben einen Link auf eine Datei er-stellt, die es noch gar nicht gibt. Da wartet also ein Stck Arbeit auf uns.

    CSS-Datei erstellen Eine CSS-Datei ist nichts weiter als eine Textdatei mit der Endung .css. Also, erstelle eine neue Textdatei.

    > Whle in PSPad DATEI|NEU. Das Dialogfenster Neu erscheint, du soll-test dich im Register Neue Datei aus Vorlage erstellen befinden. Wh-le den Ordner CSS und doppelklicke auf Default.

    > PSPad fgt eine fast leere CSS-Datei ein und schaltet auf die CSS-Farbhervorhebung um. Der Text /* CSS Document */ beweist, dass es sich um eine CSS-Datei handelt. Lsche diese Platzhalter-Zeile!

    > Ehe ich Style Sheets jetzt gro und breit erklre, legen wir los! Tippe zuerst folgende drei Zeilen. (Die geschweiften Klammern erzeugst du mit gedrckter [AltGr]-Taste. Tippe dazu entweder die [7] bzw. [0].)

    body { font-family: Verdana, Arial, Helvetica, sans-serif; }

    > Speichere die Datei ab. Whle als Dateinamen phpkid.css. Die Datei wird im Beispiel im gleichen Ordner abgelegt wie das HTML-Dokument. Achte darauf!

    Die Schreibweise fr CSS-Style-Sheets gleicht der von Programmier-sprachen wie JavaScript oder PHP. So findest du auch in CSS die be-rhmten geschweiften Klammern. Diese geschweiften Klammern bilden einen Block. Sie halten praktisch zusammen, was zusammen gehrt. Auch in CSS wird (fast) jede Zeile durch ein Semikolon (;) abgeschlossen. Es ist so, wie du es in PHP noch kennenlernen wirst!

    Rufe das HTML-Dokument index.html doch einmal in der Browservor-schau auf. Aktualisiere die Ansicht, z. B. durch Druck auf die Funktionstaste [F5]. Wahnsinn! Auch einen Schlag ndert sich die Schriftart im gesamten Dokument. Und das nur mit diesen simplen drei Zeilen. Wie geht das?

    Nun, das gesamte Dokument befindet sich zwischen den Tags . Mit diesem Tag kannst du praktisch alle Textpassagen erreichen,

  • 52

    Deine coole Homepage mit HTML

    Kapitel

    1 ist sozusagen die groe Klammer, die alles zusammen-hlt. Also body, okay. Doch wo sind die spitzen Klammern? Die werden in CSS nicht mitgeschrieben! Du notierst also das nackige Tag ohne spitze Klammern. Wir schreiben einfach body und haben damit den sogenannten Selektor zu Papier gebracht. Wenn das kein Grund zum Feiern ist

    Nun setzen wir nach einem Leerzeichen die ffnende geschweifte Klammer. Der Block beginnt. Mein Tipp: Drcke schon ruhig zweimal auf [Enter]. Setze gleich die schlieende Klammer. (Denn hinterher vergisst man das oft, glaube mir!) Zwischen diesen Klammern notierst du nun die Formatier-anweisungen. Im Beispiel handelt es sich um folgende Zeile:

    font-family: Verdana, Arial, Helvetica, sans-serif;

    Damit legen wir die font-family fest, die Schriftfamilie hier also Verdana. Am Ende der Zeile setzt du ein Semikolon.

    Wenn der Benutzer auf seinem Rechner kein Verdana hat? Dann wird die Schriftart verwendet, die als nchstes nach dem Komma folgt. Und wenn es auch hier heit: Fehlanzeige? Dann probiert der Browser, ob er Helve-tica findet. Sollte das nicht glcken, whlt der Browser irgendeine sach-liche Schriftart. Dafr sorgt sans-serif am Schluss der Aufreihung.

    Das ganze Gebilde mit Selektor und geschweiften Klammern nennt sich nun Regel. Und tatschlich haben wir damit eine fabelhafte kleine Regel erstellt, mit der wir die Schriftart fr das gesamte Dokument steuern.

    Einige Attribute und Werte von CSS Neugierig, welche Anweisungen es noch so gibt? Die folgende Tabelle zeigt dir einige wichtige Attribute und Werte von CSS. In der linken Spalte fin-dest du jeweils das Beispiel. Rechts erklre ich dir, was passiert.

    Beispiel verantwortlich fr font-family: Arial, Helvetica; Schriftart Arial bzw. Helvetica font-size: 12pt; Schriftgre 12 Punkt font-weight: bold; Zeichenformat fett

    font-variant: small-caps; KAPITLCHEN (DAS SIND KLEINE GROSSBUCHSTABEN)

    font-style: italic; Schriftstil (z. B. kursiv) line-height: 1.2; Zeilenabstand (z. B. 1,2-zeilig) margin: 10px; Rand rundherum 10 Pixel text-decoration: none; Texteffekt (Unterstreichung) abschalten border-style: solid; Rahmen rundherum ziehen

  • 53

    Schn bunt hier: Farben zuweisen

    Mehrere Fliegen mit einer Klappe Nun kennst du schon einige CSS-Eigenschaften. Wunderbar. Kmmere dich doch einmal um die Schriftgre! Angenommen, du mchtest in Abstzen (Selektor p), Tabellen (table) und Listeneintrgen (li) eine Schriftgre von 10 Punkt einrichten.

    Dann schlage doch einmal drei Fliegen mit einer Klappe! Reihe die Selekto-ren vor der ffnenden geschweiften Klammer auf. Dann gilt die Regel fr alle drei Tags zugleich!

    p, table, li { font-size : 10pt; }

    Warum haben wir in dieser Regel keine Schriftart definiert? Nun, diese hatten wir doch schon in der body-Regel festgelegt. Schlielich gilt body fr das gesamte Dokument, also auch fr p, table und li. In die-ser Regel mssen wir nur noch die Schriftgre bestimmen. Und zwar zustzlich.

    Schn bunt hier: Farben zuweisen

    Natrlich kannst du in CSS nicht nur Texteigenschaften, Rnder und Rah-men festlegen. Arbeite doch einmal mit Farben! Fr die Schriftfarbe nimmst du das Attribut color. Die Hintergrundfarbe wird dagegen durch background-color gesteuert.

    Farb-Beispiel verantwortlich fr color: blue; Farbe blau background-color: silver; Hintergrundfarbe hellgrau

    Doch wie viele Farben kannst du verwenden? 16,7 Millionen! Und wie stellt man sie dar? Das geht zum einen mit dem sogenannten Hexadezimalwert. Das ist eine kryptische Zeichenfolge. Sie beginnt mit einer Raute, gefolgt von weiteren 36 Stellen. Diese beschreiben die Zusammensetzung aus den drei Grundfarben Rot, Grn und Blau. Ein Blau sieht so aus: #0000FF.

    Zum anderen kannst du diese RGB-Anteile auch auf andere Weise be-schreiben. Notiere rgb() und trage innerhalb der Klammern die Anteile der drei Grundfarben ein. Und zwar auf einer Skala von 0 bis 255 getrennt mit Komma. Ein Blau sieht dann so aus: rgb(0,0,255).

  • 54

    Deine coole Homepage mit HTML

    Kapitel

    1 Du mchtest mit PSPad die gewnschte Farbe zuweisen? Whle WERKZEU-GE|FARBAUSWAHL bzw. die FARBAUSWAHL-Schaltflche. Setze den Cursor dort-in, wo der Farbwert stehen soll. Doppelklicke auf deine Wunschfarbe:

    Neben den 16,7 Millionen unterschiedlichen Hexadezimal- bzw. RGB-Farbwerten gibt es aber auch freundlichere Farbnamen. Zumindest fr die 16 Grundfarben. Wenn du dich also auf diese 16 Grundfarben beschrnken mchtest, whlst du einen der 16 englischen Farbnamen aus.

    Eine Gesamtbersicht ber diese Grundfarben zeige ich dir in der Tabelle. Dabei ist es egal, ob du dich fr den Farbnamen (linke Spalte), den Hexade-zimalwert oder den RGB-Farbwert (rechte Spalte) entscheidest:

    Farbname dahinter steckt Hexadezimalwert RGB-Farbwert black schwarz #000000 rgb(0,0,0) silver hellgrau #c0c0c0 rgb(192,192,192) gray grau #808080 rgb(128,128,128) white wei #ffffff rgb(255,255,255) maroon kastanienbraun #800000 rgb(128,0,0) red rot #ff0000 rgb(255,0,0) purple lila #800080 rgb(128,0,128) fuchsia hellila #ff00ff rgb(255,0,255) green dunkelgrn #008000 rgb(0,128,0) lime hellgrn #00ff00 rgb(0,255,0) olive olivgrn #808000 rgb(128,128,0) yellow gelb #ffff00 rgb(255,255,0) navy dunkelblau #000080 rgb(0,0,128) blue blau #0000ff rgb(0,0,255) teal blaugrn #008080 rgb(0,128,128) aqua himmelblau #00ffff rgb(0,255,255)

    PSPad verwendet zum Einfgen der Farben die

    freundliche RGB-Syntax.

  • 55

    Schn bunt hier: Farben zuweisen

    Buffi, gar nicht faul, hat seine Homepage inzwischen komplett mit Style Sheets aufgebrstet. So sieht seine neue Layout-Page aus.

    Die komplette CSS-Datei im berblick Mchtest du die gesamte CSS-Datei sehen, die Hund Buffi zur Steuerung seiner Seite geschrieben hat? Bitte sehr. Damit du durch den Code durch-steigst, habe ich mit beschreibenden Kommentaren gearbeitet.

    Kommentare sind Passagen, die nur fr den Autor der Datei interessant sind. Sie werden nicht ausgefhrt, bleiben praktisch unsichtbar. In CSS verwendest du die gleichen Kommentarzeichen, die du spter auch in PHP setzen wirst. Ein Kommentar wird mit /* eingeleitet und endet mit */. So kannst du der ersten Regel (also dem Gebilde in geschweiften Klammern) z. B. folgende Beschreibung voranstellen:

    /* Schriftart im gesamten Dokument */

    Auerdem empfehle ich dir, mit Leerzeilen fr mehr bersicht zu sorgen. Was hier wie die reinste Platzverschwendung aussieht, wird uns spter bei PHP sehr helfen! Aber nun Manege frei fr den CSS-Code:

    Welche eine Verwandlung! CSS bringt Farbe ins Bild.

  • 56

    Deine coole Homepage mit HTML

    Kapitel

    1 /* Schriftart im gesamten Dokument */ body { font-family: Verdana, Arial, Helvetica, sans-serif; } /* Abstze, DIVs, Tabellen, Listen, Formulare in 10 Punkt */ p, div, table, li, form { font-size: 10pt; } /* Hintergrundfarbe grau mit weier Schrift */ h1 { background-color: gray; color: white; } /* berschrift 2 und 3 blau frben */ h2, h3 { color: rgb(0,0,153); } /* fette Passagen rot einfrben */ b { color: red; } /* kursive Passagen blau frben */ i { color: rgb(0,0,153); } /* Link-Stile fr Hover-Links */ a:link { color: rgb(0,0,153); } a:visited { color: gray; } a:hover { text-decoration : none;

  • 57

    So legst du die exakte Breite fest

    color: red; } a:active { color: black; }

    Lies dir den Quelltext ganz in Ruhe durch. Die ersten beiden Regeln haben wir schon besprochen. Bei der zweiten Regel habe ich gleich die Tags div und form mit dazu geschrieben. So werden diese Elemente ebenfalls ges-taltet. (Zu div und form gleich mehr!)

    Schon mit der dritten Regel fr h1 erreichst du einen sehr interessanten Rahmen-Effekt. Die Schrift wird wei eingefrbt. Doch der Hintergrund erhlt die Farbe grau! Das sieht doch toll aus, oder?

    Wenn du genau hinschaust, stellst du fest, dass Buffi auch die Tags und aufpoliert hat. Fette Passagen werden zustzlich rot, kursive dagegen blau eingefrbt.

    Du wunderst dich ber den letzten Abschnitt in der CSS-Datei? Was ver-birgt sich hinter Link-Stile fr Hover-Links? Das sind Sonderflle, damit erzeugst du den berhmten Hovereffekt beim Darberfahren mit der Maus! Mit den vier Sonder-Selektoren a:link, a:visited, a:hover und a:active kannst du die vier Linkzustnde ansprechen. Einmal den normalen Link, dann den besuchten Link, danach den Link whrend des Darberfahrens mit der Maus (Hover-Effekt!) und den aktiven Link (wh-rend des Klickens). Du solltest die Links brigens stets in dieser Reihen-folge notieren, damit es keine Anzeigeprobleme gibt.

    So legst du die exakte Breite fest

    Zufrieden? Noch nicht ganz! Verndere doch einmal die Gre des Brow-serfensters. Ziehe das Fenster lang. Der ganze Text wandert mit.

    Die Breite des Textes richtet sich nach der Breite des Browser-fensters.

  • 58

    Deine coole Homepage mit HTML

    Kapitel

    1 Das ist doch der reinste Wanderzirkus! Zugegeben, auf manchen Seiten ist dieser Effekt beabsichtigt. Unser Hund wnscht jedoch eine ganz exakte Breite. Die Breite der Seite soll genau 600 Pixel betragen. Nicht mehr und nicht weniger.

    Packe den Inhalt in einen Div-Container Dafr eignet sich ganz ausgezeichnet ein sogenannter Div-Container. Es handelt sich um das Tag-Paar . In dieses Tag-Prchen darfst du ganze Textpassagen einwickeln. Div darf berschriften, Abstze, Ta-bellen und Listen enthalten.

    Fge direkt unter dem -Einschalt-Tag zuerst eine leere Zeile ein. Setze dort hinein:

    Schalte dieses Div kurz ber wieder ab. Nun sieht es so aus:

    ... Homepage von Buffi ... viele, viele Zeilen dazwischen ...

    Breite festlegen ber Inline-CSS Fehlt noch die Breite (width). Richtig, das knnten wir in der CSS-Datei festlegen. Zu umstndlich! Es handelt sich schlielich nur um eine einzige Angabe. Wir lsen das Ganze deshalb kurz und schmerzlos mit Inline-CSS.

    Bei Inline-CSS werden die CSS-Anweisungen direkt im Tag notiert. Ich habe es dir in Zusammenhang mit text-align (Absatzausrichtung), border (Rahmen), width (Breite) und height (Hhe) schon gezeigt! Eine Inline-CSS-Passage beginnt mit dem Attribut style="...". Die CSS-Regeln werden nun innerhalb der Gnsefchen notiert. Inline-CSS ist dann ideal, wenn man kurze Anweisungen festlegen mchte, die sich nicht wiederholen sollen.

  • 59

    Eine Umfrage! Wie findest du meine Page?

    Gehe deshalb in das einschaltende . Ergnze style="width: 600px;". Insgesamt sieht das Tag also so aus:

    Eine Umfrage! Wie findest du meine Page?

    Du mchtest wissen, wie deine Seite bei den Besuchern ankommt? Erstelle eine Umfrage! Dazu nimmst du einfach eine neue Seite, die wir im Beispiel umfrage.html nennen. Speichere sie ebenfalls unter C:/phpkid/html.

    > Baue die Seite auf dem schon bekannten Grundgerst auf. Fge eben-falls den schon verwendeten CSS-Link zur Datei phpkid.css ein!

    Ein Formular mit Radioknpfen Und hier zeige ich dir den kompletten Quelltext dieser Umfrage. Denke zuallererst an den Titel. Passe den Bereich zwischen an. Setze eine berschrift in das Dokument.

    Exakte Breite durch die CSS-Regel width: 600px;

    Eine Umfrage mit Radio-knpfen Der Besucher whlt eine Option aus.

  • 60

    Deine coole Homepage mit HTML

    Kapitel

    1 Aus Platzgrnden habe ich den HTML-Code im Gegensatz zur index.html nicht eingerckt. Es ist schlielich keine Pflicht. Und wenn du doch einr-cken willst: Es gibt in PSPad eine clevere Automatik. Mehr dazu gleich

    Umfrage: Wie findest du meine Seite? Wie findest du meine Page? echt super ziemlich gut geht so

    Das eigentliche Formular beginnt mit dem -Tag. Du musst hier au-erdem das Attribut action eintragen. Wir haben es jedoch leer gelassen. (Vergiss nicht, das Formular mit auch wieder abzuschalten.)

    Im Formular selber arbeiten wir mit sogenannten Radiobuttons. Dieser Typ wurde tatschlich von alten Rhrenradios abgeschaut. Drckt man einen Knopf rein, springt der andere heraus. Radiobuttons werden auch als Kon-trollkstchen bezeichnet.

    Radiobuttons werden mit erzeugt. Gib allen zusammengehrigen Buttons den gleichen Namen. Dazu dient das Attri-but name. Im Beispiel heien alle Buttons ergebnis. Der value wieder-um ist der Wert, den der Button beim Absenden mitschickt. Hier be-kommt jeder Button einen eigenen Wert, z. B. 1, 2 und 3. Das dient zum spteren Wiedererkennen. Du als Formularbesitzer bekommst schlie-lich das Name-Werte-Paar zugeschickt, z. B. ergebnis="1".

  • 61

    Tipps und Tricks zu PSPad

    Submit! Doch wo bleibt die Action? Jedes Formular bentigt zum Abschicken einen Submit-Button. Submit steht fr Versenden, bermitteln. Dieser Button sieht im Beispiel so aus:

    Der Wert hinter dem Attribut ist brigens die Beschriftung. Du knntest hier auch Los! oder Klicken auf eigene Gefahr eintragen. Aber darauf will ich nicht hinaus.

    Klappe die Erste. Und Action! Wenn du auf den Submit-Button klickst, geht die Action los. Es passiert nichts. Oder fast nichts. Kunststck. Schlie-lich passiert das, was wir im einleitenden -Tag hinter action no-tiert haben. Doch da steht bis jetzt ebenfalls nichts.

    So ganz stimmt das nicht mit dem nichts. Schaue doch einmal in die Adress-Leiste des Browsers. Nach dem Klicken wird hinter die Adresse noch ein Fragezeichen angehangen. Nun steht hier pltzlich z. B. ergebnis=2 (je nachdem, welche Auswahl du getroffen hast). Das ist doch sehr interessant! Mehr knnen wir an dieser Stelle jedoch nicht machen. Zum Auswerten des Formularinhalts kommen wir allein mit HTML nicht weiter. Hier brauchen wir PHP.

    Ein Grund mehr, PHP zu lernen!

    Tipps und Tricks zu PSPad

    PSPad ist ein toller Editor mit vielen genialen Funktionen. Man muss sie nur kennen.

    HTML-Quellcode automatisch ausrichten Du mchtest den HTML-Quellcode schn einrcken und formatieren? Da-mit es ordentlich und bersichtlich aussieht? HTML-Kenner wissen: Zustz-liche Umbrche und Leerzeichen im Editor werden nicht im Browser darge-stellt. Fazit: Gliedere und formatiere den Quellcode so, wie du magst. Per Leerzeichen eingerckt, mit zustzlichen Leerabstzen und und und

    Keine Lust, das Gliedern von Hand zu erledigen? PSPad bietet dir gleich zwei Tools. Die sanfte Variante findest du unter HTML|HTML-CODE NEU

  • 62

    Deine coole Homepage mit HTML

    Kapitel

    1 STRUKTURIEREN. Der Code wird ausgerichtet und automatisch eingerckt. Ab und an musst du noch ein berschssiges Leerzeichen entfernen, denn in dieser Beziehung ist das Tool noch nicht perfekt.

    Schrfere Geschtze fhrt Tidy auf, tidy up heit saubermachen. Whle z. B. HTML|TIDY|TIDY CLEAN DOCUMENT WRAP oder TIDY CLEAN DOCUMENT NOWRAP und staune! Tidy darfst du aber nur bei reinen HTML-Dateien anwenden. Sobald PHP mit dazukommt, ist dieser Code-Verschnerer tabu!

    Tidy schreibt automatisch eine zustzliche Meta-Zeile in das Dokument:

  • 63

    Tipps und Tricks zu PSPad

    Und zwar ber das Kontextmen. Klicke also mit der rechten Maustaste auf die zu ffnende Datei, beispielsweise die index.html. Whle den Befehl PSPAD. Schn ffnet sich die entsprechende Datei. Du kannst dabei bri-gens auch mehrere Dateien auswhlen, beispielsweise den Inhalt des ge-samten Ordners. Alle Dateien werden auf einen Schlag in PSPad geladen!

    Arbeit mit Verknpfungen Besonders ntzlich ist auch die Arbeit mit Verknpfungen. So kannst du dir zu den wichtigsten Ordnern Querverweise direkt in PSPad anlegen. Nach Klick springt PSPad sofort zum entsprechenden Ordner