HTML & CSS – jetzt kannst du loslegen

Na? Juckt es dir in den Fingern, endlich deinen ersten eigenen Code zu tippen? 🙂
Auf geht’s!

Im ersten Teil meiner Einführung in das Thema HTML & CSS hast du ja schon erfahren, wofür du die beiden Sprachen benötigst und wie sie generell aufgebaut sind.

Heute geht’s weiter mit dem zweiten Teil der Basics: wo gibst du den Code bei WordPress ein? Brauchst du ein spezielles Programm dafür? Und welche versteckten Features deines Browsers helfen dir beim Coden? 🙂

Wo schreibe ich HTML & CSS? – Hallo Editor!

Wie den Code jeder Programmiersprache schreibst du auch HTML und CSS in einem Texteditor.
Es gibt sehr einfache Editoren, wie sie beispielsweise bei Windows zum Standardumfang gehören. Komfortablere Programme machen dir das Leben leichter, weil sie deinen Code zum Beispiel farblich strukturieren oder dir eine Auto-Vervollständigung anbieten.

Ich selber arbeite gerne mit Sublime, was ich hier vor einiger Zeit ausführlich vorgestellt habe.

So sieht dann zum Beispiel ein Ausschnitt aus einem WordPress-Template aus:

⚠️ Word, Pages und andere Textverarbeitungsprogramme sind nicht dafür geeignet, Code zu tippen. Denn sie fügen zum Teil unsichtbare Formatierungsanweisungen hinzu, die deinen Code kaputtmachen können.

Je nachdem, mit welchem Blogsystem du bloggst, kannst du den Code auch direkt im Browser über einen Editor bearbeiten. Hier musst du selber entscheiden, ob dir dieser Editor reicht oder ob du dir den Code lieber in ein „richtiges“ Programm kopierst.

Code einfügen bei WordPress

Sofern du WordPress selber hostest, hast du die einzelnen Dateien ja mit einem FTP-Programm (wie etwa Cyberduck) auf deinen Webspace geladen. Hier bietet es sich an, sie aus dem FTP-Programm heraus direkt mit einem Editor zu öffnen, beispielsweise mit Sublime oder Brackets.

Wenn du nur mal kurz ein, zwei Zeilen ändern musst oder generell lieber den Editor im Browser nutzt, dann geh auf Design » Editor.
Hier siehst du sämtliche Dateien deines Themes, also sowohl die Templates (*.php), in denen sich dein HTML befindet, als auch die CSS-Datei und deine functions.php.

Bei wordpress.com kannst du den Code leider erst bearbeiten, wenn du in das kostenpflichtige „Custom Design Upgrade“ investiert hast.

So hilft dir dein Browser beim Coden

Ganz egal, ob du Chrome nutzt oder Firefox oder was auch immer – die meisten aktuellen Browser bieten einige Optionen für Entwickler und Webdesigner.

Im Folgenden verwende ich Chrome als Beispiel, weil das mein Standardbrowser ist – so ähnlich funktioniert das aber auch in den meisten anderen Browsern.

Zeig mir das HTML & CSS!

Mach einen Rechtsklick irgendwo auf eine Seite und wähle „Element untersuchen“. Es öffnet sich ein zweigeteilter Bereich, in dem du das HTML und CSS siehst.

Du kannst jedes beliebige Element auf der Seite anklicken, beispielsweise eine Überschrift, und siehst direkt den entsprechenden Abschnitt im HTML und CSS.
Das ist verdammt praktisch!  Du siehst dadurch nämlich direkt, warum sich ein Element so verhält, wie es das nun einmal tut.
Sofern du kein Minify-Script eingeschaltet hast, das deine Dateien komprimiert, erfährst du sogar die Zeilennummer deines Stylesheets, in der die jeweilige Anweisung steht.

Außerdem kannst du hier den Code direkt ändern, um zu sehen, welche Auswirkungen das hat. Wenn du zum Beispiel die Schriftgröße auf 30px stellst, siehst nur du das – kein anderer Besucher der Webseite. Gespeichert wird das auch nicht, das ist tatsächlich nur eine Ansicht zum Ausprobieren.

Es kommt ja doch auf die Größe an

Wie dein Layout auf kleineren Bildschirmen aussieht, kannst du ganz einfach herausfinden, indem du das Browserfenster kleiner ziehst.

Über das Plugin „Web Developer“, das es für Chrome und Firefox gibt, bekommst du noch ein paar nützliche Optionen mehr. Unter anderem kannst du das Browserfenster mit einem Klick auf eine gewünschte, fest definierte Größe skalieren.

Tu doch einfach mal so als ob…

Ein weiteres praktisches Feature von Chrome ist die sogenannte Emulation: hier kannst du direkt im Browser verschiedene Mobilgeräte wie etwa ein iPhone simulieren und testen, wie deine Webseite dort im jeweiligen Standardbrowser dargestellt wird.
In den meisten Fällen kommt diese Emulation hin, nur dann und wann sieht es auf dem Gerät selber dann doch etwas anders aus.

Klick dazu auf das Smartphone-Icon an der linken Seite und wähle dein gewünschtes Gerät oben im Dropdow-Menü aus. Aktualisiere die Seite dann einmal, um die korrekte Ansicht zu erhalten.

Chrome bietet noch eine ganze Reihe weiterer cooler Funktionalitäten, das würde an dieser Stelle aber zu weit führen. 😉

3 Tipps zum Coden

Alles klar? – Dann kann es ja losgehen! 🙂

Bevor du in die Tasten haust, möchte ich dir aber noch einige Tipps und Best Practices mit auf den Weg geben, die sich einfach bewährt haben:

Tipp #1: Kommentiere deinen Code!

Dass Kommentare wichtig sind, weißt du als Blogger ja ohnehin. 😉
Aber auch beim Coden sind sie verdammt hilfreich, nämlich wenn du deinen Quelltext mit Anmerkungen versiehst.

Bei ineinander verschachtelten langen HTML-Blöcken ist es zum Beispiel sinnvoll, wenn du dir dazu schreibst, welches Div das denn gerade eigentlich ist, das da endet – ist es das von der Sidebar generell oder das vom Instagram-Widget oder doch etwas ganz anderes? Und auch im CSS helfen dir Kommentare dabei, dich schnell in der Datei zurechtzufinden.

Im HTML schreibst du Kommentare über die folgende Notation:

<!-- Hier steht deine Anmerkung -->

Im CSS sehen Kommentare so aus:

/* Hallo, ich bin ein Kommentar */

Kommentare können sich auch über mehrere Zeilen erstrecken.

Bei umfangreicheren HTML-Dateien (oder Templates, bei denen sich der Code über mehrere Dateien erstreckt) notierst du dir den Namen des jeweiligen Abschnitts am besten vor und nach dem Element, beim schließenden Tag mit einem Slash / davor. Also beispielsweise:

<!-- Sidebar -->
<aside id="sidebar">
   ...
</aside>
<!-- / Sidebar -->

Wenn du mit der Materie etwas vertrauter bist, kannst du den Kommentar beim öffnenden Tag auch weglassen, da dort ja ohnehin die Klasse angegeben ist und du schon daran sehen kannst, um was für ein Element es sich handelt.

In CSS-Dateien arbeite ich gerne mit zusätzlichen Zeichen wie Rauten # oder Unterstrichen _ in den Kommentaren, um einzelne Abschnitte deutlicher zu kennzeichnen:

/* ##### SIDEBAR ##### */

/* ___ Instagram-Widget ___ */

div.instagram { ... }

/* Überschrift */
div.instagram h3 { ... }

/* ___ Twitter-Widget ___ */

div.twitter { ... }

/* ##### FOOTER ##### */

Tipp #2: Verwende Zeilenumbrüche und Einrückungen

Ein übersichtlicher Code ist Gold wert. Du findest dich viel schneller zurecht und vermeidest dadurch auch einfach Fehler.

Kommentare sind da schon ein Schritt in die richtige Richtung, fast noch wichtiger ist aber eine saubere Notation: gewöhn dir ordentlichen Code mit Einrückungen, Zeilenumbrüche und Absätzen an und mach dir das Leben dadurch deutlich leichter. 😉

Verschachtelte Elemente rücke ich immer mit einem Tabstopp ein:

#header {
   background: #fff;
   border-bottom: 2px solid #ccc;
}

Pro Zeile schreibe ich immer nur eine CSS-Anweisung. Dadurch wird der Code zwar länger, aber viel leichter zu überfliegen.

Tipp #3: Sei neugierig!

Probiere aus. Google.
Gewöhn dir an, bei anderen Webseiten immer mal wieder einen Blick in den Quelltext zu werfen – wie ist dieses Menü gebaut, wie kommt der Schlagschatten dort zustande?

Genau wie Fahrradfahren lernst du das Coden am besten, indem du es einfach tust.
Und das Gute ist ja: egal wie schief du dein HTML auch versehentlich verschachteln magst, es kann nichts explodieren. 😉

So… das war es erstmal mit meiner zweiteiligen Einführung in das Thema HTML & CSS. Ich hoffe, dir qualmt jetzt nicht der Kopf – für Fragen weißt du ja, wo das Kommentarformular steht. 😉

In den nächsten Artikeln werde ich auf speziellere Anwendungsfälle eingehen, beispielsweise wie du Zitate ansprechend gestalten kannst oder wie Links gestylt werden.

Happy coding! 🙂