docHTML Skript - Lehrer-Homepages
download 
Report Transcription
HTML Skript - Lehrer-Homepages
Phase 5
HTML-Erste Schritte
Seite 1
1. HTML Seitenaufbau - Grundgerüst
Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden zwei Teilen:
Header (Kopf)
Der Header enthält Angaben zu Titel, Suchbegriffe für Suchmaschinen, Bemerkungen usw. Diese Angaben
sind auf der Seite später nicht zu sehen, sie bleiben verborgen.
Body (Körper)
Der Body enthält den eigentlichen Text mit Überschriften, Verweisen, Grafiken usw. Alles, was hier steht,
ist auf der Internetseite sichtbar.
Beispiel:
Quellcode
Vorschau
<HTML>
<HEAD>
<TITLE>Text des Titels</TITLE>
</HEAD>
<BODY>
HEAD
Meine erste HTML-Seite
BODY
Meine erste HTML-Seite
</BODY>
</HTML>
2. HTML-Tags
Um den Text in einer HTML-Datei formatieren zu können, benötigt man
<HTML>
Anfangstag
bestimmte Formatierungsbefehle. Die Befehle heißen Tags (sprich: Täg).
Dabei gibt es ein Anfangstag und ein Endtag. Im obigen Beispiel sind
...
bereits diverse Tags enthalten. Sie werden benötigt, um das Grundgerüst
</HTML>
Endtag
einer HTML-Datei zu erstellen. Nehmen wir das Tag HTML. Es steht immer
am Anfang einer HTML-Seite, das Endtag steht am Ende einer Seite. Das
Endtag erkennt man daran, dass ihm ein Schrägstrich „/“ vorangestellt wird, ein so genannter Slash (sprich:
Släsch).
Das Prinzip Anfangstag – Endtag wird (bis auf einige Ausnahmen) bei allen Formatierungen in HTML
angewendet.
Um den Satz „Dieser Text ist fett“ im
Fettdruck darzustellen, wird der Text mit dem Tag
<B> formatiert (b =englisch bold = fett)
Beispiel:
weitere Tags für einfache Formatierungen:
<I>
italic, oder kursiv
<U>
unterstrichen
<STRIKE>
durchgestrichen
<B> Dieser Text ist fett </B>
<SUP>
<SUB>
<MARQUEE>
Arbeitsauftrag 1: .
Erstellen Sie eine HTML-Seite und speichern Sie diese unter dem
Namen Arbeitsauftrag01.htm ab. Wichtig ist, dass Sie beim
Speichern die Dateiendung .htm mit eingeben!!!
Der Titel der Seite lautet: Erste Schritte in HTML. Im Body der Seite
soll folgender Text stehen (siehe rechts):
Hinweis: Um einen Zeilenumbruch zu erzeugen wird das Tag: <BR>
hochgestellt
tiefgestellt
Lauftext
HTML
Meine erste Seite.
Viele weitere werden folgen.
Ein Hoch auf das Internet.
verwendet.
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 2
Break ist eines der Tags, das kein Endtag benötigt.
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 3
3. Der Editor Phase 5
Das Programm Phase 5 ist eine sog. Freeware. Das bedeutet, es kostet nichts. Man darf es benutzen oder
weitergeben, ohne ein schlechtes Gewissen zu haben (Wer Interesse hat, kann es sich beim Lehrer auf den USBStick ziehen lassen und zu Hause installieren).
Phase 5 besteht im Wesentlichen aus zwei Programmteilen, zu denen Sie durch das
Klicken auf die Register unten links gelangen. Im EDITOR wird die eigentliche Arbeit
geleistet. Dort erstellen Sie den Quelltext/Quellcode der HTML-Seite. Wollen Sie sehen, wie das Geschriebene
später aussehen wird, klicken Sie auf das Register WWW. Dann wird eine Browservorschau gezeigt. Da man
häufig zwischen diesen beiden Registern wechseln muss, gibt es dafür zwei Shortcuts (Tastenkombinationen). F9
ist die Browservorschau F8 der Editor. Das Speichern der Datei erfolgt mit dem Shortcut STRG + S.
4. Eine HTML-Seite mit Hilfe von Phase 5 erstellen.
Das Programm bietet dem Benutzer an, das Grundgerüst einer Datei automatisch zu erstellen. Klicken Sie dazu
auf das Menü Datei, Neu:
Mit Hilfe dieser Maske kommen Sie ohne viel
Schreibarbeit schnell ans Ziel. Klicken Sie auf
Erstellen um den Vorgang abzuschließen.
Wichtig: Der Titel der Seite ist nicht der Dateiname.
Sie müssen die Datei erst abspeichern (.htm nicht
vergessen!!!!).
5. Im BODY Einstellungen für die ganze Seite vornehmen
Wenn Sie nach dem oben beschriebenen Vorgaben die HTML-Seite erstellt haben, erhalten Sie die folgende Zeile:
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#FF0000" ALINK="#FF0000" VLINK="#FF0000">
Dem Befehl BODY sind hier einige Dinge hinzugefügt worden. Er wurde erweitert um die Angaben:
TEXT ................ Textfarbe
LINK ................. Linkfarbe
BGCOLOR ....... Hintergrundfarbe der Seite
ALINK ......... Farbe des aktiven Links (gedrückter)
VLINK ......... Farbe des bereits besuchten Links (visited)
Sie können die vorgegebenen Werte einfach abändern und die englischen Bezeichnungen für die Farben zwischen
die Anführungszeichen setzen. Es ist auch möglich auf das Register „Colors“ zu klicken und einen Farbwert aus
der Farbpalette anzuwählen. Der Farbwert wird dann automatisch übernommen.
Beispiel: Textfarbe gelb, Hintergrundfarbe rot. <BODY TEXT="yellow" BGCOLOR="red">
Arbeitsauftrag 2: .
1. Erstellen Sie eine HTML-Seite mit Hilfe von Phase 5.
2. Speichern Sie diese unter dem Namen
Arbeitsauftrag02.html ab.
3. Legen Sie als Hintergrundfarbe schwarz und als
Textfarbe weiß fest.
4. Übernehmen Sie den Text und die Formatierungen aus
Zweite Seite
Ein sonniger Tag
Eine sternenklare Nacht
Ein kühler Morgen
Das
Tief
bringt schlechtes Wetter
dem abgebildeten Beispiel (rechts).
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 4
6. Texte gestalten
Horizontale Linien
Mit dem Tag <HR> haben Sie die Möglichkeit eine durchgezogene horizontale Linie zu erstellen. Mit
einigen Zusatzangaben (Attributen) können Sie der Linie ein unterschiedliches Aussehen geben.
<HR> erzeugt eine Linie über die ganze Breite mit normaler Stärke
<HR width="80%"> erzeugt eine Linie, die nur 80 Prozent des Seitenbreite ausmacht (width=Breite)
<HR width="50%" size="9" color="blue"> erzeugt eine blaue halbseitige Linie Stärke 9.
Arbeitsauftrag 3: .
Berufskolleg der Stadt Bottrop
Erstellen
Erstellen Sie
Sie die
die abgebildete
abgebildete Seite (HinterSeite
(Hintergrundfarbe
blau, gelb, Liniengrundfarbe blau, Schriftfarbe
Schriftfarbe
gelb,
Linienfarbe
farbe grün). Datei: Arbeitsauftrag3.html
grün). Datei:
Arbeitsauftrag4.html
Überschriften
Mit dem Tag <H1> Überschrift </H1> erstellen Sie eine Überschrift der 1. Ordnung (sehr groß). Es gibt insgesamt 6
Überschriftgrößen - <H1> bis <H6>. Je größer die Zahl, desto kleiner die Schriftart. Das Tag hat den Vorteil, dass
es kein weiteres <BR> benötigt. Der Zeilenumbruch ist inklusive. Zudem können Sie mit dem Attribut align=“center“
die Überschrift zentrieren. Das ganze würde wie folgt aussehen:
<H2 align=“center“> Zentrierte Überschrift </H2>
H1
Über
Arbeitsauf schri
trag 04: .
ft der
Erstellen
1.Eb
Sie die
abgebildet ene
H2 en
Überschrif Über
schrif
ten.
Datei:
t der
Arbeitsauf 2.Eb
trag04.ht
ene
ml
H3 Übers
chrift
der
3.Ebe
ne
H4 Übers
chrift
der
4.Ebe
ne
H5 Übersc
hrift der
5.Eben
e
H6 Übersch
rift der
6.Ebene
Im Leben gibt’s auch Listen
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 5
Je nachdem, ob Sie Ihre Listen ordentlich oder „unordentlich“ gestalten wollen, haben Sie unterschiedliche
Möglichkeiten. Dies ist eine unordentliche Liste:
WWW
Quelltext
Und das ganze in HTML:
Unordentliche Listen in HTML
<UL>
bestehen aus einigen Einträgen
die alle mit dem “LI-Tag“
beginnen,
und mit dem “/LI-Tag“ enden!
</UL>
<LI>Unordentliche Listen in HTML</LI>
<LI>bestehen aus einigen Einträgen</LI>
<LI>die alle mit dem “LI-Tag beginnen“,</LI>
<li>und mit dem „/li-Tag“ enden!</li>
Arbeitsauftrag 5: . Übernehmen Sie das Beispiel der unsortierten Liste und speichern Sie die Datei unter
dem Namen: Arbeitsauftrag05.html ab.
Bei ordentlichen Listen wird nicht etwa Ordnung in die Liste gebracht, nein, es wird einfach nur durchgezählt:
1.
2.
3.
4.
Ordentliche Listen in HTML
bestehen aus einigen Einträgen
die alle mit dem „LI-Tag“ beginnen,
und mit dem „/LI-Tag“ enden!
Der einzige Unterschied in den beiden Listen ist das Listen-Tag:
bei unordentlichen Listen das <UL>-Tag, bei ordentlichen Listen
das <OL>-Tag.
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 6
Arbeitsauftrag 6: .
Übernehmen Sie das Beispiel der sortierten Liste und speichern Sie die Datei unter dem
Namen: Arbeitsauftrag06.html ab.
Das Aussehen der Aufzählungs- oder Nummerierungszeichen kann durch das Attribut: „type“ veränderte
werden. Beispiele:
Hinweis:
<OL type=“A“> für eine Nummerierung A) B) C) usw. oder <UL type=“square“> für ein Aufzählungszeichen
Arbeitsauftrag 7: .
Erstellen Sie ein HTML-Dokument, welches im Browser folgendes Aussehen bekommt. Datei:
Arbeitsauftrag07.html.
COMPUTERSPIELE
Erste Erkenntnisse zu Computerspielen
Es fehlt Dir immer ein Punkt zum neuen Highscore,
Hast Du ein Spiel solange gespielt, bis Dich niemand schlagen kann, wird ein Freund es zum ersten
Mal spielen und problemlos Platz 1 der Highscoreliste erreichen.
Bist Du der Beste, wird sich niemand dafür interessieren.
Weitere Erkenntnisse zu Computerspielen
I. Das Computerspiel, das Du Dir kaufst, ist nicht den Preis wert, den es gekostet hat.
II. Kein Computerspiel ist so gut, wie das Bild auf der Verpackung.
III. Eine gute Kritik in einer Spielezeitschrift besagt nur, dass das Spiel dem Redakteur gefallen hat.
IV. Du wirst immer einen anderen Geschmack haben als er.
V. Das merkst Du aber erst nach dem Kauf.
VI. Dein größter Rivale wird immer ein besseres Spiel haben als Du.
© by Murphy
Hinweise zur Lösung 1:
Das Dokument soll den Titel „Computerspiele" erhalten.
COMPUTERSPIELE ist eine zentrierte Überschrift erster Ordnung.
Alle weiteren Überschriften sind zentriert und zweiter Ordnung.
Die Trennlinie erstreckt sich über 80% des Bildschirms, ist zentriert und 5 Pixel stark.
Bei der ersten Liste handelt es sich um eine sogenannte ungeordnete Liste, Typ: square.
Die hervorgehobenen Wörter (ein Punkt, problemlos, niemand) in dieser Liste sind kursiv.
Die zweite Liste ist mit großen römischen Ziffern nummeriert.
Die Wörter Immer und besseres sind fett und kursiv, alle anderen Hervorhebungen in dieser Liste (Du, Dir,
Kein, immer, nach) sind nur fett.
Der Copyrightvermerk soll ein Zitat darstellen, er besteht aus einem eigenen Absatz, welcher rechtsbündig
ausgerichtet ist, das Copyrightzeichen ist ein Sonderzeichen (Einfügen, Sonderzeichen).
Hinweise zur Lösung 2:
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 7
Das Programm Phase 5 erleichtert das Schreiben der HTML-Tags durch einige Hilfen. Die Symbolleiste TEXT bietet
für die wichtigsten Tags Hilfen an.
Vorgehensweise:
Markieren Sie zunächst den Text, den Sie formatieren wollen. Klicken Sie dann auf das entsprechende Icon in der
Symbolleiste. Die Tags werden dann um den Text herumgesetzt.
Arbeitsauftrag 8: .
Öffnen Sie mit MS Word die Datei Arbeitsauftrag08.doc. Erstellen Sie die gleiche Datei unter HTML mit Phase 5.
Hinweis: Kopieren Sie sich den Text über die Zwischenablage in den HTML-Editor. „Leider“ gehen dabei alle
Formatierungen verloren.
VERLINKEN VON MEHREREN SEITEN
Das Salz in der Internetsuppe sind die so genannten. Hyperlinks. Damit können Sie durch einfaches Klicken auf
eine Textstelle oder Grafik von einer Seite zu einer anderen springen. Hier ein einfaches Beispiel:
<A HREF="Start.htm">Hier geht’s zur Startseite </A>
Anfangstag: A
(A= Anker)
Hypertextreferenz
HTML-Seite, die
aufgerufen wird
Text, der angezeigt wird
Endtag: A
Arbeitsauftrag 9: .
Erstellen Sie ein „Web“ (mehrere zusammenhängende
Internetseiten) mit der links abgebildeten Struktur.
1. Legen Sie ein Verzeichnis mit dem Namen Arbeitsauftrag09
an (Rechtsklick über dem Verzeichnis HTML, dann
Verzeichnis anlegen).
2. Erstellen Sie darin zunächst die sieben HTML-Seiten und
speichern Sie die Dateien mit den entsprechenden Namen
(Einkauf, Verkauf...) und der Dateiendung .htm ab.
3. Fügen Sie anschließend in jede Seite Links ein, so dass eine
Navigation innerhalb des „Webs“ mit den oben abgebildeten
Verbindungen möglich ist.
Hinweise:
4. Erstellen Sie auf jeder Seite eine kurze Überschrift (H2), einen
Link zurück und gestalten Sie die Seiten farbig interessant.
Die Linien stehen für die Verknüpfungen. Beispiel: Von der Seite index.htm können Sie zu allen anderen Seiten
springen. Gleichwohl können Sie von allen anderen Seiten wieder zur Seite index.htm zurückspringen.
Für Schreibfaule:
Klicken Sie mit der rechten Maustaste im Dateifenster auf die Datei, die Sie „verlinken“ wollen. Wählen Sie Link
einfügen. Dann wird der Quelltext automatisch eingefügt.
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 8
Grafiken einbinden.
Das Einfügen von Bildern, Grafiken oder Fotos geschieht durch das Tag: IMG (Abk. für Image). Dieses Tag braucht nicht
geschlossen zu werden. Hier ein Beispiel:
<IMG SRC="Foto.jpg" BORDER="1" W IDTH="293" HEIGHT="206" ALT="">
SRC= Source
Name der
RahmenBreite
Höhe
wird angezeigt bei
hier: Dateiname
Grafikdatei
stärke 1
Browsern ohne Bilder
Einige Angaben sind optional. Das heißt, nicht unbedingt notwendig. Allein der Befehl: <IMG SRC="Foto.jpg">
würde genügen, um das Bild anzuzeigen. Sie können das Bild wie einen normalen Absatz ausrichten (rechts-,
linksbündig etc.). Später werden wir dafür meistens Tabellen verwenden, damit es möglich ist, Text neben das Bild
schreiben zu können.
HTML-Seite
Projekt1
grafik.jpg
index.htm
zurück
Arbeitsauftrag 10:
Grundsätzliches:
Wird eine Grafik (Image-Datei) in eine HTMLSeite eingebunden, so wird stets nur ein Verweis
(Referenz) für die Grafik eingefügt. Die Grafik
selbst bleibt physikalisch an ihrem Ursprungsort.
In der HTML-Datei steht sinngemäß: „Zeige die
Grafik mit dem Dateinamen Grafik.jpg aus dem
Ordner Projekt1 an“.
1. Erstellen Sie eine Datei mit dem Namen: Bilder.htm.
2. Fügen Sie die drei Bilder: Soopy.jpg, Spok.jpg und Calvin.jpg in die Datei ein. Experimentieren Sie mit den
Angaben: Border, Width, Height und Alt.
Arbeitsauftrag 11: Persönliches Web
1. Erstellen Sie ein kleines Web mit drei oder vier Seiten, in dem Sie sich persönlich vorstellen.
2. Wählen Sie beispielsweise eine Einstiegsseite (index.htm) und weitere Seiten mit den Themen: Hobbys,
Lieblingsverein, Lieblingsband, Lieblingsserie, Familie, Freunde, Lieblingsauto oder ähnliches.
3. Verlinken Sie alle Seiten auf eine sinnvolle Weise.
4. Fügen Sie Ihr persönliches Foto ein.
5. Gestalten Sie das Web farblich möglichst anspruchsvoll in einem einheitlichen Design.
Arbeitsauftrag 12: . Hamburger Hafen – HHLA
Erstellen Sie das Web der Hamburger Lagerhausgesellschaft. Als Vorlage dienen Ihnen die Grafiken WEB1.jpg bis
WEB4.jpg, die Sie mit dem PHASE 5 Bildbetr. ansehen können. Legen Sie in Ihrem Ordner HTML das Verzeichnis:
Arbeitsauftrag12 an. Der Lehrer wird Ihnen alle dafür notwendigen JPEGs und GIFs in das Verzeichnis kopieren.
Sie benötigen die folgenden Dateien:
WEB1. jpg
WEB4. jpg
WEB2. jpg
container.jpg
WEB3. jpg
logo2.jpg
gelände.jpg
nacht.jpg
europamarkt.jpg
dot1.gif
logo1.gif
mail.gif
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 9
Tabellen
Tabellen werden heute hauptsächlich benutzt, um ein spannendes Layout (Seitengestaltung) zu
erzielen. Ohne Tabellen wird das Layout ziemlich eindimensional - die Absätze sind lediglich
untereinander angeordnet.
Tabellen ermöglichen es Blöcke, die nebeneinander liegen, zu positionieren. Die einzelnen Zellen
können Text, Grafik und so weiter enthalten. Sie können also in HTML Tabellen definieren, um
tabellarische Daten darzustellen, oder um Text und Grafik attraktiver am Bildschirm zu verteilen. Dazu
wird grundsätzlich unterschieden zwischen Tabellen, die Gitternetzlinien haben (für tabellarische Daten),
und Tabellen ohne sichtbare Gitternetzlinien ("blinde Tabellen" - etwa für mehrspaltigen Text oder für
sauberes Beieinanderstehen von Text und Grafik). <table> leitet eine Tabelle ein (table = Tabelle).
Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, müssen Sie den Zusatz border mit angeben
(border = Rand/Rahmen). Um die Tabelle mit Inhalten zu füllen, müssen Sie Zeilen (rows) und Spalten
(columns) definieren wie im Folgenden beschrieben.
Beispiel:
<table border=“1“>
<tr>
<td> linke Spalte</td>
<td>rechte Spalte </td>
</tr>
</table>
Browservorschau:
tr=table row (neue Zeile)
td=table data (Zelleninhalt)
linke Spalte
rechte Spalte
Eigenschaften einer Tabelle
Border
Rahmenstärke: Gibt mit der Anzahl an Pixel an, wie breit der Rahmen um die Tabelle ist. Setzen Sie 0
(Null), ist der Rahmen unsichtbar.
<Table border=”0”> Tabelle hätte keinen Rahmen
Witdth
Breite/Weite: Bezeichnet die Breite der Tabelle. Sie wird in Prozent des Bildschirms oder in Pixel
angegeben. Wählen Sie das letztere, müssen Sie natürlich damit rechnen, dass der Benutzer waagerecht
scrollen muss, wenn sein Bildschirm schmaler ist als die Tabelle.
<Table width=“100%“> Tabelle ist genau halb so breit wie die Seite
Height
Höhe: Gibt die Höhe der Tabelle an.
<Table height=“50%“> Tabelle ist halb so hoch wie die Seite
Cellspacing
Textabstand: Gibt die Dicke der inneren Rahmen zwischen den Zellen an.
Cellpadding
Zellenabstand: Gibt den Abstand in Pixel zwischen Inhalt (Text oder Grafik) und Zellenrand an. Setzen
Sie border auf 0, sind die Balken zwischen den Zellen ebenfalls unsichtbar – der Abstand ist aber der
gleiche. Ob das so recht logisch ist, weiß ich nicht – aber so ist es nun einmal. Setzen Sie border = „1“
und cellspacing = „0“, sind Rahmen und Balken schwarze Striche. Erhöhen Sie den Wert, erscheinen sie
dreidimensional, was eigentlich nicht besonders gut aussieht.
BGCOLOR
Legt die Hintergrundfarbe der ganzen Tabelle oder einer Zelle fest.
BORDERCOLOR
Legt die Hintergrundfarbe des Rahmens fest.
Arbeitsauftrag 13: .
Erstellen Sie die folgenden Tabellen und speichern Sie die Datei unter dem Namen
Tabellen01.htm ab.
Umsatz 2002
Umsatz 2003
Umsatz 2004
Umsatz 2005
10.000 EUR
10.000 EUR
12.000 EUR
12.000 EUR
16.000 EUR
16.000 EUR
22.000 EUR
22.000 EUR
Montag
MATHE
BWL
DEUT
SPORT
BIO
Dienstag
WIOG
RELI
FRANZ
CHEMIE
BWL
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 10
Arbeitsauftrag 14: .
1. Übernehmen Sie die Beispiele 1 –bis 3 aus der Infothek.
2. Erstellen Sie bitte Ihren Stundenplan nach folgendem Muster:
Montag
Stundenplan
Dienstag
Mittwoch
...
1
2
3
4
5
6
7
8
Infothek: Spalten und Zeilen verbinden COLSPAN – ROWSPAN
<TABLE border>
<TR>
<TD colspan=“2“> Hobbys</TD>
</TR>
Hobbys
<TR>
<TD> Lesen </TD>
Lesen
Fußball
<TD> Fußball </TD>
</TR>
</TABLE>
<TABLE border >
<TR>
<TD rowspan =“3“>E-Mail </TD>
<TD>GMX </TD>
</TR>
<TR>
<TD> WEB </TD>
E-Mail
</TR>
<TR>
<TD>GOOGLE</TD>
</TR>
</TABLE>
<TABLE border>
<TR>
<TD rowspan=“2“>1</TD>
<TD> 2 </TD>
</TR>
<TR>
<TD> 3</TD>
</TR>
</TABLE>
GMX
WEB
GOOGLE
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 11
Arbeitsauftrag 15 .
Erweitern Sie Ihre persönliche Website bitte um eine Tabelle, in der die aktuellen Top Ten der
deutschen Charts aufgelistet werden. Neben den Titeln des Albums sollen die Bilder der
Interpreten stehen. Nehmen Sie die folgende Auflistung als Vorlage zur Hand.
Hinweis: Verwenden Sie das Tag <th> anstatt <td>, um die Inhalte zentriert und fettgedruckt
darzustellen.
Platz
Interpret
Album
1
Red Hot Chili Peppers
I'm With You
2
3
4
5
6
7
8
9
10
David Guetta
…
Foto und Fanpage
Nothing But The Beat
…
Fügen Sie die folgenden Links in die Seite ein. Die Links sollen bei einem Mausklick auf das
jeweilige Albumcover aktiviert und in einem neuen Fenster geöffnet werden!
http://redhotchilipeppers.com
HTML SKRIPT
Phase 5
HTML-Erste Schritte
■
■
■
Seite 12
Listen verschachteln
Arbeitsauftrag 16
Arbeitsschritt/
Sozialform/
Zeitvorgabe
Einzelarbeit
Arbeitsauftrag
Der Hundeverein Duisburg Nord möchte gerne die unten abgebildete Liste
mit Hunderassen auf seine Webseite bringen.
Verhelfen Sie dem Hundeverein zu einer ansprechenden Seite!
20 Minuten
In HTML haben Sie selbstverständlich auch die Möglichkeit, Listen verschachtelt darzustellen. Von der
Schreibweise her ändert sich nichts. Sie müssen lediglich als Listenelement ein weiteres <ul> -</ul>
Konstrukt verwenden!
Ein Beispiel:
<ul type = „square“>
<li> Apfel </li>
<ol>
<li> Granny Smith </li>
<li> Boskop </li>
<li> Sunny </li>
</ol>
<li> Birne </li>
<ol>
<li> große Birne </li>
<li> kleine Birne </li>
</ol>
<li> Orange </li>
<ol>
<li> Blutorange </li>
<li> Valensina Orange </li>
</ol>
</ul>
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 13
Fehlersuche: Suchen Sie den Fehler im HTML-Code!!!
<HTML>
<HEAD>
<META NAME="author" CONTENT="">
<TITLE>JJ</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#FF0000" ALINK="#FF0000" VLINK="#FF0000">
Hunderassen
<Ol type = "A">
<li> Retriever
<ol type = "1">
<li> Labrador </li>
<li> Golden Retriever </li>
<li> Flat Coated Retriever </li>
</ol>
<li> Schnauzer
<ol type = "1">
<li> Riesenschnauzer </li>
<li> Zwergschnauzer </li>
</ul>
<li> Terrier
<ol type = "1"
<li> Foxterrier </li>
<li> Cairn Terrier </li>
</ol>
</ol>
</BODY>
</HTML>
Arbeitsauftrag 17
Arbeitsschritt/
Sozialform/
Zeitvorgabe
Einzelarbeit
45 Minuten
Ihre Aufgabe – ganz konkret
Erstellen Sie das die folgenden zwei Seiten. Verlinken Sie die einzelnen Seiten
miteinander über die erste Seite „index.html“:
Der Titel ist eine normale Laufschrift. Die Bilder „fame.jpg“ und „fame2.jpg“ sind
ebenfalls Laufschriften mit der direction „left“ und „right“.
Das Bild „Sternchen.jpg“ ist ein Hintergrundbild (BODY
background="sternchen.jpg").
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 14
Lernsituation: Rechtliche Vorschriften zur Erstellung einer Homepage
Frau Schäfer vom Hundeverein Duisburg Nord ist schockiert. Sie erhält mit der heutigen Post einen Brief vom
Tierschutzverein Duisburg. Der Tierschutzverein droht mit einer Klage, da die Seite www.tierseiten.net
hundefeindliche Inhalte enthalte und der Hundeverein diese Website auf seiner Homepage verlinkt hat.
Außerdem bekommt Frau Schäfer einen Brief des selbständigen Fotografen Peter Licht. Dieser droht dem
Tierschutzverein ebenfalls mit einer Klage, da der Hundeverein auf seiner Internetseite 4 Fotos von ihm verwendet
hat, ohne ihn um Erlaubnis zu fragen.
Frau Schäfer ist irritiert und weiß nicht so recht, wie sie sich verhalten soll. Ist sie denn für externe Links haftbar?
Und ist es etwa auch verboten fremde Fotos auf seiner Homepage zu veröffentlichen?
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 15
Partnerarbeitsauftrag (Aufgabe 18a):
1. Schritt
10 Minuten
Bitte lesen Sie den untenstehenden Informationstext und markieren Sie wichtige
Begriffe. Arbeiten sie falls notwendig mit eigenen Verständniskürzeln.
2. Schritt
20 Minuten
Erstellen Sie für Ihren Informationstext eine Powerpoint-Präsentation, die die
rechtlichen Vorschriften und mögliche Rechtsfolgen beinhaltet.
3. Schritt
5 Minuten
Wählen Sie 2 Gruppensprecher und präsentieren Sie Ihr Ergebnis den Mitgliedern
der anderen Gruppen.
■
■
■
Haftung für Inhalte
Der Betreiber einer Website ist laut § 8 Abs.1 TDG (Teledienstegesetz) für eigene Inhalte auf seinen Seiten
verantwortlich.
Ein Anbieter einer Internetseite muss daher stets um die Richtigkeit, Vollständigkeit und Aktualität der Inhalte
seiner Seite bemüht sein, d.h. er sollte sie regelmäßig überprüfen und gegebenenfalls überarbeiten. Dabei sind die
Vorschriften des Urheberrechtes zu beachten. Wenn urheberrechtlich geschützte Werke übernommen werden
(z.B. Texte oder Bilder), muss der Inhaber des Urheberrechts vorher um Erlaubnis gebeten werden. Der Schöpfer
eines solchen Werkes ist schließlich Inhaber der Verwertungsrechte und kann unter Umständen eine Vergütung
verlangen. Fremde Inhalte müssen auch als solche gekennzeichnet werden (z.B. durch einen kurzen Hinweis auf
den Autor unter einem Bild).
Ein Verstoß gegen das Urheberrecht kann zivilrechtliche und strafrechtliche Folgen haben. Zivilrechtlich hat der
Inhaber des Urheberrechts einen Anspruch auf Schadenersatz und Unterlassung. Strafrechtliche Konsequenzen
können Geldstrafen oder in besonders schwerwiegenden Fällen sogar Haftstrafen sein.
In Chats, Foren und Gästebüchern wird unter dem Deckmantel der Anonymität oft beleidigt, verleumdet oder es
werden falsche Tatsachen behauptet. Dies kann für den Betreiber des Forums oder Gästebuches Folgen haben.
Die Rechtsprechung nimmt an, dass der Betreiber eines Gästebuches oder Forums sich fremde Einträge zu Eigen
macht (d.h. sie seine eigene Meinung widerspiegeln), wenn er diese nicht regelmäßig kontrolliert und ggf. löscht.
Regelmäßige Kontrollen, in einem für jeden einsehbaren Forum oder Gästebuch, sind daher für die Betreiber
zumutbar und notwendig. Geschieht dies nicht, macht sich nach Ansicht der Rechtsprechung der Betreiber die
Inhalte zu Eigen und haftet, wenn diese beleidigend, falsch oder rechtswidrig sind. Einer Haftung kann der Anbieter
somit nur durch regelmäßige Kontrolle entgehen. Daneben haftet natürlich auch derjenige, der einen
rechtswidrigen Eintrag in ein Gästebuch oder einen Chat eingebracht hat.
■
■
■
Haftung für Links
Für den Inhalt von Webseiten ist grundsätzlich der Anbieter oder Betreiber selbst verantwortlich. Wenn jedoch ein
Homepagebetreiber (z.B. der Hundeverein Duisburg-Nord) Links auf externe (fremde) Seiten setzt, muss er diese
zunächst auf rechtswidrige Inhalte überprüfen. Sollten zum Zeitpunkt der Prüfung keine Rechtsverstöße erkennbar
sein, ist eine Verlinkung erlaubt.
Aufgrund des enormen Zeitaufwandes ist es oft nicht möglich die verlinkten Seiten permanent inhaltlich zu
kontrollieren. Wenn man sich überlegt wie viele Unterseiten eine Website haben kann und z.B. 20 Seiten verlinkt
sind, kann man sich ein ungefähres Bild vom Zeitaufwand machen. Bei Bekannt werden von Rechtsverstößen
müssen entsprechende Links selbstverständlich umgehend gelöscht werden.
Als eine Möglichkeit für die Minimierung rechtlicher Risiken wird dabei von vielen Webmastern ein
Haftungsausschluss (so genannter Disclaimer) verwendet. Meist haben diese Disclaimer folgenden Wortlaut:
„Mit Urteil vom 12. Mai 1998 - 312 O 85/98 - "Haftung für Links" hat das Landgericht (LG) Hamburg entschieden,
dass man durch das Setzen eines Links, die Inhalte der gelinkten Seite ggf. mit zu verantworten hat. Dies kann - so
das LG - nur dadurch verhindert werden, dass man sich ausdrücklich von diesen Inhalten distanziert. Hiermit
distanzieren wir uns ausdrücklich von den verlinkten Seiten.“
Über den Sinn eines derartigen Disclaimers kann man jedoch streiten. Das Landgericht Hamburg hat in diesem
Urteil ganz im Gegenteil festgestellt, dass ein pauschaler Haftungsausschluss für die Inhalte, auf die man verlinkt,
nicht ausreichend ist.
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 16
Distanziert man sich von Links, so stellt sich die Frage, warum man sie überhaupt angibt. Ein Link stellt eine
Empfehlung oder die Angabe einer Quelle dar. Von ersterer ist eine Distanzierung kaum möglich, von zweiterer
distanziert sich in aller Regel bereits der zugehörige Text.
Zudem stellt es auch ein äußerst widersprüchliches Verhalten dar, den Nutzern eine Seite per Link zu empfehlen,
sich dann jedoch „ausdrücklich“ von den Inhalten der verlinkten Seiten zu distanzieren.
Aus diesem Grund sollte man den Haftungsausschluss für externe Links lieber mit der Problematik des
Zeitaufwandes begründen und das oben angeführte Urteil nicht pauschal verwenden.
■
■
■
Das Impressum – Anbieterkennzeichnung im Internet
Das Internet ist kein rechtsfreier Raum. Mehrere Gesetze regeln inzwischen das gemeinsame Miteinander im "Netz
der Netze". Trotz detaillierter Vorschriften verstoßen aber immer wieder Homepagebetreiber und Webmaster,
wissentlich oder unwissentlich, gegen klare gesetzliche Regelungen. Um zu wissen, wer der Betreiber einer
Homepage ist und um diesen z.B. bei Rechtsverstößen zur Rechenschaft ziehen zu können muss jeder Betreiber
einer Homepage ein Impressum in seine Homepage einbauen.
Die Grundsätze sind:
Jeder Betreiber einer Homepage, der auf seinen Seiten redaktionelle Inhalte bereitstellt, hat seine
Homepage mit einem Impressum gemäß Medienstaatsvertrag zu versehen.
Jeder Betreiber einer Homepage, der als Anbieter von Waren oder Dienstleistungen auftritt, hat auf
seiner Homepage eine Anbieterkennzeichnung gemäß Teledienstegesetz anzubringen.
Es gibt klare Vorgaben dafür welche Angaben vom Anbieter/Betreiber einer Homepage zu machen sind. Dazu
gehören der Name der Firma (falls es die Website einer Firma ist), der Name des Verantwortlichen (z.B.
Geschäftsführer oder Betreiber) und die vollständige Postanschrift. Die Kennzeichnung selbst muss nicht auf der
Haupt-Indexseite erfolgen, sie kann auch unter einem deutlich sichtbaren Menüpunkt, etwa unter dem Begriff
"Kontakt", "Info", "Über uns" oder "Impressum" auf der Website enthalten sein.
Beispiel: Anbieterkennzeichnung einer Firma
Verantwortlich für den Inhalt dieser Seiten:
Mustermann GmbH / AG / KG etc.
Inhaber / Geschäftsführer / persönlich haftender Gesellschafter:
Erika Mustermann
Beispielstr. 1
12345 Irgendwo
Tel.: 0111 111-221
Fax: 0111 111-221
■
■
■
Datenschutz
Manche Betreiber veröffentlichen auf ihren Internetseiten personenbezogene Daten (z.B. eine
Mitgliederliste). Vor Veröffentlichung dieser Daten sollten die betreffenden Personen um ihr
Einverständnis gebeten werden.
Bei einigen Websites ist es notwendig, dass Nutzer ihre personenbezogenen Daten (z.B. Name,
Anschrift, Bankverbindung) freiwillig in eine Maske eingeben, um bestimmte Dienste der Seite nutzen zu
können (z.B. bei Online-Shops wie Amazon oder eBay). Der Betreiber einer solchen Website verpflichtet
sich gemäß TDDSG (Teledienstedatenschutzgesetz) und BDSG (Bundesdatenschutzgesetz) zur
Verschwiegenheit und darf diese Informationen ohne ausdrückliches Einverständnis des Nutzers nicht
an Dritte weitergeben.
Die Informationen dürfen allerdings zu statistischen Zwecken genutzt werden (z.B. zum Erstellen einer
Alterstatistik der Nutzer einer Internetseite). Die Übermittlung persönlicher Daten an staatliche
Einrichtungen und Behörden (z.B. Polizei) darf nur im Rahmen zwingender Rechtsvorschriften (z.B.
Ermittlungen gegen Raubkopierer) erfolgen. Der Nutzer hat darüber hinaus ein umfassendes Recht auf
Auskunft über Daten, die ein Anbieter über ihn gespeichert hat.
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 17
Rechtliche Vorschriften zur Erstellung einer Homepage - Arbeitsblatt
Arbeitsauftrag 18b:
1. Löschen Sie den Link zur Internetseite www.tierseiten.net auf der Startseite des Hundevereins
hunderassen.htm.
2. Kennzeichnen Sie die Bilder des Fotografen Peter Licht (Cairn Terrier, Foxterrier, Labrador,
Riesenschnauzer) so, dass ersichtlich ist, dass er der Urheber dieser Fotos ist (z.B. © Peter Licht)
3. Erstellen Sie eine neue HTML-Seite in PHASE 5, die den untenstehenden Haftungsausschluss enthält
(Datei: haftungsausschluss_vorlage.doc). Speichern Sie diese Datei im selben Ordner in dem sich die
Datei hunderassen.htm befindet.
4. Erstellen Sie auf der Seite hunderassen.htm einen Link zur neu erstellten Seite. Der Text des Links soll
„Haftungsausschluss“ lauten.
5. Erstellen Sie eine weitere neue HTML-Seite, die das Impressum (siehe Informationen unten) enthält.
Verlinken Sie diese Seite ebenfalls auf der Seite hunderassen.htm mit dem Text „Impressum“
Hundeverein Duisburg Nord e.V
Inge Schäfer (1. Vorsitzende)
Märkische Str. 121
47448 Duisburg
Tel.: 0203 447444
Fax.: 0203 447441
Beispieltext: Haftungsausschluss
Haftung für Inhalte
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der
Inhalte können wir jedoch keine Gewähr übernehmen.
Als Diensteanbieter sind wir gemäß § 6 Abs.1 MDStV und § 8 Abs.1 TDG für eigene Inhalte auf diesen Seiten nach
den allgemeinen Gesetzen verantwortlich. Diensteanbieter sind jedoch nicht verpflichtet, die von ihnen
übermittelten oder gespeicherten fremden Informationen zu überwachen oder nach Umständen zu forschen, die
auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch
erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei bekannt werden von
entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
Haftung für Links
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb
können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets
der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der
Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung
nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete
Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei bekannt werden von Rechtsverletzungen werden wir
derartige Links umgehend entfernen.
Datenschutz
Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder E-Mail-Adressen)
erhoben werden, erfolgt dies soweit möglich stets auf freiwilliger Basis. Die Nutzung der Angebote und Dienste ist,
soweit möglich, stets ohne Angabe personenbezogener Daten möglich.
Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung
von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich
widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten
Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 18
Das Entwerfen eines Frame-Layouts
Als Vorbereitung auf das Entwerfen einer Frameseite, sollten Sie die Frames auf einem Blatt Papier skizzieren,
damit Sie wissen, welches Ergebnis Sie zu erzielen versuchen. Am besten macht man sich Gedanken darüber,
welche Frames zuerst „gelesen“ werden sollen und platziert diese oben links. Ebenfalls festlegen sollten Sie,
welche Frames eine feste Größe haben müssen und welche soviel Platz wie möglich einnehmen sollen.
Framegruppen
Eine Framegruppe unterteilt das Browserfenster in rechteckige Bereiche. Jeder dieser Bereiche kann ein Frame
oder eine untergeordnete Framegruppe sein. Das FRAMESET-Tag legt die tatsächliche Größe und Gestaltung der
Frames unter Verwendung der weiter unten beschriebenen Attribute ROWS und COLS fest.
Ein Framedokument enthält kein Element BODY, da es lediglich eine Reihe von Frames enthält, von denen jeder
das Element BODY vermutlich in seinem eigenen HTML-Dokument verwendet. Für FRAMESET wird ein End-Tag
benötigt. Sie dürfen keine normalen, im Dokumentenkörper auftretenden HTML-Elemente (wie H1, BR oder IMG)
vor dem ersten FRAMESET-Tag einsetzen, da andernfalls alle Frames vom Browser ignoriert werden.
Das Element TITLE ist das einzige, das normalerweise vor dem ersten FRAMESET auftaucht. Dieses Element ist
zulässig, weil es Teil des HEADs ist.
Die HTML-Seite in Zeilen und Spalten aufteilen
Die Attribute ROWS und COLS von FRAMESET legen fest, wie viele Frames sich in der Gruppe befinden und wie
sie den vorhandenen Platz unter sich aufteilen.
Beispiel für ein Frameset
<FRAMESET ROWS=“20%,30%,50%“>
</FRAMESET>
<FRAMESET COLS=“200,500,100“>
</FRAMESET>
<FRAMESET ROWS=“50%,50%“
COLS=“20%,70%,10%“>
Bedeutung
Das Frameset soll aus drei Reihen bestehen und die
verfügbaren 100% des Bildschirms prozentual
aufteilen.
Das Frameset besteht aus drei Spalten. Die
Spaltenhöhe wird in diesem Beispiel in Pixel
angegeben
Beispiel für
Spezifikation
eine
vollständige
FRAMESET-
</FRAMESET>
Beispiel für ein Frameset:
<HTML>
<FRAMESET COLS="30%,70%" border ="0">
<FRAME SRC="links.htm" NAME="links">
<FRAME SRC="rechts.htm" NAME="rechts">
</FRAMESET>
</HTML>
In diesem Beispiel wird die Framegruppe vertikal in 3
Spalten aufgeteilt. Analog wäre eine Aufteilung in 3
Zeilen durch die Verwendung des Attributes ROWS
möglich.
Das Quelldokument des Frames festlegen
Das Attribut SRC eines Frames gibt die Adresse des Dokuments an, das in ihm dargestellt werden soll.
Das Attribut NAME versieht den Frame mit einem Namen, so dass er später per TARGET von Links in anderen
Dokumenten als Ziel verwendet werden kann.
Das Frameset lädt in den linken Bereich namens „links“ eine Datei namens „links.htm“. Damit Hyperlinks beim
Anklicken die zu ladende Datei in den richtigen Bereich des Framesets laden, müssen diese erweitert werden.
<A HREF=“beispiel.html“ TARGET=“Text“> Hier steht Text </A>
o
o
jedes Feld des Framesets muss einen eindeutigen Namen erhalten. Dies geschieht durch die
Zuweisung des Elements NAME.
Beachten Sie die Groß- und Kleinschreibung!
HTML SKRIPT
HTML-Erste Schritte
<HTML>
<FRAMESET COLS="50%,50%">
<FRAME SRC="links.htm" NAME="links">
<FRAME SRC="rechts.htm" NAME="rechts">
</FRAMESET>
</HTML>
index.htm
Phase 5
Seite 19
linke Seite
links.htm
rechte Seite
rechts.htm
Beim Aufrufen der Datei: index.htm, werden die beiden Seiten links.htm und rechts.htm in den Browser geladen.
Wenn Sie auf der Seite links.htm einen Link erstellen (z.B. auf die Seite inhalt.htm), dann müssen Sie in den Kopf
(HEAD) der Seite links.htm <BASE TARGET =“rechts“> eintragen.
Arbeitsauftrag 19: .
Legen Sie bitte einen Ordner FRAMES an und erstellen Sie in Ihrem Editor folgende Framesets:
1. Frameset mit horizontaler Teilung 20:80 (Speichern unter: Framehor.html)
2. Frameset mit vertikaler Teilung 50:50 (Speichern unter: Framevert.html)
3. Frameset mit horizontaler Teilung 30:70 und mit vertikaler Teilung 25:75 (Speichern unter: Framemix.html)
Erstellen Sie für die Framesets bitte die folgenden Webseiten:
1. Eine Seite mit gelbem Hintergrund und dem Text: „Frame oben“. Speichern Sie diese unter oben.html in
den Ordner Frames.
2. Eine Seite mit rotem Hintergrund und dem Text: „Frame unten“. Speichern Sie diese unter unten.html in
den Ordner Frames.
3. Eine Seite mit weißem Hintergrund und dem Text: „Frame links“. Speichern Sie diese unter links.html in
den Ordner Frames.
4. Eine Seite mit blauem Hintergrund und dem Text: „Frame rechts“. Speichern Sie diese unter rechts.html
in den Ordner Frames.
a) Rufen Sie das HTML-Dokument mit dem Namen Framehor.html auf und ergänzen Sie es mit den folgenden
Tags:
<frame src="oben.html">
<frame src="unten.html">
b) Rufen Sie das HTML -Dokument mit dem Namen Framevert.html auf und ergänzen Sie es mit den folgenden
Tags:
<frame src="links.html">
<frame src="recht.html">
c) Rufen Sie das HTML -Dokument mit dem Namen Framemix.html auf und ergänzen Sie es mit den folgenden
Tags:
<frameset cols="30%,70%">
<frame src="links.html">
<frameset rows="25%,75%">
<frame src="oben.html">
<frame src="unten.html">
</frameset></frameset>
Durch das Hinzufügen der Angabe Scrolling=“yes“ oder Scrolling=“no“ kann man einstellen, ob das jeweilige
Frame über Scroll Leisten verfügen soll oder nicht. Die Voreinstellung ist immer Scrolling=“auto“, d.h. das Frame
Fenster erhält einen Rollbalken, wenn die Größe des Textes es erforderlich macht.
Für den Fall, dass Frames von einem Browser ignoriert werden sollten, würde der betreffende User vom Lesen der
Web Site ausgeschlossen werden. Für diesen Fall bietet das Attribut <Noframes> Abhilfe, indem hinter diesem Tag
ein Link eingefügt wird, der den Benutzer auf eine andere Seite ohne Frames verweist.
Mittels des Tags Marginwidth=Pixelzahl kann man den horizontalen Abstand zwischen dem Frame Inhalt und
seinem Rand festlegen und über den Zusatz Marginhight=Pixelzahl wird der Abstand zwischen dem oberen bzw.
unteren Fensterrand bestimmt.
Frames werden normalerweise per Voreinstellung mit einem Rahmen versehen, mit dem Zusatz border = “0“ wird
kein Fensterrahmen dargestellt.
Soll ein Benutzer daran gehindert werden, die Ausmaße eines Fensters zu verändern, so fügt man das Tag
Noresize hinzu. Benachbarte Frames können dann auch nicht bewegt werden.
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 20
Arbeitsauftrag 20: .
Erstellen Sie bitte eine Website,
die im linken Frame Ihre
Unterrichtsfächer in Form von
aufgelisteten Verweisen (Links)
darstellt und im rechten Frame
die entsprechenden Inhalte des
Fachs ausgewiesen werden.
Erstellen Sie dazu einen neuen
Ordner. Die Startseite benennen
Sie bitte mit index.htm.
Verweise zu anderen Frames
Will man durch einen Link auf ein anderes Frame hinweisen, so muss man dem Browser mitteilen, welches Frame
gemeint ist. Dazu muss man
1) dem Frame im Frameset mit name =““ einen Namen zuweisen
Bsp.:
<frameset cols="30%,70%">
<frame src="infos.htm" name =”faecher”>
<frame src="wi.htm" name=„fach” >
</frameset>
2) in der Datei festlegen, in welchem Segment (Frame) die Verweisdatei angezeigt werden soll. Der „normale“
Verweistag wird durch den Zusatz TARGET=“Frame_Fenster_Name“ ergänzt.
Bsp.:
<body">
<a href="wi.htm" target="fach">Infos zum Fach
Wirtschaftsinformatik</a><br>
<a href="vwl.html" target="fach">Infos zum Fach VWL</a>
</body>
Der Inhalt von bspw. wi.htm wird in dem Segment angezeigt, welches durch den Namen „Fach“ adressiert
wurde
Arbeitsauftrag 21: .
Erstellen Sie bitte mit Ihrem Partner die oben stehende Webseite
1. Gestalten Sie zunächst den Grundaufbau des Bildschirms in der Datei index.htm. Für das erste
Anzeigefenster sollen 30% des Bildschirms vertikal reserviert werden.
Des Weiteren definieren Sie bitte durch die Frames, dass im linken Bereich die Datei inhalt.htm sowie im
rechten Bildschirmbereich entweder die Datei fußball.htm oder handball.htm angezeigt wird.
2. Füllen Sie nun die 3 Dateien mit Leben, indem Sie für diese die oben abgebildeten Inhalte übernehmen.
inhalt.htm:
vgl. linkes Fenster
fußball.htm:
vgl. rechtes Fenster
handball.htm: soll den Text „An diesem Wochenende mussten alle Begegnungen wegen bundesweiten
Schneechaos abgesagt werden!“ beinhalten.
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 21
Lernsituation: Frames
Sie erhalten den Auftrag, für den Online-Shop Woodels.de eine Homepage zu entwerfen. Der Betreiber
hat bereits genaue Vorstellungen von seiner Seite. Diese hat er ihnen aufgezeichnet. Außerdem hat er
ein paar weiterführende Ideen, die von Ihnen zu verwirklichen sind!
Arbeitsauftrag 22: .
Lieber Webdesigner!!!
o Bitte erstellen Sie die obigen Seiten für meinen Online-Shop!
o Erstellen Sie ein geeignetes Logo und gestalten Sie die Startseite nach Ihren Vorstellungen!
o Denken Sie sich außerdem eine Idee für die Spendenaktion aus und gestalten Sie auch diese
Seite!
o Verlinken Sie die Seiten miteinander!
o Die Kunden von WOODELS rufen häufig an und haben Fragen bezüglich der rechtlichen
Bedingungen des Kaufs im Internet. Mit Hilfe einer Serviceseite (FAQ) auf der Homepage sollten
die Fragen nun beantwortet werden. Erstellen Sie eine weitere Internetseite „FAQ.htm“ auf der
Sie den Käufer über seine Rechte aufklären!
Beantworten Sie auf der Seite FAQ.htm mit Hilfe der Paragraphen § 355 BGB, § 356 BGB, § 357
BGB (einfach in Google eingeben) folgende Fragen:
Wann beginnt die Widerrufsfrist?
Muss der Widerruf eine Begründung enthalten?
Wie und wann ist der Widerruf zu erklären?
Wann erlischt die Frist?
Wann kann das Widerrufsrecht in ein Rückgaberecht umgewandelt werden?
Wer muss die Rücksendung der Ware übernehmen?
Wer trägt die Kosten?
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 22
Lernsituation: Grundlagen HTML
Herr Schmitz, Geschäftsführer der NIETEC GmbH, kommt von einer Abteilungsleiterversammlung zurück. Hier
werden ihm regelmäßig die neuesten Informationen aus den Abteilungen zugetragen. Heute hat er vom Leiter der
Abteilung Verkauf erfahren, dass sich regelmäßig Kunden über die unmoderne und unzureichende Website der
NIETEC GmbH beschweren.
Daher möchte er nach einem Unternehmen suchen, welches Websites erstellt. Was ihn aber nach ein paar
Anrufen maßlos ärgert, sind die Preise. Wahnsinn, was so was kostet!!!
Daher hat er einen neuen Plan:
Die Azubis sollen in einem Projekt innerhalb der nächsten Monate lernen, eine Website zu erstellen!!! Als erstes
wird er die Azubis bitten, sich über die verschiedenen Möglichkeiten zu informieren, eine Homepage zu erstellen.
Arbeitsschritt/
Sozialform/
Zeitvorgabe
Einzelarbeit
Arbeitsaufträge (Arbeitsauftrag 23)
Lesen Sie den zu Ihrer Gruppe gehörigen Informationstext!
15 Minuten
Gruppenarbeit
30 Minuten
Gruppenarbeit
Planen Sie auf dem Papier eine kurze Power-Point-Präsentation zu
Ihrem Gruppenthema!
Gruppe 1: HTML
Gruppe 2: HTML-Editoren
Gruppe 3: Urheberrecht
Gruppe 4: Domains
Gruppe 5: Gestaltungskriterien
Erstellen Sie zu Ihrem jeweiligen Thema in der Gruppe eine kurze
Power-Point-Präsentation!
30 Minuten
■
■
■
I NFORM ATIONSTEXT
ZU
HTML
HTML ist die Abkürzung für Hypertext Markup Language, was sich am ehesten mit Seitenbeschreibungssprache
umschreiben lässt. HTML ist also eine Art 'Code', der dem Browser beschreibt, wie die Seite auszusehen hat. Aus
diesem Grund werden WWW-Seiten manchmal auch HTML-Seiten genannt.
Die einzelnen HTML-Befehle stehen in spitzen Klammern und werden „Tag“ genannt. Dabei gibt es öffnende Tags
(<TAG>) und schließende Tags (</TAG>); für manche Befehle wird jedoch kein schließender Tag benötigt.
Jedes HTML-Dokument gliedert sich in zwei Teile, nämlich Head und Body. Im Head befinden sich allgemeine
Angaben über das Dokument (Angaben über den verwendeten HTML-Editor, den Autor der Seite und
Informationen für Suchmaschinen wie den Titel des Dokuments, Schlüsselworte oder eine Zusammenfassung des
Inhalts). Der eigentliche Text und das Aussehen des Dokuments (Formatierungen, Grafiken, Verknüpfungen usw.)
werden dagegen im Body beschrieben.
Der Browser hat dann die Aufgabe, diese Angaben zu einem Gesamtwerk zu interpretieren und die WWW-Seite
darzustellen. Wenn Sie sich diesen HTML-Text einer Seite (auch 'Seitenquelltext' oder 'Quellcode' genannt) einmal
näher betrachten möchten, wählen Sie im Mozilla Navigator aus dem Menü Ansicht den Befehl Seitenquelltext.
Diese beschreibende Codierung benötigt wesentlich weniger Speicherplatz als beispielsweise die grafisch
orientierte Codierung eines Word-Dokuments. Deshalb ist das Übertragen von Hypertext relativ einfach und schnell
möglich.
HTML SKRIPT
Phase 5
HTML-Erste Schritte
■ ■
■
I NFORM ATIONSTEXT
ZUM DEUTSC HEN
Seite 23
U RHEBERRECHT 1
Im § 2 Urheberrechtsgesetz (UrhG) sind die Bestimmungen zum Schutz von Werken festgelegt.
Nach §2 Abs. 2 UrhG sind Werke persönliche geistige Schöpfungen. Voraussetzungen für
persönliche geistige Schöpfungen gem. § 2 UrhG sind:
o das Werk ist ein Original
o das Werk wurde von einer Person geschaffen
o das Werk ist nicht von "trivialer Natur"
o das Werk weist einen gewissen Umfang auf
Zu den Werken zählen u. U. auch Datenbanken, wie im § 4 UrhG genannt und Computerprogramme,
wie im § 69a UrhG beschrieben. Wichtig ist auch, dass das es sich nicht um eine bloße Idee handeln
darf. Die Idee bedarf einer Verkörperung, egal in welcher Form.
1)
Was das UrhG im Einzelnen unter den Werksbegriff fasst, können Sie im § 2
UrhG nachlesen!!!
Das Urheberrecht am Werk entsteht durch den realen Schöpfungsakt eines Urhebers (§ 7 UrhG). Es
ist also nicht etwa davon abhängig, dass es in ein Urheberrechtsregister o. Ä. eingetragen wird.
Inhaber des Rechts ist der Mensch, der das Werk geschaffen hat. Ein Copyright-Vermerk ist nicht
notwendig!!! Das bekannte © dient daher also nur zur Warnung vor Verletzung des Urheberrechts.
Der Schutz durch das Urheberrecht führt dazu, dass das Werk nicht ohne Zustimmung des Urhebers
genutzt, bearbeitet oder vervielfältigt werden darf.
Eine Besonderheit ergibt sich bei Fotografien / Filmaufnahmen von Personen. Deren Verwendung
ist ohne Einwilligung der abgebildeten Person grundsätzlich verboten. (§ 22 KUG).
2)
Ausnahmen zu dieser Regel sowie die Konsequenzen aus der
unrechtmäßigen Nutzung finden Sie in den §§ 23, 24 und 33 KUG!
Allerdings kennt das Urheberrecht auch so genannte Schranken (Ausnahmen). Der Gesetzgeber legt
bestimmte Werke fest, die auch ohne vorherige Zustimmung des Urhebers verwendet werden können.
Urheberechtsfrei sind u. a. Gesetze, Urteile, einfache Pressemitteilungen ohne eigene Schöpfung (die
reine Information), Links zu anderen (nicht verbotenen) Seiten.
Die §§ 31,32 UrhG legen fest, wie sich urheberrechtlich geschützte Werke dennoch gewerblich nutzen
lassen. Dies ist durch die Einräumung so genannter Nutzungsrechte möglich. Um ein Nutzungsrecht
zu erhalten, müssen Sie sich an den Rechteinhaber wenden. Viele Urheber lassen sich hierbei durch
so genannte Verwertungsgesellschaften vertreten.
Selbstverständlich hat der Urheber eines Werkes bei Verletzung seiner Urheberrechte
Rechtsansprüche.
3)
■ ■
Die wesentlichen Rechte des Urhebers sowie die etwaige strafrechtliche
Verfolgung finden Sie in den §§ 97 und 106 UrhG!
■
I NFORM ATIONSTEXT
ZU
HTML-EDITOREN
Da es vielen Anwendern zu mühselig und langwierig ist, HTML im Detail zu erlernen, werden
Hilfsprogramme angeboten, die den Benutzern die Arbeit erleichtern. Diese Hilfsprogramme heißen
HTML-Editoren und nehmen dem Anwender die Übersetzung der gewünschten Seite in HTML ab.
Inzwischen existieren auf dem Markt zahlreiche HTML-Editoren. Es gibt im Internet manche HTMLEditoren als 'Freeware', das heißt als Programme, die sich ein Internet-Benutzer kostenlos
herunterladen darf und für deren Nutzung er keine Lizenz benötigt. Beispiele leistungsfähiger HTMLEditoren (nur teilweise Freeware), die vom Benutzer keine oder nur minimale Kenntnisse der HTMLProgrammierung fordern, sind z.B. 'FrontPage 2000' von Microsoft, der "Composer von Mozilla", "AOL
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 24
Press", "PageMill" von Adobe oder "Netobjects Fusion".
Doch nicht nur spezielle HTML-Editoren erleichtern die Präsentation im Internet. Viele der bekannten
Textverarbeitungsprogramme bieten in ihren aktuellen Versionen 'HTML-Exportfilter' an. Beispielsweise StarOffice
und das Microsoft Office (Word, Excel) bieten Zusatzfunktionen an, die ein Textdokument oder eine Tabelle mit
einem Zusatzprogramm in den HTML-Code 'übersetzen'.
Der Composer von Mozilla ist automatisch in Mozilla enthalten und FreeWare (kostenlos aus dem Internet
erhältlich). Es handelt sich hierbei um einen HTML-Editor, dessen Funktionsweise und Leistungsfähigkeit im
folgenden Kapitel erläutert wird.
■ ■
■
I NFORM ATIONSTEXT
ZU
G ESTALTUNG SKRI TERIEN
Wenn Sie sich im WWW umschauen, ob beim Surfen oder beim gezielten Suchen, so werden Sie immer wieder
auf Web-Seiten stoßen, die Sie entweder als bemerkenswert 'gut' oder 'schlecht' erachten. Wenn man einmal vom
persönlichen Geschmack des einzelnen Betrachters absieht, so gibt es dennoch bestimmte Gestaltungsregeln
oder Prinzipien der Funktionalität einer Seite, deren Einhaltung oder Nichteinhaltung in hohem Maß über den
Erfolg oder die Beachtung einer WWW-Seite entscheiden.
Auf immer größeres Interesse stoßen daher die zahlreichen Prämierungen besonders gelungener Web-Seiten.
Ganz wie man eine Seitengestaltung in den Printmedien (Magazine, Zeitungen, Prospekte etc.) ansprechend findet
und bewerten kann, so gilt diese Bewertung im selben Maß für das so genannte Screendesign ('Gestaltung des
Bildschirms'). Aufgrund der Besonderheit der Informationsausgabe via Bildschirm wollen wir hier einige
grundsätzliche Regeln kurz ansprechen:
Da der Bildschirm häufig weiter von den Augen des Lesers bzw. der Leserin entfernt ist als gedruckte Medien,
sollte die Schriftgröße des normalen Textes mindestens 12 pt betragen.
Durch das sehr hell strahlende Weiß des Bildschirmhintergrundes wird die Lesbarkeit des Textes zusätzlich
beeinträchtigt. Vermeiden Sie deshalb harte schwarz-weiß Kontraste und tönen Sie den Hintergrund leicht
ab. Verwenden Sie Schriften ohne Serifen, da die feinen Aufstriche leicht von dem hellen Hintergrund überstrahlt
werden.
Viele Web-Seiten sind Sackgassen, sprich es gibt kein 'Vor' oder 'Zurück', keinen Link auf andere Seiten.
Erfahrungswerte besagen, je vielseitiger und weiterführender eine Web-Seite verknüpft ist, desto häufiger wird sie
besucht und auch weiterempfohlen. Setzen Sie Links zu anderen Seiten und zurück auf Ihre Startseite
(Homepage).
Allzu viele Effekte verderben auch eine aufwendige WWW-Seite. Wenn es an allen Ecken nur noch blitzt und
blinkt, in jede Schaltfläche Sounds eingebaut sind und sich hektisch verändernde Bilder 'aufdrängen', dann kann
der eigentliche Inhalt oder die Intention einer solchen WWW-Seite höchstens noch sekundär erscheinen. Setzen
Sie Effekte sparsam und gezielt ein.
Eine WWW-Seite, auf der riesige Bilder stehen, kann ebenfalls zum Misserfolg werden, weil man zu lange braucht,
um diese zu laden. Kaum ein Betrachter wartet gerne mehr als eine Minute, bis er eine WWW-Seite endlich auf
seinem Bildschirm hat und bricht den Ladevorgang ab. Versuchen Sie, die Dateigröße einer Seite
(einschließlich Bildern) möglichst klein zu halten.
Wenn eine Web-Site in mehrere Kapitel-Seiten aufgeteilt ist, so sollte ein Besucher, der sich
'durchklickt', immer wissen, wo er sich gerade befindet und wohin er von der aktuellen Seite aus
weiterkommt. Strukturieren Sie mit Bedacht, wenn Sie mehrere Seiten verwenden. Geben Sie den
Links in allen Seiten eine einheitliche Erscheinung und Position!
■ ■
■
D OM AI NS
Die DENIC eG (Deutsches Network Information Center) ist die zentrale Registrierungsstelle (Registry) für Domains
unterhalb der Top-Level-Domain .de.
Die DENIC ist eine eingetragene Genossenschaft, deren Mitglieder Internet Service Provider (T-Online, Gelsennet,
Arcor…) sind, die ihren Kunden Zugänge zum Internet zur Verfügung stellen.
Gegenstand des Unternehmens ist die Verwaltung und der Betrieb von Internet-Adressen (Domain-Namen),
insbesondere der Top-Level Domain "de". Darüber hinaus arbeitet die Denic mit internationalen Gremien
zusammen und stellt auf Anforderung Informationen u.a. zu rechtlichen Fragen bei der Domainvergabe und verwaltung zusammen.
Weitere Informationen bitte über das Internet einholen.
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 25
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 26
Formulare erstellen
Situationsbeschreibung
Nach einer Schwachstellenanalyse hat die Nietec GmbH festgestellt, dass sie ihre Serviceleistungen verbessern
muss. Ein erster Schritt zur Geschäftsprozessoptimierung bestände darin, dass der Kunde online Kontakt zum
Unternehmen aufnehmen könnte. Die Geschäftsleitung beschließt daher, eine so genannte „Kontaktseite“ in Form
eines Formulars in ihre Homepage zu integrieren. Ein erster Entwurf liegt dazu vor:
Nietec GmbH - Kontaktformular
Über Ihre Nachricht würde ich mich sehr freuen:
Welche Art von Nachricht möchten Sie senden?
Kritik
Vorschlag
Frage
Einfache Mitteilung
Geben Sie Ihre Nachricht in folgendes Feld ein:
Hallo,
Die folgenden Angaben sind natürlich nicht zwingend:
Name
E-Mail
Homepage
http://
Telefon
Fax
Bitte nehmen Sie mit mir Kontakt auf.
Per E-Mail abschicken
Formular zurücksetzen
Arbeitsauftrag 24: .
Bestimmen und erläutern Sie die Steuerelemente eines Formulars
1. Schritt
10 min.
Lesen Sie den nachfolgenden Informationstext und bestimmen Sie die im
Entwurf der Nietec GmbH verwendeten Steuerelemente.
2. Schritt
15 min.
Schreiben Sie mit Ihrem Nachbarn den Quellcode neben die entsprechenden
Steuerelemente.
3. Schritt
30 min.
Erstellen Sie in Partnerarbeit den Quellcode für das Kontaktformular der Nietec
GmbH. Lesen Sie bitte zuvor den Infotext zu den Formularen.
HTML SKRIPT
Phase 5
HTML-Erste Schritte
Seite 27
Informationstext Steuerelemente
1. Einzeilige Textfelder
Bezeichnung
Möchten Sie dem User ein einzeiliges Eingabefeld z.B. für die Eingabe des Namens, der Straße usw. anbieten, so
steht Ihnen der <Input...> Tag zur Verfügung. Neben der Einleitung mit Input bekommt jedes Textfeld einen
Namen
zugewiesen
name=“...“
Ferner
sollten
Sie
die
Breite
des
Feldes
mit
size=... festlegen sowie über maxlength=... die maximale Anzahl von Zeichen (Buchstaben), die innerhalb des
Bereiches angezeigt werden, begrenzen.
Bei Eingaben, die verdeckt angezeigt werden sollen (z.B. Passwörter) verwenden Sie den Zusatz
Type=Password. Bei der Dateneingabe erscheinen dann Sternchen *** im Eingabefeld.
Beispiel:
Ihr Name <Input Name=“Username“ Size = „15“
Maxlength=“60“><br>
Ihr Passwort: <Input Name=“Userpassword“ Type
=Password Size=“10“ Maxlength=“5“>
Bergmann
Ihr Name
Ihr Passwort
*****
2. Mehrzeilige Eingabefelder
Legen Sie bspw. Wert auf die Meinung Ihrer User,
möchten Sie Notizen aufnehmen, so werden mehrere
Zeilen zur Eingabe benötigt.
Hat Ihnen unsere Webseite gefallen?
Hallo,
Hierfür bieten sich mehrzeilige Eingabefelder an, die durch den Tag <TEXTAREA...> ...</ TEXTAREA>
beschrieben werden. Durch die Eingabe von Text zwischen dem Anfangs- und Endtag kann Text vorgelegt
werden. Hier wurde Hallo, vorgelegt.
Auch dieses Steuerelement muss einen Namen mit dem Attribut name=“...“ erhalten. Mit rows=... bestimmt man
die Anzahl der angezeigten Zeilen und mit cols=... die Anzahl der Spalten. Dadurch wird die Textmenge begrenzt.
Quelltext zum obigen Beispiel:
Hat Ihnen unsere Webseite gefallen? <br>
<Textarea Name=“feedback“ rows=5 cols=20> Hallo,</textarea>
3. Radiobuttons
Zur Auswahl von Elementen kann man so genannte Radiobuttons bzw. Optionsfelder einrichten.
Altersstufe:
unter 18
unter 30
unter 50
ab 50
Vergibt man für alle Radiobuttons den gleichen Namen mit name=“..“, so gehören sie zu einer Gruppe und der
User kann nur eine Auswahl tätigen. Innerhalb des eröffnenden Input Tags werden die Optionsfelder mit
TYPE=RADIO definiert. Jeder einzelne Radiobutton wird mit value=“..“. bezeichnet. Hinter dem <Input...> Tag
wird der Text eingegeben, mit dem der Radiobutton für den Anwender beschriftet ist.
Obiges Beispiel:
Altersstufe:
<Input Type=Radio Name=“Alter“ Value=“18”> unter 18
<Input Type=Radio Name=“Alter“ Value=“30”> unter 30
<Input Type=Radio Name=“Alter“ Value=“50”> unter 50
<Input Type=Radio Name=“Alter“ Value=“50+”> ab 50
4. Checkboxen
Auch Checkboxen dienen zur Auswahl von Elementen. Im Gegensatz zu den Radiobuttons können Sie bei
Checkboxen Mehrfachauswahlen vornehmen.
Ich habe
einen privaten Internetzugang
eine oder mehrere Kreditkarten
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 28
Checkboxen werden innerhalb des eröffnenden Input Tags mit Type=Checkbox
Mit Name=“..“ wird wiederum die Gruppe und mit Value=“..“ die einzelne Checkbox gekennzeichnet
eingeleitet.
Obiges Beispiel:
Ich habe
<Input Type=Checkbox Name=“Ich_habe“ Value=“Internet“> einen privaten Internetzugang
<Input Type=Checkbox Name=“Ich_habe“ Value=“Kreditkarte“> eine oder mehrere Kreditkarten
5. Auswahllisten
...erlauben es dem Anwender aus einer Liste mit festen Einträgen einen Eintrag auszuwählen. Eine solche
Auswahlliste wird zwischen <SELECT...>...und </SELECT> eingeschlossen. Außer der obligatorischen
Namensvergabe mit NAME=“..“ ist die Option SIZE=... enthalten. Mit ihr kann die Höhe des Eingabefeldes sowie
die Anzahl der Einträge variiert werden. Durch <Option> werden die einzelnen Listeinträge festgelegt. Mit dem
Zusatz multiple ist eine Mehrfachauswahl erlaubt.
Ich finde, diese Seite ist:
Sehr Gut
Gut
OK
Na ja
Doof
Quellcode:
Ich finde, diese Seite ist: <p>
<select name="Bewertung" size=1>
<option value="1"> Sehr Gut
<option value="2"> Gut
<option value="3"> OK
<option value="4"> Na ja
<option value="5"> Doof
</select>
6. Ausführungsbuttons / Commandbuttons
Dem User stehen zwei verschiedene Buttons zur Verfügung.
<Input Type=“Submit“ Value=“per e-Mail abschicken“> erzeugt.
Der
Button
Abschicken
Der Button „Formular zurücksetzen“ löscht alle ausgefüllten Felder des Formulars
<Input Type=“Reset“ Value=“Formular zurücksetzen“> eingerichtet.
Die Bezeichnungen hinter value sind frei wählbar und entsprechen dem Text auf dem Button.
und
wird
mit
wird
mit
Formulare
Während bei "herkömmlichen" HTML-Dokumenten der Informationsfluss nur in eine Richtung - vom Server zum
Browser - stattfindet, erhalten die Informationsanbieter mittels Formular die Möglichkeit einer Rückmeldung durch
den Benutzer. Die Anwendungsgebiete sind reichhaltig, denken Sie nur an Bestellformulare für "Online-Hotels",
Einkäufe in "Online-Shops" usw. Das eigentliche Formular befindet sich zwischen <FORM... > und </FORM>,
dabei dürfen im Prinzip alle Dokumentelemente verwendet werden, die innerhalb von <BODY> ... </BODY> erlaubt
sind, bis auf das Tag <FORM> selber, d.h. Sie dürfen Formulare nicht verschachteln.
Hinter dem Attribut ACTION im einleitenden Tag <FORM... > ist die Adresse des Programms, das die Auswertung
der Formulareinträge vorzunehmen hat, sowie die Methode der Informationsübertragung angegeben.
<form method="POST" action=mailto:t.arp@berufskolleg-bottrop.de>
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 29
Arbeitsauftrag 25: .
Erstellen Sie folgende Formulare und speichern Sie diese jeweils unter einem eigenen Namen (z.B.15a.html):
a) In welches Restaurant wollen Sie während der Mittagspause?
Griechisch (hinterm Wäldchen)
Chinesisch (Poppelsdorf)
Meier (Poppelsdorf)
Vegetarisches Buffet (Cassiusbastei)
Mensa (Poppelsdorf)
Bestellung
Bedenken
b) Passworteingabe:
Eingabe wird durch Sternchen maskiert!
c) Einfache Textauswahl:
Wählen Sie den besten Film aller Zeiten!
Titanic
Ballermann 6
101 Dalmatiner
d) Mehrfachwahl
Meine Lieblingsmusik ist von (den)
Beatles
Beethoven
Backstreet Boys
Capercaillie
Bach
Clannad
Clancy Brothers
e) Wahl mit Vorselektion:
Wer ist der Beste der vier Heroen?
Michael Schumacher
Der Hacklschorsch
Henry Maske
f) Checkbutton-Mehrfachwahl:
Mich interessieren heute am meisten die Themen
Tabellen
Links
Formulare
Frames
Javascript
HTML SKRIPT
HTML-Erste Schritte
Phase 5
Seite 30
Arbeitsauftrag : .
Projekt Homepage der Nietec GmbH
Die Nietec GmbH plant ihren Internetauftritt. Die Homepage dient sowohl der Öffentlichkeitsarbeit als auch der
Sortimentsvorstellung. In naher Zukunft soll ein Online Shop realisiert werden.
Sie sind Mitarbeiter der EDV Abteilung und werden damit beauftragt die Website unter HTML zu erstellen.
HTML SKRIPT
