HTML - Unterricht

HTML

Inhaltsverzeichnis



Die Sprache des Internet

E-Mail: [email protected]
Home: http://www.geocities.com/hammerpet2001/



Soli Deo Gloria.


Einleitung - Anleitung

Was folgt, sind meine Schulungsunterlagen, die ich für den Unterricht aus verschiedenen Quellen zusammengestellt habe. Gleich unter dem Thema habe ich die Quelle, die ich verwendet habe, aufgeführt.

Ich habe im Internet gesucht und sehr Brauchbares gefunden. Es gibt bei der Zentrale für Unterrichtsmedien http://www.zum.de/ einen Internet Kurs. Da wird HTML behandelt. Es wird auf weitere Quellen verwiesen. Ich habe auch englische Internet Seiten zum Thema HTML benutzt. Sie waren gut erklärt und interaktiv gestaltet. Da ist zum Beispiel die Internet Adresse: http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html/. Natürlich ist auch das Nachschlagewerk von Stefan Münz sehr gut. http://selfhtml.teamone.de/ Von Ulli Meybohm habe ich seinen HTML Editor heruntergeladen jedoch nur einmal verwendet. http://www.meybohm.de/

Auf traditionelle Medien wie Bücher habe ich auch zurück gegriffen. Das Buch Die eigene Homepage von Ralf Weisbecker und Cora Taeumel erschienen bei DATA BECKER, war eine Quelle brauchbarer Informationen. Die Befehle in den einzelnen Kapiteln habe ich ausprobiert. Aus diesem Buch habe ich einzelne Themen selber gelernt. Obwohl das Buch alt ist, Erscheinungsjahr 1997 und für eine HTML Version 2.0 geschrieben worden war, sind so grundsätzliche Themen wie "Was man besser lassen sollte" auch jetzt noch aktuell. Es war sehr gut.

Weiterhin habe ich an Lehrgängen teilgenommen. Die Sparkasse hatte einen Internet Führerschein für Lehrer und Lehrerinnen angeboten. An der Universität zu Köln habe ich als Gasthörerin an einem Kurs teilgenommen, Erstellen von WWW-Dokumenten, im Umfang von 9 Doppelstunden à 90 Minuten. Für die Lehrerfortbildung wurde Intel Lehren für die Zukunft mit Unterstützung von Microsoft - Unterrichtspraxis Edition 1.0 angeboten. Dieser Kurs umfasste 40 Unterrichtsstunden und 30 Stunden eigenes Lernen. Ein Kapitel beschäftigte sich mit Webseiten erstellen. Hier waren die Ideen zur Webseitengestaltung hilfeich.

Um den Jugendlichen eine Einführung in die Programmierung zu geben, habe ich 4 Programmierbausteine in einer PowerPoint Präsentation vorgestellt. Konkret habe ich den linearen

    1) Ablauf,
    Programmierbaustein 1 Ablauf

    2) Verzweigung,
    Programmierbaustein 2 Verzweigung

    3) Schleife,
    Programmierbaustein 3 Schleife

    4) Fallunterscheidung
    Programmierbaustein 4 Menü

gezeigt. Diese einzelnen Schritte können angewandt werden, um ein Ei zu kochen. Hier ist darzulegen, welche Entscheidungen zu treffen sind. Welche Reihenfolge ist zu beachten? Mit diesem Beispiel haben wir den Algorithmus, das heisst, ein Flussdiagramm für diese Aufgabe ausgearbeitet. Für die eigene Homepage wird Inhalt und die Reihenfolge festgelegt.

Beim ersten Mal hatten wir weder einen HTML - Editor noch ein HTML - Programm wie Frontpage. Wir haben die HTML - Befehle mit dem im Zubehör befindlichen Editor eingegeben. Die unter 20 Punkten aufgeführten Themen habe ich als einzelne Lektionen ausgearbeitet. Die Unterlagen für die einzelnen Lektionen waren nicht länger als 1 Seite. Je nach Leistungsstand und Interesse der Jugendlichen habe ich eine Unterrichtsstunde (45 Minuten) pro Thema angesetzt. Ohne Schreibmaschinenkenntnisse ist das Tippen schon eine langwierige Aufgabe.

Erfolg haben, und den noch möglichst schnell, ist sehr wichtig im Unterricht. Ein Beispiel Dokument für eine Homepage folgt nach der Zusammenfassung. Wenn ein Schüler oder Schülerin fehlt oder die Anforderung zu hoch ist, konnte er oder sie an Hand des Beispiels die eigene Homepage erstellen.

Natürlich kann man auch ein Word-Dokument als HTML-Seite speichern. Mit Word 2000 wird sehr viel Code generiert. Das vergrössert die Datei. Anbieter wie http://www.yahoo.com/ oder http://www.tripod.de/ bieten auch Hilfen an, im Internet interaktiv eine Homepage zu erstellen. So schnell wie eine E-Mail eingerichtet werden kann, so schnell geht es auch mit einer Homepage.

Von keiner Homepage haben, bis zum Hochladen einer Homepage bei http://www.yahoo.com, haben wir 12 Wochen à einer Unterrichtsstunde pro Woche benötigt. Die Bilder sind nicht aus bestehenden Dateien kopiert worden. Die Jugendlichen habe mit dem Malprogramm Paint eine Zeichnung erstellt. Mit Windows 98 kann ein Bitmap picture bmp in gif oder jpg gespeichert werden. Mit der Millenium Ausgabe von Windows ist es ebenfalls möglich, die Zeichnung gleich im Internet Format speichern zu können. Zeichnerische Talente werden so in der Homepage gezeigt. Siehe die Homepage von Danijel. http://www.geocities.com/danijelilic2001/ Auch mit den Autoformen in MS Word hat sich ein Jugendlicher eine Zeichnung erstellt. Diese Zeichnung wurde als HTML-Datei gespeichert. Das nun in gif umgewandelte Bild konnte so in seine Homepage eingebunden werden.

Nicht nur die einzelnen Talente der Jugendlichen kamen zum Einsatz in diesem Projekt, sondern auch der Umgang mit unterschiedlichen Computerprogrammen wurde gübt. Der Verlag Klemm Music Technology hat der Jugendwerkstatt gegen eine kleine Gebühr, nicht für die regulären Programm Kosten, Musikprogramme wie Cakewalk Home Studio 9.0 deutsch, Cakewalk Pro Audio 9.0, Finale Allegro 2001 und Cakewalk SONAR zur Verfügung gestellt. Ein Jugendlicher hat mit Cakewalk Home Studio die Noten zu Jingle Bells eingegeben und diese als MIDI- Datei gespeichert. Das Ergebnis konnte er in seine Homepage einbinden. Mit diesen Musikprogrammen können wir eigene Musik machen. Ich habe auch eigene Kompositionen im Midi - Format zur Verfügung gestellt.

Die Homepage Gestaltung steht ziemlich am Ende in meinem Inhaltsverzeichnis. Das kann auch an den Anfang des Projektes gestellt werden. Ich wollte nicht mit theoretischen Erklärungen anfangen. Die Jugendlichen in meinem Unterricht sind nicht gymnasial Schüler oder Schülerinnen. Vorstellungen lassen sich schnell fixieren, anstatt selber etwas zu entwerfen. Ich wollte den Jugendlichen die Chance geben, sich selber auszudrücken.

Das Dokument kann einfach heruntergeladen werden. Die einzelnen Übungen können markiert und in die Zwischenablage kopiert werden. Dann kann man den Editor aus dem Zubehör aufrufen. Der Inhalt der Zwischenablage kann in den Editor mit Bearbeiten Einfügen oder Strg - V eingefügt werden. So kann schnell ausprobiert werden und lästige Tipperei gespart werden.

Zum einen habe ich dokumentiert, wie meine Jugendlichen mit wenig Kosten aufwendigen Mitteln eine Homepage erstellt haben. Mit dem Editor aus dem Zubehör und dem Malprogramm Paint haben wir Ansatzweise eine multimediale Homepage erstellt. Die zur Verfügung gestellten Musikprogramme von Klemm Music Technology haben nun das multimediale Können meiner Jugendlichen erweitert. Zum anderen habe ich meinen Lernaufwand dokumentiert. Ich habe viel Weiterbildung durch Teilnahme an Lehrgängen, Lesen von Büchern oder den Einsatz des Internet betrieben. Dieses Lernen war schulbegleitend.

Am Ende meiner Träume bin ich aber noch nicht angelangt. Ich möchte mit einem Notebook, Anschluß ans Internet und einem Beamer, mein Unterrichtsmaterial in das Klassenzimmer tragen. Wozu?

    1) Ich weiß nicht jeden Befehl auswendig. Mit so einer Ausstattung kann ich jederzeit schnell nachschauen. So kann ich Methodenkompetenz vorführen.
    2) Lernen lebt; und was lebt unterliegt Veränderungen. Kaum sind meine Unterlagen erstellt, habe ich schon bessere Einfälle. Auf diesem elektronischen Weg lassen sich leicht Modifikationen vornehmen.
    3) Die Welt ist im stetigen Wandel, und EDV Wissen veraltet schnell. Mit diesem Medium kann schnell umgestellt und aktualisiert werden.
    4) Anderes Lernen ermöglicht der Computer mit Internet Zugang, Sound Systemen, Speaker Boxen, digitalem Keyboard, MP3 Player, DVD Player, TV-Gerät, digitaler Videokamera, digitaler Fotokamera, Handheld PDA, WebCam, etc.
    5) Die Kommunikationsmöglichkeiten mit E-Mail, Chatten, SMS, Web-Telefonie werden auch im Klassenzimmer zugänglich.
Vielleicht werden mir noch mehr Gründe einfallen, wenn ich länger darüber nachdenke. Die kann ich dann ja noch hinzufügen. Vielleicht hast Du, lieber Internet Besucher, auch noch Ideen, an die ich gar nicht denken kann. Ich freue mich über Deine Vorschläge.

Nun wünsche ich Ihnen oder Dir erfolgreiches und frohes Schaffen bei der Erstellung einer Homepage.



HTML - Grundgerüst

Ein HTML-Dokument hat einen Kopf- und einen Inhaltsteil.
Der Kopf steht zwischen den Befehlen <head> ... </head>,
der Inhaltsteil steht zwischen den Befehlen <body> ... </body>.

Die HEAD-Angaben werden im Browserfenster nicht angezeigt. Sie enthalten Angaben, die zum Beispiel von Suchmaschinen ausgewertet werden. Der Text zwischen <title> ... </title> wird in der Titelzeile des Browsers angezeigt.

Zwischen dem BODY-Anfangsbefehl und -Endbefehl können Texte, Graphiken, Sound, interne und externe Links, E-Mail-Adressen ... eingefügt werden.

Erweiterungen des BODY-Befehls

<body bgcolor="yellow"> bestimmt die Hintergrundfarbe red, green, blue, etc.
<body background="daniel.jpg"> fügt eine Hintergrundgraphik ein im gif oder jpg-Format


Eine HTML - Datei erstellen

Es gibt verschiedene Möglichkeiten, eine HTML-Datei zu erstellen.

Im Zubehör wird ein Editor angeboten. Mit diesem Programm kann man ASCII-Dateien erstellen. Also man gibt die HTML-Befehle ein und speichert die Datei mit der Dateierweiterung *.htm. Die *.htm Dateierweiterung ist zwingend.

Des weiteren kann man eine in MS Word geschriebene Datei mit den Befehlen Datei / Als HTLM Datei speichern ...

Mit dem Windows Explorer kann man in das Verzeichnis wechseln, in der die *.htm Datei steht, darauf doppelt klicken. So öffnet sich ein Internet Browser, zum Beispiel, der Internet Explorer und man kann sich die Datei im Internet Browser ansehen.

Im Browser kann man mit Ansicht / Quelltext anzeigen die HTML Befehle sehen. Man kann einen Befehl eingeben, die Datei speichern und in das Internet Browser Fenster wechseln. Dort klickt man die Schaltfläche Aktualisieren an, und schon kann man das Ergebnis des HTML – Befehles sehen.
Zum Beispiel,


Textformatierungsbefehle

<font> ... Schrift </font>
<font face="Comic Sans MS"> ... Schriftart </font>
= "Arial"
<font size="1"> ... Schriftgrößen 1 - 7 (1 = sehr klein) </font>
<font color="blue"> ... Schriftfarbe </font>
aqua, black, navy, fuchsia, gray, lime, green, maroon,
olive, purple, red, silver, teal, white, yellow

<b> bold = fetter Text </b>

<i> italics = kursive Schrift </i>

<u> underlined = unterstrichener Text </u>



Zeilen- und Absatzformatierungen

<p> = paragraph (neuer Absatz)
<br> = break (neue Zeile)

<h1> = heading (Überschrift) </h1>
H1= größte Schrift
H6 = kleinste Schrift
Unter der Überschrift wird automatisch ein Absatz eingefügt.

<center> = center (zentrierter Text) </center>
<div align="right"> rechtsbündiger Text </div>
<div align="justify"> B l o c k s a t z </div>
<blockquote> eingerückter Text, z. B., Zitat </blockquote>


Listen und Aufzählungen

<OL> (organized listings)
<LI> Fahrrad fahren</LI>
<LI> singen und Gitarre spielen</LI>
<LI> die Computerei</LI>
</OL>
<UL> (unorganized listings)
<LI> mit dem Computer lernen</LI>
<LI> den Computer programmieren</LI>
<LI> Homepage von <A HREF="#zielcr">Petra</A> erstellen</LI>
</UL>


Die Form der Bullets verändern
<br>
<ul type=circle>
<li>...</li>
</ul>

<ul type=square>
<li>...</li>
</ul>

<ul type=disc>
<li>...</li>
</ul>

Bei Liste und Aufzählung muß jede Zeile vorn mit dem Befehl <li> versehen werden. Die einzelnen Punkte werden automatisch eingerückt.


Links

Links sind Verweise. Diese können


Interner Link

Dafür sind zwei Schritte nötig:

Ein interner Link greift auf eine Datei zu, die im gleichen Verzeichnis gespeichert ist.
Hier wird auf die Datei adresse.htm verwiesen.

Externer Link

So kann man auf alle anderen Seiten im Web verweisen.
Mit dem Verweislink kann auch ein Email Programm aufgerufen werden.
Mit dem Email-Verweis kann auch der Betreff eingebaut werden.


Grafik

Im Internet sind gif und jpg die am weitesten verbreiteten Formate und beinahe jeder Browser kann Bilder dieser Art darstellen.

GIF ist ideal für Zeichnungen, Grafiken und Schaltflächen, bei denen man mit 256 Farben auskommen kann und muß, da das Format auf diese Anzahl Farben beschränkt ist.

JPG läßt sich gut für Photos und Bilder mit hoher Qualität einsetzen, da es 16 Millionen Farben und somit True Color bietet. Das macht die Ladezeit höher. Bei Kompression ist der Informationsverlust zu bedenken. Die Qualität des Bildes wird mit steigender Komprimierung geringer.
Die Breite und Höhe der Grafik ändern
Die Grafik mit einem Rahmen umgeben
Den Abstand zwischen Grafik und Umgebung festlegen


Tabelle

<H2>4x2 Tabelle</H2>
<Caption>Jugendwerkstatt</Caption>
<br>

<Table Border=8 cellspacing=4 bordercolor=#990099 Align=left width=50% height=40%>
<TH Colspan=4><IMG SRC="Emailed.gif" width=50>
<TH Colspan=4><IMG SRC="noten16.gif" width=50>
<TR>
<TH bgcolor=red width=60>Aktivit&auml;ten
<TH width=60>Dienstag
<TH width=60>Mittwoch
<TH width=60>Donnerstag
</TR>
<TR>
<TD align=center>Musik
<TD align=center>0
<TD align=center><PRE> </PRE>
<TD align=center>1 Stunde
</TR>
</Table>

Das sind die Tabellenbefehle


Animation / Musik

Hier kommt ein eye-catcher, eine kleine Animationen.

Hier wird Musik abgespielt.

<!--
<bgsound src="dududu.mid">
http://hits.mp3board.com/
<embed src="ymca.mid" loop=true autoplay=false width=145 height=60>
-->

Adding Sounds...

To add sounds to a web page... we will use the <EMBED> tag. This tag supports many common file formats... such as .wav, .mid, and .au. Here is the basic structure of the tag:
If you want the file to automatically play when the web page is loaded, set autoplay=true, if you do not want the file to automatically start, set autoplay=false. If you want the control box to be hidden, use the hidden=true attribute. Normally the file will stop playing after it is completed the first time, so if you want it to start over once it is done use the attribute loop=true. You can set the volume setting with the volume attribute, a value from 1 to 100 (default is 50). The control box size that plays the sound can vary from browser to browser, but some versions of Netscape won't show the box at all unless you specify. (145 and 60 are usually good)

Example of the EMBED tag...


Formular

<H3> Kontakt die Jugendwerkstatt </H3>
<br>
E-Mail: [email protected]<br>
Tel. (0214) 500 95 56/57<br>
Fax (0214) 40 10 44<br>
Anschrift:


Frames

<html>
<head>
<title>Die 6. Übung - Frames erstellen</title>
</head>
</html>


Links und Menü

<html>

<head>
<title>Die 7. Übung - Links + Menü erstellen</title>
</head>

<body>
Interner Link<br><br>
Ein interner Link greift auf eine Datei zu, die im gleichen Verzeichnis gespeichert ist. <br>
<br>
<A HREF="Dateiname.htm">sichtbare Bezeichnung</A>
<br>
<br>
Externer Link<br>
<br>
Ein externer Link greift auf einen anderen Server/Host zu. <br>
<br>
<A HREF="http://www.bwv-ahaus.de">Link auf die Homepage unserer Schule</A>
<br>
<br>
Einbettung einer Graphik in einem Link (=>Anklickbare Graphik) <br><br>
<A HREF="http://www.meybohm.de"><IMG SRC="hedit2.gif"
BORDER="0" WIDTH="180" HEIGHT="76" ALT="Link zur HTML-Editor-Homepage"></A>
<br>
<br>

<hr>
<center>
<br clear=all>
[<a href="index.html">&laquo;</a>]
[<a href="index.html">Home</a>]
[<a href="jwmetal.html">Metall</a>]
[<a href="jwtext.html">Textil</a>]
[<a href="jwhaus.html">Hauswirtschaft</a>]
[<a href="jwakti.html">Aktivit&auml;ten</a>]
[<a href="jwpers.html">Personen</a>]
[<a href="jwueb5.html">Kontakt</a>]
[<a href="jwimpr.html">Impressum</a>]
[<a href="index.html">&raquo;</a>]
</center>
</body>
</html>



Impressum

<html>
<head>
<title>Die 8. Übung - Impressum erstellen</title>
</head>
<body>
<font size="5">Impressum</font><br>
<br>
<p>Mitgearbeitet an diesen Seiten haben:
<ul>
<li>Korrekturlesen von Vorname Name (Arbeitstitel)</li>
<li>Darstellung des Metallbereiches Vorname Name </li>
<li>Mitgestaltung der Textil- und Hauswirtschaftsseite Vorname Name </li>
<li>Programmierung von Vorname Name (Arbeitstitel)</li>
<li>Bildmaterial von Vorname Name (Arbeitstitel)</li>
<li>Auftrageberin Vorname Name (Arbeitstitel)</li>
</ul>
<br>
<br>
<br>
<br>
<i>Letzte Aktualisierung am&nbsp;&nbsp;27.11.01</i>
<br>
<br>
</body>
</html>


Zusammenfassung

<!-- Ein Kommentar wird zwischen diese Zeichen gestellt.
Die 9. Übung - Eine eigene Homepage erstellen -->
<html>
<head>
<title>Im Titel kannst du deinen Namen eintippen.</title>
</head>
<body>
<H3 align=center><font color="green">Willkommen bei ... zum Beispiel Muster Schüler</H3>
</font>
<br>
Hier stellst Du dich vor.<P>
Ich heisse Muster Schüler.
Ich bin 16 Jahre alt, schlank und 177 cm groß.
Meine Hobbies sind
<ul>
<li>Fußball</li>
<li>Hiphop</li>
<li>Tanzen</li>
</ul>
Besonders gut kann ich klettern. Auch Raps kann ich auswendig hersagen.
<br>
<br>
Hier kannst Du erzählen, was du in der Jugendwerkstatt machst.
<P>
Ich bin seit dem 27. August 2001 in der Jugendwerkstatt.
Ich bin im Metallbereich. Hier lerne ich ....
Mir gefällt besonders die Berufsschule.
Weniger gut finde ich ....
<br>
<br>
Du kannst mit folgendem Befehl ein Photo oder eine Zeichnung links einfügen.<br>
<img SRC="blatt2.gif" BORDER=0 height=132 width=130>
<br>
Mit dem folgenden Befehl steht das Bild rechts. <br>
<div align=right><img SRC="blatt2.gif" BORDER=0 height=132 width=130></div>
<br> Du kannst auch eine Tabelle verwenden, um 2 Photos nebeneinander anzuzeigen.
<br>&nbsp;
<table COLS=2 WIDTH="100%" >
<tr>
<td>
<center><font size=+1>&nbsp;Hier ist mein Lieblingsauto&nbsp;</font></center>
</td>
<td>
<center><font size=+1>Hier siehst Du mich an der Kletterwand</font></center>
</td>
</tr>
<tr>
<td>
<center><img SRC="blatt2.gif" BORDER=0 height=159 width=300></center>
</td>
<td>
<center><img SRC="blatt2.gif" BORDER=0 height=159 width=250></center>
</td>
</tr>
</table>
<P>
Mit diesem Befehl kannst du Musik in deiner Homepage abspielen.
<P>
<embed src="dududu.mid" width=150 height=45 autostart="true" loop="true">
<br><br>
Du kannst auch Animation in deiner Homepage verwenden.
<br>
<marquee> <font color="red"> Alles was hier steht, wird horizontal gescrollt. </marquee>
<br><br>
Du kannst deine Lieblingsinternetseite(n) in deiner Homepage anzeigen.
<br>
<a href="http://www.zum.de" target="top">Zentrale f&uuml;r Unterrichtsmedien</a>
<br>
<br>
Deine Email Adresse gibst du so ein:
<br>
<a href="mailto:[email protected]">[email protected]</a>
<p>
Wenn Du mehr als eine Seite ins Internet stellen willst,
kannst Du das mit einer Men&uuml;leiste machen.
Das sind die Befehle.
<center>
<br clear=all>
[<a href="index.html">&laquo;</a>]
[<a href="index.html">Home</a>]
[<a href="jwmetal.html">Metall</a>]
[<a href="jwtext.html">Textil</a>]
[<a href="jwhaus.html">Hauswirtschaft</a>]
[<a href="jwakti.html">Aktivit&auml;ten</a>]
[<a href="jwpers.html">Personen</a>]
[<a href="jwkont.html">Kontakt</a>]
[<a href="jwimpr.html">Impressum</a>]
[<a href="index.html">&raquo;</a>]
</center>
<P>
Zum Schluß notierst du Urheberrecht und letzter Veränderungsstand.
<P>
<hr>
&#169; Muster Schüler&nbsp; &nbsp; &nbsp; &nbsp;Stand: 15.11.2001<br>
</body>
</html>


Die Homepage von Muster Schüler

<html>
<head>
<title>Muster Schüler</title>
</head>
<body>
<H3 align=center><font color="green">Willkommen bei Muster Schüler</H3>
</font>
Ich heiße Muster Schüler. Ich bin 16 Jahre alt, schlank und 177 cm groß.
Meine Hobbies sind:
<ul>
<li>Klettern</li>
<li>Hip Hop</li>
<li>Tanzen</li>
</ul>
<table COLS=2 WIDTH="90%">
<tr>
<td>
<center><font size=+2>&nbsp;<I>Der K&uuml;nstler dieser Zeichnung bin ich.</I>&nbsp;</font></center>
</td>
<td>
<center><font size=+2>Hier erz&auml;hle ich Dir etwas.</font></center>
</td>
</tr>
<tr>
<td>
<center><img SRC="muster1.gif" BORDER=0 height=159 width=300></center>
</td>
<td>
<center><embed SRC="muster.wav" width=150 height=45 autostart="false" loop="true"></center>
</td>
</tr>
</table>
<!-- <SOUND src="muster.wav" loop=infinite> -->
<P>
<embed src="killme.mid" width=150 height=45 autostart="false" loop="true">
Hier kannst Du Dir meine Lieblingsmusik anh&ouml;ren.
<br><br>
Das ist meine Lieblingsinternetseite.
<br>
<a href="http://www.zum.de" target="top">Zentrale f&uuml;r Unterrichtsmedien</a>
<br><br>
Meine Email Adresse ist:
<br>
<a href="mailto:musterschü[email protected]">musterschü[email protected]</a>
<p>
<hr>&#169; Muster Schüler&nbsp; &nbsp; &nbsp; &nbsp;Stand: 16.11.2001<br>
</body>
</html>




Homepage Gestaltung

Auf die Frage "Wozu eine Homepage überhaupt?" werden im "Intel Lehren für die Zukunft" drei Antworten gegeben:


Bei der Gestaltung der Startseite oder Übersichtsseite ist zu bedenken:

Das Layout der Homepage

Der Inhalt der Homepage

Quellen

Links und weiterführende Literatur



Quelle: Intel Lehren und Lernen, 2001.



META-Informationen

<html>
<head>
<title>Das ist die 10. Homepage Übung</title>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META NAME="generator" CONTENT="Homepage-Werkstatt">
<META NAME="author" CONTENT="Petra Hammer">
<META NAME="publisher" CONTENT="Petra Hammer">
<META NAME="copyright" CONTENT="Petra Hammer">
<META NAME="keywords" CONTENT="Jugendliche, Metall, Textil, Hauswirtschaft,
St&uuml;tzunterricht, Deutsch als Fremdsprache, Berufsschule, Medien">
<META NAME="description" CONTENT=" ">
<META NAME="page-topic" CONTENT="Bildung">
<META NAME="page-type" CONTENT="Anzeige">
<META NAME="audience" CONTENT="Jugendliche">
<META NAME="robots" CONTENT="INDEX, FOLLOW">
</head>
<body>
<font face=Arial>
<font size=3>
Damit die Homepage auch von Suchmaschinen gefunden wird,
dienen die META NAME ... Informationen.
<br>
</font>
<hr> &#169; Petra Hammer &nbsp; &nbsp; &nbsp; &nbsp;Stand: 18.11.2001<br>
</body>
</html>


Berücksichtige!

Bedenke
Quelle: Die eigene Homepage. DATA BECKER GmbH & Co. KG. 1997, ISBN 3-8158-1311-5.


Übungsblatt

Erkläre, was die folgenden HTML-Befehle machen:


Übungsblatt - Antwortschlüssel

Erkläre, was die folgenden HTML-Befehle machen:



Eine Homepage ins Internet stellen

Eine Homepage bei http://www.geocities.com/ einrichten bedeutet, das alles in Englisch steht. Wer mit der englischen Sprache nicht so vertraut ist, kann auch deutsche Anbieter wie http://www.tripod.de/ auswählen.

  1. In die Homepage ist unbedingt die eigene E-Mail einzutragen.
  2. Es ist darauf zu achten, dass alle Dateien mit kleinen Buchstaben geschrieben sind. Die Homepage muss index.html heißen.
  3. Sich bei geocities.com registrieren. Name und Nachname kann verwendet werden.
  4. Da die Homepage kostenlos ist, erscheint Werbung. Für diesen Zweck gibt man das Thema seiner Homepage an, zum Beispiel, Musik, etc.
  5. Die Dateien werden mit FTP vom PC ins Internet hochgeladen. Bei geocities.com können maximal 5 Dateien gleichzeitig hochgeladen werden.
  6. Dem Benutzer stehen 15 MB Speicher zur Verfügung. Es kann auch mehr beantragt werden gegen Gebühr.
  7. Man sollte sich seine Homepage – Addresse merken. Sie kann lauten: http://www.geocities.com/hammerpet2000/

Eine Homepage hat www eine E-Mail den @ Klammeraffen.


FTP - Programm

Es gibt auch Anbieter, die den File Transfer mit dem Ftp-Programm abwickeln. Um eine HTML-Datei ins Internet zu stellen, rufe das FTP Programm auf. Nachfolgend wird beispielsweise gezeigt, welche Einträge bei Nexgo erforderlich sind:

im Profile Name: nexgo auswählen
Host Name/Address: home.nexgo.de
Host Type:
Automatic detect
User ID: Benutzerkennung
Password: *********
Account:
Comment:
OK

Please enter a password for Benutzerkennung on site home.nexgo.de ******** OK

Connect
nun die gewünschte Datei auf dem eigenen PC Local System auswählen (linkes Fenster)
und im rechten Fenster das Zielverzeichnis auswählen,
dann kopieren
ASCII für Text
Binär für Grafiken oder andere Multimediadaten
Exit das FTP Programm verlassen


Literatur


Ralf Weisbecker und Cora Taeumel. Die eigene Homepage. Verlag DATA BECKER GmbH & Co. KG, Merowingerstr. 30, 40223 Düsseldorf, 1997, ISBN 3-8158-1311-5.

Intel Lehren für die Zukunft mit Unterstützung von Microsoft. Unterrichtspraxis Edition 1.0

Klemm Music Technology bietet Musiksoftware - Midiperipherie und Audio an. Für Schulen bieten sie Schulversionen an. http://www.klemm-music.de/

Es gibt bei der Zentrale für Unterrichtsmedien einen Internet Kurs. Siehe http://www.zum.de/

Das HTML Nachschlagewerk von Stefan Münz steht: http://selfhtml.teamone.de/

Das Programm Ulli Meybohm's HTML-Editor ist kostenlose Freeware und darf kopiert und weitergegeben werden. Ulli Meybohm's HTML-EDITOR Phase 5 (IE4) Release 21.01.2000 http://www.meybohm.de/

Englische Internet Seiten zum Thema HTML waren gut erklärt und interaktiv gestaltet.
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html/

http://dir.yahoo.com/Computers_and_Internet/Data_Formats/HTML/Guides_and_Tutorials/Beginner_s_HTML/

Hosted by www.Geocities.ws

1