HackerSchool

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.

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%").