Kleine Einführung in die HTML

Vorbemerkung

Diese kleine Abhandlung ist unter keinen Umständen eine vollwertige Beschreibung der HTML!
Sie will nur einige wesentliche Elemente der HTML beschreiben und es so dem Leser ermöglichen, den HTML-Code eines WordPress-Blogs zu verstehen und evtl. zu bearbeiten.

Zitat aus Wikipedia (im Original sind weiterführende Links enthalten, die im Zitat entfernt wurden):

Die Hypertext Markup Language (HTML, dt. Hypertext-Auszeichnungssprache), oft kurz als Hypertext bezeichnet, ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt.

Dem Text wird durch Auszeichnungen (engl. markup) von Textteilen eine Struktur verliehen. … Die meisten dieser HTML-Elemente werden durch ein Tag-Paar markiert, das heißt durch einen Starttag und einen Endtag. Ein Starttag beginnt immer mit dem Zeichen „<“. Es folgt der Elementname (z. B. „p“ für einen Absatz oder „h1“ für eine Überschrift erster Ordnung) und optional eine Liste seiner Attribute (z.B. „class="warning"“). Mit einem „>“ wird der Starttag geschlossen. Ein Endtag besteht aus den Zeichen „</“, dem Elementnamen und dem abschließenden „>“. Attribute dürfen im Endtag nicht enthalten sein.

Ein HTML-Beispiel mit dem ersten Satz aus dem hier vorliegenden Text soll diese abstrakte Definition verständlicher machen:

<p>Diese kleine Abhandlung ist unter <strong><u>keinen</u></strong> Umständen eine vollwertige Beschreibung der HTML!</p>

In diesem Beispiel handelt es sich um einen Absatz (“p” = “Paragraph”), der stellenweise mit fettem Zeichensatz (“strong”) und unterstrichen (“u”) formatiert wurde. Es kommen also die paarweisen Elemente “p”, “strong” und “u” vor, die den eigentlichen Text strukturieren und sein Erscheinungsbild beschreiben.

Wenn man nun den obigen Beispiel-Text, der ja gültige HTML enthält, wiederum im HTML-Code ansieht, wird man erkennen, dass anstelle der Sonderzeichen, die die HTML-Tags bilden, nun spezielle Zeichenkombinationen (z.B. “&lt;” für das Zeichen “less than”) verwendet werden. Dadurch wird verhindert, dass dieser HTML-Code vom Webbrowser interpretiert wird – er soll ja statt dessen tatsächlich angezeigt werden!

Ein paar wichtige Elemente:

  • <p> </p> = Paragraph = Absatz
  • <div> </div> = Division = größerer Text-Abschnitt
  • <table> </table> = Table = Tabelle (Hierfür gibt es zusätzlich eine Reihe von Attributen, z.B. cellspacing="5", align="center".)
  • <a> </a> = Ein Link auf eine Website (warum hier ein “a” verwendet wird, ist mir nicht klar).
    Dies Element hat für die Zieladresse noch das wichtige Attribut href=”http://www...”, wobei natürlich anstelle der Punkte die tatsächliche Zieladresse stehen muss.
  • <img> = Image = Bild: Dieses Element ist kein Paar, d.h. hat kein Ende-Tag, aber es hat eine Reihe von Attributen, die die Internet-Adresse des Bildes und dessen Darstellung beschreiben. Wichtigstes Attribut hierbei ist der Verweis auf das Bild: src=”http://www...”.
    Wenn das <img>-Element innerhalb eines <a>-Element auftritt, wird anstelle des Link-Textes das Bild angezeigt und ein Klick auf das Bild führt zum Aufruf der Zieladresse (“href=”) des <a>-Elements.

Nützliche HTML-Funktionen, die vom Editor nicht unterstützt werden:

Es kann hilfreich sein, Links auf bestimmte Stellen innerhalb eines Artikels bzw. einer Seite zu nützen. Dies wird als “page jump” bezeichnet und erfordert zwei Schritte:

  • Vergabe von eindeutigen Sprung-Bezeichnern im Text.
    Dies erfolgt durch Einfügung des HTML-Codes <a name="#eindeutiger-bezeichner"></a> wobei natürlich ein sinnvoller, sprechender Bezeichner zu vergeben ist.
  • Verwendung des Bezeichners.
    Hierfür wird ein ganz normaler Link auf die betreffende Seite eingefügt dessen Adresse am Ende durch /#eindeutiger-bezeichner ergänzt wird (Beispiel: https://jofischer.wordpress.com/kurse/blogging-mit-wordpress/struktur-elemente/#Kategorie). Solche Page-Jumps können sowohl innerhalb der referenzierten Seite als auch in anderen Seiten eingefügt werden. Bei Sprüngen innerhalb derselben Seite genügt die verkürzte Form der Link-Adresse wie in diesem HTML-Beispiel: <a href="#Kategorie">Klick mich</a>.

Evtl. problematische Attribute:

  • align = Ausrichtung: Definiert, ob der betreffende Textteil linksbündig, zentriert oder rechtsbündig stehen soll. Dieses Attribut kann bei sehr vielen Elementen vorkommen.
    Bei gemischter Online-/Offline-Bearbeitung kommt es vor, dass das Attribut zu oft oder in falschen Start-/Ende-Paaren im Code erscheint. Das muss manuell behoben werden! Wenn der Fehler nicht durch einfache Analyse des HTML-Codes gefunden wird, kann einfach jedes Vorkommen von “align=” (mit jeweiligem Wert, z.B. “center”) manuell gelöscht werden um dann im visuellen Editor die Formatierung erneut zu setzen.

Zurück …

  1. Es gibt noch keine Kommentare.
  1. No trackbacks yet.

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

%d Bloggern gefällt das: