Deine erste Webseite veröffentlichen

Ziel der Übung

Auf der CoderDojo Linz Webseite findest du viele Beispiele, die dir zeigen, wie du deine erste Webseite baust. So richtig Spaß macht das aber erst, wenn man das Ergebnis auch tatsächlich ins Internet stellen kann, oder? Genau das machen wir in dieser Übung.

Microsoft DreamSpark und Azure

Für eine Webseite im Internet braucht man einen Server. Einen Server selbst zu betreiben ist aufwendig und teuer. Aus diesem Grund verwendet man heute häufig sogenanntes Cloud Computing. Man sagt, man lässt seine Programme “in der Cloud laufen”.

Die Cloud sind in Wirklichkeit riesige Rechenzentren mit teilweise hundertausenden an Servern. Microsoft ist einer der größten Anbieter von Cloud Computing der Welt. Weitere Großfirmen in diesem Bereich sind zum Beispiel Amazon und Google.

Microsoft bietet mit unter dem Namen DreamSpark für Schüler und Studenten kostenlose Software an. Außerdem bekommt ihr durch DreamSpark auch kostenlosen Zugang zur Cloud von Microsoft namens Microsoft Azure.

In dieser Übung machen wir folgende Schritte:

  • Anmeldung zu DreamSpark, damit ihr Zugang zu den kostenlosen Angeboten von Microsoft bekommt.
  • Anlegen eures eigenen, kostenlosen Azure-Kontos.
  • Veröffentlichung eurer ersten Webseite im Internet mit Hilfe der Azure Cloud.

Systemvoraussetzungen

Du kannst das Beispiel unter Windows, Linux oder MacOS bauen. Alles was du brauchst ist ein Web-Browser.

Registrieren bei DreamSpark

Als erstes registrierst du dich bei DreamSpark.

  1. Öffne die Webseite https://www.dreamspark.com.

  2. Gehe in den Bereich für Schüler und Studenten
    Link zu Schüler und Studenten

  3. Wähle den Menüpunkt Konto erstellen
    Konto erstellen

  4. Hast du schon ein Microsoft-Konto?
    • Ja? Dann melde dich jetzt bitte an.
    • Nicht sicher? Probiere den Link Können Sie nicht auf Ihr Konto zugreifen?
    • Nein? Wähle Jetzt registrieren wie im Bild gezeigt
      Für Microsoft-Konto registrieren
  5. Fülle das Formular aus. Überlege dir gut, welchen Namen du als Benutzername verwendest. Durch das Microsoft-Konto bekommst du auch automatisch eine Emailadresse, die du verwenden kannst, aber nicht musst. Falls du nicht sicher bist, was du als Benutzername eingeben sollst, frage einen CoderDojo Mentor um Hilfe.

    Wichtig: Merke dir unbedingt Benutzername und Passwort. Du wirst beide Angaben später immer wieder brauchen!

    Registrierungsformular Microsoft-Konto

  6. Als nächstes folgt die Registrierung zu DreamSpark. Fülle das Formular aus. Die Daten wurden teilweise aus deinen Angaben am vorherigen Formular übernommen.
    Registrierungsformular DreamSpark

  7. Du musst jetzt nachweisen, dass du Schüler bist. Wähle dazu Ich habe einen DreamSpark-Verifizierungscode
    Verifizierung mit Code

  8. Gib den Code ein, den du von deinem CoderDojo Mentor bekommst. Wenn du diese Übung machen möchtest aber kein Mentor in der Nähe ist, nimm mit uns Kontakt auf.
    Code eingeben

  9. Gratuliere, du bist jetzt Mitglied bei DreamSpark und hast Zugang zu allen damit verbundenen, kostenlosen Vorteilen.
    Anmeldung zu DreamSpark war erfolgreich

Anmelden zu Microsoft Azure

Jetzt, wo du DreamSpark-Mitglied bist, kannst du dein kostenloses Cloud-Computing-Konto bei Microsoft Azure anlegen.

  1. Navigiere auf der DreamSpark Webseite zu Softwarekatalog. Hier findest du die gesamte, kostenlose Software, die du als DreamSpark-Mitglied verwenden darfst.
    DreamSpark Softwarekatalog

  2. Im Bereich Server und Anwendungen klicke auf Microsoft Azure für DreamSpark
    Azure für DreamSpark

  3. Klicke auf Jetzt registrieren
    Registrierung zu Azure starten

  4. Fülle das Registrierformular aus. Du brauchst dafür keine Kreditkarte (die wäre ohne DreamSpark notwendig). Du brauchst aber eine Mobiltelefonnummer. Falls du kein Mobiltelefon hast, bitte deine Eltern um Mithilfe.
    Registrierformular für Azure

  5. Schicke das Registrierformular mit Registrieren ab.
    Registrierformular abschicken

  6. Jetzt musst du ein paar Minuten Geduld haben …
    Azure-Konto wird angelegt

  7. Geschafft! Du hast jetzt dein eigenes Cloud-Computing-Konto in Microsoft Azure
    Azure-Anmeldung war erfolgreich

Erste Webseite in Azure veröffentlichen

Jetzt können wir eine erste Webseite in Azure veröffentlichen.

  1. Öffne das Azure-Portal
    Azure-Portal

  2. Lege eine neue Web App an wie im folgenden Bild gezeigt (achte auf die rot umrandeten Menüpunkte)
    Neue Azure Web App anlegen

  3. Fülle die Formulare aus wie im folgenden Bild gezeigt. Achtung: Wähle deine eigene Bezeichnung im Feld Web-App. Unter diesem Namen wird deine Webseite im Internet erreichbar sein. Falls du unsicher bist, was du auswählen sollst, frag einen CoderDojo Mentor um Hilfe.
    Web App konfigurieren

  4. Nachdem du auf Erstellen geklickt hast, brauchst du wieder ein paar Minuten Geduld. Falls beim Erstellen ein Fehler auftritt, keine Panik. Es kann sein, dass du nach der Neuregistrierung zu Azure noch ein paar Minuten warten must. Probiere es einfach in ein paar Minuten nochmals.
    Web App wird angelegt

  5. Sobald die Web App angelegt ist, öffnet sich die Konfigurationsseite. Sie enthält eine große Anzahl an Einstellungsmöglichkeiten. Keine Angst, die brauchen wir noch nicht. Falls du aber neugierig bist, frag deinen CoderDojo-Mentor, was die Dinge alle bedeuten.
    Web App ist angelegt

  6. Azure Web Apps haben einen Editor für HTML, JavaScript, CSS etc. eingebaut. Du musst ihn nicht installieren, er läuft im Web-Browser. Du musst ihn nur aktivieren. Dazu klickst du auf den Menüpunkt Tools und anschließend auf Erweiterungen.
    Web App Erweiterung hinzufügen

  7. Klicke auf Hinzufügen
    Web App Erweiterung hinzufügen

  8. Wähle die Erweiterung Visual Studio Online
    Visual Studio Online auswählen

  9. Nachdem du die Erweiterung installiert hast, siehst du Visual Studio Online in der Liste der Erweiterungen. Klicke auf Durchsuchen, um den Editor zu starten.
    Visual Studio Online Erweiterung

  10. Falls du die anderen Übungen schon gemacht hast, kennst du vielleicht den Editor Visual Studio Code schon. Der Editor von Visual Studio Online funktioniert fast genau gleich. Wir legen eine neue Datei namens index.html an:
    Neue Datei anlegen

  11. Gib den gewünschten HTML-Code ein. Wenn du nicht so viel tippen möchtest, verwende einfach den Beispielcode aus unserem Beispiel Meine erste Webseite.

    Tipp: Visual Studio Online speichert automatisch alle paar Sekunden. Du braust nicht manuell auf Speichern klicken.

    HTML Code eingeben

  12. Wenn du möchtest, kannst du durch Drag and Drop auch Dateien wie Bilder, Lieder, Code-Dateien etc. in deine Webseite kopieren
    Drag and Drop in Web Apps

  13. Geschafft! Unter der von dir gewählten Adresse ist jetzt deine eigene Webseite im Internet erreichbar.
    Webseite ist online

Weitere Übungen

  1. Kennst du dich mit HTML schon aus? Falls nicht, schau dir die Übung Meine erste Webseite an.

  2. Möchtest du deine Webseite hübscher machen? In der Übung Erste Schritte mit CSS lernst du, wie das geht.

  3. Bist du schon sehr erfahren was HTML, JavaScript, Node.js etc. betrifft? Dann schau dir die Übung Erstellen und Bereitstellen einer Node.js-Web-App in Azure App Service an. Das ist ein Lernprogramm, das auch Programmier-Profis verwenden, um erste Schritte mit Azure Web Apps zu erlernen.