Webentwicklung – Deine erste Website
Webentwicklung – wir interagieren täglich mit ihr, aber was steckt wirklich dahinter? Jede Website ist ein beeindruckendes Kunstwerk aus Code, bestehend aus zahlreichen Elementen und Strukturen, die zusammenwirken.
In diesem Lernbeitrag wird Dir ein grundlegendes Verständnis der Webentwicklung vermittelt und nachdem Du den Beitrag gelesen hast, wirst Du einen besseren Überblick haben, was bei der Erstellung einer Website vor sich geht und wie die verschiedenen Technologien wie HTML, CSS und vielleicht auch JavaScript zusammenarbeiten, um diese faszinierenden digitalen Erlebnisse zu ermöglichen.
Das Grundgerüst – HTML
Um die unterschiedlichen Technologien der Webentwicklung besser zu verstehen, werden wir in den kommenden Unterbeiträgen gemeinsam eine kleine Website erstellen. Dabei legen wir zunächst das Grundgerüst – den HTML-Code. Du kannst aktiv mitmachen, indem Du den Tryit Editor von W3Schools nutzt. In der realen Welt bräuchtest Du für den Betrieb einer Website einen Server, aber für unsere Übung reicht dieser Editor vollkommen aus. Du kannst den Code einfach in das linke Fenster des Editors eingeben und auf „Run“ klicken, um deine Seite im rechten Fenster zu sehen.
Das ist unser Ziel – so sollte unsere fertige Website aussehen. Die benötigten HTML-Elemente stellen wir Dir gleich vor.
<title>: Dieses Element definiert den Titel der Webseite, den man in der Titelleiste des Browsers sieht („Meine erste Website“; hier nicht ersichtlich).<h1>: Dies ist die Überschrift erster Ordnung und repräsentiert die wichtigste Überschrift auf der Seite („Willkommen auf meiner ersten Website!“).<h2>: Das ist eine Überschrift zweiter Ordnung, die wir für den Titel des Hauptinhalts verwenden („Über diese Website“).<p>: Dieses Absatzelement verwenden wir, um einen informativen Text über die Webseite zu schreiben („Diese Website ist ein einfaches Beispiel…“).<button>: Dieser Button ist so programmiert, dass er beim Klicken eine JavaScript-Funktion auslöst („Klick mich!“; auf das werden wir später noch genauer eingehen).
Es gibt noch weitere Elemente, die für die Erstellung einer Website unverzichtbar sind. Ohne diese Elemente wäre es nicht möglich, eine funktionsfähige Website zu erstellen. Hier sind sie:
<!DOCTYPE html>: Dies teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt. Es sollte immer an der Spitze eines jeden HTML-Dokuments stehen.<html>: Dies ist das Wurzelelement, in dem sich alle anderen HTML-Elemente befinden.<head>: Hier stehen die Metainformationen über das Dokument. In unserem Code enthält es das<title>-Element.<body>: Innerhalb dieses Elements befindet sich der Hauptinhalt der Webseite, den die Nutzer sehen.<header>: Dies ist ein Container für einleitenden Inhalt oder einen Satz von Navigationslinks. In unserem Beispiel befindet sich hier der Haupttitel (<h1>).<main>: Dieses Element repräsentiert den Inhalt des Dokuments. In unserem Beispiel befinden sich das<h2>-Element, das<p>-Element und das<button>-Element.
Falls Dich diese Begriffe im Moment noch verwirren, keine Sorge! Du wirst im Laufe des Unterrichts am IT-Kolleg Imst alles über sie lernen.
Jetzt schauen wir uns den vollständigen Code an:
Du kannst diesen Code in den Tryit Editor von W3Schools einfügen und auf „Run“ klicken. Du solltest nun eine einfache, unformatierte Version unserer Website sehen. Wenn Du auf den Button „Klick mich!“ klickst, passiert noch nichts – aber keine Sorge, das werden wir im Laufe unserer Lektionen beheben.
Das Aussehen – CSS
Jetzt, wo wir unser Fundament- das HTML – haben, wollen wir das Aussehen unserer Website verändern und ansprechender gestalten. Hier kommt CSS ins Spiel.
Bevor wir uns jedoch in die Praxis stürzen, sollten wir uns zunächst darüber klar werden, dass es drei verschiedene Methoden gibt, um CSS in einer Website zu verwenden:
- Inline-Styling: Dabei werden die CSS-Stile direkt in das HTML-Element eingefügt. Obwohl diese Methode sehr direkt und einfach zu verstehen ist, wird sie nicht empfohlen, da sie die Struktur und Darstellung in Deinem Code vermischt. Beispiel:
<h1 style="color: #2191BD;">Willkommen auf meiner ersten Website!</h1>. - Interne Stylesheets: Hierbei schreibst Du den CSS-Code in einem
<style>-Element im<head>-Bereich Deines HTML-Dokuments. Diese Methode ist nützlich, wenn Du spezifische Stile für eine einzelne Seite haben möchtest. - Externe Stylesheets: Bei dieser Methode schreibst Du den CSS-Code in einer separaten Datei und verlinkst diese Datei in Deinem HTML-Dokument. Dies ist die gängigste Methode, da sie Dir erlaubt, die gleichen Styles auf mehrere Seiten anzuwenden und hält Deinen Code sauber und gut organisiert.
Jede dieser Methoden hat ihre Vor- und Nachteile, und welche Du verwendest, hängt von den spezifischen Bedürfnissen Deines Projekts ab. Im Rahmen dieser Übung werden wir uns auf Inline-Styling konzentrieren – die anderen Varianten wirst Du am IT-Kolleg Imst lernen.
Widmen wir uns nun unserem Beispiel. Wir möchten die Hauptüberschrift mit einem Hintergrund versehen, sie sollte zentriert auf der Website ausgerichtet sein und die Textfarbe sollte verändert werden. Dazu benötigen wir die folgenden Eigenschaften:
background-color– Mit dieser Eigenschaft kann die Hintergrundfarbe eines Elements verändert werden.text-align– Damit kann die horizontale Ausrichtung von Text geändert werden.color– Um die Farbe des Texts zu verändern, kann die Eigenschaft „color“ verwendet werden.
Bauen wir das in unseren Code ein, sieht das folgendermaßen aus:
Wie du sehen kannst, haben wir die CSS-Eigenschaften „background-color“ und „text-align“ im <header>-Element und die „color“-Eigenschaft im <h1>-Element angewendet. Die Farben haben wir jeweils als Hex-Codes definiert.
Versuche nun, diesen Code im Tryit Editor von W3Schools einzufügen und klicke auf „Run“. Wie hat sich die Website verändert?
Nun fehlt uns nur noch eine Sache, um unsere Website vollständig zum Leben zu erwecken – die Interaktivität unseres Buttons. Im nächsten Unterbeitrag werden wir genau das in Angriff nehmen und mit Hilfe von JavaScript umsetzen.
Die Interaktivität – JavaScript
Jetzt wenden wir uns dem letzten fehlenden Stück unserer Website zu – der Funktionalität unseres Buttons. Bisher reagiert dieser nicht auf unser Klicken, doch das wird sich jetzt ändern.
Um JavaScript in eine Webseite einzubinden, gibt es drei gängige Methoden:
- Inline JavaScript: Hierbei wird JavaScript direkt in das entsprechende HTML-Element eingefügt, meistens über das „onclick“-Attribut. Diese Methode ist jedoch nicht empfohlen, da sie die Struktur des Codes unübersichtlich machen kann und die Wartung erschwert.
- Interne JavaScript-Blöcke: Man kann den JavaScript-Code innerhalb von
<script>-Elementen im HTML-Dokument platzieren, meistens im Kopfbereich (<head>) oder am Ende des Rumpfes (<body>). Dies ist sinnvoll, wenn der JavaScript-Code nur für diese spezielle Seite gedacht ist. - Externe JavaScript-Datei: Bei dieser Methode wird der JavaScript-Code in einer separaten
.js-Datei geschrieben und dann mit einem Link in das HTML-Dokument eingefügt. Dies ist die gebräuchlichste Methode, besonders bei größeren Projekten, da sie die Wiederverwendbarkeit des Codes ermöglicht und die Übersichtlichkeit des HTML-Codes bewahrt.“
Für unser einfaches Beispiel werden wir den JavaScript-Code direkt in unseren HTML-Code einbinden. Doch denke daran, dass für umfangreichere Projekte das Auslagern des JavaScript-Codes in eine externe Datei oft am Besten ist.
Nun wieder zu unserem Beispiel. Die folgenden JavaScript-Komponenten werden wir in unseren Code einfügen:
<script>: Dieses Element ist vergleichbar mit einem Raum, den wir für JavaScript in unserer HTML-Datei schaffen. Durch dieses Element weiß der Browser, dass sich innerhalb kein HTML- oder CSS-Code mehr befindet.function myFunction(): Dieser Teil definiert eine Funktion namens „myFunction“. Eine Funktion ist ein wieder verwendbarer Codeblock, der eine bestimmte Aktion ausführt. In diesem Fall definiert die Funktion namensmyFunctiondas Verhalten des Buttons, wenn er angeklickt wird. Der Code für die Funktion wird dabei zwischen zwei geschwungene Klammern ({…}) geschrieben.alert("Yay! Der Button funktioniert!"): Das ist die konkrete Anweisung in unserer Funktion. Wenn wir „myFunction“ ausführen, wird diesealertausführen und es öffnet ein kleines Fenster mit der Nachricht „Yay! Der Button hat funktioniert!“.onclick="myFunction()": Hier rufen wir unsere Funktion auf. Dieses Attribut in unserem HTML-Button sagt: „Wenn jemand auf mich klickt, führe die Anweisung innerhalb meiner ‚myFunction‘-Funktion“ aus.
Bauen wir das in unseren Code ein, sieht das folgendermaßen aus:
Nun haben wir das ‚onclick‘-Attribut zu unserem Button hinzugefügt. Gleichzeitig haben wir ein <script>-Element eingefügt, in dem wir die Funktion definiert haben, die beim Klick auf den Button ausgelöst wird. Diese Funktion öffnet ein sogenanntes Alert-Fenster, das unseren gewünschten Text anzeigt.
Versuche nun, diesen Code im Tryit Editor von W3Schools einzufügen und klicke auf „Run“. Öffnet sich das Fenster?
Herzlichen Glückwunsch, Du hast soeben Deine erste Website programmiert! Obwohl wir nur einen kurzen Einblick in die jeweiligen Technologien genommen haben, hast Du bereits einiges über die Webentwicklung gelernt. Alles weitere wird Dir während des Unterrichts am IT-Kolleg Imst beigebracht.