Einführung in HTML

Vielleicht fragst du dich, was ein Template (Vorlage) ist?

Ein Template (zu deutsch "Vorlage") ist eine Textdatei und ermöglicht es uns, verschiedene Inhalte in einer einheitlichen Darstellung zu erzeugen. Eine Vorlage für z.B. einen Brief hilft uns, immer gleich aussehende Nachrichten zu versenden, in denen sich Empfänger, Betreff und Text jeweils ändern, das äußere Format jedoch bestehen bleibt.

Ein Django-Template wird mit einer Sprache namens HTML beschrieben. (Genau das HTML aus dem ersten Kapitel: Wie das Internet funktioniert).

Was ist HTML?

HTML ist recht einfacher Code, der von deinem Browser – z.B. Chrome, Firefox oder Safari – interpretiert wird, um dem Benutzer eine Website darzustellen.

HTML steht für "HyperText Markup Language". Als HyperText wird Text bezeichnet, der über markierte Textstellen, den "Hyperlinks" (die umgangssprachlichen "Links"), auf andere (meist ebenfalls in HTML geschriebene) Seiten verweist. Markup bedeutet, dass wir ein Dokument nehmen und mit Code versehen, um einem Empfänger mitzuteilen (in diesem Fall dem Browser), wie diese Seite interpretiert werden muss. HTML-Code besteht aus Tags, wovon jeder mit < beginnt und mit > endet. Diese Tags stellen die Markup-Elemente dar.

Dein erstes Template!

Ein Template zu erstellen, heißt, eine entsprechende Datei dafür zu erstellen. Alles ist eine Datei, wie du vielleicht schon bemerkt hast.

Templates werden im Verzeichnis blog/templates/blog gespeichert. Als Erstes erzeugen wir das Verzeichnis templates in deinem Blog-Verzeichnis. Im Template-Verzeichnis selbst erstellen wir ein weiteres Verzeichnis blog:

blog
└───templates
    └───blog

(Falls du dich wunderst, warum wir zwei blog-Verzeichnisse brauchen – das hängt mit den nützlichen Namenskonventionen von Django zusammen, die das Leben einfacher machen, wenn deine Projekte immer komplizierter und komplexer werden.)

Als nächstes erstellen wir eine Datei post_list.html (erst mal ohne Inhalt) innerhalb des Verzeichnisses blog/templates/blog.

Kontrolliere deine überarbeitete Webseite unter: http://127.0.0.1:8000

Falls du die Fehlermeldung TemplateDoesNotExist angezeigt bekommst, versuche den Server neu zu starten. Auf der Kommandozeile drückst du dafür Strg+C bzw. Ctrl+C (Strg-/Ctrl- und die C-Taste C zusammen) und startest danach den Server erneut mit dem Kommando python manage.py runserver.

Abbildung 11.1

Der Fehler sollte weg sein! Gratulation! :) Deine Webseite ist allerdings noch leer, weil dein Template leer ist. Das müssen wir ändern.

Öffne die neue Datei im Code-Editor, und füge Folgendes hinzu:

blog/templates/blog/post_list.html

<!DOCTYPE html>
<html>
<body>
    <p>Halli-Hallo!</p>
    <p>Es funktioniert!</p>
</body>
</html>

Hat sich die Seite geändert? Besuche http://127.0.0.1:8000/, um nachzusehen.

Abbildung 11.2

Es funktioniert. Gute Arbeit! :)

  • Die Zeile <!DOCTYPE html> ist kein HTML-Tag. Es deklariert nur den Dokumententyp. Hier informiert sie den Browser, dass der Dokumententyp HTML5 ist. Jede HTML5-Datei muss so anfangen.
  • Der eigentliche HTML-Teil beginnt immer mit <html> und endet immer mit </html>. Zwischen den beiden Tags <html> und </html> steht der gesamte Inhalt der Webseite
  • <p> ist der Tag für ein Absatz-Element (paragraph), </p> beendet einen Absatz

"Head" und "body"

Jede HTML-Seite gliedert sich in zwei Teile: head und body.

  • Das Element head speichert im "Kopf" der Seite Informationen über die Seite, die dir nicht angezeigt werden.

  • Das Element body enthält den "Körper" - also den dargestellten Inhalt der Seite.

Im <head> informieren wir den Browser über Einstellungen und Konfigurationen der Webseite, z.B. wie sie dargestellt werden soll, und im <body> darüber, was tatsächlich dargestellt werden soll.

In den <head> können wir z.B. noch den Titel (title) der Seite mit aufnehmen:

blog/templates/blog/post_list.html

<!DOCTYPE html>
<html>
    <head>
        <title>Olas blog</title>
    </head>
    <body>
        <p>Halli-Hallo!</p>
        <p>Es funktioniert!</p>
    </body>
</html>

Speichere die Datei und aktualisiere die Seite im Browser.

Abbildung 11.3

Der Titel "Olas Blog" wird nun im Browser angezeigt. Hast du es bemerkt? Der Browser hat <title>Olas Blog</title> interpretiert und in die Titelleiste übernommen (dieser Titel wird auch in den Lesezeichen usw. verwendet).

Wie du vielleicht bemerkt hast, hat jedes Element zu Beginn einen öffnenden Tag und einen zugehörigen schließenden Tag mit / und innerhalb davon sind Elemente eingebettet. Ein innerer Tag kann nicht außerhalb des umschließenden Tags geschlossen werden, die Reihenfolge muss immer stimmen.

Es ist, wie wenn man Sachen in Kisten steckt. Du hast eine große Kiste, <html></html>. In der ist als weitere, etwas kleinere Kiste <body></body> drin, und in der wiederum weitere kleine Kistchen: <p></p>.

Die Regeln und Reihenfolgen von schließenden Tags und Verschachtelung der Elemente musst du immer einhalten. Anderenfalls können Browser die Seite nicht richtig interpretieren und darstellen.

Dein Template anpassen

Jetzt kannst du ein bisschen rumprobieren und dein Template umgestalten! Hier sind ein paar nützliche Tags dafür:

  • <h1>Überschrift</h1> (headline) für wichtigste Überschriften
  • <h2>Unter-Überschrift</h2> die nächst tiefere Überschiftenebene
  • <h3>Unter-Unter-Überschrift</h3> ... und so weiter bis <h6>
  • <p>Ein Fliesstext-Absatz</p>
  • <em>Text</em> hebt deinen Text hervor
  • <strong>Text</strong> hebt deinen Text stark hervor
  • <br> fängt eine neue Zeile an (du kannst nichts in das br schreiben und es gibt keinen schließenden Tag)
  • <a href="https://djangogirls.org">link</a> erstellt einen Link
  • <ul><li>Erster Punkt</li><li>second item</li></ul> generiert eine Liste so wie diese hier!
  • <div></div> definiert einen Abschnitt auf einer Seite
  • <nav></nav> definiert eine Reihe von Navigationslinks
  • <article></article> definiert voneinander unabhängige, eigenständige Inhalts-Teile
  • <section></section> definiert einen Abschnitt in einem Dokument
  • <header></header> gibt eine Kopfzeile für ein Dokument oder einen Abschnitt an
  • <main></main> enthält den Hauptinhalt eines Dokuments
  • <aside></aside> definiert eine Nebenbemerkung (wie den Inhalt einer Rand-Leiste) zum Inhaltsteil, in dem es platziert wird
  • <footer></footer> definiert eine Fußzeile für ein Dokument oder einen Abschnitt
  • <time></time> definiert eine bestimmte Zeit (oder einen Zeitpunkt samt Datum)

Hier ist ein vollständiges Beispiel eines Templates. Kopiere es und füge es in blog/templates/blog/post_list.html ein:

blog/templates/blog/post_list.html

<!DOCTYPE html>
<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <header>
            <h1><a href="/">Django Girls Blog</a></h1>
        </header>

        <article>
            <time>published: 14.06.2014, 12:14</time>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </article>

        <article>
            <time>published: 14.06.2014, 12:14</time>
            <h2><a href="">My second post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
        </article>
    </body>
</html>

Wir haben hier einen header-Abschnitt und zwei article-Abschnitte erstellt.

  • Das header-Element enthält den Titel unseres Blogs – eine Überschrift und einen Link
  • Die beiden Artikel Elemente enthalten unsere Blogeinträge mit einem veröffentlichten Datum in einem time Element, ein h2 Element mit einem anklickbaren Beitragstitel und einem p (Absatz) Element für den Text unseres Blogeintrags.

Wir bekommen das Folgende:

Abbildung 11.4

Yaaay! Bis jetzt zeigt unser Template aber immer genau die gleichen Inhalte – obwohl wir aber vorhin davon gesprochen haben, dass Templates uns erlauben, verschiedene Informationen im gleichen Format darzustellen.

Eigentlich wollen wir richtige Posts anzeigen, die in unserer Django-Admin-Oberfläche hinzugefügt wurden – und das wollen wir als Nächstes tun.

Noch eine Sache: Deployment!

Es wäre gut, das alles live draußen im Internet zu sehen, oder? Lass uns noch eine PythonAnywhere-Anwendung erstellen:

Committe und pushe deinen Code auf GitHub

Lass uns nachsehen, welche Dateien sich nach dem letzten Veröffentlichen (Deployment) geändert haben. (Führe diese Befehle lokal aus und nicht auf PythonAnywhere):

command-line

$ git status

Stelle sicher, dass du im Djangogirls Verzeichnis bist und sag git, dass alle Änderungen in diesem Verzeichnis hinzugefügt werden sollen:

command-line

$ git add .

Bevor wir alle Dateien hochladen, prüfen wir noch einmal, was git hochladen will (alle Dateien, die git hochladen wird, sind jetzt grün):

command-line

$ git status

Fast fertig, wir sagen nun noch, dass diese Änderung in der Verlaufsübersicht gespeichert werden soll. Wir erstellen eine "Commit Message", die beschreibt, was wir verändert haben. Du kannst an diesem Punkt hier alles reinschreiben, aber es ist sehr nützlich, etwas Sinnvolles einzutragen, damit du dich in Zukunft erinnern kannst, was du geändert hast.

command-line

$ git commit -m "HTML der Site geändert."

Beachte: Du musst Anführungszeichen um den Commit-Kommentar setzen.

Nachdem wir das gemacht haben, laden (push) wir unsere Änderungen auf GitHub:

command-line

$ git push

Hol dir den neuen Code auf PythonAnywhere und aktualisiere deinen Browser

PythonAnywhere command-line

$ cd ~/<deine-pythonanywhere-domain>.pythonanywhere.com
$ git pull
[...]

Du musst <deine-pythonanywhere-domain> durch deine tatsächliche PythonAnywhere-Subdomain zu ersetzen - ohne die spitzen Klammern. Normalerweise ist deine Subdomain dein PythonAnywhere-Benutzername, aber in manchen Fällen ist sie leicht anders (z.B. wenn dein Benutzername Großbuchstaben enthält). Wenn dieser Befehl also nicht funktioniert, verwende den Befehl ls (listet Dateien auf), um den tatsächlichen Subdomain-/Ordner-Name herauszufinden, und verwende dann cd, um dorthin zu wechseln.

Nun sieh zu, wie dein Code heruntergeladen wird. Wenn du überprüfen willst, dass er angekommen ist, geh' hinüber zur Seite "Files" and schau deinen Code auf PythonAnywhere an (du kannst andere PythonAnywhere-Seiten über den Menü-Knopf auf der Konsolen-Seite erreichen).

  • Spring anschließend rüber zur Seite "Web" und klick auf Neu laden in deinem Browser.

Dein Update sollte live sein! Lade die Seite neu in deinem Browser. Es sollten nun Änderungen zu sehen sein. :)

results matching ""

    No results matching ""