herr-kalt.de

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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. **[[fortbildungen:webdesign-lernen:websites-erstellen|]]**

===== 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: [[http://download.herr-kalt.de/webdesign/|Erste Schritte ins Webdesign]]
===== Übung: Plaintext-Dokument auszeichnen =====
Wende nun das Gelernte an. 

<note>
**AUFGABE**

  - Speichere die Datei ''{{:fortbildungen:webdesign:india-unformatiert.txt|}}'' lokal auf Deinem Rechner und benenne sie in ''india-formatiert.html'' um. 
  - Formatiere den Inhalt der neuen HTML-Datei so, dass die Struktur und die Darstellung im Browser der Datei ''{{:fortbildungen:webdesign:india-formatiert.pdf|}}'' entsprechen. 
  - Ö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 <key>F5</key> (Windows) oder <key>⌘</key> <key>R</key> (Mac).

<hidden onHidden="Lösungsdatei anzeigen" onVisible="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|}}''</hidden>
</note>

Du kannst den **{{:fortbildungen:webdesign:html-spickzettel.pdf|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: 

  * **[[http://www.htmldog.com/guides/html/|HTML-Dog HTML Tutorials]]** (sehr gut gemachte Schritt-für-Schritt Einführung in HTML, berücksichtigt HTML 5 und weist jeweils auf Unterschiede zu bisherigen HTML-Versionen hin)
  * [[http://www.w3schools.com/html/default.asp|W3schools HTML Tutorial]] und [[http://www.w3schools.com/html/html5_intro.asp|HTML5 Introduction]], evtl. auch [[http://reference.sitepoint.com/html/elements|Sitepoint HTML Elements]] (ähnlich wie das o.g. Tutorial)
  * [[http://reference.sitepoint.com/html/html-concepts|Sitepoint HTML Concepts]] 

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 ====

  * [[http://www.loremipsum.de/|Blindtext-Generator]]

==== 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. 

<note>
**AUFGABE**

  - Erarbeite Dir die [[arbeitsmethoden:creative-commons|Grundlagen von Creative Commons]]. 
  - Lies Dich in die Grundlagen digitaler Abbildungen ein: [[arbeitsmethoden:digitale-abb|]].
  - [Optional]: Außerdem kannst Du schon mal [[http://www.htmldog.com/guides/css/|in die Cascading Stylesheets reinschnuppern]]. 
</note>


<fs x-large>[[fortbildungen:webdesign:2013-07-18|Weiter zu Tag 2 »]]</fs>