Die neuen Medien im AHS-Unterricht

Informatik Lernen 5A

LE 8

Tabellen schaffen Ordnung auf deiner Website

Schritt 1

Erstelle eine leere HTML-Datei mit dem Titel "Unsere Klasse" und speichere sie.

Schritt 2

Aufbau einer Tabelle.
Ziel : Klassenliste mit Photo und Link zur Homepage erstellen.

Basis

In der 5A gibt es 25 SchülerInnen. Zu allen SchülerInnen soll es ein Foto und einen Link geben. Du brauchst also eine Tabelle mit 25 (oder 26) Zeilen und 3 Spalten. Die Tabelle könnte etwa so aussehen :

Name	Foto	Homepage
Sonja Vrisk		www.informatix.at/sonja
Thomas Lettner		www.informatix.at/tommy

Informatik 5A

LE 8

[ 8.1 | 8.2 | 8.3 | 8.4 | 8.5 ]

Schule online - Informatik 5A LE 8 :

8.2

Schuljahr 2001/2002

Informatik Lernen 5A

Aufbau

<table> leitet eine Tabelle ein (table = Tabelle), </table> beendet die Tabelle.

Wenn die Tabelle sichtbare Gitternetzlinien erhalten soll, musst du den Zusatz border (border = Rand) notieren : <table border>

<table border=5> ergibt einen Tabellenrand (außen) von genau 5 Pixeln Breite.
<tr> leitet eine Zeile ein, </tr> beendet sie.
<td> leitet eine Datenzelle ein, </td> beendet sie.
Zwischen <td> und </td> wird der Inhalt der Zelle (Text, Bilder...) notiert.

Beispiel

Tabelle, eine Zeile, drei Zellen (=Spalten), ohne Rand :


Quellcode :	Erklärung :
<body> <table> <tr> <td>Zelle 1</td> <td>Zelle 2</td> <td>Zelle 3</td> </tr> </table> </body>	Body Anfang Tabelle Anfang hier beginnt die erste Zeile Zelle (Spalte) 1 Zelle (Spalte) 2 Zelle (Spalte) 3 hier endet die erste Zeile Tabelle Ende Body Ende	Kopiere den Quellcode, ersetze den Text durch "Ackerl Denise" (anstatt Zelle 1), "Foto" (anstatt Zelle 2) "Homepage" (anstatt Zelle 3). Speichern und anschaun !

Informatik 5A

LE 8

[ 8.1 | 8.2 | 8.3 | 8.4 | 8.5 ]

Schule online - Informatik 5A LE 8 :

8.3

Schuljahr 2001/2002

Informatik Lernen 5A


Schritt 3	Erstelle eine Tabelle mit 3 Zeilen und 3 Spalten. Kopiere die Zeilen von <tr> bis </tr> und füge sie zweimal ein : Schon hast du eine Tabelle mit 3 Zeilen und 3 Spalten ! Füge in der zweiten und dritten Zeile "Berger Jakob" und "Brugger Axel" ein.
Schritt 4	border : Füge im table-Tag "border=1" ein. Teste verschiedene Randbreiten !
Schritt 5	Dicke der Gitternetzlinien : cellspacing=Zahl (Zahl = Breite in Pixel) Teste cellspacing ! Beispiel : <table border=8 cellspacing=30>
Schritt 6	Abstand zwischen Zelleninhalt (Text, Bild, ...) und Zellenrand Meist sieht es schöner aus, wenn der Text nicht am Zellenrand klebt. Dafür verwendet man cellpadding. Beispiel : cellpadding=5. Teste verschiedene Abstände.

Informatik 5A

LE 8

[ 8.1 | 8.2 | 8.3 | 8.4 | 8.5 ]

Schule online - Informatik 5A LE 8 :

8.4

Schuljahr 2001/2002

Informatik Lernen 5A


Schritt 7	Vervollständige die Klassenliste mit folgenden Namen : Chrysopulus Maria, Deimel Renate, Deux Daniela, Düchler Katharina, Gallistl Sandra, Ganneshofer Clara, Heger Katharina, Hoffmann Jennifer, Langer Tobias, Matousek Corinna, Neuhart Stefanie, Orthofer Anna, Rauchberger Annika, Scholz Matthias, Seif Michael, Siuda Markus, Teigl Lisa, Theiner Sarah, Trebnicevic Alma, Vallant Jasmin, Winkler Klemens, Zarbach Sandra
Schritt 8	Gestalte die Seite nun nach deinen Vorstellungen. Verwende Farben, Schriftarten, Schriftgrößen. Farbigen Seitenhintergrund erhältst du mit "body bgcolor=#xxxxxx", Schriftfarbe für den gesamten Text mit "text=#xxxxxx" im body-Tag, Textfarbe für einzelne Textabschnitte mit <font color=#xxxxxx>bla ble bli</font>, Farbe für den Tabellenhintergrund <table bgcolor=#xxxxxx> Farbe für den Zeilenhintergrund <tr bgcolor=#xxxxxx> Farbe für den Zellenhintergrund <td bgcolor=#xxxxxx>

Informatik 5A

LE 8

[ 8.1 | 8.2 | 8.3 | 8.4 | 8.5 ]

Schule online - Informatik 5A LE 8 :

8.5

Schuljahr 2001/2002

Informatik Lernen 5A


Schritt 9	Grafiken einfügen Verwende stets "gif"- oder "jpg"-Dateien, sie werden so notiert : <img src="dateia.gif"><img src="dateib.jpg">. Speichere deine Bild-Dateien (vorerst) im gleichen Ordner, in dem auch deine HTML-Datei liegt ! Füge in der Spalte "Foto" einige Bilder ein !
Lösungen	So findest du die Adresse deiner - vermutlich ersten, selbst erstellten - Website : Gib in der Adresszeile des Browsers http://www.informatix.at/familienname ein, anstatt "familienname" musst du aber deinen realen Familiennamen (in kleinbuchstaben) notieren.Enter - und ab geht die Post !Viel Spaß !
Noch etwas	Wenn dein Werk nicht so richtig funktioniert, dann probier's mal bei http://www.webmasterplan.com. Dort kannst du kostenlos deinen HTML-Code prüfen lassen ! Und findest obendrein noch haufenweise Tipps für Homepagemakers, kostenlose Tools für Webmasters (Ladezeit-, Link-, Promotion-Check...). Teste aber bitte nicht diese Seite, sie ist auch nicht fehlerfrei ! Hier ein Vorschlag, wie eine Klassenwebsite etwa auch gemacht werden könnte.