Ctrl+K

Website

Website#

Auch wenn die Entwicklung von Webseiten über den Kurs hinaus geht, wollen wir uns doch anschauen, wie man einfach Webseiten erstellt und verstehen, welche Überlegungen und Technologien dabei zur Anwendung kommen.

Wir befassen uns unter anderem mit diesen Fragen:

  • Was ist eine Website?

  • Wie erstellt man eine Website?

  • Wie ist die Website für den Kurs aufgebaut?

Werkzeuge 🔧🔨#

Webseiten können - wie andere Programme auch - theoretisch in jedem beliebigen Texteditor geschrieben werden. Es ist aber sehr hilfreich, speziell dafür entwickelte Texteditoren zu verwenden.

Es gibt eine Vielzahl von Systemen um die Entwicklung zu erleichtern, ein weit verbreitetes Werkzeug ist Visual Studio Code (VSCode) oder VS Codium (direct download).

VSCode gibt es auch online.

Außerdem enthalten viele Browser auch spezielle Werkzeuge für die Webentwicklung. Hier eine Auswahl:

Tutorials:#

Markdown als Vorstufe zu HTML#

Exercise 44 (Markdown kennen lernen (15 Minuten))

Was ist Markdown?

Wirf zuerst einen Blick auf die Wikipedia Seite.

Hat dir das geholfen?

Oft ist es gut, Dinge einfach auszuprobieren.

Schau‘ dir folgende Seiten an:

Diese Aufgabe bearbeitet jede für sich.

Um in VS Code ein Markdown Dokument zu erstellen und zu bearbeiten mache folgendes:

  • Erstelle eine neue Datei (oder öffne eine existierende)

  • Speichere die Datei als Markdown Datei mit der Dateiendung .md ab

  • Editiere die Datei wie eine gewöhnlich Textdatei, verwende dabei Markdown-Syntax wie beispielsweise # für Überschriften oder * für Aufzählungen

  • Betrachte die Vorschau für das Dokument in dem du Strg+Shift+P drückst und dann im Dialog Markdown: Open Preview to the Side auswählst

Den Inhalt einer Markdown Datei können wir eins zu eins als Inhalt für unsere Homepage verwenden! 🤸

Es ist auch möglich, eine Markdown Datei mit Hilfe eines Programms direkt als HTML zu exportieren. Dazu Strg+Shift+P und Markdown All in One: Print current document to HTML, wobei wir die Erweiterung (das Programm) Markdown All in One verwenden.

Kursseite aktualisieren#

Die Inhalte der Kursseite werden mit Markdown erstellt. Die einzelnen Bestandteile und die Übersetzung in Markdown verwaltet ein eigenes Programm. Es heißt Sphinx und ist in der Programmiersprache Python geschrieben. Die Daten der Website liegen auf einem Server und jedes Mal, wenn wir den Inhalt ändern, wird die Seite neu zusammen gebaut und aktualisiert.

Da wir Markdown verwenden, ist es ein Leichtes, Inhalte der Website zu ändern - man muss gar nicht wissen, wie die Website im Detail funktioniert.

Exercise 45 (User Account für GitHub.com)

Nicht jede Person kann die Inhalte der Website ändern. Dazu braucht es bestimmte Berechtigungen.

Gehe auf und lege dort einen User Account an.

Du bekommst dann Zugriff auf unsere Kursseite.

Wenn das geklappt hat, hast du ein Mail von GitHub bekommen.

Die Kursseite kann man sich als Ordner mit vielen Dateien vorstellen. Für jede Seite auf unserer Website gibt es auch eine Datei in diesem Ordner.

Wenn du [ec-mentors/it-ist-das-was-fuer-mich] öffnest, kannst du einen Blick hinter die Kulissen werfen.

Exercise 46 (Update der persönlichen Kursseite)

Sobald du Zugriff auf die Website hast, kannst du Änderungen an den Dateien vornehmen.

Jede von euch hat eine Datei in diesem Ordner: ec-mentors/IT-ist-das-was-fuer-mich, das ist eure persönliche Seite im Rahmen unseres Kurses. Genau dort, wollen wir ein paar Updates machen.

Nutze deinen Eintrag auf der Kursseite um dich kurz vorzustellen:

  • Wie heißt du?

  • Was machst du gerne?

  • Wofür interessierst du dich?

Damit wir nicht durcheinander kommen, mache bitte keine Änderungen in anderen Dateien, nur in eurer eigenen.

Es gibt sehr viele Möglichkeiten Webseiten und erstellen und zu verwalten. Es gibt Baukastensysteme, mit denen man ganz ohne Programmierkenntnisse Webseiten bauen kann. Unsere Kursseite ist nur eine Möglichkeit und wir wollen euch die Gelegenheit geben, hier einen Blick hinein zu werfen.

Exercise 47 (Persönliche Kursseite als Mini-Lebenslauf)

Wir werden die Kursseite nutzen, um einen stichwortartigen Lebenslauf von euch anzulegen.

Gehe auf ec-mentors/IT-ist-das-was-fuer-mich und schau dir die Vorlage an. Passe dann deinen persönlichen Eintrag an, in dem du dem Vorschlag entsprechend Änderungen an deiner Seite vornimmst.

Du kannst die Inhalte auch gerne anders strukturieren und gestalten. Wichtig ist nur, dass genannten Informationen in übersichtlicher Art und Weise zu finden sind.

Wenn du Hilft brauchst, wende dich an eine Kollegin.

Damit wir nicht durcheinander kommen, mache bitte keine Änderungen in anderen Dateien, nur in eurer eigenen.

Minimales Beispiel für HTML und CSS#

Es ist oft gut, möglichst klein zu beginnen.

Zwei sehr minimal gehaltene Beispiele für eine HTML und eine CSS Datei findest du hier.

  • mini_index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="mini_style.css">
    <script src="script.js"></script>
</head>

<body>
    <h1>Header Text in h1 Tags</h1>
    <!-- page content -->
</body>

</html>

  • mini_style.css

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

Exercise 48 (Minimale Webseite erstellen)

Speichere die oben gezeigten Texte jeweils als eigene Datei in einem gemeinsamen Ordner und öffne die HTML-Datei in einem Browser.

Was siehst du?

Fragen:

  • Wie hängen die Dateien zusammen?

  • Wieso ist es wichtig, dass sie im gleichen Ordner liegen?

  • Welche Fragen hast du jetzt?

Inhalt