HTML und CSS für Kids - mitp1).pdfTextverarbeitung ohne die Möglichkeit, den Text zu formatieren. Du findest den Windows-Editor in deinem S TARTMENÜ im Ordner Z UBEHÖR . Klickt

5

Inhalt

Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Was muss ich schon können? . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Ein paar Hinweise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

1Die Vorbereitung . . . . . . . . . . . . . . . . . . . . . . . . . . . 11Firefox installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Was ist der Editor? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Die Übungsdateien wiederfinden! . . . . . . . . . . . . . . . . . . . . . . . . 17HTML-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18CSS-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2Die erste Webseite . . . . . . . . . . . . . . . . . . . . . . . . . . 25Es geht los . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Zeilenumbruch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Absätze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Linien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Überschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Kommentare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39... und eine kleine Aufgabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

© des Titels »HTML und CSS für Kids« (ISBN 9783958450660) 2015 by mitp-Verlags GmbH & Co. KG, Frechen. Nähere Informationen unter: http://www.mitp.de/066

Inhalt

6

3 Text für deine Seite . . . . . . . . . . . . . . . . . . . . . . . . . 41Formatierungen für deinen Text . . . . . . . . . . . . . . . . . . . . . . . . . 41Spezielle Textformate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Universelle Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Geht’s auch mit Stil? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59... und ein paar Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

4 Bilder, Videos & Musik . . . . . . . . . . . . . . . . . . . . . . . 61Bilder für deine Seite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Wie wär’s mit einem Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Ein vielseitiges Tag: »iframe« . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Und was ist mit Musik? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85... und ein paar Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

5 Cooler Look für deine Seite: CSS . . . . . . . . . . . . . . . 87Was ist CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Wie CSS mit HTML zusammenkommt . . . . . . . . . . . . . . . . . . . . . 89Textformate mit CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Textdesign . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109... und eine Aufgabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

6 Vernetz Dich – Hyperlinks . . . . . . . . . . . . . . . . . . . . 111Die Autobahn zu anderen Seiten . . . . . . . . . . . . . . . . . . . . . . . . . 111Links optisch pimpen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122Bilder als Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128... und eine Aufgabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128


Inhalt

7

7Seitendesign mit CSS . . . . . . . . . . . . . . . . . . . . . . . . 129Lorem Ipsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129Hintergrund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138Abstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Klassen bilden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155... und ein paar Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

8Aufzählungen mit Listen . . . . . . . . . . . . . . . . . . . . . 157Aufzählungen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Glossar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167... etwas mehr Stil bitte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173... und zwei Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

9Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175Tabellen-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175Tabellenüberschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183Zellen verbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186Tabellenstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189Die Tabelle optisch pimpen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196... und ein paar Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

10Dein eigenes Formular . . . . . . . . . . . . . . . . . . . . . . . 199Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199Vorbereitung auf den Skripteinsatz . . . . . . . . . . . . . . . . . . . . . . 217Formulare stylen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222... und ein paar Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223


Inhalt

8

11 Der Kopf des Ganzen . . . . . . . . . . . . . . . . . . . . . . . . 225Der Dokumentenkopf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242... aber keine Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

12 CSS-Profitipps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Rahmen mit abgerundeten Ecken . . . . . . . . . . . . . . . . . . . . . . . . 243Schatten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246Mauszeiger ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Den Quelltext vereinfachen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254Text positionieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261Ein paar Fragen ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261... und ein paar Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

A Referenzteil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

B Anhang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . 305


11

1Die Vorbereitung

Möchtest du schnell anfangen? Das verstehe ich, mir geht es genauso.Wenn ich mich für eine Sache interessiere, dann möchte ich immer ganzschnell anfangen. Ein paar Dinge müssen wir aber noch vorbereiten,bevor es losgehen kann.

Zuerst müssen wir uns überlegen, was du brauchst, wenn du deine ersteWebseite erstellen möchtest. Keine Angst, es ist nicht viel und du hastauch schon alles auf deinem Computer!

$ Du brauchst einen Texteditor.

$ Du brauchst einen Webbrowser.

Wie? Das war’s schon? Ja, genau, mehr brauchst du nicht.

Im Buch verwende ich Firefox, du kannst natürlich auch einen anderenBrowser verwenden. Allerdings empfehle ich dir, Firefox zu benutzen,denn dann sieht es bei dir auf dem Bildschirm auch genauso aus wie aufden Abbildungen hier im Buch.

Als Texteditor verwende ich den Editor von Windows. Er kann alles, wasdu zum Erstellen von HTML-Dateien und auch von CSS-Dateien brauchst.Du kannst auch hier natürlich wieder jeden anderen Texteditor verwen-den, wenn du es möchtest. Doch auch hier gilt wieder: Wenn du den Edi-tor von Windows verwendest, sieht es auf deinem Bildschirm genausoaus wie im Buch.


Die Vorbereitung

1Kapitel

12

Hast du Firefox schon auf deinem Computer installiert und kennst du denWindows Editor bereits, dann kannst du auch schon zum nächsten Kapi-tel springen.

Ansonsten erfährst du in diesem Kapitel, wie du Firefox herunterladenund installieren kannst und wie du Dateien mit dem Editor erstellst undrichtig abspeicherst. Außerdem zeige ich dir, wie du die Beispiele dann soabspeichern kannst, damit du sie auch wiederfindest.

Firefox installierenVielleicht fragst du dich, warum wir Firefox und nicht den Internet Explo-rer verwenden. Nun, das ist ganz einfach. Zum einen verwenden sowiesoviel mehr Leute Firefox als den Internet Explorer und außerdem ist er einkleines bisschen besser. Wenn mit irgendwelchen HTML- oder CSS-Befehlen Probleme auftauchen, dann eher mit dem Internet Explorer alsmit Firefox. Und manche von euch haben vielleicht gar keinen Windows-Computer, sondern einen Apple-Computer oder einen mit Linux. Für allegibt es Firefox, der Internet Explorer läuft nur mit Windows.

Doch ich will hier keine Grundsatzdiskussion lostreten. Es gibt eine Reihevon Gründen, die für Firefox sprechen, und deshalb habe ich ihn für dieBeispiele ausgewählt. Ich zum Beispiel verwende beide Browser nebenei-nander, auch dafür gibt es Gründe. Denn wenn du Webseiten erstellst,musst du sie mit beiden Browsern ausprobieren. Schließlich soll dieerstellte Webseite für alle Besucher genau so aussehen, wie du es dir vor-gestellt hast.

Firefox herunterladenAls Erstes musst du dir Firefox aus dem Internet herunterladen. Gehedazu auf die Seite https://www.mozilla.org/de/firefox/products/ und kli-cke dort auf den Button HERUNTERLADEN, um Firefox auf deinen Computerzu laden. Wenn das Programm fertig heruntergeladen ist, musst du es nur

Diese Programme brauchst du, um die Übungen im Buch selber zumachen:

0 Mozilla-Firefox ab Version 38.x

0 Windows Editor oder einen anderen Texteditor


Firefox installieren

13

noch installieren. Aber keine Angst, das geht sehr schnell und ist auchganz leicht.

Die Seite von Mozilla Firefox

Firefox installierenNachdem du dir die Installationsdatei von Firefox heruntergeladen hast,findest du diese in deinem Download-Ordner. Sie heißt firefox_setup_39. x. x.exe oder so ähnlich.

Es ist gut möglich, dass bei dir zum Beispiel 39.1.02 als Versionsnum-mer von Firefox steht. Normalerweise beziffert die erste Zahl, hieralso die 39, die Versionsnummer. Die zweite Zahl gibt an, wie oftdiese Version bereits überarbeitet wurde, und die dritte Zahl zeigt dir,wie oft bereits Fehler in dieser Version behoben wurden. Darausersiehst du, dass für dich eigentlich nur die erste Zahl interessant ist.Bei Mozilla Firefox ist es jedoch so, dass die manchmal sprunghaftsteigt. Das heißt, dass zum Beispiel zwischen Version 30 und 38 keineoptischen Unterschiede zu sehen waren. Es macht also nichts, wenndie aktuelle Version bei dir eine höhere Zahl, zum Beispiel die 42, ist.Wichtig ist, dass du mit keiner älteren Version als der Version 38arbeitest.


Die Vorbereitung

1Kapitel

14

> Zur Installation doppelklickst du einfach auf die Installationsdatei.

> In den folgenden Fenstern klickst du auf WEITER.

> Du wirst danach gefragt, die Lizenzvereinbarung zu akzeptieren.Bestätige das einfach, indem du auf WEITER klickst.

> Dann musst du auch nur noch auf die Schaltfläche FERTIGSTELLEN kli-cken und schon ist Firefox installiert. Toll, wie einfach das ging.

Firefox startenNach der Installation findest du den Eintrag Firefox in deinem Startmenü.Wie bei allen Programmen brauchst du nur darauf zu klicken, um denFirefox zu starten.

Probiere das am besten gleich einmal aus, du wirst feststellen, dass eskeiner großen Umgewöhnung bedarf, wenn du vorher mit einem anderenWebbrowser gearbeitet hast.

Die Oberfläche von Firefox nach der Installation

Wenn du bisher noch nie mit Firefox gearbeitet hast, zeige ich dir noch,wo du HTML-Dateien im Browser laden kannst. Denn das wirst du imganzen Buch machen: den Browser öffnen und dir deine Beispiele dortansehen.


Was ist der Editor?

15

Du öffnest das Menü Datei, indem du in der Menüleiste auf DATEI klickstund dann auf DATEI ÖFFNEN. Jetzt öffnet sich ein Dateiauswahlfenster, indem du die gewünschte Datei laden kannst.

Das Menü zum Laden der Beispiele

Was ist der Editor?Der Editor ist ein Programm, mit dem du Text in verschiedenen Formatenabspeichern kannst. Das Besondere am Editor ist, dass er reinen ASCII-Text abspeichert. Das ist ein Format, in dem Quelltexte von Programmier-sprachen geschrieben werden. Es gibt keine Formatierungen und dukannst beim Abspeichern deinem Text beliebige Endungen geben. Das istbesonders in unserem Fall wichtig.

Im Zusammenhang mit HTML und CSS gibt es auch sogenannte WYSI-WYG-Editoren. In denen gibst du nicht den Quelltext ein, sondern ganzähnlich wie bei einem Desktop-Publishing-Programm kannst du da dieHTML-Dokumente grafisch entwerfen. Hast du deine Seite dann soerstellt, wandelt der WYSIWYG-Editor alles in ein HTML-Dokument um.

WYSIWYG-Editoren sind oft kommerzielle Programme, die für Profisgemacht sind, und kosten dementsprechend meist viel Geld. Wir können

Vielleicht interessiert es dich, was WYSIWYG bedeutet. Es ist malwieder eine Abkürzung für ein paar englische Wörter: What You SeeIs What You Get, also auf Deutsch: Was du siehst, ist das, was dubekommst.


Die Vorbereitung

1Kapitel

16

diese Programme beim Durcharbeiten des Buches nicht gebrauchen,denn schließlich lernst du dabei kein HTML oder CSS.

Aber selbst, wenn du später mit solch einem Programm arbeitest, kann esnützlich sein, wenn du HTML und CSS programmieren kannst, denn nichtimmer sind die Quelltexte, die diese Programme erstellen, fehlerfrei.

Editor startenJetzt wird es Zeit, einen ersten kurzen Blick auf den Editor zu werfen,wenn du ihn noch nicht kennst. Starte doch den Editor. Wahrscheinlichhast du dieses Programm noch nie verwendet, im Prinzip ist es eine Mini-Textverarbeitung ohne die Möglichkeit, den Text zu formatieren.

Du findest den Windows-Editor in deinem STARTMENÜ im Ordner ZUBEHÖR.Klickt dort einfach auf den Eintrag EDITOR und das Programm startet.

Den Editor von Windows starten

Seit es Computer gibt, haben diese einen Editor im Lieferumfang.Benötigt wird der eigentlich selten, denn niemand schreibt einenBrief mit einem Editor. Sobald du jedoch programmierst, kannst dudas nicht mit einer Textverarbeitung machen, denn du brauchst einensogenannten reinen ASCII-Text. Der Editor von Windows liefert dirgenau eine solche Datei. Die Endungen kannst du selber festlegen,standardmäßig heißen die Dateien *.txt, du kannst aber auch *.htmloder *.css daraus machen. Doch dazu komme ich später.


Die Übungsdateien wiederfinden!

17

Du siehst ein leeres Fenster und kannst direkt dort hineinschreiben. DieMöglichkeit zum Speichern findest du dann im Menü DATEI unter demMenüpunkt SPEICHERN UNTER. Doch hierzu später mehr, wenn du den Edi-tor das erste Mal einsetzt.

So, nun bist du gut gerüstet, um zu starten, vorher brauchst du nur nocheinen Ordner, in dem du die Beispiele abspeichern kannst.

Die Übungsdateien wiederfinden!Wenn du deine Übungen machst, musst du sie auch wiederfinden unddeshalb legen wir einen Ordner für diese Dateien an. Wir nennen ihnHTML-Ordner. Es macht gar nichts, wenn du nicht weißt, wie das geht,denn wir machen es einfach zusammen.

Wie das genau funktioniert, hängt natürlich von deinem verwendetenBetriebssystem ab, aber ich zeige es dir jetzt hier beispielhaft mitWindows 7, da dies derzeit immer noch das am meisten verwendeteBetriebssystem ist.

Den Ordner erstellen> Klicke irgendwo auf dem Desktop mit der rechten Maustaste. Dann

erscheint ein Menü.

Das Menü zum Erstellen eines neuen Ordners


Die Vorbereitung

1Kapitel

18

> In diesem Menü klickst du auf den Punkt NEU und dann auf ORDNER.Das Menü schließt sich automatisch und auf deinem Desktop ist derneue Ordner zu sehen.

> Der Ordner heißt Neuer Ordner. Du solltest ihn also umbenennen, sonsthast du irgendwann ganz viele Ordner auf dem Desktop, die alle NeuerOrdner heißen. Das wäre ganz schön verwirrend. Klicke einfach aufden Namen des Ordners, damit dieser blau hinterlegt wird. Nun über-schreibst du mit deiner Tastatur den Ordnernamen. Gibt also HTML-Ordner ein.

HTML-GrundlagenDie Programmiersprache, in der Webseiten erstellt werden, heißt HTML.Das weißt du bestimmt schon, sonst hättest du dir dieses Buch nichtgekauft. Die aktuelle Version von HTML ist HTML 5.

Was ist HTML?HTML ist die Abkürzung für HyperText Markup Language und es ist sozu-sagen die Programmiersprache des Internets. So ganz richtig ist dasnicht, denn HTML wird natürlich auch außerhalb des Internets und desWWW eingesetzt.

Natürlich kannst du den Ordner mit der Maus an jede beliebige Stelledes Desktops ziehen. Ziehe ihn dazu einfach mit gedrückter Maus-taste dorthin, wo er sein soll. Dann lässt du die Maustaste los undschon hat der Ordner den Platz, den er haben soll.

HTML 5 unterscheidet sich in vielen Punkten von früheren HTML-Versionen. Jetzt geht es bei HTML nicht mehr um das Aussehen einerWebseite, sondern nur um die Struktur. Für das Aussehen ist CSS not-wendig. Mehr zu CSS erfährst du im nächsten Abschnitt.

Genaugenommen ist HTML gar keine Programmiersprache. Es ist einesogenannte Auszeichnungssprache. Auszeichnungssprachen ermög-lichen es, festzulegen, wie Text aussieht. Und genau das macht HTML,wenn es inzwischen auch viel mehr kann.


HTML-Grundlagen

19

Der Text, aus dem ein HTML-Dokument besteht, nennt man Quelltext.Manche Leute sagen auch Listing dazu.

Der Quelltext besteht aus sogenanntem ASCII-Text. Das heißt, er enthältkeinerlei Formatierungen, wie du sie zum Beispiel aus deiner Textverar-beitung kennst. Es ist also reiner Text. Da Textverarbeitungen auch immerFormatierungen in den Text bringen, kannst du zum Erstellen von HTML-Quelltexten keine Textverarbeitung verwenden. Dies ist auch der Grund,weshalb wir hier im Buch den Editor verwenden.

Inzwischen wird mithilfe von HTML aber nicht nur Text formatiert, son-dern es können auch Bilder, Videos und sogar Audiodateien in Webseiteneingefügt werden.

Tatsächlich wird HTML nicht nur für Webseiten verwendet, sondern esgibt noch eine Reihe anderer Einsatzzwecke. Es geht hier zwar meistensum Webseiten, der technische Begriff dafür ist aber HTML-Dokument. Erumfasst nicht nur Webseiten, sondern alles, was mit HTML gemacht wird.

Tatsache ist aber, dass HTML erst das Internet, so wie wir es heute ken-nen, ermöglicht hat und am Anfang auch für das Internet entwickeltwurde. Ich erinnere mich noch ganz gut, es war Anfang der 1990-erJahre, als ich mich das erste Mal mit der Erstellung von Webseiten mitHTML beschäftigt habe.

Wenn du heute eine der Seiten von damals sehen würdest, würdest duwahrscheinlich die Hände über dem Kopf zusammenschlagen, da warnicht viel bunt, Bilder gab es kaum und Videos überhaupt nicht.

Doch aus dem HTML von damals ist inzwischen eine extrem leistungsfä-hige Programmiersprache geworden, die das heutige Internet ermöglicht.Das Ganze fing mit HTML 2.0 an, das war die erste offizielle HTML-Ver-sion.

Vorher verwendete jeder Browser sozusagen sein eigenes HTML, dieBefehle waren zwar ähnlich, aber nicht gleich. Das war 1995. Nur zweiJahre später gab es dann schon HTML 3.2, das viel mehr konnte als die

Webseite, Homepage, HTML-Dokument, HTML-Seite oder einfach nurSeite. Das alles sind Ausdrücke für genau das Gleiche. Doch Home-page kann z.B. mehr bedeuten. Es kann eine einzelne Seite sein odereine Website. Und was ist eine Website? Das sind alle Seiten, diezusammengehören. Also z.B. alle Seiten, die zu www.kobert.de gehö-ren. Die genaue Bedeutung ergibt sich meist aus dem Zusammen-hang.


Die Vorbereitung

1Kapitel

20

Vorgängerversionen. Bald darauf folgte dann schon die Version 4, die miteiner kleinen Bearbeitung bis vor Kurzem 15 Jahre unverändert gültigwar. All das, was du die letzten Jahre im Internet gesehen hast, konnteschon mit HTML 4.01 erstellt werden.

Die aktuelle Version, HTML 5, gibt es offiziell erst seit November 2014.Acht Jahre vorher, im Jahr 2006 wurde es bereits angekündigt und warhalboffiziell auch schon verbreitet. So gab es die letzten Jahre quasi zweiVersionen, die Version 4.01 und die noch nicht offizielle Version 5.

Die meisten Browser beherrschten aber schon die Funktionen von HTML5 und da HTML abwärtskompatibel ist, ist es kein Problem, wenn eineWebseite noch mit HTML 4 erstellt wird.

Etwas über BrowserDer Browser ist das Programm, mit dem du im Internet die Seitenanschaust. Genau genommen ist er ein Programm, das HTML-Dokumenteanzeigt.

Es gibt eine ganze Menge verschiedener Browser, wobei nur drei wirklichweit verbreitet sind. Dies sind Mozilla Firefox und der Microsoft InternetExplorer und speziell auf dem Apple-Computer Safari. Doch das war nichtimmer so, um das Jahr 2000 herum gab es ein Programm, das NetscapeNavigator hieß und das der unangefochtene Marktführer im Bereich derInternetbrowser war.

Doch irgendwann wurde es nicht mehr weiterentwickelt und der InternetExplorer von Microsoft wurde der verbreitete Browser. Aus dem NetscapeNavigator entwickelte sich dann ein neues Projekt, aus dem dann derFirefox entstand.

Heute verwenden die meisten Leute Firefox als Browser, gefolgt vomInternet Explorer. Es gibt jedoch noch eine ganze Menge anderer Browser,besonders auch für ältere Computer, die nicht so leistungsfähig sind. Aufeinem solchen Computer wäre Firefox viel zu langsam.

CSS-GrundlagenCSS ist die Abkürzung für Cascading Stylesheets. Die erste Version vonCSS gibt es schon seit 1994, also ganz schön lange. Doch CSS wurdedamals kaum bei Webseiten eingesetzt. Es dauerte fast zehn Jahre, indenen HTML immer mehr Funktionen bekam, bis sich CSS bei Webseitenrichtig durchsetzte.


CSS-Grundlagen

21

Inzwischen ist CSS 3 die aktuelle Version und der Leistungsumfang unddie Möglichkeiten sind enorm. Das vollständige Design einer Webseitelässt sich über CSS realisieren.

Bevor du tief in HTML und CSS einsteigst, empfehle ich dir, mal die Seitehttp://www.csszengarden.com anzuschauen. Dort kannst du sehen, wiesich eine Webseite optisch völlig verändern kann, wenn nur das dazuge-hörige CSS verändert wird.

Eine Webseite, deren Design mit CSS festgelegt wurde

Schau dir mal die beiden Abbildungen an. Beide Webseiten haben exaktden gleichen Quelltext, also auch den gleichen Inhalt und sie sehen dochso völlig unterschiedlich aus.

Das liegt daran, dass bei beiden das Design komplett mit CSS umgesetztwurde. Du ahnst bestimmt schon, welche Möglichkeiten das eröffnet:Wenn dir einmal in Zukunft deine Webseite nicht mehr gefällt, dannbrauchst du sie nicht ganz neu zu schreiben, sondern du änderst einfachden CSS-Teil daran.

Und das ist dann eine einzige Datei, an der du etwas ändern musst, undnicht alle Seiten deiner Homepage.


Die Vorbereitung

1Kapitel

22

Die gleiche Webseite mit einer anderen CSS-Datei

Ich gebe es zu, wenn du das Buch hier durchgearbeitet hast, dann wirstdu nicht aus dem Stegreif heraus das CSS für solche Seiten kompletterstellen können. Aber du hast alle Grundlagen dafür erworben! Doch dieWebseiten, die du dann mit HTML und CSS erstellen kannst, sind auchganz schön beeindruckend.

Auf csszengarden.com ist auch der HTML-Quelltext, der verwendetwurde, herunterladbar, genauso wie die verschiedenen CSS-Quelltexte.Wenn du sie dir anschaust, wirst du sie verstehen und daraus weiter ler-nen können.

CSS in ein paar WortenAber was genau ist CSS denn nun? CSS sind Stilvorlagen, bei einer Text-verarbeitung würdest du Formatvorlagen sagen. Mit CSS erstellst du eineDesignvorlage, die du auf beliebig vielen Seiten deiner Homepage an-wenden kannst. Du erstellst also einmal ein Design und kannst es immerwieder verwenden.

Meine Empfehlung ist: Schau dir jetzt die Möglichkeiten von CSS beicsszengarden.com an, die Quelltexte dort aber erst, wenn du mit demBuch fertig bist!


Zusammenfassung

23

ZusammenfassungSchau, das erste Kapitel hast du nun schon durch. Du hast genug Hinter-grundwissen, um jetzt mit der Programmierung von HTML zu starten. Dasweißt du nun schon alles:

0 Du hast Firefox installiert und gestartet.

0 Du weißt, warum du den Editor verwenden solltest.

0 Du hast einen speziellen Ordner für die Übungsdateien angelegt.

0 Du weißt jetzt, wie HTML entstanden ist und wozu es zu gebrauchenist.

0 Du hast einen kurzen Einblick in die fantastischen Möglichkeiten vonCSS bekommen.

Ein paar Fragen ...1. Was ist der am meisten genutzte Browser?

2. Welche Endung hat eine HTML-Datei? Und welche eine CSS-Datei?

3. Was ist die aktuelle Version von HTML?

4. Seit wann gibt es CSS?

5. Wozu braucht man CSS bei einer Webseite?


305

Stichwortverzeichnis

Aa 112Absatz 32

thematischer 34Absatzformat

Klassen 151Abschicken 213Abstand 104, 147, 193, 283, 286action 216alt 67Alternativseite 237Alternativtext 67Anweisung

erneuter Besuch 232Suchmaschinen 231

ASCII-Text 19Attribut 50Audio 82audio 82Auflösung 64Aufzählung 157Aufzählungsliste 170Ausrichten 267Ausrichtung 272, 282

horizontal 106Text 106vertikal 107

Auszeichnen 47Auszeichnungssprache 18Außenabstand 144, 146autoplay 71, 84

Bb 42background 280background-attachment 136, 281background-clip 281background-color 131, 281background-image 133, 282background-origin 282background-position 282background-repeat 134, 282Banner 127base 234baseline 107Befehl 28, 51Beschriftung 202, 215, 219Bestellformular 199Betonung 47Bild 61

Breite 65einbinden 63gratis 62Höhe 65

Bildergalerie 127Bildformat 63Bildpunkt 64Bildschirmanzeige 290_blank 118Blindtext 130Blindtextgenerator 131Block-Element 49, 293Blocksatz 106



306

body 30border 272border-bottom 273border-bottom-color 273border-bottom-left-radius 273border-bottom-right-radius 273border-bottom-style 273border-bottom-width 274border-collapse 178, 271border-color 142, 274border-left 274border-radius 244, 276border-right 276border-spacing 193, 271border-style 140, 178, 277border-top 278border-width 140, 178, 279bottom 107, 260, 286Box 139

Größenangabe 139Boxmodell 138box-shadow 246, 288br 31Browser

Auswahl 20Buchstabenabstand 105button 213, 215, 216

Ccaption 183caption-side 184, 271Cascading Stylesheets (CSS) 20center 106charset 227Checkbox 205checkbox 206class 152clear 286clip 288code 47color 95, 266cols 211colspan 186column-count 288column-fill 289columns 289column-width 289

content 227controls 71, 84CSS 50, 87

eingebettet 89extern 92Referenz 263Textformatierung 94Vorteile 93

CSS-Datei 92CSS-Definition 89CSS-Klasse 151CSS-Regel 88, 91CSS-Schlüsselwort 52CSS-Wert 52cursor 253, 289Cursorposition 212Cursorsymbol 289

DDatumsangabe 229dd 167description 231direction 290display 290div 49dl 167DOCTYPE 238Dokumentenkopf 29, 226Dokumentenkörper 30Dokumententyp 239Download-Link 119dt 167DTD 238Dünne Schrift 96Dünner Text 96Durchgestrichener Text 101

EEcke

abrunden 244Editor 15, 25Effekt

visueller 264Eigenschaft 51, 88Eingabefeld 200

aktivieren 219



307

Eingerückte Liste 172Einzug festlegen 172Element 29

leeres 31, 63em 48E-Mail-Link 120empty-cells 195, 271Entity 240

Aufbau 240Liste 241

expires 228Externer Link 115Externes CSS 92

FFachbegriffsverzeichnis 167Farbe 51, 266

Hex-Wert 296normierte 297

Farbiger Text 51Farbname 53, 267, 297Farbpalette 132Farbpicker 132Farbverlauf 251Favicon 235Fehlerursache 302Feldart 202Fette Schrift 96Fetter Text 42, 96File Transfer Protocol 119Firefox 12

herunterladen 12installieren 12

float 286follow 232font 264font-effect 264font-family 55, 95, 265font-size 56, 95, 265font-style 95, 265font-variant 95, 266font-weight 96, 266for 218form 200Formatvorlage 22, 87

Formular 199abschicken 216CSS 219Optionen 205PHP-Skript 217

Formulardaten 216per E-Mail 216

Formularfeldbeschriften 202

Formularinhalt 216frameborder 81ftp 119

Gget 216GIF 63Globaler Link 234Glossar 167gopher 120Grafik 62, 288Grafischer Link

mit Grafik 125Gratis-Bild 62

Hh1 35head 29height 65, 71, 139, 285Hexadezimal-Code 54Hexadezimalwert

Farben 132Hexadezimalzahl 54Hintergrund 131Hintergrundbild 133, 191Hintergrundfarbe 136, 191, 281Hintergrundgrafik 133

fixieren 136kacheln 133

Hintergrundposition 134Hochgestellter Text 44Höhe 285Homepage 19Horizontale Linie 34hr 34href 92, 112, 233



308

HTML 18html 29http 116http-equiv 227Hyperlink 111HyperText Transfer Protocol 119

Ii 42id 201, 207, 218iframe 77, 78img 63, 125Inhalt

positionieren 257Inline-Element 48, 49Inline-Frame 78Innenabstand 139, 144, 145, 284input 200inset 251Interner Link 112Internetprotokoll 119ISO 8859 240ISO-8859-Code 241

JJavaScript 216, 235, 236JPEG 63justify 106

KKapitälchen 95, 266Keyword 67keywords 231Klasse 151Klassenname 151Kleinerer Text 44Kommazahl 103Kommentar 37Kontaktformular 211Kontrollkästchen 205Kursiver Text 42, 95

Llabel 202language 233Leeres Element 31, 63Leerraum 266, 269left 258, 260, 287letter-spacing 105, 266li 158, 163line-height 103, 267line-through 102Linie 34

horizontale 34Link 92

extern 115globaler 234in neues Fenster 118intern 112mit Grafik 125Möglichkeiten 112zu Dateien 119zu E-Mail 120

Linktext 114Liste

CSS 168einfache 159einrücken 172gliedern 159sortiert 158unsortiert 163Unterpunkte 159verbinden 165verschachteln 159

Listenart 269Listenausrichtung 269Listeneintrag 158Listenfeld 208

Größe 209Mehrfachauswahl 210Vorauswahl 210

Listensymbol 269, 270Listenzeichen 169

Grafik 171Listing 19, 47list-style 269list-style-image 171, 269list-style-position 173, 269list-style-type 170, 269



309

Logische Textauszeichnung 294Logisches Textformat 46, 293loop 71Lorem ipsum 129Löschen 213

Mmailto 120, 216margin 146, 283margin-bottom 150margin-left 150margin-right 150margin-top 150Mauszeiger 252, 289

Grafik 254max-height 285Maximalhöhe 285maxlength 204max-width 285Mehrzeiliges Textfeld 211meta 226method 216min-height 285Minimalbreite 286mp3-Format 83mp4-Format 72multiple 210Musik 82

Fehler 85

Nname 231nntp 120nofollow 232Normierte Farben 297noscript 237Numerischer Wert 148

absoluter 148relativer 149

Nummerierung 158

OOGG-Format 70ol 158

opacity 291option 208Optionsfeld 206outline 279outline-color 279outline-offset 279outline-style 280outline-width 280overflow 291overline 102

Ppadding 144, 284padding-bottom 151padding-left 151padding-right 151padding-top 151passwort 203Passwort-Eingabefeld 203Pfadangabe 234PHP-Skript 217Physisches Textformat 46Pica 149Pixel 65, 149PNG 63Position

horizontale 260vertikale 260

position 258, 287Positionierung 138, 257, 286

Bezugspunkt 259Hintergrundgrafik 135

post 216poster 73Protokoll 116Prozentuale Werte 149Pseudoklasse 122

a:active 124a:hover 124a:link 124a:visited 124für Links 124

pt 104Punkt 149



310

QQuellcode 47Quelltext 19, 47

zusammenfassen 254

Rradio 206Radiobutton 206Radius 245Rahmen 138, 177, 190, 243, 271, 273

abgerundete Ecken 243durchgezogene Linie 140gepunktete Linie 140gestrichelte Linie 140in 3D 140Schatten 246sichtbar 140Stärke 140

Rahmendarstellung 275Rahmendicke 141Rahmeneigenschaft 280Rahmenfarbe 141, 275Referenz 294Referenzieren 234refresh 227rel 92Relative Pfadangabe 234Reset 213reset 215resize 291revisit-after 232right 260, 287rotation 292rotation-point 292rows 211rowspan 187

SSchaltfläche 213

Skripte 216Schaltflächenbeschriftung 215Schaltflächenlook 127Schatten 246, 268, 288

Farbe 248für Text 252

Konturen 249nach innen 251Richtung 250Werte 248

Schlagschatten 288Schlüsselwort 51, 88, 230

mehrere 59zusammenfassen 255

Schriftdünn 96fette 96

Schriftart 54, 265Schrift-Familie 55Schriftformatierung 264Schriftgröße 56, 265Schriftstärke 96Schriftstil 95Schriftvariante 95script 236Scrollbalken 79seamless 80Seitenhintergrund 132, 280Seiteninhalt

Kurzbeschreibung 231Seitenstrukturierung 294Seitentitel 29select 208selected 210Selektionsfeld 208Selektor 218Senden 213SEO 230size 204, 210Skript 236Skriptsprache 210small-caps 95Sonderzeichen 227

deutsche 240Sortierte Liste 158, 169source 71, 82Spalte

in Tabelle 176Spaltenbreite 272, 289Spaltenlayout 288span 48Spanning 186Sprachbereich 233Sprachrelevanz 233



311

src 63Stilvorgabe 99Stilvorlage 22Stockphotos 62strong 48Strukturierung 190style 51, 88, 89submit 215Suchfunktion 199Suchmaschine 230

Anweisungen 231Suchmaschinenoptimierung 67, 226,

230

TTabelle 175

Abstände 193Aufbau optimieren 194erste Zeile 181Grundgerüst 176leere Zellen 271planen 176Rahmen 177, 271strukturieren 189Zellen verbinden 186, 187

Tabellenfeld 193Tabellenfuß 189Tabelleninhalt 183Tabellenkopf 181, 189Tabellenkörper 189Tabellenrahmen 178Tabellenreihe 176Tabellenstruktur 189Tabellenüberschrift 183Tabellenunterschrift 184, 271Tabellenzelle

Abstand 271leere 195Rahmen 271

table 176table-layout 194, 272Tag 29

universelles 48verschachteln 98

target 117tbody 189

td 176telnet 120Text

ausrichten 106auszeichnen 47dünn 96durchgestrichen 101einrücken 107Farbe 51farbiger 51fett 42, 96Gestaltungstipps 108hoch gestellt 44hochgestellt 44kleiner 44kursiv 42, 95Lorem ipsum 130tief gesetzt 44unterstrichen 101wichtiger 48zentrieren 102

text-align 106, 267textarea 211Textauszeichnung

logische 294text-decoration 101, 267text-decoration-color 267text-decoration-style 268Textdesign 108Texteingabe 203Texteinzug 107Textfarbe 266Textfeld

mehrzeiliges 211Textformat

logisches 46, 293physisches 46

TextformatierungCSS 94

Textgestaltung 50text-indent 107, 268Textschatten 252text-shadow 252, 268Textstrukturierung 294text-transform 268Textzeile

einrücken 268



312

tfoot 189th 181thead 189Thematischer Absatz 34Tiefer gesetzter Text 44Titel der Seite 29title 29top 107, 258, 260, 287tr 176Transparenz 291type 91, 92, 202, 203, 235

UÜberschrift 35, 183, 185ul 163Umfließender Text 286underline 102unicode-bidi 292Unsortierte Liste 163, 170Unterstrichener Text 101url() 172, 254

Vvalue 206, 215Verfalldatum

festlegen 228Verschachtelte Tags 98vertical-align 107, 272Verzeichnispfad 233Video 69

einbinden 69Fehler 72Vorschaubild 74

video 69Videoformat 72visibility 292Visueller Effekt 264Vorschaubild 73

WWebbrowser 14Webseite 112Website 19, 112

Weichzeichnungseffekt 249Weiterleitung

automatisch 227Wert 51, 89

für Monate 229für Wochentage 229numerischer 148prozentual 149

white-space 269Wichtiger Text 48width 65, 71, 139, 286Wiederholung 135

horizontal 135vertikal 135

word-spacing 104, 269Wortabstand 104WYSIWYG 15

YYouTube 75

Video einbinden 77

ZZahlenwert

Schriftdarstellung 97Zeichenanzahl 204Zeichensatz 227, 240

UTF-8 227Zeile

in Tabelle 176Zeilenhöhe 102, 267Zeilenumbruch 30, 37, 269

fehlender 68Zeitzone 229Zentrierter Text 102Zieladresse 112z-index 288Zitat 47Zusammenfassende Schlüsselwörter

256


Documents

HTML und CSS für Kids - mitp1).pdfTextverarbeitung ohne die Möglichkeit, den Text zu formatieren. Du findest den Windows-Editor in deinem S TARTMENÜ im Ordner Z UBEHÖR . Klickt