Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

Organisatorische Infos zum Unterricht

GFS

Arbeitsmethoden

NwT

Geographie

Englisch

Medienunterricht


Unterrichtsbegleitende Wikis


Fortbildungen

Für alle Online-Aufgaben interessant:
Tipps für das Lesen am Bildschirm


Fehler gefunden? Sag mir Bescheid!

Impressum

Datenschutzerklärung

Lizenz

Alle Inhalte dieser Website – sofern sie nicht von externen Quellen eingebunden werden oder anderweitig gekennzeichnet sind – stehen unter der Creative Commons Lizenz BY-SA.

Creative Commons Lizenzvertrag

(Was ist Creative Commons?)

Open Educational Resources (OER)

Die hier verfügbaren Materialien sind Open Educational Resources (Freie Bildungsmedien).


Logo von Jonathas Mello, CC BY

fortbildungen:webdesign:2013-07-17

Tag 1: Mi. 17.07.2013

Vorstellung und Erwartungen

Input: Überblick

Zunächst solltest Du Dir einen Überblick verschaffen, welche Arbeitsbereiche beim Veröffentlichen von Inhalten im Web (web publishing) wichtig sind. ueberblick

Input: Grundlagen HTML

Nun kannst Du die Grundlagen von HTML (und später CSS) lernen. Hierzu habe ich als roten Faden eine Präsentation erstellt: Erste Schritte ins Webdesign

Übung: Plaintext-Dokument auszeichnen

Wende nun das Gelernte an.

AUFGABE
  1. Speichere die Datei {{:fortbildungen:webdesign:india-unformatiert.txt|}} lokal auf Deinem Rechner und benenne sie in india-formatiert.html um.
  2. Formatiere den Inhalt der neuen HTML-Datei so, dass die Struktur und die Darstellung im Browser der Datei {{:fortbildungen:webdesign:india-formatiert.pdf|}} entsprechen.
  3. Öffne die Datei lokal im Browser, um das Ergebnis beständig zu überprüfen. Wenn Du Änderungen durchführst, muss Du die Darstellung im Browser jeweils neu laden (z.B. durch Drücken von F5 (Windows) oder R (Mac).

Lösungsdatei anzeigen

Lösungsdatei verbergen

Hier kannst Du die korrekt formatierte HTML-Datei herunterladen, um Deine eigene Version zu prüfen. Entferne nach dem Download die Dateieindung .txt. {{:fortbildungen:webdesign:india-formatiert.html.txt|}}

Du kannst den HTML-Spickzettel als Hilfe benutzen.

Übung: Weitere Elemente

Erarbeite Dir weitere HTML-Elemente und vertiefe Dein Grundlagenwissen. Lies Dich dazu in das folgende Material ein:

Wende das neue Wissen an indem Du ein HTML-Dokument erstellst, das verschiedene HTML-Elemente (Text, Überschriften, Bilder, Videos etc.) enthält. Verwende hierfür z.B. Material aus der Wikipedia als Materialpool.

Tools

Vorschau: Cascading Stylesheets (CSS)

Wenn Du eine HTML-Datei entsprechend den Vorgaben erstellt hast, kannst Du Dir mit der folgenden CSS-Datei schon einmal einen Eindruck machen, wie das Ganze später aussehen könnte.

{{:fortbildungen:webdesign:webdesign.css|}}

Füge folgendes Markup zwischen <head> und </head> ein.

  <link rel="stylesheet" type="text/css" href="webdesign.css" media="screen,projection" />

Input/Erarbeitung: Creative Commons und digitale Abbildungen

Ein erster Aspekt der Beschäftigung mit dem Urheberrecht ist das Wissen um Lizenzen. Hierbei sind Creative Commons-Lizenzen besonders vielversprechend.

Außerdem solltest Du verstehen, wie digitale Abbildungen funktionieren.

AUFGABE
  1. Erarbeite Dir die Grundlagen von Creative Commons.
  2. Lies Dich in die Grundlagen digitaler Abbildungen ein: Digitale Abbildungen verstehen und ihre Größe bearbeiten.
  3. [Optional]: Außerdem kannst Du schon mal in die Cascading Stylesheets reinschnuppern.

Weiter zu Tag 2 »

fortbildungen/webdesign/2013-07-17.txt · Zuletzt geändert: 06.08.2020 (11:28) (Externe Bearbeitung)