02 | Freitag, 28.10.2022

Architekturen des Webs

In der heutigen Sitzung nähern wir uns praktisch der Funktionsweise des Internets an. Aber so einfach, wie ich das hier hinschreibe, ist es nicht. “Das Internet” ist wie eine Megacity mit unterschiedlichen Stadtteilen, Verkehrsmitteln, Gepflogenheiten, Geschmäckern und Architekturen. Denken Sie bspw. an Hamburg, wo es den historisch gewachsenen Stadtkern gibt und die Hafencity, die in wenigen Jahren entstanden ist.

Und unpräzise ist “das Internet” außerdem, denn der Teil, der uns in dieser Veranstaltung interessiert, ist das World Wide Web (WWW). In den Projekten, an denen Sie arbeiten werden, werden die Client-/Serverstrukturen des WWW immer wieder auftauchen und Gegenstand unserer Auseinandersetzung mit verschiedenen Konzepten sein.

Wir beginnen mit der Entwicklung einer ersten Website auf Basis von HTML und CSS.

Ziele

  • Sie installieren eine Entwicklungsumgebung auf Ihrem Rechner und nehmen sie in Betrieb.
  • Sie erstellen erste HTML- und CSS-Dateien und zeigen diese im Browser an.
  • Sie untersuchen das Markup ihrer eigenen Website und das fremder Websites im Browser und erlangen erste Kenntnisse über die Funktion von Browser, HTTP und HTML.

Installation von VSCodium

Wir verwenden in der Veranstaltung die freie Entwicklungsumgebung VSCodium.

  1. Installieren Sie VSCodium auf Ihrem Rechner.
  2. Starten Sie die Software und erstellen Sie Ordner und Dateien für ein erstes Webseitenprojekt.
Aktivieren Sie in VSCodium die Funktion Auto Save, damit Sie sich nicht mehr um das regelmäßige Speichern Ihrer Dateien kümmern müssen:
Im Menü File > Auto Save einen Haken setzen.

Auftrag: Webseitenentwicklung mit HTML und CSS

Eine (erste) Website (GTW)

In der Veranstaltung haben wir ausprobiert, wie in VSCodium neue Dateien angelegt werden können. Nun geht es darum, ein erstes Webseitenkonstrukt mit mehren Dateien in Angriff zu nehmen.

  1. Erstellen Sie auf Ihrem Rechner einen neuen Ordner.
  2. Öffnen Sie den Ordner mit VSCodium.
  3. Legen Sie eine Datei mit Namen index.html an.
  4. Legen Sie eine Datei mit Namen style.css an.
  5. Versuchen Sie sich an der Einheit Einführung in HTML und CSS.

Inhaltliche Überlegungen

Überlegen Sie vor dem Hintergrund Ihrer formulierten Interessen, wie Sie mit einer Website Geräte steuern, (Mess)daten anzeigen und allgemein informieren können. Formen Sie Ihr neues Webseitenkontrukt entsprechend, wobei Sie sich an dem Mockup aus der HTML/CSS-Einheit orientieren.

Eine (erste) Website (ALT)

In der Veranstaltung haben wir ausprobiert, wie in VSCodium neue Dateien angelegt werden können. Nun geht es darum, ein erstes Webseitenkonstrukt mit mehren Dateien in Angriff zu nehmen und die Grundlagen von HTML zu lernen.

  1. Erstellen Sie in Ihrem Ordner Informatik einen neuen Ordner 02-2022-10-28.
  2. Öffnen Sie VSCodium/Microsoft Visual Studio Code.
  3. Öffnen Sie den Ordner Informatik in Visual Studio Code.
  4. Legen Sie im Ordner 02-2022-10-28 nacheinander zwei neue Dateien an: index.html und impressum.html.
  5. Kopieren Sie von der Seite “Erste Schritte” aus dem selfhtml-Wiki das HTML-Grundgerüst in die index.html.
  6. Ändern Sie den Inhalt des <p>-Tags. Wenn Sie Auto Save aktiviert haben (s.o.), müssen Sie sich ums Speichern nicht mehr kümmern.
  7. Schalten Sie in Ihren Dateimanager um.
  8. Doppelklicken Sie die index.html im Ordner 02-2022-10-28, sodass sie im Browser geöffnet wird.
  9. Kopieren Sie nun auch das HTML-Grundgerüst in die Datei impressum.html. Ändern Sie auch hier den Inhalt und öffnen Sie die Datei im Browser.

  1. Schauen Sie das Video HTML Tutorial Deutsch für Anfänger (YouTube), um sich mit verschiedenen HTML-Elementen vertraut zu machen.
  2. Probieren Sie Ihre neuen Kenntnisse in beiden Dateien index.html und impressum.html aus. Ihr Arbeitsbereich ist jeweils der Abschnitt zwischen dem Start- und Endtag von <body>.
  3. Sehen Sie sich Ihre Fortschritte regelmäßig im Browser an.
  4. Verlinken Sie index.html und impressum.html miteinander! Nützliche Informationen dazu finden Sie in diesem Video auf YouTube.

Studienleistungen organisieren (GTW/ALT)

  1. Richten Sie GitLab mithilfe der Anleitung in diesem Skript für die regelmäßige Abgabe Ihrer Studienleistungen ein.

Abgabe

Erledigen Sie den Auftrag bis zum Donnerstag, 03.11.2022 und laden Sie die Dateien in GitLab hoch (einzeln, nicht gezippt!). Legen Sie dafür in Ihrem Projekt Studienleistungen einen neuen Ordner 02-2022-10-28-HTML-Seite an.

Wenn Sie Fragen und Frust zur Arbeit mit GitLab haben, melden Sie sich im Kanal Arbeitsaufträge bei Ihren Tutor*innen.

Zurück
Weiter

Zuletzt aktualisiert am 15. Apr. 2023

Quelltext ansehen Seite verbessern