Benutzer-Werkzeuge

Webseiten-Werkzeuge


fortbildungen:webdesign-lernen:ueberblick-erste-schritte

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
fortbildungen:webdesign-lernen:ueberblick-erste-schritte [30.09.2015 (06:39)] – [HTML Markup Regeln] retemirabilefortbildungen:webdesign-lernen:ueberblick-erste-schritte [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 7: Zeile 7:
 ===== Websites machen  ===== ===== Websites machen  =====
  
-Was muss man wissen und können? – [[fortbildungen:webdesign:ueberblick|Details zu dieser Abbildung]]+Was muss man wissen und können? 
  
 {{:fortbildungen:webdesign:webpublishing.png?nolink|}}  {{:fortbildungen:webdesign:webpublishing.png?nolink|}} 
 +
 +<HTML>
 +<div class="handout"> 
 +</HTML>
 +
 +[[fortbildungen:webdesign:ueberblick|Details zu dieser Abbildung]]
 +
 +<HTML>
 +</div>
 +</HTML>
 +
  
 ===== Browser – Zentrales Werkzeug ===== ===== Browser – Zentrales Werkzeug =====
Zeile 80: Zeile 91:
 {{:fortbildungen:webdesign-lernen:ul-bsp.gif?nolink|}} {{:fortbildungen:webdesign-lernen:ul-bsp.gif?nolink|}}
  
-===== ÜbungPlaintext-Dokument auszeichnen ===== +===== Aufbau eines HTML-Dokuments (I) ===== 
-Wende nun das Gelernte an. +{{:fortbildungen:webdesign-lernen:aufbau-html-datei.png?nolink|}} 
 + 
 +===== Aufbau eines HTML-Dokuments (II) ===== 
 +Dokumententyp—DOCTYPE\\  
 +''<!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«) 
 + 
 +''<html></html>'' umfasst alles außer den ''DOCTYPE'' 
 + 
 +Kopf und Körper: ''<head></head>'' und ''<body></body>'' 
 + 
 +===== 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 =====
  
-<note> +**Typische Bildgrößen verschiedener Geräte und eines Fotos (Stand 2013)**
-  - 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>+Details[[arbeitsmethoden:digitale-abb|]]
  
-</note>+{{: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|}}
  
-Du kannst den **{{:fortbildungen:webdesign:html-spickzettel.pdf|HTML-Spickzettel}}** als Hilfe benutzen.+===== Digitale AbbildungenDateigröß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|
fortbildungen/webdesign-lernen/ueberblick-erste-schritte.1443587989.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki