Benutzer-Werkzeuge

Webseiten-Werkzeuge


fortbildungen:webdesign:2013-07-17

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung
Vorhergehende Überarbeitung
fortbildungen:webdesign:2013-07-17 [17.07.2013 (06:36)] – angelegt kaltfortbildungen:webdesign:2013-07-17 [01.09.2025 (10:04)] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 5: Zeile 5:
  
 ===== Input: Überblick ===== ===== 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:ueberblick|]]**+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 ===== ===== Input: Grundlagen HTML =====
-Nun kannst Du die Grundlagen von HTML (und später CSS) lernen.  +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 ===== ===== Übung: Plaintext-Dokument auszeichnen =====
-Wende nun das Gelernte an+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 ===== ===== Übung: Weitere Elemente =====
 Erarbeite Dir weitere HTML-Elemente und vertiefe Dein Grundlagenwissen. Lies Dich dazu in das folgende Material ein:  Erarbeite Dir weitere HTML-Elemente und vertiefe Dein Grundlagenwissen. Lies Dich dazu in das folgende Material ein: 
Zeile 22: Zeile 32:
 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.  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. 
  
-===== Input/Erarbeitung: Creative Commons =====+==== 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> 
fortbildungen/webdesign/2013-07-17.1374035803.txt.gz · Zuletzt geändert: (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki