- RobertKrah.de

Einführung in HTML
Wenn das Formular online abgeschickt wird, dann erhält der Empfänger als E-Mail 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!
- 36 -
Einführung in HTML
10.2.1 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
- 37 -
Einführung in HTML
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!
- 38 -
Einführung in HTML
Das komplette Formular sieht nun so aus:
Wenn das Formular abgeschickt wird, dann wird eine E-Mail versandt, die bei der Eingabe wie oben in
dieser Form beim Empfänger ankommt:
- 39 -
Einführung in HTML
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:
- 40 -
Einführung in HTML
Lösung für formular.html
<html><head><title>Formular</title></head><body>
<form action="mailto:[email protected]" 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>
- 41 -
Einführung in HTML
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 txtDateien 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.
11.1
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-Sheet-Angaben ... */
//-->
</style>
</head>
<body>
</body>
</html>
- 42 -
Einführung in HTML
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
das ist zunächst die Übersetzung auf deutsch!
H2: 16 pt Größe, Farbe: rot-lila, kursiv
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">
<!-h1 { font-size:24pt; color: #FF0000; font-style:italic; }
h2 { font-size:16pt; color: #FF0099; font-style:italic; }
//--> </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:
- 43 -
Einführung in HTML
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)
- 44 -
Einführung in HTML
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
serifenlose Schrift wie Arial
serif
Schriften mit Serifen, den kleinen "Füßchen" z. B. in Times New Roman
cursive
monospace
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>
- 45 -
Einführung in HTML
<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
- 46 -
Einführung in HTML
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:
www.Name.de
Dabei wird zunächst geprüft, ob die gewünschte Domain noch frei ist. Wer beispielsweise den
Domainnamen www.Schmitz.de wünscht, wird wahrscheinlich erfahren, dass dieser Name
schon belegt ist, und man wird ihm Alternativen wie
www.Gustav-Schmitz.de oder
www.Schmitz-Köln.de 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 E-Mail-Adresse, über die man Zugangsdaten und Passwort gesendet bekommt.
Die Web-Adresse ist dann etwas länger, sie könnte z. B. lauten:
http://people.freenet.de/schmitz
oder
www.it02.it-pc.de
12.1
Übertragung der Daten
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:
Klicken Sie auf Continue, um zu beginnen
- 47 -
aus dem For_All-Ordner.
Einführung in HTML
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:
- 48 -
Einführung in HTML
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:
- 49 -