Installation von XAMPP

Transkript

1 Installation von XAMPP Installer-Datei mit Doppelklick starten (Es ist zu empfehlen, den Virenscanner für die Zeit der Installation auszuschalten) Zielverzeichnis unbedingt auf C:\xampp\ belassen. 1

2 XAMPP Control Panel starten Bei Apache auf Start klicken. Dann auf Admin klicken. Dann unter C:\xampp\htdocs\ den Ordner uebungen erstellen. 2

3 In diesem Ordner uebungen werden die HTML- und PHP-Übungsdateien gespeichert. Aufruf der Webseite bzw. des lokalen Webservers über Nach Beendigung der Übungen muss man Apache wieder stoppen und auf Exit klicken. 3

4 HTML - HyperText Markup Language HTML (HyperText Markup Language) ist eine plattformunabhängige Dokumentbeschreibungssprache, in der Web-Seiten geschrieben sind. Das HTML-Dokument, das mit jedem beliebigen Texteditor erstellt werden kann, enthält den zu übertragenden Text und zusätzlich HTML-Kommandos (Tags, Marken) zu seiner Formatierung, Bilder, Querverweise auf andere Dokumente (Hyperlinks) zum Anklicken oder auch Töne, animierte Bilder und Formulare für Eingaben. Spezielle Programme (Browser) wie Firefox, Google Chrome oder Internet Explorer führen die Formatierungsbefehle des HTML-Dokuments aus und zeigen es auf dem Bildschirm an. Das Grundgerüst einer HTML-Seite sieht so aus: <html> <head> <title>html</title> </head> <body> Meine erste HTML-Seite! </body> </html> Mit dem Tag <body> beginnt der zu übertragende Text, und er endet mit dem schließenden Tag </body>. Der HTML-Code kann mit einem beliebigen Text-Editor (ASCII-Format) erstellt werden. Zu empfehlen ist der Editor Notepad++. Die Datei mit dem HTML-Code muss dann mit der Endung ".html" oder ".htm" gesichert werden: 4

5 HTML-Tags - Teil 1 1. Text: Größe und Farbe In den Voreinstellungen des Browsers (Bearbeiten, Optionen..., Webbrowser, Sprache/Schriftarten) können die Schriftart und die Schriftgröße eingestellt werden, z.b. Times New Roman, 12 pt. Text in Standard-Groesse sieht dann so wie in dieser Zeile aus. Andere Textgröße können mit dem FONT-Tag und dem Attribut SIZE gewählt werden: dieser Text ist groesser Dieser Text ist groesser dieser Text ist noch groesser Dieser Text ist noch groesser Das Attribut COLOR bestimmt die Farbe des Textes: 3. Fettdruck (bold): 4. Kursiv (italic): Dieser Text ist groesser und rot 5. Unterstrichen (underline): 6. Neuer Abschnitt: Dieser Text ist groesser und rot dieser Text ist fett Dieser Text ist fett dieser Text ist kursiv Dieser Text ist kursiv dieser Text ist unterstrichen Dieser Text ist unterstrichen Das P-Tag beginnt einen neuen Abschnitt (Paragraph) und fügt eine Leerzeile ein: Das schließende Tag kann fehlen. 5

6 7. Neue Zeile: Das BR-Tag (Break) bewirkt einen Zeilenumbruch ohne eine Leerzeile einzufügen. 8. Ausrichtung des Textes: 9. Hintergrundfarbe der Seite: <center>dieser Text ist erscheint zentriert</center> Das Attribut BGCOLOR des BODY-Tags bestimmt die Hintergrund-Farbe der Seite (background color): <html> <head> <title>rot</title> </head> <body bgcolor= red > diese Seite hat einen roten Hintergrund </body> </html> Der Browser versteht einige Farbangaben im Klartext, z.b. white, black, red, green, blue, cyan, magenta, yellow. Im allgemeinen erfolgt die Angabe von Farben mit dem Attribut COLOR oder BGCOLOR in der Form bgcolor="#aabbcc". 10. Die HTML-Tags können geschachtelt werden: <center>Dieser Text ist erscheint zentriert</center> 11. Sonderzeichen: Dieser Text erscheint zentriert. ä ö ü ß Leerzeichen (non breaking space) ä (a Umlaut) ö (o Umlaut) ü (u Umlaut) ß (Grad, degree) 12. Waagerechte Linie (horizontal rule): <hr> 6

7 Aufgaben: 1. Erstellen Sie mit Notepad++ die Datei aufgabe1.html". Schreibe den HTML-Code für folgende Seite. Speichere das Dokument und öffne es im Browser. 2. Die HTML-Seite soll im Browser den Titel "Informatik" tragen und die Hintergrundfarbe gelb haben. Erstelle eine Seite "aufgabe2.html" Seite mit Inhalt und Formatierungen wie unten: 7

8 HTML-Tags - Teil 2 1. Einfache Liste Einfache Liste Zeile 1 Zeile 2 Zeile 3 einfache Liste <ul> <li>zeile 1</li> <li>zeile 2</li> <li>zeile 3</li> </ul> 2. Nummerierte Liste Nummerierte Liste 1. Zeile 1 2. Zeile 2 3. Zeile 3 nummerierte Liste <ol> <li>zeile 1</li> <li>zeile 2</li> <li>zeile 3</li> </ol> 3. Tabellen 1. Spalte 2. Spalte <table border= 1 > <tr> <td>1. Spalte</td><td>2. Spalte</td> </tr> </table> Hinweis: <tr>...</tr> erzeugt eine Zeile (Reihe, Row) <td>...</td> erzeugt eine Spalte Aufgaben: 1. Ändere im TABLE-Tag das Attribut in BORDER=3. Was bewirkt es? 2. Füge eine 2. Zeile hinzu: 1. Spalte 2. Spalte 2. Zeile, 1. Spalte 2. Zeile, 2. Spalte 3. Füge eine 3. Spalte hinzu: 1. Spalte 2. Spalte 3. Spalte 2. Zeile, 1. Spalte 2. Zeile, 2. Spalte 2. Zeile, 3. Spalte 8

9 Grafiken 1. Folgender IMAGE-Tag fügt in die HTML-Seite ein Bild ein (SRC=source): <img src="bild.gif"> 2. Um den Aufbau einer HTML-Seite im Browser zu beschleunigen, gibt man die Bildgröße als Attribute WIDTH und HEIGHT des IMAGE-Tags an. <img src="bild.gif" width= 110 height= 54 > 3. Das gif-format (Grafic Interchange Format) kann höchstens 256 Farben darstellen und eignet sich hauptsächlich für Strichgraphik. Das jpg-format (Joint Photographics Expert Group) kann bis zu 16,7 Millionen Farben darstellen und eignet sich auch für Fotos. Datenkompression reduziert die Dateigröße. 4. Bilder können auch als Seitenhintergrund verwendet werden: Das Hintergrundbild "back.gif" hat eine Größe von 159x169 Pixel. Es wird über die gesamte Seite periodisch wiederholt. Die Angabe der Bilddatei erfolgt mit dem BACKGROUND-Attribut des BODY-Tags: <body background="back.gif"> 9

10 Farben Bei den Farben für Text, Seitenhintergrund oder Tabelle versteht der Browser einige Angaben im Klartext, z.b. white, black, red, green, blue, cyan, magenta, yellow. Aufgaben: 1. Scheibe eine HTML-Seite "farben.html", die eine Tabelle mit farbigem Hintergrund enthält: Eine weitere Tabelle soll aus 8 Spalten bestehen. Gib im TD-Tag jeder Spalte als Attribut COLOR die obigen Farben an, z.b.: <td bgcolor= red >red</td> white black red green blue magenta cyan yellow Im Allgemeinen erfolgt die Angabe von Farben mit dem COLOR Attribut in der Form: color="#aabbcc" Hier liegt das RGB-Farbmodell zugrunde, bei dem jede Farbe aus verschieden großen Anteilen der Grundfarben Rot, Grün und Blau zusammengesetzt wird. Die Anteile der drei Grundfarben können zwischen 0 und 255 liegen. Sie werden als zweistellige Hexadezimalzahlen angegeben (00 bis FF). Farbe red green blue magenta cyan yellow Code FF FF FF FFFF00 00FFFF FFFF00 black white FFFFFF 10

11 Pfade HTML-Code der Seite "bilder.html" <html> <head> <title>mein Bild</title> </head> <body> <img src="bild1.gif"> <img src="bilder/bild2.gif"> </body> </html> Die HTML-Seite "bilder.html" soll mehrere Bilder enthalten. Der IMAGE-Tag muss für jedes Bild im Attribut SRC (source) eine Pfadangabe enthalten, d.h. eine Angabe darüber, wo das Bild zu finden ist (in welchem Verzeichnis bzw. Ordner). 1. Im einfachsten Fall liegt das Bild ("bild1.gif") in demselben Ordner (Verzeichnis) wie die aufrufende Seite. Der Aufruf erfolgt dann: <img src="bild1.gif"> 2. Befindet sich das Bild in dem Unterordner "bilder", muss das IMAGE -Tag in der Pfadangabe den Namen des Unterordners ("bilder") enthalten: <img src="bilder/bild2.gif"> 3. Die HTML-Seite "bilder.html" befinde sich jetzt im Ordner "text" und die Bilder in übergeordneten Ordnern. Mit der Pfadangabe../ gelangt man in den (um eine Ebene) übergeordneten Ordner: Die Pfadangaben relativ zu "bilder.html" lauten: <img src="../bild1.gif"> <img src="../bilder/bild2.gif"> 11

12 ../../ führt in der Ordnerhierarchie um zwei Ebenen nach oben. Die Pfadangabe für "bild3.gif" relativ zu "bilder.html" lautet: <img src="../../bild3.gif"> Aufgaben: "bilder.html" soll im Ordner "bilder" liegen. Wie lauten die SRC-Attribute für die drei Bilder? 12

13 Navigation und Links 1. Navigation innerhalb einer Seite, lokale Links: Soll zu einer bestimmten Stelle einer Seite gesprungen werden, so wird dort ein Anker-Tag (anchor) als Ziel eingefügt, das einen Namen als Attribut erhält: <a name= anfang > </a> Der zu diesem Anker führende Link (Startpunkt der Verknüpfung) hat als Attribut HREF (hyper reference) den Namen des Ziel-Ankers mit vorgesetztem Doppelkreuz "#": <a href="#anfang">seitenanfang</a> Schreibe eine Seite "navigation.html": <html> <head> <title>navigation</title> </head> <body> <a name= anfang ></a> <a href="#ende">seitenende</a> 1 2 3 4 5 6 7 <a href="#anfang">seitenanfang</a> <a name= ende ></a> </body> </html> Im Browser erscheinen die mit einem Link versehenen Texte zumeist unterstrichen und in einer besonderen Farbe (je nach Voreinstellungen) 2. Nicht nur über Textstellen lassen sich Verknüpfungen (Links) herstellen, sondern auch über Bilder: Das IMG-Tag des Pfeilbildes "uparrow.gif" steht innerhalb eines Anker-Tags: <a href="#anfang"><img src="gifs/uparrow.gif"></a> Dortmund als Anker: <A NAME="dortmund">Dortmund</A> 3. Links zu einer anderen HTML-Seite: Bei Links zu anderen lokalen Seiten sind wie beim Aufruf von Bilddateien Pfadangaben erforderlich: 13

14 Von "seite1.html" werden "seite2.html" und "seite3.html" so aufgerufen: <a href="seite2.html">gehe zu Seite 2</a> <a href="texte/seite3.html">gehe zu Seite 3</a> 4. Der Link zu einer (externen) Webseite besteht aus dessen vollständigem URL (Uniform Resource Locator). Er benutzt das Hypertext Transfer Protocoll " Beispiel: <a href=" Homepage von P. Merkelbach</a> Zur Homepage von P. Merkelbach 5. Mit dem Attribut TARGET="_blank" wird die Seite in einem neuen Browser-Fenster angezeigt: <a href=" target="_blank"> Homepage P. Merkelbach </a> 14