HTML und CSS – Learning by Doing

Und da wären wir wieder mit einem neuen Beitrag über CSS. Diesmal möchte ich das Ganze ein wenig anders gestalten als sonst, denn wie heißt es so schön? Learning by Doing!

Zusammen erstellen wir ein HTML-Grundgerüst mit einem externen Stylesheet. Zum Mitmachen müsst ihr euch einfach den kostenlosen (versprochen!) Editor ,,Atom‘‘ auf eure PC’s, Mac’s oder Laptops herunterladen und schon könnt ihr loslegen.

Wenn ihr das Programm öffnet, dann seht ihr erst einmal …nichts. Vor euch erscheint eine leere Programmierungsfläche, die es nun zu füllen gilt.

Zuerst geben wir unserem Editor bescheid, dass wir gerne ein HTML-Dokument erstellen möchten. Dazu klickt ihr an der untersten Leiste eures Programmfensters auf ,,Plain Text‘‘, gebt in das sich öffnende Fenster ,,HTML‘‘ ein und tippt auf Enter. Jetzt können wir mit dem HTML-Grundgerüst beginnen.

Das Doctype-Tag gibt an, in welcher HTML-Version ihr arbeitet und welche Befehle der Browser zu erwarten hat. Dieses Tag steht immer an aller erster Stelle eines HTML-Dokuments. Im darauffolgenden Header seht ihr nun das Meta-Tag charset=“uft-8“. Dieses sorgt dafür, dass der Browser Umlaute in euren Texten richtig darstellt. Ebenfalls im Header ist das Titel-Tag zu finden. Was ihr hier eingebt, ist später im Browser-Tab zu sehen. Damit hätten wir auch schon den Header gefüllt und können nun beginnen den Body aufzubauen.

Jeder fängt einmal klein an. Deshalb versuchen wir uns heute einfach mal an einer Überschrift. Wie ihr sehen könnt, steht meine Überschrift in einem h1-Tag. Dieses Tag gibt dem Browser bescheid das der Inhalt, der dazwischen steht, eine Überschrift werden soll – Also größer und auffälliger als der normale Fließtext dargestellt werden sollte.

Wenn ihr euer Dokument nun unter ,,index.html“ speichert und die Datei mit einem Doppelklick öffnet, sollte ein Browserfenster erscheinen, das so aussieht:

 

Herzlichen Glückwunsch, ihr habt soeben eure erste Internetseite erstellt. Naja fast aber es ist ja schon einmal ein Anfang. Wie ihr sicher auch findet, sieht die Überschrift ein wenig langweilig aus und das wollen wir jetzt ändern. Dazu erstellen wir ein externes Stylesheet.

Ihr öffnet dazu in Atom ein neues Dokument, in dem ihr auf der obersten Leiste in eurem Editorfenster erst auf File und dann auf New File klickt. Es erscheint wieder ein leeres Fenster. Wie auch schon im Html-Dokument müssen wir dem Editor nun bescheid geben, dass wir diesmal eine CSS-Datei erstellen möchten. Dazu klicken wir wieder auf Plain Text und geben CSS ein. Jetzt können wir unsere erste CSS-Klasse erstellen. Ich möchte meine Überschrift gerne lila färben und auf die Schriftgröße 42 px vergrößern.

Um eine CSS-Klasse einzuleiten, setze ich als Erstes einen Punk. Alle CSS-Klassen haben eigene Namen, also müssen wir auch unsere Klasse jetzt benennen. Ich habe sie in diesem Fall ,,ueberschrift‘‘ genannt. Merkt euch: Die Namen von Klassen dürfen keine Leerzeichen, Umlaute oder Großbuchstaben enthalten.

In die geschweifte Klammer schreibe ich nun rein, was ich mit dieser Klasse bezwecken möchte. Ich möchte einmal die Farbe (color) also eine Eigenschaft der Überschrift in Lila (purple) ändern. Ebenfalls möchte ich, dass die Schriftgröße (font-size) 42 px beträgt. Die einzelnen Befehle werden jeweils mit einem Semikolon abgetrennt.

So jetzt haben wir eine CSS-Klasse erstellt. Nur wie kommt die Klasse in unser HTML-Dokument? Dazu müssen wir unser externes Stylesheet in die HTML-Datei einbinden.

Speichert eure CSS-Datei unter dem Namen ,,stylesheet.css‘‘ ab und öffnet nun euer HTML-Dokument. Achtet bitte darauf das eure HTML und CSS-Datei am gleichen Ort abgespeichert sind. Wir verbinden nun die beiden Dateien in dem wir im Header des HTML-Dokuments den Befehl schreiben. Damit wird die CSS-Datei in das HTML-Dokument eingebunden und kann die Befehle umsetzen.

Damit die CSS-Klasse auch weiß, auf welchen Bereich sie Einfluss haben soll, müssen wir sie einem Tag zuordnen.

Unsere Mission ist ja, die Überschrift zu gestalten, also schreiben wir in den h1-Tag den Befehl class=“ueberschrift“. Wenn ihr jetzt euer HTML-Dokument speichert und wieder im Browser öffnet, dann… Tadaa! Färbt sich eure Überschrift lila und wird größer.

Na? Ist doch gar nicht so schwer, wie es vielleicht auf den ersten Blick aussieht oder? Probiert doch einfach mal selber, was alles mit diesem Stylesheet möglich ist. Viele weitere Tipps findet ihr unter www.wiki.selfhtml.org.

Viel Spaß beim Lesen!