Website-1-mal-1: Von Nichts zur Website
Das Internet ist heute aus dem Leben kaum wegzudenken.
Da ist es logisch, zu lernen, wie man selbst Websites gestalten kann.
Ich gehe hier davon aus, dass du bereits grundlegende Programmierkenntnisse hast.
Falls nicht, starte mit dem Programmier-1-mal-1.
Was ist eigentlich?
In HTML wird die grundlegende Struktur der Website samt ihrer Inhalte definiert.
Dabei ist eine HTML-Datei stets nach dem selben Prinzip aufgebaut:
<!DOCTYPE html>
<html lang="de">
<!--- Im Head-Teil werden die Metadaten für die Website definiert --->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dieser Text erscheint im Tabnamen</title>
</head>
<!--- Im Body wird der Aufbau der Website definiert --->
<body>
<p class="our-text">Dieser Text erscheint auf der Website</p>
<button id="our-button">Drück mich 🍪</button>
<p id="ergebnis"></p>
</body>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</html>Kopiere diesen Code in eine neue Datei mit dem Namen “index.html”
Wenn du die Datei in einem Browser deiner Wahl öffnest, solltest du nun folgendes sehen:
Das sieht jetzt natürlich nicht schön aus, deshalb klicke oben auf den CSS-Tab!
CSS erlaubt es dir, der Website einen Facelift zu geben.
Bye Bye, 90er – hallo Zukunft!
/* Diese Regeln werden auf die gesamte Seite angewendet*/
body {
/* Definiert die Hintergrundfarbe */
background-color: #181825;
/* Definiert die Vordergrundfarbe (z.B. Text) */
color: #cdd6f4;
/* Positioniert allen Text in der Mitte */
text-align: center;
}
/* Der Selektor 'p.our-text' wählt alle p (Paragraph)-Elemente mit der Klasse 'our-text' */
p.our-text {
/* Schriftgröße */
font-size: 30px;
/* Unterstreicht den Text */
text-decoration-line: underline;
}
/* Der Selektor '#our-button' wählt genau das Element mit der id 'our-button' */
#our-button {
background-color: #a6e3a1;
color: #000;
/* Rundet die Ecken des Knopfes ab */
border-radius: 8px;
/* Vergrößert den leeren Raum zwischen Knopf und Beschriftung */
padding: 8px 12px;
/* Eigenschaften, die mit !important gekennzeichnet sind,
nehmen stehts Priorität und überschreiben alle anderswo definierten Werte */
border-color: #2f4d2d !important;
/* transition erlaubt es, Effekte langsam einzublenden */
transition: box-shadow 0.5s ease;
/* Beschreibt die Eigenschaften des Elementes beim überfahren mit der Maus */
&:hover {
/* Durch das !important bei der Rahmenfarbe oben können wir sie hier nicht mehr verändern */
border-color: #a6e3a1;
/* Fügt einen grünen Schatten ein – fancy!*/
box-shadow: 0px 0px 9px #a6e3a1;
}
}Füge diesen Text in eine neue Datei “style.css” im selben Ordner ein.
Die Seite sollte nun wiefolgt aussehen:
Versuche auf deiner Website, über den Knopf zu fahren.
Beim Klicken passiert noch nichts, deswegen benötigen wir nun JavaScript!
JavaScript ist das letzte Puzzlestück, um deine Website zum Leben zu erwecken.
Es erlaubt dir, Funktionalität hinzuzufügen.
Dabei wird der Code im Webbrowser der Nutzenden ausgeführt.
// Variable des Typs Integer (wird automatisch ermittelt)
let clickCount = 0;
// Hier suchen wir auf der Website nach unserem in HTML definiertem Knopf und speichern ihn
const button = document.getElementById('our-button');
// Nun fügen wir eine Funktion hinzu, die aufgerufen wird, sobald man auf den Knopf drückt
button.addEventListener('click', () => {
// Wir erhöhen den Klick-Zähler
clickCount++;
// Und geben die Anzahl der im bisher leeren Element "ergebnis" aus -> Es erscheint auf der Website!
document.getElementById('ergebnis').innerText = `Knopf ${clickCount} mal gedrückt!`;
});Kopiere diesen Code in eine neue Datei mit dem Namen “script.js”
Wenn du die Datei in einem Browser deiner Wahl öffnest, solltest du den Knopf nun drücken können!
Somit hast du deinen eigenen Cookie-Clicker gebaut :)