Was ein Content-Management-System ist, erfährst du im nächsten Abschnitt.
Super, dass du dich für HTML und CSS interessierst. Und ganz besonders freue ich mich darüber, dass du dazu mein Buch gewählt hast.
Ich möchte mich kurz vorstellen, weil du jetzt eine ganze Zeit lang mit mir zusammen sein wirst. Irgendwie bin ich ja immer dabei, wenn du das Buch in die Hand nimmst.
Ich heiße Thomas und schreibe seit 20 Jahren Computerbücher. Viele davon für Einsteiger und für Kinder, ein paar für Profis.
HTML und CSS sind spannend! Das wirst du auch feststellen. Mit HTML und CSS kann man auch eine ganze Menge machen. Was fällt dir als Erstes ein? Wahrscheinlich Webseiten erstellen. Ja das stimmt, mit HTML und CSS kannst du Webseiten erstellen.
Aber selbst wenn du eine moderne Webseite mit einem Content-Management-System (CMS) erstellst, solltest du die Grundlagen von HTML und CSS beherrschen. Es gibt immer wieder etwas an der Optik anzupassen, und dazu musst du eben HTML und auch CSS können.
Was ein Content-Management-System ist, erfährst du im nächsten Abschnitt.
Weißt Du übrigens, dass viele Apps auf dem Smartphone auf HTML5 basieren? Du siehst, es gibt viele Gründe, dass du dich jetzt mit den faszinierenden Themen HTML und CSS beschäftigst.
In so einem Buch kann man nicht jeden Befehl und jede Möglichkeit, die es gibt, erklären. Das wäre nicht nur viel zu viel, um es in ein Buch zu quetschen, vieles davon braucht man auch nur selten. Doch hier im Buch wirst du alle wichtigen Befehle der beiden Programmiersprachen kennenlernen.
Wenn du das Buch durchgelesen und die Beispiele nachvollzogen hast, dann bist du zwar noch kein Profi, aber du kennst alle Grundlagen von HTML und CSS. Und mit diesem Wissen sind alle weiteren Möglichkeiten, die HTML und CSS bieten ganz einfach umzusetzen.
Bestimmt hast du schon von WordPress oder Joomla gehört. Beides sind Content-Management-Systeme. Es sind die zwei bekanntesten CMS, aber es gibt noch eine ganze Reihe anderer CMS. Wenn du eines dieser Systeme verwendest, dann brauchst du dich nur um den Inhalt (also den Text und die Bilder) deiner Webseite zu kümmern – um das Aussehen kümmert sich das System dann automatisch.
Bestimmt fragst du dich, wie das denn gehen soll? Für das Aussehen der Webseite sind sogenannte Templates zuständig. Templates sind sozusagen die Kleider der Webseite. Und wie die Kleider dann wirken, das wird auch mit CSS und HTML festgelegt.
Über HTML und CSS musst du nichts wissen. Schritt für Schritt erfährst du alle wichtigen Grundlagen von beiden Programmiersprachen.
Aber du solltest schon etwas Erfahrung mit der Nutzung des Computers haben. Von Vorteil ist es auch, wenn du dich schon etwas im Internet auskennst und weißt, was ein Browser ist. Und wenn nicht, dann wirst du gleich sehen, dass das alles ganz einfach ist!
Dieses Buch ist nicht einfach nur zum Durchlesen gedacht. Es ist ein Buch zum Mitmachen. Die Beispiele solltest du abtippen und ausprobieren.
Manchmal hast du vielleicht auch keine Lust, den ganzen Quelltext eines Beispiels abzutippen. Du kannst dir die Beispiele auch herunterladen unter: www.mitp.de/0117
Schau doch auch mal auf meiner Homepage zum Buch vorbei, die Adresse lautet 4kids.kobert.de. Dort kannst du die Dateien ebenfalls herunterladen, und du findest dort auch weitere Informationen zu HTML und CSS. Zum Beispiel gibt es eine komplette Referenz von HTML 5 mit wirklich allen Befehlen – auch mit denen, die man nur sehr selten braucht.
Aber auf jeden Fall solltest du dir ganz genau anschauen, was in den Quelltexten passiert. Lade sie also nicht einfach runter und verwende sie, sondern schau sie dir vorher an. Denn sonst lernst du ja nichts.
Im Buch findest du verschiedene Kästen, in denen Wichtiges oder interessante Hintergrundinformationen zu finden sind:
Wenn du dieses Symbol an der Seite siehst, dann findest du dort eine wichtige Stelle. Das solltest du unbedingt beachten oder dir merken.
In den Infokästen findest du gemischte Informationen. Das kann Hintergrundwissen sein, Interessantes zum Thema oder es können auch ein paar Hinweise, Fragen und Aufgaben sein.
In diesen Kästen findest du Tipps. Das können kleine Kniffe sein, die die Arbeit mit HTML und CSS vereinfachen, aber auch allgemeine Tipps.
Das ist ja wie in der Schule! Nein, keine Angst. Am Ende eines jeden Kapitels findest du ein paar Fragen und oft auch noch ein bis vier Aufgaben. Du löst sie nur für dich. Und so kannst du sehen, ob du manchmal vielleicht doch noch mal etwas im Kapitel nachlesen musst.
Mein erstes Danke geht an Dich, weil du dich für mein Buch entschieden hast, um HTML und CSS zu erlernen. Und ein riesiges Dankeschön an die Leser der vorherigen Ausgabe dieses Buches für die vielen Fragen und Tipps. Dank eurer Hinweise konnte ich das Buch überarbeiten.
Auch danken möchte ich meiner Familie, besonders meinen Söhnen Tim und Joscha. Danke dafür, dass ihr immer Verständnis hattet, wenn ich keine Zeit hatte und mich im Büro verkrochen habe, weil ich mal wieder schreiben musste.
Ein ganz besonderes Dankeschön geht an alle Schüler und Schülerinnen, die jeden Freitag an den Klimastreiks teilnehmen. Danke dafür, dass ihr euch so für eure und die Zukunft aller anderen einsetzt! #fridaysforfuture
Und jetzt wünsche ich dir ganz viel Spaß mit HTML & CSS!
Bestimmt möchtest du jetzt ganz schnell anfangen? Mir geht es genauso: Wenn ich mich für eine Sache interessiere, dann möchte ich immer ganz schnell 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 erste Webseite erstellen möchtest. Keine Angst, es ist nicht viel, und du hast auch 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 anderen Browser verwenden. Allerdings empfehle ich dir, Firefox zu benutzen, denn dann sieht es bei dir auf dem Bildschirm auch genauso aus wie auf den Abbildungen hier im Buch. Außerdem hat Firefox ein paar Extras, die sehr nützlich sind, wenn man sich mit HTML und Webseiten beschäftigt.
Im Anhang A findest du weitere Infos zu den nützlichen Firefox-Tools für Webseiten und HTML.
Als Texteditor verwende ich den Editor von Windows. Er kann alles, was du zum Erstellen von HTML-Dateien und auch von CSS-Dateien brauchst. Du kannst auch hier natürlich wieder jeden anderen Texteditor verwenden, wenn du es möchtest. Doch auch hier gilt wieder: Wenn du den Editor von Windows verwendest, sieht es auf deinem Bildschirm genauso aus wie im Buch.
Diese Programme brauchst du, um die Übungen im Buch selber zu machen:
Mozilla-Firefox in der aktuellen Version
Windows Editor oder einen anderen Texteditor
Hast du Firefox schon auf deinem Computer installiert und kennst du den Windows Editor bereits, dann kannst du auch schon zum nächsten Kapitel springen.
Ansonsten erfährst du in diesem Kapitel, wie du Firefox herunterladen und installieren kannst und wie du Dateien mit dem Editor erstellst und richtig abspeicherst. Außerdem zeige ich dir, wie du die Beispiele dann so abspeichern kannst, damit du sie auch wiederfindest.
Vielleicht fragst du dich, warum wir Firefox und nicht den Internet Explorer verwenden. Nun, das ist ganz einfach. Zum einen verwenden sowieso viel mehr Leute Firefox als den Internet Explorer, und außerdem ist er ein kleines bisschen besser. Wenn mit irgendwelchen HTML- oder CSS-Befehlen Probleme auftauchen, dann eher mit dem Internet Explorer als mit Firefox. Und manche von Euch haben vielleicht gar keinen Windows-Computer, sondern einen Apple-Computer oder einen mit Linux. Für alle gibt es Firefox, der Internet Explorer läuft nur mit Windows.
Doch ich will hier keine Grundsatzdiskussion lostreten. Es gibt eine Reihe von Gründen, die für Firefox sprechen, und deshalb habe ich ihn für die Beispiele ausgewählt. Ich zum Beispiel verwende beide Browser nebeneinander, auch dafür gibt es Gründe. Denn wenn du Webseiten erstellst, musst du sie mit beiden Browsern ausprobieren. Schließlich soll die erstellte Webseite für alle Besucher genauso aussehen, wie du es dir vorgestellt hast.
Als Erstes musst du dir Firefox aus dem Internet herunterladen. Gehe dazu auf die Seite https://www.mozilla.org/de/firefox/new/ und klicke dort auf den Button Jetzt herunterladen, um Firefox auf deinen Computer zu laden. Wenn das Programm fertig heruntergeladen ist, musst du es nur noch installieren. Aber keine Angst, das geht sehr schnell und ist auch ganz leicht.
Mozilla Firefox herunterladen
Nachdem du dir die Installationsdatei von Firefox heruntergeladen hast, findest du diese in deinem Download-Ordner. Sie heißt Firefox_Installer.exe oder so ähnlich.
Es ist gut möglich, dass die heruntergeladene Datei bei dir anders heißt. Manchmal ist die Versionsnummer dem Dateinamen hinzugefügt. Die aktuelle Versionsnummer, während ich das Buch schreibe, ist zum Beispiel 70.0.1.
Was bedeutet die Versionsnummer? Normalerweise beziffert die erste Zahl, hier also die 70, die Versionsnummer. Die zweite Zahl gibt an, wie oft diese Version bereits überarbeitet wurde, und die dritte Zahl zeigt dir, wie oft bereits Fehler in dieser Version behoben wurden. Daraus ersiehst du, dass für dich eigentlich nur die erste Zahl interessant ist.
Es macht also nichts, wenn die aktuelle Version bei dir eine höhere Zahl, zum Beispiel die 87, ist. Wichtig ist, dass du mit keiner älteren Version als der Version 70.0.1 arbeitest.
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 klicken, und schon ist Firefox installiert. Toll, wie einfach das ging.
Nach der Installation findest du den Eintrag Firefox in deinem Startmenü. Wie bei allen Programmen brauchst du nur darauf zu klicken, um den Firefox zu starten.
Probiere das am besten gleich einmal aus, und du wirst feststellen, dass es keiner großen Umgewöhnung bedarf, wenn du vorher mit einem anderen Webbrowser 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 im ganzen Buch machen: den Browser öffnen und dir deine Beispiele dort ansehen.
Du öffnest das Menü Datei, indem du in der Menüleiste auf Datei klickst und dann auf Datei öffnen. Jetzt öffnet sich ein Dateiauswahlfenster, in dem du die gewünschte Datei laden kannst.
Das Menü zum Laden der Beispiele
Der Editor ist ein Programm, mit dem du Text in verschiedenen Formaten abspeichern kannst. Das Besondere am Editor ist, dass er reinen ASCII-Text abspeichert. Das ist ein Format, in dem Quelltexte von Programmiersprachen geschrieben werden. Es gibt keine Formatierungen, und du kannst beim Abspeichern deinem Text beliebige Endungen geben. Das ist besonders in unserem Fall wichtig.
Im Zusammenhang mit HTML und CSS gibt es auch sogenannte WYSIWYG-Editoren. In denen gibst du nicht den Quelltext ein, sondern ganz ähnlich wie bei einem Desktop-Publishing-Programm kannst du da die HTML-Dokumente grafisch entwerfen. Hast du deine Seite dann so erstellt, wandelt der WYSIWYG-Editor alles in ein HTML-Dokument um.
Vielleicht interessiert es dich, was WYSIWYG bedeutet. Es ist mal wieder eine Abkürzung für ein paar englische Wörter: What You See Is What You Get, also auf Deutsch: Was du siehst, ist das, was du bekommst.
WYSIWYG-Editoren sind oft kommerzielle Programme, die für Profis gemacht sind, und kosten dementsprechend meist viel Geld. Wir können 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 es nützlich sein, wenn du HTML und CSS programmieren kannst, denn nicht immer sind die Quelltexte, die diese Programme erstellen, fehlerfrei.
Jetzt wird es Zeit, einen ersten kurzen Blick auf den Editor zu werfen, wenn du ihn noch nicht kennst. Starte doch den Editor. Wahrscheinlich hast du dieses Programm noch nie verwendet, im Prinzip ist es eine Mini-Textverarbeitung ohne die Möglichkeit, den Text zu formatieren.
Seit es Computer gibt, haben diese einen Editor im Lieferumfang. Benötigt wird der eigentlich selten, denn niemand schreibt einen Brief mit einem Editor. Sobald du jedoch programmierst, kannst du das nicht mit einer Textverarbeitung machen, denn du brauchst einen sogenannten reinen ASCII-Text. Der Editor von Windows liefert dir genau eine solche Datei. Die Endungen kannst du selber festlegen, standardmäßig heißen die Dateien *.txt, du kannst aber auch *.html oder *.css daraus machen. Doch dazu komme ich später.
Du findest den Windows-Editor in deinem Startmenü im Ordner Windows-Zubehör. Klickt dort einfach auf den Eintrag Editor, und das Programm startet.
Den Editor von Windows starten (Windows 10)
Du siehst ein leeres Fenster und kannst direkt dort hineinschreiben. Die Möglichkeit zum Speichern findest du dann im Menü Datei unter dem Menüpunkt Speichern unter. Doch hierzu später mehr, wenn du den Editor das erste Mal einsetzt.
So, nun bist du gut gerüstet, um zu starten. Vorher brauchst du nur noch einen Ordner, in den du die Beispiele abspeichern kannst.
Wenn du deine Übungen machst, musst du sie auch wiederfinden, und deshalb legen wir einen Ordner für diese Dateien an. Wir nennen ihn HTML-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 verwendeten Betriebssystem ab, aber ich zeige es dir jetzt hier beispielhaft mit Windows 7, da dies derzeit immer noch das am meisten verwendete Betriebssystem ist.
Klicke irgendwo auf dem Desktop mit der rechten Maustaste. Dann erscheint ein Menü.
In diesem Menü klickst du auf den Punkt Neu und dann auf Ordner. Das Menü schließt sich automatisch, und auf deinem Desktop ist der neue Ordner zu sehen.
Der Ordner heißt Neuer Ordner. Du solltest ihn also umbenennen, sonst hast du irgendwann ganz viele Ordner auf dem Desktop, die alle Neuer Ordner heißen. Das wäre ganz schön verwirrend. Klicke einfach auf den Namen des Ordners, damit dieser blau hinterlegt wird. Nun überschreibst du mit deiner Tastatur den Ordnernamen. Gib also HTML-Ordner ein.
Natürlich kannst du den Ordner mit der Maus an jede beliebige Stelle des Desktops ziehen. Ziehe ihn dazu einfach mit gedrückter Maustaste dorthin, wo er sein soll. Dann lässt du die Maustaste los, und schon hat der Ordner den Platz, den er haben soll.
Das Menü zum Erstellen eines neuen Ordners
Die Programmiersprache, in der Webseiten erstellt werden, heißt HTML. Das weißt du bestimmt schon, sonst hättest du dir dieses Buch nicht gekauft. Die aktuelle Version von HTML ist HTML 5.
HTML 5 unterscheidet sich in vielen Punkten von früheren HTML-Versionen. Jetzt geht es bei HTML nicht mehr um das Aussehen einer Webseite, sondern nur um die Struktur. Für das Aussehen ist CSS notwendig. Mehr zu CSS erfährst du im nächsten Abschnitt.
HTML ist die Abkürzung für HyperText Markup Language, und es ist sozusagen die Programmiersprache des Internets. So ganz richtig ist das nicht, denn HTML wird natürlich auch außerhalb des Internets und des WWW eingesetzt.
Genaugenommen ist HTML gar keine Programmiersprache. Es ist eine sogenannte Auszeichnungssprache. Auszeichnungssprachen ermöglichen es festzulegen, wie Text aussieht. Und genau das macht HTML, wenn es inzwischen auch viel mehr kann.
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ält keinerlei Formatierungen, wie du sie zum Beispiel aus deiner Textverarbeitung kennst. Es ist also reiner Text. Da Textverarbeitungen auch immer Formatierungen 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, sondern es können auch Bilder, Videos und sogar Audiodateien in Webseiten eingefügt werden.
Tatsächlich wird HTML nicht nur für Webseiten verwendet, sondern es gibt noch eine Reihe anderer Einsatzzwecke. Es geht hier zwar meistens um Webseiten, der technische Begriff dafür ist aber HTML-Dokument. Er umfasst nicht nur Webseiten, sondern alles, was mit HTML gemacht wird.
Webseite, Homepage, HTML-Dokument, HTML-Seite oder einfach nur Seite. Das alles sind Ausdrücke für genau das Gleiche. Doch Homepage kann z.B. mehr bedeuten. Es kann eine einzelne Seite sein oder eine Website. Und was ist eine Website? Das sind alle Seiten, die zusammengehören. Also z.B. alle Seiten, die zu www.kobert.de gehören. Die genaue Bedeutung ergibt sich meist aus dem Zusammenhang.
Nur durch HTML wurde das Internet, so wie wir es heute kennen, zu dem, was es ist. Am Anfang wurde HTML auch für das Internet, genauer gesagt für das World Wide Web, entwickelt. Ich erinnere mich noch gut daran, es war Anfang der 1990er Jahre, als ich mich das erste Mal mit der Erstellung von Webseiten mit HTML beschäftigt habe.
Wenn du heute eine der Seiten von damals sehen würdest, würdest du wahrscheinlich die Hände über dem Kopf zusammenschlagen, da war nicht 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-Version.
Vorher verwendete jeder Browser sozusagen sein eigenes HTML, die Befehle waren zwar ähnlich, aber nicht gleich. Das war 1995. Nur zwei Jahre später gab es dann schon HTML 3.2, das viel mehr konnte als die Vorgängerversionen. Bald darauf folgte dann schon die Version 4, die – mit einer kleinen Änderung – 15 Jahre lang unverändert gültig war. All das, was du die letzten Jahre im Internet gesehen hast, konnte schon 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 war halboffiziell auch schon verbreitet. So gab es einige Jahre lang quasi zwei Versionen, die Version 4.01 und die noch nicht offizielle Version 5.
Die meisten Browser beherrschten aber schon die Funktionen von HTML 5, und da HTML abwärtskompatibel ist, ist es kein Problem, wenn eine Webseite noch mit HTML 4 erstellt wird.
Der Browser ist das Programm, mit dem du im Internet die Seiten anschaust. Genau genommen ist er ein Programm, das HTML-Dokumente anzeigt.
Es gibt eine ganze Menge verschiedener Browser, wobei nur drei wirklich weit verbreitet sind. Dies sind Mozilla Firefox und Edge von Microsoft, der ja Bestandteil von Windows 10 ist. Apple-Computer verwenden den Browser Safari. Doch das war nicht immer so: Um das Jahr 2000 herum gab es ein Programm, das Netscape Navigator hieß und das der unangefochtene Marktführer im Bereich der Internetbrowser war.
Doch irgendwann wurde es nicht mehr weiterentwickelt, und der Internet Explorer von Microsoft wurde der verbreitete Browser. Aus dem Netscape Navigator entwickelte sich ein neues Projekt, aus dem dann der Firefox entstand.
Heute verwenden die meisten Menschen Firefox als Browser, gefolgt von Microsoft Edge. Das gilt zumindest für Notebooks und PCs. Auf Smartphones ist vor allem der Browser Chrome von Google zu finden, den es auch für Computer gibt. Es gibt noch eine ganze Menge anderer Browser, besonders auch für ältere Computer, die nicht so leistungsfähig sind. Auf einem solchen Computer wäre Firefox viel zu langsam.
CSS ist die Abkürzung für Cascading Stylesheets. Die erste Version von CSS gibt es schon seit 1994, also ganz schön lange. Doch CSS wurde damals kaum bei Webseiten eingesetzt. Es dauerte fast zehn Jahre, in denen HTML immer mehr Funktionen bekam, bis sich CSS bei Webseiten richtig durchgesetzt hat.
Inzwischen ist CSS 3 die aktuelle Version, und der Leistungsumfang und die Möglichkeiten sind enorm. Das vollständige Design einer Webseite lässt sich über CSS realisieren.
Bevor du tief in HTML und CSS einsteigst, empfehle ich dir, mal die Seite http://www.csszengarden.com anzuschauen. Dort kannst du sehen, wie sich eine Webseite optisch völlig verändern kann, wenn nur das dazugehörige CSS verändert wird.
Eine Webseite, deren Design mit CSS festgelegt wurde
Die gleiche Webseite mit einer anderen CSS-Datei
Schau dir mal die beiden Abbildungen an. Beide Webseiten haben exakt den gleichen Quelltext, also auch den gleichen Inhalt, und sie sehen doch so völlig unterschiedlich aus.
Mit CSS kannst du das Aussehen einer Webseite völlig verändern!
Das liegt daran, dass bei beiden das Design komplett mit CSS umgesetzt wurde. Du ahnst bestimmt schon, welche Möglichkeiten das eröffnet: Wenn dir einmal in Zukunft deine Webseite nicht mehr gefällt, dann brauchst du sie nicht ganz neu zu schreiben, sondern du änderst einfach den CSS-Teil daran.
Und das ist dann eine einzige Datei, an der du etwas ändern musst, und nicht alle Seiten deiner Homepage.
Ich gebe es zu, wenn du das Buch hier durchgearbeitet hast, dann wirst du nicht aus dem Stegreif heraus das CSS für solche Seiten komplett erstellen können. Aber du hast alle Grundlagen dafür erworben! Doch die Webseiten, die du dann mit HTML und CSS erstellen kannst, sind auch ganz schön beeindruckend.
Meine Empfehlung ist: Schau dir jetzt die Möglichkeiten von CSS bei csszengarden.com an. Probiere ruhig etwas herum.
Schau Dir die Quelltexte dort aber erst an, wenn du mit dem Buch fertig bist!
Auf csszengarden.com ist auch der HTML-Quelltext, der verwendet wurde, herunterladbar, genauso wie die verschiedenen CSS-Quelltexte. Wenn du sie dir anschaust, wirst du sie verstehen und daraus weiter lernen können.
Aber was genau ist CSS denn nun? CSS sind Stilvorlagen, bei einer Textverarbeitung würdest du Formatvorlagen sagen. Mit CSS erstellst du eine Designvorlage, die du auf beliebig vielen Seiten deiner Homepage anwenden kannst. Du erstellst also einmal ein Design und kannst es immer wieder verwenden.
Schau, das erste Kapitel hast du nun schon durch. Du hast genug Hintergrundwissen, um jetzt mit der Programmierung von HTML zu starten. Das weißt du nun schon alles:
Du hast Firefox installiert und gestartet.
Du weißt, warum du den Editor verwenden solltest.
Du hast einen speziellen Ordner für die Übungsdateien angelegt.
Du weißt jetzt, wie HTML entstanden ist und wozu es zu gebrauchen ist.
Du hast einen kurzen Einblick in die fantastischen Möglichkeiten von CSS bekommen.
Welche Endung hat eine CSS-Datei?
Welche Endung hat eine HTML-Datei?
Was ist die aktuelle Version von HTML?
Seit wann gibt es CSS?
Wozu braucht man CSS bei einer Webseite?
In diesem Kapitel wirst du gleich deine erste Webseite erstellen und direkt danach das Ergebnis im Browser ansehen. Du wirst die Grundstruktur einer Webseite verstehen lernen und feststellen, dass das Ganze viel einfacher ist, als du gedacht hast. Wenn du umblätterst, kannst du gleich anfangen.
Es geht los mit HTML
Zeilenumbrüche
Absätze
Überschriften
Linien
Starte als Erstes den Editor, wie du es im letzten Kapitel gesehen hast. Erinnerst du dich? Start|Alle Programme|Zubehör und dann auf Editor klicken. Das Editorfenster öffnet sich und zeigt sein leeres Fenster, in das du direkt reinschreiben kannst.
Der Editor von Windows
Schreibe nun den folgenden Text dort, wo der Cursor blinkt, in das Editorfenster.
<!DOCTYPE html> <html> <head> <title>Mein Beispiel</title> </head> <body> Die erste HTML-Seite. Das ist doch ganz einfach. </body> </html>
In HTML werden alle Befehle kleingeschrieben. Achte darauf, dass du alles genau so abtippst, wie es hier im Buch steht.
Vielleicht weißt du nicht, wo du die Tasten < und > auf der Tastatur findest. Links unten auf der Tastatur findest du sie. Um das Zeichen < zu erhalten, drückst du einfach die Taste. Benötigst du das Zeichen >, dann drückst du Shift und die Taste.
Hier findest du die Taste <>.
Den Schrägstrich erhältst du, wenn du die Taste 7 bei gedrückter Shift-Taste drückst.
Hast du alles abgetippt? Dann hast du alles richtig gemacht, und es ist Zeit, das Ergebnis jetzt mal abzuspeichern. Dazu gehst du auf Datei|Speichern unter und dann kannst du einen Namen für diese Datei vorgeben. Wir verwenden hier den Namen webseite1.html.
Erinnerst du dich? Der Editor erstellt Textdateien, und deshalb ist es ganz wichtig, dass du die Datei auch mit der passenden Endung abspeicherst. Unter dem Feld für den Dateinamen kannst du den Dateityp auswählen. Dort wählst du Alle Dateien (*.*) aus.
Jetzt gibst du den Dateinamen webseite1.html ein. Dadurch weiß ein Browser später, dass es sich um eine HTML-Datei handelt. Klicke jetzt nur noch auf Speichern, um deine Datei zu sichern.
Das folgende Bild zeigt dir noch einmal die einzelnen Schritte beim Abspeichern:
Alle Schritte zum Speichern
Dort wählst du den Ordner aus, in dem abgespeichert wird. Im letzten Kapitel haben wir ja schon einen speziellen Ordner dafür erstellt, und am besten verwendest du ihn auch.
Hier wählst du den Dateityp aus, also Alle Dateien.
Gib hier den Namen der Datei ein, also webseite1.html.
Jetzt klickst du auf Speichern, um die Datei abzuspeichern.
Wenn du anschließend den Ordner öffnest, dann solltest du die Datei dort sehen. Wenn du dir die Datei im Browser ansehen willst, dann brauchst du nur auf die Datei doppelzuklicken und schon öffnet sich der Browser und zeigt das Ergebnis deiner Arbeit an.
Deine erste Webseite!
Du hast soeben deine erste Webseite erstellt. Aber wie hast du das geschafft? Jetzt schauen wir uns zusammen einmal an, was du überhaupt gemacht hast.
<html>, das ist der Befehl, mit dem jeder HTML-Quelltext beginnt. Dem Programm, das diesen Quelltext auswertet, also dem Browser, sagt das: Hier fängt ein HTML-Dokument an. Dadurch weiß der Browser, wie er den Quelltext auswerten muss. Der letzte HTML-Befehl lautet: </html>. Dieser Befehl sagt dem Browser, dass das Ende des Quelltextes erreicht ist.
Merke dir also: Jeder HTML-Quelltext beginnt mit <html> und endet mit </html>.
Die meisten HTML-Befehle bestehen aus zwei Befehlen: einmal der Befehl und dann der Befehl mit einem Schrägstrich davor. Also zum Beispiel: <html> und </html>. Man sagt dazu: Der Befehl wird geöffnet und geschlossen.
HTML-Befehle werden auch Tags genannt. Und da immer zwei Tags zusammengehören, spricht man auch von Elementen. Das Element html besteht also aus den Tags <html> und </html>. Dabei ist das Tag ohne Schrägstrich das öffnende Tag und das mit dem Schrägstrich das schließende Tag.
Nach <html> folgt das Tag <head>, das den sogenannten Dokumentenkopf öffnet. Es gibt ein paar Befehle, die im Dokumentenkopf angegeben werden müssen. Doch die brauchst du erst viel später, wenn du schon ganz viel mit HTML machen kannst.
Eine Ausnahme gibt es, den Titel der Seite. Du siehst ihn im Quelltext schon stehen:
<title>Mein Beispiel</title>
Der Seitentitel muss nach den HTML-Regeln immer angegeben werden. Du schreibst den gewünschten Text einfach zwischen <title> und </title>. Der Seitentitel wird übrigens ganz oben im Browser angezeigt. Wo genau, hängt von deinem Browser ab.
Wenn du das Element title nicht angibst, wird die Seite trotzdem völlig korrekt angezeigt. Nur der Titel im Reiter des Browsers ist leer.
Der Seitentitel im Browser (Mozilla Firefox)
Als Nächstes folgt das Tag </head>, und das war auch schon die Definition des Dokumentenkopfes.
Weiter hinten im Buch erfährst du noch eine ganze Menge über die Möglichkeiten im Dokumentenkopf.
Das Tag <body> öffnet jetzt den Teil deines Quelltextes, in dem der Inhalt der Seite angegeben wird. Den Teil nennt man Dokumentenkörper.
Auf dieser ersten Seite, die du erstellt hast, steht innerhalb des Dokumentenkörpers nur etwas Text. In den folgenden Kapiteln füllt sich das dann mit Überschriften, Absätzen, Bildern usw.
Der Seiteninhalt wird im Quelltext immer zwischen den Tags <body> und </body> angegeben.
Nach dem Text werden noch die Tags body und html durch </body> und </html> geschlossen. Das war im Prinzip auch schon alles. Es ist doch gar nicht so schwer!
Moment, sagst du jetzt vielleicht, hat der Thomas nicht etwas vergessen? Da steht doch noch was, ganz oben im Quelltext:
<!DOCTYPE html>
Du hast recht. Was es damit auf sich hat, erfährst du auch erst am Ende des Buches. Bei HTML 5 sieht das immer so aus. Merke dir an dieser Stelle erst einmal: Jeder HTML-Quelltext fängt so an!
Manchmal ist es sinnvoll, einen Zeilenumbruch einzufügen. Erinnerst du dich noch an das letzte Beispiel? Im Quelltext stand:
Die erste HTML-Seite. Das ist doch ganz einfach.
Als du das dann im Browser angesehen hast, sah das aber anders aus. Ist es dir aufgefallen? Im Browser stand alles in einer Zeile:
Die erste HTML-Seite. Das ist doch ganz einfach.
Das liegt daran, dass dem Browser egal ist, wie der Quelltext aussieht. Zeilenumbrüche interessieren ihn nicht. Nur mit Leerzeichen musst du vorsichtig sein!
Du glaubst das nicht? Dann gib mal den folgenden Quelltext ein:
<!DOCTYPE html> <html> <head> <title>Mein Beispiel</title> </head> <body>Die erste HTML-Seite. Das ist doch ganz einfach.</body> </html>
Was meinst du, was du siehst? Genau, du siehst das Gleiche wie im letzten Beispiel! Die Schreibweise, die ich verwende, dient nur der Übersichtlichkeit.
Doch zurück zum Zeilenumbruch:
Wenn du im Quelltext einen Zeilenumbruch machst, dann ignoriert der Browser das. Genau deshalb gibt es ein Tag, mit dem du den Zeilenumbruch festlegst.
Das Tag <br> setzt einen Zeilenumbruch. Setze es einfach an die Stelle, an der du den Zeilenumbruch haben möchtest.
Das Tag <br> steht alleine, es gibt also kein Tag </br>! Dieses Tag ist eine der wenigen Ausnahmen. Elemente, die kein schließendes Tag haben, nennt man leere Elemente.
Was hältst du davon, das gleich mal auszuprobieren? Hier ist der Quelltext:
<!DOCTYPE html> <html> <head> <title>Mein Beispiel</title> </head> <body> Die erste HTML-Seite. <br> Das ist doch ganz einfach. </body> </html>
Gib den Quelltext in den Editor ein.
Speichere ihn unter dem Namen website2.html ab.
Öffne die gespeicherte Datei im Webbrowser.
Wenn du nun alles richtig gemacht hast, dann steht der Text jetzt nicht mehr in einer Zeile, sondern jeder Satz in einer eigenen Zeile, wie in der Abbildung zu sehen.
Deine Seite mit einem Zeilenumbruch
Lange Texte unterteilt man oft in Absätze. Auf den ersten Blick sieht das zwar so aus, als wenn du einen Zeilenumbruch veranlasst hättest, doch es ist nicht ganz das Gleiche.
Wenn du deine Texte auf der Webseite mit Absätzen strukturierst, dann ist der Quelltext übersichtlicher. Besonders bei langen Quelltexten wirst du das merken.
Wenn du den Befehl p verwendest, dann markierst du damit einen Absatz. Der ganze Absatz wird dabei zwischen die Tags <p> und </p> geschrieben. In unserem nächsten Beispiel kannst du das gleich ausprobieren.
<!DOCTYPE html> <html> <head> <title>Mein Beispiel</title> </head> <body> <p> Die erste HTML-Seite. </p> <p> Das ist doch ganz einfach. </p> </body> </html>
Was jetzt kommt, kennst du schon: Abspeichern und zwar unter dem Namen website3.html und dann im Browser anzeigen lassen.
Deine Webseite mit Absätzen
Das Ergebnis sieht fast genauso aus wie im letzten Beispiel. Wenn du genau hinsiehst, wirst du vielleicht bemerken, dass der Abstand zwischen den beiden Textzeilen etwas größer ist – das ist aber nicht immer so.
Die Elemente br und p dienen nicht der Optik deiner Webseite, sondern der Textstruktur. In der Textdarstellung machen sie keinen Unterschied. In manchen Browsern ist der Abstand zwischen den Zeilen aber etwas größer. Das sieht man aber nur, wenn man ganz genau hinschaut.
Wenn dir das nicht gefällt, kannst du auch mal den folgenden Quelltext ausprobieren. Wenn du nicht willst, brauchst du das jetzt auch nicht abzutippen, das Ergebnis kennst du schon.
<!DOCTYPE html> <html> <head> <title>Mein Beispiel</title> </head> <body> <p> Die erste HTML-Seite. <br> Das ist doch ganz einfach. </p> </body> </html>
Wenn du dir diesen HTML-Quelltext nach dem Abspeichern im Browser betrachtest, sieht es wieder so aus, wie es nur mit dem Zeilenumbruch aussah.
Der Text steht jetzt in einem Absatz, und der Text wird durch den Zeilenumbruch getrennt.
Bestimmt hast du schon Linien auf Webseiten gesehen. Einmal quer über die Seite geht die horizontale Linie. Manchmal sieht das einfach nur gut aus, und manchmal wird die Linie dazu eingesetzt, den Text übersichtlicher zu machen.
Für diese Linien gibt es das Element <hr>, und die Abkürzung leitet sich von dem englischen Begriff horizontal rule, also horizontale Linie, ab.
Das Beispiel setzt in deiner Seite eine horizontale Linie.
<!DOCTYPE html> <html> <head> <title>Mein Beispiel</title> </head> <body> <p> Die erste HTML-Seite. </p> <p> Das ist doch ganz einfach. </p> <hr> Oberhalb dieses Textes ist eine horizontale Linie. </body> </html>
Das Tag <hr> hat seit HTML 5 eine neue Bedeutung. Bis HTML 5 war das tatsächlich einfach eine Linie. Doch jetzt bedeutet es das Ende eines thematischen Absatzes. Klingt kompliziert? Macht nichts, es wird auch weiterhin eine horizontale Linie angezeigt, weil das die Browserhersteller nicht interessierte.
So, wenn du den Quelltext nun unter dem Namen webseite4.html abspeicherst und dir das Ergebnis im Webbrowser ansiehst, dann sollte es genauso aussehen wie in der Abbildung.
Die Linie, die du eingefügt hast