--> Deine eigene Webseite programmieren (HTML + CSS) - Bunterrichten

Deine eigene Webseite programmieren (HTML + CSS)

(Letztes Update von Niklas Baumgärtler am 8.3.2021)

Inhaltsverzeichnis

(per Klick auf den jeweiligen Absatz springen)

Willkommen zurück zur letzten Lektion dieses Kurses! Du hast nun  schon viele Grundbausteine von Webseiten kennengelernt, und vielleicht auch eine Vorstellung davon, wie sie im Großen zusammenarbeiten. Aber all diese Bausteine haben wir uns bisher nur jeweils für sich angesehen, damit sie leichter greifbar werden. Nun ist es an der Zeit, all das bisher Gelernte zusammenzufügen in ein großes Abschluss-Projekt. Wir werden in dieser Lektion gemeinsam mit HTML und CSS deine eigene Webseite programmieren.

Ich werde mit dir im Laufe dieser Lektion mit dir gemeinsam ein beispielhaftes großes Webseiten-Projekt entwerfen und umsetzen. Aber du bist frei, daraus dein eigenes zu machen. Meine Anweisungen sollen Hilfestellungen geben, nicht deine Kreativität einschränken!

Das Ganze könnte z.B. dann so aussehen: https://www.bunterrichten.com/so/niklasbaumgaertler/

Im Laufe dieser Lektion werde ich dir eine Reihe von Überlegungen mitgeben, die dir bei jedem Webseiten-Projekt, das du jemals noch vorhaben wirst, nützlich sein können. Eine gute Webseite zu erstellen die dir Freude macht ist nämlich nicht nur eine Sache der richtigen Programmierung, sondern auch der richtigen Überlegungen vor der Programmierung.

Diese letzte Lektion ist die längste Lektion in diesem Kurs. Es kann sein, dass du sie nicht auf einmal fertigstellen kannst. Aber das macht nichts – du kannst ja einfach über mehrere Tage daran arbeiten.

Bereit?

Dann lass uns anfangen, deine eigene Webseite mit HTML und CSS zu programmieren!

1. Vorüberlegung vor dem Webseite programmieren 0: Was ist eigentlich das Ziel unserer Webseite?

Dieser ersten Vorüberlegung habe ich deswegen die Nummer 0 zugewiesen, weil sie in der Liste der meisten Menschen die eine Webseite erstellen (lassen) wollen gar nicht erst vorkommt. Sie wollen gleich mit dem Design beginnen, oder schwärmen von allen möglichen vermeintlich tollen Features, und vergessen dabei die wichtigste aller Fragen: Wozu?

Was möchtest du mit deiner Webseite erreichen? Was erreichst du mit deiner Webseite, was du ohne deiner zukünftigen Webseite nicht oder nur schlechter erreichen kannst?

Die meisten Menschen die eine Webseite entwickeln wollen lassen sich in verschiedene Zwecke einteilen. Hier eine Reihung von oben nach unten nach dem üblichen Grad der Intentionalität (Wie überlegt jemand dabei vorgeht eine Webseite zu erstellen):

  • Das Produkt/die Dienstleistung existiert nur online (z.B. Ubersuggest)
  • Online-Produkt-Verkauf (Online-Shops, …)
  • Kunden-Gewinnung/Werbung (Blogger, Vergleichs-Seiten, …)
  • Informationsbereitstellung für andere (Wikipedia, viele Blogs, …)
  • Aufmerksamkeit/Anerkennung (Blogger der kein Geld damit verdient)
  • Lernen, wie man eine Webseite entwickelt
  • Keinen Plan was ich tue

Jemand der einen Online-Shop betreibt wird sich tendenziell genauer damit befassen was seine Webseite tun soll als jemand der einfach nur seine Gedanken in einem Blog veröffentlichen will. Immerhin hängt sein Einkommen davon ab wie diese Webseite aussieht, funktioniert und wie gut sie gefunden wird.

Was ist dein Ziel für die Webseite, die wir programmieren werden? Selbst wenn es dir nur darum geht zu lernen, wie man eine Webseite entwickelt, macht es Sinn, sich zumindest ein Ziel auszudenken. Denn auf diesem Ziel bauen viele der Entscheidungen auf die du im weiteren Verlauf treffen wirst. Bei allen weiteren Fragen kannst du dir nämlich dann wenn du nicht sicher bist fragen: Führt mich diese Antwort auf die Frage näher zu meinem Ziel?

Für unser Beispiel werde ich mir vorstellen, dass ich ein Unternehmer wäre, der ein Produkt bewirbt. Zum Beispiel könnte ich in meinem Fall eine Webseite erstellen, die mein selbstgeschriebenes Buch “Barfuß führt dein Weg dich weiter” anpreisen soll.

Das Ziel meiner Webseite, die Vorüberlegung 0, ist also in meinem Fall, mehr meiner Bücher zu verkaufen.

Als nächsten Schritt werden wir uns nun die Frage stellen, welche Funktionen unsere Webseite denn bieten soll:

2. Vorüberlegung vor dem Webseiten-Programmieren 1: Welche Funktionen soll die Webseite bieten?

Nun da wir wissen, was das Ziel unserer Webseite ist (das Buch verkaufen), können wir weiter überlegen. Welche Funktionen braucht eine Webseite mit einem solchen Zweck? Als erstes fallen mir da ein:

  • Eine Startseite als Übersicht
  • Eine Beschreibung über das Buch
  • Eine Beschreibung über den Autor, vielleicht auch Kontakt-Möglichkeiten
  • Eine Möglichkeit, das Buch zu kaufen
  • Eine Möglichkeit, das Buch probezulesen (Mehrere Auszüge)

Da ich mein Buch über Amazon veröffentlicht habe, muss ich mich um den Verkauf, die Abrechnung und die Lieferung glücklicherweise nicht selbst kümmern. Meine Webseite kann also auf diese – doch relativ komplexen – Funktionen verzichten.

2.1 Für jede Webseite vorgegebene Bausteine

Worauf eine Webseite aber nicht verzichten kann, sind einige rechtlich vorgegebene Bausteine:

  • Ein Impressum
  • AGBs
  • Datenschutz und Cookies

Ein Impressum musst du auf deiner Webseite haben, selbst wenn es sich nur um eine Spaß-Seite handelt. Dort muss stehen wer für die Inhalte und die Bereitstellung dieser Inhalte verantwortlich ist, mit Kontakt-Möglichkeiten.

AGBs brauchst du überall dort, wo du etwas verkaufst, also z.B. bei einem Online-Shop, einer Online-Dienstleistung, bei der Bewerbung eines Workshops, …

Datenschutz und Cookies sind wichtige Bausteine, die für unseren besonderen Fall nicht so relevant sind – denn wir verwenden keine Cookies, und es werden auch weder Daten eingegeben noch sonstwie von uns gesammelt. Aber das sollten wir trotzdem deutlich machen.

Alle jene grundsätzlich verpflichtenden Bausteine müssen mit nur wenigen Klicks einfach auf deiner Webseite erreichbar sein. Deshalb ist es üblich, diese irgendwo unten auf der Webseite im sogenannten “Footer” in kleiner, nicht störender Schriftgröße zu platzieren.

2.2 Zusammenfassung: Unsere Webseite braucht also

  • Eine Startseite als Übersicht
  • Eine Beschreibung über das Buch
  • Eine Beschreibung über den Autor (inklusive Kontakt-Möglichkeit)
  • Eine Möglichkeit, das Buch kaufen zu können
  • Eine Möglichkeit, das Buch Probe zu lesen
  • Die vorgegebenen Bausteine
    • Impressum
    • Datenschutz und Cookies
    • (AGBs falls du etwas direkt verkaufst oder man sich für etwas direkt anmelden kann)

3. Das Design unserer Webseite planen

So, nun wissen wir ungefähr, welche Funktionen unsere Webseite erfüllen soll. Damit können wir alle Entscheidungen die das Design betreffen mit der Frage überprüfen, ob die Entscheidung einer unserer Funktionen dient oder eher hindlich ist.

3.1 Das Hin und Her zwischen Funktion und Design

Natürlich ist das Ganze kein streng linearer Ablauf. Manchmal wirst du z.B. erst während du am Design arbeitest feststellen dass sich bei einer bestimmten Art von Design eine bestimmte vorher noch nicht in Betracht gezogene Funktion anbieten würde. Oder eine, die du ursprünglich vorgehabt hattest, in deinem Design schwierig umzusetzen ist. Funktion und Design einer Webseite spielen zusammen und beeinflussen sich ständig gegenseitig.

Die meisten Menschen fangen intuitiv mit dem Design an, weil ihnen das mehr Spaß zu versprechen scheint. Dann kann es allerdings vor allem bei Anfängern rasch zu Rationalisierungen kommen. Zum Beispiel hat man entdeckt wie es sich technisch umsetzen lässt, dass man mehrere Bilder “durchschalten” kann, findet dieses Feature genial und will es unbedingt in die eigene Homepage packen, egal ob es für unser Ziel eine sinnvolle Funktion erfüllt.

3.2 Wie man Design-Elemente erkennt die eher hinderlich sein können

Bei einer vergangenen Version meiner bunterrichten-Webseite hatte ich beispielsweise eine auf den ersten Blick geniale Idee. Ich wollte eine Art “Kompass” als Navigations-Menü einrichten. Dieser würde sich jeweils dorthin ausrichten, wo der Mauszeiger sich hinbewegt. Es sah auch ziemlich beeindruckend aus. Aber für die Benutzer war diese Art der Bedienung eher ungewohnt und nicht sehr intuitiv. Sie war der Funktion der einfachen Bedienbarkeit eher hinderlich. Deswegen habe ich sie nach einer Weile wieder entfernt.

Die meisten der “tollen” Funktionen, die man als Anfänger super findet, sind für das Ziel einer durchschnittlichen Webseite eher hinderlich. Selbst-abspielende Videos sind z.B. auf den meisten Webseiten einfach nur nervig. Wer wie ich gerne mehrere Tabs in seinem Browser öffnet, hört dann plötzlich von irgendwo her Musik, und muss nun das Video finden und die Abspielung erst wieder beenden.

Webseiten-Besucher haben im Regelfall zwei Dinge gar nicht gerne:

  • Wenn sie das Gefühl haben, sie hätten keine Kontrolle über das, was passiert (selbstabspielende Videos, sich verschiebende Buttons, …): Man kommt sich als Webseiten-Besucher vor wie ein Vollidiot. Niemand fühlt sich gerne wie ein Vollidiot.
  • Wenn ihre Absichten durchbrochen werden (Pop-Ups, …): Man muss herausfinden wie man die Dinger wieder wegbekommt und wird aus seiner Konzentration gerissen.

Videos können super sein, aber als Besucher will ich selbst entscheiden können wann ich mir welche ansehe. Pop-Ups können auch super sein, aber ich will selbst entscheiden, wann ich sie sehe.

Bevor wir nun zum eigentlichen Design-Prozess kommen, noch einmal eine Erinnerung an ein Konzept, das dir helfen kann, sinnlose Gimmicks zu vermeiden: Mobile First.

3.3 Mobile First in der Webseiten-Programmierung

Der “Mobile First”-Ansatz ist noch relativ neu. Ursprünglich wurden Webseiten nur für Laptops und PCs entwickelt, mit großen Bildschirmen. Handys wurden lange Zeit vergleichsweise stiefmütterlich behandelt.

Doch in den ersten 2010er-Jahren führte eine explosionsartige Verbreitung der Smartphones zu einem langsamen Umdenken. Handys wurden mitbedacht. Aus Desktop-Versionen wurden auch zusätzliche Handy-Versionen.

Mittlerweile werden Webseiten im Durchschnitt häufiger über das Handy betrachtet als über einen Laptop/PC. Für deine Zielgruppe (die Menschen, die sich deiner Ansicht nach deine Webseite ansehen sollen) kann dies verstärkt, oder auch gar nicht zutreffen. Junge Menschen z.B. werden tendenziell häufiger über Handys Webseiten aufrufen als ältere Menschen.

Mit dem Mobile-First-Design-Ansatz dreht sich der traditionelle Ansatz hauptsächlich für den Desktop zu entwickeln völlig um. Du entwickelst in erster Linie für Handys. Für Desktop-Geräte fügst du – wenn überhaupt – noch einige Funktionen hinzu die dort Sinn machen wo mehr Platz zur Verfügung steht.

Der Vorteil ist, dass das Design minimalistischer wird und auf verschiedenen Geräten ohne großen Mehraufwand gut aussieht.

3.4 Zeit für dein Webseiten-Design: Zeichne es!

Die Basis eines guten Webseiten-Designs entsteht kaum je auf dem Computer, sondern auf einem Blatt Papier. Nimm dir etwas Zeit, Papier und Stifte, und male dir mal die Grundstruktur deiner Webseite auf, die sogenannte “Sitemap”:

3.4.1 Die Sitemap deiner Webseite aufzeichnen

Die “Sitemap” ist eine Übersicht über alle Unterseiten deiner Webseite und ihrer Verbindungen.

Ich selbst mache das gerne als eine Art “Mind-Map”. Die einzelnen Unterseiten werden dann mit Pfeilen verbunden. Auf dem Papier kann man dann noch unkompliziert Änderungen vornehmen. Hier mein End-Ergebnis:

Webseite Programmieren Design

Zum Beispiel hatte ich anfangs noch die Idee, dass es jeweils eine eigene Seite für die einzelnen Leseproben geben soll. Aber eigentlich ist das viel zu viel Arbeit. Da macht es mehr Sinn, die Leseproben einfach auf die Seite hinzuzufügen wo das Buch ohnehin beschrieben wird.

In meiner Mind-Map habe ich dann den einzelnen Unterseiten auch noch jeweils ihre Funktionen zugeordnet. Vielleicht ist dir aufgefallen, dass alle drei Unterseiten:

  • informieren und vor allem
  • auf den Buch-kaufen-Link umleiten sollen.

Letzteres ist ja unser erklärtes Ziel, da ist es kein Wunder, wenn das oft vorkommt 🙂

Auf der Buch-Unterseite gibt es zusätzlich noch die Funktion mit den Leseproben, auf der Über-mich-Seite noch die Funktion, Kontakt aufzunehmen.

Alle Unterseiten müssen irgendwo einen Link auf die vorgegebenen Bausteine Impressum und Datenschutz/Cookies aufweisen. Diese beiden Seiten werden wir in einen sogenannten “Footer” packen. Das ist der untere Bereich deiner Webseite, der immer gleich aussieht.

3.4.2 Das Layout deiner Webseite aufzeichnen

Nun da du weißt welche Unter-Seiten deine Webseite haben wird, kannst du daran gehen, ihr Aussehen zu entwerfen. Die erste Entscheidung vor der du nun stehst ist das Layout.

Das Layout einer Webseite ist der grundsätzliche Aufbau des Bildschirms. Man kann theoretisch und technisch da viel experimentieren. In der Praxis haben sich jedoch 2 Arten von Layouts durchgesetzt, und werden von Webseiten-Besuchern erwartet:

  • Menüleiste oben, Inhalt unten
  • Menüleiste links, Inhalt rechts

Auf dem Handy ist der Standard das Hamburger-Menü in einer kleinen Leiste oben, meist mit einem Logo links und teilweise einer Suchfunktion.

Von diesen Standards abzuweichen kann in manchen Fällen Sinn machen. Aber wenn man es tut sollte man einberechnen dass es für die Besucher der Webseite dann schwieriger ist zu verstehen wie die Navigation funktioniert. Deshalb sollte in diesen grundsätzlichen Dingen nur dann von der Norm abweichen, wenn man weiß was man tut.

Ich habe nun mal ein grundsätzliches Layout für meine Webseite auf Papier aufgezeichnet, einmal für die Desktop-Version, einmal für die Handy-Version:

Webseite programmieren Design 2

Was dir vielleicht auffällt: Ein großer Teil der Desktop-Version und der Handy-Version ist sehr ähnlich aufgebaut. Wo sind die Unterschiede?

  • Die Sidebar mit dem CTA (Call to Action, den Button wo der Besucher hinklicken soll, in dem Fall auf “Buch kaufen” oder etwas in der Art) ist auf der Desktop-Version rechts, auf der Handy-Version unten.
  • Die Menü-Links sind in der Handy-Version durch den “Hamburger” ersetzt (das sind die 3 Striche).
    Die sollen wenn man darauf klickt dann aufklappen und das Menü zeigen.
  • Die vorgegebenen Bausteine im Footer wie Impressum etc. sind auf der Handy-Version untereinander.

Ansonsten sind Desktop-Version und Handy-Version weitgehend gleich.

3.4.3 Farben und Schriften für deine Webseite auswählen

Farben und Schriften machen einen großen Unterschied auf deiner Webseite aus. Welche Farben und Schriften jeweils für deine Webseite geeignet sind, kann ich dir nicht sagen. Aber ich kann dir einige Hinweise mitgeben, die dir helfen können, die richtigen Farben/Schriften auszuwählen:

  • Durchgängigkeit: Gibt es bereits Farben oder Schriften, die schon eingesetzt wurden, z.B. für einen Flyer? Für den Wiedererkennungs-Wert kann es Sinn machen, auf der Webseite die gleichen Schriften/Farben zu verwenden, damit Besucher die Verbindung leichter herstellen können. So kannst du mit der Zeit eine Marke aufbauen.
  • Farbpsychologie: Farben, aber auch Helligkeitswerte oder Kontraste können psychologische und kulturelle Bedeutungen mit sich bringen. Z.B. wird grün oft mit Natur in Verbindung gebracht, aber in manchen Kulturen z.B. auch mit Geld und Neid. In den meisten Fällen wirst du mit eher wenigen, gut gewählten Farben auskommen.
  • Typographie: Eine wichtige Unterscheidung ist die zwischen serif-Schriften und sans-serif-Schriften. Erstere sind online tendenziell weniger gut lesbar, heißt es. Schreibschrift-Schriften sind für längere Texte extrem anstrengend, diese eignen sich hauptsächlich für Überschriften oder Zier-Schriften. Einer der wichtigsten Dinge was die Schrift betrifft ist die Lesbarkeit. Im Normalfall sind 2-3 Schriftarten das Maximum was einer Webseite gut tut. Mehr wird zu verwirrend.

Schriften kannst du eher schwierig auf deinem Blatt Papier austesten, aber Farben schon. Du könntest dir z.B. deine Skizze des Layouts mehrmals kopieren und mit verschiedenen Farben einfärben. So kannst du herausfinden was gut passt.

3.4.4 Die Texte für deine Webseite schreiben

Deine Webseite besteht ja nicht nur aus einem Layout, sondern auch aus Texten. Im Idealfall hast du zumindest eine erste Version deiner späteren Überschriften, Aufzählungspunkte und Texte schon vorbereitet bevor du dich daran machst deine Webseite zu programmieren. Vor allem wenn wir – wie in diesem Webseiten-Projekt – noch alles “per Hand” in die Webseite “hineinprogrammieren”.

Später, mit PHP und MySQL bzw. den Content Management Systemen (CMS) wie WordPress wird das dann weniger notwendig.

Du kannst deine Texte vorerst einfach mal in einem Schreibprogramm wie Word schreiben und irgendwo abspeichern. Später kopieren wir die einzelnen Text-Passagen dann einfach in deine HTML-Dateien 🙂

Achtung: Texte aus dem Internet zu kopieren verletzt das Urheber-Recht der ursprünglichen Autoren und kann teuer werden! Daher lieber selbst schreiben 😉

3.4.5 Die Bilder für deine Webseite zusammensuchen

Eine Webseite ohne Bilder ist eine sehr unbeeindruckende Webseite.

Leider ist es in den meisten Fällen nicht einfach so möglich, Bilder aus dem Internet auf der eigenen Webseite zu verwenden. Da können ziemlich riesige Strafen drohen.

3.4.5.1 Nutzungsrechte von Bildern

Es gibt allerdings in der Google-Suche eine Option, nach frei verfügbaren Bildern zu suchen. Gib dazu die URL www.google.at in die Adresszeile deines Browser ein, einen Suchbegriff (ich habe “Apfel” gewählt) und drücke ENTER bzw. auf “Google-Suche”. Wähle “Bilder”, um nur Bilder als Ergebnisse anzuzeigen.

Dann klickst du auf “Suchfilter” und auf “Nutzungsrechte”, dann solltest du das sehen:

Webseite programmieren Design 3

Die vier Auswahl-Möglichkeiten sind folgende:

  • Zur Wiederveränderung mit Veränderung gekennzeichnet: mit diesem Bild kannst du alles machen
  • Zur Wiederverwendung gekennzeichnet: du darfst es auch kommerziell verwenden, aber nur genau so wie es ist
  • Zur nicht kommerzielle Wiederverwendung mit Veränderung gekennzeichnet: Du darfst es verändern, aber nicht als Unternehmen nutzen
  • Zur nicht kommerziellen Wiederverwendung gekennzeichnet: Du darfst es als Unternehmen nicht nutzen, und verändern auch nicht

Wenn du Unternehmer bist, scheiden die beiden “nicht kommerziellen” Möglichkeiten für deine Unternehmens-Webseite aus.

Falls du das Bild auch verändern willst (Farben, Größen verändern, woanders einfügen, …), dann scheiden die Bilder ohne dem “mit Veränderung” auch für dich aus.

Verwendest du ein Bild aus dem Internet, ist es wichtig, auf diese Rechte zu achten. Vor allem, wenn du UnternehmerIn bist – das kann sonst im Ernstfall teuer werden!

3.4.5.2 Achtung: Das Recht am eigenen Bild

Wenn du eigens gemachte Fotos verwendest, ersparst du dir die Recherche ob du das Bild eines anderen Autors verwenden darfst, weil du es ja selbst gemacht hast. Aber Achtung, falls andere Personen außer du selbst auf einem Bild zu sehen sind! Denn da könntest du mit dem Recht auf das eigene Bild Schwierigkeiten bekommen wenn du nicht aufpasst.

Grundsätzlich brauchst du um ganz sicher zu sein die Einwilligung der Person die auf dem Bild abgebildet ist, bevor du es in veröffentlichten Werken (wie eben einer Webseite) verwendest. In den meisten Fällen wird sich niemand beschweren (wo kein Kläger da kein Richter). Aber falls du nicht sicher bist, kann es schlau sein, die Person sicherheitshalber zu fragen. Sind Kinder abgebildet, sollte man (glaube ich) im Zweifelsfall die Eltern fragen.

“Handelt es sich um ein Bild, in dem mehr als 7 Personen zu sehen sind, muss man nicht alle fragen, sondern kann das Bild einfach so verwenden.” – diesen Satz habe ich zwar selbst so gehört, aber auch immer wieder, dass das so nicht stimmt. Also im Zweifelsfall lieber einen Anwalt fragen 😉

Besonders wichtig ist das bei Bildern, in denen Personen so abgebildet sind, dass es sie womöglich stören könnte wenn man sie so sieht (z.B. peinliche Momente).

In 99% aller Fälle wird es den meisten Menschen relativ egal sein, welche Bilder du benutzt, oder ob du ein Bild benutzt dass eigentlich nicht dafür vorgesehen ist. Vor allem wenn du dich im nicht-kommerziellen Bereich bewegst. Aber für den unwahrscheinlichen Fall dass sich doch jemand darüber beschweren will (und wenn es nur Mitbewerber sind die dir etwas auswischen wollen) ist es sinnvoll, da keine Angriffs-Fläche zu bieten.

So, nun haben wir unsere Sitemap, unser grundsätzliches Layout, die Texte und unsere Bilder. Lass uns loslegen und unsere Webseite auch wirklich umsetzen!

4. Den Webseiten-Entwurf umsetzen und die Webseite programmieren

So, nun geht’s ans Programmieren! Alles, was wir bisher gemacht haben, wird uns jetzt viel Zeit ersparen. Es ist erheblich einfacher etwas auf dem Papier zu ändern als in einem Programm. Darum macht dieses Vorgehen auch so viel Sinn 🙂

Beginnen wir mit einem neuen, leeren HTML-Dokument. Egal wie deine Webseite später aussehen soll, diese Vorlage kannst du gleich verwenden:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Barfuß führt dein Weg dich weiter, von Niklas Baumgärtler</title>
    <link rel="stylesheet" href="style.css">
     </head>
  <body>
  
   </body>
</html>

In unserem <head>-Block haben wir praktischerweise gleich unsere style.css inkludiert. Damit die nicht einfach irgendetwas macht, löschen wir einfach alles was bisher dort drin steht, um eine leere style.css zu bekommen.

4.1 Die Meta-Informationen in unserer Webseite einfügen

Die Einbindung des Stylesheets style.css kennen wir ja schon, ebenso wie das <title>-Tag (ändere gerne deinen Titel auf etwas das gut zu deiner Webseite passt!).

Aber was jetzt noch fehlt, ist eine gute Beschreibung, worum es in der Seite geht, damit auch Suchmaschinen sich auskennen. Die fügen wir jetzt mit Hilfe des <meta name=’description’>-Tags in den <head>-Block ein. Das sieht dann so aus:

<meta name='description' content='Barfuß führt dein Weg dich weiter ist ein Buch von Niklas Baumgärtler. Hier kannst du es kaufen!'>

Hier kannst du natürlich einfügen was dir dazu einfällt. Wichtig dazu ist zu wissen, dass Google grundsätzlich Meta-Descriptions zwischen 50-160 Zeichen (Buchstaben, Zahlen, Sonderzeichen und Leerzeichen) am liebsten mag.

Wo genau du das meta-description-Tag einfügst ist eigentlich egal – es muss nur im <head>-Block sein. Aber der Einfachheit halber würde ich mir an deiner Stelle angewöhnen, es direkt unter dem Titel einzufügen.

So, damit haben wir den Titel der Webseite und die Beschreibung. Lass uns als nächstes das grundsätzliche Layout angehen!

4.2 Das Grundlayout der Webseite programmieren

In unserer Skizze des Layouts haben wir uns für eine 3-Teilung entschieden:

  • Eine Menü-Leiste oben
  • Einen Mittel-Teil mit dem eigentlichen Inhalt
  • Einen Footer mit Impressum, Datenschutz und diesen Dingen

Wir brauchen also 3 DIVs. Alle drei haben einige Eigenschaften gemeinsam, andere wiederum nicht. Deswegen geben wir allen dreien eine gemeinsame Klasse, aber unterschiedliche IDs. Wir fügen also die drei DIVs in unseren BODY-Block ein:

<div id='main-menu' class='main_part'>
  Menü	
</div>
<div id='content' class='main_part'>
  Content
</div>
<div id='footer' class='main_part'>
  Footer
</div>

Ich habe in jedes DIV jeweils einen kurzen Text eingefügt, der das DIV beschreibt. Das ist hilfreich, um sie beim Layouten besser unterscheiden zu können. Das Ergebnis sieht nun im Browser folgendermaßen aus:

Webseite programmieren HTML und CSS

Der Titel passt schonmal, und die drei Bereiche existieren immerhin. Aber recht beeindruckend ist das Ganze noch nicht.

Deshalb werden wir nun als erstes mit einigen CSS-Befehlen die 3 DIVs so verändern, dass wir sie gut zum Layouten verwenden können.

4.3 Das Grundlayout einrichten und sichtbar machen

Unser erstes Problem ist es, dass wir die Abmessungen unserer DIVs nicht gut sehen können. Deswegen geben wir ihnen allen dreien gleich einmal einen Rahmen.

.main_part {
	border: 1px solid gray;
}
#main-menu {
	background-color: red;
}
#content {
	background-color: yellow;
}
#footer {
	background-color: green;
}

Das Ergebnis: Die Bolivien-Flagge 🙂

Webseite programmieren HTML und CSS 2

So, nun da wir unsere DIVs gut sichtbar gemacht haben, können wir sie einrichten.

4.4 Der Footer unserer Webseite: Links zu vorgegebenen Bausteinen programmieren

Beginnen wir mit dem Footer, der wird am einfachsten. Das Wort “Footer” kommt übrigens von “foot”, also “Fuß”, und heißt deswegen so, weil er immer unten ist, wo auch unsere Füße sind.

In unserem Footer sollen die Links zu den für Webseiten vorgegebenen Bausteinen zu finden sein. Die fügen wir nun mal mit Hilfe der <a>-Tags und dem href-Attribut ein. Unser DIV mit der ID “footer” sieht damit in etwa so aus:

<div id='footer' class='main_part'>
  <a href='impressum.html'>Impressum</a>
  <a href='datenschutz-cookies.html'>Datenschutz & Cookies</a>
</div>

Wir haben nun zwei Links in unserem Footer, einer zeigt auf eine Seite auf der das Impressum ist und eine zeigt auf eine Seite auf der die Datenschutz/Cookie-Angaben zu finden ist. Das sieht dann bei mir so aus:

Webseite programmieren HTML und CSS 3

Vermutlich würde es schöner aussehen, wenn unsere Footer-Links zentriert wären. Das lässt sich in unserer style.css relativ leicht anstellen, wenn wir folgendes in den footer-Selektor einfügen:

#footer {
	background-color: green;
	text-align: center;
}

Wenn du deine Seite jetzt ansiehst, sollten die beiden Links in die Mitte gerutscht sein. Auf den ersten Blick ist das ja super gelaufen. Nur gibt es ein potentielles Problem, das wir am besten gleich lösen, bevor es überhaupt auftreten und uns nerven kann: Was passiert auf dem Handy?

Auf einem Handy betrachtet, kann es sein, dass der Footer unserer Webseite zu viel Text hat, um in eine Zeile zu passen. Der Browser versucht zwar dann sein bestes um dieses Problem möglichst ansprechend zu lösen, aber auf den können wir uns nicht verlassen. Wir müssen ihm helfen.

Deswegen verwenden wir jetzt gleich mal eine Flexbox für unseren Footer. Diese umgibt unsere Footer-Links und ordnet sie horizontal (von links nach rechts) an. Und dann verwenden wir Media Queries, um auf der Handy-Version auf eine vertikale Anordnung (von oben nach unten) zu wechseln.

4.4.1 Wie wir unseren Footer zu einer Flexbox umfunktionieren

Fangen wir mit der horizontalen Anordnung an. Wir umgeben unsere Links in unserer index.html mit einem weiteren DIV, das dann zu unserer Flexbox werden soll:

<div id='footer' class='main_part'>
  <div id='footerflex'>
    <a href='impressum.html'>Impressum</a>
    <a href='datenschutz-cookies.html'>Datenschutz & Cookies</a>
  </div>
</div>

Und dann müssen wir unser neues DIV auch noch zu einer Flexbox machen. Das machen wir wieder in unserer style.css:

#footerflex {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 10px;
}
#footerflex a {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

Unser footerflex-DIV ist nun zu einer Flexbox geworden, mit einer Zeilen-Ausrichtung (row) und einer mittigen Zentrierung der Items.

Außerdem habe ich den Links (<a>-Tags) in unserem Footer ein bisschen mehr margin verpasst, damit man sie besser lesen kann. Und dem footerflex-DIV als Ganzes auch, einfach damit es etwas schöner aussieht.

4.4.2 Mit Media Queries den Footer auf die Handy-Version anpassen

Und nun werden wir noch Media Queries verwenden, damit die Links auf dem Handy schön untereinander angezeigt werden. Die kommen auch in unsere style.css:

@media (orientation: portrait) and (max-width: 440px) {
	#footerflex {
		flex-direction: column;
	}
}

Was passiert hier? Wenn das Browserfenster im Hochformat ist und die Breite des Browserfensters maximal 400 Pixel breit, dann zeige die Links im footerflex-DIV untereinander an.

Möglicherweise musst du zu Testzwecken die 440 Pixel auf etwas mehr erhöhen damit du es mit deinem Browser-Fenster am PC oder Laptop testen kannst.

So, damit haben wir schonmal einen Footer der auf dem Handy und auf dem Desktop gut aussieht!

Um die Link-Farben usw. kümmern wir uns später. Als nächstes ist unsere Menü-Leiste dran:

4.5 Das Menü unserer Webseite programmieren

Die Menü-Leiste unserer Webseite ist als nächstes dran. In der Menü-Leiste wollen wir unser Logo und einige Navigations-Links haben. Wir brauchen also eine horizontale Leiste mit dem Folgenden:

  • Logo
  • Menü-Links
    • Home
    • Buch
    • Über mich

Übersetzt in Source-Code sieht das dann so aus:

<div id='main-menu' class='main_part'>
  <div id='logo'>Logo</div>
  <div id='menu'>
    <a href='index.html'>Home</a>
    <a href='buch.html'>Buch</a>
    <a href='ueber-mich.html'>Über mich</a>
  </div>
</div>

4.5.1 Unserem Menü Stil verpassen mit CSS

Nun werden wir in unserer style.css dem Ganzen etwas “Stil” verpassen. Wieder nutzen wir eine Flexbox, diesmal wieder in Zeilen-Ausrichtung, und mit dem Befehl “justify-content: space-between” bringen wir das Logo nach links und die Menü-Links nach rechts. Außerdem sorgen wir mit etwas padding dafür, dass unser Menü besser “atmen” kann 🙂

#main-menu {
	background-color: red;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
#main-menu div {
	padding: 10px;
}

Sieht doch schon viel besser aus:

Webseite programmieren HTML und CSS 4

So, unser Logo fehlt noch. Das fügen wir nun als nächstes ein. Ich werde dazu einfach die kleine Version meines bunterrichten-Logos verwenden. Zum Ausprobieren kannst du einfach irgendein Bild nehmen. Im Idealfall ist es quadratisch, und nicht zu groß (< 200×200 Pixel).

Das Logo fügen wir jetzt einfach dort in unsere index.html ein, wo bisher noch als Platzhalter der Text “Logo” steht. Und zwar als Bild mit dem entsprechenden src-Attribut, das dem Namen der Datei entspricht die du ausgewählt und in den selben Ordner wie unsere index.html gepackt hast. In meinem Fall heißt die Datei “Logo2019_small.png”:

<div id='logo'>
  <img src='logo2019_small.png' alt='bunterrichten Logo'>
  <span><b>bunterrichten:</b> Menschen helfen aufzublühen</span>
</div>

Neben dem Logo wollte ich noch den Namen der Webseite (bunterrichten) und den Slogan haben, darum habe ich das Ganze noch in einem <span>Element dazugepackt. Ein <span>-Element haben wir noch nicht behandelt – es ist so ähnlich wie ein DIV, aber nur auf eine Zeile beschränkt und damit eher für kleine Bereiche gedacht.

Dann habe ich noch in unserer style.css einige CSS-Befehle angefügt, damit das Logo, der Titel und der Slogan ein wenig schöner aussehen:

#main-menu {
	position: relative;
	background-color: red;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	height: 22px;
}
#logo img {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 5px;
	left: 10px;
}
#logo span {
	margin-left: 40px;
}

Das padding vom Selektor “#main-menu div” ist jetzt zurück in den Selektor “#main-menu” gerutscht, sah irgendwie besser aus. Und wenn wir schon vom Aussehen sprechen, hier unser Zwischenergebnis:

Webseite programmieren HTML und CSS 5

Es kann nun sein, dass das Bild, das du als Logo ausgewählt hast, einen weißen Hintergrund hat, dann sieht das mit dem roten Hintergrund vom DIV etwas seltsam aus. Bei mir ist das deswegen nicht der Fall, weil mein Logo eine .png-Datei ist, die im Unterschied zu .jpg-Dateien Transparenz unterstützt.

Aber das soll uns fürs erste nicht weiter stören – du kannst ja später wenn du willst noch ein besser geeignetes Bild auswählen und einfach das src-Attribut des <img>-Tags entsprechend ändern.

Als nächstes werden wir uns damit auseinandersetzen, wie wir ein Klapp-Menü für die Handy-Version erstellen können. In dem Zuge werde ich dir einen Trick zeigen, der in Webentwickler-Kreisen so etwas wie ein offenes Geheimnis ist: den Checkbox-Hack. Der nützt eine Funktion aus, die eigentlich nicht so vorgesehen war, um auf einfachem Wege etwas nachzubauen was sonst viel komplizierter umzusetzen wäre.

4.5.2 Das Menü für die Handy-Version zu einem Hamburger-Menü machen – mit dem Checkbox-Hack

Was eine Checkbox ist, weißt du vielleicht schon: es ist so ein kleines Kästchen, das man anklicken kann, und dann kommt ein kleines Häkchen. Klickt man noch einmal drauf, verschwindet das Häkchen wieder. Aussehen tut es in etwa so:

Die Checkbox ist eines von mehreren <input>-Tags. Ich habe dir diese bisher nicht erklärt, weil man um sie wirklich sinnvoll zu nutzen am besten auch noch PHP und MySQL oder Java Script können sollte. Deswegen kommen die ausführlicher erst im nächsten Kurs vor. Aber der Checkbox-Hack ist eine sehr nützliche Ausnahme. Deswegen wirst du diesen doch schon in dieser Lektion kennenlernen.

Eine Checkbox hat ja grundsätzlich zwei Zustände:

  • Häcken
  • kein Häcken

Das spannende am Checkbox-Hack ist, dass man mit Hilfe von CSS-Bedingungen ähnlich wie bei :hover überprüfen kann, ob eine Checkbox ein Häkchen hat oder nicht.

Aber lass uns mal klein anfangen und unsere erste Checkbox in unsere index.html einfügen. Das geht mit Hilfe des <input>-Tags, dem wir das Attribut type=’checkbox’ geben. Außerdem fügen wir darüber gleich noch ein <label>-Tag ein.

Dieses dienst üblicherweise zur “Beschriftung” anderer HTML-Elemente. Das Tolle am <label>-Tag ist, dass wir es mit Hilfe des “for”-Attributs mit einem anderen HTML-Element über dessen ID verbinden können.

Wir können also den Zustand unserer Checkbox (“Häcken” oder “kein Häkchen”) nicht nur über einen direkten Klick auf die Checkbox ändern, sondern auch durch einen Klick auf das Label, das mit dieser Checkbox verbunden ist.:

<div id='menu'>
  <label id='hamburger' for='toggle_menu'><img src='hamburger.svg'></label>
  <input type='checkbox' id='toggle_menu'>
  <div id='menu_items'>
	<a href='index.html'>Home</a>
  	<a href='buch.html'>Buch</a>
  	<a href='ueber-mich.html'>Über mich</a>
  </div>
</div>

Innerhalb des <label>-Tags haben wir noch ein Bild hineingepackt. Dieses kannst du dir herunterladen , indem du  einen Rechtsklick auf diesen Link machst, “Ziel speichern unter…” klickst und den Ordner auf deinem Computer als Ziel auswählst, indem sich deine index.html befindet. Speichere die .svg-Datei (eine spezielle Bild-Datei, dazu ein anderes Mal mehr) unter dem Namen “hamburger.svg”.

Wenn du dir das Ergebnis jetzt im Browser ansiehst, solltest du die Checkbox durch einen Klick auf die Checkbox umschalten können. Aber auch durch Klick auf das Hamburger-Bild. Klappt das?

Dann werden wir uns jetzt um die Änderungen in der style.css kümmern. Beginnen wir mit der Desktop-Version:

#hamburger {
	display: none;
}
#menu {
	display: flex;
	flex-direction: column;
}

#menu a {
	padding-left: 20px;
	padding-right: 20px;
}

#toggle_menu {
	position: absolute;
	left: -300px;
	top: -300px;
}

Was haben wir getan:

  • Das Hamburger-DIV wird nicht angezeigt. Dieses soll ja nur am Handy angezeigt werden.
  • Die Links im Menü (“#menu a”-Selektor) haben ein wenig mehr Platz bekommen.
  • Die Checkbox ist ins Nirvana verschoben worden, so dass man sie nicht mehr sehen kann. Aber man kann sie immer noch über das Label umschalten.

Im Browser sieht das Ganze dann so aus:

Webseite programmieren HTML und CSS 6

So, und nun zu den Media Queries für die Handy-Version. Auch die kommen in die style.css, zwecks besserer Übersicht am besten weiter unten im Source-Code:

@media (orientation: portrait) and (max-width: 500px) {
	#footerflex {
		flex-direction: column;
	}
	
	#hamburger {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	
	#menu_items {
                display: none;
		position: absolute;
		top: 42px;
		right: 0px;
		display: flex;
		flex-direction: column;
	}
	#menu_items a {
		padding: 10px;
		text-align: right;
	}
	#toggle_menu:checked ~ #menu_items {
		background-color: orange;
		display: flex;
	}
}

Was ist hier passiert? Der ganze Block wird nur aktiv, wenn sich der Browser im Hochformat (portrait) befindet und seine aktuelle Breite nicht größer als 500 Pixel ist. Es sind 500px für Test-Zwecke, damit man das Fenster nicht allzu klein machen muss um einen Unterschied zu sehen. Sobald das Fenster was die Breite betrifft klein genug ist und trotzdem im Hochformat, wechselt unser Menü dann auf ein Hamburger-Menü:

Webseite programmieren HTML und CSS 7

Was haben wir nun eigentlich alles verändert?

  • Den Selektor #hamburger: er wird nun sichtbar, als Flexbox. Letzteres deswegen, weil damit die Zentrierung horizontal und vertikal am einfachsten ist. Aufgrund dieses Blocks sieht man auf der Handy-Version dann das Hamburger-Bild und kann es anklicken. Der Befehl “cursor: pointer;” sorgt dafür, dass das Mauszeiger-Bild sich beim Darüberfahren so abändert dass man weiß dass man hier klicken kann.
  • Das DIV mit den Menü-Links #menu-items wird auch zur Flexbox, allerdings mit Spalten-Ausrichtung. Mit Hilfe von “position: absolute;” und den entsprechenden Positions-Angaben wird das Drop-Down-Menü unter dem Hamburger-Bild platziert. Aber das “display: none;” verhindert dass irgendetwas angezeigt wird. Das ist auch richtig so, denn es soll ja nur angezeigt werden sobald das Hamburger-Bild angeklickt wurde.
  • Die Links innerhalb vom Drop-Down-Menü (Selektor “#menu-items a”) werden rechts ausgerichtet und bekommen etwas Platz zum Atmen in alle Richtungen.
  • Der eigentliche Checkbox-Hack passiert im Selector “#toggle_menu:checked ~ #menu_items“. Hier wird die Bedingung überprüft, ob die Checkbox ein Häkchen hat. Falls ja, dann werden auf dem  Geschwister-Element der Checkbox (also ein HTML-Element, das auf der gleichen Hierarchie-Ebene wie die Checkbox selbst) die CSS-Befehle angewendet die wir hier hinschreiben. In diesem Fall wird der Hintergrund orange und das DIV sichtbar, wie wir im nächsten Bild gleich sehen können:

Webseite programmieren HTML und CSS 8

Damit haben wir ein funktionsfähiges Menü, das sowohl auf der Desktop-Ansicht auf einem PC oder Laptop als auch auf dem Handy super funktioniert. Sicher, da fehlen noch Farben, Schriften und die sonstige Feinabstimmung. Aber so schlecht sieht das schon gar nicht mehr aus!

Aber bevor wir uns an die Feinabstimmung machen, müssen wir uns erst noch um den Content, also die eigentlichen Texte, Bilder uns sonstigen Inhalte kümmern. Das machen wir jetzt als nächstes:

5. Content: Unser Webseite-Design mit Inhalten füllen und verlinken

Glücklicherweise haben wir uns ja im Vorfeld schon zumindest eine erste Version der Texte und Bilder überlegt, die wir als Content (= eigentlicher Inhalt) unserer Webseite jetzt nur noch einfügen müssen.

Oder hast du etwa diesen Schritt übersprungen?

Dann hast du jetzt einiges nachzuholen. Denn das Design des Content-Teils einer Webseite hängt dann doch zumindest ein Stück weit von dem Inhalt ab, der präsentiert werden soll. Gibt es viele Fotos? Viel Text? Braucht es dazu bestimmte Anordnungen?

Für unseren Fall nehmen wir an, dass es sich um eine sehr einfache Webseite handelt. Jeweils ein großes Bild als Einleitung, die Überschrift, einige Absätze Text, und das wars dann im Große und Ganzen wieder.

Außerdem wollen wir einen großen, immer gut sichtbaren Call-to-action-Button haben. Das ist ein Button, der den Besucher der Seite dazu verleiten soll ihn zu drücken und das zu tun was wir erreichen wollen. In diesem Fall soll er das Buch kaufen, oder zumindest wäre uns das sehr recht so.

5.1 Den Content-Bereich in zwei Spalten unterteilen

Fangen wir als erstes Mal mit einer Unterteilung des Content-Bereichs in zwei Unterbereiche an:

  • Einen Inhalts-Bereich
  • Einen Bereich für den CTA-Button (CTA ist die übliche Abkürzung für “Call to Action”)

Im CTA-Bereich habe ich den Link eingefügt den wir haben wollen. Im Inhalts-Bereich ein Bild, eine Überschrift und zwei Absätze, wobei im ersten Absatz auch gleich die zwei Links zu den anderen Unter-Seiten zu finden sind. Diese sogenannte “interne Verlinkung” ist für den Besucher der Webseite hilfreich, weil er dann gleich mehrere Möglichkeiten hat, dorthin zu gelangen wo er hinmöchte.

<div id='content' class='main_part'>
  <div id='actual_content'>
    <div id='content_wrapper'>
  	<img src='home.jpg' alt='Bild Startseite'>
  	<h1>Willkommen!</h1>
  	<p>
        Willkommen auf dieser wunderbaren Webseite! Hier kannst du mehr Informationen zum <a href='buch.html'>Buch "Barfuß führt dein Weg dich weiter"</a> finden, und auch einiges über den <a href='ueber-mich.html'>Autor Niklas Baumgärtler</a> erfahren.
  	</p>
  	<p>
  	Viel Freude beim Entdecken!
  	</p>
    </div>
  </div>
  <div id='CTA_wrapper'>
    <a href='https://www.amazon.de/Barfu%C3%9F-f%C3%BChrt-dein-dich-weiter/dp/1726838536'>Der CTA hier</a>
  </div>
</div>

Dann wollen wir das Ganze noch ein wenig Stylen:

#content {
	background-color: yellow;
	display: flex;
	flex-direction: row;
}
#actual_content {
	background-color: blue;
	flex-grow: 1;
	display: flex;
	justify-content: center;
}
#content_wrapper {
	padding: 10px;
	background-color: white;
	max-width: 400px;
}
#content_wrapper img {
	max-width: 100%;
}
#CTA_wrapper {
	background-color: brown;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 2;
}

Und für ein “Umschalten” des CTA-Buttons nach unten falls zu wenig Platz rechts ist sorgen wir auch noch gleich. Dazu fügen wir innerhalb unserer Media Query in unserer style.css folgendes ein:

#content {
  flex-direction: column;
}

Bei mir sieht das Ganze jetzt schon erheblich besser aus:

Webseite programmieren HTML und CSS 9

Für die Datei “home.jpg” die in deinem <img>-Tag vorkommt musst du nun eben entsprechend ein Bild in den Ordner deiner index.html-Datei einfügen damit das auch bei dir klappt.

Das alt-Attribut beim <img>-Tag ist übrigens auch ein sehr wichtiges. Es dient vor allem 3 Zwecken:

  • Wenn die Bilddatei nicht gefunden wird wird dieser Text stattdessen angezeigt
  • Blinden wird dieser Text vorgelesen damit sie wissen was sie im Bild verpassen
  • Suchmaschinen verwenden alt-Tags um herauszufinden worum es in dem Bild geht

Es macht daher Sinn, das alt-Tag immer mit sinnvollen Inhalten zu befüllen.

5.2 Die Inhalte der weiteren Unterseiten “befüllen”

Auf unserer Startseite index.html befinden sich nun schon einige Links, die auf Unter-Seiten zeigen, die es noch gar nicht gibt, z.B. buch.html. Die sollten wir jetzt in einem nächsten Schritt erstellen, damit man auch wo ankommt wenn man auf die Links klickt.

Nun ist ein sehr wichtiger Punkt erreicht. Sobald wir anfangen mit mehreren Unterseiten gleichzeitig zu arbeiten, ist es wichtig, dass sich an der Grundstruktur der HTML-Seite (also im Header-Menü und im Footer) nichts mehr ändern muss. Ansonsten müssen wir später jede Änderung die wir in einer Unterseite machen auf jeder anderen auch machen. Und das wird ganz schön aufwändig!

Dies gilt nicht für CSS-Befehle, daher alles was Farben, Schriftarten etc. betrifft. Diese können wir über unsere style.css nachträglich noch zentral ändern (d.h. die Änderungen werden in allen verbundenen HTML-Seiten übernommen). Deswegen ist es derzeit noch egal bzw. sogar sehr sinnvoll, wenn wir diese extremen Farb-Unterschiede noch lassen, einfach damit wir Abstände etc. besser einschätzen können.

Im nächsten Kurs werden wir dann unter Anderem lernen, wie wir mit Hilfe von PHP und MySQL auch die HTML-Elemente zentral abändern können. Dann müssen wir weniger aufpassen. Aber noch können wir diese Programmiersprachen nicht, und müssen uns daher die Frage stellen, ob wir nun bereit für den nächsten Schritt sind, weitere Unterseiten anzulegen.

Ja?

Dann lass uns loslegen 🙂

5.2.1 Die Unterseite über das Buch (buch.html) anlegen

Als nächstes werden wir eine neue HTML-Seite anlegen, die wir buch.html nennen. Auf dieser Seite findet sich eine kurze Beschreibung zum Buch und zwei Leseproben.

In die neue HTML-Seite kopierst du nun alles was in unserer index.html steht hinein. Das ist gewissermaßen unsere Vorlage. Und da ja unser Menü und unser Footer gleich bleibt, ebenso wie der CTA-Button (unser einziges Ziel ist es ja, das Buch zu verkaufen), müssen wir nun nur noch drei Teile unserer buch.html verändern:

  • Im <head>-Block:
    • Das <title>-Tag
    • Das <meta description>-Tag
  • Im <body>-Block:
    • Den Inhalt des DIVs “content_wrapper”

Die Veränderungen im <head>-Block könnten z.B. dann so aussehen:

<head>
    <meta charset="utf-8">
    <title>Das Buch: Barfuß führt dein Weg dich weiter</title>
    <meta name='description' content='Dies ist eine genauere Beschreibung des Buches "Barfuß führt dein Weg dich weiter"'>
    <link rel="stylesheet" href="style.css">
</head>

Im BODY-Block brauchen wir nun ein Bild vom Buch, eine Kurzbeschreibung und zwei Leseproben. Die Leseproben selbst sind in mehrere Absätze unterteilt, und jeder Absatz befindet sich umgeben von einem öffnenden <p> und einem schließenden </p>-Tag.

Aufgrund der Länge der Leseproben ist dieser Source-Code-Teil nun ziemlich lange. Aber vermutlich ist es trotzdem sinnvoll, wenn du ihn sehen kannst. Darum hier:

<div id='content_wrapper'>
  				<img src='buchcover.jpg' alt='Bild Startseite'>
  				<h1>Über das Buch</h1>
  				<h2>Kurzbeschreibung</h2>
  				<p>
  				Dieses Buch ist ein Begleiter auf dem eigenen persönlichen Weg hin zu mehr Authentizität. Ein Mut-Macher, gewissermaßen „die Schuhe auszuziehen“ und authentischer, tiefer mit uns selbst, unserer Umwelt und unseren Mitmenschen in stimmigen Kontakt zu treten. Damit auch du eines Tages von dir sagen kannst (aus #100 Wir leben noch):
				</p>
				<i>
				<p>
				Und wenn der Tag kommen wird
An dem die Endlichkeit in mein Leben tritt
Werde ich ihr gegenübertreten können
				</p>
				<p>
Sie wird mit mir sprechen wollen
Sagen: Aus! Nun ist es zu Ende!
Fragen: Hast du denn wahrhaftig gelebt?
				</p>
				<p>
Dann werden wir ihr sagen können: Ja!
Wir haben das Unverzeihliche gewagt:
Wir haben wahrhaftig gelebt
				</p></i>
				<p>
Es ist aufgebaut als Auswahl von kurzen Geschichten, die in jeweils 5-10 Minuten zum Nachdenken anregen. Gerade weil es Geschichten sind, sind sie Sachtexten überlegen: Eine Geschichte muss nicht „wahr“ sein, um zu wirken. Sie inspiriert nicht durch Autorität („Glaube mir, das ist so!“), sondern durch Beispiel („Es könnte auch so sein…“).
				</p>
				<p>
Es es ist Buch voller Geschichten vom Versuch, ein Leben in authentischer Selbst-Bestimmung zu führen. Eine Chronologie des Scheiterns, der Überwindung, des Zusammenraufens, der Einsicht, der Schmerzen, der Glücksempfindungen - und ihrer jeweiligen Unbeständigkeit. Davon, welche unermessliche Macht in uns allen schlummert, all dies und mehr hervorzubringen, wenn wir unsere Angst vor uns selbst überwinden.
				</p>
				<p>
Und kann dich so inspirieren, statt einem „objektiv guten Leben“ ein Leben zu führen, von dem du subjektiv am Ende sagen kannst, dass es für dich stimmig war.
				</p>
				<h2>Einige Leseproben</h2>
				<p>
Hier zwei kleine Auszüge aus...:
				</p>

<h3>#70 Wert-Schätzung</h3>

<p>
Aber würde er nicht das Recht für sich beanspruchen, mitgestalten zu können, wie all die anderen Männer in ihrem Leben? Ich werde hier nur Gast sein, las sie erleichtert in seinem Blick.
Ihr Leben lang hatten andere an ihren Heiligtümern gezerrt, gerüttelt, Tribut gefordert und weitere Forderungen gestellt. Bis alles in sich zusammengebrochen war. Das Heiligtum. Alles, was heilig, wertvoll erschien. Nun waren sie abgezogen, um an anderem Heiligen zu rütteln.
Es werde heil, sprach sie, überrascht über die Autorität in ihrer Stimme. Hier war ihr wahres Zuhause, das es wiederaufzubauen galt. Wieder zu heilen. Wieder zu heiligen. Die Jahre der Verbannung waren vorbei. Dieses Mal würde sie die Grenzen zu wahren wissen.
Sei mir willkommen, lud sie ihn nun ein, erfreut über sein Da-Sein.
Sei mein Gast.
</p>

<h3>#92 Die Geschichten, die wir uns erzählen</h3>
<p>
Und doch sind es jene anderen Geschichten, nach denen wir uns sehnen. Jene, die wir uns bei der Beerdigung eines Menschen nur über jenen einen Menschen erzählen können, kopfschüttelnd und doch bewundernd. Die sich in Rechtschreibung und Grammatik wohl an die Konventionen der einzig wahren Geschichte eines geglückten Lebens halten, aber in Ausdruck und Inhalt Überraschendes offenbaren. Floskeln in Wort und Leben sind unsterblich, aber sie gehören uns nicht, weisen nicht auf ihren Verwender. Wagen wir, einzigartig zu sein oder begnügen wir uns einzig mit der Bequemlichkeit, artig zu sein – so oder so: am Ende sind es nicht die Leben, die wir glauben gelebt zu haben, die bleiben, sondern die Geschichten, die wir einander darüber erzählt haben, der Sinn, dem wir jenen Leben gaben. Ich hab mir einen neuen Saftmixer bestellt!, erzählen wir uns heute beinahe aufgeregt, und: Andrea hat dich eingeladen, ihren Beitrag zu liken.
Wir waren mal hungrig nach größeren Geschichten.
</p>
<p>
…einige dieser „größeren Geschichten“ finden sich beispielhaft in diesem Buch. Aber es sind gewissermaßen Schreib-Weiter-Geschichten. Sehr viel hängt davon ab, was du daraus machst.
Was wird – möglicherweise darauf aufbauend – am Ende über dein Leben erzählt werden können?
  	</p>			
  			</div>

Im Browser sieht das Ganze dann in etwa so aus:

Webseite programmieren HTML und CSS 10

Was dir nun vielleicht auffällt: Unser armer CTA-Button rechts ist nicht mehr sichtbar. Bzw. ist er es schon, aber nur noch, wenn wir uns auf die richtige Höhe Scrollen. Aber da es uns bei unserer Webseite darum geht dass der Besucher den CTA-Button auch klicken soll um das Buch zu kaufen, ist das noch nicht ideal. Deswegen werden wir unseren CTA-Button nun fixieren.

Damit das klappt, braucht unser CTA-Button noch ein zusätzliches DIV “eingeschoben”, also so:

<div id='CTA_wrapper'>
  <div>
     <a href='https://www.amazon.de/Barfu%C3%9F-f%C3%BChrt-dein-dich-weiter/dp/1726838536'>Der CTA hier</a>
  </div>
</div>

Dies müssen wir nun auch in unserer buch.html ändern. Merkst du schon, warum es Sinn macht, die HTML-Elemente von Anfang an richtig hinzubekommen, bevor man mehrere Unterseiten erstellt? Wir haben ja zum Glück bisher nur 2 Unterseiten – stell dir mal vor, wie viel Arbeit es dann ist, dies bei 200 Unterseiten zu korrigieren!

So, aber nun weiter zu unserer style.css – alles was wir dort ändern gilt ja dankenswerterweise für alle mit ihr verbundenen HTML-Seiten, darum müssen wir unsere Änderungen hier nur einmal vornehmen. Was wir nun hier tun, ist dem CTA_wrapper-DIV “position: fixed;” zu verpassen, damit bleibt es auch beim Scrollen auf der gleichen Höhe. Und diese Höhe stellen wir auf 50vh, wobei die Einheit vh soviel wie “Prozent vom Bildschirm” bedeutet. 50vh sind dann eben “auf halber Höhe vom Bildschirm”:

#CTA_wrapper div {
	position: fixed;
	top: 50vh;
}

Das Extra-DIV haben wir deswegen eingefügt, weil der “position: fixed;”-Befehl das DIV aus der übergeordneten Flexbox “herausnimmt”. Das würde ohne dem zusätzlich eingeschobenen DIV dazu führen, dass der Inhalts-Bereich der sonst nur links ist sich über die ganze Bildschirmbreite erstreckt. So bleibt alles wie es ist, nur unser CTA beginnt zu “schweben”.

Weil unser CTA ja nur auf der Desktop-Version “schweben” soll, müssen wir in unseren Media Query-Block nun etwas einfügen was dafür sorgt dass er auf Handys wieder ganz normal unter dem Inhalt ist. Das machen wir so:

#CTA_wrapper div {
  position: static;
}

Und voilá:

Webseite programmieren HTML und CSS 11

So, weiter geht’s zur Über-Mich-Seite:

5.2.2 Die Unterseite über den Autor (ueber-mich.html) anlegen

Dies klappt nun vergleichsweise einfach. Wir kopieren einfach wieder den Inhalt unserer index.html in eine neue .html-Datei mit dem Namen ueber-mich.html, und fertig ist unsere Vorlage.

Dann geben wir dem Ganzen noch ein schönes Bild, den entsprechenden Text, und sind fast fertig. Als Source-Code (Der Text ist eine alte Version einer Selbstbeschreibung von mir):

<div id='content_wrapper'>
  <img src='niklas.jpg' alt='Bild Niklas Baumgärtler'>
  <h1>Über den Autor</h1>
  <p>
  1989 in Wels, Oberösterreich geboren, lebt Niklas derzeit nach einigen Ausflügen in die große weite Welt (u.A. ein Jahr in Brasilien sowie ein weiteres in Norddeutschland)  in der Stadt, in der er das Licht der Welt erblickte.
  </p>
  <h2>Vorgeschichte</h2>
  <p>
  Ursprünglich wollte er Computerspiele-Programmierer werden, und absolvierte daher die Ausbildung zum Programmierer an der HTBLA Leonding, nahe Linz, OÖ. Seine (selbstgewählte) Abschlussarbeit bestand darin, in Java ein Programm zu schreiben, bei dem eine 3-dimensionale Spinne physikalisch korrekt mit Bällen beschossen wurde. Die Spinne hatte „Muskeln“, auf die eine lernende künstliche Intelligenz zugreifen konnte, um zu lernen, nicht von den Bällen umgeworfen zu werden.
  </p>
  <p>
  Schon damals war ersichtlich, dass seine Erwartungen an sich selbst beizeiten ein wenig übertrieben waren. Wider Erwarten funktionierte das Programm jedoch am Ende tatsächlich.
  </p>
  <p>
  Nach einem Praktikum in einem „richtigen“ IT-Unternehmen beschloss er, dass diese Art zu arbeiten auf Dauer nichts für ihn sei, und schwenkte um auf ein Soziologie-Studium. Unterfordert davon, fand er in der Bibliothek Bücher über alternative Pädagogik, die ihn dazu brachten, Lehrer zu werden. Das war, wie er voller Vorfreude annahm, dann <em>angewandte</em> <em>Sozialpsychologie</em>.
  </p>
  <p>
  Nach einem glücklichen Jahr an einer Freien Schule nahe Kiel, Norddeutschland, versuchte er sich 1,5 Jahre als Lehrer im österreichischen Regelschulsystem. Bald wurde offensichtlich, dass er kein ausgeprägtes Talent dafür mitbrachte, ein sich aufs vorgeschriebene Funktionieren beschränkendes Rädchen in einer großen Maschine zu sein.
  </p>
  <p>
  Nach einer weiteren Anstellung, bei der es ihm ebenso zum Verhängnis wurde, zu viel zu hinterfragen und mitzudenken, sah er endlich ein, dass für ihn langfristig kaum ein Weg an der Selbstständigkeit vorbeiführen würde.
  </p>
  <h2>Wo er sich aktuell wiederfindet</h2>
  <p>
  Nun hilft er Menschen, denen das <em>Wie</em> des Miteinanders genauso wenig egal ist wie ihm selbst, dies gut in ihr Leben zu integrieren.
  </p>
  <p>
  Zum Beispiel Unternehmen, zu genau jenen Kunden zu kommen, mit denen sie auch <em>gerne</em> arbeiten – etwa in dem er mit ihnen Konzepte für <a href="/nachhaltiges-marketing">nachhaltiges und authentisches Marketing</a> erstellt. Und es im Sinne von Webseiten-Erstellung/Content-Produktion dann auch gleich in die Praxis umsetzt. So kommt ihm sein ursprünglich erlerntes „Handwerk“ des Programmierens schlussendlich doch wieder zugute.
  </p>
  <p>
  Auf Anfrage auch in Vorträgen, Workshops &amp; Co. Oder mit Büchern wie <a href="/barfuss-fuehrt-dein-weg-dich-weiter">diesem</a>.
  </p>	
  <p>
  Fast jedes Wochenende findet man ihn derzeit wieder in seinem geliebten CC in Eberstalzell, Oberösterreich. Dort holt er sich Kraft für die kommende Woche, indem er – meist barfuß – sich völlig der Musik und dem Tanz hingibt, um die Anhaftungen der vergangenen Woche hinter sich zu lassen.
  </p>
  <p>
  Ansonsten schreibt und liest er viel, macht gerne Musik, praktiziert Tai Chi, läuft immer wieder mal im Wald herum und genießt tiefe Gespräche mit Freunden, Bekannten und bisher noch Unbekannten, die er im Laufe seiner Tage so trifft, und gerne auch mal spontan bekocht.
  </p>
  <p>
  <strong>Kontakt:</strong> <a href='mailto:niklas@bunterrichten.com'>niklas@bunterrichten.com</a>, <a href='tel:+436608769955'>(+43) 0660/8769955</a>
  </p>
</div>

Und als Webseite im Browser:

Webseite programmieren HTML und CSS 12

Kennst du diese beiden Komfort-Funktionen, die heutzutage normalerweise Standard sind:

  • Dass sich automatisch ein Mail-Programm öffnet, sobald man die Kontakt-Mailadresse anklickt
  • Dass am Handy die Telefonnummer vorgewählt wird sobald man auf die Telefonnummer klickt

Wenn du dir den letzten Source-Code-Block genau angesehen hast, wirst du vielleicht festgestellt haben, dass die Email-Adresse und die Telefonnummer zu Links (<a>-Tag) gemacht habe.

Bei der Mail-Adresse habe ich als href-Attribut “mailto:niklas@bunterrichten.com” gewählt, das öffnet bei Klick das Email-Programm und schickt eine Mail an die angegebene Adresse. Bei der Telefonnummer braucht das href-Attribut ein “tel:+436608769955”, um bei Klick die angegebene Nummer zu wählen. Ziemlich stylisch, oder?

Die vorgefertigen Webseiten-Bausteine wie Impressum und Datenschutz&Cookies kannst du nun vermutlich schon selbst anlegen, oder?

Und nun geht’s zur Fein-Abstimmung des Ganzen. Die derzeitigen Farben sind ja dann doch ziemlich unschön, das geht noch besser!

6. Die Feinabstimmung der Webseite programmieren: Farben, Schriften und Abstände

Als nächstes werden wir uns mit der Feinabstimmung beschäftigen. Fangen wir mit den Farben an – aber bevor wir das tun, entfernen wir erstmal alle “background-color”-CSS-Befehle aus unserer style.css – bzw. kommentieren wir die Befehle wenn wir noch schlauer sein wollen einfach mit Hilfe von // aus. Dann sieht die Webseite schon ganz anders aus:

Webseite programmieren HTML und CSS 13

6.1 Wir bringen Farbe in unsere Webseite!

Als erstes stylen wir mal den Header (die Menü-Leiste) und den Footer. Beginnen wir mit dem Footer. Damit es nicht unübersichtlich wird, hier nur die CSS-Befehle je Block, in denen ich etwas verändert habe:

#footer {
	background-color: #333333;
}
#footerflex a {
	color: #dddddd;
}

Ähnlich gehen wir beim Header, also der Menü-Leiste vor. Auch hier nur die Veränderungen:

#main-menu {
	background-color: #dddddd;
}
#logo span {
	color: #69482b
}
#logo span b {
	color: #a66933;
}

Außerdem habe ich die Link-Farben ganz generell angepasst, und mit Hilfe von “text-decoration: none;” die standardmäßig aktive Unterstreichung entfernt. Bei Links gibt es jeweils mehrere Zustände, die man mitbeachten kann und sollte:

  • Allgemeinen Aussehen
  • :hover (wenn man mit der Maus darüberfährt)
  • :visited (Links die schon besucht wurden)
  • :active (Der Link der gerade geöffnet ist)

Üblich ist es, zumindest die ersten 3 Zustände zu definieren:

a {
	color: #d49258;
	text-decoration: none;
}
a:hover {
	color: #e0a443;
}
a:visited {
	color: #aaaaaa;
}

Sieht doch gleich schon mal viel besser aus, oder?

Webseite programmieren HTML und CSS 14

6.2 Wir bringen verschiedene Schriften in unsere Webseite!

Bevor wir Schriften auf unserer Webseite nützen können, müssen wir sie erst in unsere Webseite importieren. In diesem Fall habe ich es mir einfach gemacht und einfach die gleichen Schriften benutzt wie auf meiner bunterrichten-Webseite. Das sind “Alegreya”, “Alegreya Sans SC” und “Open Sans”. Einbinden kann man diese wie eine .css-Datei mit dem HTML-Tag <link> im <head>-Block:

<head>
    <meta charset="utf-8">
    <title>Barfuß führt dein Weg dich weiter, von Niklas Baumgärtler</title>
    <meta name='description' content='Barfuß führt dein Weg dich weiter ist ein Buch von Niklas Baumgärtler. Hier kannst du es kaufen!'>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%7CAlegreya%3A600%7CAlegreya+Sans+SC%7COpen+Sans&amp;display=swap">
    <link rel="stylesheet" href="style.css">
</head>

Das Ganze musst du jetzt für alle deinen Unterseiten wiederholen, damit die Schriften auch auf jeder Unterseite eingebunden werden. Nervig? Freu dich auf den Kurs in PHP und MySQL, da werden wir das dann automatisieren 🙂

Sobald die Schriften eingebunden wurden, kann man z.B. die Schriftart Alegreya in unserer style.css mit dem Befehl “font-family: ‘Alegreya’;” einbinden. Ich hab mich mal etwas ausgetobt, im Source-Code sieht das dann so aus:

body {
	margin: 0px;
	font-family: "Open Sans";
}
h1, h2, h3, h4,
#logo span b {
	font-family: "Alegreya";
}
#logo,
#menu,
#CTA_wrapper,
#footer {
	font-family: "Alegreya Sans SC";
}

Und im Browser:

Webseite programmieren HTML und CSS 15

Schon viel besser, nicht? Nur unser armer CTA-Button sieht noch etwas… dämlich aus. Um den kümmern wir uns jetzt als nächstes. Immerhin ist der dafür da dass Besucher ihn klicken und das Buch kaufen. Den sollten wir nicht vernachlässigen!

6.3 Wir verschönern unseren CTA-Button

Als erstes geben wir ihm erstmal eine sinnvollere Bezeichnung. “Der CTA hier” – wirklich? Tz tz. Wie wäre es mit “Buch kaufen”? Besser! Also ändern wir die Beschriftung in allen Unterseiten entsprechend:

<div id='CTA_wrapper'>
  <div>
     <a href='https://www.amazon.de/Barfu%C3%9F-f%C3%BChrt-dein-dich-weiter/dp/1726838536'>Buch kaufen</a>
  </div>
</div>

Besser. Viel besser. Aber aussehen tut er immer noch etwas jämmerlich. Was hältst du davon, wenn wir ihm einen schicken Farb-Verlauf geben?

#CTA_wrapper a {
        display: block;
	margin: 20px;
	color: #ffffff;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	background: linear-gradient(to bottom, #eeeeee 0%,#e0a443 50%);
	border: 1px solid hsla(20,40%,45%,1);
	border-radius: 5px;
	font-size: 20px;
	line-height: 20px;
}

#CTA_wrapper a:hover {
	background: linear-gradient(to bottom,#d49258 0%,#aaaaaa 50%);
}
#CTA_wrapper a:active {
	position: relative;
	top: 3px;
}

Das “display: block;” und der margin sind notwendig, damit unser armer CTA auf der Handy-Version ein wenig mehr Platz zum Atmen hat. Sieht doch gleich viel besser aus das Ganze:

Webseite programmieren HTML und CSS 17

Wäre es nicht schön, wenn sich der Hintergrund der Menü-Links und der Footer-Links beim Darüberfahren mit der Maus ein wenig aufhellt? Das machen wir auch noch kurz:

6.4 Aufhellende Menü-Links mit :hover in die Webseite programmieren

Es geht zum Glück relativ einfach mit ein paar Zeilen Code. Wir müssen dafür die Links mit “display: block” zu HTML-Elementen mit Länge und Breite umwandeln und dann die :hover-Bedinungen entsprechend so einsetzen dass die Farbe aufgehellt wird:

#menu_items a {
	display: block;
}
#menu_items a:hover {
	background-color: #eeeeee;
}

Voilá! Fertig!

Oder auch nicht. Denn nun geht es ans Debuggen  – der Suche nach möglichen Fehlern:

7. Debugging: Die Webseite auf verschiedenen Systemen testen

Vielleicht sieht unsere Webseite in dem Browser in dem wir sie entwickelt haben gut aus. Aber was ist mit anderen Browsern? Anderen Auflösungen? Anderen Geräten, wie z.B. Handys oder Tablets?

Zum Beispiel ist dir vielleicht aufgefallen, dass in der Handy-Version nun da wir am Anfang alle “background-color”-Befehle auskommentiert haben der Hintergrund der aufklappenden Menüs fehlt. Das holen wir jetzt auch noch nach (hier nur das was ich ändere, und zwar innerhalb unserer Media Query):

#toggle_menu:checked ~ #menu_items {
  background-color: #dddddd;
  display: flex;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-top: 1px dashed black;
}

Besser:

Webseite programmieren HTML und CSS 18

7.1 Ein hilfreiches Werkzeug beim Webseiten-Programmieren: Responsinator

Die meisten von uns, die eine Webseite programmieren, haben nicht unzählige verschiedene Geräte zuhause, um die Webseite auf allen Geräten selbst testen zu können. Aber es gibt einige hilfreiche Werkzeuge, um diese Tests zu simulieren. Eines davon ist Responsinator. Du gibst einfach links oben eine Webseiten-Adresse ein, und schon siehst du die Webseite in vielen verschiedenen Bildschirm-Auflösungen (z.B. Desktop, Handy, Tablet, …). Wenn deine Webseite auf allen diesen Auflösungen gut aussieht, hast du schon einmal viel gewonnen:

Responsinator

Zum Beispiel ist mir dabei noch aufgefallen, dass der Logo-Schrift-Zug oben bei bestimmten Bildschirmgrößen in die nächste Zeile rutscht. Das ist nicht schön, darum habe ich dafür noch eine Extra-Media-Query eingefügt:

@media (max-width: 700px) {
	#logo span {
		display: none;
	}
}

Diese sorgt dafür, dass die Logo-Beschriftung nicht mehr angezeigt wird, falls das Bildschirmfenster klein ist.

Außerdem habe ich noch die maximale Bild-Größe im Content-Bereich mit 300 Pixeln (sowohl Höhe als auch Breite) begrenzt. Vor allem das Buch-Cover sah sonst einfach viel zu übermächtig aus:

#content_wrapper img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
	max-height: 300px;
}

Das “auto” beim margin links und rechts sorgt dafür, dass das Bild jeweils in der Mitte des übergeordneten DIVs platziert wird.

Der Footer-Bereich bekommt noch eine min-height, das ist eine minmale Höhe. Das hat den Sinn, dass der Footer-Bereich bei Seiten mit “kleinem Inhalt” sonst einfach mitten durch das Bild läuft. Würde nicht gut aussehen. Daher sieht der #content_wrapper nun so aus:

#actual_content {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 100px);
}

Der “calc”-Befehl ist ziemlich cool, mit diesem kannst du Berechnungen anstellen. In diesem Fall z.B. nehmen wir 100% der Höhe des Bildschirms (vh = % des Bildschirms, nicht des Eltern-DIVs), und rechnen davon 100 Pixel weg. Deswegen 100, weil das Menü 42 Pixel hat und der Footer auch schon 54, sind schon 96, und dann kommen noch ein paar Pixel dazu wegen dem box-shadow-Befehl, den wir irgendwo haben. Kannst gerne ausprobieren: mit 100px weniger geht es sich genau aus, dass kein Scroll-Balken erscheint.

Außerdem ist mir noch aufgefallen, dass die Impressum und die Datenschutz&Cookies-Seiten noch gar nicht angelegt worden sind. Aber die kannst du mittlerweile wohl auch schon selbst befüllen 🙂

Womöglich fallen dir noch weitere kleine und größere Fehler auf, die man ausbessern bzw. verschöenern könnte. Aber fürs erste sind wir nun mal fertig.

Lass uns unsere wunderschöne Webseite der Welt zur Verfügung stellen!

8. Die Webseite veröffentlichen

Derzeit ist die Webseite ja nur auf deinem Computer gespeichert. Wenn du möchtest, dass auch andere sie sehen können, musst du sie auf einem sogenannten Server hochladen. Dann brauchst du noch eine sogenannte Domain, die auf den richtigen Speicherplatz auf dem Server zeigt, so dass andere deine Webseite auch finden können.

8.1 Warum es sinnvoll ist, einen Webserver zu mieten

Einen Webserver kann man zwar theoretisch auch selbst aufbauen, aber in der Praxis ist das recht unpraktisch. Dein Computer müsste mit spezieller Software ausgestattet und ständig mit dem Internet verbunden sein. Normalerweise wirst du deswegen einen Server von einem Anbieter mieten, und zahlst dann monatlich einen Betrag dafür, dass du das darfst. Die Kosten dafür sind im Durchschnitt für einen Server der so halbwegs in Ordnung ist bei ca. 10€/Monat.

Es gibt zwar auch Gratis-Server, aber auf denen ist es dann oft so, dass irgendwo auf deinen Webseiten Werbung geschalten wird, über die du keine Kontrolle hast. Dann könnte es z.B. sein, dass auf deiner Webseite bei der es um Fahrräder geht plötzlich eine Partner-Vermittlungs-Werbung angezeigt wird. Auch nicht ideal.

Wenn du eine Webseite langfristig verwenden willst, rate ich dir dazu, früher oder deinen eigenen Server u mieten. 10€/Monat sind nicht allzu teuer.

Alternativ kannst du auch einen lokalen Webserver auf deinem Laptop oder PC installieren. Wie das funktioniert, erfährst du in der Lektion über XAMPP, die ich darüber geschrieben habe.

9. Den Abschluss der Webseiten-Programmierung feiern!

Du hast nun lange und intensiv daran gearbeitet, deine ersten Schritte in der Web-Programmierung zu machen. Ja, es gibt noch viel zu entdecken! Vielleicht hast du sogar schon eine ungefähre Richtung im Kopf, was dich als nächstes interessieren würde.

Aber fürs erste: vergiss nicht, zu feiern! Mach auf jeden Fall mal mindestens einen Tag Pause, und klopf dir selbst auf die Schulter. Du hast diesen ersten Kurs nun beendet.

Wenn du mehr über HTML und CSS wissen willst: Das Internet ist voll an Informationen dazu. Du hast nun das Grundwissen, um ungefähr zu erahnen, welche Fragen du stellen musst, um weiterzukommen. Oder du stellst eine Frage in der Community, und ich oder jemand anderer dort wird versuchen dir weiterzuhelfen. Ich freu mich auch über Feedback, damit ich den Kurs (und alles hier) laufend verbessern kann. Gerne entweder über die Community-Funktion oder auch direkt per Mail!

Ich hoffe, wir sehen uns dort – oder auch gerne im nächsten Kurs über PHP und MySQL wieder 🙂

Portrait Niklas Baumgärtler

Niklas Baumgärtler

Niklas Baumgärtler interessiert sich für die Kunst der Begeisterung und macht gerne Wechsel- und Hebelwirkungen in Sozialen Systemen sicht- und erlebbar. Mehr über Niklas Baumgärtler...

Inhaltsverzeichnis:

(per Klick auf den jeweiligen Absatz springen)

Über bunterrichten

bunterrichten ist ein Gegenkonzept zum sonst üblichen Unter-richten, das auf Anpassung und Unterordnung basiert. Stattdessen geht es darum, Menschen über Stimmigen Kontakt zur Entfaltung zu verhelfen - eben "Menschen helfen aufzublühen".

Niklas Baumgärtler ist Lehrer/Trainer und Werkzeugmacher für Webseiten und Soziale Systeme. Er ist seit Mai 2018 aus Überzeugung selbstständig, und vor allem in der Erwachsenen-Bildung tätig.