Informatikprojekt Klasse M10

Im Rahmen des Unterrichts der Klasse M10 in Informatik sollten die Schüler erlernen, eigene Webseiten zu erstellen.

Lernziele

Es wird vorerst nur im Editor geschrieben.
Die Schüler sollen erkennen, was die einzelnen tags bewirken.
Die Schüler lernen die html Sprache kennen und bedienen sich ihrer tags.
Durch das Schreiben im Editor und dem Öffnen der Seite im Internet Explorer (dem Browser, den wir an unserer Schule benutzen) sollen die Schüler den Aufbau einer Internetseite verstehen und erkennen, warum die Seite in der Art angezeigt wird, in der sie im Editor erzeugt wurde.
Die Schüler sollen Fehler erkennen und berichtigen können.
Die Schüler werden angeleitet zu genauem Arbeiten und Beobachten.
Die Schüler können später jederzeit im Quelltext Veränderungen vornehmen und scripts oder object tags einbinden, um zusätzliche Funktionen ablaufen zu lassen.

Unterrichtseinheit 1:

Das Grundgerüst

1. Die 3 Hauptelemente - <html> - </html>; <head> - </head> und <body> - </body>

2. Wir erstellen unser Basisscript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Informatikprojekt Klasse M10 - wir lernen HTML</title>
</head>
<body>

</body>
</head>

3. Wir lernen weitere Tags für den Body kennen:

a) <body bgcolor="#ffffff"> steht für Hintergrundfarbe
b) <font face="Arial" size="3" color="000000">....</font> steht für Schriftart, Größe und Farbe
c) <b>...</b> steht für bold und meint fett
d) <i>....</i> steht für italic und meint kursiv
e) <u>...</u> steht für underline und meint unterstrichen

f) <h1>...</h1> meint eine Überschrift erster Ordnung...wir kennen die Überschriften h1, h2, h3, h4, h5 und h6. Je höher die Nummer, desto kleiner der Text. Für die Größe des Textes merken wir uns, dass es die Größen 1 bis 7 gibt.

Unterrichtseinheit 2:

a) Wir wiederholen die bisher erlernten tags
b) <p align="left">linksbündiger Absatz</p>
c) <p align="center">zentrierter Absatz</p>
d) <p aling="right">rechtsbündiger Absatz</p>
e) Erstellen unserer ersten Seite anhand eines selbstgewählten Gedichts unter Verwendung von Überschrift, Schriftart, Schriftgröße, Schriftfarbe und alignment
f) <body bgcolor="#000000" text="ffffff" background="bildname.jpg"> Einfügen eines Hintergrundbildes in der Seite
g) Unter Umständen berichtigen der Farben in Abstimmung zum Hintergrundbild

Unterrichtseinheit 3:

a) Wir verwenden Tabellen. Eine Tabelle besteht aus Spalten, Zeilen und Zellen. Der Tag <table></table> steht für das Öffnen und Schließen einer Tabelle. Der Tag <tr></tr> steht für das Öffnen und Schließen einer Zeile. Der Tag <td></td> steht für Öffnen und Schließen einer Zelle.

b) Beispiel einer Tabelle mit 3 Spalten und 3 Zeilen, einem Rahmen von 2px und einer Weite von 80%

<table border="2" width="80%">

<tr>
<td>Zelle1</td><td>Zelle2</td><td>Zelle3</td>
</tr>

<tr>
<td>Zelle4</td><td>Zelle5</td><td>Zelle6</td>
</tr>

<tr>
<td>Zelle7</td><td>Zelle8</td><td>Zelle9</td>
</tr>
</table>

c) Das Einfügen eines Bildes erfolgt über den img tag
<img src="Pfad und Name des Bildes" width="Breite des Bildes" height="Höhe des Bildes" alt="Text zum Bildinhalt">
Beispiel: <img src="C:\Bilder\testbild.jpg" width="200" height="250" alt="Testbild">.
Ein Img Tag hat keinen schließenden tag.

d) Einfügen eines Hintergrundklangs. Wir verwenden den Tag bgsound. Er ist jedoch nur verwendbar für den Internet Explorer! Der embed Tag beinhaltet auch den Netscape Browser. Es gibt jedoch auch viele Javascripts, welche verwendet werden können, um Musik als Hintergrund ablaufen zu lassen. Musik ist schön, jedoch hat nicht jeder denselben Geschmack und viele Leute mögen keine Musik in Internetseiten. Beachte, für wen die Seiten gestaltet werden! Außerdem benötigen Sounds oft einen großen Speicherplatz und dauern dementsprechend lang zum Laden in die Seite. Am besten sind Midi-Dateien geeignet. MP3-Dateien müssen auf jeden Fall vorher komprimiert werden.
Beispiel für den bgsound tag: <bgsound src="C:\Musik\test.mid" volume="0" balance="0" loop="infinite">
Auch der Soundtag hat keinen schließenden Tag.

e) die Schüler arbeiten an einer Internetseite zur Präsentation ihrer Klasse (Klassenphotos - Text) - Gruppenarbeit
f) die Schüler arbeiten an einer Internetseite zur Präsentation eines Kinobesuchs ihrer Klasse (Verwenden von Thumbnails, die in der nächsten Unterrichtseinheit als Links verwendet werden, um die größeren Bilder zu öffnen

Unterrichtseinheit 4:

Wir erarbeiten anhand von 2 Beispieldateien die Möglichkeiten über Text oder Bild zu einer anderen Datei zu verlinken

a) ein Bild verlinken zu einer Zweitdatei

b) einen Text verlinken zu einer Zweitdatei

<a href="http://www.fasanenschule.de" target="_blank">Textlink</a>

c) einen Link erstellen, der das Mailprogramm öffnet zum Versenden einer Email

<a href="mailto:name@aol.de">schreib mir</a>

Wir erlernen im Grafikprogramm Paint Shop Pro ein Thumbnail von einem Bild zu erstellen, sowie ein größeres Bild zu komprimieren, um Speicherplatz zu sparen und das Reinladen der Seite zu beschleunigen

a) Öffnen des Programms
b) Öffnen der Bilddatei
c) Bearbeiten - Kopieren
d) neue Datei erstellen mit den Maßen für das Thumbnailbildchen - hier 100x150px
e) Menü Auswahl - Alles Auswählen (es laufen nun so kleine Strichlein um das Thumb herum
d) Menü Bearbeiten - Einfügen - In eine Auswahl
e) das große Bild wurde nun in das Thumb eingefügt und das Thumbnail kann abgespeichert werden

f) Bilddatei komprimieren - Menü Datei - Export - JPG-Optimierung
g) hier gibt es eine Vorschau und der Komprimierungsgrad kann eingestellt werden (25 ist optimal....kann jedoch erhöht werden, wenn es nötig ist und die Datei dabei keinen großen Farbverlust erleidet und nicht verschwommen wird)
h) mit o.k. bestätigen und die Datei abspeichern. Nun kann das optimierte Bild für eine Website verwendet werden.

Unterrichtseinheit 5:

Wir verwenden CSS um das Layout unserer Gedichtseiten zu verbessern

a) was versteht man unter CSS - Casdading Style Sheets?
b) Welche Vorteile ergeben sich für den Webdesigner?
c) Wie können Cascading Style Sheets verwendet werden? - externe Datei; zentral im Head definiert; innerhalb eines einzelnen html Elements
d) Anwenden und die Gedichtseiten verbessern - hinsichtlich der Textbox und des Textes

Wir optimieren das Bildmaterial

a) Hintergrundbild auf Seamless einstellen mit dem Programm 20/20
c) Hintergrundbild optimieren mit dem Programm Paint Shop Pro - JPG-Optimierung

Abspeichern der Dateien im Schülerordner
Zusammenführung der Schülerordner und Verlinken mit der Indexseite
Dateiupload auf den Server

Weitere Anwendung der Unterrichtsinhalte
a) Webseiten zur Vorstellung der beiden 10. Klassen
b) Bericht über den Kinobesuch beider Klassen
c) Erstellen einer eigenen Schülerhomepage

Ergebnisse aufrufbar unter: www.fasanenschule.de

Index	zum Gedichtband

Wir3.