Rettet die Bienen! – Expedition ins Internet
Zurück zum Dashboard
0 Fähigkeitspunkte
0 Neuro-Netz Punkte
0 Web-Creator Punkte
0 Daten-Detektiv Punkte

Kursabschnitte

Abschnitt 1
Einführung
1
1.01 Bienen sind wichtig!
2
1.02 Alle müssen es wissen!
Abschnitt 2
WWW
1
1.03 URL – Wo hängt das Plakat?
2
1.04 Bäume im Internet
3
1.05 So Surft es sich leichter
Abschnitt 3
Planung
1
1.06 Wir machen einen Plan
2
1.07 Infos sammeln
3
1.08 Inhalt ist gleich Inhalt?
4
1.09 Schlagzeilen
Abschnitt 4
Inhalte
1
1.10 Poster im Internet aufhängen
2
1.11 Fließtexte in HTML
3
1.12 Erstelle deine eigene Webseite!
4
1.13 Fülle deine Seite mit Inhalten
5
1.14 Texte hervorheben
6
1.15 Listen
7
1.16 Ein Blick auf die To-Do-Liste
8
1.17 Bilder in HTML
9
1.18 Jetzt wird’s bunt!
10
1.19 Videos in HTML
11
1.20 Webseiten untersuchen
12
1.21 Hyperlinks in HTML
13
1.22 Head und Body
Abschnitt 5
Style
1
1.23 CSS: so wird richtig gestylt!
2
1.24 CSS: Schriftarten
3
1.25 Rot, Grün, Blau,…
Abschnitt 6
Finale
1
1.26 Ein Meisterwerk

Inhalte

1.12 Erstelle deine eigene Webseite!

Es ist so weit! Jetzt wollen wir wirklich eine eigene Webseite erstellen!

Im nachfolgende Video erfährst du, was du dafür machen musst.

!! Wichtig: Schau dir das Video genau. Immer wenn ein Pop-Up-Fenster auftaucht, führe die Schritte auch selbst durch. !!

Deine eigene Webseite zu erstellen ist ganz einfach!

Lade dir die folgende Datei herunter:

Download (index.html)

Zum Bearbeiten der Datei kannst du jeden normalen Texteditor verwenden (z.B. Editor, Notepad++). Um zu sehen wie die Webseite aussieht, kannst du die Datei einfach mit einem Browser öffnen (z.B. Firefox, Chrome,…).

Alternativ kannst du auch den Online Editor “Codepen” verwenden. Dazu unten mehr Infos. Beachte aber, dass ohne Account deine Webseite bei Codepen nicht gespeichert wird!

Du kannst zum Bearbeiten deiner Webseiten-Datei (index.html) jeden beliebigen Editor verwenden. Unter Windows ist oft schon “Editor” vorinstalliert. Mehr Möglichkeiten bieten dir aber Editoren wie Notepad++, Visual Studio Code (VSC) oder Atom.

Unsere Empfehlung: Visual Studio Code

>>hier<< kannst du Visual Studio Code herunterladen.

Auf Codepen kannst du ganz einfach Code für Webseiten erstellen und testen. Wenn du auf den nachfolgenden Link klickst, wird sich der Codepen-Editor in einem neuen Tab öffnen. Du kannst ganz einfach zwischen dem Tab des Kurses und dem von Codepen hin und her wechseln.

>>Hier<< gehts zu Codepen

Beachte: Du musst einen Account bei Codepen haben, damit deine Arbeit auch länger gespeichert wird. Oder du kopierst später alles was du in Codepen geschrieben hast in eine lokale Datei auf deinem Computer.

Wichtig: Damit du eine HTML-Datei auf deinem Rechner wie im Video erstellen kannst, muss du im Windows-Explorer unter “Ansicht” einen Haken bei “Dateinamenerweiterungen” gesetzt haben (s. Bild, zum Vergrößern Klicken).
Inhalte 1.11 Fließtexte in HTML
Vollständig
Inhalte 1.13 Fülle deine Seite mit Inhalten