HTML + CSS für Blogger: Teil 1 – HTML Basics

Neulich habe ich beim Blogst Twitter Chat mitgemacht und es ging darum wie man seinen Blog verbessern will. Dabei fiel mir auf, dass viele Blogger gern mehr über HTML und CSS wissen würden. Da ich beruflich Webseiten entwickle, dachte ich, ich schreibe euch mal ein paar Anleitungen. Eine kleine Umfrage in der Blogst Facebook-Gruppe ergab, dass viele Leute erst mal die Basics brauchen. Also fange ich damit an! Natürlich dürfen auch Nicht-Blogger mitmachen ;)

HTML + CSS für Blogger: Teil 1 HTML Basics

Was ist das überhaupt?

Hier eine Übersicht über diese Programmiersprachen. Ich habe jeweils auch mit angegeben, wofür die Abkürzungen stehen. Ich finde das muss man nicht auswendig wissen, aber kann man mal gehört haben:

HTML (Hypertext Markup Language) ist die Sprache aus der die meisten Webseiten bestehen, hier werden die puren Inhalte, also Texte und Bilder eingefügt und in eine Struktur gegeben.

CSS (Cascading Style Sheets) wird benutzt um HTML Seiten zu stylen, hier geht es ums bloße Aussehen, Inhalten gehören hier nicht hin.

JS (JavaScript) wird viel für interaktive Elemente benutzt, zum Beispiel damit man sich durch eine Bildergalerie klicken kann oder um Werte in Formularen zu überprüfen und noch vieles mehr. Wenn ihr möchtet kann ich dazu später ein paar kleinere Beispiele zeigen.

Dann gibt es auch noch anderen Sprachen, die mehr im Hintergrund agieren zum Beispiel PHP. PHP wird zum Beispiel benutzt um auf Daten in einer Datenbank zuzugreifen. Wenn du eine Webseite oder einen Blog selbst hostest und dafür Dateien auf einen Server kopierst, werden dir vermutlich auch Dateien mit der Endung „.php“ über den Weg laufen. Ich werde diese Sprache aber im Rahmen dieser Serie nicht weiter behandeln.

Auf gehts!

So fangen wir an! Ich finde man lernt immer am besten dadurch, dass man Dinge selbst ausprobiert. Daher kommen jetzt ein paar Sachen zum mitmachen! Jetzt denkst du vielleicht:

Oh nein, ich kann das doch gar nicht, was wenn ich etwas kaputt mache?

Kein Problem wir fangen mit ein paar Trockenübungen an Land an, du kannst nichts kaputt machen ;)

Muss ich jetzt irgendein Programm runterladen und Dateien irgendwo abspeichern? Och nee, das mach ich lieber später…

Nein, alles was du hierfür brauchst ist ein Browser! Und zwar verwenden wir eine Seite, die sich codepen.io nennt.

1. Vorbereitungen

Öffne bitte diesen Link in einem neuen Tab oder Fenster: http://codepen.io/pen/
Du siehst dort 3 kleine Boxen mit den Überschriften HTML, CSS und JS. Wir brauchen erst mal nur HTML, die anderen beiden Boxen kannst du mit einem Klick auf das X schließen.
In der großen weißen Fläche wird gleich die Webseite erscheinen, die wir zusammen erstellen.

2. HTML-Struktur und „Hallo Welt“

Zuerst mal braucht jede HTML Seite ein Grundgerüst. Das sieht so aus:

See the Pen HTML Struktur by Julia (@gruenewuerfel) on CodePen.

(Wenn du hier auf HTML oder Results klickst, kannst du zwischen den beiden Ansichten wechseln)

HTML besteht aus sogenannten Tags, die mit spitzen Klammer eingeschlossen sind. Meistens sind es ein öffnendes und ein schließendes Tag. Das schließende erkennt ihr am </ am Anfang. Dazwischen können sich weitere Tags und Texte befinden.

Die Tags sind also ineinander verschachtelt. Um einen besseren Überblick zu behalten, macht man es beim Schreiben von HTML normalerweise so, dass man jede weitere Verschachtelung ein Stück einrückt. Tags die sich in anderen Elementen befinden nennt man auch Kinder oder „Child Elements“. Anders herum kann man man die Elemente die sich um andere herum befinden auch Eltern Elemente (oder Parent Elements) nennen.

Du kannst diese Struktur schon mal in die Box mit dem Titel HTML einfügen. Da wir aber bisher nur eine Struktur haben, sehen wir auf der rechten Seite noch nichts.

Merke: HTML-Tags werden zwar vom Browser gelesen aber nicht direkt angezeigt.

Okay, das ist natürlich noch ziemlich langweilig. Die eigentlichen Inhalte gehören zwischen die beiden body Tags. Schreibe dort mal irgendeinen Text rein. Du wirst sehen, der Text erscheint dann auf der rechten Seite.

See the Pen Hallo Welt! by Julia (@gruenewuerfel) on CodePen.

Und damit hast du schon deine erste HTML Seite erstellt! Es ist übrigens eine Tradition, dass man beim Lernen einer Programmiersprache zuerst lernt wie man die Worte „Hallo Welt“ ausgibt. Der erste Schritt in deiner Programmierer Kariere ist also also getan ;)

3. Weitere HTML-Tags

Schauen wir uns mal weitere HTML-Tags an. Es gibt zum Beispiel Überschriften. Diesen haben den Namen h1 bis h6. Das h steht hierbei für „Headline“. Die H1 ist die größte Überschrift, die anderen sind jeweils ein Stück kleiner. Außerdem gibt es zum Beispiel noch Absätze <p> </p> (das p steht für paragraph), um Texte in Absätze zu unterteilen. Dann gibt es noch Container <div> </div> (div steht für division), die sich gut dafür eigenen bestimmte Elemente zusammen zu gruppieren.

See the Pen Mehr HTML Elemente by Julia (@gruenewuerfel) on CodePen.

Wenn du auf „Edit on Codepen“ klickst, kannst du in meinen Beispielen herumspielen und sie verändern. Nur zu, du machst dadurch nichts kaputt!

Wenn man ein schließendes Tag vergisst, kann es zu Fehlern in der Anzeige kommen. Moderne Browser sind clever genug um trotzdem etwas anzuzeigen, aber manchmal sieht es dann nicht so aus, wie man es gern hätte. Das kannst du auch ganz einfach selbst ausprobieren. Entferne das schließenden Tags von der letzten Überschrift </h6>! Was passiert mit der Schrift?

Es gibt aber auch Tags die nur aus einen einzelnen Element bestehen, zum Beispiel <br> was für einen Zeilenumbruch (engl. „break“) steht.

See the Pen Bilder und Links in HTML by Julia (@gruenewuerfel) on CodePen.

Links

Ein sehr wichtiges Element sind natürlich Links. Das Tag für einen Link lautet <a> </a>. Damit man jedoch weiß, wohin der Link führen soll, musst du die Adresse noch in dem Tag angeben, zum Beispiel so: href="https://google.de". So ein Element im HTML-Tag nennt man Attribut. Zwischen den einzelnen Tags steht dann der Text, den man anklicken kann. Theoretisch kann man damit natürlich auch Unfug treiben und den Link auf etwas anderes zeigen lassen als man im Text vorgibt. Das ist aber höchstens cool, wenn man ein Rickrolling machen will, sonst lass lieber die Finger davon.

Bilder

Ebenfalls wichtig ist es natürlich Bilder einbauen zu können. Denn was ist denn schon ein Blog ohne Bilder? Das HTML-Tag dafür sieht so aus:

<img src="" alt="">

Das src Attribut steht für „Source“ also Quelle. Hier kommt der Link zum Bild rein. „alt“ steht für „alternative text“, das ist ein Text der angezeigt wird, sollte das Bild nicht geladen werden können. Sollte jemand der Blind ist die Seite besuchen (ja, das geht! Es gibt Programme, die lesen Webseiten vor), dann würde demjenigen der alt Text an der Stelle vorgelesen werden. Hier sollte man also eine Beschreibung von dem Bild angeben zum Beispiel „Mein leckerer selbstgebackener Käsekuchen“. Suchmaschinen finden alt-Text übrigens auch klasse. Damit kann dein Käsekuchen dann auch in der Bildsuche gefunden werden.

Ich wollte in dem Beispiel hier eigentlich ein Bild aus meinem Blog einbinden, aber das hat nicht funktioniert. Ein Bild, was auf einem anderen Server liegt in eine Seite einbinden nennt man Hotlinking. Das ist meistens überhaupt nicht gern gesehen, da manche Seiten ihre Server danach bezahlen, wie viele Leute darauf zugreifen (das nennt man Traffic) oder eine Traffic-Begrenzung haben. Wenn ich jetzt also ein Bild von jemand anderem einbinde, dann dann muss der andere quasi dafür zahlen, wenn es auf meiner Seite erscheint. Das ist natürlich nicht so toll. Es kann sein, dass WordPress soetwas daher verhindert. Um euch aber trotzdem zeigen zu können, habe ich jetzt eine Katze von Photobucket eingebunden, die erlauben Hotlinking.

Wenn du ein Bild in ein Link-Tag schreibst, kannst du auch Bilder als Links verwenden.

Kommentare

Kommentare sind Elemente, die nicht auf der Webseite erscheinen, aber du kannst sie nutzen um im Code Notizen zu machen. Zum Beispiel so:

<!-- Hier fehlt noch etwas -->

Du hast bestimmt bemerkt, dass eine reine HTML Seite ohne CSS vom Browser als schwarze Schrift auf weißem Untergrund angezeigt wird. Standardmäßig zeigen Browser je nach Element minimales Styling an, zum Beispiel sind Überschriften größer als normaler Text und haben etwas Abstand nach Oben und unten, Absätze haben ebenfalls Abstand oben und unten und Links sind blau und unterstrichen. Damit wir das ganze schöner machen können, brauchen wir CSS. Dazu komme ich beim nächsten Mal, doch vorher habe ich mir noch ein paar Hausaufgaben ausgedacht:

Kleine Hausaufgaben für euch:

1) Öffne deinen Blog (oder eine beliebige andere Seite), mache einen Rechtsklick und wähle „Quellcode anzeigen“. Was für HTML-Tags findest du, die du schon kennst? Wofür werden sie verwendet?

2) Welche HTML-Tags kennst du noch nicht? Man braucht nicht alles wissen, man sollte nur wissen wo man nachsehen kann. Also picke dir ein unbekanntes Tag heraus und schlage nach, zum Beispiel auf https://wiki.selfhtml.org, wozu es benutzt wird. Baue es in deine Beispielseite ein.

3) Speicher deinen Codepen mit einem Klick auf den Save Button. Ich würde mich freuen, wenn ihr mir zeigt, das ihr so gemacht habt, indem ihr euren Codepen Link in den Kommentaren teilt.

Puh, das war erst mal eine ganze Menge oder? Seid ihr gut mitgekommen? Wenn du irgendwo hängen geblieben bist schreib mir gerne einen Kommentar!

Beim nächsten Mal geht es weiter mit CSS! Ich freue mich auf euch!

4 Gedanken zu „HTML + CSS für Blogger: Teil 1 – HTML Basics

  • 13. März 2016 um 16:47
    Permalink

    Super Einführung. :)

    Ich erkläre die wichtigste Regel gerne so:

    Bei HTML wird von Elementen gesprochen. Ein Element besteht dabei aus drei Komponenten, nämlich dem Starttag, dem Inhalt und dem Endtag. Lasst euch nicht verwirren – stellt euch das einfach wie bei einem Hamburger vor: Untere Brötchenhälfte, Belag, obere Brötchenhälfte.

    So ein Burger schmeckt sicherlich auch, wenn man die obere Brötchenhälfte weglässt. Aber das funktioniert dann alles nicht mehr so gut: Er lässt sich schlecht mit einer Hand essen und eventuell fällt auch Belag runter. So ähnlich ist das bei HTML auch: Auf der sicheren Seite seid ihr nur, wenn ihr euer Element auch ordnungsgemäß schließt. Das könnt ihr aber auch abkürzen, indem ihr vor der hinteren spitzen Klammer noch einen Schrägstrich einfügt, also z. B. .

    :-)

    Antworten
    • 14. März 2016 um 19:17
      Permalink

      Danke! Dein Burger-Vergleich gefällt mir :D
      Das Abkürzen geht nur in bestimmten Elementen wie dem <img> oder dem <br>. Man kann sowohl <br> als auch <br/> schreiben.
      Bei einem <div></div> hat man ja normalerweise einen Inhalt dazwischen. Da macht nur ein Tag nicht so viel Sinn ;)

      Aber ich glaube da hat mein Blog auch einen Teil von deinem Kommentar gefressen, sorry.

      Antworten
  • 24. März 2016 um 11:27
    Permalink

    Cool, dass du die die Mühe machst, alles so toll zu erklären!
    Ich hab zwar einen Programmierer an meiner Seite und selbst mal HTML und CSS gelernt, das ist aber schon ein paar Jahre her und seitdem hab ich mich wenig damit beschäftigt. Was du hier erklärt hast ist also kein Neuland für mich, aber als Auffrischung so häppchenweise doch richtig gut :) Danke!
    Liebe Grüße,
    Ronja

    Antworten
    • 26. März 2016 um 13:04
      Permalink

      Hach, das freut mich :) Ich war mir nicht sicher, wie viele Leute das überhaupt mitmachen… Dann werde ich demnächst mal den nächsten Teil vorbereiten :)

      Antworten

Schreibe einen Kommentar

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

%d Bloggern gefällt das: