Wie wäre es, wenn ich euch zeige, wie man eine Webseite in 5 Minuten macht?
Klasse? -
Ok...es ist ganz einfach, und wir brauchen auch nicht viel dazu.
Zunächst müssen wir ein wenig über die
"Sprache" wissen, in der eine Seite für´s Internet geschrieben wird. Das
ist nicht einfach Deutsch, wie in unserem Schulheft, sondern eine
Programmiersprache. Sie heisst HTML und hat etwas besonderes: unser
Computer macht aus Zeichen und Schriften eine manchmal bunte, grafische
Seite.
Eine solche Seite besteht aus zwei Teilen: einem "unsichtbaren" und einem
"sichtbaren" Teil.
Für den Anfang reicht es aus, wenn wir uns im
sichtbaren Bereich aufhalten.
Und nun brauchen wir unser Zubehör: zwei
Bilder aus dem Internet. Das sind besondere Bilder, ja eigentlich Dateien,
die Namen haben wie: Bild.gif oder Bild.jpg.
Jetzt kann es losgehen: Du startest einen
Editor. Der heisst bei Windows z.B. Notepad. Hier geben wir ein paar
Befehle ein.
<html>
<head>
</head>
<body>
</body>
</html>
Jetzt speicherst du die Seite unter dem Namen
homepage.html ab.
Wenn du nun diese Datei auf deiner Festplatte aufrufst, erscheint eine
weisse Internetseite. Aber es ist nichts drauf...einfach weiss. Wir haben ja
auch nichts an Inhalten eingegeben, sondern nur die Seite erstellt.
Im Text bedeutet <head> unsichtbar und <body>
sichtbar. Ich merke mir das immer so:
Head ist englisch und bedeutet "Kopf". Body ist auch englisch und heisst "Körper".
Wenn ich
meinen Kopf voller Gedanken habe, sieht man es nicht, wenn ich aber mit
meinen Freunden bei McDöner gut gegessen habe, dann sieht man es schon am
Bäuchlein ;)
Jeder Befehl steht zweifach in der Seite. Anfang und Ende des Bereiches sind
so gekennzeichnet. Da wir etwas sehen wollen, müssen wir also etwas zwischen die beiden
Befehle:
<body> und </body>
schreiben.
Das tun wir auch. Wir tippen mal einen Satz:
<html>
<head>
</head>
<body>
"Das ist meine erste Homepage"
</body>
</html>
Speichern ab und rufen die Seite neu auf.
Nun können wir auf der Seite den von uns eingegebenen Text lesen. Nicht
besonders tolle Schrift, aber lesbar ;)
"Das ist meine erste Homepage"
Du bist noch da? - Prima..
Ja, du hast Recht. Das Ergebnis sieht nicht besonders toll aus. Aber für´s erste Mal war es schon ok. Du weisst ja nun schon, wie es funktioniert. Also kümmern wir uns jetzt einmal um eine schönere Schrift. Logisch, das dazu wieder ein paar HTML-Befehle nötig sind.
<font></font> damit beginnt und endet die Befehlszeile, in der Schrift stehen soll.
face das ist englisch und bedeutet
Gesicht. Damit wird die Schriftart, also das Aussehen eingestellt.
color ist auch englisch und bedeutet: Farbe
(logo !)
size noch einmal englisch (die spinnen
die Briten?) und bedeutet: Grösse der Schrift.
<b></b> das kommt auch aus
dem Englischen: big bedeutet dick oder gross
Und das war schon unser
"Werkzeug" für dieses Mal.
Wir öffnen wieder unsere Seite mit Notepad, und schreiben vor den Satz, den wir vorhin schon getippt haben, folgende Zeile:
<font face="arial" size="5"
color="#0000ff"> "Das ist meine erste Homepage"</font>
(Am Schluß den Schrift-Ende-Befehl nicht
vergessen!).
"Das ist meine erste Homepage"
Nach dem Abspeichern erkennst du gleich, das die Schrift schöner
und grösser..aber auch blau geworden ist. Wenn dir der Text noch etwas
dünn vorkommt, bedienen wir uns des big-Befehls und das sieht dann so aus:
<font face="arial" size="5"
color="#0000ff"><b>"Das ist meine erste
Homepage"</b></font>
So sieht es dann aus, wenn du die Seite
aufrufst:
"Das ist meine erste
Homepage"
Nun ist die Schrift gross, fett und blau ;)
Du kannst jetzt ausprobieren, welche
Schriftart dir am Besten gefällt. Welche Schriftarten auf deinem Rechner
installiert sind, sagen dir besser deine Eltern ;) Wenn du andere Farben haben möchtest, kannst du rechnen.....ähm..lieber nicht? - Ok. Es gibt auch Tabellen oder sogenannte "Colorpicker", die jede
Farbe als Code darstellen können. Einen solchen findest du z.B.
>> hier <<
Nun noch ein Befehl zum Schluss:
<u></u>
bedeutet: unterstrichen. Er wird genau so wie der Fett-Befehl eingetragen. Nun ist
die Schrift fertig ;-)
Das war bisher einfach. Doch nun sollen auch Bilder auf die Seite. Dazu brauchen wir wieder einen Befehl: Wir tippen
<img src=Bild.gif> unter die
Schrift. Speichern ab und rufen die Seite auf.
"Das ist
meine erste Homepage"
Nun sehen wir Schrift und ein Bild auf unserer
ersten Homepage... toll, nicht wahr? Achtung: Das Bild muss sich auf der Festplatte im gleichen Ordner wie deine Homepage befinden !
Na?..bist du neugierig, wie es weiter geht,
oder gefällt dir deine Homepage noch nicht?
Ja, es stimmt. Die Schrift ist ja ganz schön
geworden...aber irgendwie sehen die Webseiten im Netz anders aus...ein
wenig bunter.
Der Hintergrund fehlt...und das zeige ich dir
jetzt !
Es gibt zwei Möglichkeiten, den Hintergrund
einzufärben:
bgcolor hier wird wie bei der Schrift ein Farbcode
benutzt
background man arbeitet mit einem
Hintergrund-Bild
Wir fangen mit der ersten Möglichkeit an, weil
wir den Code schon von der Schrifteinstellung kennen. Nun unsere Seite wieder mit Notepad öffnen und
einen winzigen Befehl eingeben:
<body bgcolor="#ff0000"> Nun
abspeichern und die Seite aufrufen....der Hintergrund ist rot geworden
und man sieht die blaue Schrift sehr gut darauf. ;)
"Das ist meine erste
Homepage"
Auch hier kannst du über einen Colorpicker
jede Farbe einstellen.
Bei Hintergrundbildern ist es ebenso einfach.
Du erinnerst dich noch? Bilder für´s Internet heissen z.B. Bild.gif oder
Bild.jpg. Dann sieht die Zeile so aus:
<body background="Bild.jpg">
Das könnte dann so aussehen:
"Das ist meine erste
Homepage"
Ich wünsche euch viel Spass beim Ausprobieren....bis bald ;)
Euer Bongo ;)
