Webentwicklung

Im Wahlkurs Webentwicklung behandeln wir Techniken, mit denen Webseiten und einfache Webapps programmiert werden. Hier findest du eine kurze Übersicht über die Inhalte der einzelnen Lektionen zum Nachlesen.

Inhalt

  1. Lektion 1: Editor und HTML-Tags
  2. Lektion 2: Grundgerüst und Stylesheet
  3. Lektion 3: Das div-Element
  4. Lektion 4: Flexibles Layout
  5. Lektion 5: Prototypen und Verschiedenes
  6. Lektion 6: Hover-Effekte
  7. Lektion 7: css-Klassen
  8. Lektion 8: css-Animationen (Teil 1)
  9. Lektion 9: css-Animationen (Teil 2)
  10. Lektion 10: Schriftarten
  11. Lektion 11: Javascript

Lektion 1: Editor und HTML-Tags

Editor

HTML-Code kann mit jedem beliebigen Texteditor geschrieben werden. Wir verwenden in der Schule VisualStudio Code in der Web-Version (Link). Dieser kann auch heruntergeladen werden. Es ist empfehlenswert, folgende Einstellung vorzunehmen: Links unten auf das Zahnrad klicken ⭢ Einstellungen ⭢ nach "Telemetry" suchen ⭢ Telemetry Level von "all" auf "off" stellen (siehe Screenshot)

screenshot1

In VisualStudio Code öffnet man einen Ordner und erstellt dort eine Datei namens index.html (siehe Screenshot). Dateien mit HTML-Code müssen immer die Endung "html" besitzen.

screenshot2

Webseite ansehen

Um die Webseite anzusehen muss man die HTML-Datei speichern, den Projektordner öffnen und die Datei per Doppelklick mit einem Browser öffnen. Bei Änderungen einfach abspeichern und im Browser neu laden.

HTML-Tags

HTML steht für Hypertext Markup Language (deutsch in etwa: "Markierungssprache für Hypertexte"). Die Elemente des Dokuments werden markiert, z.B. als Überschrift, als Absatz, als Link, etc. Dazu verwendet man sogenannte Tags (deutsch: "Eikett", "Anhänger"). Tags stehen immer in spizen Klammern (< und >). Die meisten HTML-Elemente haben ein öffnendes und ein schließendes Tag. Dazwischen steht der Inhalt des Elements. Hier nun einige Beispiele:

<p>Ein Absatz wird mit dem p-Tag markiert.</p>
<h1>Überschrift der 1. Ebene</h1>
<a href="http://klenzegymnasium.de">Link zum Klenze Gymnasium</a>

Manche HTML-Elemente (wie das für Bilder) bestehen nur aus einem Tag:

<img src="pfad/zur/bilddatei.jpg">

Es ist außerdem möglich, HTML-Elemente zu verschachteln:

<ul>
    <li>erster Punkt</li>
    <li>zweiter Punkt</li>
    <li>dritter Punkt</li>
</ul>

Eine Übersicht über alle HTML-Elemente findet man unter diesem Link.

Lektion 2: Grundgerüst und Stylesheet

HTML-Grundgerüst

Ein gültiges HTML-Dokument besitzt folgenden Aufbau:

<!DOCTYPE html>
<html lang="de">
    <head>
    </head>
    <body>
    </body>
</html>

Alles, was zwischen den <head> Tags steht, sind Zusatzinformationen zur Webseite. Der eigentliche Inhalt steht zwischen den <body> Tags.

Titel der Webseite

Der Titel einer Webseite erscheint als Titel des Tabs im Browser und steht zwischen den <head>Tags:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Titel meiner Webseite</title>
    </head>
    <body>
    </body>
</html>

Stylesheet einbinden

Um das Aussehen der Webseite zu steuern, verwendet man eine eigene Datei. Eine solche spezielle Datei wird Stylesheet genannt. Diese kann man style.css nennen und direkt im selben Verzeichnis wie die HTML-Datei speichern. Damit die Webseite die dort definierten Style-Regeln beachtet, muss die Datei zwischen den <head>-Tags eingebunden werden:

<!DOCTYPE html>
<html lang="de">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    </body>
</html>

ID zuweisen

Um bestimmten HTML-Elementen gezielt einen Stil zu verpassen, muss man diesen eine ID zuweisen:

<p id="ersterAbsatz">Dies ist der erste Absatz auf meiner Webseite.</p>

Style-Regeln

In der CSS-Datei können nun Style-Regeln für das HTML-Element mit der ID ersterAbsatz defininert werden. Style-Regeln für ein Element stehen zwischen geschweiften Klammern. Jede Style-Regel endet mit einem Semikolon.

#ersterAbsatz {
    background-color: red;
    color: yellow;
    font-size: 20px;
    border-style: dotted;
    border-width: 5px;
    border-color: green;
}

Eine Übersicht aller Style-Eigenschaften.findet man unter diesem Link.

Lektion 3: Das div-Element

div-Elemente definieren rechteckige Bereiche, die sehr flexibel einsetzbar ist. Man kann damit beispielsweise ein Menü auf der Seite basteln.

<div id="menu">
    Hier steht das Menü.
</div>
<div id="inhalt">
    Hier steht der Inhalt der Seite.
</div>
#menu {
    background-color: blue;
    max-width: 200px;
    float: left;
}
#inhalt {
    background-color: green;
}

Lektion 4: Flexibles Layout

Weil die Geräte, mit denen wir Webseiten betrachten, alle unterschiedliche Bildschirmgrößen und -auflösungen besitzen, ist es wichtig, das Aussehen der Webseite flexibel zu gestalten. Hierfür kann die CSS-Anweisung flex verwendet werden.

<div id="container">
    <div>eins</div>
    <div>zwei</div>
    <div>drei</div>
</div>
#container {
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
}

Unter diesem Link findet man eine gute Erklärung über die einzelnen flex-Eigenschaften (leider auf Englisch, aber viele Browser können die Seite direkt übersetzen).

Lektion 5: Prototypen und Verschiedenes

Bevor man Code für ein größeres Projekt schreibt, ist es wichtig, dass man gut plant. Man kann z.B. mit einer Präsentationssoftware erstmal eine Zeichnung der Webseite erstellen und sich überlegen, an welche Stelle welche Elemente hin sollen und wie diese aussehen sollen. So eine Zeichnung nennt man auch "Prototyp".

Weitere Tricks

Ein Hintergrundbild, das beim Scrollen fest bleibt, erreicht man auf folgende Art. Die Bilddatei muss sich in diesem Fall im selben Ordner befinden wie die HTML- und CSS-Dateien.

body {
    background-image: url(food.jpg);
    background-attachment: fixed;
}

Soll das Hintergrundbild immer genau die gesamte Seite ausfüllen, muss man folgende Anweisung hinzufügen:

background-size: cover;

Code-Kommentare helfen, bei einem größeren Projekt den Überblick zu behalten. In HTML schreibt man sie so:

<!-- Hier steht ein Kommentar -->

Auch in CSS sind Kommentare möglich. Hierfür verwendet man allerdings andere Zeichen:

/* Hier steht ein Kommentar */

Lektion 6: Hover-Effekte

Um Elemente hervorzuheben, wenn man mit der Maus darüber fährt, kann eine zusätzlicher CSS-Regelblock eingefügt werden:

#menupunkt:hover {
    background-color: orange;
    box-shadow: 5px 5px 10px black;
}

Lektion 7: css-Klassen

Um bestimmte Styleregeln auf viele, aber nicht auf alle Elemente anzuwenden, ist weder die id (nur für ein einziges Element), noch die Angabe des Tag-Namens (betrifft dann alle Elemente dieses Typs) das richtige Werkzeug. Zu diesem Zweck kann man ein Element einer oder mehreren Klassen zuweisen.

<div class="rot gross">
    Erstes Element
</div>

<div class="rot">
    Zweites Element
</div>

<div class="gross">
    Drittes Element
</div>
.rot {
    background-color: red;
}

.gross {
    font-size: 20pt;
}

Lektion 8: css-Animationen (Teil 1)

Für einfache animierte Übergänge zwischen zwei css-Stilen (z.B. Größe, Farbe oder Abstand) kann die Eigenschaft transition verwendet werden. Dies funktioniert beispielsweise gut bei hover-Effekten. Dabei muss in der transition Eigenschaft angegeben werden, was animiert werden soll und wie lange diese Animation dauern soll.

<div id="menu">
    <div class="menu-item">Startseite</div>
    <div class="menu-item">Produkte</div>
    <div class="menu-item">Kontakt</div>
</div>
.menu-item {
    background-color: cyan;
    transition:
        transform 250ms,
        background 1000ms;
}

.menu-item:hover {
    background-color: yellow;
    transform: translateX(10px);
}

(https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/Transition)[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/Transition]

Lektion 9: css-Animationen (Teil 2)

Noch komplexere Animationen lassen sich wie folgt realisieren. Eine Animation muss einen eindeutigen Namen haben, eine Gesamtdauer und die Angabe, wie oft sie abgespielt werden soll (eine Zahl oder der Wert infinite, also "unendlich"). Ein keyframe ist dabei ein Zwischenschritt der Animation (ähnlich wie ein Bildchen in einem Daumenkino). Die Prozentangabe besagt, wie viel Prozent der Animation bei diesem Zwischenschritt abgeschlossen sein sollen.

<div id="div2">
    bla
</div>
#div2 {
    animation: verschieben 3s infinite;
}

@keyframes verschieben {
    0% {
        translateX(0);
    }
    50% {
        translateX(100px);
    }
    100 % {
        translateX(0);
    }
}

Lektion 10: Schriftarten

Standardmäßig können auf Webseiten nur Schriftarten verwendet werden, die auf dem Gerät, das die Webseite betrachtet, installiert sind. Mit einem Trick ist es jedoch möglich, beliebige Schriftarten zu verwenden. Doch Achtung: Schriftarten sind oft urheberrechtlich geschützt! Auf Portalen wie dafont.com oder fonts.google.com kann man jedoch Schriftarten herunterladen, die in der Regel zumindest für den privaten Gebrauch kostenlos verwendet werden dürfen.

Die Schriftart-Dateien haben in der Regel Endungen wie otf, ttf oder woff. Diese legt man im selben Ordner wie das Stylesheet ab. Man definiert und verwendet dann eine eigene Schriftart wie folgt:

@font-face {
    font-family: "Cheese Market";
    src: url("Cheese Market.otf");
}

body {
    font-family: "Cheese Market";
}

Lektion 11: Javascript

Um die Seite zum Leben zu erwecken und interaktiv zu machen, können wir Javascript verwendet. Das ist Programmcode, der im Browser ausgeführt wird. Man schreibt diesen in eine separate Datei mit der Endung .js und bindet sie am Ende des Body-Teils wie folgt ein:

<body>

    <button id="fang-mich">Fang mich!</button>

    <script src="meinSkript.js"></script>
</body>

In der Javascript-Datei kann man dann z.B. bei Maus- oder Tastatureingaben des Benutzers etwas bestimmtes ausführen lassen:

document.getElementById("fang-mich").addEventListener("click", buttonNeuPositionieren)

function buttonNeuPositionieren() {

    posXNeu = Math.floor( Math.random() * 500 );
    posYNeu = Math.floor( Math.random() * 500 );

    document.getElementById("fang-mich").style.top = posYNeu + "px"
    document.getElementById("fang-mich").style.left = posXNeu + "px"

}

In diesem Beispiel wird dem Button ein sogenannter EventListener hinzugefügt, das bedeutet, dass er ab jetzt auf Events reagieren kann. In diesem Fall heißt das Event click, er reagiert also immer auf einen Mausklick. Wenn der Button angeklickt wird, wird die Methode buttonNeuPositionieren aufgerufen, die wir weiter unten definieren. Methodendefinitionen beginnen in Javascript immer mit function, dann dem Namen der Methode und dann runden Klammern. In den geschweiften Klammern steht anschließend der gesamte Code, der ausgeführt werden soll, wenn die Methode aufgerufen wird (also beim Klick). Innerhalb der Methode werden zwei zufällige neue Koordinaten bestimmt und dem Element zugewiesen. Beachte, dass man am Ende noch die Einheit px anhängen muss. Mit diesem Code entsteht ein kleines Spiel, bei dem man den Button fangen muss.