reading

HTML für Kids

Robert R. Agular, Thomas Kobert

Verlag: mitp

Bibliografische Information Der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über <http://dnb.d-nb.de> abrufbar.

ISBN: 978-3-8266-8699-3

5. Auflage 2012

www.mitp.de

E-Mail: kundenbetreuung@hjr-verlag.de

Telefon: +49 6221 / 489 -555
Telefax: +49 6221 / 489 -410

Dieses E-Book verwendet das ePub-Format und ist optimiert für die Nutzung mit dem iBooks-Reader auf dem iPad von Apple. Bei der Verwendung anderer Reader kann es zu Darstellungsproblemen kommen.

Der Verlag räumt Ihnen mit dem Kauf des E-Books das Recht ein, die Inhalte im Rahmen des geltenden Urheberrechts zu nutzen. Dieses Werk, einschließlich aller seiner Teile, ist urheberrechtlich geschützt. Jede Verwertung außerhalb der engen Grenzen des Urheherrechtsgesetzes ist ohne Zustimmung des Verlages unzulässig und strafbar. Dies gilt insbesondere für Vervielfältigungen, Übersetzungen, Mikroverfilmungen und Einspeicherung und Verarbeitung in elektronischen Systemen. Der Verlag schützt seine E-Books vor Missbrauch des Urheberrechts durch ein digitales Rechtemanagement. Bei Kauf im Webshop des Verlages werden die ebooks mit einem nicht sichtbaren digitalen Wasserzeichen individuell pro Nutzer signiert. Bei Kauf in anderen ebook-Webshops erfolgt die Signatur durch die Shopbetreiber. Angaben zu diesem DRM finden Sie auf den Seiten der jeweiligen Anbieter.

Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften.

Lektorat: Sabine Janatschek, Katja Völpel

Sprachkorrektorat: Petra Heubach-Erdmann

Covergestaltung: Christian Kalkert, www.kalkert.de

Satz (für E-Book): Johann-Christian Hanke

Vorwort

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!

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

Wichtige Stellen im Buch

Gelegentlich findest du im Buch Textstellen mit einem Ausrufezeichen. Hier heißt es aufpassen! In den Textkästen stehen wichtige Informationen, ohne die es zu Fehlern kommen kann, oder auch Informationen, wie du häufige Fehler vermeiden kannst.

Buffi-Infokästen

Texte, die Buffi zeigen, sind praktische Tipps oder Kniffe aus seiner speziellen Trickkiste. Oft findest du hier Hinweise, wie etwas in der Praxis einfacher geht, oder wie man etwas ohne großen Aufwand schöner gestalten kann.

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

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

_> 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 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.

_>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.

> Gehe nun mit dem Mauszeiger auf den Ordner

Eigene
Dateien

und klicke dann einmal mit der linken Maustaste darauf.

Ordner nennt man diese kleinen gelben Koffer. Diese können weitere, kleinere Koffer beinhalten. Im richtigen Leben packt man Kleider und Tücher in Koffer – beim Computer packt man hingegen Dateien hinein – also z. B. kleine Programme.

Um den Ordner Eigene Dateien erreichen zu können, musst du bei Windows XP zuerst den Ordner Dokumente und Einstellungen auswählen und anschließend noch den Ordner mit deinem Benutzerprofil öffnen. Dort befindet sich dann der Ordner Eigene Dateien.

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:

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:

> 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!

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?

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.

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.

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.

Wenn du mit einem Rechner arbeitest, auf dem Windows 95, Windows 98, Windows 2000, Windows NT, Windows XP, Windows Vista oder Windows 7 installiert ist, ist der Internet Explorer normalerweise bereits auf dem Rechner eingerichtet.

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:

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.

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?

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!

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

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!

Ü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.

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 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.

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.

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.

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

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:

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

Groß- und Kleinschreibung sind in HTML 4.01 nicht wichtig. Da der Nachfolger von HTML 4.01 jedoch eine Kleinschreibung vorschreibt, sollte man alle HTML-Befehle (diese werden auch Tags genannt) kleinschreiben. Auf diese Weise braucht man sich später die Großschreibung nicht mehr abzugewöhnen und vermeidet Fehler.

Die Tasten (<) und (>) findest du auf den meisten Tastaturen links unten. Drückt man auf die (<>) Taste, dann erscheint aber nur ein (<). Um auch ein (>) zu schreiben, musst du gleichzeitig auch die Umschalt-Taste (Umschalt) gedrückt halten.

Das (/)-Zeichen erzeugst du, indem du (7) und gleichzeitig die Taste (Umschalt) drückst.

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:

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.

Solltest du den Bereich bei 3 nicht sehen können, sind die Ordner bei dir ausgeblendet. Drücke in diesem Fall den Button Ordner einblenden bei 4, um diese wieder sichtbar zu machen!

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:

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.

Erscheint bei dir die Webseite nicht, wenn du doppelt auf webseite1.html klickst?

Dann überprüfe doch einmal, ob auf deinem Rechner auch wirklich der Microsoft Internet Explorer oder ein anderer Browser installiert ist. Normalerweise kannst du dies ganz einfach kontrollieren, indem du auf Start|Alle Programme klickst und dir die Liste ansiehst. Irgendwo sollte dort einer der Browser (Internet Explorer, Netscape Navigator, Opera, Firefox, ...) auftauchen. Kannst du dies nicht alleine, dann frage deine Eltern oder Freunde um Hilfe dabei.

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!

Die Profis nennen die HTML-Befehle Tags. Damit du dich daran gewöhnen kannst, werde ich diese Bezeichnung auch in diesem Buch verwenden. Sonst wirst du später Schwierigkeiten haben, andere Referenzen oder Lehrbücher verstehen zu können.

Die Tags mit einem Schrägstrich am Anfang nennt man schließende Tags, da sie einen Befehl beenden. Somit gibt es immer ein öffnendes und ein schließendes Tag.

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!

Vielleicht hast du bereits gehört, dass auch vor dem <body>-Tag wichtige Sachen stehen dürfen. Das ist richtig. Später in den weiteren Kapiteln dieses Buches werde ich auf Befehle eingehen, die außerhalb des <body>-Tags stehen dürfen. Diese sind aber momentan noch uninteressant.

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.

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?

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:  . Das  -Tag steht für das englische Wort break, was so viel wie Pause oder Umbruch bedeutet. In unserem Fall wird nach dem  -Tag einfach eine neue Zeile angefangen. Wenn du Leerzeilen einfügen willst, kannst du auch das  -Tag benutzen. Probieren wir es doch gleich einmal aus!

Füge am Ende der ersten Zeile das  -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.

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  -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:

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>

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:

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.

Eine kleine Übungsaufgabe

Versuche einmal, einen kleinen Text am Bildschirm anzuzeigen. Füge deinen Text innerhalb der <body>-Tags ein und verwende das  -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!

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!

Beim Tippen sind dir sicherlich die neuen Befehle (Profis nennen diese Befehle ja Tags) aufgefallen, oder? Dies sind: , , style, color und so komische Codes aus O und f. Fangen wir mit  an. Dies ist ein Tag, mit dem ein Element (in diesem Fall der Text »Bunte«) formatiert wird.  steht jedoch nie alleine, wie wir es von   kennen, sondern wird am Ende stets mit einem schließenden Tag  beendet. Im Gegensatz zu unseren bisherigen Tags steht hinter  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.

Die normalen Zahlen von 1 bis 10 nennt man auch Dezimalzahlen. In Mathematik wirst du früher oder später den Begriff genau erklärt bekommen. Für uns ist dies jedoch nicht weiter wichtig. Die Hexadezimalzahlen fangen wie auch die Dezimalzahlen bei 1 an, gehen aber bis 16. Da man jedoch jeden Zahlenwert wie z. B. die 10 als eine Ziffer schreiben wollte, musste man sich etwas einfallen lassen. Schließlich einigte man sich darauf, nach der 9 einfach mit den Buchstaben des Alphabets weiterzumachen. Dies führte zu folgender Werteverteilung:

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
0 1 2 3 4 5 6 7 8 9 A B C D E F

Diese Methode kann man sich recht einfach merken, da ja auch jeder das Alphabet kennt. Die Begriffe Dezimal und Hexadezimal haben übrigens übersetzt aus dem Griechischen die Bedeutung 10er- und 16er-System.

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:

Im Anhang findest du eine Tabelle mit den Zahlencodes für die wichtigsten Farben. Alternativ verfügen viele HTML-Editoren über eine große Auswahl an Farben in einem speziellen Menü (schaue dazu auch in das Kapitel 11 zu Phase5).

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!

Jede Farbe besteht aus den drei Grundfarben Rot, Blau und Grün. Die sechs Hexadezimalzahlen bestimmen die Stärke der Farben, die gemischt werden. Mit den ersten zwei Ziffern bestimmst du die Stärke der Farbe Rot, diese geht von 00 bis ff. Die nächsten beiden Ziffern stehen für die Stärke der Farbe Grün, die ebenfalls von 00 bis ff gehen. Abschließend gibt es noch die letzten beiden Ziffern, die für die Stärke der Farbe Blau stehen. Wenn man das alles mit den Anfangsbuchstaben abkürzt, kommt man zu diesem Ergebnis: RRGGBB. Dies ist der Grund, warum Profis die Farben auch gerne als RGB-Farben bezeichnen.

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

Das Semikolon ; hinter jedem der color-Befehle wie z. B. bei color:#ff0000; ist an dieser Stelle nicht zwingend erforderlich. Es dient normalerweise der Trennung einzelner Befehle und zeigt an, bis wohin ein Befehl geht und ab wo ein neuer anfängt. Um das Semikolon später jedoch nicht zu vergessen, sollte man es sich angewöhnen, dieses am Ende jedes Befehles zu verwenden.

Um ein Semikolon ; zu schreiben, musst du die Umschalttaste (Umschalt) sowie die Kommataste (,) gleichzeitig drücken.

Ganz wichtig ist auch beim -Tag, dass du niemals vergisst, den Befehl mit dem schließenden Tag  zu beenden. Erst wenn dein Browser den -Befehl sieht, hört er auf, alles bunt anzumalen. Doch auch, wenn du den ganzen Text auf deiner Webseite bunt färben möchtest, sollte am Ende nicht das schließende Tag fehlen.

Wie auch alle anderen Befehle, die du in diesem Kapitel lernst, müssen das - und -Tag innerhalb des <body>- und </body>-Tags stehen. Ansonsten meldet dein Browser einen Fehler oder dein Code hat keinen Effekt.

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:

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)!

Schwarz	`#000000`
Braun	`#800000`
Rot	`#ff0000`
Grün	`#ff8000`
Blau	`#0000ff`
Grau	`#80808`0
Lila	`#800080`
Orange	`#ff8000`
Gelb	`#ffff00`
Weiß	`#ffffff`