Übung 2

Übung 2#

Hinweis

Ziel der Übung

  • Die ersten Schritte zum WebMapping

  • HTML, CSS, JavaScript & Visual Studio Code kennenlernen

Code

Code#

Bemerkung

Für diese Übung nutzen wir folgende Tools

HTML, CSS & JavaScript#

Für den Erstkontakt zu HTML, CSS & JavaScript nutzen wir die Seite der w3school. Für die Erstellung von Internetseiten brauchen Sie keine spezielle Software. Später werdem wir Visual Studio Code als Integrierte Entwicklungsumgebung (IDE) nutzen.

  • Das HTML Grundgerüst

    • Öffne den Link zu HTML Intro

    • Verändere den My First Heading und den My first paragraph und

    • klicke auf Run

Hinweis

Mit einer HTML Datei lassen Webseite aufbauen. Homepages haben oft eine index.html, auf der die Webseite basiert.

  • Das Sytling einer HTML Seite

    • Öffne den Link zu HTML CSS

    • Verändere die Farbe von color: blue; zu color: green und

    • die Schriftart von font-family: verdana; zu font-family: arial

    • klicke auf Run

Hinweis

Tipp: Mit einem Style Sheet (.css) kannst du das Aussehen deiner ganzen Webseite bearbeiten. Alles in nur einer Datei!

  • Die Interaktion mit einer HTML Seite

    • Öffne den Link zu HTML JavaScript

    • Verändere den Click Me! und klicke auf Run

    • Passe den Coode wie folgt an und lasse es erneut runnen

// Code
<script>
   function myFunction() {
   document.getElementById("demo").innerHTML = "Hello JavaScript!";
   }
</script>

// Neuer Code
<script>
   function myFunction() {
   document.getElementById("demo").innerHTML = "Download Bebauungsplan!";
   }
</script>

Hinweis

Mit einer JavaScript Datei lassen sich Funktionen einbauen, die eine Webseite oder Webmap interaktiv werden lässt.

Du hast die Basics HTML, CSS & JavaScript kennengelernt!

  • HTMl = Grundgerüst

  • CSS = Sytling

  • JavaScript = Interaktionen

Karte von Osnabrück

How HTML, CSS, JavaScript work; Quelle: Jaye H @ Scrimba#