Als Kind hab ich vor’m Radio gesessen und mit meinem billigen Cassettenrecorder “Vom Telefon zu Mikrofon” mitgeschnitten. So wie tausende anderer Kids auch. Ich hab mich geärgert, wenn der Moderator reingequatscht hat und die Qualität war grausam. Von der Arbeit, die das gemacht hat, mal ganz abgesehen. Aber es hat keinen geschert und kein Künstler ist wegen mir verarmt. Ich hätte mir die Platte eh nicht kaufen können von meinen zwei Mark Taschengeld. Als Schüler hatte ich dann einen Nebenjob in einer Werbeagentur. Da gab es einen gigantischen Kopierer und hin und wieder hab ich mir ein teures Buch kopiert, das ich mir nicht leisten konnte. Gekauft hätte ich es nie. Und auch dadurch ist keiner verarmt.

Verarmt sind Künstler trotzdem – trotz geltenden Urheberrechts – aber nicht wegen meiner Verfehlungen. Sie sind verarmt, weil sie entweder nicht mir ihrer Kohle umgehen konnten und alles für Nutten und Koks rausgeramscht haben, oder keine durchgängig gute Qualität liefern konnten, sodaß sich am Ende keiner mehr für ihr “geistiges Eigentum” mehr interessiert hat.

Später hatte ich einen “echten” Job und konnte mir endlich was leisten. Was hab ich getan? Ich hab mir Dutzende von Platten gekauft – eine Maxi kostete damals ca. 10 Mark und ca. 200 davon stehen heute noch in meinem Schrank. Ich habe Konzerte besucht: Depeche Mode, Duran Duran, Heaven 17, später Ärzte … ich weiss nicht wie viele es waren. Die meisten Bands gibt es immer noch – und die gehen sogar wieder auf Tour. Und ich gehe immer noch gerne hin – trotz Youtube. Und warum? Nicht wegen des geltenden Urheberrechts. Sondern weil sie GUT sind. Und weil es einen deutlichen Unterschied macht, ob ich mir Dieter Nuhr bei YouTube anschaue, oder ihn live erlebe.

Damals gab’s keine zweitausend künstlich gezüchteter Eintagsfliegen, die per gefakter TV-Massenabstimmung für wenige Monate auf ein fragwürdiges Treppchen gehoben werden. Da hat man nicht allein mit der Castingshow die ersten Millionen in die Kassen gespült. Neee, die konnten schon VORHER was und konnten das Niveau halten – DAFÜR wird man belohnt.

Und ich habe mir Bücher gekauft. Ich war schon als Kind ne Leseratte und habe einen mächtigen Verbrauch an Büchern. “Illuminati” hat mir gerade mal 8h Freude bereitet, dann hatte ich es durch. Seither steht es im Schrank. Vielleicht liest es mein Sohn noch mal, oder ich verkaufe es auf dem Flohmarkt. Ich schätze, ich habe mittlerweile locker einen höheren, vierstelligen Betrag in Bücher investiert – von denen, die ich gerne verschenke, ganz zu schweigen.

Bleiben noch Spiele: “Skyrim” hab ich mir am Erscheinungstag gekauft. Viele andere als Budget-Versionen, weil mir der hohe Einstiegspreis nicht angemessen erschien. Auch hier ist sicher ein kleiner Gebrauchtwagen im Laufe der Jahre zusammengekommen. Und ich bin nur einer von 80Mio. Einwohnern Deutschlands und ich kenne ganz viele, bei denen es ähnlich läuft.

Worüber wird also diskutiert?

Über Kids, die sich eine Spiele-DVD in Häppchen von 60 .rar Dateien von einer Plattform saugen, damit irgendeinem Provider ordentlich Traffic bescheren, um dann festzustellen, dass Datei 55.rar defekt ist? Oder geht’s um die Millionen MP3-Zombies die vergessen auf irgendwelchen Festplatten vor sich hindösen um einmal im Jahr zur Geburtstagsparty wiederbelebt zu werden? Ein Sport, der sich längst überholt hat, weil es viel bequemer ist irgendeinen coolen, legalen Streaming-Channel laufen zu lassen.

1999 wurde eine mitgefilmte Version von “Star Wars Episode I” verbreitet – natürlich hat sie fast *jeder* gesehen, aber das hätte doch niemand davon abgehalten sich das ebenfalls im Kino anzusehen. Wie hat es Avatar nur geschafft, trotz Kino.to 2 Mrd. Euro einzuspielen? Mit QUALITÄT, meine lieben Autoren und Künstler – nicht wegen des Urheberrechts.

Und wie schaffen es Dutzende von Privatpersonen mit witzigen, kreativen oder skurrilen Youtube-Channels so viel Traffic zu generieren, dass sie davon leben können? Mit guten Ideen und harter Arbeit – Eigenschaften von denen sich viele sogenannte “Künstler” eine Scheibe abschneiden könnten. Dass eine Charlotte Roche mit ihrer spätpubertären Fäkal-Vergangenheitsbewältigung sich um das Urheberrecht Sorgen macht, spricht – stellvertretend für die Branche – von hoffnungsloser Selbstüberschätzung. Wer würde sowas schon kopieren wollen?

Wie wär’s wenn sich alle mal ein bisschen weniger wichtig nehmen und einfach mal erwachsen werden? Gerne auch digital.

Ein Ident Päckchen – Handy mit Vertrag. Ok, Ausweis und persönliche Unterschrift ist ja klar und OK. Dann reißt er den Vertragsumschlag so auf, dass er nicht mehr zu verschließen ist, knallt uns vier Dokumente hin: “alles unterschreiben!”. Gehetzte Blicke zur Tür auf die Straße. Dass DER keine Zeit hat, dass wir nochmal lesen, was wir da unterschreiben sollen, ist klar. Also will ich die Dokumente wenigstens noch schnell kopieren. Der Knabe platzt bald … dann isser weg.

Später sehen wir, dass alle persönlichen Daten incl. Internetpasswort und Konto auf dem Vertrag stehen und der eigentlich in den verschlossenen Umschlag gehört hätte. Auch die vier Dokumente waren Doubletten – eine Version hätte wohl bei uns bleiben sollen.

Da ist wohl nochmal ne Schulung fällig …

Früher gab es mal eine Zeit, da habe ich gerne Zeitung gelesen. Ich fühlte mich sachlich und objektiv informiert und hatte sogar das eine oder andere Abonnement. Diese Zeit ist lange vorbei. Heute geht es nur noch um den Sensationseffekt zur Auflagensteigerung, wer dafür vernichtet wird, ist zweitrangig. Aus dem Informationsjournalismus ist eine lobby- und interessengetriebener Action-Serie geworden.

Da stellt sich allen Ernstes der Chef des größten Sensations-Blattes vor die Öffentlichkeit und demontiert einen Menschen, der es gewagt hat, einen Privatkredit aufzunehmen um sich einen sehr bodenständigen Wunsch zu erfüllen und der bei Freunden Urlaub gemacht hat. Die einzige Verfehlung dieses Menschen besteht darin, zu emotional reagiert zu haben, als er seine Privatsphäre angetastet sah und den folgenden Spießrutenlauf wohl schon erahnte. Wie schändlich. Ein Mensch, der ein öffentliches Amt bekleidet und Emotionen? Wo kommen wir denn da hin – am Ende zeigt er noch Mitleid oder etwas ähnlich Absurdes …

Es geht mir hier nicht um das Amt des Bundespräsidenten. Das hat und hatte für mich nie eine Bedeutung, es war halt einfach da und hat mir weder geholfen noch geschadet. Aber wie hier ein Mensch, der sich aus meiner Sicht bislang nichts hat zu Schulden kommen lassen, von allen Seiten geradezu gesteinigt wird, ist für mich unerträglich. Dagegen mutet die christliche Inquisition des Mittelalters geradezu an wie ein Kindergeburtstag! Und Kai Diekmann metzelt als moderner Bernard Gui jeden nieder, der ihm in den Weg tritt oder seinem Erfolg dienlich ist. Nur gefoltert wird nicht mehr. Zumindest nicht körperlich. Ich zumindest möchte in diesem Land kein Politiker sein.

Herr Diekmann, auch Sie sind eine Person öffentlichen Interesses und bekleiden doch eine sehr verantwortungsvolle und meinungsbildende Position. Legen Sie doch mal bitte offen, welche Vorteilsnahme im Job Sie in den letzten Jahren so genossen haben. Welche Artikel haben Sie mit Hilfe Ihres Presseausweises rabattiert erhalten, welche Urlaubsreisen haben Sie vergünstigt genossen, welche Upgrades in Anspruch genommen? Bei welchen Freunden haben Sie genächtigt, bei wem waren Sie aufgrund Ihres Status zu Gast?

Auf der einen Seite echauffieren sich Datenschützer und Medien über einen zu laxen Umgang mit selbstveröffentlichten(!) Daten bei Facebook, auf der anderen Seite erwarten genau diese Medien einen schonungslosen Verzicht auf Privatsphäre, wenn daraus ein vermeintlicher Skandal oder eine Effekthascherei zu erwarten ist. Die Bigotterie spricht für sich und bedarf keiner weiteren Erläuterung.

Die Presse als Informationsmedium ist gestorben. Und das zu Recht. Sie kann es nicht mehr und sie will es nicht mehr. Aktuelle News bekommt man mittlerweile schneller, ehrlicher und umfangreicher per Twitter oder Blog, kluge Menschen, die es weiterhin gibt und die sich tiefergehendend mit Themen auseinandersetzen reichern diese mit Hintergrundinformationen an. Ich lese mittlerweile lieber zehn verschiedene Meinungen zu einem Thema und bilde mir meine eigene, statt einem vermeintlich seriösen Artikel zu vertrauen.

Die klassischen Printmedien als Informationsmedien sind ein Anachronismus. Genau wie die heilige Inquisition. Auch sie versuchte verzweifelt, durch Hexenverbrennungen und Unterdrückung von Bildung ihren Machtstatus zu erhalten. Es ist misslungen.

Mögen sie in Frieden ruhen.

Jetzt wird es ein bisschen knifflig: Da es verschiedenen Bildformate gibt (mehr dazu später) musst Du *genau* wissen, wie die Datei heisst. Unter Windows wird aber die wichtige Dateierweiterung leider standardmäßig ausgeblendet. Du siehst in Deinem Ordner nur “header2″ und ein Bildsymbol. Wie Du Sie einblendest, erfährst Du für Windows 7 hier. Für andere Windows Versionen reicht meist ein Rechtsklick und die Wahl von “Einstellungen” um die beschriebene Dialogbox aufzurufen. Lass Dir zur Not von einem Erwachsenen oder dem großen Bruder helfen. Unsere Datei heisst auf jeden Fall “header2.jpg”.

Jetzt bauen wir sie in Deine Übungsseite ein. Dazu lernst Du ein neues Tag, das Du in die “header”-Box, also zwischen <div> und </div> einbaust. Das geschieht mittels des Tags img. Dies ist ein weiteres Tag, das KEIN Ende-Tag besitzt, genau wie br. Dafür hat es einen Parameter, der angibt, wie das Bild heisst und wo es abgelegt ist (src=). SRC steht dabei für Source, das ist wieder Englisch und heisst Quelle. Da das Bild im gleichen Verzeichnis wie die html-Datei ist, reicht uns jetzt erst einmal der Bildname:

<img src="header2.jpg">

Wenn Du alles richtig gemacht hast, siehst Du jetzt die Grafik im Browser, in der “header” Box. Wäre es nicht cool, wenn jetzt noch der ganze Hintergrund schwarz wäre, wie der Himmel? Ausserdem hat unsere Grafik noch einen weißen Rand zum Browser, muss das sein? Ich zeige Dir jetzt wie wir das hinbekommen.

Du weisst ja bereits, wie wir mit “background-color” den Hintergrund einzelner Boxen einfärben können. Bislang haben wir ja unsere Boxen immer per “Namen” (id=name, #name{}) eingefärbt. Das geht aber auch für alle Elemente der gleichen Art gleichzeitig. Füge mal bitte in Deinen <style> Bereich folgende Zeilen ein:

        div{
            background-color: #000000;
        }

Achtung: Hier darf kein # vor dem div stehen. Wenn alles geklappt hat, sollten jetzt alle Boxen schwarz sein. Wir haben nicht nur EIN Tag mit einem bestimmten NAMEN eingefärbt sondern ALLE Tags vom TYP <div>. Das geht auch mit fast allen anderen Tags.

Jetzt sieht man aber unsere Schrift gar nicht mehr. Das ändern wir mit einem neuen style:

        div{
            background-color: #000000;
            color: #FFFFFF;
        }

So wie background-color die Hintergrundfarbe bestimmt, bestimmt color die Vordergrundfarbe (in der Regel Text). Probier mal verschiedene Farben aus.

Das reicht uns aber nicht. Wir wollen ja den kompletten Browserhintergrund schwarz machen. Bevor wir das tun, entfernen wir aber den “Rand” – den sieht man gerade noch so schön. Dazu musst Du wissen, dass <html> und <body> eigentlich auch nur zwei ineinander gestapelte Boxen sind. So wie man bei einer Schachtel den Karton in den Deckel stellen kann. Der innere Karton <body> hat dabei einen kleinen (äußeren) Abstand zum Deckel <html>. Und dieser Abstand heisst in Englisch margin und steht bei den meisten Browsern auf 10 oder 20px. Wenn wir also unserer Logik von eben mit den divs folgen, dann müssten die folgenden Zeilen den Abstand entfernen, bzw. auf 0 setzen:

        body{
            margin: 0px;
        }

Das TAG vom Typ body bekommt einen äußeren Rand von 0px. Probier es aus!

So. JETZT machen wir aber mal alles schwarz. Hast Du eine Idee, wie das gehen könnte? Wir nehmen einfach die beiden Zeilen aus dem Style der divs und packen Sie in den Style von body.

        body{
            margin: 0px;
            background-color: #000000;
            color: #FFFFFF;
        }

Hier nochmal alles – zur Sicherheit:

<html>
    <style>
        body{
            margin: 0px;
            background-color: #000000;
            color: #FFFFFF;
        }
        #header{
            width: 900px;
            height: 200px;
        }
	#menu{
            width: 200px;
            float: left;
        }
        #content{
            width: 700px;
            float: left;
        }
    </style>

    <body>
        <div id="header">
            
        </div>

        <div id="menu">
            Merkur
            Venus
            Erde
            Mars
            Jupiter
            Saturn
            Uranus
            Neptun
        </div>

        <div id="content">
            Content
        </div>
    </body>
</html>

Der Style für die divs ist jetzt doppelt gemoppelt und kann weg.
Puh. Großes Ergebnis, viel gelernt, kurze Pause. Gleich geht’s weiter.

Aber woher nehmen wir denn die Inhalte? Man darf nämlich nicht einfach “irgendwelche” Texte und Bilder aus dem Internet kopieren. Alle diese Texte und Bilder gehören jemandem und eine Verwendung ist sowas ähnliches wie Diebstahl. Es gibt einige wenige Ausnahmen, und da steht es extra dabei.

Eine solche Ausnahme ist Wikipedia. Das ist ein großes Online Lexikon, an dem ganz viele Leute mitschreiben und die haben mit ihrer Teilnahme erklärt, dass das, was sie dort schreiben, und die Bilder, die sie dort verwenden, einfach allen gehören. Damit darf man die Texte und Bilder auf eigenen Webseiten verwenden. Es gibt nur eine Bedingung: Die Quelle, also der Ort, von wo die Daten stammen, muss genannt werden. Das bekommen wir aber hin. Wir schreiben einfach auf jeder Seite “Quelle: Wikipedia”

So, jetzt geht’s aber los …

Zuerst brauchen wir unsere Seitenaufteilung, wie wir sie im letzten Kapitel gelernt haben:

• Wir brauchen einen Bereich für ein Logo, den nennen wir “header” und der ist 900 x 200px groß.
• Darunter links einen Menübereich, den nennen wir “menu”, der wird 200px breit, die Höhe lassen wir einfach weg, dann wird er immer so hoch wie der Inhalt der drin steht. Praktisch, nicht? Denkt an das “float” …
• Und einen Bereich für unseren Inhalt, den nennen wir “content” (das heisst Inhalt auf Englisch), der wird logischerweise 700px breit (dann sind menu und content zusammen genauso breit wie der header). Auch hier lassen wir die Höhe weg.

Arbeitet ruhig erst mal mit verschiedenen background-color Werten und schreibt in die <div>-Bereiche was rein, sonst sieht man sie im Browser nicht.

In den Menübereich könnt Ihr am besten gleich schon die Planetennamen reinschreiben – wie waren die noch gleich? Richtig: Merkur, Venus, Erde, Mars, Jupiter, Saturn, Uranus und Neptun. Gebt mal bei Wikipedia den Begriff Sonnensystem in das Suchfeld oben rechts ein, das hilft Euch erst mal weiter. Und vergesst die <br>-Tags nicht …

Wenn ihr fertig seid, sieht das Ergebnis (hoffentlich) so aus:

<html>
    <style>
        #header{
            width: 900px;
            height: 200px;
        }
        #menu{
            width: 200px;
            float: left;
        }
        #content{
            width: 700px;
            float: left;
        }
    </style>

    <body>
        <div id="header">
            Header
        </div>

         <div id="menu">
            Merkur
            Venus
            Erde
            Mars
            Jupiter
            Saturn
            Uranus
            Neptun
        </div>

        <div id="content">
            Content
        </div>
    </body>
</html>

Vielleicht habt Ihr noch das eine oder andere “background-color” drin oder was anderes in die Boxen geschrieben, aber das macht erst mal nichts.

Hier geht’s weiter zur Lektion 6 >

Hier geht’s weiter zur Lektion 5 >

Probier es aus, indem Du in einer Box mal zwei Zeilen Text einbaust (an das <br> denken).

Jetzt lernst Du, einer Box eine bestimmte Größe zu geben und sie zusammen mit anderen Boxen auf dem Bildschirm anzuordnen.

Bevor wir das aber tun können, müssen wir uns erst einmal ein Gefühl verschaffen, wie groß unser Bildschirm ist. Wenn Du Dir mal in einem großen Elektronikladen die vielen Fernseher angeschaut hast stellst Du fest, dass sie alle unterschiedlich groß sind, auch wenn sie das gleiche Bild zeigen.
In Zentimetern kann man die Größe so eines Bildes also schlecht angeben, weil es auf einem großen Fernseher eben viel größer ist als auf einem Kleinen.
Deswegen hat man sich auf die Einheit Pixel geeinigt, so heißen die kleinen Farbpunkte aus denen sich so ein Bild zusammensetzt. Wenn Du schon mal ein Bild aus diesen Plastikperlen gebastelt hast, die man mit dem Bügeleisen verschmelzen kann, dann kannst Du Dir ungefähr vorstellen, wie das funktioniert.

Zum Zeitpunkt dieses Artikels im Jahr 2011 sind die meisten Bildschirme 1024 Pixel breit und 768 Pixel hoch. Davon geht noch ein bisschen was für das Browserfenster weg (das braucht ja auch Platz), also ist der Bereich mit dem man gut arbeiten kann 900 Pixel breit und 600 Pixel hoch.

Wenn Du schon im Internet warst hast Du sicher festgestellt, dass man sehr oft die einzelnen Seiten nach oben und unten “wegrollen” kann – das nennt man “scrollen”. Waagrecht geht das eigentlich auch, das benutzt man aber nicht, weil das zu unübersichtlich und kompliziert ist. Das heisst für uns, dass unser Bereich gerne höher als 600 Pixel sein darf, aber nicht breiter als 900 Pixel.

Und mit diesem Wissen schauen wir uns dazu nochmal die Aufteilung dieser Website an:

Klicken zum Vergrößern

Zunächst müssen wir unsere vier Boxen einmal auf die richtige Größe bringen. Dazu geben wir ihnen gleich die Eigenschaften “Breite” (width) und Höhe (height).

Wenn ich weiss, dass die Gesamtbreite 900 Pixel beträgt, kann ich jetzt “ungefähr” sagen, wie breit und hoch die einzelnen Bereiche sind:

Zum Vergrößern Klicken

Diese Eigenschaften (width und heigth) definieren wir jetzt für Deine Boxen:

<html>
    <style>
		#logo{
			background-color: red;
			width: 900px;
			height: 150px;
		}
		#inhalt{
			background-color: blue;
			width: 700px;
			height: 900px;
		}
		#menue{
			background-color: green;
			width: 200px;
			height: 900px;
		}
		#ende{
			background-color: yellow;
			width: 900px;
			height: 50px;
		}
    </style>

    <body>
		<div id="logo"> Logo </div>
		<div id="inhalt"> Inhalt </div>
		<div id="menue"> Menue </div>
		<div id="ende"> Ende </div>
    </body>
</html>

So … die richtige Größe haben sie jetzt … nur die Position stimmt noch nicht. Das liegt auch hier am “Standard”, weil alle Boxen immer untereinander positioniert werden, wenn wir nichts anderes über die Eigenschaften festlegen. Und das werden wir jetzt tun.

Diese Eigenschaft heisst auf Englisch “float”, was auf Deutsch so viel wie “schweben” bedeutet und sorgt dafür, dass Elemente nebeneinander angeordnet werden. Da wir wollen, dass die beiden Boxen von links nach rechts nebeneinander stehen, bekommt die Eigenschaft “float” den Wert “left”.

float: left;

Unser Beispiel sieht dann so aus:

<html>
    <style>
		#logo{
			background-color: red;
			width: 900px;
			height: 150px;
		}
		#inhalt{
			background-color: blue;
			width: 700px;
			height: 900px;
			float: left;
		}
		#menue{
			background-color: green;
			width: 200px;
			height: 900px;
			float: left;

		}
		#ende{
			background-color: yellow;
			width: 900px;
			height: 50px;
		}
    </style>

    <body>
		<div id="logo"> Logo </div>
		<div id="inhalt"> Inhalt </div>
		<div id="menue"> Menue </div>
		<div id="ende"> Ende </div>
    </body>
</html>

Wenn Du Dir die Seite jetzt mit dem Browser Internet-Explorer anschaust, ist jetzt alles in Ordnung. Cool, oder? Wenn Du den Browser Firefox benutzt ist allerdings die gelbe “Ende” Box jetzt verschwunden. Wie kann das sein?

Leider gibt es von Browser zu Browser kleine Unterschiede. Da Du aber nicht weisst, mit welchem Browser Dein “Publikum” später auf Deine Webseiten zugreift, musst Du die so programmieren, dass *alle* wichtigen Browser die Seite darstelle können. Dass heisst auch, dass Du manchmal Eigenschaften einbauen musst, die zum Beispiel nur bei einem Browser ein spezielles Problem lösen. Eine solche spezielle Eigenschaft lernst Du jetzt. Durch die Eigenschaft “float” wird ja auch das Folgeelement, also die nächste Box beeinflusst – die muss ja woanders hin. Und genau dieses Verhalten ist bei einigen Browsern anders als bei anderen.

Da wir die letzte Box mit dem Namen “Ende” ja wieder mit dem ganz normalen Standardverhalten (untendrunter) haben wollen, müssen wir dem Firefox beibringen, dass er die Information “float: left;” aus der Box “Menue” für diese Box bitte ignorieren soll. Dafür gibt es die Eigenschaft “clear” – dass heißt löschen und bezieht sich auf die Eigenschaft float und nicht auf das Element.

clear: left;

Unser Beispiel sieht dann so aus:

<html>
    <style>
		#logo{
			background-color: red;
			width: 900px;
			height: 150px;
		}
		#inhalt{
			background-color: blue;
			width: 700px;
			height: 900px;
			float: left;
		}
		#menue{
			background-color: green;
			width: 200px;
			height: 900px;
			float: left;

		}
		#ende{
			background-color: yellow;
			width: 900px;
			height: 50px;
			clear: left;
		}
    </style>

    <body>
		<div id="logo"> Logo </div>
		<div id="inhalt"> Inhalt </div>
		<div id="menue"> Menue </div>
		<div id="ende"> Ende </div>
    </body>
</html>

Jetzt klappt es in Firefox und Internet-Explorer.

Übung: Schau mal, ob Du das folgende Beispiel alleine schaffst:

Zum Vergrößern klicken

Hier geht’s weiter zur Lernkontrolle >

Schau Dir mal Euren Besteckkasten in der Küche an. Da bleiben Messer, Gabel und Löffel an Ihrem Platz, weil der Besteckkasten in einzelne Fächer aufgeteilt ist. So kann nichts verrutschen. Genau so funktioniert das auch im Internet. Schauen wir uns doch mal die Seite an, auf der dieser HTML-Kurs zu Hause ist:

Klicken zum Vergrößern

Wenn Du genau hinschaust kannst Du die einzelnen Bereiche erkennen:

Klicken zum Vergrößern

Um so einen Bereich, eine Schachtel oder “Box” zu erzeugen, müssen wir ein neues Tag lernen

<div> Inhalt </div>

Schauen wir uns das doch gleich mal an einem Beispiel an:

<html>
    <body>
		<div> Logo </div>
		<div> Inhalt </div>
		<div> Menue </div>
		<div> Ende </div>
    </body>
</html>

Hmmm … vier Zeilen Text untereinander … aber von den Boxen keine Spur zu sehen.

Das können wir ändern. Fast jedes Element kann mehrere Eigenschaften haben, die wir allerdings zuerst selbst definieren müssen. Jetzt wirst Du lernen, wie man solche Eigenschaften – die heissen auf Englisch “style” – definiert. Du hast im ersten Teil des Kurses schon das <body>-Tag kennengelernt, das den Teil umschließt, den der Browser ausgibt. Die Eigenschaften werden vom <style>-Tag umschlossen und am Anfang unserer Datei definiert. Warum man das so vermeintlich umständlich weit weg vom Element macht, erkläre ich in einer späteren Lektion.

Erweitere jetzt einfach mal Dein Beispiel – achte darauf, dass Du alles genau so schreibst, wie es da steht – ich erkläre es gleich genauer.
Aufpassen – auch unten bei den <div>-Tags hat sich was geändert – sie haben Namen, sogenannte IDs bekommen.

<html>
    <style>
		#logo{
			background-color: red;
		}
		#inhalt{
			background-color: blue;
		}
		#menue{
			background-color: green;
		}
		#ende{
			background-color: yellow;
		}
    </style>

    <body>
		<div id="logo"> Logo </div>
		<div id="inhalt"> Inhalt </div>
		<div id="menue"> Menue </div>
		<div id="ende"> Ende </div>
    </body>
</html>

Wenn Du Dir das Ergebnis anschaust, haben die Boxen plötzlich Hintergrundfarben bekommen. Wie haben wir das gemacht?

Boxen mit Farben

Zunächst haben wir den einzelenen Boxen einen Namen gegeben, damit man sie unterscheiden kann und ihnen die Eigenschaften eindeutig zuweisen kann.
Das macht man mit einem sogenannten Parameter, der noch innerhalb der eckigen Klammern des Start-Tags stehen muss (id=”Name”). Ende-Tags habe keine Parameter. Bei den Parametern und eigentlich überall im Code gilt die gleiche Regel wie bei den Dateinamen: Sonderzeichen sind tabu. Benutze bitte nur a-z, 0-9, Binde- und Unterstrich. Ein Teil der Sonderzeichen wird nämlich noch für besondere Zwecke gebraucht, das wirst Du für einen speziellen Fall gleich sehen.

Jetzt, wo wir die Boxen mit Namen kennen, können wir die Eigenschaften für jede Box definieren. Das machst Du innerhab des <style>-Tags mit einer Anweisung, die die Box beim Namen nennt:

#logo{ }

Hier siehst Du jetzt, dass das Sonderzeichen “#” als Kennzeichnung für den Namen verwendet wird. Die geschweiften Klammern erreichst Du, indem Du auf Deiner Tastatur die Taste [Alt Gr] festhältst und die Tasten [7] oder [0] zusätzlich drückst. Und zwischen den geschweiften Klammern kann man nun die einzelnen Eigenschaften definieren. Dabei rutscht die hintere Klammer wegen der Übersichtlichkeit nach unten, das soll so sein.

Jede Eigenschaft hat dabei eine bestimmt Bezeichnung und einen Wert, getrennt durch einen Doppelpunkt und abgeschlossen durch ein Semikolon.

background-color: red;

Hier ist es die Eigenschaft “background-color” (Hintergrundfarbe) und der Wert “red” (rot). Klingt erst mal ganz schön kompliziert, aber man gewöhnt sich ziemlich schnell dran.

Jetzt verstehst Du vermutlich auch das Beispiel. Den Boxen mit den Namen logo, inhalt, menue, ende wurden die Hintergrundfarben rot, blau, grün, gelb zugewiesen. Spiel ruhig mal ein bisschen mit den englischen Farbbezeichnungen, die meisten Grundfarben funktionieren, später lernst Du dann auch, wie man eigene Mischfarben definiert.

Hier geht’s weiter zur Lektion 4 >

<html>
  <body>
    Hallo Welt!
  </body>
</html>

Diese Begriffe nennt man Tags, und die sind dafür verantwortlich, dass der Browser weiss, was er wie darstellen soll. Die meisten dieser Tags kommen doppelt vor: Einmal vor dem darzustellenden Inhalt, z.B. dem Text, und einmal danach. Das ist wichtig, weil die meisten Tags dafür da sind, etwas groß, klein, schwarz oder bunt darzustellen und der Browser wissen muss, wann er damit beginnen und wann er damit aufhören soll. Damit er Anfang und Ende unterscheiden kann, wird bei den Ende-Tags ein “/” eingebaut.

Wir probieren das mal an unserem Beispiel aus, indem wir einen neuen Text dazu schreiben, den wir dick und fett schreiben wollen. Auf Englisch heisst das “strong” und genau so heisst unser Tag, das wir als nächstes lernen:

<strong>Text</strong>

Und so sieht unser Beispiel aus:

<html>
  <body>
    <strong>Das ist ein fetter Text.</strong> Und das ein normaler.
  </body>
</html>

Fetter Text

Klasse, oder? Jetzt entferne mal den Ende-Tag </strong> und schau was passiert. Schnell wieder einbauen!

Jetzt probieren wir mal eine neue Zeile:

<html>
  <body>
    <strong>Das ist ein fetter Text.</strong> Und das ein normaler.
    Und hier ist eine weitere Zeile.
  </body>
</html>

Aber was passiert denn jetzt?

Komisch ...

So war das nicht gedacht …

“Neue Zeile” heisst auf Englisch “break” und so heisst auch (abgekürzt) das neue Tag, das wir lernen:

<br>

Weil dieses Tag aber keinen Inhalt hat (es macht ja nur eine neue Zeile), ist es eine der wenigen Ausnahmen die kein Ende-Tag braucht: <br> genügt.

<html>
  <body>
   <strong>Das ist ein fetter Text.</strong> Und das ein normaler.<br>
   Und hier ist eine weitere Zeile.
  </body>
</html>

Neue Zeile

Ausprobieren: Mach mal noch ein <br> hinter das Erste und schau was passiert.

Hier geht’s weiter zu Lektion 3 >

Eine kleine Vorbereitung brauchen wir noch:
Erstelle zuerst einen Ordner für Dein Projekt auf dem Desktop. Dafür machst Du einen Mausklick mit der rechten Maustaste auf einen leeren Bereich auf dem Desktop und wählst “Neu” und “Ordner”. Jetzt erscheint ein gelber Umschlag, dem Du noch einen eigenen Namen geben kannst, wenn Du möchtest. In diesem Ordner wollen wir später alle Deine Daten speichern.

Öffne Deinen Editor und schreib ein paar Zeilen:

<html>
    <body>
        Hallo Welt!
    </body>
</html>

Jetzt speichere Deine Datei indem du die [STRG]-Taste festhältst und gleichzeitig die [s]-Taste drückst. Wenn die Datei schon mal gespeichert war, passiert nichts Sichtbares, aber die Datei wird dabei aktualisiert. Wenn Du Deine Datei noch nie gespeichert hattest, kommt jetzt ein Feld, wo Du einen Dateinamen eingeben musst. Achte darauf, dass Du die Datei auf dem Desktop in Deinem Ordner speicherst und nenne sie “hallo_welt.html”.

Jetzt kannst Du Deinen Browser öffnen und Deine Datei über den Menüpunkt [Datei]-[Öffnen] aufrufen. Herzlichen Glückwunsch – Du hast Deine erste “Webseite” erstellt.

Hier geht’s weiter zur Lektion 2 >