HTML Die Internetsprache - Ein Anfängerkurs
Lektion 1 - Die Grundlagen

HTML ist die Abkürzung von Hyper Text Mark-up Language (Hypertext-Markierungs-Sprache) und ist der Code, in dem fast alle Webseiten geschrieben sind. Auch wenn er einen komplizierten Namen hat, ist der Code selbst eigentlich ganz einfach. Bevor du HTML lernen kannst, musst du etwas Wichtiges wissen.

Alle Befehle werden in dreieckigen Klammern geschrieben < >. Das nennt man 'Tags'. Wenn du etwas zwischen diese Klammern schreibst, bedeutet das, du möchtest einen Befehl beginnen. Wenn du einen Befehl beenden möchtest, musst du auch die Tags beenden. Um einen Tag zu beenden, schreibst du </befehl>. Das heisst, du fügst ein / nach dem ersten < hinzu. <b>Ein Wort</b> würde Ein Wort fett geschrieben auf deiner Seite anzeigen. Nachdem das Tag beendet wurde, wird der Rest nach 'Ein Wort' nicht mehr fett geschrieben.

Es gibt einige Ausnahmen für Tags, die nicht beendet werden müssen, doch dazu kommen wir später. Das Konzept der Tags ist bei HTML am schwersten zu verstehen. Wenn du erst verstanden hast, dass jeder Befehl zwischen < und > stehen muss, dann bist du schon auf dem besten Weg, Webseiten zu meistern.

Lektion 2 - Text einfügen

Der grösste Teil von Webseiten besteht aus Text. Wenn du schon einmal eine Tastatur bedient hast, dann weisst du, wie man Text in HTML eingibt. Um etwas in deine Webseite einzugeben, musst du einfach nur eintippen, was dort stehen soll. Tags brauchst du nur, wenn du etwas Spezielles mit dem Text anstellen möchtest.

Einige häufig verwendete Tags sind:

Schriftgrösse:
Du kannst auch die Grösse deiner Schrift ändern. In HTML reichen die Grössen von 1 (sehr klein) bis zu 7 (sehr groß). Um die Grösse deiner Schrift zu ändern, musst du Fogendes eingeben:

<font size="1">Gib hier deinen Text ein</font>

Du musst deinen Schrift Tag beenden, sonst erscheint der gesamte Text, der danach kommt, in dieser Grösse.

Das sind die verschiedenen Schriftgrössen, die du benutzen kannst:

• Textgrösse 1
• Textgrösse 2
• Textgrösse 3
• Textgrösse 4
• Textgrösse 5
• Textgrösse 6
• Textgrösse 7

Lektion 3 - Komplexerer Text

Wenn du mit den einfacheren Tags wie Fettschrift oder Unterstreichungen vertraut bist, kannst du dich anderen Dingen zuwenden, die deinen Text interessanter machen. Hier lernst du, wie du Gliederungspunkte hinzufügst, nummerierte Listen erstellst und eine horizontale Linie einfügst.

Gliederungspunkte:
Gliederungspunkte sind etwas komplizierter. In HTML nennt man Gliederungspunkte ungeordnete Listen oder kurz UL.
Um Gliederungspunkte zu beginnen, musst du <ul> eingeben.
Wenn du möchtest, dass jeder Gliederungspunkt in einer neuen Zeile erscheint, gibst du <li> davor ein.
Wenn du mit allen Gliederungspunkten fertig bist, gib Folgendes ein: </ul>

Der Code würde folgendermassen aussehen:

<ul>
<li>Gliederung 1
<li>Gliederung 2
<li>Gliederung 3
</ul>
 

Und so würde das Ganze tatsächlich auf deiner Website aussehen:

• Gliederung 1
• Gliederung 2
• Gliederung 3

Nummerierte Listen:
Beim Erstellen einer nummerierten Liste gilt dasselbe Prinzip wie beim Erstellen von Gliederungspunkten, nur benutzt du geordnete Liste <ol> anstelle von <ul>. Der Code für eine geordnete Liste würde so aussehen:

<ol>
<li>Punkt 1
<li>Punkt 2
<li>Punkt 3
</ol>

Und so würde das Ganze tatsächlich auf deiner Website aussehen:

1. Punkt 1
2. Punkt 2
3. Punkt 3

Lektion 3 - Komplexerer Text (Fortsetzung)
 

Horizontale Linien:
Wenn du eine Seite unterteilen möchtest, ist die horizontale Linie <hr> ein nützlicher Befehl. Die Standard-Linie geht über die ganze Seite und sieht so aus:

 

Wenn du eine Linie hinzufügen möchtest, um eine Seite zu unterteilen, gib einfach <hr> ein. Du kannst mehrere Details ändern, damit sie anders aussieht, zum Beispiel Breite, Höhe und den Schatten, den sie verwendet.

Die Breite kann entweder in Pixeln gemessen werden (eine Website ist normalerweise 600 Pixel breit) oder in dem du den Prozentsatz des Bildschirms eingibst, den sie beanspruchen soll. Um die Breite zu ändern, gibst du einfach <hr width="300"> oder <hr width="50%"> ein. Eine horizontale Linie, die 300 Pixel lang ist, sieht so aus:

Die Grösse gibt an, wie hoch die horizontale Linie ist. Das ändert man auf dieselbe Weise wie die Breite. Wenn du eine 10 Pixel hohe Linie haben möchtest, gibst du <hr size=10> ein. Sie würde so aussehen:

Horizontale Linien verwenden als Standard Schatten. Du kannst eine Linie ohne Schatten erstellen, indem du <hr noshade> eingibst. In dem Fall würde sie wie folgt aussehen.

Du kannst innerhalb eines Tags auch so viele Variablen wie möglich kombinieren. Wenn du eine 300 Pixel lange Linie erstellen möchtest, die 10 Pixel breit ist und keinen Schatten hat, müsstest du <hr noshade width="300" size="10"> eingeben. Die Linie würde dann so aussehen:

Es spielt keine Rolle, in welcher Reihenfolge die Variablen stehen, sie müssen sich nur alle im Tag befinden, d.h. zwischen < und > stehen.

Lektion 4 - Schriftfarben Du kannst die Farben deiner Schrift ganz leicht ändern. Bei den gebräuchlichsten Farben kannst du einfach den Namen benutzen (allerdings in Englisch), z.B. red (rot), black (schwarz), green (grün), blue (blau), gray (grau) oder white (weiss). HTML arbeitet mit der amerikanischen Schreibweise, wenn du also die Farbe von etwas ändern möchtest, musst du "color" schreiben. Wenn du die Farbe Grau möchtest, musst du "grey" (grau) eingeben. Möchtest du ein Wort rot schreiben, dann gibst du <font color="red"> Hier steht Text</font> ein, und das würde so aussehen: Hier steht Text.

Bei spezielleren Farben musst du möglicherweise einen Hexadezimal-Code eingeben. Das ist der einmalige Code, der jeder Farbschattierung zugeteilt wurde. Alle Farben bestehen aus einer Kombination aus 6 Zahlen und Buchstaben, die für den exakten Farbton stehen. Einige gebräuchliche Codes sind:
Hellrot = FF0000
Lila = CC00CC
Pink = FF66FF
Hellblau = CCCCFF
Limonengrün = 99FF99

Um den Hexadezimalcode zu nutzen, gib einfach Folgendes ein: <font color="FF66FF">Hier steht Text</font>. Das würde den Text pink machen, so wie hier: Hier steht Text.

Wenn du Schriftfarbe und -grösse ändern möchtest, kannst du das innerhalb desselben Tags machen, z.B.:

<font size="1" color="red">Hier Text eingeben</font>
Das würde den Text klein und rot machen, etwa so: Hier Text eingeben.

Hintergrundfarbe
Wenn du deine Seite interessanter gestalten möchtest, kannst du den Hintergrund der Seite ändern. Bei der Hintergrundfarbe funktioniert das praktisch genau so wie bei der Schriftfarbe, nur ist die ganze Seite davon betroffen. Normalerweise ist der Hintergrund weiss (FFFFFF) oder schwarz (000000), aber du kannst jede Farbe verwenden, die du möchtest. Um deine Hintergrundfarbe zu ändern, gib einfach Folgendes oben auf deiner Seite ein:

<body bgcolor="#FFFFFF"> oder <body bgcolor="white">

Du musst diesen Tag nicht beenden, da er die ganze Website betrifft, aber es kann nicht schaden, </body> ans Ende der Website zu schreiben, damit alles ordentlich ist.

Hintergrundfarbe in Geschäften
In deinem Geschäft musst du etwas anders vorgehen, wenn du die Hintergrundfarbe ändern möchtest. Du hast zwei Möglichkeiten. Die erste Methode besteht darin, ein Hintergrundbild zu verwenden. Gib

am Anfang der Beschreibung deines Geschäfts ein, damit dieses Bild gekachelt (d.h. wiederholt) als Hintergrund deines Geschäfts erscheint. Einige Neopets-Hintergrundbilder, die du verwenden kannst, bekommst du hier. Alternativ musst du, wenn du eine solide Farbe oder nur in bestimmten Bereichen einen farbigen Hintergrund haben möchtest, eine Tabelle benutzen. Die einfachste Tabelle wäre, wenn du Folgendes als Beschreibung deines Geschäfts eingeben würdest:

<table background="http://images.neopets.com/backgrounds/tm_chombybk.gif">
oder
<table bgcolor="red">
gefolgt von
<tr><td>
Gib hier wie gwöhnlich deinen Text ein und beende die Tabelle dann, indem du die beiden nachfolgenden Zeilen eingibst.
</td></tr>
</table>

Vergiss nicht, die beiden letzten Zeilen einzugeben, sonst ist deine Tabelle defekt. Nun solltest du imstande sein, dein Geschäft mit einer Hintergrundfarbe oder einem Bild zu versehen. Wenn du die Tabelle in der Mitte deiner Website platzieren möchtest, musst du einfach nur die Worte align=center nach <table hinzufügen, zum Beispiel <table align="center" bgcolor="red">.

Lektion 5 - Bilder hinzufügen
Bilder können eine Website verbessern und sind ein guter Weg, um anderen deine Meisterwerke zu zeigen. Wenn du ein Bild erstellt hast, das du auf deiner Website benutzen möchtest, musst du es irgendwo im Internet speichern. Sobald du weisst, wo dein Bild gespeichert wurde, ist es ganz leicht, es zu deiner Website hinzuzufügen. Du kannst ein Bild verwenden, das sich schon auf der Neopets-Website befindet, oder ein Bild, das anderswo im Internet gespeichert ist.

Sobald du weißt, wo deine Bilder gespeichert wurden, bist du bereit, den Code zu schreiben. Der Code, um ein Bild einzufügen, besteht aus drei Dingen:

1. <img src = " (Dieser Befehl sagt dem Computer, dass er nach einem Bild suchen muss.)
2. http://www.neopets.com/meinbild.gif (Das sagt dem Computer, wo er dein Bild findet.)
3. "> Schliesst den Tag ab.

Das Bild Tag ist insofern eine Ausnahme, als du es nicht beenden musst. Mehr musst du nicht eingeben, um ein Bild anzeigen zu lassen. Wenn du deine Website nun betrachtest, solltest du dein Bild sehen.

Du kannst noch einiges in den Code einfügen, damit dein Bild noch besser aussieht, darunter auch den Tag für einen Rahmen. Damit kannst du auch bestimmen, wie breit der Rahmen um dein Bild sein soll. Einige einfache Rahmen sind:
 

• Border="0" - kein Rahmen
• Border="1" - dünner Rahmen
• Border="2" - breiterer Rahmen

Wie du dein Bild auf deiner Seite genau arrangierst und wie du Hintergrundbilder hinzufügst, erfährst du in der nächsten Lektion ...
 

Positionierung des Bilds: Du kannst auch ändern, wo dein Bild auf der Seite positioniert werden soll. Am häufigsten werden links, rechts und zentriert benutzt. Wenn ein Bild zentriert angezeigt werden soll, gib Folgendes vor dem Bild Tag ein: <div align="center">

Alles, was du danach eingibst, wird zentriert dargestellt. Nun musst du also deine Bild Tags eingeben. Wenn du mit deinem Bild Tag fertig bist und nicht mehr alles zentriert angezeigt werden soll, gib einfach dieses Tag ein:
</div>

 

Wenn etwas linksbündig oder rechtsbündig dargestellt werden soll, dann benutzt du denselben Code, ersetzt aber das Wort "center" (Mitte)durch "left" (links) oder "right" (rechts).

Hintergrundbilder:
Du kannst auch ein Bild als Hintergrund einfügen, statt nur eine einzige Farbe zu benutzen. Bei hellen, einfachen Bildern funktioniert das sehr gut. Es belebt die Seite, aber du kannst den Text trotzdem deutlich lesen. Wenn du ein Bild als Hintergrund haben möchtest, musst du Folgendes eingeben:
<body background="http://www.neopets.com/meinbild.gif">

Nun wird das Bild als Hintergrund angezeigt.
 

Lektion 6 - Links

Du kannst alles auf der Website in einen Link zu einer anderen Seite o.ä. verwandeln. Wenn dein Lieblingsspiel bei Neopets Würfeln-mit-Roo ist, kannst du einen Text- oder Bild-Link zur Würfeln-mit-Roo-Seite anlegen. Du weisst ja schon, wie du Bilder oder Text in deine Website einfügen kannst, diese in einen Link zu verwandeln, ist ganz einfach. Als Erstes brauchst du eine URL, zu der der Link führen soll, in diesem Fall habe ich die Neopets-URL verwendet. Ich wollte, dass der Text klick hier ein Link zu www.neopets.com wird, daher habe ich Folgendes geschrieben:

Auf der Website wird nur der Text klick hier angezeigt. Darauf kann man nun klicken. Wenn du mit der Maus darauf klickst, wirst du zur Neopets-URL gebracht. Du kannst Farbe und Grösse des Texts ändern, ihn fett oder kursiv machen, was auch immer du möchtest, aber du musst die Tags auf beiden Seiten des Texts beginnen und beenden. Damit der Link z.B. fett geschrieben erscheint, würde ich ihn wie folgt schreiben:

Damit ein Bild anklickbar wird, geht man fast gleich vor, nur wird statt Text einzugeben ein Bild Tag verwendet, z.B.:
<a href="http://www.neopets.com">
<img src="http://www.neopets.com/meinbild.gif"></a>

Dabei wird automatisch ein dünner Rahmen um dein Bild gezogen. Damit der Rahmen dicker oder ganz entfernt wird, musst du den Rahmen Tag verwenden (siehe Lektion 5 - Bilder einfügen). Mit diesem Tag kannst du bestimmen, welche Art von Rahmen um dein Bild herum angezeigt werden soll.

Einige einfache Rahmen sind:
 

• Border="0" - kein Rahmen
• Border="1" - dünner Rahmen
• Border="2" - dicker Rahmen

Lektion 7 - Deine E-Mail-Adresse und deinen Benutzernamen hinzufügen

Wenn du eine eigene E-Mail-Adresse hast, möchtest du vielleicht, dass andere Leute dir schreiben können. Das kannst du erreichen, wenn du deine E-Mail-Adresse auf deiner Webseite veröffentlichst.

***Vorsicht*** - Wenn du deine E-Mail-Adresse auf deiner Website veröffentlichst, bedeutet das, dass wirklich jeder sich per E-Mail an dich wenden kann. Du solltest das nur machen, wenn du ganz sicher bist, dass du es auch möchtest. Wenn du 13 Jahre alt oder jünger bist, frag bitte vorher deine Eltern, ob das okay ist.

Damit wird der Text info@neopets.com angezeigt und wenn du darauf klickst, wird eine leere E-Mail geöffnet, die an info@neopets.com adressiert ist. (Genau so: info@neopets.com) Vielleicht möchtest du die Schriftgrösse ändern, die Schrift fett machen oder die Farbe ändern. Dazu musst du nur den entsprechenden Tag auf beiden Seiten des Link-Texts einfügen.

Lektion 9 - Banner hinzufügen

Die Leute fügen ihren Websites Banner aus den unterschiedlichsten Gründen hinzu. Man kann damit prima Werbung für die Seite eines Freundes machen, man kann seine eigene Website verschönern.

<a href='http://www.neopets.com/refer.phtml?username=donna'>
<img src='http://images.neopets.com/creatives/paradise_468x60_de.gif'></a>

Kopier diesen Code einfach (markier den Text und drück STRG-C) und füg ihn in deine Webseite ein.

Lektion 10 - Tabellen

Tabellen sind prima geeignet, eine Seite zu unterteilen und das Aussehen deiner Seite zu organisieren. Eine Tabelle ist im Wesentlichen ein Gitter, das aus Spalten und Reihen besteht. Jedes kleine Kästchen nennt man eine Zelle (cell). Dein Text, deine Bilder usw. stehen in diesen kleinen Zellen.

<table>
<tr> - Tabellenreihe beginnen.
<td> - Tabellen-Datenzelle beginnen.
Gib hier dein Bild oder deinen Text ein.
</td>
<td> - Die zweite Tabellen-Datenzelle beginnen.
Gib hier dein Bild oder deinen Text ein.
</td>
</tr>
</table>
 

Das Ergebnis wird so aussehen:

Du kannst beliebig viele Tabellenreihen und Datenzellen haben, du darfst nur nicht vergessen, jeden Tag zu beenden. Unbedingt merken musst du dir, stets mit einem <tr> zu beginnen. Wenn du weitere <tr>s hinzufügst, fügst du damit weitere Reihen hinzu, und wenn du weitere <td>s hinzufügst, werden weitere Zellen erstellt. Wenn du eine weitere Zelle oder Reihe hinzufügen möchtest, musst du darauf achten, dass du die vorherige beendest, bevor du eine neue beginnst.
 

Lektion 10 - Tabellen (Fortsetzung)

Das Aussehen deiner Tabelle ändern
Du kannst das Aussehen deiner Tabelle ändern, indem du jeder Zelle eine andere Farbe gibst oder die Grösse und die Farbe der Rahmen änderst.

Wenn du nur <table> eingibst, dann hat die Tabelle standardmässig keinen Rahmen. Wenn deine Tabelle auffallen soll, kannst du ihr einen Rahmen geben, indem du <table border="1"> eingibst. Damit erscheint ein dünner Rahmen um deine Tabelle, so wie unten:

Um die Farbe deines Rahmens zu ändern, benutzt du einen ähnlichen Code wie beim Ändern der Hintergrundfarbe. Gib einfach <table border="1" bordercolor="red"> ein, um eine Tabelle mit einem dünnen roten Rand zu erstellen. Sie wird ungefähr so aussehen:

Die Farbe der Tabelle ändern
Die Farbe einer Tabelle kann man ganz einfach ändern. Wenn du eine Tabelle anfängst, musst du nur bestimmen, welche Farbe deine Tabelle haben soll. In diesem Fall möchte ich eine hellblaue (CCCCFF) Tabelle. Gib dazu einfach nur Folgendes ein: <table border="1" bgcolor="CCCCFF">

 

Lektion 10 - Tabellen (Fortsetzung)
Als Letztes musst du über Tabellen wissen, wie du ihre Grösse änderst. Wenn du keine Höhe oder Breite eingibst, versucht die Tabelle, sich deinem Text oder deinen Bildern automatisch anzupassen, aber das sieht möglicherweise nicht so aus, wie du es haben möchtest. Um die Breite der gesamten Tabelle festzulegen, musst du nur eingeben, wie viele Pixel oder welchen Prozentsatz des Bildschirms sie umfassen soll. Eine durchschnittliche Webseite ist ungefähr 600 Pixel breit. Welche Grösse du festlegst, liegt ganz allein bei dir. Du musst nur width="dein wert" eingeben, wenn du deine Tabelle beginnst. Z.B.:

<table width="600"> oder <table width="70%">

Dann gibst du den Rest deiner Tabelle ganz normal ein. Bei der Höhe funktioniert das genauso wie bei der Breite, aber diese Funktion wird normalerweise nicht benutzt. Um die Höhe festzusetzen, gibst du einfach height="dein Wert" ein. Du kannst die Breite und die Höhe gleichzeitig festlegen, wenn du Folgendes eingibst:

<table width="600" height="400"> oder <table width="70%" height="50%">

 

Musik hinzufügen

Es gibt nur eine Möglichkeit, Musik hinzuzufügen. Wenn der Benutzer Internet Explorer benutzst, kann deine Musik im Hintergrund spielen, wenn die Seite geladen wird.

Zuerst musst du dein Musik-File irgendwo im Internet abspeichern. Ersetze einfach den Text "http://images.neopets.com/help/beep.wav" durch die URL deines Musik-Files.

Du kannst src Dateien mit den folgenden Erweiterungen einbauen:

Lektion 12 - Ein Bild erstellen

Wenn du kein Logo oder Banner findest, das dir gefällt, oder du einfach ein einzigartiges Design haben möchtest, kannst du ganz einfach eigene erstellen. Dieselben Anweisungen gelten für deinen eigenen Beitrag zum Schönheitswettbewerb, für dein Bild für die Kunstgalerie oder für jedes andere Bild. Wenn du einen Computer mit Windows benutzt, dann hast du bereits ein Mal-Programm, das Paint heisst, installiert. Du kannst es öffnen, indem du auf den Start-Button klickst und dann zu --> Programme --> Zubehör --> Paint gehst. Mit Paint hast du nicht die Möglichkeiten, die dir ein Programm wie der "Adobe Photoshop" bietet, aber es ist einfach zu benutzen und bei den meisten Computern mitgeliefert.

Die Grösse deines Bilds wählen
Paint startet automatisch mit einem RIESIGEN Arbeitsbereich, du solltest die Grösse der Malfläche ändern, je nachdem, was du erstellen möchtest. Um die Grösse der Malfläche zu ändern, klick auf BILD und dann auf ATTRIBUTE. Nun geht ein Fenster auf. Gib die Grösse ein, die die Malfläche haben soll. Es folgen einige Beispiele für Grössen. Es ist VIEL einfacher, wenn du die Grösse deines Bild festlegst, bevor du anfängst zu malen, also überleg es dir gut.

• Gilden Logos - 100 mal 100 Pixel
• Banner - 120 mal 60 Pixel oder 468 mal 60 Pixel
• Schönheitswettbewerb-Einträge - 150 mal 150 Pixel
• Kunstgalerie-Einträge - 400 mal 400 Pixel

Speichern
Speicher dein Bild regelmässig. Es gibt nichts Schlimmeres, als versehentlich auf den Stromschalter zu drücken und deine ganze Arbeit zu verlieren, nachdem du 2 Stunden an dem Bild gesessen hast. Um zu speichern, klickst du auf 'DATEI', dann auf 'SPEICHERN', gibst einen Dateinamen für dein Bild ein und klickst erneut auf 'SPEICHERN'.