Diese Lektion enthält eine schrittweise Einführung in die Grundlagen der HTML-Codierung. Wir sind auf dem Weg zu einem einfachen Web-Frontend-Design mit einfachen HTML-Elementen, wie es von WordPress generiert wird und sofort an den Browser des Besuchers übertragen werden kann.
Wir wollen dieses Verständnis jedoch von Grund auf neu aufbauen. Zu diesem Zweck kannst Du immer noch eines der ausgefallenen visuellen Frameworks wie Twitter Bootstrap verwenden, um loszulegen. Das ist völlig in Ordnung, setzt jedoch voraus, dass Du die Grundlagen von HTML bereits kennst, um effektiv arbeiten zu können. Diese Lektion enthält eine kurze Einführung in grundlegende Markup-Elemente und deren Verwendung.
HTML steht für Hyper Text Markup Language und ist ein Untertyp von XML, der Extensible Markup Language. Markup wird mit sogenannten “Tags” gebildet. Daher wird HTML zur Beschreibung von Websites verwendet. Schauen wir uns vor diesem Hintergrund einige grundlegende Komponenten an.
Der folgende Code repräsentiert eine minimale HTML-Seite.
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <title>Tab text</title> </head> <body> Black on white. </body> </html> |
Es gibt viele HTML-Tags. Konzentrieren wir uns auf einige Dinge, die wir wirklich brauchen.
Angenommen, Du möchtest Überschriften und Unterüberschriften verwenden, wie im vorliegenden Beitrag. Du kannst dies mit den folgenden Tags tun: h1, h2, h3, …
1 2 3 4 5 | <h1>Big Heading<h1> <h2>Sub Heading 1<h2> <h3>Sub Heading 2<h3> <h4>Sub Heading 3<h4> <h5>Sub Heading 4<h5> |
Angenommen, Du möchtest etwas vom Rest des von dir geschriebenen Inhalts trennen, kannst Du dies mit einer horizontalen Linie tun:
1 | <hr /> |
… oder mit Absätzen:
1 2 | <p>Paragraph content</p> <p>Another paragraph content</p> |
… oder mit Zeilenumbrüchen:
1 2 3 | Some text<br /> Some other text<br /><br /><br /><br /> Some other text :) |
Wenn Du Listen-Elemente auflisten möchten, verwende dazu eine geordnete Liste:
1 2 3 4 | <ol> <li>Ein erstes Element</li> <li>Ein zweites Element</li> </ol> |
Wenn Du nur möchtest, dass diese Elemente mit führenden Punkten aufgelistet werden, kannst Du dies mithilfe einer ungeordneten Liste tun:
1 2 3 4 | <ul> <li>Ein erstes Element</li> <li>Ein zweites Element</li> </ul> |
Nehmen wir an, Du hast einen ziemlich komplexen Inhalt, den Du strukturieren möchtest, kannst Du dies mit folgenden HTML-Tabellen tun:
1 2 3 4 5 6 7 8 9 10 11 12 | <table> <tbody> <tr> <td>Erste Zeile, Erste Spalte</td> <td>Erste Zeile, Zweite Spalte</td> </tr> <tr> <td>Zweite Zeile, Erste Spalte</td> <td>Zweite Zeile, Zweite Spalte</td> </tr> </tbody> </table> |
Wenn Du Bilder in deine HTML-Website aufnehmen möchtest, kannst Du den IMG-Tag folgendermaßen verwenden:
1 | <img src="path/to/image/image.png" alt="Description of image" /> |
Verwende das Link-Tag “” wie folgt, um Links einzufügen, auf die ein Benutzer klicken kann:
1 | <a href="https://www.serpbot.org" target="_blank" rel="noopener noreferrer">Anchor text the user can read</a> |
Das Ziel “_blank” bedeutet, dass ein neues Fenster / eine neue Registerkarte geöffnet wird. Du kannst auch “_self” verwenden, damit die Seite in demselben Fenster / Tab geladen wird, in dem Du gerade surfst.
Nun möchtest Du häufig auch Kommentare in deine Seite aufnehmen, die dem Benutzer nicht direkt angezeigt werden, sondern dir als Markierung für noch zu erledigende Aufgaben oder ähnliches dienen. HTML-Kommentare kannst Du wie folgt definieren:
1 | <!-- Comment --> |
Beachte jedoch, dass der Benutzer jederzeit nach der HTML-Quelle suchen und dadurch deine Kommentare sehen kann. Vielleicht möchtest Du also nicht alles hinein schreiben, was dir in den Sinn kommt 🙂
Wenn Du weitere Beispiele zur Verwendung grundlegender HTML-Tags benötigst, besuche bitte http://www.w3schools.com/html/.
Du kannst mit der Verwendung von HTML experimentieren, indem Du in deinem visuellen WordPress-Editor umfangreiche Formatierungen und Verknüpfungen erstellst und dann in den “Text”-Modus wechselst. Du kannst dann den Beitragsteil des HTML-Codes sehen, der von WordPress erstellt und anschließend zum Webbrowser deiner Besucher interpretiert wird.
Damit sind die HTML-Grundlagen vorerst abgeschlossen. Weitere Informationen wie HTML-Formulare findest Du in der nächsten Lektion.