Informatik 7. Klasse: Hyperlinks
Inhalt
1. Hyperlinks 2.
Links in andere Ordner 3. Hyperlinks im Quellcode 4. Relative Adressierung 5. Absolute Adressierung 6. Links ins Internet 7. Textmarken 8. Projekt
1. Hyperlinks mit dem Textverarbeitungsprogramm erstellen
Übung 1: Rose.odf, Tulpe.odf erstellen, abspeichern als Hypertext Rose.html und Tulpe.html Rose.html mit Browser öffnen nur lesbar
Rose.html mit Textverarbeitungsprogramm öffnen Text oder Hyperlink ändern Hyperlink von Rose.html auf Tulpe.html einfügen, abspeichern.
Rose.html mit Browser öffnen Hyperlink ausprobieren
Rose.html mit Textverarbeitungsprogramm öffnen Text oder Hyperlink ändern Übung 2: Rose.html Tulpe.html Rose.html …
Ein Hypertext lässt sich
a) mit dem Browser öffnen, um Links zu folgen. Trotzdem ist man dann noch nicht „im Internet“.
b) mit einem Textverarbeitungsprogramm, etwa Writer öffnen, um ihn zu bearbeiten.
So kann er verändert, zum Beispiel editiert oder mit Links versehen werden.
Wenn sich der Link mit Writer nicht setzen lässt, dann gleich weiter zu Abschnitt 3
Einstellungen im Windows Explorer: Dateiendungen anzeigen lassen.
Kästchen ins Heft schreiben, Eigene Werke am Stundenende auf USB-Stick kopieren!
Bei Speicherproblemen: Ist das Dokument bereits (mehrmals) geöffnet? Evtl. von anderen?
Wenn ich zum Fehlersuchen kommen soll: Drei Fenster bereithalten: Browser, Editor, Wind.Expl.:
- Im Writer erst abspeichern, bevor es im Browser geöffnet wird.
- Manchmal heißt es nicht Speichern unter .html, sondern Webseite reduziert … - Stimmt der Dateiname buchstabengenau? .htm statt .html?
- Zielzeile, beim Anwählen im Fenster links unten, mit dem Pfad im Ordner vergleichen!
Außerdem: Mal auf den eigenen USB-Stick abspeichern!
Nützliche Abkürzungen: STRG Z macht rückgängig, STRG C kopiert, STRG V fügt ein.
2. Links in andere Ordner
Übung 3: Ordner Blumen/Garten und Blumen/Wiese,
Dateien Blumen/Garten/Rose.html, Blumen/Wiese/Klee.html
Übung 4: Links von Rose.html zu Klee.html (und umgekehrt)
evtl. Problem: Er findet es hier nicht.
Übung 5-: Link einfügen zu Garten/Rose.html Problem gelöst: Richtiger Ordner Übung 6-: Im Ordner Garten im Dokument Rose.html
grau:Fakultative Vertiefung lila: Abhängig vom Rechner.
Sonst weiter zu 3.
3. Hyperlinks im Quellcode
Übung 5: Den Texteditor notepad bei „Programme durchsuchen“ aufrufen.
Die Datei als Nelke.txt in Garten abspeichern.
Dort umbenennen in Nelke.html
(evtl. Extras Ordneroptionen Ansicht nicht: Erweiterungen aus…) Aufrufen: Im Ordner Garten mit der rechten Maustaste „Öffnen mit“.
Standardprogramm auswählen, dann Häkchen unten entfernen, „Editor“
<br>
In Nelke.html einen Link zu Rose.html hineinschreiben:
<a href="Rose.html"> zur Rose </a>
4. Relative Adressierung
Übung 6: Erstelle mit dem Texteditor in Blumen die Datei Inhalt.txt;
dann benenne sie um in Inhalt.html .
Erzeuge einen Link zu Nelke.html, die in einem Unterordner davon liegt!
Erzeuge in Nelke.html einen Link zu Inhalt.html
Lösungen Inhalt: <a href="Garten/Nelke.html"> zur Nelke </a>
(relativer) Pfad
Nelke: <a href="../Inhalt.html"> zur Nelke </a>
evtl. entsprechende Übung mit Klee.html . Mit ../ kommt man einen Ordner höher.
Einen Ordner tiefer kommt man einfach mit dem Ordnernamen.
hier also vom Ordner Blumen/Garten zu Blumen Übung 7: Link von Rose zu Klee: ../Wiese/Klee.html Übung 8: Link von Klee.html zu Rose.html: selber machen.
Übung 9, Rundlauf durch die ganze Klasse:
Jede Gruppe erstellt in ihrem obersten Ordner einen Hypertext Reihum.html.
Dann fügt sie dort einen Link zu ebendieser Datei ihrer Nachbargruppe ein:
<a href="../Pausenberger/Reihum.html"> zur nächsten Gruppe </a>
Übung 10: Was bewirkt <a href=”../../../Pausenberger/Blumen/Garten/Rose.html”>Link</a> ?
5. Absolute Adressierung
Versuch : Erzeuge einen Ordner Informatik und verschiebe alles dort hinein, also Reihum.html und den gesamten Ordner Blumen.
Welche Links funktionieren noch?
Übung 11: Ergänze in Reihum.html
<a href="..//Reihum.html">relativer Link </a>
<a href="file://K:/7B/Pausenberger/Reihum.html">absoluter Link </a>
absoluter Pfad hat seine Wurzel im Laufwerk
zu Hause vermutlich C:
Probiere aus, welcher davon nach dem Verschieben funktioniert!
Übung 12: Ergänze ebenso einen absoluten Link von Nelke.html zu Inhalt.html ! Versuch: Verschiebe alles wieder aus dem Ordner Informatik heraus.
Was funktioniert jetzt und warum?
Relative Links beziehen sich auf den aktuellen Ordner,
bei absoluten Links muss der vollständige Pfad angegeben werden, z.B. C:/
- Welchen Vorteil haben relative bzw. absolute Links beim Verschieben der Link- bzw. Zieldatei?
- Wie sieht ein Pfad aus, der zwei Ordner hoch bzw. zwei Ordner hinuntersteigt?
- Wie programmiert man diese als Hyperlink (Schreibweise <a href="Rose.html"> zur Rose </a>) ? Wer fertig ist, erweitere in einer seiner Dateien lang. Später weiter mit 7. Textmarken.
Übung 0: Schaut Euch ruhig auch Rose.html mit dem Texteditor an.
Dort stehen zwar jede Menge Formatierungsbefehle, die die Datei aufblähen, aber vielleicht entdeckt Ihr auch die Links (der Befehl Suchen könnte helfen).
An ihnen könnt Ihr ja mal rumspielen und sie verändern.
6. Links ins Internet
wdr-maus Interntet a) mit notepad:
<a href="http://www.lauf.de"> Link </a>
Bilder aufrufen zum Beispiel: Im Bild re Maustaste, Linkadresse kopieren, sie dann in notepad als Pfad eingeben b) mit Writer: „bei Hyperlinks einfügen“ ins Internet.
Bilder zum Beispiel kopieren, einfügen. Aber Quellen angeben!
7. Textmarken
Langen Text in Rose.html erzeugen. Dann mit Writer/Word:
Einfügen Textmarke (heißt manchmal auch Lesezeichen) an einer Stelle weiter unten im Text.
Vorsicht, da ist er fieselig mit Sonderzeichen, Leerstellen, Zahlen am Anfang, u.a.
Link Verweis auf die Textmarke innerhalb von Rose: aktuelles Dokument, #Marke1 Verweis auf die Textmarke von woanders her: Rose.html#Marke1
Anschauen mit Editor: Der Code heißt offenbar
<a name=“Marke“></a>
<a href=“#Marke“></a>
Mehr zum Quellcode erstellen bei https://wiki.selfhtml.org/wiki/HTML#Elemente
8. Projekt
Erstelle eine Seite über dein Lieblingsthema (oder Treibhauseffekt) mit mindestens - einem Link zu Wikipedia
- einem Link zu einer Seite, die nicht Wikipedia ist
- einem Bild (falls Ihr mit Writer arbeitet, dann bitte mit Quellenangabe) oder einem Link zu einem Bild (falls Ihr mit notepad arbeitet)
- Eurem Namen als Autorenangabe, evtl. mit Datum.
Informationen suchen: Suchmaschine, Wikipedia, Blinde Kuh, geolino, spektrum, … Mögliche Themenseiten
Woher kommt das CO2 in der Atmosphäre?
Natürlicher und künstlicher Treibhauseffekt Was ist der Treibhauseffekt?
Wie können wir Energie gewinnen?
Welche Folgen hat die Erderwärmung für das Klima?
Welche Folgen hat die Erderwärmung für Pflanzen und Tiere?
Wie soll die Erderwärmung begrenzt werden?
Was kann jeder selber zum Energiesparen beitragen?
…
Verschiedene Inhaltsverzeichnisse zu diesem Klassenprojekt erstellen. Ordnungsmöglichkeiten:
Alphabetisch nach Titeln
Alphabetisch nach Autorennamen, A bis M Alphabetisch nach Autorennamen, N bis Z Thematisch: Sport, Wissenschaft, … Die schönsten Seiten oben
Die, die als erste fertig sind, nach oben
Erst die mit notepad erstellten, dann die mit Writer
