Vorwort

Willkommen in der großen Welt des Internets!

Auch so hätte man dieses Buch nennen können, da du hier alles erfahren wirst, um selber im Internet aufzutreten. Du wirst erfahren, wie du deine ganz persönliche Webseite erstellst, diese mit Bildern und Musik füllst und vieles, vieles mehr ...

Doch warum nun HTML? Nun ja, so nennt sich die Sprache, mit der man die Webseiten erstellt. Man könnte sich zwar vor den Computer setzen und ihm sagen: »Erstelle mir eine Webseite«, doch dies würde leider nicht klappen. Nein, noch müssen wir dazu selber Hand anlegen. Wenn du aber erst einmal ein paar Seiten gelesen hast, wirst du sehen, dass all dies wesentlich einfacher ist, als du dir jemals hättest träumen lassen.

Bereits am Ende des dritten Kapitels, Die erste Webseite, wirst du in der Lage sein, eine vollständige Webseite zu erstellen. In jedem weiteren Kapitel wirst du aufregende und faszinierende neue Tricks lernen, mit denen du deine Besucher verblüffen wirst.

Das Tolle an HTML ist jedoch auch, dass du keine teuren Programme benötigst, um es benutzen zu können. Alles, was du brauchst, ist bereits auf deinem Computer. Natürlich gibt es auch etwas komfortablere Programme – aber auch die bekommst du – über die Downloaddatei unter www.mitp.de/8699!

Also los, eine ganz neue Welt liegt vor dir und will entdeckt werden!

Einleitung

So, du bist da, das Buch ist da und der Computer ist auch in der Nähe? Dann hast du jetzt alles, was du benötigst, um die große Welt des HTML zu entdecken!

Dieses Buch ist anders als die meisten, die du kennst. Bei vielen anderen Computerbüchern kommt zuerst die Theorie, und dann die Praxis. In diesem Buch ist es genau umgekehrt: Erst wirst du ein Beispiel zu sehen bekommen, und dann erfährst du, was wir da eigentlich gemacht haben. Wer weiß, vielleicht wirst du das bei der einen oder anderen Stelle bereits erahnen! Auf diese Weise prägst du es dir auf jeden Fall besser ein und kannst die Beschreibung besser verstehen. Und ehe du dich versiehst, hast du dieses Buch in Rekordzeit durchgelesen – du wirst schon sehen!

Damit du auch weißt, was die ganzen Symbole am Rand bedeuten und warum einige Textstellen hervorgehoben sind, findest du nun einige kleine Erklärungen, bevor es dann wirklich mit HTML losgeht.

Arbeitsschritte

>     Wenn du dieses Zeichen siehst, heißt das: Ärmel hoch, es gibt etwas zu tun.

Wichtige Stellen im Buch

Buffi-Infokästen

Aufgaben

Huch, muss es die geben? Keine Sorge, wenn du ein Kapitel durchgelesen hast, wirst du alles wissen. Die abschließenden Aufgaben dienen vor allem der praktischen Erfahrung. Es ist nun mal so, dass man alles über Murmeln wissen kann, aber nur dann ein guter Murmelspieler wird, wenn man mit ihnen auch spielt. Bei uns ist die Sache genauso. Wenn du HTML anwenden willst, musst du auch irgendwann damit anfangen. Die Übungen sind dafür ideal. Natürlich kannst du dir auch jederzeit nach einem interessanten Abschnitt alleine eine Aufgabe ausdenken.

Wohin mit den Übungen?

Damit du auch einen Ort hast, an dem du deine Übungen abspeichern kannst, sollten wir einen Extra-Ordner HTML-Ordner anlegen. Wenn du nicht weißt, wie das geht, ist das nicht schlimm – machen wir es doch gleich zusammen!

Zuerst muss natürlich der Computer gestartet werden. Sobald der Computer einsatzbereit ist, kann es losgehen. Je nachdem ob du einen Rechner mit Windows Vista oder Windows XP verwendest, gibt es verschiedene Herangehensweisen.

HTML-Ordner erstellen mit Windows 7 & Vista

Ein typischer Desktop in Windows 7 & Vista

_>      Klicke auf deinem Desktop an eine beliebige freie Stelle mit der rechten Maustaste. Es sollte ein Menü erscheinen.

Das Menü nach dem Rechtsklick im Desktop

_>      Wähle in diesem Menü zuerst den Punkt Neu und dann Ordner. Das Menü sollte nun verschwinden und ein neuer Ordner sollte auf deinem Desktop erscheinen.

Der neue Ordner wird umbenannt

_>      Der neue Ordner liegt nun auf deinem Desktop. Der aktuelle Name Neuer Ordner klingt jedoch nicht wirklich toll, so dass wir diesen ändern sollten. Sofern du noch nichts gemacht hast, kannst du über die Tastatur direkt einen schönen Namen wie z. B. HTML-Ordner eingeben und dies durch die Taste [Enter] oder einen Linksklick auf deinen Desktop bestätigen. Hast du hingegen bereits vor der Umbenennung woanders hingeklickt, kannst du den Ordner mit der rechten Maustaste anklicken und den Menüpunkt Umbenennen wählen um den Namen zu ändern.

_>           Zum Schluss kannst du, wenn du magst, den Ordner auf deinem Desktop an eine für dich schöne Stelle verschieben. Klicke den Ordner dafür mit der linken Maustaste an und bewege ihn bei gedrückter Maustaste an den gewünschten Ort. Sobald der Ordner an einem schönen Ort angekommen ist, kannst du die Maustaste loslassen.

HTML-Ordner erstellen mit Windows XP

_>        Klicke mit der rechten Maustaste auf den Start-Button unten links. In dem nun erscheinenden Auswahlmenü kann man nun direkt Windows-Explorer auswählen.

Öffnen des Windows-Explorers

_>        Nun öffnet sich der Windows-Explorer in einem neuen Fenster. Wie du siehst, besteht er aus drei Teilen: dem Menü oben, einem linken und einem rechten Fenster.

Der Explorer

>     Gehe nun mit dem Mauszeiger auf den Ordner Eigene Dateien und klicke dann einmal mit der linken Maustaste darauf.

Das rechte Fenster des Explorers verändert sich und wird in etwa so wie im vorherigen Bild aussehen. Wenn du bereits Dateien in diesem Ordner hast, werden diese auf der rechten Seite angezeigt.

>     Gehe nun mit der Maus nach oben auf den Menüpunkt Datei und klicke ihn mit der linken Maustaste an. Wähle nun aus dem neuen Menü den Punkt Neu. Sobald sich der Mauszeiger über dem Punkt Neu befindet, öffnet sich noch ein neues Menü.

>     Gehe mit dem Mauszeiger auf Ordner und klicke ein letztes Mal mit der linken Maustaste darauf. Das Ganze sieht in etwa so aus:

Neue Ordner erstellen

Wenn du noch einmal in die rechte Hälfte des Windows-Explorers schaust, wirst du feststellen, dass sich dort nun ein neuer Ordner befindet.

Der Name des Ordners lautet Neuer Ordner – das ist nicht sehr originell, oder? Dann wollen wir einmal dafür sorgen, dass der Ordner einen schöneren Namen bekommt. Wie wäre es mit HTML-Ordner? Das klingt doch besser, oder? Also los.

>     Gehe dazu mit der Maus auf den Ordner mit dem Namen Neuer Ordner auf der rechten Seite des Bildschirms. Klicke diesmal mit der rechten Maustaste und wähle aus dem neuen Menü den Punkt Umbenennen. Bei dir auf dem Computer sehen diese Schritte so aus:

Umbenennen von Ordnern

>     Jetzt ist der Text Neuer Ordner blau hervorgehoben, eingerahmt und blinkt ein bisschen. Das bedeutet, dass wir ihn überschreiben können. Tippe also nun direkt den Namen ein: HTML-Ordner.

>     Wenn du das getippt hast, drücke auf (Enter) oder klicke einmal mit der linken Maustaste irgendwo auf den Bildschirm. Nun sollte der Name des vorhin unbenannten Ordners HTML-Ordner lauten. Prima, nun sind wir bereit!

Unser HTML-Ordner!

Kapitel 1: HTML – Mehr als nur ein paar Buchstaben

Bevor wir mit dem Erstellen unserer ersten Webseite anfangen, solltest du wissen, was HTML überhaupt ist und wie es bearbeitet und angezeigt wird. All dies und einiges mehr erfährst du auf den folgenden Seiten.

• Was ist HTML?
• Was ist ein Browser?
• Habe ich alles, was ich für HTML brauche?

Was ist HTML?

HTML steht für die englischen Wörter Hypertext Markup Language und stellt die wichtigste textbasierte Auszeichnungssprache im Internet dar. Mit Hilfe von HTML können jedoch nicht nur Texte, sondern auch Bilder für das Internet aufbereitet werden. Diese HTML-Seiten, auch Webseiten genannt, werden dann millionenfach über Browser für Internet-Surfer sichtbar gemacht.

HTML ist eine sehr junge Auszeichnungssprache, die 1993 durch den damals aktuellen Mosaic Browser bekannt wurde. Nun ja, eigentlich wurde das Internet an sich populär und damit auch HTML. Zu Beginn war HTML auch nicht standardisiert – viele weit entfernt voneinander lebende Programmierer entwickelten ihr eigenes HTML, bis 1995 die erste standardisierte Version auftauchte: HTML 2.0. 1997 setzten sich die Browser-Hersteller und das neue World-Wide-Web-Konsortium zusammen und entwickelten HTML 3.2, das im Vergleich zu HTML 2.0 viele Neuerungen enthielt. HTML ist seit dieser Zeit das Mittel, mit dem jeder seine eigene Webseite erstellen kann, die dann von Browsern wie dem Microsoft Internet Explorer oder Mozilla Firefox erkannt und angezeigt werden kann.

Eine typische Webseite

Bei HTML handelt es sich um die Dokumentensprache des Internets. Da das vorrangige Ziel ursprünglich die Festlegung der Struktur des optischen Erscheinungsbildes war, konnten alle Rechner, egal mit welchem Betriebssystem, HTML verarbeiten. Zu Beginn von HTML handelte es sich beinahe nur um eine verbesserte Schreibweise für Texte (HyperText). Mit den später folgenden HTML-Versionen kamen jedoch Neuerungen und Änderungen hinzu, die es immer komplexer machten. Mit HTML 4.01 kam dann das Ende der klassischen HTML-Sprache. So sah es zumindest aus. Seit über zehn Jahren wird von einem Nachfolger geredet, aber bisher gibt es keinen.

Offizieller Nachfolger von HTML sollte eigentlich XHTML werden. Da dieser jedoch nur bedingt von der Webgemeinde akzeptiert wurde und sich bis heute nicht wirklich durchsetzte, arbeiten nun zwei unterschiedliche Organisationen an neuen Konzepten. Ein lange geplanter Nachfolger sollte ein komplett neues XHTML 2.0 werden, das sich von seinen HTML-Wurzeln größtenteils verabschiedet. Da die Entwicklung jedoch nicht voranschritt, wird seit 2006 auch an HTML 5 gearbeitet. Inzwischen ist klar, die Arbeit an XHTML 2.0 wurde eingestellt, es wird ein HTML 5 geben. Sicher ist, dass es noch ein paar Jahre dauern dürfte, bis der Nachfolger veröffentlicht wird, und noch einige Jahre mehr, bis er sich durchgesetzt hat.

In diesem Buch werden wir uns vor allem mit HTML 4.01 befassen, wobei du natürlich auch das Wichtigste über XHTML erfahren wirst und sogar schon einen Ausblick auf HTML 5 erhältst. Du erfährst außerdem, wie du dafür sorgen kannst, dass deine Webseite auch von zukünftigen Browsern erkannt werden kann.

Browser im Wandel der Zeit

Wenn du schon einmal etwas von HTML gehört hast, kennst du bestimmt auch den Begriff Browser. Ein Browser ist ein Programm, das den HTML-Code für den Bildschirm umwandelt und ihn anzeigt. Damit ein Browser jedoch weiß, was er umwandeln soll, gibst du einen Dateinamen in die große weiße Zeile (die Eingabezeile) am oberen Bildschirmrand ein. Anschließend lädt der Browser diese Datei und verarbeitet sie.

Es gibt viele verschiedene Browser, wobei nur wenige sich wirklich durchgesetzt haben. Die beiden momentan bekanntesten Browser sind Mozilla Firefox und der Microsoft Internet Explorer. Der Internet Explorer war jedoch nicht immer so weit verbreitet. Zu den Anfangszeiten galt der Netscape Navigator als unangefochtener Marktführer. Da er jedoch irgendwann einfach nicht mehr weiterentwickelt und der Internet Explorer von Microsoft aggressiv auf den Markt gebracht wurde, verschwand er fast komplett vom Markt. Heute führt der Netscape Navigator jedenfalls nur noch ein Nischendasein unter vielen anderen Browsern.

Als Microsoft 2003 sah, dass der Internet Explorer mit rund 90% Marktanteil eine enorme Marktdominanz besaß, beging man den Fehler, die Arbeiten an neuen Versionen zu verlangsamen. Microsoft entließ zeitweise sogar Großteile des Entwicklerteams. In der Öffentlichkeit wurde der Internet Explorer vor allem wegen seiner Sicherheitslücken berüchtigt. Da er jedoch so verbreitet war, mussten Webautoren ihre Webseiten teilweise sogar dem Internet Explorer anpassen, auch wenn er einige Bereiche von HTML falsch definierte.

Doch vor einiger Zeit begann sich etwas zu ändern. Nachdem der Code des alten Netscape Navigators veröffentlicht wurde, machten sich viele Programmierer in ihrer Freizeit an die Arbeit und erschufen einen neuen Browser, der besser werden sollte als der Internet Explorer. Da der neue Browser teilweise auf dem alten Netscape-Browser basierte, nannte man ihn zuerst Phönix. Der Phönix konnte jedoch nicht so leicht aus der Asche aufsteigen, wie man es vermutet hätte. Bedingt durch rechtliche Schwierigkeiten waren mehrere Umbenennungen notwendig, bis der Phönix schließlich seinen heutigen Namen erhielt: Firefox!

Seit seinem Erscheinen Ende 2004 konnte der Mozilla Firefox seine Marktanteile massiv ausbauen und wurde zum größten Konkurrenten für den Internet Explorer. Vor allem jüngere Internet-Fans bevorzugten 2006 den Firefox, was dazu führte, dass Microsoft in Deutschland und vielen anderen Ländern nur noch geringfügig weiter verbreitet ist als die Konkurrenz. Die Konkurrenz besteht zwar nicht nur aus dem Mozilla Firefox, sondern auch aus Opera, Konqueror, Safari, Chrome und anderen Browsern, doch kein Browser wurde von der Webgemeinde bisher so offen aufgenommen wie der Firefox. Dies liegt nicht zuletzt daran, dass Sicherheitslöcher im Firefox wesentlich schneller behoben wurden und er damit den Ruf erlangte, »sicherer« zu sein. Microsoft hat jedoch nicht geschlafen und mit dem Internet Explorer 7 eine neue Runde des so genannten Browserkrieges eingeläutet. Inzwischen sind die Versionsnummern bei beiden Browsern um einiges gestiegen.

Hier siehst du ein Bild vom Mozilla Firefox in der Version 10.02:

Mozilla Firefox, Version 10.02

Habe ich alles, was ich für HTML brauche?

Die meisten Rechner sollten für HTML bereits fertig ausgerüstet sein. Du benötigst auf jeden Fall einen Browser wie z. B. den Microsoft Internet Explorer oder den Firefox.

Wenn du einen anderen Browser verwenden möchtest, ist die Installation von wenigstens einem der beiden genannten Browser dennoch sehr empfehlenswert, da diese am verbreitetsten sind. Wenn du also einen Browser hast, kannst du dir schon einmal sämtliche Webseiten ansehen. Webseiten haben in der Regel Dateinamen, die mit .htm oder .html enden.

Als Nächstes benötigst du noch einen Editor, um Webseiten in HTML schreiben zu können. Dies sollte kein Problem sein. Auf nahezu jedem Rechner befindet sich ein Editor. Wie du den Editor findest und bedienst, erfährst du im nächsten Kapitel.

Mehr benötigst du für das Schreiben von Webseiten in HTML nicht. Allerdings gibt es einige Programme, die dir helfen oder dir einiges einfacher machen. Beispielsweise siehst du hier einen Bildschirmausschnitt eines etwas komfortableren HTML-Editors namens Phase5, mit dem man sehr gut und bequem Webseiten erstellen kann:

Ein Bild von Phase5

Diesen Editor findest du auch auf der Download-Seite. Wie du damit arbeitest, erfährst du in den Kapiteln 11 und 12.

Damit du am Ende dieses Buches deine Webseiten auch in das Internet und somit weltweit zur Verfügung stellen kannst, wäre ein Internet-Anschluss sinnvoll. Die Art des Internetzuganges spielt dabei keine Rolle. Es funktioniert mit allen Internet-Anschlüssen gleich gut. Den Internet-Anschluss benötigst du auch, wenn du dir andere Webseiten im Internet ansehen möchtest.

Um deine Webseite ins Internet zu stellen, benötigst du ferner noch ein FTP-Programm. FTP steht für File Transfer Protocol und heißt so viel wie Datenübertragungsprotokoll. Mit diesem Programm kannst du die von dir erstellten HTML-Seiten zu einem Computer schicken, der sie dann für alle zugänglich macht. Bekannte Programme sind z. B. Filezilla oder SmartFTP. In der folgenden Abbildung siehst du am Beispiel von WiseFTP, wie ein FTP-Programm aussehen kann.

Ein Bild von WiseFTP

Da du bestimmt nicht nur reine Textseiten mit HTML erstellen willst, wirst du langfristig auch ein Grafik- oder Malprogramm benötigen, mit dem du Bilder und Grafiken für deine Webseiten erstellen kannst. Jeder Rechner verfügt in der Regel über ein Malprogramm.

Es gibt noch viele Tools (so nennt man nützliche Programme), die dir beim Erstellen von Webseiten helfen. Einige davon wirst du selber im Internet finden oder dir irgendwann in einem Geschäft kaufen.

Kapitel 2: Was dein Editor alles kann!

In diesem Kapitel erfährst du, wo sich der Editor befindet, mit dem wir in diesem Buch arbeiten werden. Alternativ kannst du auch den Phase5-Editor verwenden. Für die ersten Kapitel solltest du aber den normalen Editor bevorzugen, bis du die Grundlagen von HTML beherrschst. Dieses Kapitel ist sehr kurz, und du kannst es in kurzer Zeit durcharbeiten. Solltest du dich bereits mit dem Editor auskennen, kannst du auch direkt zum nächsten Kapitel gehen.

• Was ist ein Editor?
• Wo ist mein Editor?
• Etwas Allgemeines
• Editor oder Phase5?

Was ist ein Editor?

Ein Editor ist ein Programm, das es dir ermöglicht, die geschriebenen Texte in jedem Format abzuspeichern. Editoren sind in der Regel nicht so komfortabel wie Textverarbeitungen, so dass die Dateien auch wesentlich kleiner sind. Dies ist bei Programmen wichtig, damit diese schneller aufgerufen und verarbeitet werden können.

Vielleicht ist dir auch schon einmal ein WYSIWYG-Editor begegnet. Dies sind etwas komfortablere Editoren, bei denen man beim Eintippen nicht nur den Textinhalt sieht, sondern auch, wie er gestaltet ist und wie er in anderen Programmen erscheint. WYSIWYG ist eine Abkürzung für what you see is what you get, also etwa was du siehst, erhältst du auch (in anderen Programmen). Zu den bekanntesten WYSIWYG-Editoren gehören z. B. Frontpage von Microsoft oder Dreamweaver von Adobe.

Wo ist mein Editor?

Du findest deinen Editor ganz einfach: Klicke nach dem Start deines Rechners auf den Start-Knopf unten links in der Menüleiste. Im nun aufgeklappten Menü musst du noch auf Alle Programme gehen und dort auf den Punkt Zubehör. Nun noch auf Editor geklickt und schon hast du deinen Editor gestartet!

Den Start-Knopf findest du unten links

Nur noch Editor anklicken und wir haben es geschafft!

Hast du alles richtig gemacht, sollte sich ein neues Fenster öffnen, das so aussieht und noch ziemlich leer ist:

Der Editor begrüßt uns mit einem leeren Formular

Etwas Allgemeines ...

Super, nun hast du den Editor und könntest loslegen – doch halt! Vielleicht sollte ich noch kurz erklären, was die paar Schaltflächen und Knöpfe bedeuten. Keine Angst, das geht ganz schnell, und dann legen wir mit dem Webseiten-Programmieren auch schon los!

Ganz oben links findest du fünf Menüpunkte:

• Datei
• Bearbeiten
• Format
• Ansicht
• ?

Über das Menü Datei werden wir immer unsere bereits geschriebenen Webseiten öffnen, um sie weiter zu verfeinern. Hier kann man auch Webseiten abspeichern, drucken oder den Editor beenden. Alles in allem also ein sehr wichtiges Menü, auf das ich gleich im nächsten Kapitel noch einmal kurz eingehen werde. Die anderen Menüpunkte sind für uns vorerst unwichtig. Wir werden zwar später auch den Menüpunkt Bearbeiten einsetzen, doch zunächst brauchst du sie noch nicht.

Diese drei Symbole findest du oben rechts in jedem Windows-Programm

Viel wichtiger sind aber die drei kleinen Symbole oben rechts. Diese drei Symbole findest du in allen Windows-Programmen. Was jeder einzelne der Knöpfe bewirkt, erfährst du nun:

Der Schließen-Knopf

Der Knopf mit dem X ermöglicht es dir, das aktuelle Fenster zu schließen. Welches Fenster gerade aktiv ist, erkennst du am blauen Balken ganz oben. Nur aktive Fenster haben den Balken blau gefärbt. Alle anderen Fenster sind bläulich-transparent gefärbt.

Mit diesem Knopf machen wir alles kleiner

Klickst du auf den Knopf mit dem Unterstrich, dann verschwindet das aktive Fenster unten in der Menüleiste, wo sich auch der Start-Knopf befindet. Um so ein verkleinertes Fenster wieder zu öffnen, musst du es nur unten anklicken, und es wird wieder groß. Somit erhält dieser Knopf den Namen: Minimieren-Knopf.

Der »Mach es Größer«-Knopf

Klickst du auf den Knopf mit dem Kästchen, das einen dicken Strich oben hat, dann vergrößerst du das aktive Fenster auf den ganzen Bildschirm. Dies ist fast immer sinnvoll. Besonders, weil sonst manchmal nicht der ganze Text zu sehen ist. Deshalb heißt dieser Knopf auch Maximieren-Knopf.

Dieser Knopf verkleinert auch – aber nur etwas

Dies ist der letzte Knopf, der an Stelle des Maximieren-Knopfes erscheinen kann. Er bewirkt, dass sich das aktive Fenster etwas verkleinert. Hast du nichts an den Einstellungen verändert, dann schrumpft das Fenster auf ungefähr die halbe Größe zusammen. Auch dies macht Sinn, wenn man ständig zwischen den Fenstern wechseln muss.

Windows-Editor oder Phase5?

Vielleicht hast du schon in die hinteren Kapitel geschaut. Dann wird dir ein Programm namens Phase5 aufgefallen sein. Phase5 ist ebenfalls ein Editor, und zwar ein recht komfortabler. Um HTML von Grund auf zu lernen, ist es jedoch zu Beginn sinnvoller, mit einem ganz einfachen Editor zu arbeiten.

Umsteigen kannst du später jederzeit, da Phase5 dem Editor, den wir gerade mit Windows geöffnet haben, sehr ähnlich ist, allerdings einige sehr praktische Extra-Funktionen bietet. In den Kapiteln 11 und 12 schauen wir uns diesen Editor später genauer an.

Kapitel 3: Die erste Webseite

In diesem Kapitel werden wir uns mit der Grundstruktur einer Webseite beschäftigen. Hier wirst du deine erste HTML-Seite erstellen, speichern und auch im Browser ansehen. Anschließend werden wir auf einige Grundbefehle eingehen und diese etwas »durchleuchten«. Das Tolle am Ganzen ist jedoch, dass du in wenigen Minuten schon eine ganze Menge über HTML wissen wirst. Lass dich überraschen!

• Die 5-Minuten-Webseite
• Was habe ich getan?
• Der Zeilenumbruch
• Lust auf Trennstriche?

Die 5-Minuten-Webseite

Starte den Editor, wie wir es im letzten Kapitel gemacht haben. Gehe dazu auf Start|Alle Programme|Zubehör und klicke auf Editor. Das Editorfenster öffnet sich, und der Cursor blinkt dich freundlich an. Dein Bildschirm sollte nun in etwa so aussehen:

Der Blanko-Editor

Dort, wo der Cursor (die Eingabeaufforderung) blinkt, schreibst du nun folgenden Text:

<html>

<body>

Ich kann es!

</body>

</html>

So sollte dein Editor nun aussehen, wenn du alles richtig abgetippt hast

Hast du alles richtig gemacht, sollte es wie im Bild aussehen. Nun wird es Zeit, die Arbeit zu speichern. Dazu gehst du auf Datei|Speichern unter und gibst als Namen etwas Hübsches ein wie z. B. webseite1.

Ganz wichtig ist jetzt noch die Art, wie du abspeicherst. Damit der Computer und die Programme wissen, dass dies eine Webseite ist, klickst du unter Dateityp (steht unten im momentanen Fenster – man muss auf den Pfeilknopf rechts neben dem Text klicken, um das Menü angezeigt zu bekommen) auf Alle Dateien.

Nun gibst du beim Dateinamen hinter webseite1 noch .html ein (nicht den Punkt vor html vergessen!), so dass der Dateiname nun webseite1.html lautet. Fertig! Jetzt auf Speichern klicken!

Damit du auch weißt, wo du klicken sollst, siehst du alles Notwendige im folgenden Bild:

Das Editor-Speichern-Menü

Die obere Eingabezeile bei 1 zeigt dir den aktuellen Ordner an. Speichere deine Übungen unbedingt in deinem speziellen HTML-Ordner, damit du sie auch bei Bedarf wiederfinden kannst! Solltest du noch keinen HTML-Ordner für deine Dateien angelegt haben, kannst du solch einen Ordner anlegen, indem du auf den Button Neuer Ordner bei 2 klickst. Beachte hierbei, dass der neue Ordner am aktuellen Ort erstellt wird. Solltest du deinen HTML-Ordner also auf deinem Desktop anlegen wollen, dann klicke erst links auf Desktop und schaue bei 3, ob dann deine Desktopdateien dort angezeigt werden.

Bei 5 und 6 werden der Dateiname webseite1.html und Dateityp Alle Dateien, wie bereits beschrieben, eingegeben bzw. ausgewählt. Hast du alles wie auf dem Bild gemacht, kannst du deine Datei mit dem Button Speichern bei 7 sichern.

Nun solltest du dir deine neu erstellte und gespeicherte Webseite einmal ansehen. Gehe dafür zurück zu deinem Desktop bzw. dem Ort, wo du deinen HTML-Ordner erstellt hast. Doppelklicke dann auf den HTML-Ordner, um seinen Inhalt zu sehen. Dieser sollte wie folgt aussehen:

Unsere Datei webseite1.html im HTML-Ordner

Um die Datei webseite1.html so zu sehen, wie sie auch im Internet sichtbar wäre, brauchst du sie lediglich doppelt mit der linken Maustaste anzuklicken. Daraufhin sollte sich der Browser deines Vertrauens (meistens der Internet Explorer oder Firefox) öffnen und den Text Ich kann es! anzeigen.

Unsere erste Webseite!

Was habe ich getan?

So, nun schauen wir uns einmal an, wie du es geschafft hast, den Text auf deine Webseite zu bringen.

Zuallererst hast du Folgendes geschrieben: <html>. Dieser Befehl oder Tag, wie die Profis sagen, sagt dem Programm, das die Webseiten darstellt (in der Regel dem Internet Explorer oder dem Navigator), dass dies ein HTML-Dokument, also eine Webseite ist. Ganz am Ende unseres Programms findest du einen ähnlichen Befehl: </html>. Dieser unterscheidet sich vom ersten lediglich durch den Schrägstrich, doch das ist sehr wichtig! Dieser schließende Befehl sagt dem Programm nämlich, dass hier das Ende unserer Webseite ist. Somit dient der HTML-Befehl schlicht dazu, dem Programm zu sagen, wo der Anfang und wo das Ende der Webseite ist. Jede Webseite benötigt diesen Befehl an genau diesen Stellen (Anfang, Ende). Das solltest du dir unbedingt merken!

Nun gibt es noch ein Tag in den spitzen Klammern (< >), nämlich <body>. Auch hierzu findest du zwei Zeilen tiefer ein ähnliches Tag, das sich vom ersten abermals nur durch den Schrägstrich unterscheidet: </body>. Aber wozu dient dieses <body>? Das <body>-Tag (aus dem Englischen übersetzt heißt body Körper) stellt den eigentlichen Inhalt der Webseite dar. Alles zwischen den beiden <body>-Tags wird auf dem Bildschirm angezeigt.

So, nun bleibt nur noch eine Zeile übrig, die sich aber von selbst erklärt: Ich kann es! Dies hast du als Text eingegeben und es wurde auch als Text am Bildschirm ausgegeben. Das war einfach, oder? Super, dann geht es weiter!

Der Zeilenumbruch

Hast du probiert, den Text im Beispiel von Ich kann es! zu ändern? Wenn nicht, probiere es einfach mal. Gib z. B. deine Adresse ein oder tippe das folgende Beispiel ab. Verändert wurde nur der Teil innerhalb des <body>-Tags. Speichern kannst du dieses Beispiel als webseite2.html.

<html>

<body>

Ich kann es!

... und ich werde immer besser!

</body>

</html>

Nachdem du Ich kann es! eingegeben hast, musst du die (Enter)-Taste drücken und kannst dann den Rest des Textes schreiben. Speichere dein Programm, wie du es gelernt hast, unter webseite2.html ab (Datei|Speichern unter).

Nun gehe in den Windows-Explorer und starte die Datei webseite2.html mit einem Doppelklick. Was stellst du fest?

Unser zweites Beispiel

Du wirst merken, dass der Text auf dem Bildschirm nicht ganz so aussieht, wie wir es eigentlich wollten. Der Computer schreibt alles einfach in dieselbe Zeile und ignoriert dein eingegebenes (Enter). Doch keine Angst, das ist so richtig. Um in HTML einen Zeilenumbruch zu erzeugen, muss man einen kleinen Befehl eingeben, der so aussieht: <br>. Das <br>-Tag steht für das englische Wort break, was so viel wie Pause oder Umbruch bedeutet. In unserem Fall wird nach dem <br>-Tag einfach eine neue Zeile angefangen. Wenn du Leerzeilen einfügen willst, kannst du auch das <br>-Tag benutzen. Probieren wir es doch gleich einmal aus!

Füge am Ende der ersten Zeile das <br>-Tag ein und speichere das Programm unter webseite2.html noch einmal ab. (Überschreibe die alte Datei und bestätige die entsprechende Frage beim Speichern mit JA.) Starte dann die Datei erneut mit einem Doppelklick. Nun sollten Ich kann es! ... und ich werde immer besser! nicht mehr in der gleichen Zeile stehen, sondern untereinander.

Unser verbessertes Beispiel

Lust auf Trennstriche?

Wenn man viel Text schreibt, möchte man diesen auch irgendwie trennen. Besonders einfach und praktisch geht dies mit dem Tag <hr>, das eine waagerechte Linie erzeugt, die von ganz links bis ganz rechts auf dem Bildschirm geht. Das <hr>-Tag beinhaltet übrigens auch schon ein <br>-Tag, so dass du daran nicht mehr zu denken brauchst – praktisch, oder? Außerdem benötigt dieses Tag auch kein schließendes Tag.

Am besten probieren wir dies gleich in einem weiteren Beispiel aus. Nennen wir das Beispiel einfach mal webseite3.html:

<html>

<body>

HTML <hr>

Mit HTML kann man tolle Sachen machen. Wie du hier sehen kannst, hast du bereits eine Webseite mit Text, Zeilenumbruch und sogar einem Trennstrich erstellt. Wenn das weiterhin so schnell geht, bist du bald schon ein Profi! <br><br>

Na dann noch viel Spaß mit HTML!

</body>

</html>

Hast du alles abgetippt und gespeichert, dann öffne die Webseite einmal mit deinem Browser und schau sie dir an. Sie sollte in etwa so aussehen:

Eine Webseite mit Leerzeile und Trennstrich

Das kannst du bereits

Wenn du die Webseite erfolgreich getestet hast, kannst du bereits HTML-Seiten erstellen. Klar, sie sind noch nicht so beeindruckend und schön wie einige professionelle im Internet – doch wir fangen ja auch erst an.

• Du weißt, dass man in HTML die Befehle Tags nennt.
• Du kennst das Grundgerüst einer jeden HTML-Seite. Dieses besteht aus den Tags <html> und <body>.
• Zwischen <html> und </html> steht der gesamte Programmcode einer HTML-Seite. Alles, was außerhalb dieses Tags steht, wird nicht auf dem Bildschirm angezeigt und von niemandem beachtet.
• Innerhalb der <body>- und </body>-Tags steht generell das Wichtigste. Meistens steht hier alles, was du im Browser dann auf dem Bildschirm siehst.
• Dieses Grundgerüst kannst du mit beliebigem Text füllen. In unserem Beispiel war es nur ein kleiner Satz, aber es geht auch mehr. Du weißt auch, dass Groß- und Kleinschreibung in HTML nicht wichtig ist, man jedoch wegen XHTML die Kleinschreibung verwenden sollte.
• Das <br>-Tag bewirkt einen Zeilenumbruch – beendet also eine Zeile und springt in die nächste. Benutzt du das <br>-Tag öfters hintereinander, so erzeugst du Leerzeilen ohne Inhalt.
• Das <hr>-Tag erzeugt einen Trennstrich. Dieses Tag gehört zu den wenigen, die kein schließendes Tag benötigen.

Eine kleine Übungsaufgabe

Versuche einmal, einen kleinen Text am Bildschirm anzuzeigen. Füge deinen Text innerhalb der <body>-Tags ein und verwende das <br>-Tag für Zeilenumbrüche. Direkt unter der Überschrift kannst du auch ein <hr>-Tag einbauen, damit die Überschrift etwas vom Rest des Textes getrennt ist.

Kapitel 4: Die Welt wird bunt und schön

Nachdem du im letzten Kapitel bereits eine Webseite in HTML erstellt hast, wirst du nun erfahren, wie man diese ein wenig verschönern kann. Von bunten Texten, Hervorhebungen bis hin zu Schriftarten und Schriftgrößen wirst du in diesem Kapitel alles erfahren, was man braucht, um einen Text so anzuzeigen, wie man es auch aus Schreibprogrammen und Textverarbeitungen kennt. Hier eine Übersicht über alles, was du in diesem Kapitel erfahren wirst:

• Die Webseite bekommt Stil
• Dicke, schiefe und unterstrichene Buchstaben
• Große und kleine Schriften
• Andere Schriftarten
• Links rechts oder in die Mitte?

Die Webseite bekommt Stil!

Na, dann fangen wir erst mal an, unsere Webseite zu verschönern, indem wir Texte bunt einfärben. Als Erstes öffnest du wieder deinen Editor und startest eine neue Webseite. Solltest du den Editor bereits geöffnet haben, schließe deine Webseite, indem du auf Datei|Speichern gehst, und öffne eine Datei, indem du auf Datei|Neu klickst.

Tippe nun den folgenden Code ab – gleich erfährst du, was die neuen Befehle bewirken. Vergiss nicht, dieses Beispiel zu speichern (z. B. als webseite.html) und es dir auch einmal im Browser anzusehen. Du wirst staunen, was du bereits geschafft hast!

<html>

<body>

Das wird eine schöne Webseite. <br>

<span style="color:#ff0000;"> Bunte </span>

<span style="color:#00ff00;"> Texte </span>

<span style="color:#0000ff;"> sind </span>

<span style="color:#ff00ff;"> toll </span>

</body>

</html>

So sollte es aussehen

Beim Tippen sind dir sicherlich die neuen Befehle (Profis nennen diese Befehle ja Tags) aufgefallen, oder? Dies sind: <span>, </span>, style, color und so komische Codes aus O und f. Fangen wir mit <span> an. Dies ist ein Tag, mit dem ein Element (in diesem Fall der Text »Bunte«) formatiert wird. <span> steht jedoch nie alleine, wie wir es von <br> kennen, sondern wird am Ende stets mit einem schließenden Tag </span> beendet. Im Gegensatz zu unseren bisherigen Tags steht hinter <span> noch einiges mehr. Dabei handelt es sich um Attribute. Diese Attribute bestimmen, was genau passiert.

In unserem Fall wollen wir den Text färben – also eine Änderung an der Art und Weise vornehmen, wie der Text angezeigt werden soll. Diese Änderungen werden mit dem Attribut style angekündigt. Style kommt aus dem Englischen und bedeutet so viel wie Stil oder Erscheinungsbild. Was nun genau geändert wird, steht hinter dem Gleichheitszeichen in den Gänsefüßchen.

Das Gleichheitszeichen dient in HTML dazu, bestimmten Elementen Werte zuzuweisen. In unserem Fall bestimmen wir die Art der Schriftformatierung von style innerhalb der Gänsefüßchen.

Dort finden wir dann auch endlich den Teil Code, der für die Färbung der Wörter verantwortlich ist: color:#ffff00;. Color ist übrigens ein englisches Wort und bedeutet Farbe. Wären wir Engländer, hätten wir den Code verstehen können, ohne die geringste Ahnung von HTML zu haben – irgendwie unfair, oder? Na ja, dafür lernen wir eben eine Fremdsprache ganz kostenlos und nebenbei.

Hinter color folgt noch ein Doppelpunkt, der vergleichbar mit einem Gleichheitszeichen ist und Details zum Attribut color ankündigt. Das merkwürdige Symbol, das wie ein Doppelstrich aussieht, nennt sich Raute und hilft deinem Browser zu erkennen, dass das Folgende ein Zahlencode ist, der wiederum für eine bestimmte Farbe steht (z. B. #ff0000 steht für Rot).

Moment, wieso eigentlich ein Zahlencode? Zwischen den Zahlen stehen doch oft Buchstaben, in unserem Beispiel das f? Das hat seine Richtigkeit. Bei den Zahlen, die wir hier verwenden, handelt es sich nämlich um Hexadezimalzahlen. Das klingt vielleicht kompliziert, doch so schlimm ist das nicht.

Wie du in unserem Beispiel sehen konntest, besteht auch jeder Farbwert aus sechs Zahlen. (Die Buchstaben gelten hier auch als Zahlen, weil es ja ein Hexadezimalsystem ist!) Damit du einmal etwas mit den Farben experimentieren kannst, findest du hier einige Farben mit dem jeweils passenden Zahlenwert:

Tausche doch einfach mal einige Zahlencodes aus und schau dir dann die Webseite noch einmal an! Du kannst natürlich auch selber probieren, neue Farben zu entdecken. Denke aber daran, dass jeder Zahlenwert sechs Ziffern haben muss!

So weit, so gut. Du wirst bestimmt schon erahnt haben, dass unser Text zwischen <span> und </span> steht. Es geht zwar auch ohne Text, doch dann wäre die ganze Mühe umsonst, oder?

Dicke, schiefe und unterstrichene Buchstaben

Bunte Buchstaben kannst du ja nun, doch es geht noch besser! Jetzt wirst du erfahren, wie du Buchstaben und Texte fett, schief oder unterstrichen anzeigen kannst. Da diese drei Befehle auf die gleiche Art und Weise angewendet werden, lernen wir sie auch zusammen. Praktisch, oder? Die drei Tags lauten:

<b> Fetter Text </b>

<i> Kursiver Text </i>

<u> Unterstrichener Text </u>

Du hast sicherlich bereits erkannt, wo man den Text hinschreiben soll, der fett, kursiv (das ist das Fachwort für die schiefe Schrift) oder unterstrichen sein soll – nämlich innerhalb der Tags. Um dein neues Wissen einmal einzusetzen, kannst du ja den folgenden Code abtippen. Vergiss nicht, ein neues Dokument zu öffnen und alles als neue Datei zu speichern (am besten als webseite4.html)!

<html>

<body>

In nur 2 Kapiteln habe ich vieles gelernt. Ich kann Webseiten erstellen, <br>