Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- fortbildungen:webdesign-lernen:ueberblick-erste-schritte [30.09.2015 (07:01)] – [Websites machen] retemirabile
+++ fortbildungen:webdesign-lernen:ueberblick-erste-schritte [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 91: / Zeile 91: @@
 {{:fortbildungen:webdesign-lernen:ul-bsp.gif?nolink|}}
-===== Übung: Plaintext-Dokument auszeichnen =====
+===== Aufbau eines HTML-Dokuments (I) =====
-Wende nun das Gelernte an.
+{{:fortbildungen:webdesign-lernen:aufbau-html-datei.png?nolink|}}
-<note>
+===== Aufbau eines HTML-Dokuments (II) =====
-  - Speichere die Datei ''{{:fortbildungen:webdesign:india-unformatiert.txt|}}'' lokal auf Deinem Rechner und benenne sie in ''india-formatiert.html'' um.
+Dokumententyp—DOCTYPE\\
-  - Formatiere den Inhalt der neuen HTML-Datei so, dass die Struktur und die Darstellung im Browser der Datei ''{{:fortbildungen:webdesign:india-formatiert.pdf|}}'' entsprechen.
+''<!DOCTYPE html>'' für HTML 5 — gibt dem Browser die Art des zu erwartenden Dokuments an und ermöglicht damit, dieses korrekt zu //parsen// (»durchzugehen und darzustellen«)
-  - Ö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>
+''<html></html>'' umfasst alles außer den ''DOCTYPE''
-</note>
+Kopf und Körper: ''<head></head>'' und ''<body></body>''
-Du kannst den **{{:fortbildungen:webdesign:html-spickzettel.pdf|HTML-Spickzettel}}** als Hilfe benutzen.
+===== Aufbau eines HTML-Dokuments (III) =====
+  * ''<head></head>'': Titel des Dokuments, zusätzliche Informationen (Stichwörter, Kurzbeschreibung usw.), u.a. in sog. Meta-Tags: ''<meta>''  \\ → ist für den Benutzer **nicht sichtbar**
+  * ''<body></body>'': der eigentliche Inhalt → Ist für den Benutzer **sichtbar**\\
+Unsere Arbeit mit HTML-Dokumenten wird sich fast ausschließlich zwischen den ''<body>''-Tags abspielen
+===== Bilder einfügen =====
+  * Bilder einfügen: ''<img src="/pfad/zum/bild1.jpg">''
+  * ''img'' hat immer das Attribut ''src'': Angabe, wo das Bild gespeichert ist (''src'' von //source// = Quelle)
+  * Das ''img''-Element besteht nur aus einem einzelnen Tag, kein Schlusstag
+  * Das Attribut ''alt'' sollte immer vorhanden sein: Kurze Beschreibung des Bildinhalts
+  * ''<img src="/pfad/bild.jpg" alt="Urlaub 2004, Strand">''
+===== Pfade I =====
+  * Pfade geben an, wo ein bestimmtes Material (eine Datei oder ein Bild etc.) in der Ordnerstruktur des Servers gespeichert ist.
+  * Das oberste Verzeichnis, die Dateien der Website liegen, heißt ''root'' (engl.: Wurzel).
+===== Pfade II =====
+Zwei grundsätzliche Möglichkeiten für die Gestaltung von Pfaden
+  * **Absolute Pfade:** Immer vom root-Verzeichnis aus, z.B. \\ ''<a href="<wrap em>/</wrap>material/biologie/"></a>'' \\ Der erste Schrägstrich steht für das root-Verzeichnis. Alle absoluten Pfade beginnen damit. \\ \\
+  * **Relative Pfade:** Von der jeweils vorliegenden Datei aus, z.B. \\ ''<a href="biologie/index.html"></a>'' oder\\ ''<a href="<wrap em>..</wrap>/englisch/index.html"></a>''\\ Die beiden Punkte bedeuten: „gehe eine Ordnerebene höher“.
+===== Absolute Pfade =====
+{{:fortbildungen:webdesign-lernen:pfade-absolut.gif?nolink|}}
+===== Relative Pfade =====
+{{:fortbildungen:webdesign-lernen:pfade-relativ.gif?nolink|}}
+===== Absolute ⟷ Relative Pfade =====
+  * **Absolute Pfade**
+    * ➕ sind überschaubarer
+    * ➕ erzeugen saubere URLs (Webadressen)
+    * ➕ lassen sich einheitlicher verwenden
+    * ➖ brauchen für das lokale Arbeiten eine Serversoftware
+  * **Relative Pfade**
+    * ➕ lassen sich ohne Serversoftware lokal testen
+    * ➖ sind schwieriger in Handhabung und v.a. Pflege (Veränderungen in der Sitestruktur)
+    * ➖ sehen für jede Datei anders aus
+===== Pfade auch ins Netz =====
+  * Prinzip der Ordner auch bei Pfaden ins Netz: ''%%http://www.herr-kalt.de/fotos/%%'' verweist auf den Unterordner ''fotos'', der auf dem Rechner dieser Website liegt
+  * In moderner Website-Software oft keine echten Ordner mehr, sondern „simulierte Ordner“ (virtuelle Ordner).
+===== Webseite oder Website? =====
+Eine Website besteht aus Webseiten.
+{{:fortbildungen:webdesign-lernen:webseiten-website.gif?nolink|}}
+===== Website =====
+  * Eine Web<wrap em>seite</wrap> ist ein einzelnes HTML-Dokument
+  * Eine Web<wrap em>site</wrap> ist eine Sammlung von Webseiten, die inhaltlich und optisch zusammengehören
+  * Die einzelnen Seiten haben gestalterische Elemente, die sich wiederholen, z.B. Kopfbereich //(Header)//, Fußbereich //(Footer)//, Navigation, Inhalt
+===== Digitale Abbildungen: Grafikformate =====
+  * Vektorgrafiken: Bilddarstellung durch mathematische Beschreibung der Formen und
+  * Rastergrafiken: Bilddarstellung durch Bildpunkte (Pixel)
+    * ''.gif'': 256 Farben, eine davon transparent möglich, verlustfreie Komprimierung → für einfache Grafiken
+    * ''.jpg'': über 16 Mio. Farben, keine Transparenz, Komprimierung einstellbar, je höher, desto mehr Qualitätsverluste → meist für Fotos
+    * ''.png'': Mio. Farben, verlustfreie Komprimierung, Transparenz möglich → für Grafiken/Fotos, im Einzelfall Dateigröße vergleichen
+===== Digitale Abbildungen: Rastergrafiken =====
+**Darstellungsprinzip**
+{{:arbeitsmethoden:290px-aufloesung_erklaert.svg.png?nolink|}} {{:arbeitsmethoden:foto-bildgroesse-feine-aufloesung.jpg?nolink|}}
+===== Digitale Abbildungen: Bildgrößen =====
+**Typische Bildgrößen verschiedener Geräte und eines Fotos (Stand 2013)**
+Details: [[arbeitsmethoden:digitale-abb|]]
+{{:arbeitsmethoden:notebook-bildgroesse.jpg?nolink&300|}} {{:arbeitsmethoden:iphone-bildgroesse.jpg?nolink&200|}} {{:arbeitsmethoden:nexus-one-bildgroesse.jpg?nolink&200|}} {{:arbeitsmethoden:bildgroesse-digifoto.jpg?nolink&300|}}
+===== Digitale Abbildungen: Dateigröße =====
+|{{:arbeitsmethoden:foto-bildgroesse-grobe-aufloesung.jpg?nolink&200|}} {{:arbeitsmethoden:gaensebluemchen-pixel-grob.png?nolink&200|}}|{{:arbeitsmethoden:foto-bildgroesse-feine-aufloesung.jpg?nolink&200|}} {{:arbeitsmethoden:gaensebluemchen-pixel-fein.png?nolink&200|}}|
+|6 x 6 = 36 Pixel|12 x 12 = 244 Pixel|