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.

Tipp: Diese Entwicklertools öffnest du auch, indem du einfach F12 drückst.

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! 🙂

Anne Schwarz | Bloggerin

Anne Schwarz

Hey, ich bin Anne - Multipassionate, waschechtes Dorfkind, Pferdemädchen und Bloggerin aus Leidenschaft.

Ich blogge seit beinahe 20 Jahren und liebe es einfach. Hier auf der Bloghexe teile ich mit dir meine Tipps und Erfahrungen - damit auch dein Blog zauberhaft wird!

» mehr über mich & die Bloghexe

Dieser Beitrag wurde bereits 12mal kommentiert - was denkst du?

Lies weiter:

Farben in CSS

So wird’s bunt: Farben in CSS

Keine Angst vor #f35723 & Co.! Was sich hinter den mysteriösen Farbcodes in CSS verbirgt und wie du selber ganz einfach Farbe ins Spiel bringst:

Schriftgestaltung mit HTML & CSS

Willkommen zum nächsten Artikel der Reihe {Coding Love}! 🙂 Die Grundlagen von HTML & CSS hast du ja bereits in Teil 1 und Teil 2 kennengelernt.Heute wird es konkreter – du erfährst, wie du Texte mit verschiedenen HTML-Tags für Überschriften, Absätze, Aufzählungen und so weiter versiehst und wie du anschließend mit CSS die Schriftgröße und Schriftart, […]

12 Kommentare

  1. Das Kommentieren des Codes gewöhne ich mir gerade an.
    Ist nützlich, wenn man irgendwo was dazwischen noch einfügen möchte, dann weiß man welches End-Div zu welcher Klasse gehört und so 😀 Außerdem nützlich wenn man nach Zeiten mal wieder am Theme rumdoktorn will… ich merk mir nämlich nie, wie ich das aufgebaut hab 😀

    Copy+Paste sind meine besten Freunde.
    Bei meinem aktuellen „Das würde ich gern auch mal umsetzen“, such ich mich aber zurZeit dumm und deppert!
    Ich guck auch gerne bei http://codepen.io/ vorbei, wenn ich ne kleine Spielerei suche 😀

    • Eine Art Filter.
      Wie man ihn von Galerien kennt, dass über dem Grid die Kategorien stehen und wenn man draufklickt lädt der die Kategorien, aber nicht das komplette Frame sondern quasi nur in den einen DIV (und das noch so slidymäßig)… also so quasi iFrame-Mäßig XD

      Ich werde mir mal deinen Link anschauen 🙂
      Vielleicht finde ich da was.

      Und zZ versuche noch bei dem WordPress-Suchformular das „Suchen“ in eine Lupe via FontAwesome zu machen *GRML*

  2. Toll wieder mal. Dieses Mal kannte ich schon fast alles, was mich auch ein bisschen stolz macht 😉 Aber dass man in der Element-Suche rumkorrigieren kann, das wusste ich nicht und hilft mir sehr, ich arbeite nämlich gerade an meinem neuen Bloglayout. Danke!

  3. Hi Anne, gut erklärt! Würde aber nicht empfehlen, den Code bei WordPress direkt ins Theme einzufügen. Beim nächsten Theme-Update gehen sonst sämtliche Änderungen verloren. Besser ist es, ein Child-Theme anzulegen oder das Plugin Simple Custom CSS zu nutzen.

  4. Hallo Anne, Glückwunsch zu den beiden Artikeln zu HTML und CSS und zu Deinem insgesamt lesenswerten Blog. Hat mich heute bestimmt zwei Stunden gekostet 🙂

  5. Hallo 🙂
    kann man 2 css codes auf einmal benutzen?
    ich benutze schon damit mein header in der mitte steht und jetzt möchte ich einen zweiten css code hinzufügen damit meine menüleiste unter dem header ordentlich ist! (die ist nämlich durcheinander)
    wie schaffe ich es, dass ich zwei css codes gleichzeitig benutzen kann?
    LG

    • Hallo Zeina,

      klar, du kannst unendlich viele verschiedene CSS-Anweisungen gleichzeitig verwenden. 🙂
      So eine Webseite besteht ja aus Dutzenden von Elementen, und natürlich kannst du die alle stylen.

      Dafür schreibst du in deiner CSS-Datei einfach eine neue Zeile – also quasi so:

      #header {
      text-align: center;
      }

      #menueleiste {
      font-size: 14px;
      }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nichts mehr verpassen?

Abonniere meinen Newsletter, um über neue Inhalte benachrichtigt zu werden. Kostenlos & komfortabel direkt in deinen Posteingang! 🙂