Einführung in HTML Wenn das Formular online abgeschickt wird, dann erhält der Empfänger als folgendes:

Transkript

1 Wenn das Formular online abgeschickt wird, dann erhält der Empfänger als folgendes: Aufgabe: Erstellen Sie das Formular und speichern Sie es mit dem Namen formular1.html 10.1 Radio-Buttons Mit der Bezeichnung Radio-Buttons werden Optionsfelder bezeichnet, die nur eine Auswahl von mehreren möglichen erlauben. HTML-Code dazu: Welches Betriebssystem ist am besten?<br> <input type=radio name="bs" value="windows">windows<br> <input type=radio name="bs" value="os/2">0s/2<br> <input type=radio name="linux" value="linux"> Linux<br><br> Radiobuttons werden durch <input...> eröffnet (input = Eingabe). Danach folgt die Angabe type=radio. Jede der zur Auswahl stehenden Zeilen muss denselben Bezeichnernamen erhalten (name="bs". Dadurch wird kenntlich gemacht, dass es um die Auswahl von genau einem der Buttons geht. Der Name muss in Anführungszeichen gesetzt werden. Hinter dem <input>-tag geben Sie den Text ein, mit dem der Radiobutton bei der Anzeige im Browser beschriftet sein soll. Aufgabe: Bringen Sie diese Radiobuttons in der Datei formular1.html unter. Achten Sie darauf, dass sie vor den abschließenden Befehlen stehen müssen: <input type=submit value="absenden"> <input type=reset value="abbrechen"><br></form> 10.2 Kontrollkästchen Kontrollkästchen (auch Checkboxen genannt) werden "angekreuzt", das heißt, mit Häkchen versehen; hier sind mehrere Häkchen möglich. Die Syntax ist den Radiobuttons ähnlich, z. B.: <input type=checkbox name="programm" value="excel">excel Das folgende Beispiel soll ebenfalls in der Datei formular1.html erstellt werden: Damit jeweils drei nebeneinander stehen, muss wieder eine Tabelle verwendet werden. Aufgabe: Programmieren Sie dies in der Datei formular1.html!

2 Vorauswahl von Radiobuttons und Checkboxen Die Vorauswahl (Pre-Selection) ist ein beliebtes Mittel, um denjenigen, der eine Wahl treffen soll, schon eine bestimmte Option vorzuschlagen: Eine Vorauswahl sieht so aus wie oben auf der Abbildung, auf der bei Dreamweaver, Photoshop und HTML Editor jeweils schon ein Häkchen zu sehen ist. Dazu wird bei der Definition des Buttons das Attribut checked hinzu. Dies geht bei Kontrollkästchen (Checkboxen) mehrfach, bei Radiobuttons nur einfach. vergleichen Sie die beiden Ausschnitte: checked value="photoshop" value="photoshop" 10.3 Mehrzeilige Eingabefelder Solche Eingabefelder werden oft dazu verwendet, eine Meinungsäußerung in freier Form zu ermöglichen. Sie werden durch <textarea... eingeleitet; auch hier wird ein Variablenname vergeben. Rows steht für die Anzahl Zeilen, cols (normalerweise Spalten) bedeutet hier die Breite in Buchstaben. Die folgenden beiden Zeilen im HTML Code: Wie ist Ihre Meinung zu kostenpflichtigen Angeboten im Internet?:</p> <textarea name="angebote" rows=6 cols=50></textarea> führen zu dieser Form im Browser: Bei der Eingabe ist man hier nicht auf die sechs Zeilen beschränkt, vielmehr rollt der Text weiter. Aufgabe: Ergänzen Sie dies in der Datei formular1.html! 10.4 Datei-Auswahlfelder definieren Wenn Benutzer die Möglichkeit zum Uploaden einer Datei bekommen sollen, dann geht dies folgendermaßen: Senden Sie eine Text- oder HTML-Datei!</p> <input type=file size=50 maxlength=200 name="datei" accept="text/*"><br> Der Anwender kann entweder einen Dateinamen hineinschreiben (mit Pfad) oder mit der Schaltfläche Durchsuchen arbeiten

3 Bei Durchsuchen öffnet sich dann ein Dateiauswahl-Dialogfeld: 10.5 Auswahlfelder und Pull-Down-Menüs Mit Auswahlfeldern können Sie dem Anwender eine Liste anbieten, aus der er auswählen kann. Was markiert ist, wird übertragen, wenn das Formular abgeschickt wird. Sehen Sie am Beispiel, wie mit <select> und <option> gearbeitet wird: Wählen Sie den Provider mit dem besten Angebot:</p> <select name="provider" size=5> <option> T-Online <option> AOL <option> Telebell <option> MSN <option> Arcor Online </select> Wenn Sie size=1 nehmen, dann wird automatisch ein Pull-Down-Menü in folgender Form daraus: Erst wenn der Listenpfeil zum "Aufklappen" verwendet wird, werden wieder alle Optionen zur Auswahl sichtbar. Aufgabe: Ergänzen Sie dies in der Datei formular1.html!

4 Das komplette Formular sieht nun so aus: Wenn das Formular abgeschickt wird, dann wird eine versandt, die bei der Eingabe wie oben in dieser Form beim Empfänger ankommt:

5 Aufgabe: Entwickeln Sie ein Formular für den Internet-Auftritt der Gemeinde Püllen. Es soll diese Form bekommen: Aufgabe: Dieses Formular soll nun in das Frameset der Gemeinde Püllen eingefügt werden. Verwenden Sie dazu die Grafik meinung.gif. Das Ganze soll so aussehen:

6 Lösung für formular.html <html><head><title>formular</title></head><body> <form method=post enctype="text/plain"> <h4>ihre Meinung ist uns wichtig - die Gemeinde Püllen fragt nach!</h4> <table border=1> <tr> <th colspan="2">was machen Sie im Kurzurlaub am liebsten? </th> </tr><tr> <td width=200> <input type="checkbox" name="urlaub" value="wandern">wandern</td> <td width=200><input type="checkbox" name="urlaub" value="fahrrad fahren">fahrrad fahren</td> </tr> <tr> <td> <input type="checkbox" name="urlaub" value="faulenzen">faulenzen</td> <td><input type="checkbox" name="urlaub" value="museen besuchen">museen besuchen</td> </tr> <tr> <td> <input type="checkbox" name="urlaub" value="kanu Fahren">Kanu Fahren</td> <td> <input type="checkbox" name="urlaub" value="konzerte besuchen">konzerte besuchen</td> </tr> </table><br><br> <table border=1> <tr> <th colspan="1"> Wo waren Sie letzten Sommer in Urlaub?</th> </tr> <td><input type="radio" name="zuletzt" value="in den Bergen">In den Bergen<br> <input type="radio" name="zuletzt" value="am Meer">Am Meer<br> <input type="radio" name="zuletzt" value="weder noch">weder noch<br> <input type="radio" name="zuletzt" value="ich war gar nicht in Urlaub">Ich war gar nicht in Urlaub<br> </td> </tr> </table><br> Was gefällt Ihnen am Urlaubsangebot der Gemeinde Püllen am besten? <select name="best" size="1"> <option>die Natur <option>die freundlichen Leute <option>die Kneipen <option>die ruhige Lage <option>die Bauernhöfe <option>die Spazierwege <option>der alte Marktplatz </select><br><br> Sagen Sie uns die Meinung - was auch immer Sie loswerden wollen: <textarea name="meinung" rows=5 cols=45></textarea><br><br> <input type="submit" name="abschicken" value="abschicken"> <input type="reset" value="abbrechen"> </form></body></html> Lösung für den Einbau in das Frameset: In der Datei oben.html muss vor dem Tabellen-tag <td> mit dem mailto-befehl noch der Verweis auf das Formular untergebracht werden: <td><a href="formular.html" target="hauptfenster"><img src="grafik/meinung.gif" width="90" height="90" border="0" alt=""></a> </td>

7 11 Cascading Style Sheets (CSS) CSS bedeutet: "Cascading Style Sheets" = kaskadierende Stilvorlagen. Man könnte sie mit Formatvorlagen vergleichen, die Sie auch z. B. aus Word kennen. Als CSS-Anweisungen gelten sie für HTML-Dokumente. CSS ist eine Sprache, mit der Formate einzelner HTML-Elemente zentral festgelegt werden. Das betrifft die zu verwendende Schrift, die Größe einzelner Elemente, Farben, Eigenschaften von Tabellen usw. Definitionen von Formaten werden zentral an einer Stelle angegeben, entweder im Kopf einer Datei oder in einer separaten CSS-Datei. Der Vorteil ist dabei, dass diese Formatanweisung nur einmal definiert werden muss; alle Elemente, für die sie gültig sind, erhalten dann das gewünschte Format. So ist auch der Ausdruck "Cascading" zu verstehen: So wie ein Wasserfall sich in Kaskaden nach unten ergießt, so werden die Formateigenschaften über die Elemente "gespült", die Formate "vererben" sich von den übergeordneten auf die untergeordneten Elemente. Für die Übungen im Zusammenhang mit CSS stehen einige Texte zur Verfügung, die formatiert werden sollen, indem sie in HTML-Dokumenten Verwendung finden. Dies sind die hier unter Aufgabe gezeigten txt-dateien. Aufgabe: Erstellen Sie einen Ordner namens CSS auf Ihrer Festplatte. Kopieren Sie die txt- Dateien hinein. Erstellen Sie außerdem einen Ordner namens separate Datei als Unterordner zu CSS. Der Sinn soll darin bestehen, dass Cascading style sheets von uns zunächst in der Datei selbst angewandt und dann in einer separaten CSS-Datei untergebracht werden, um so auf mehrere HTML-Dokumente Anwendung zu finden Style-Sheet-Angaben innerhalb der HTML-Datei Wenn die Style-Sheet-Angaben innerhalb der Datei gemacht werden sollen, dann erfolgen diese Angaben innerhalb der <head>... </head> Angaben, nach den Title-Tags <html> <head> <title>titel der Datei</title> <style type="text/css">  </style> </head> <body> </body> </html>

8 Die style-sheet-anweisungen werden in diese Kommentar-Zeichen (<! //--> ) eingebettet, damit ältere Browser, die keine Style-Sheet-Angaben verstehen, keine Fehlermeldungen produzieren, sondern die Formatanweisungen dann wie einen Kommentar betrachten. Beispiel: Im Kopf der Datei werden die Formate für die Überschriften H1 und H2 definiert: H1: 24 pt Größe, Farbe: rot, kursiv H2: 16 pt Größe, Farbe: rot-lila, kursiv das ist zunächst die Übersetzung auf deutsch! Innerhalb des style type-tags wird jeweils das gewünschte Element geschrieben ( H1 ), dann wird eine geschweifte Klammer geöffnet und am Ende geschlossen { } Innerhalb der geschweiften Klammer steht die Formatierungsanweisung, abgeschlossen von einem Semikolon. h1 { font-size:24pt; color: #FF0000; font-style:italic; } Aufgabe: Erstellen Sie die folgende Datei fach_beruf.html. Den Text der Datei können Sie aus der Text-Datei fach_beruf.txt kopieren: <html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <h1>berufsausübung (Fachinformatiker)</h1> Nach abgeschlossener Berufsausbildung ergeben sich beispielsweise Beschäftigungsmöglichkeiten bei Anbietern von Informations- und Telekommunikationssystemen und -dienstleistungen (Hersteller, System- und Softwarehäuser sowie unternehmensinterne und externe Dienstleister). <h2>tätigkeiten</h2> Beratung, Betreuung und Schulung von Nutzern Mitwirkung bei der Einführung neuer bzw. modifizierter Informations- und Kommunikationssysteme <h2>aufbereitung technischer Unterlagen</h2> </body> </html> Im Browser sieht diese Datei so aus:

9 11.2 Style-Sheet-Angaben in einer separaten Datei Der Sinn von Cascading Style Sheets besteht ja unter anderem darin, das Erscheinungsbild von HTML-Dokumenten zu vereinheitlichen. Außerdem soll Speicherplatz gespart werden, wenn öfter benötigte Angaben nur einmal gemacht werden müssen. Deshalb ist es oft sinnvoll, die CSS-Angaben nur einmal für mehrere Dateien eines Projekts machen zu müssen. Dies geht, indem man die Style-Sheet-Angaben in einer separaten Textdatei macht, in der die Formatanweisungen stehen. Diese Datei sollte die Dateiergänzung.css haben (im Beispiel unten: formate.css) <html> <head> <title>titel der Datei</title> <link rel=stylesheet type="text/css" href="formate.css"> </head> <body> </body> </html> Die Datei formate.css hat den folgenden Inhalt, wenn nur wie vorher zunächst Überschriften 1. und 2. Ordnung definiert werden: Aufgabe: Erstellen Sie die Datei formate.css Verwenden Sie Text aus den txt-dateien abschluss0.txt, it_kaufmann0.txt und system_kauf0.txt, indem Sie aus ihnen HTML-Dokumente machen, in denen die CSS-Formate Anwendung finden. Nennen Sie die HTML-Dokumente wie vorher die txt-dateien, aber jetzt mit der Ergänzung.html Im Browser müsste dann das einheitliche Erscheinungsbild der Dateien zu sehen sein: 11.3 Schriftart einstellen Am Beispiel der Schriftart soll gezeigt werden, dass man darauf achten muss, nicht nur die "richtigen" Angaben für Windows-PCs zu machen. Derjenige, der ein HTML-Dokument im Internet aufruft, kann ebensogut einen Apple Macintosh haben, oder er verwendet Linux als Betriebssystem. Wenn beispielsweise die Schriftart Arial als Gesamtformat für normalen Text eingestellt werden soll, dann lautet die Regel in der CSS-Datei (als rule oder Regel werden die Anweisungen in den geschweiften Klammern bezeichnet)

10 body {font-family: Arial} um nun zusätzlich zu Arial eine Alternativschriftart zu nennen, z. B. Helvetica für Apple Macintosh, schreibt man body {font-family: Arial, Helvetica} noch allgemeiner lässt es sich ausdrücken, wenn man die Schriftart-Gruppe angibt. Es gibt fünf Sammelbezeichnungen für die Schriftarten: sans-serif serif cursive monospace serifenlose Schrift wie Arial Schriften mit Serifen, den kleinen "Füßchen" z. B. in Times New Roman kursiv-geschwungene Schrift nicht-proportionale Schrift wie Courier new (jeder Buchstabe gleich breit) fantasy geschwungene Phantasieschrift Die Angabe zur Schrift heißt also, wenn man möglichst allgemeingültig bleiben will: body {font-family: Arial, Helvetica, sans-serif} Aufgabe: Verändern Sie die Datei formate.css so, dass die drei vorher formatierten Dokumente in der Schriftart Arial erscheinen. Bei den Formatdefinitionen können oft ähnliche Bereiche zusammengefasst werden. Statt der Schreibweise h1 { font-family:helvetica } h2 { font-family:helvetica } können Sie schreiben: h1, h2 { font-family: Helvetica } Aufgabe: Erstellen Sie die Datei formate2.css. Sie soll folgende Merkmale enthalten: h1 { font-size:20pt; color: #FF0000; font-family: Helvetica,Arial; } h2 { font-size:14pt; color: #FF0099; font-family: Helvetica,Arial; } p,li { font-size:12pt; line-height:14pt; font-family:helvetica,arial; letter-spacing:0.2mm; word-spacing:0.8mm; } übersetzt: Überschriften 1. Ordnung :20 Punkt Schriftgröße, rot, Arial Überschriften 2. Ordnung :14 Punkt Schriftgröße, rot, Arial Absätze und Listen in 12 pt, Arial, Zeilenhöhe 14 Punkt Buchstabenzwischenraum 0,2 mm Wortzwischenraum 0,8 mm Aufgabe: Diese Formate sollen nun den Dateien abschluss0.html und it-kaufmann0.html zugewiesen werden. Zunächst muss dazu der Verweis auf die CSS-Datei erfolgen: <link rel=stylesheet type="text/css" href="formate2.css"> Innerhalb der Dateien muss dann zusätzlich formatiert werden, d.h. der HTML-Datei muss ja dann jeweils auch zugewiesen werden, welche Formatierungen gewünscht sind. Textabsätze müssen jetzt zwischen den tag <p> und dem schließenden tag </p> stehen, und Listen und die dazugehörigen Listenpunkte müssen ebenfalls bestimmt werden. Ausschnitt aus dem HTML-Code: <p>um diesen Anforderungen zu genügen und gleichzeitig den Aufwand und die Kosten für die Durchführung der Prüfung zu begrenzen, sind für die neuen IuK-Berufe folgende Prüfungselemente vorgesehen:</p> <h2>abschlußprüfung der IT-Berufe: Prüfungsteile und Gewichtung</h2>

11 <ul> <li>teil A</li> <li>1. Bereich</li> <li>2. Bereich<br> Betriebliche Projektarbeit und Projekt dokumentieren Präsentation und Fachgespräch max. 35 h </li> Ansicht im Browser (hier für anschluss0.htm): entsprechend ein Ausschnitt aus der formatierten Datei it_kaufmann0.html

12 12 HTML-Dateien zum Provider übertragen Die Dateien, die bisher angelegt wurden, sind nur lokal getestet worden. Das bedeutet, sie wurden auf dem eigenen PC erstellt und dann im Internet Explorer geöffnet, um sie zu testen und die Wirkungsweise zu begutachten. Sinnvoll ist es natürlich, wenn die Seiten auf einen Host hochgeladen werden, damit sie extern getestet werden können. Dazu ist folgendes erforderlich: einen Provider, der Webspace zur Verfügung stellt ein Programm, mit dem die HTML-Dateien und Grafiken ins Web hochgeladen werden können. Wer eine dauerhafte Internetpräsenz wünscht oder benötigt, der muss über einen Dienstleister wie Strato, Puretec o. ä. eine Domain beantragen. Man erhält dann eine Adresse in der Form: Dabei wird zunächst geprüft, ob die gewünschte Domain noch frei ist. Wer beispielsweise den Domainnamen wünscht, wird wahrscheinlich erfahren, dass dieser Name schon belegt ist, und man wird ihm Alternativen wie oder anbieten. Wer einen Provider mit einer kostenlosen Domain sucht, der kann z. B. bei einer Suchmaschine wie Google als Suchbegriff eingeben: Homepage Webspace kostenlos Es gibt eine Vielzahl von Anbietern, die eine unterschiedlich hohe Menge an Speicherplatz (10 bis 200 MB) kostenlos anbieten. Geringer wird die Anzahl, wenn zusätzlich die Unterstützung von CGI, PHP und MySQL gewünscht wird. In der Regel ist eine Registrierung erforderlich; man benötigt eine -Adresse, über die man Zugangsdaten und Passwort gesendet bekommt. Die Web-Adresse ist dann etwas länger, sie könnte z. B. lauten: Übertragung der Daten oder Das bekannteste (und gute) Programm zum "Uploaden" von Dateien ist das Programm WS_FTP bzw. WS_FTP LE. Die Abkürzung FTP steht für File Transfer Protocol. Aufgabe: Suchen Sie eine Quelle im Internet, von der Sie das Programm herunterladen können. Oder verwenden Sie die Datei Nach dem Doppelklick auf dem Programmsymbol startet das Installationsprogramm: aus dem For_All-Ordner. Klicken Sie auf Continue, um zu beginnen

13 Als Schüler sind Sie berechtigt, das Programm lizenzfrei zu verwenden: Klicken Sie dann auf Next Hier wird noch abgefragt, für welche Zwecke man das Programm verwenden will: Klicken Sie dann wieder auf Next Hier erfolgt jetzt noch die Bekanntgabe der Linzenzvereinbarung. Klicken Sie auf Accept, wenn Sie den Bedingungen zustimmen. Hier wird schließlich noch der Ordner gewählt, in den das Programm installiert werden soll: Wenn Sie das Programm nach der Installation starten, dann sehen Sie zunächst die Verbindungsdaten zum Programmhersteller:

14 Hier werden dann stattdessen die eigenen Daten eingetragen, zum, Beispiel so: Über die Schaltfläche New können Sie übrigens Profile zu unterschiedlichen Providern festlegen, damit verschiedene Zugänge vom Programm gespeichert werden können. Wenn Sie mit OK bestätigen, wird die Verbindung hergestellt, und Sie sehen auf dem Bildschirm ein Dialogfeld in dieser Form: Dabei sind im linken Bereich die Daten Ihrer Festplatte zu sehen, und rechts die Dateien auf dem Server. Wenn Sie Dateien übertragen wollen, müssen Sie in linken Fensterabschnitt markiert werden und können dann mit dieser Schaltfläche übertragen werden: