Webseiten Bauen

In dieser Einheit werden wir erste eigene Webseiten erstellen und veröffentlichen.

Wie wir Word verwenden

In Word verwenden wir die sogenannten «Formatvorlagen», mit welchen wir einen Absatz z.B. als «Titel» oder «Überschrift 1» markieren. Wir profitieren davon, indem wir danach auch nachträglich und jederzeit das ganze Dokument einheitlich formatieren können (z.B. Farbe und Schriftgrösse aller Überschriften ändern), und indem wir auf Knopfdruck ein hübsches Inhaltsverzeichnis einfügen können, das sogar fortlaufend und automatisch immer aktuell gehalten wird.

Semantische Dokumente

Diese Auszeichnung von Inhalten oder Textteilen (z.B. als «Titel», «Überschrift» usw.) nennt man Semantik. Ein mit Formatvorlagen bestücktes Word Dokument kann man also als «semantisches Dokument» bezeichnen.

Das offene Internet

Das Internet setzte sich von Anfang an für grösstmögliche Offentheit ein: die Inhalte sollten von so vielen Geräten und Programmen wie möglich gelesen und verstanden werden. Inhalte sollten von PCs, Macs, Laptops, Tablets, Smartphones, Smartwatches angezeigt werden können, möglichst einfach vorgelesen werden können, und möglichst auch maschinell ausgewertet werden können.

Deswegen war es von Geburt an «semantisch» konzipiert: HTML steht für «Hypertext Markup Language» und ist nichts anderes als eine Vereinbarung, wie ein Text semantisch angereichert werden kann. Die semantischen Informationen können dabei direkt in den Text integriert werden: Diese Informationen heissen «Tags» und machen die einzelnen Bestandteile eines HTML Dokuments zu HTML Elementen.

HTML Elemente

Sowie wir in Word den Titel und die Überschriften kennengelernt hatten, gibt es in HTML viele mehr. Grundsätzlich sollte in einem HTML Dokument nichts ohne semantisches Tag sein.

Beispiele:

  • Überschriften von unterschiedlichen Ebenen. «h1» (für Englisch «Heading 1») ist die grösste Überschrift, und mit zunehmender Zahl wird sie kleiner («h2», «h3», usw.).
  • Absätze sind für den normalen Fliesstext vorgesehen. Sie werden mit einem «p» (für Englisch «Paragraph») ausgezeichnet.
  • Nummerierte und unnummerierte Listen werden mit «ol» (für «ordered List») resp. «ul» (für «unordered List») ausgezeichnet, wobei dann die eigentlichen Elemente der Liste nochmals durch «li» (für «List Item») zusätzlich ausgezeichnet werden.
  • Auch multimediale Elemente wie Fotos werden mit Tags eingefügt: «img» steht für «Image» und nennt den Dateinamen resp. die Adresse einer Fotodatei.

Die HTML Tags werden immer mit «spitzen Klammern» («<» und «>») geschrieben. Die meisten umgeben ihren (Text-) Inhalt. Dabei ist das End-Tag genau gleich wie das Start-Tag, ausser dass es mit einem Schrägstrich beginnt («/»). Z.B. sieht dann ein Absatz so aus:

<p>Ein Absatz.</p>

Dabei ist das grüne das Start-Tag, das rote das End-Tag mit dem vorgestellten Schrägstrich.

Eine gute Übersicht und ein Nachschlagwerk über alle üblichen HTML Elemente finden Sie hier.

Rahmeninformationen

Für ein korrektes HTML Dokument braucht es auch um das ganze Dokument eine Konstruktion mit einigen Tags. So weiss jedes Gerät, jedes Computerprogramm, jeder Algorithmus, dass es sich tatsächlich um ein HTML Dokument handelt, und es können semantische (oder meta-) Informationen über das Dokument als ganzes mitgegeben werden.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Seitentitel</title>
  </head>
  <body>
    <h1>Erste Überschrift</h1>
    <p>Ein Absatz.</p>
  </body>
</html>

Die wichtigen Rahmenelemente sind:

  • die erste Zeile muss unmittelbar genau so am Anfang des Dokuments stehen.
  • das <html> Tag umgibt immer den ganzen Rest des Dokuments
  • das <head> Tag umgibt alle sogenannten Metainformationen. Dies sind Informationen über die ganze Seite. Dies beinhalten insbesondere den Titel oder Namen der Seite. Dieser steht beispielsweise dann bei einem normalen Internetbrowser (Edge, Firefox, Chrome) auf einem Laptop in der Fenstertitelleiste. Der Head kann aber auch viele andere Informationen wie den Namen der Autorin der Seite oder Schlüsselworte definieren.
  • der eigentliche Inhalt der Internetseite, den dann Besucherinnen tatsächlich zu Gesicht bekommen, ist alles, was im <body> Tag steht. Dort kommen dann die ganzen HTML Elemente, die im vorhergehenden Abschnitt vorgestellt wurden.

Im obenstehenden Beispiel ist auch gleich ersichtlich, wie HTML Elemente, da wo es sinnvoll ist, geschachtelt werden können: das <html> Element umfasst die ganze Seite, das <body> Element den ganzen sichtbaren Inhalt; andererseits wäre es nicht sinnvoll, dass eine Überschrift <h1> einen Absatz <p> enthielte.

HTML Erforschen

Nun ist ein guter Moment, um erstmal eine beliebige Internetseite mit dem oben beschriebenen Wissen zu erforschen. Damit können Sie viel lernen, Sie können aber auch abkupfern, nachahmen und kopieren, wenn Ihnen etwas gefällt, was Sie auf einer anderen Webseite sehen.

Sie könnten mit der Seite beginnen, die Sie nun anschauen. Hier sind einige Wege beschrieben. Alle Wege hängen von dem genauen Gerät und Programm ab, mit dem Sie diese Seite anschauen. Wenn ein Weg nicht geht, versuchen Sie einen anderen.

  • Tastenkombination [CTRL]-U: Damit bekommen Sie einfach den rohen HTML Code der Internetseite. Bei vielen öffentlichen Seiten wird es rasch sehr unübersichtlich. Schauen Sie sich aber ruhig mal die allerersten Zeilen an, und Sie werden sicher das eine oder andere Element wiedererkennen, das im Code-Beispiel im vorhergehenden Kapitel auftaucht.
  • Rechtsklick auf eine beliebige Stelle im Dokument, und dann «Untersuchen» oder «Inspect» anklicken (und dann geduldig warten – dies geht oft einige Sekunden): damit bekommen Sie eine schön aufbereitete Darstellung des HTML Codes um das angeklickte Element oder Objekt. Damit können Sie viele Details herausfinden und oft auch herausfinden, wie ein bestimmter Effekt erreicht werden kann. Was da übrigens aufgeht, sind die «Entwicklerwerkzeuge» oder die «Web developer console», die noch sehr viel mehr interne Informationen zur Verfügung stellt.
  • Tastenkombination [CTRL]-[SHIFT]-I (manchmal auch die [F12]-Taste): damit kann direkt die «Web developer console» geöffnet werden. Da können Sie dann mit «Auf- und Zuklappen» im «Inspektor» durch den HTML Code wandern.

Selber machen

Das selber erstellen eines HTML Dokuments ist eigentlich denkbar einfach: Es muss nur ein einfaches Textdokument ohnen jegliche Formatierung geschrieben werden mit den entsprechenden HTML Elementen. Dieses wird dann als Text-Datei gespeichert mit der Dateinamenserweiterung «.html». Dann kann es auf den meisten Geräten einfach geöffnet werden. Es wird dann automatisch in einem Internetbrowser geöffnet und entsprechend der semantischen Informationen angezeigt.

Das Dokument kann gut gleichzeitig im Texteditor geöffnet sein und bearbeitet werden und im Internetbrowser offen sein. Um Änderungen sichtbar zu machen, muss allenfalls im Editor gespeichert werden (CTRL-S) und danach im Browser neu geladen werden (F5).

Dieses Textdokument kann in Geany oder Visual Studio Code auf Ihrem Gerät erstellt werden, um es von da aus auf das Internet zu kopieren. Oder es kann direkt auf dem Internet erstellt und bearbeitet werden. Fragen Sie Ihre Lehrperson, wie es in Ihrer Klasse vorgesehen ist.

Aufgabe 1: erste HTML Seite

Kopieren Sie den Text vom folgenden Block in eine Datei, speichern Sie diese an einem geeigneten Ort (direkt in einem neuen Ordner auf Ihrem Webhosting oder in einem dafür erstellten Ordner in Ihrem OneDrive), und betrachten Sie sie dann im Browser.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Meine erste Seite</title>
  </head>
  <body>
    <h1>Meine Überschrift</h1>
    <p>Spannender Text.</p>
  </body>
</html>

Machen Sie Änderungen und Ergänzungen, und prüfen Sie, wie diese im Browser erscheinen. Fügen Sie auch Listen ein. Sie können auch versuchen, Tabellen oder Code-Blöcke einzufügen, oder Text fett oder kursiv zu formatieren (Tipp: «untersuchen» sie die Formatierung in diesem Text!).

Versuchen Sie, ob sie das Format «kaputmachen» können! Was passiert, wenn Sie unsinnige Verschachtelungen machen?

Das Resultat dieser Aufgabe soll eine HTML Seite sein, die Sie selber cool finden.

Bilder

Bisher konnten wir nur Text organisieren. Wichtige Elemente sind aber auch Bilder als ein grafisches Element.

Das HTML Element für Bilder heisst img (für «image») und sieht im einfachsten Fall so aus:

<img src="foto.jpg">

Wobei der grüne Teil entweder der Dateiname einer Bilddatei ist, welche im selben Verzeichnis liegt wie unser HTML Dokument, oder die Internetadresse einer Grafik, die irgendwo im Internet liegt. Sie bemerken, dass das <img> Tag speziell ist, weil es ein sogenannten «inhaltsleeres Tag» ist (mehr Informationen dazu). Es braucht also kein End-Tag </img>, weil es eben keinen sichtbaren Text-Inhalt hat.

Aufgabe 2: Bild hinzufügen

Erstellen Sie eine neue HTML Datei (denken Sie an den nötigen Rahmen), und fügen Sie ein Foto hinzu, das Sie im selben Verzeichnis ablegen auf Ihrem Gerät.

Fügen Sie zusätzlich auch mindestens ein Bild aus dem öffentlichen Internet in Ihr HTML Dokument ein.

Das Resultat dieser Aufgabe ist ein Bild (z.B. eine «.jpg»-Datei) und eine HTML Datei, die beim Anzeigen im Browser dieses Bild enthält.

Links oder Internetverweise

Genauso wichtig für eine Internetseite sind Links, um Seiten miteinander zu verbinden oder auf andere Inhalte irgendwo auf dem Internet hinzuweisen.

Das HTML Element für Links heisst (leider) «a» (für «anchor», Anker). «Leider», weil das oft die Internetsuche danach erschwert 😉

Im einfachsten Fall sieht es so aus:

<a href="anderes.html">Klicke hier</a>

Wobei der grüne Teil entweder der Dateinamen einer HTML Seite im selber Verzeichnis oder die ganze Adresse einer beliebigen Seite auf dem Internet ist. Der rote Teil ist der Text, auf den die Betrachterin Ihres HTML Dokuments klicken kann, um dem Link zu folgen.

Aufgabe 3: Link hinzufügen

Erstellen Sie eine neue HTML Datei. Sie soll abgesehen vom bekannten Rahmen auch Links zu allen bisher erstellten HTML Dateien in Ihrem Verzeichnis enthalten, und mindestens einen Link zu einer coolen Seite auf dem Internet, die Sie kennen.

Zusammenfassung

Nun sind Sie bereit, eine ganze eigene Webseite zu erstellen.

Aufgabe 4: Projekt: eigene Webseite

Wählen Sei eine der folgenden Möglichkeiten:

  1. Eine Seite über Sie selbst
  2. Eine Seite über eine bekannte Gruppe oder Person
  3. Eine Seite über ein Hobby oder Thema, das Sie fasziniert

Erstellen Sie ein neues Verzeichnis für dieses Projekt am besten Ort in Ihrem OneDrive.

Erstellen Sie mindestens zwei HTML Seiten und mindestens ein Foto, welche Sie alle in Ihrem Verzeichnis abspeichern und alle miteinander verlinken respektive einbetten.

Sie können nun nach Belieben ausbauen. Erforschen Sie andere Seiten, um herauszufinden, wie Sie die coolste Webseite erstellen können.

Veröffentlichen

Falls Sie die Dateien nicht direkt auf dem Internet bearbeitet haben, liegen all Ihre HTML Dokumente bisher nur auf Ihrem Gerät. Ist letzteres der Fall, können diese nun aber für die ganze Welt sichtbar gemacht werden. Dafür müssen sie auf einen Server hochgeladen werden.

Aufgabe 5: HTML Seiten veröffentlichen

Veröffentlichen Sie das Resultat aus Aufgabe 4.

Veröffentlichen Sie das Verzeichnis auf Ihrem Webserver. Benennen Sie jenes HTML Dokument, womit eine Besucherin starten soll, mit «index.html». Damit wird eine Besucherin, die auf die Adresse Ihres Verzeichnisses gelangt, auf diese Seite geführt.

Beispiel: Wenn Sie die Beatles als Thema für Ihre Webseiten gewählt haben, damit Ihr Verzeichnis «beatles» benannt haben, und dieses auf Ihr Webhosting auf beispiel.cyon.site hochgeladen haben, dann wird einer Besucherin, die die Adresse

https://beispiel.cyon.site/beatles

aufruft, auf die index.html Datei in jenem Verzeichnis geführt.

Testen Sie Ihre veröffentlichte Webseite und teilen Sie dann die Adresse im Teams-Chat.

Bonus: Kontaktformular

Falls Sie rasch durchgekommen sind mit Ihrem Projekt, können Sie sie mit diesem Bonus Kapitel auch noch weiter ausbauen.

Mit Ihrem Webhosting können Sie nicht nur sogenannte «statische Webseiten» erstellen. Statisch nennt man eine Webseite, wenn Sie einfach nur ein Dokument ist, das immer dasselbe darstellt (denselben Text, im selben Format, mit denselben Bildern usw.).

Sie können auch ganze Programme schreiben, die auf die Umgebung reagieren können. Dabei benützt man oft die Programmiersprache «Javascript» für Dinge, die nur bei der Besucherin im Browser laufen sollen, oder «PHP», das Programme auf dem Server (in Ihrem Webhosting, Ihrer «Wohnung auf dem Internet») ausführt.

Eine erste gute Anwendung ist oft ein Kontaktformular. Damit können Besucherinnen Ihrer Seite z.B. Ihnen eine Nachricht senden, oder etwas aus Ihrem Shop bestellen. Im einfachsten Fall können Sie sich einfach ein Email schicken lassen, wenn jemand Ihnen eine Nachricht schreibt.

Sie können selber versuchen, eine solche «PHP Seite» zu erstellen, oder können dies mal mit chatGPT versuchen. Hier eine mögliche Aufforderung («Prompt»), die Sie chatGPT schreiben können:

Bitte schreibe mir eine PHP Seite, die ein Kontaktformular mit Emailadresse, Thema und Nachricht darstellt. Falls Daten eingesandt werden, soll ein mail an die Adresse e123456@example.com geschickt werden mit den Daten. Die Emailadresse soll als Reply-To gesetzt werden, damit ich direkt antworten kann. Bitte validiere und filtere alle Eingaben ausreichend, und sorge für vollständig gültigen HTML Code.

Schauen Sie, was chatGPT Ihnen liefert. Hinterfragen Sie es, versuchen Sie, es zu verstehen (durch Rückfragen an chatGPT!), fragen Sie nötigenfalls auch bei Herrn Schucan nach, wenn Sie Bedenken haben.

Das Resultat müssen Sie dann in eine PHP Datei schreiben (z.B. mit Geany). Die Datei muss dann nicht mehr auf «.html» enden, sondern auf «.php». Kopieren dann diese Datei genau gleich auf Ihr Webhosting, wie Sie es mit den anderen Dateien taten, und rufen Sie die Adresse auf. Denken Sie daran, dass Sie die Adresse «e123456@example.com» durch Ihre SBL Emailadresse ersetzen müssen.

Wenn Ihr Kontaktformular funktioniert, können Sie es beliebig in Ihre Projekt-Website einbauen über Link, oder Sie können es sogar in eine Seite einbauen versuchen!

Bonus: Kosmetik

Ausser Interaktivität wie mit einem Kontaktformular, können Sie Ihre auch mit noch hübscheren Farben, Formen, Schriften und anderen grafischen Effekten aufpolieren.

Dies passiert heute mit den sogenannten Cascading Style Sheets (CSS).

Es gibt wie so oft sehr viele Arten, dies einzubauen.

Fürs erste können Sie zum Erforschen und Experimentieren den folgenden Code in das Head-Element einer Webseite einfügen:

<style>
  body {
   background-color:red;
    color:yellow;
  }
  h1 {
    font-weight:bold;
    text-decoration:underline;
  }
</style>