html und css für kidstextverarbeitung ohne die möglichkeit, den text zu formatieren. du findest...
TRANSCRIPT
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
© 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
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
© 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
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
© 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
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.
© 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
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
© 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
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.
© 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
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.
© 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
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.
© 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
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.
© 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
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
© 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
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.
© 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
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.
© 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
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.
© 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
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.
© 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
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!
© 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
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?
© 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
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
© 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
Stichwortverzeichnis
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
© 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
Stichwortverzeichnis
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
© 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
Stichwortverzeichnis
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
© 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
Stichwortverzeichnis
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
© 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
Stichwortverzeichnis
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
© 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
Stichwortverzeichnis
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
© 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
Stichwortverzeichnis
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
© 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