„Das Fliegende Klassenzimmer“

„Das Fliegende Klassenzimmer“
Ein Lehrmittel zur Webseitengestaltung
Unterlagen
für Schülerinnen und Schüler
Zürich, 15. Oktober 2002
Version 1.1
Nicole Kilchör
Mädchen-Berufswahlbegleitung Sekundarstufe I
Züricherinnen Lernen Informatik
Nicole Kilchör, Zürich, 30. Mai 2002
Unterlagen für Schülerinnen und Schüler
„DAS FLIEGENDE KLASSENZIMMER“
Ein Lehrmittel zur Webseitengestaltung
VORWORT
4
1. SUCHEN IM INTERNET
5
2. HTML UND NETSCAPE COMPOSER
6
3. SEITEN ERSTELLEN, ABSPEICHERN UND IM BROWSER ANSCHAUEN
6
4. TEXT UND FORMATIERUNGEN
8
5. ÜBERSCHRIFTEN - ABSATZGESTALTUNG
10
6. AUSRICHTUNGEN
11
7. FARBEN
11
8. TABELLEN
12
9. BILDER
15
9.1 Bildausschnitte ausschneiden
16
9.2 Bilder verkleinern
17
9.3 Bilder einbauen
17
9.4 Hintergrundbilder
18
2
10. LINKS
19
11. ANKER
21
12. E-MAIL-ADRESSE EINBAUEN
23
13. FACHWÖRTER
24
14. HAST DU NOCH FRAGEN?
24
Abdruck und Weiterverwendung nur nach Rücksprache mit der Projektleitung und unter Quellenangabe gestattet!
3
Vorwort
Mit diesen Unterlagen kannst du eine einfache Webseite selber herstellen. Du lernst dabei
das kostenlose Programm Netscape Composer kennen. Doch nicht nur das! Wenn du
möchtest, dann kannst du auch eine Internetseite „profimässig“ in html schreiben. Dazu
braucht es etwas mehr Zeit, aber es macht auch viel mehr Spass, weil du dann eben nicht
nur ein Programm benutzt, sondern richtig programmierst!
Hier sind nur die allerwichtigsten Elemente einer Homepage beschrieben. Ich hoffe, dass
dein Interesse geweckt ist und du selbständig weiterarbeitest, bis du deine Seite so hast, wie
du sie gerne möchtest.
Ich gehe davon aus, dass du bereits mit dem Computer arbeitest. Du bist z.B. schon einmal
im Internet gewesen oder hast schon gemailt, oder hast Texte geschrieben und abgespeichert.
Das Programm darfst du auch zuhause brauchen. Es ist ganz einfach zu installieren. Dein
Lehrer oder deine Lehrerin haben die CD. Aber natürlich findest du den Netscape auch im
Internet.
Ich hoffe, dass du mit deiner Klasse auch am Wettbewerb teilnimmst. Die Bedingungen dafür
sind, dass die Gemeinde und die Klasse vorgestellt ist und dass die Seiten der Mädchen und
Jungen klar getrennt sind.
Weiteres weiss dein Lehrer oder deine Lehrerin.
Natürlich bin ich gespannt, wie es dir ergeht! Teile doch mit, was dir gefällt und was dich
stört. So kann ich die Blätter bearbeiten und andere Schülerinnen und Schüler können von
deinen Erfahrungen profitieren.
Viel Spass mit dem „Fliegenden Klassenzimmer!
Zürich, 30. Mai 2002
Nicole Kilchör
ZLI
Hohlstrasse 550
8048 Zürich
[email protected]
http://www.zli.ch
http://www.girlweb.ch
4
1. Suchen im Internet
1. Aufgabe: Suche die Lösungen und benutze mindestens 2 verschiedene
Suchmaschinen!
1. Woran starb Evita Peron 1952? .........................................................................................
2. Wie nannte Grace Murray Hopper das Programm, welches sie entwickelte?.....................
3. Womit befasste sich Sophie Germain hauptsächlich?........................................................
4. Welche Frau wurde im Jahr 1999 in den Bundesrat gewählt?............................................
5. Welche Frau bekam 1903 den Nobelpreis für die Erfindung des Radiums? .......................
6. Was wurde nach Ada Augusta Byron benannt? .................................................................
7. Wer hat das Buch „Heidi“ geschrieben?.............................................................................
8. In welchem Jahrhundert lebte Jeanne d’Arc?.....................................................................
9. Nenne 2 Gebiete, mit denen sich Hildegard von Bingen beschäftigte! ...............................
..........................................................................................................................................
2. Aufgabe: Suchaufträge schreiben!
Schreibe 5 Fragen auf, die die anderen lösen können. Notiere die Lösungen auf ein separates Blatt.
1.
..........................................................................................................................................
Lösung: .............................................................................................................................
2.
..........................................................................................................................................
Lösung: .............................................................................................................................
3.
..........................................................................................................................................
Lösung: .............................................................................................................................
4.
..........................................................................................................................................
Lösung: .............................................................................................................................
5.
..........................................................................................................................................
Lösung: .............................................................................................................................
5
2. html und Netscape Composer
Webseiten innerhalb des World Wide Web (www) sind in der Sprache html (HyperText
Markup Language) geschrieben. In html werden wichtige Informationen und die Darstellung
des Textes mit Hilfe von sogenannten „tags“ in das Dokument eingebaut. Es gibt einen Starttag < .. > und einen End-tag </ .. >. Der End-tag ist immer derselbe Befehl wie der Start-tag,
allerdings mit einem / vorneweg. Anstatt den 2 Punkten sollte dort der html-Befehl
eingegeben werden.
<tagname> zu formatierender Text</tagname>.
Programme wie z.B. Netscape Composer nehmen es dir ab, die Sprache html selber zu
schreiben. Wie ein Textprogramm kann „normal“ geschrieben werden und der sogenannte
„Quelltext“ in html wird automatisch (im Hintergrund) erstellt.
3. Seiten erstellen, abspeichern und im Browser anschauen
Der Netscape Composer ist Bestandteil vom Netscape Browser. Zum Aufrufen gehst du über
die Verknüpfung auf dem Desktop. Folgendes Problem könnte auftreten: Das Programm
fordert dich evtl. dazu auf, ihr Programm zu aktivieren und dich somit zu registrieren. Da du
keine Verbindung zum Internet hast, wird eine Fehlermeldung erscheinen, die Seite
activation.netscape.com könnte nicht gefunden werden.
Klicke einfach auf OK und schliesse das Aktivierungsfenster mit dem Kreuz.
Es erscheint jetzt folgendes Fenster, in dem der Inhalt Platz hat.
Im Normalfall wird in der Ansicht „Standard“ gearbeitet. Bei „<html>Quelle“ ist der Quelltext
zu sehen. Bei „Ansicht“ kann das Aussehen der Webseite im Browser getestet werden. Die
Links (Erklärungen sind weiter hinten) funktionieren bei dieser Ansicht jedoch nicht. Für die
effektive Ansicht im Browser muss unter Aufgaben àNavigatoràDateiàDatei öffnen
die jeweilige Seite geöffnet werden.
Achtung: in den Browsern Internet-Explorer und Netscape Navigator kann die Seite unterschiedlich aussehen! Möglichst mit beiden Browsern die Seiten anschauen. (Den jeweiligen
Browser öffnen und anschliessend die erstellte Webseite öffnen).
Schreibe jetzt irgend etwas auf die Seite unter der Ansicht „Standart“. Zum Sichern gehst du
entweder auf der Button-Leiste auf Speichern
oder über
"Datei à Speichern"
Wenn gespeichert wird und noch kein Homepage-Titel angegeben wurde, wirst du jetzt danach gefragt.
6
Gib dem Ganzen einen sinnvollen Namen! Dieser Namen kann später in Suchmaschinen
auftauchen, ohne dass du darauf Einfluss hast. Dieser Titel dient also der Orientierung für
die Surferinnen und Surfer sowie für die Suchmaschinen.
Speichere
in
deinem
auf
„Girlwebapache“
persönlichen Ordner girlwebx
(Laufwerkbuchstabe z.B. „F“). Benenne deine Seite und klicke auf Speichern.
Der Dateiname für die Startseite muss „index.html“ lauten!
Die anderen Seiten müssen alle unterschiedlich benannt werden.
Grundsätzlich ist bei der Bezeichnung von Dateien, Bildern und Ordnern folgendes zu
beachten.
erlaubt sind
nicht erlaubt sind
Kleinbuchstaben
GROSSBUCHSTABEN
Ziffern
Umlaute (ä,ö,ü)
Trennstriche(-)
Sonderzeichen (?,!,&,:,#,=,.)
Underscores (_)
Leerschläge
Nun kann deine Page von jedem Notebook des „Fliegenden Klassenzimmers“
betrachtet werden. Bei Aufgabe à Navigator à Datei öffnen à entsprechendes
html-Dokument anklicken. Wenn eine Fehlermeldung kommt, dann klicke sie einfach weg.
Im untenstehenden Beispiel ist also der Homepage-Titel der Seite „Das Fliegende Klassenzimmer“ und das Dokument wurde unter “fl_klassenzimmer.html“ abgespeichert.
Um den html-Code anzusehen, klickst du auf den Button „html-Quelle“
Der im Internet sichtbare Teil ist zwischen folgenden tags zusehen:
<body> dein sichtbarer Inhalt </body>
7
In der folgenden Seite ist „Hier ist meine erste Internetseite“ hineingeschrieben. So sieht das
im HTML-Code aus:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Das Fliegende Klassenzimmer</title>
</head>
<body>
<p>Hier ist meine erste Internetseite<br>
<br>
<p>
</body>
</html>
Aufgabe tags:
Streiche oben alle tags mit den dazugehörenden End-tags mit je einer Farbe an.
<br> und <p> haben keinen End-tag. <br> fügt eine neue Zeile ein. <p> fügt einen Absatz ein.
Es können beliebig viele <p> und/oder <br> aneinandergereiht werden.
Das ist ein Absatzende.<p>
Hier beginnt ein neuer Absatz.<p>
Das ist ein Zeilenende.<br>
Hier beginnt eine neue Zeile.
Neue Seiten kannst du übrigens ganz einfach mit dem Button „Neu“ erstellen.
4. Text und Formatierungen
Wie in einer normalen Textverarbeitung kann der Inhalt geschrieben werden. Begrüsse z. B.
die Besucherinnen und Besucher deiner Homepage.
8
In der html-Ansicht sieht es jetzt folgendermassen aus:
Der Text taucht jetzt zwischen den <body> - tags auf. Bei genauerem Hinsehen fällt <br> auf,
was bereits erklärt wurde und dass Zürcher nicht mit einem „ü“ geschrieben ist.
Zum ü: die Umlaute sind Sonderzeichen der deutschen Sprache. Da das Internet weltweit
verfügbar ist, was von deutschen Sonderzeichen nicht zu sagen ist, werden diese besonders
beschrieben. Dazu hier die wichtigsten.
• für ä die Zeichenfolge ä
• für Ä die Zeichenfolge Ä
• für ö die Zeichenfolge ö
• für Ö die Zeichenfolge Ö
• für ü die Zeichenfolge ü
• für Ü die Zeichenfolge Ü
Wie bei einer Textverarbeitung kann mit verschiedenen Schriftgrössen, Farben und Arten
variiert werden.
Um den Textbereich nach den eigenen Vorstellungen zu gestalten, wird er zuerst in der
Standartansicht markiert.
Sobald der betreffende Bereich blau unterlegt ist, wird im Menüpunkt Format die gewünschte
Änderung an Schriftgrösse, Schriftfarbe, Schnitt und Schriftart vorgenommen.
Zu beachten gilt: Im Internet ist vieles relativ - so auch die Schriftgrösse! Je nachdem, wie
jemand die Standartschrift auf seinem Computer eingestellt hat, erscheint die Schriftgrösse
unterschiedlich.
9
Hier die wichtigsten tags:
Start-tag
End-tag
Bedeutung
<b>
<i>
<u>
</b>
</i>
</u>
<sup>
</sup>
<sub>
</sub>
fette Schrift (e: b=bold=fett)
kursive Schrift (e: i=italic)
unterstrichene Schrift - sehr mit Vorsicht zu geniessen,
da der Surfer/die Surferin bei unterstrichen Passagen von
Links ausgeht!
(e: u=underlined=unterstrichen)
hochgestellte Schrift, z.B. 0o C
(e: sup=superscript, zu deutsch etwa Hochstellung)
tiefgestellte Schrift, z.B. H2O
(e: sub=subscript, zu deutsch ungefähr Tiefstellung)
5. Überschriften - Absatzgestaltung
Besser als eine direkte Eingabe der Schriftgrösse ist die Zuweisung von Formaten! Es gibt
dafür 6 verschiedene Überschriftgrössen, Absatzformate, Listenformate und die Ausrichtungen.
Der dazugehörige html-tag ist <h1> bis <h6>, wobei das H für "Headline" steht und die Nummer für die Grössenabstufung. Der tag muss wieder geschlossen werden mit </h1> bzw. der
entsprechenden Grösse.
10
<div align="Center">
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
</div>
6. Ausrichtungen
Der entsprechende html-Code für die jeweilige Ausrichtung lautet folgendermassen:
linksbündig:
keiner, da eh standardmässig
rechtsbündig:
<div align="right"> und als End-tag </div>
zentriert:
<center> und als End-tag </center>
7. Farben
Fast alle Farben können aus den 3 Grundfarben rot, grün und blau zusammengemischt
werden. Dieses Farbmodell wird oft in der Welt der Computer genutzt - es heisst RGB-Farbmodell. Dabei steht R für red, G für green und B für blue.
Um einer Schrift eine Farbe mitzugeben (in diesem Beispiel rot), benötigst du folgenden
html-TAG:
<font color="#FF0000"> Ihr Text </font>
Die 6 Ziffern stehen für je 2 Ziffern rot, grün, blau.
Um den Hintergrund Farbe mitzugeben, wird im Body-tag noch der Befehl bgcolor
(background-color) aufgenommen. Zusätzlich kann im Body-tag noch angegeben werden,
welche Schriftfarbe standardmässig für das ganze Dokument verwendet werden soll. Dies
geschieht mit dem html-TAG "text="
<body text="#000000" bgcolor="#FFFFFF">
11
In Tabellen (kommt später noch) kommt mit folgenden html-tags Farbe:
für die einzelne Zelle : <td bgcolor="#ff0000">
für die einzelne Zeile : <tr bgcolor="#ff0000">
für die ganze Tabelle : <table bgcolor="#ff0000">
Bei der Verknüpfung self-Html auf dem Desktop (oder im internet unter
http://www.teamone.de/selftml) sind die Farben aufgelistet.
Farben können auch über ihren englischen Namen angegeben werden.
color="silver"
color="red"
color="yellow"
color="fuchsia"
color="gainsboro"
8. Tabellen
Tabellen sind ein wichtiges Gestaltungselement. Im Gegensatz zu Textbearbeitungsprogrammen gibt es keine Tabulatoren!
Tabellen haben folgende Merkmale:
1. Spaltenanzahl
2. Zeilenanzahl
3. Tabellenfarbe
4. Ausrichtung der einzelnen Tabellenfelder
5. Grösse der einzelnen Tabellenfelder (exakt oder prozentual)
6. Randbreite
7. Abstände
Zum Aufruf der Tabellen geht man entweder über den Menüleiste-Button "Tabelle" oder über
das Pulldown-Menü " Tabelle à Einfügen".
Anzahl der Zeilen und Spalten muss angegeben werden.
Braucht man die Tabelle als Gestaltungshilfe, dann muss bei fortgeschrittener Bearbeitung
folgendes gemacht werden.
12
Der Wert 0 bei border bedeutet, dass die
Tabelle unsichtbar ist und somit dazu
dient, dass die Inhalte an einem bestimmten Ort sind (siehe auch etwas
weiter hinten)
Tipp: Es sind auch geschachtelte Tabellen möglich - also Tabellen in Tabellen.
Zeitweise ist diese Funktion zur Plazierung interessant.
Hier wurde die Tabellenfarbe yellow hinzugefügt.
Du erhältst mit den vorherigen Einstellungen eine gelbe Tabelle mit 2 Zeilen
und 2 Spalten, die den ganzen Bildschirm ausfüllt. Ändere die Grösse des
Fensters, in dem der Composer läuft,
und beobachte die Tabelle. Diese passt
sich automatisch dem Fenster an und
füllt es immer komplett aus.
In html sieht die Tabelle wie folgt aus:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table cellpadding="2" cellspacing="2" border="0" width="100%" bgcolor="Yellow">
<tbody>
<tr>
<td valign="Top"><br>
</td>
<td valign="Top"><br>
</td>
</tr>
<tr>
<td valign="Top"><br>
</td>
<td valign="Top"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Aufgabe Tabelle- tags:
Streiche die tags mit den dazugehörenden End-tags in jeweils 1 Farbe an.
13
Die tags lassen sich wie folgt erklären:
Anfangs-tag
Erklärung
End-tag
<table>
Anfang einer Tabelle
</table>
<tr>
tr (table row) Tabellenzeile
</tr>
<td>
td (table data) Tabellenspalte
</td>
<td valign=“top“>
Schriftausrichtung der Tabellenspalte
<td valign=“top“>
<tbody>
Inhalt (Körper) der Tabelle
</tbody>
Aufgabe Tabelle-Zeichnen: Erstelle folgende Tabelle auf deinem Computer:
Wenn du nun bei Tabelleneigenschaften den Rand auf 0 Pixel stellst, dann siehst du unter
„Ansicht“, wie Tabellen zur Gestaltung eingesetzt werden können.
14
9. Bilder
Im Internet sind Bilder, Linksammlungen, Programme, Fotos, Videos etc. urheberrechtlich
geschützt. Das heisst, dass sie nur mit dem Einverständnis des Urhebers/der Urheberin für
die eigene Seite benutzt werden dürfen.
Es besteht im Internet aber ein erheblicher Unterschied von Theorie und Praxis. Oft wird
dieses Urheberrecht verletzt. Es ist von Vorteil, wenn du von Anfang an diese bestehenden
Rechte respektierst und grundsätzlich mit eigenen Fotos, eigenen Bildern und eigenen Texten arbeitest. Es bestehen im Internet auch Seiten mit explizit „freien Bildern“ (die alle
einfach benutzen können z.B. http://www.visipix.com) und Programmen, welche über
Suchmaschinen zu finden sind.
Insgesamt existieren Dutzende von Bildformaten, auf dem Web finden nur zwei Verwendung
Graphics Interchange Format =.gif
Joint Photographers Expert Group = .jpg
Diese zwei Bildfomate haben unterschiedliche Eigenschaften und Vorteile.
Eigenschaft
Anzahl verschiedene Farbtöne
Konturen
Farbverläufe
animierbar
Form
GIF
bis 256
hart
abgestuft
ja
Freistellen möglich
(Transparenz =
Bildhintergrundfarbe ist
Seitenhintergrundfarbe)
JPEG
bis 16.7 Mio.
weich
fliessend
nein
immer rechteckig
Aufgabe Bilder: schreibe neben das Bild, ob es ein GIF oder ein JPEG ist:
100
80
60
40
20
0
1. Qrtl. 2. Qrtl. 3. Qrtl. 4. Qrtl.
15
9.1 Bildausschnitte ausschneiden
Mit jedem Betriebssystem wird auch ein einfaches Grafikprogramm mitgeliefert. Du findest
es unter Start/Programme/Zubehör. Dort kannst du Bilder zuschneiden und leicht verändern.
Meistens heisst das Zeichnungsprogramm „Paint“. Arbeite immer mit einer Kopie des Bildes,
nicht mit dem Original. Am einfachsten ist es, wenn du das Original auf einer Diskette
speicherst.
Öffne zuerst das Programm Paint (Verknüpfung auf dem Desktop). Öffne dann das
gewünschte Bild auf der Diskette oder wo immer es gespeichert ist.
Der auszuschneidende Bildteil zuerst muss
markiert werden.
Dann kann er ausgeschnitten werden bei
Bearbeiten à Ausschneiden
Nachher Datei à Neu
Hier Nein anklicken!
So bleibt das Original erhalten.
Nachher Bearbeiten à Einfügen und das ausgeschnittene Bild ist auf dem Bildschirm.
Jetzt muss die weisse Fläche an den Eckpunkten soweit verkleinert werden, dass sie so
gross ist, wie das Bild selber.
16
Jetzt kann das Bild gespeichert werden. Speichere es unter girlwebx auf
„Girlwebapache“ (Laufwerkbuchstabe z.B. „F“)/bilder/... So bleibt das Original
auf der Diskette und du hast das benutze Bild im richtigen Ordner im Webserver.
9.2 Bilder verkleinern
Bei Bild à Strecken/Zerren die entsprechenden Werte eingeben. Wenn du bei Horizontal und Vertikal unterschiedliche Werte
eingibst, wird das Bild verzerrt.
Hier im Beispiel wird das Originalbild um 50%
verkleinert.
9.3 Bilder einbauen
Im Composer in das Menü Einfügen à Grafik
Hier dann die entsprechende Datei über Datei
wählen auswählen
Der Alternativtext erscheint, wenn im Internet
über das Bild gefahren
wird!
Und dann erscheint die Grafik auf der Homepage.
17
Die Bilder sind alle im Ordner „bilder“ abgespeichert. Die Originale sind auf der
Diskette.
In html erscheint nun der Befehl:
<img src="bilder/dateiname.gif">
Dieser Befehl kann folgendermassen übersetzt werden. an der jeweiligen Stelle soll ein Bild
eingefügt werden soll („img src“), welches sich im Ordner „bilder“ unter der Bezeichnung
„dateiname.gif“ befindet. Wenn du nun also im Programm Paint das Bild im Ordner „bilder“
veränderst, verändert sich das Bild auch auf deiner Webseite.
Im Quelltext darf keine Laufwerkangabe sein! Falsch wäre z. B:
<img src="c://dateien/homepage/bilder/dateiname.gif">
richtig ist dagegen:
<img src="bilder/dateiname.gif">
Tipp:
Die Ausrichtung der Grafik erfolgt genau so wie die Ausrichtung von Text!
Die Höhen- und Breitenangaben sollten gemacht werden, da dadurch der spätere
Seitenaufbau beim Browser beschleunigt wird. Wenn die Bildgrösse bekannt ist, sieht
das so aus:
<img src="bilder/dateiname.gif" height="100" width="60">. Immer die Originalgrösse angeben! Du findest Sie, wenn du in deinem Verzeichnis mit der rechten Maustaste auf
das jeweilige Bild klickst.
9.4 Hintergrundbilder
Es kann ein Hintergrundbild eingefügt werden, das flächendeckend sein kann. Dazu musst
du zu Absatz à Seitenfarbe und –hintergrund gehen.
Die Bilder werden „gekachelt“, das heisst einfach aneinandergereiht.
Es ist unbedingt darauf zu achten, dass die Dateien nicht zu gross sind. Sonst dauert die
Übertragung zu lange. Speichere also nicht zu grosse Bilder oder zu viele Bilder auf eine
Seite. Du merkst selber, wenn die Seite zu lange hat mit aufstarten.
Im html-Code sieht es folgendermassen aus, wenn ein Hintergrundbild eingefügt wird (immer
zusätzlich im body-tag, der fast am Anfang der Seite zu finden ist)
<body background="bilder/hintergrundbild.jpg">
Es kann aber auch einfach eine andere Hintergrundfarbe gewählt werden. Probier es aus!
18
10. Links
Sollen nun mehrere Seiten miteinander verknüpft werden, geschieht das über Links. Es gibt
interne und externe Links.
Durch die internen Links werden mehrere Seiten deiner Internetseite miteinander verbunden
und können durch einen Klick auf den Link aufgerufen werden. Sie dienen also der Navigaton, wie z.B. unten über zwei Teenager.
Um einen Link einzufügen markierst du zuerst den Text und gehst auf das Menü Einfügen à
Verknüpfung. Hier gibst du unter Verknüpfung die html-Seite ein, die aufgerufen werden soll.
Das gleiche gilt, wenn du ein Bild verlinken willst. Dann markierst du zu Beginn einfach das
Bild und gehst weiter wie beschrieben.
19
In html sieht der Link wie folgt aus:
Zu meiner <a href="kontakt.htm">Kontaktseite</a>
Du kannst deine zu verknüpfende Datei auch über „Datei wählen“ suchen. Dann ist im htmlCode unbedingt zu beachten, dass keine Laufwerke angegeben sind! Das Programm macht
häufig diesen Fehler, der dann im html-Code korrigiert werden muss!
falsch vom Programm erstellt :
Zu meiner <a href="file:///c:dateien/homepage/kontakt.html">Kontaktseite</a>
Richtig im html-Code korrigiert:
<a href="kontakt.htm">zu meiner Kontaktseite</a>
Bei externen Links muss einfach die jeweilige Adresse angegeben werden.
In html sieht der externe Link wie folgt aus:
Im <a href="http://www.girlweb.ch">Girlweb</a> findest du spannende
Informationen!
Wenn du möchtest, dass hier z.B. die Girlwebseite in einem separaten Fenster erscheint,
dann kannst du den Link im html wie folgt schreiben:
Im <a href="http://www.girlweb.ch" target="girlweb">Girlweb</a> findest du spannende Informationen!
20
Die Links müssen unbedingt vor und nach dem Publizieren im Internet überprüft werden!
11. Anker
Mit einem Anker kannst du innerhalb einer Seite „herumspringen“. Dies kann z.B. sinnvoll
sein, wenn du einen langen Text hast und vom Seitenende wieder zum Seitenanfang zurück
möchtest.
Ein Wort in der Seite oben markieren, dann auf Button „Ziel“ und bei der Meldung ok klicken.
Das selbe für „Zum Seitenanfang“ auf dem Seitenende machen.
21
Um vom Seitenende, wo „Zum Seitenanfang“
steht zum Seitenanfang zu springen, markierst du „Zum Seitenanfang“ (Achte dich auf
den button„mehr Eigenschaften“), gehst
zu „Einfügen, Verknüpfung und wählst dort
den Anker „Seitenanfang“ aus.
Im html sieht es folgendermassen aus:
<a name="Seitenanfang"></a>
Seitenanfang<br>
<br>
Langer Text dazwischen
<br>
<br>
<a name="Zum_Seitenanfang"></a>
<a href="#Seitenanfang">Zum Seitenanfang</a>
<br>
</body>
</html>
22
12. E-mail-Adresse einbauen
Damit die Besucherinnen und Besucher der Homepage mit dir in Kontakt treten können,
solltest du deine E-Mail-Adresse angeben. Dazu gehst du in das Menü "Einfügen à Verknüpfung".
Unter Text trägst du deine E-Mail-Adresse
oder den Namen ein.
Unter Verknüpfung trägst du vor deiner EMail-Adresse ein mailto: gefolgt von deiner EMail-Adresse ohne Leerzeichen!
Angezeigt bekommst du in diesem Beispiel
den Namen als Link. Wird dieser Link angeklickt, öffnet sich automatisch (sollte wenigstens) das E-Mail-Programm, und deine EMail-Adresse ist bereits eingetragen.
Der entsprechende html-Code lautet:
<a href="mailto:[email protected]"> [email protected] </a>
23
13. Fachwörter
Absatz
Betriebssystem
Bild animieren
Browser
Button
formatieren
html
Link
Quelltext
tag
Verzeichnis
Man schreibt eine Zeile. Ist der Seitenrand erreicht, benötigt man einen
ABSATZ, um auf einer neuen Zeile wieder von vorne zu beginnen.
Der Computer besteht aus Hardware und Software. Ein
BETRIEBSSYSTEM (z.B Windows 2000) sorgt einfach gesagt für die
Kommunikation zwischen den beiden Schichten.
Es gibt „normale“ Bilder und Bilder, welche „sich bewegen“. Sprich
animierte Bilder.
BrOWSER sind unsere Portale zum Internet. Am häufigsten wird auf
den Internet Explorer zurückgegriffen. Eine Variante dazu ist Netscape.
Der Begriff kopmmt häufig im Zusammenhang mit Homepages vor.
Klickt man auf einen BUTTON, so wird man auf eine andere Seite
geleitet. Ein Beispiel:
Wird ein Datenträger FORMATIERT, wird er komplett gelöscht.
HTML ist eine Programmiersprache (eigentlich eine Seitenbeschreibungssprache). Homepages werden in HTML „programmiert“.
Ein LINK ist ein Verweis an eine andere Stelle (meist auf einer Homepage). Buttons fungieren meist als LINKS.
Jedes Programm wird in einer Programmiersprache geschrieben. So
enstehen zum Teil viele tausend Zeilen Programmiercode. Diesen Programmiercode nennt man QUELLTEXT.
Wer schon einmal einen HTML-QUELLTEXT angeschaut hat, dem
werden viele <, /, und > aufgefallen sein. Diese Zeichen nennt man
TAGS.
Erstellt man eine Homepage und speichert diese im Ordner HTML, so
lautet das VERZEICHNIS, in welchem die Page abgespeichert HTML.
14. Hast du noch Fragen?
Unter der Verknüpfung „selfhtml“ auf dem Desktop oder im Internet unter
http://www.teamone.de/selfhtml findest du die html-tags. Im Netscape Composer hilft dir das
Hilfeprogramm weiter. Nutze diese beiden „Antwortquellen“ und du wirst viele Fragen selber
beantworten können und auf neue Ideen stossen! Natürlich gibt es viele Bücher zum Thema.
Und nicht zuletzt kannst du auf einer Internetseite, die dir gefällt, den Quelltext anschauen
und versuchen herauszufinden, wie sie hergestellt wurde.
24