Im Netz der Netze - Webdesign Dokumentation der Erprobung des Themas „Im Netz der Netze“ aus dem Wahlpflichtkurs „Moderne Medienwelten“

Projektübersicht Varianten der Unterrichtsplanung Stoffverteilungsplan Folien und Übersichten 4 Kurzarbeiten Literaturhinweise Software und Arbeitsergebnisse auf CD-ROM

SEMIK-Projekt MedienBausteine Sachsen-Anhalt

Thomas-Müntzer-Gymnasium Halle

B. Schmidt

Inhalt: „M

oder

ne M

edie

nwel

ten“

– B

aust

ein

VII

I

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 2

Projektübersicht Kurs Moderne Medienwelten Thema Im Netz der Netze – Webdesign Schulform Gymnasium Jahrgangsstufe 9 Schule Thomas - Müntzer - Gymnasium WWW-Adresse http://server1.schule.uni-halle.de/~muentzer/Welcome.htm

Lehrkraft Herr Schmidt Kontakt Muentzer@server1.schule.uni-halle.de

Ziele

• Erlernen von Grundkenntnissen zur Geschichte des Internet • Kenntnis grundlegender Begriffe im Internet • Umgang mit E-Mails • Beherrschen einer Strategie beim Suchen im Internet • Gestalten von Web-Seiten mit Querverweisen • Umgang mit einem Scanner • Bearbeiten von Fotos • Arbeit mit Hilfsmitteln (Bücher, Programme)

Schülerzahl 23 zeitlicher Umfang 1 Wochenstunde über 2 Jahre

Lernorte Informatikraum durchgeführte Lernerfolgs-kontrollen

2 pro Halbjahr

Technische Mindest-anforderungen

486 PC und Windows 3.1

Ergebnisse und Empfehlungen

• Die Konzentration auf HTML-Tags ist zeitaufwändig und wenig effektiv. Zu empfehlen ist deshalb die Arbeit mit einem HTML-Editor.

• Paralleles Arbeiten in Gruppen hilft dabei, Engpässe zu vermeiden, die die Folge einer unzureichenden technischen Ausstattung sein können.

• Um eigene Ideen zu entwickeln und umzusetzen, benötigen die Schülerinnen und Schüler genügend Zeit. Nur dann kann sich auch eine kritische Distanz zum eigenen Medienprodukt entwickeln, die wiederum zur Be- und Überarbeitung desselben animiert.

weiterführende Informationen zum Projekt

http://server1.schule.uni-halle.de/~muentzer/Welcome.htm

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 3

Durchführung 23 Schüler der 9. Klassen arbeiten an 12 PCs, d. h. 2 Schüler pro PC. Die Schüler haben sehr unterschiedliche Vorkenntnisse. Es arbeiten Schüler mit, die WWW nur aus der Zeitung kennen und Schüler, die eine eigene Homepage haben. Allen gemeinsam ist das Interesse an der Gestaltung von Web-Seiten. Die beiden Schüler an einem PC haben während des Unterrichts selbstständig gewechselt. Die PCs sind 486er mit 4 MB RAM, WINDOWS 3.1 und Internetzugang. Als sehr vorteilhaft erwies sich die Vernetzung der PCs. Mit Beginn des 2. Halbjahres erhielten die Schüler die im Literaturverzeichnis (s. Anlagen) empfohlenen Bücher und auf Wunsch Internetzugang. Damit konnten Informationen gesucht und ausgetauscht werden. Für die Kurzarbeiten wurden die Schüler in zwei Gruppen eingeteilt. Gruppe 1 beginnt mit dem Klingelzeichen. Die andere Gruppe hält sich außerhalb auf. Nach 20 Minuten wird gewechselt. Das dauert 5 Minuten. Die 2. Gruppe schreibt die gleiche Arbeit. Für die Kurzarbeiten habe ich die von mir ausgeteilten Materialien (s. Anlagen), eigene Mitschriften, bereits geschriebene HTML-Seiten und das Programm SelfHTML zugelassen. Den Schulfotoapparat habe ich auf Wunsch ausgeliehen, um die benötigten Fotos anzufertigen. Schüler habe ich während des Unterrichts aus dem Raum entlassen, um mit Lehrern Interviews zu führen. Die Gruppen für die Projektarbeit haben die Schüler selbst zusammen gestellt. Meine einzige Vorgabe war die Schülerzahl pro Gruppe; diese sollte zwischen 2 und 4 sein. Die Themen haben sich die Gruppen selbst ausgewählt. Ziel der Arbeit war die Erweiterung der Schulhomepage. Manche Schüler/Gruppen haben ihre Projekte mit nach Hause genommen. In der folgenden Stunde habe ich diese intensiv befragt. Konnten sie mir ausreichend Auskunft geben, habe die Arbeit gelten lassen. Ich möchte damit umgehen, dass „fremde Hände“ im Spiel sind. Die Projekte werden am Schuljahresende nach folgenden Kriterien bewertet:

- Inhalt und Aussage - Kreativität - Design

Die Schüler wissen, dass jedes Mitglied der Gruppe die gleiche Note bekommt. Ausnahme: Bemerke ich krasse Unterschiede bei der Beteiligung am Projekt, kann sich die Note auch ändern.

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 4

Ausführliche Darstellung der Ergebnisse und Empfehlungen Im Folgenden werden drei verschiedene Varianten dargestellt. Variante 1 habe ich zusammengestellt vor der 1. Unterrichtsstunde. Ausgehend von Erfahrungen mit 12. Klassen habe ich den Unterrichtsinhalt auf die 9. Klasse übertragen. Das erwies sich als ungünstig. Außerdem hatte ich die HTML-Tags in den Vordergrund gestellt. Das ist zeitaufwendig und nicht sehr sinnvoll. Variante 1 sieht nun weiter vor, zunächst die wesentlichsten Gestaltungsmöglichkeiten kennenzulernen. Die Erstellung der HTML – Seiten erfolgt dabei mit einem Editor. Am Jahresende, d. h. in den letzten 6 Unterrichtsstunden, sollten dann die erworbenen Kenntnisse bei der Gestaltung eigener Web-Seiten eingesetzt werden. Variante 1 ist so schlecht, dass ich im laufenden Jahr Änderungen vorgenommen habe. Variante 2 ist die tatsächlich durchgeführte Variante. Der Hauptunterschied zwischen den beiden Varianten besteht darin, dass ich die Arbeit mit dem Editor reduziert habe. Das habe ich leider zu spät bemerkt. Dadurch ist Zeit verlorengegangen. Bei der Nutzung eines Tools (z. B. HTML-Editor 5) geht die Arbeit deutlich schneller voran. Der Erfolg ist früher sichtbar. Ich habe damit versucht, für die Projektarbeit mehr Zeit „freizuschaufeln“. Außerdem wollte ich erst alle Gestaltungsmöglichkeiten aufzeigen, und im Anschluss als Letztes an Projekten arbeiten lassen. Die Schüler wurden aber immer ungeduldiger. Ich habe deshalb nach der Bildbearbeitung parallel mit der Arbeit an den Projekten begonnen: eine Stunde Arbeit mit dem Tool, nächste Stunde Arbeit am Projekt, darauf wieder Tool, anschließend Projekt. Das erwies sich als sehr vorteilhaft. Der vollständige Unterrichtsablauf nach Variante 2 ist im Folgenden dargestellt Damit komme ich nach vollständiger Überarbeitung zur Variante 3 als Empfehlung. Der Hauptunterschied zur Variante 2 besteht im vollständigen parallelen Arbeiten mit dem Tool und am Projekt. Eine vorgeschlagene Stoffverteilung nach Variante 3 ist im Folgenden aufgeführt. Empfehlungen: Die ersten 8 Stunden (s. Stoffverteilung) müssen unbedingt sein, um eine einheitliche Basis zu schaffen. Zwei Stunden werden benötigt, um den Aufbau einer HTML-Datei mit einem Editor zu entwerfen. Ich halte das für wichtig, damit die Schüler den Grundaufbau einer Web-Seite erkennen. Aber 2 Stunden reichen wirklich. Ausführlich sollte dann ein Tool erklärt werden. Ungefähr 10 Stunden müssen eingeplant werden, um Gestaltungsmöglichkeiten zu erklären. Ausreichend sind folgende:

• Farben • Textformatierungen (Schriftgröße, Schriftart, Ausrichtung) • Einfügen von Bildern • Verweise • Tabellen und Listen

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 5

Mehr würde ich nicht einsetzen (keine Frames), damit Zeit für die Projektarbeit bleibt. Ungefähr 5 Stunden muss für den Umgang mit Bildern veranschlagt werden:

• Umgang mit Fotoapparat; • Umgang mit Scanner; • Bildbearbeitungssoftware.

Es können nur wenige Schüler zeitgleich das Gleiche machen. Ein Scanner erweist sich schnell als Engpass. Manche Schüler haben auch zu Hause gescannt. Ein Digitalfotoapparat hilft sehr viel Zeit sparen: Idee haben, fotografieren, Bild speichern, Bild bearbeiten, einfügen: ≈ 15 Minuten! Ergibt sich eine Zeitersparnis in den ersten Abschnitten, würde ich diese auf jedem Fall im letzten Abschnitt investieren, der Arbeit an den Projekten, veranschlagt mit 10 Stunden. Diese sollte so zeitig wie möglich beginnen. Die Schüler benötigen Zeit, Ideen zu finden und diese um zusetzen. Die Arbeit an den Projekten sollte parallel zum Erlernen neuer Gestaltungsmöglichkeiten erfolgen. Dabei kann es durchaus passieren, dass nicht am Ende jeder Stunde etwas Abrechenbares vorliegt. In Gesprächen mit den Schülergruppen kann man sich über den Fortschritt informieren. Die Schüler lassen sich animieren, zeitaufwändige Texte als „Hausaufgabe“ zu schreiben.

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 6

Varianten

Variante 1 (Vorüberlegungen) Inhalte Hinweise zum Unterricht Geschichtliche Entwicklung Zweck und Nutzen ca. 2 Stunden

Nutzung von Literatur Schulhomepage vorstellen

Begriffe rund ums Internet ca. 2 Stunden

Browser, Domain, Provider, …

Arbeit mit E-Mails ca. 3 Stunden

Einrichten einer E-Mail Adresse Datenaustausch Senden und Empfangen

Suchen im Internet ca. 2 Stunden

Umgang mit Suchmaschinen

Gestalten einer Web-Seite mit Editor

• Textformatierungen

• Steuerzeichen, die sich auf weitere Dateien beziehen

• Steuerzeichen für erweiterte Programmierung

ca. 20 Stunden

Schriftattribute Textlayout Einfügen von Bildern und Grafiken Anfertigen eigener Bilder Einrichten von Frames Erstellen von Links

Gestaltung der eigenen Homepage ca. 6 Stunden

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 7

Variante 2 (tatsächlich durchgeführt) Inhalte Hinweise zum Unterricht Geschichtliche Entwicklung Zweck und Nutzen 2 Stunden

Nutzung von Literatur Schulhomepage vorstellen

Begriffe rund ums Internet 2 Stunden

Browser, Domain, Provider, …

Arbeit mit E-Mails 2 Stunden

Einrichten einer E-Mail Adresse Datenaustausch Senden und Empfangen

Suchen im Internet 2 Stunden

Umgang mit Suchmaschinen

Gestalten einer Web-Seite mit Editor und mit Tool

• Textformatierungen

• Steuerzeichen, die sich auf weitere Dateien beziehen

• Steuerzeichen für erweiterte Programmierung

17 Stunden

Schriftattribute Textlayout Einfügen von Bildern und Grafiken Anfertigen eigener Bilder Erstellen von Links

Erweiterung der Schul - Homepage 10 Stunden

teilweise Überschneidung mit vorigem Abschnitt

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 8

Variante 3: Vorschlag nach Überarbeitung Inhalte Hinweise zum Unterricht Geschichtliche Entwicklung Zweck und Nutzen ca. 2 Stunden

Nutzung von Literatur Schulhomepage vorstellen

Begriffe rund ums Internet ca. 2 Stunden

Browser, Domain, Provider, …

Arbeit mit E-Mails ca. 2 Stunden

Einrichten einer E-Mail Adresse Datenaustausch Senden und Empfangen

Suchen im Internet ca. 2 Stunden

Umgang mit Suchmaschinen

Aufbau einer Web-Seite Farbe Textformatierungen ca. 2 Stunden

Arbeit mit Editor Schriftattribute

Gestalten einer Web-Seite

• Textformatierungen

• Steuerzeichen, die sich auf weitere Dateien beziehen

• Steuerzeichen für erweiterte Programmierung

ca. 13 Stunden

Arbeit mit Tools Schriftattribute Einfügen von Bildern und Grafiken Anfertigen eigener Bilder Arbeit mit Scanner Bearbeiten von Bildern Erstellen von Links

Gestaltung der eigenen Homepage ca. 12 Stunden

parallel zum vorigen Abschnitt

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 9

Stoffverteilungsvorschlag (nach Variante 3)

1. Std. Kursvorstellung 2. Std. Einführung ins Internet 3. Std. Nutzen des Internet, Dienste 4. Std. Begriffe 5. Std. E-Mail 6. Std. 1. Kurzarbeit 7. Std. Kurzarbeit auswerten und Suchmaschinen vorstellen 8. Std. Arbeit mit Suchmaschinen 9. Std. Grundgerüst von HTML, Farben setzen 10. Std. Sonderzeichen 11. Std. Tool erklären 12. Std. Farbe für Text und Hintergrund 13. Std. Überschrift und Trennlinien 14. Std. 2. Kurzarbeit 15. Std. Kurzarbeit auswerten und Projekte festlegen 16. Std. SelfHTML und „Goldene Regeln“ 17. Std. fertige Bilder einfügen 18. Std. Arbeit an Projekten 19. Std. eigene Bilder zeichnen und einfügen 20. Std. Fotos scannen und bearbeiten 21. Std. Arbeit an Projekten 22. Std. 3. Kurzarbeit 23. Std. Listen einfügen 24. Std. Arbeit an Projekten 25. Std. Tabellen erstellen 26. Std. Tabellen mit Farbe und Bildern füllen 27. Std. Arbeit an Projekten 28. Std. Erstellen von Links 29. Std. Arbeit an Projekten 30. Std. 4. Kurzarbeit 31. Std. Arbeit an Projekten 32. Std. Arbeit an Projekten 33. Std. Arbeit an Projekten 34. Std. Bewertung der Projekte 35. Std. Arbeit an Projekten

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 10

Stoffverteilung (nach Variante 2)

1. Std. Kursvorstellung 2. Std. Einführung ins Internet 3. Std. Nutzen des Internet, Dienste 4. Std. Begriffe 5. Std. E-Mail 6. Std. 1. Kurzarbeit 7. Std. Kurzarbeit auswerten und Suchmaschinen vorstellen 8. Std. Arbeit mit Suchmaschinen 9. Std. Grundgerüst von HTML 10. Std. Farben setzen 11. Std. Sonderzeichen 12. Std. Überschrift und Trennlinien 13. Std. Tool erklären 14. Std. Farbe für Text und Hintergrund 15. Std. 2. Kurzarbeit 16. Std. Kurzarbeit auswerten und Projekte festlegen 17. Std. SelfHTML und „Goldene Regeln“ 18. Std. fertige Bilder einfügen 19. Std. Arbeit an Projekten 20. Std. eigene Bilder zeichnen und einfügen 21. Std. Fotos scannen und bearbeiten 22. Std. Arbeit an Projekten 23. Std. 3. Kurzarbeit 24. Std. Listen einfügen 25. Std. Arbeit an Projekten 26. Std. Tabellen erstellen 27. Std. Tabellen mit Farbe und Bildern füllen 28. Std. Arbeit an Projekten 29. Std. Erstellen von Links 30. Std. Arbeit an Projekten 31. Std. 4. Kurzarbeit 32. Std. Arbeit an Projekten 33. Std. Arbeit an Projekten 34. Std. Bewertung der Projekte 35. Std. Arbeit an Projekten

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 11

1. Stunde Kursvorstellung Ziele und Vorhaben des Kurses 2. Stunde Entstehung des Internet Aller Anfang kam vom Militär Anfang: 1969 das amerikanische Verteidigungsministerium hat erkannt, dass Elektronenhirne guten Beitrag zur optimalen Kriegsführung leisten würden Ziel: ==> Datenaustausch zwischen unterschiedlichen Computern = typenübergreifendes Netzwerk Bedingung: Es muss auch dann funktionieren, wenn große Teile weggebombt wären.

Das dazu eingerichtete Forschungsnetzwerk hieß Arpanet (Advanced Reserch Projects Agency) und ist der Großvater des Internet. 1970 besaß das Arpanet 4 Punkte (Unis von California, L.A., Utah und Standford) 1972 wurde das Arpanet der Öffentlichkeit vorgestellt (bereits 40 Punkte angeschlossen) ==> es hatte bereits eine dezentrale Prägung ...

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 12

... und einen eigenen Modus für die Rechnerkommunikation diese Software heißt IP (Internet-Protocol) und TCP (Transmission Control Protocol) IP - funktioniert wie eine Art elektronischer Briefumschlag, in den die jeweiligen Daten

gesteckt, adressiert und verschickt werden; verschiedene Zustellwege sind möglich TCP - zerschnipselt beim Versand große Datenpakete in viele kleine;

jeder Block besitzt die Zieladresse und eine Nummer und kann seinen eigenen Weg gehen; wird beim Empfänger wieder zusammengesetzt

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 13

Jetzt kam die Forschung Unis hatten schon damals wenig Geld neue Computer wurden gebraucht, waren aber zu teuer (5 Millionen Dollar) Zusammenschluss mehrerer Unis ==> jede kauft ein kleines System und diese werden zusammengeschlossen das erste wissenschaftliche Netzwerk ging in Betrieb NSF - Net ( National Science Foundation) weitere Unis schlossen sich an Zugang zum Netz nur von der Uni aus wie aber von zu Hause ? Lösung: Modem

das begeisterte auch Studenten und Beschäftigte anderer Universitäten, die kein Netzwerk besaßen weitere selbständige Netze entstanden das war für den Datenaustausch ungünstig deshalb wurden diese Netze miteinander verschmolzen ==> das Internet entstand

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 14

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 15

da die Universitäten immer noch Geld benötigten, kam man auf eine weitere Idee: der Zugang zu den Daten wurden an Computerfirmen “verkauft”

damit wurde weltweit möglich, auf Daten zu zugreifen - einen Betreiber gibt es nicht, das Internet ist dezentral aufgebaut - es gibt keinen der an der Spitze steht und Anweisungen erteilt - kein durchstrukturiertes Netzwerk, sondern vielmehr ein großes, weltumspannendes

Gespinst, das Hunderttausende von Computern und eine unschätzbare Zahl von Teilnehmern verbindet

- aufgrund der geschichtlichen Entwicklung wird der Löwenanteil der zur Aufrechterhaltung des Internet anfallenden Kosten von Universitäten und Regierungsstellen bezahlt

1976 Queen Elisabeth verschickte ihre erste E-mail 1984 1000 Server 1987 10000 Server 1989 100000 Server und erste Gateways zwischen kommerziellen

Online-Diensten (T-Online, Compuserv, AOL,...) 1994 erstes virtuelles Kaufhaus 1995 Netscape wird größter Anbieter von Internet - Software

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 16

3. Stunde Nutzen des Internet

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 17

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 18

4. Stunde Begriffe Schüler nennen ihnen bekannte und unbekannte Begriffe zum Thema Internet Informationen in Zeitschriften und Büchern suchen Empfohlene Zeitschriften: Computerbild PC – Go! Vergleich und Diskussion mit Folie „Begriffe“ (siehe Anlagen) 5. Stunde E-Mails einrichten einer E-Mail-Adresse senden und empfangen von E-Mails im Intranet 6. Stunde 1. Kurzarbeit siehe Anlagen: Kurzarbeiten 7. und 8. Stunde Arbeit mit Suchmaschinen mit folgenden Suchmaschinen wurde gearbeitet: www.fireball.de www.yahoo.de www.altavista.de www.suchen.de Mehrfachsuche: Verknüpfung mit „+“ oder „und“ Negativsuche: Verknüpfung mit „-“ Namen und Begriffe suchen: in Anführungszeichen

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 19

9. Stunde Grundgerüst von HTML siehe Anlagen mit Editor (z. B. Editor unter WINDOWS 3.1) Grundgerüst abschreiben speichern als ... . htm im Browser betrachten umschalten zwischen Browser und Editor mit ALT – TAB 10. Stunde Farben setzen Angabe der globalen Hintergrundfarbe und der globalen Textfarbe Farben: siehe Anlagen globale Hintergrundfarbe <body bgcolor=[farbe]> z.B. <body bgcolor=red> oder <body bgcolor=#FF0000> globale Textfarbe <body text=[farbe]> z.B. <body text=blue> oder <body text=#0000FF> 11. Stunde Sonderzeichen siehe Anlagen - Sonderzeichen müssen maskiert werden - Groß- und Kleinschreibung ist wichtig

z.B. Die Überschrift heißt: „kein Ärger mit Ödipus!“ Maskierung: Die &Uuml;berschrift hei&szlig;: &quot;Kein &Auml;rger mit &Ouml;dipus!&quot;

- weitere Übungen

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 20

12. Stunde Überschriften und Trennlinien <h1>Was ist eigentlich ein Computer?</h1> ==> Überschrift 1. Ordnung <h2> ... <h6> Überschriften 2. ... 6.Ordnung (Die Größenangaben sind relativ, abhängig von Standardgröße) Ausrichtung der Überschrift align=left, align=right, align=center <h2 align=center>Was ist eigentlich ein Computer?</h2> <center>alles zentrieren</center> Trennlinien <hr> (horizontal rule) Breite: <hr width=100> <hr width=65%> Ausrichtung: <hr align=right> oder center, left Dicke: <hr size=5> (Standard=2) ohne Schatten: <hr noshade> Farbe: <hr color=#ff0000> 13. Stunde Tool erklären s. CD-ROM: HTML-Editor_5 14. Stunde Farbe für Text und Hintergrund (mit Tool) 15. Stunde 2. Kurzarbeit siehe Anlagen: Kurzarbeiten 16. Stunde Auswertung Kurzarbeit Projekte festlegen

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 21

17. Stunde: SelfHTML vorstellen als Nachschlagewerk „Goldene Regeln“ für schlechtes HTML diese Regeln müssen natürlich negiert werden besonders wichtig für Anfänger: 2, 5, 6, 19 diese beiden Programme befinden sich auf der CD-ROM 18. Stunde Bilder einfügen <img src="komplette Pfadangabe"> Merkmale: - Größe des Bildes: width=... height=... - alternierender Text: alt=“...“ Hintergrundbild: <body background=” ... “> unbewegliches Hintergrundbild: bgproperties=fixed (als Tagerweiterung) Bild allein darstellen

- Absatzschaltung mit <p> und </p> Text um Grafik fließen lassen - align=left, right [left... Grafik linksbündig, Text rechts daneben] Abstand zum umgebenden Text hspace, vspace Grafik beschriften [kein offizieller HTML Standard] align=top, middle, bottom Namen festlegen Name=“...“

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 22

19. Stunde Arbeit an Projekten 20., 21. Stunde Arbeit mit Scanner gruppenweise Umgang mit Scanner erklären Bildbearbeitungssoftware (zum Scanner dazugehörig) erklären Auch als „Hausaufgabe möglich“ 22. Stunde Arbeit an Projekten 23. Stunde 3. Kurzarbeit siehe Anlagen: Kurzarbeiten 24. Stunde Listen einfügen <h1>Listen</h1> Die regulären Körper <! Aufzählungslisten> <! ul type = circle;square;disc> <ul> <li>Tetraeder</li> <li>Würfel</li> <li>Oktaeder</li> <li>Ikosaeder</li> <li>Dodekaeder</li> </ul> <! Nummerierungslisten> <! ol type=a | A | i | I a = klein alphabetisch; A = groß alphabetisch; i = klein römisch; I = groß römisch < ! ol start=x > x = Startwert < ! li value=x> Fortzählungswert innerhalb der Aufzählung

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 23

<ol> <li>Tetraeder</li> <li>Würfel</li> <li>Oktaeder</li> <li>Ikosaeder</li> <li>Dodekaeder</li> </ol> Schriftfarbe für gesamte Liste: <ul><font color=“green“> Schriftfarbe für Einzeleintrag: <li><font color=red“> Listen können verschachtelt werden 25. Stunde Arbeit an Projekten 26., 27. Stunde Tabellen <table border=10 bordercolor=#ff0000> <tr> <th rowspan=2> K&ouml;rper <th rowspan=2> Seitenfl&auml;che <th colspan=4> Anzahl <tr> <td> Fl&auml;chen <td> Kanten <td>Ecken <tr> <td> Tetraeder <td> Dreieck <td> 4 <td> 6 <td> 4 <tr> <td> W&uuml;rfel <td> Quadrat <td> 6 <td>12 <td> 8 <tr> <td> Oktaeder <td> Dreieck <td> 8 <td>12 <td> 6 <tr> <td> Ikosaeder <td> Dreieck <td>20 <td>30 <td>12 <tr> <td> Dodekaeder <td> F&uuml;nfeck <td>12 <td>30 <td>20 </table> Rand <table border=…> Dicke der Gitternetzlinien <table cellspacing=...> Abstand Text vom Gitter <table cellpedding=...> Größenangabe <table width=... height=...> [Pixel oder Prozent] Ausrichtung von Tabellen [td, tr, table horizontal] align=... [left, right, center, justify} Ausrichtung von Zellen vertikal valign=... [top, middle, bottom] Farben [table, td] bgcolor=... ; bordercolor=... Bordercolorlight und bordercolordark

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 24

Zeilen verbinden rowspan=… Spalten verbinden colspan=... Tabellen verschachteln Bilder einfügen <td><img src=...> <caption align=top>Tabellenüberschrift</caption> <caption align=bottom>Tabellenunterschrift</caption> 28. Stunde Arbeit an Projekten 29. Stunde Erstellen von Links <body link=black alink=red vlink=green> <a name="Anker5"> <a href="#Anker1"> an das Ende </a><br><br> Links zu <br> <a href="#Anker2">Galilei</a><br> <a href="#Anker3">Kopernikus</a><br> <a href="#Anker4">Kepler</a><br> <h1>Die Wiedergeburt der Naturwissenschaft</h1> Der Text befindet sich in der Datei „text_02.txt“. <a name="Anker1"> <a href="#Anker5"> zurück zum Anfang </a><br><br><br><br> Es gibt <a href="e:\9_www\stunde_07.htm">hier</a> noch mehr Informationen im gleichen Fenster.<br> Es gibt <a href="e:\9_www\stunde_07.htm" target="www">hier</a> noch mehr Informationen in einem neuen Fenster.<br> Es gibt <a href="http://www.halle.de">hier</a> noch mehr Informationen im WWW.<br> Es gibt <a href="ftp://ftp.microsoft.de">hier</a> noch mehr Informationen zum Download.<br> So kann man eine <a href="mailto: name@provider">Mail</a> versenden.<br> Auch Grafiken wie <a href="e:\9_www\stunde_07.htm"><img src=" ... " border=0> </a>diese kann man als Verweis nutzen. </body> <!-- alink ... Standardfarbe der aktivierten Links vlink ... Standardfarbe der besuchten Links link ... Standardfarbe der Verweise -->

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 25

30. Stunde Arbeit an Projekten 31. Stunde 4. Kurzarbeit 32. Stunde Arbeit an Projekten 33. Stunde Arbeit an Projekten 34. Stunde Arbeit an Projekten 35. Stunde Arbeit an Projekten

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 26

Anlagen

Folien und Arbeitsblätter

Was ist HTML? Hardcore oder Tools? Farben Grundgerüst einer HTML-Seite Begriffe Abkürzungen

4 Kurzarbeiten Schülermeinungen Literatur- und Softwareverzeichnis

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 27

Was ist HTML?

- HTML ist die Abkürzung für Hypertext Markup Language - HTML ist eine Dokumentenbeschreibungssprache - HTML bildet das Grundgerüst des WWW - HTML-Seiten benötigen zur Übertragung HTTP - HTML - Dateien bestehen immer aus reinem Text ohne

Formatierungen - HTML-Dokumente sind plattformunabhängig - HTML ist eine Interpretersprache - HTML besteht aus einem festgelegten Satz von Anweisungen - HTML arbeitet nach dem Prinzip der Fehlertoleranz

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 28

Hardcore oder Tools? Hardcore - Vorteile - vollständige Kontrolle über alle Befehle einer Sprache - vollständige Kontrolle über die gesamte Anweisung - keinerlei Kosten für irgendwelche Programme - schnellere Eingabe (wenn man die Befehle kennt) Hardcore - Nachteile - - viel Tipparbeit - - man muss die Befehle genau kennen - - maskieren ist umständlich - - die Eingabe über die Tastatur ist fehlerträchtig - - viel Arbeit bei der Eingabe von Standardvorgängen Tools - Vorteile - - erhebliche Arbeitserleichterung - - Bedienung entspricht der Arbeit mit Standardprogrammen - - kaum Kenntnisse von HTML notwendig - - wenig fehlerhafte Eingaben - - Befehlsseingabe mit Maus möglich

Tools - Nachteile - - keine genaue Kontrolle über den Quellcode - - der erzeugt HTML - Code ist oft schlecht und zu groß - - viele Tools sind nicht kostenfrei - - mangelnde Unterstützung von Metainformation

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 29

Farben

Farbe Rotwert Grünwert Blauwert Name Schwarz 00 00 00 black Weiß FF FF FF white Grau 80 80 80 gray Silber C0 C0 C0 silver Rot FF 00 00 red Grün 00 FF 00 green Hellgrün 00 80 00 lime Olivgrün 80 80 00 olive Blau 00 00 FF blue Marineblau 00 00 80 navy Dunkeltürkis 00 80 80 teal Hellblau 00 FF FF aqua Gelb FF FF 00 yellow Pink FF 00 FF purple Lila 80 00 80 fuchsia Rostbraun 80 00 00 maroon

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 30

Grundgerüst

<HTML> <head> <title> </title> </head> <body> </body> </HTML> Begriffe: Tag (einleitender und beendender) Tag - Erweiterungen (Tag mit Parametern) Container Brackets Kommentare: <!-- hier steht der Kommentar-->

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 31

Begriffe WWW World Wide Web HTML

Hypertext Markup Language

Dokumentenbeschreibungssprache mit Querverweisen

DHTML dynamic HTML Veränderungen sind möglich

HTTP Hypertext Transport Protokoll Übertragungsprotokoll für HT

FTP File Transport Protokoll Übertragungsprotokoll für Daten E-Mail Electronic mail Elektronische Post

Browser „Blätterer“ Programm zum Betrachten von HTML-Seiten

Modem Modulator/Demodulator Provider Internet - Anbieter

FAQ Frequently asked questions häufig gestellte Fragen

IP-Adresse Internet-Protocol Adresse Adressierung von Rechnern mit Zahlen

DNS Domain Name System Adressierung von Rechnern mit Namen Tag HTML - Anweisung Body sichtbare Teil einer Web-Seite Header Kopfteil einer Web-Seite Link Querverweis gif / jpg Bildformate im Web Frames Rahmen

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 32

Abkürzung steht für erzeugtes Zeichen Maskierung lt less then < &lt; gt greater then > &gt; amp ampersand & &amp; quot quotation “ &quot; auml a gefolgt von uml ä &auml; Auml A gefolgt von uml Ä &Auml; ouml o gefolgt von oml ö &ouml; Ouml O gefolgt von oml Ö &Ouml; uuml u gefolgt von uml ü &uuml; Uuml U gefolgt von uml Ü &Uuml; szlig sz gefolgt von lig ß &szlig;

ISO - Latin - 1 - Zeichensatz Nummerncode Zeichen 35 # 36 $ 37 % 38 & 47 / 64 @ 133 ... 169 © 174 ® 177 ± 188 ¼ 189 ½ 190 ¾ Schreibweise: &#64; @

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 33

1. Kurzarbeit: 1. Erkläre folgende Begriffe:

- Provider

- Browser

- HTML

- E-Mail

- FAQ

- Domain 2. Schildere in kurzen Zügen die Entstehung des Internet! 3. Welche Gemeinsamkeit haben HTTP, FTP und TCP/IP ? 4. Welche Bildformate werden in HTML unterstützt? 5. Welche Dienste bietet das Internet? 6. Wie lautet die Internet-Adresse der Schule? Lösungen: 1. siehe Anlagen 3 Pkte. 2. siehe 2. Stunde 3 Pkte. 3. es sind Übertragungsprotokolle 1 Pkt. 4. „gif” und „jpg“ 2 Pkt. 5. ftp, www, E-Mail, news, … 3 Pkte. 6. server1.schule.uni-halle.de/~muentzer/Welcome.html 1 Pkt. Gesamt: 13 Punkte

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 34

2. Kurzarbeit: 1. Erstelle eine neue HTML-Datei und speichere diese unter ... 2. Öffne die Datei "ku2.txt". 3. Kopiere den Inhalt in die unter 1. erstellte Datei. 4. Hebe die Überschrift (Die Widergeburt der Naturwissenschaften) als solche hervor. 5. Setze an die Stelle (xxx) einen Absatz. 6. Setze den Hintergrund schwarz und den Text blau. 7. Richte den zweiten Absatz zentriert aus. 8. Füge eine grüne Trennlinie zwischen den ersten und zweiten Absatz ein. Diese Trennlinie ist - links ausgerichtet - 300 Punkte lang - 10 Punkte dick 9. Speichere die Datei unter ... ab.

Bewertung: 1) 2 Pkte. 2) 1 Pkt. 3) 1 Pkt. 4) 1 Pkt. 5) 1 Pkt. 6) 2 Pkte. 7) 1 Pkt. 8) 5 Pkte. 9) 1 Pkt. Summe: 15 Punkte

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 35

3. Kurzarbeit: Erstelle eine HTML – Seite mit folgendem Aussehen:

Bewertung: Sternzeichen 1 Pkt. Temple-Tuttle 1 Pkt. 1999 1 Pkt. 33 1 Pkt. Schiaparelli 1 Pkt. Trennlinie als Bild eingefügt 1 Pkt. Bild eingefügt 1 Pkt. 2. Trennlinie zentriert eingefügt 2 Pkt. eingefügt 1 Pkt. Umlaute maskiert 1 Pkt. Gesamt: 11 Punkte

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 36

4. Kurzarbeit: Erstelle eine HTML – Seite mit folgendem Aussehen:

Die Bilder befinden sich unter ... (Pfadangabe) Bewertung: Titel im Explorer 1 Pkt. Überschrift 1 Pkt. Rowspan 2 Pkte. Colspan 2 Pkte. Überschrift in Tabelle 1 Pkt. Schriftfarbe 1 Pkt. Rahmen 1 Pkt. Rahmenfarbe 1 Pkt. Bilder einfügen 2 Pkte. Maskierung 1 Pkt. Gesamt: 13 Punkte

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 37

Schülermeinungen Andre (Note 1) In der Zeit von September 1999 bis zum Juli 2000 fand an unserem TMG die Arbeitsgemeinschaft „Netz der Netze“ statt. Jede Woche hatten wir 1 Stunde Unterricht im Computerkabinett, in dem 12 PCs und ein Server sich befindet. An diesem nahmen ca. 20 Schüler der 9. Klasse teil. Folgende Themen haben wir behandelt: Ziel, Inhalt, Begriffsbestimmung sowie die Geschichte (seit 1969) des Internets Schwerpunkte Lagen z.B. auf: Wie nutze ich Suchmaschinen? Danach haben wir uns mit der HTML-Programmierung vertraut gemacht. Zuerst behandelten wir die Grundlagen. Danach wurden kleine Seiten Programmiert. In den Monaten Mai und Juni wurden die Vorbereitungen für eine Webseite mit Bildern gelegt, um diese im Internet auf unserer Home-Page zu veröffentlichen. Die Möglichkeit auch in der Schule sich mit dem Internet zu befassen finde ich sehr gut. Heute durchdringt das Internet schon fast alle Bereiche des Internets. Auch wir haben in der Schule die Möglichkeiten uns mit Internet im Unterricht zu befassen. Dabei sollte die Informationsnutzung stärker als bisher auch im Unterricht einbezogen werden. Die Zukunft liegt nach meiner Meinung in der noch schnelleren effizienteren Informationsfindung. Leider ist eine Stunde pro Woche nicht viel Zeit. Auch würden mehrere Stunden in der Woche auf mehrere Tage verteilt noch nicht den größeren Effekt bringen. Dieser Unterricht sollte mindestens an einem Tag in der Woche mindestens zwei Stunden in Folge stattfinden. Anja: (Note 2) Der Inhalt des Kurses ,,Netz der Netze" besteht darin, dass die Schüler das Erstellen von HTML- Seiten erlernen. Nach meiner Meinung ist dieser Kurs nur weiter zu empfehlen, denn meine Generation zeigt stets viel Interesse für die Computerwelt und damit auch fürs Internet. Man sollte uns daher auch die Möglichkeit geben, damit besser umzugehen. Die Schüler, die dieses Fach belegen, sollten jedoch über einige Grundkenntnisse des Computerfachwissens Bescheid wissen. Was ich weniger gut finde ist, dass sich je zwei Schüler einen Computer teilen müssen, damit ist erstens die Unkonzentriertheit der Schüler vorprogrammiert und es erschwert das Prüfen der Schülerleistungen.

B. Schmidt, Moderne Medienwelten, „Im Netz der Netze – Webdesign“ 38

Literatur- und Softwareverzeichnis verwendete und zu empfehlende Literatur - HTML 4.0 Handbuch Münz/ Nefzger (mit CD-ROM) Verlag: Franzis´ ISBN 3 - 7723 – 7514 – 6 ≈ 100 DM - Eigene Homepage optimieren Peter Müller (mit CD-ROM) Verlag: DATA Becker ISBN 3 – 8158 – 1302 – 6 ≈ 30 DM - Web Design kreativ! Michael Baumgardt (mit CD-ROM) Verlag: Springer ISBN 3 – 540 – 64931 - Jetzt lerne ich JavaScript und HTML Ralph Steyer (mit CD-ROM) Verlag: Markt und Technik ISBN 3 – 8272 – 5541 – 4 ≈ 50 DM - Weltweit surfen im Internet Mark Torben Rudolph Verlag: DATA Becker ISBN 3 - 8158 – 1532 – 0 ≈ 20 DM verwendete Programme (auf CD enthalten) Editor 5 Tool zum Erstellen von Web – Seiten ( ab Windows 3.1) DominHTML Tool zum Erstellen von Web – Seiten (ab Windows 95) SelfHTML Befehlsübersicht Die Goldenen Regeln für schlechtes HTML Vorschläge für das Design zusätzlich im Verzeichnis Grafik enthalten:

- Bilder - Linien - Cliparts - Hintergründe - Animierte Gif´s - Schaltflächen