Nachdem wir verstanden haben, wie man Jekyll in Betrieb nimmt und damit neue Beiträge veröffentlicht werfen wir nun einen Blick auf HTML. Dabei werden wir zunächst unseren Markdown Quelltext nach HTML übersetzen und uns dann mit neuen HTML Konstrukten befassen.

HTML Elemente

HTML Seiten haben immer eine sogenannte “Baumstruktur”, die im Quelltext aussieht wie folgt:

<div>
    <p>Ich bin ein Absatz mit mal <em>kursivem</em> und mal <strong>fettem</strong> Text</p>
    <ul>
        <li>Ich bin ein <em>kursiv betontes</em>Listenelement.</li>
        <li>Ich bin ein <strong>fett betontes</strong> Listenelement.</li>
    </ul>
</div>

Dabei spielen die Leerzeichen in der Quelltexstruktur im Regelfall keine Rolle, das einzig relevante ist die “Verschachtelung” der sog. HTML Elemente. Ein Element beginnt dabei immer mit einem in spitzen Klammern geschriebenen <Elementnamen>. Ein Element beschreibt einen Bereich, der sich bis zu dem passenden schließenden </Elementnamen> (man beachte den Schrägstrich) erstreckt.

Container mit div
Das div Element ist eine Möglichkeit inhaltlich zusammenhängende Elemente grundlegend zu Strukturieren. Es hat standardmäßig keinerlei eigenes Aussehen, kann aber grafisch verändert werden. Von diesem Umstand werden wir ausführlich Gebrauch machen, sobald es um die grafische Gestaltung unserer Seite geht.
Absätze mit p
Das p Element bezeichnet einen Absatz. Wie in Word ist damit ein zusammenhängender Textblock gemeint, der im Regelfall am Ende ein wenig Freiraum bis zum nächsten Absatz lässt.
Formatierung mit em und strong
em steht für Emphasis (dt. Betonung) und stellt den Text üblicherweise kursiv dar, strong ist eine andere Art von Betonung und wird üblicherweise fett gedruckt dargestellt.
Listen mit ul und li
Das ul steht für unordered list (im Gegensatz zu ol für ordered list) und bezeichnet einen Bereich in dem Dinge aufgelistet werden sollen. Jeder einzelne Aufzählungspunkt muss dabei von einem li Element (für list item) umschlossen werden.
Aufgabe: Übersetzt euren vorigen Markdown-Eintrag nach HTML
  • Legt wieder einen neuen Beitrag im _posts Ordner an, verwendet dabei ein beliebiges Datum und einen beliebigen Titel, aber auf jeden Fall die Dateiendung .html statt .md
  • Übersetzt den vorigen Markdown Beitrag über eure Person durch das entsprechende HTML Äquivalent, den Link lasst Ihr dabei erstmal weg. Im Optimalfall sollten beide Beiträge bis auf den Titel, das Datum und den fehlenden Link exakt identisch aussehen.

HTML Attribute

Teilweise müssen HTML Elemente mit exakteren Informationen versorgt werden. In diesen Fällen kommen die sog. Attribute zum Einsatz. Dabei handelt es sich wie bei YAML um einen Schlüsel und einen Wert, die jedoch leicht anders aufgeschrieben werden. Als Beispiel nehmen wir uns einmal das HTML Element a mit dem man auf andere Seiten verlinken kann.

<a href="http://www.marcusriemer.de/">Marcus Homepage</a>

Wir sehen, dass beim Attribut href der Wert in Anführungszeichen gesetzt wird und zwischen Wert und Schlüssel ein Gleichheitszeichen steht.

Die Einbindung von Bildern geht mit dem <img src="URL"/> Attribut, welches eine weitere Besonderheit verdeutlicht: Nicht alle HTML Elemente haben einen Inhalt. Bei solchen Elementen wird schon beim öffnenden Element hinten ein Schrägstrich geschrieben. Um also ein Bild von der Wikipedia zu eurem Hobby einzubinden müsst Ihr nur das src Attribut mit dem richtigen Pfad füttern. Für das Bild des Roguelikes “Vulture” lautet eine URL z.B. https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Vultures-2.1.0_screenshot.jpg/640px-Vultures-2.1.0_screenshot.jpg.

Sollte das von euch eingebundene Bild zu groß oder zu klein sein, könnt Ihr die Größe der Darstellung mit den Attributen width und height beinflussen. Als Werte kommen dabei entweder Pixel zum Einsatz (z.B. "200px") oder relative Prozentangaben (z.B. "50%").

Verwendet keine relativen Prozentangaben für das height Attribut, das wird (fast) nie den gewünschten Effekt haben.
Aufgabe: Verlinkt ein Bild
  • Fügt in euren Beitrag ein beliebiges Bild von der Wikipedia ein. Dazu müsst Ihr ggfs. den sog. "Media Viewer" der Wikipedia mit einem Klick auf "mehr Details" in den Hintergrund verbannen. Unter dem eigentlichen Bild sind dann verschiedene Links für die unterschiedlichen Größen des Bildes.
  • Verlinkt dieses Bild indem Ihr ein <a href="...">...</a> Element um das Bild herumlegt.