[HTML für WordPress] 0. Basics

Diese Rubrik soll euch beim Gestalten eurer Blogartikel helfen. Sie verrät euch die Geheimnisse, die hinter dem mystischen HTML-Editor stecken.

Unbenannt.PNG


Die Idee zu dieser Beitragsreihe hatte ich beim Schreiben diverser Artikel. Schnell habe ich gemerkt, dass mir im normalen, visuellen WordPress-Editor eine Vielzahl an Möglichkeiten fehlt. Es ist nicht möglich, Tabellen zu erstellen, man kann keine Tabulatoren verwenden oder unterschiedliche Schriftarten für unterschiedliche Typen von WordPress-Artikeln verwenden. Eine Lösung für diese Probleme musste her und die fand ich schnell. Ich hab Informatik studiert und obwohl ich kein Webdesigner bin, kenne ich viele Grundlagen in HTML. Eins der ersten Dinge, die mich störte, bemerkte ich bei meiner Rezension zu „Noch so eine Tatsache über die Welt„. Dort habe ich ganz unten Fakten zum Buch, wie Autor, Seitenzahl, ISBN aufzählen wollen. Mit einem einfachen Doppelpunkt getrennt, sah es einfach hässlich aus. Also hab ich mir überlegt, wie ich es hinbekomme, dass der Text richtig untereinanter steht. Wie ich das gemacht habe, werde ich euch im nächstem Beitrag zeigen. Hier möchte ich euch erstmal grundlegende Infos zu HTML vermitteln. Wichtig ist, dass ihr danach wisst, wie ihr den HTML-Editor aufruft, was HTML-Tags und was HTML-Attribute sind.


Was ist HTML?

HTML ist die Abkürzung für Hypertext Markup Language. Es ist also eine Sprache. Diese Sprache wurde vom World Wide Web Consortium – welches kurz W3C heißt – ausgedacht, um zu beschreiben, wie eine Internetseite aufgebaut sein soll. Man sagt damit, welcher Text eine Überschrift sein soll, welcher Text in Tabellen stehen soll, wo Bilder und wo Links stehen sollen. Man kann Sätzen oder Worten eine besondere Bedeutung zuweisen, indem man ihn dick oder kursiert anzeigt und so weiter. Dabei wird normalerweise nicht bestimmt, wie der Text aussehen soll.

Wie kann man denn dann verschiedene Textarten verwenden?

Dafür ist wiederrum Cascading Style Sheets (CSS) verantwortlich. Teilweise hat WordPress seine eigenen CSS-Dateien, teilweise kann man auch im HTML-Editor darauf zugreifen.

Wie kommt man zum HTML-Editor?

Das ist ganz leicht. Da, wo ihr auswählen könnt, ob ein Text dick, kursiv, als Überschrift, linksbündig usw. erscheinen sollt, findet ihr auch die Auswahl, um zum HTML-Editor zu wechseln. Da klickt ihr einfach drauf.

Unbenannt.PNG

Da steht der Text aber voll hässlich da, und überall sind komische Klammern.

Genau. Der Text wird im HTML-Editor erstmal ohne Formatierung dargestellt und zwischen dem von euch geschriebenem Text steht HTML-Code. Davon solltet ihr euch nicht irritieren lassen. Man erkennt den normalen Text relativ schnell.

Die komischen Buchstabenkürzel, die in eckigen Klammern (<>) erscheinen, nennt man HTML-Tags. Tags kennt ihr vermutlich von Hashtags. Tags kennzeichnen einen Text, damit euer Internetbrowser weiß, dass es sich dabei um eine besondere Informationen handelt. Hashtags sagen einem Programm, dass ein Wort, das mit # gekennzeichnet wurde, schneller wiedergefunden werden soll. Der Hashtag wird, bildhaft gesprochen, in eine Liste geschrieben. In diese Liste wird dann auch geschrieben, wo der Hashtag zu finden ist. Dann muss man, wenn man den Hashtag-Begriff sucht, nicht alle möglichen Texte danach durchsuchen, sondern nur den Text aus dieser Liste finden, der mit dem Hashtag markiert wurde.

Was macht der HTML-Tag?

Ein HTML-Tag beschreibt, wie der Text aufgebaut sein soll. Meistens gibt es zwei Tags, die zusammengehören. Einen, um den Beginn zu markieren, und einen für das Ende. Den Bereich dazwischen bezeichnet man als Markup. Der Beginn eines Absatzes wird z.B. durch <p> und das Ende durch </p> gekennzeichnet. Dazwischen steht dann immer der vom Blogger geschriebene Text. Es gibt aber auch Tags, die für sich alleine stehen. Das ist zum Beispiel der Tag <hr />, der für die horizontale Linie verwendet wird oder <br /> für den Zeilenumbruch. Die erkennt man leicht daran, dass der Slash „/“ hinter dem hr oder br steht.

Was ist dann ein Attribut?

Manchmal steht in einem Tag noch etwas mehr als nur einzelne Buchstaben. Ein Beispiel dafür ist der Ankertag. Dieser besteht aus einem a gefolgt von href=“link.com“ (<a href=“link.com“>). Dabei ist href ein Attribut des Ankertags <a>. Dieses Attribut beschreibt eine Verlinkung auf eine Seite im Internet. Es gibt noch eine ganze Reihe anderer Tags und Attribute. Über andere Attribute kann man z.B. die oben genannten Cascading Style Sheets verwenden oder Textunterschriften für Bilder angeben. Durch Attribute hat man die Möglichkeit, dem Text innerhalb eines Tag-Bereichs weitere Eigenschaften zuzuweisen, z.B. ob der Text ein Link sein soll.


Das ist alles so kompliziert.

Ich stecke oft leider in meiner eigenen Welt fest. Für mich als ITler ist das, was ich zu HTML beschreibe, relativ leicht und ich kann die Stolperstricke dabei gar nicht mehr erkennen. Sollte ich also nicht genau genug erklärt haben, was ein Tag und was Attribute sind, dann freue ich mich über eure Fragen in den Kommentaren.

 

next: Ordnung durch Tabellen

Advertisements

5 Kommentare zu „[HTML für WordPress] 0. Basics

  1. Hey-Ho Sven,
    ich finde alles, was mit Html-Codes zu tun hat, recht spannend. 😃
    Ich glaube, wenn man sich in die Thematik erstmal reingefuchst hat, kommt einem das nicht mehr so kompliziert vor. Und ein paar Bücher zu dem Thema sind ja zum Glück auch schon auf dem Markt!
    Liebe Grüße

    Gefällt 1 Person

    1. Huhu Melanie,
      das freut mich zu hören. Ich werde nachher gleich noch den zweiten und etwas praktischeren Teil zu meiner HTML-Reihe veröffentlichen.
      HTML ist ja auch kein neues Thema. Mir ist nur aufgefallen, dass WordPress einen da nicht gut an die Hand nimmt und viele Dinge sogar eher zu verstecken scheint.
      Liebe Grüße
      Sven

      Gefällt 1 Person

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s