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 [29.09.2015 (22:58)] – [Wichtige HTML-Elemente (Teil 2)] 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 16: Zeile 27:
 |  Firefox  |  Chrome  |  Safari  |  Internet Explorer  | |  Firefox  |  Chrome  |  Safari  |  Internet Explorer  |
  
 +<HTML>
 +<div class="handout"> 
 +Der Browser ist das zentrale Werkzeug zum Testen der selbst gemachten Website. Daher braucht man aktuelle Versionen aller gängigen Browser auf dem eigenen Rechner. Auch wichtige ältere Versionen, die bei Internetnutzern noch weit verbreitet sind, muss man evtl. installiert haben. 
 +</div>
 +</HTML>
 ===== HTML – Die Web-Sprache ===== ===== HTML – Die Web-Sprache =====
  
Zeile 37: Zeile 53:
  
 ===== HTML Markup Regeln ===== ===== HTML Markup Regeln =====
-  * HTML benutzt so genannten Elementen, um Text eine Funktion zu geben z.B. ''<h1></h1>'' für eine Überschrift 1. Ordnung+  * HTML benutzt so genannten Elemente, um Text eine Funktion zu geben z.B. ''<h1></h1>'' für eine Überschrift 1. Ordnung
   * Ein Element besteht aus zwei Teilen: **Anfangstag und Schlusstag** ''<p>   </p>'' — das Schlusstag enthält einen Schrägstrich vor dem Tagelement   * Ein Element besteht aus zwei Teilen: **Anfangstag und Schlusstag** ''<p>   </p>'' — das Schlusstag enthält einen Schrägstrich vor dem Tagelement
   * Tags können auch **verschachtelt** sein, z.B. {{:fortbildungen:webdesign-lernen:nested-tags.gif?nolink|}}   * Tags können auch **verschachtelt** sein, z.B. {{:fortbildungen:webdesign-lernen:nested-tags.gif?nolink|}}
Zeile 66: Zeile 82:
  
   * Listen: „ungeordnet“ ''<ul></ul>'' und nummeriert ''<ol></ol>''   * Listen: „ungeordnet“ ''<ul></ul>'' und nummeriert ''<ol></ol>''
-  * <ul> und <ol> umfassen alle <li>+  * ''<ul>'' und ''<ol>'' umfassen alle ''<li>''
  
     <ul>     <ul>
Zeile 74: Zeile 90:
  
 {{:fortbildungen:webdesign-lernen:ul-bsp.gif?nolink|}} {{:fortbildungen:webdesign-lernen:ul-bsp.gif?nolink|}}
 +
 +===== Aufbau eines HTML-Dokuments (I) =====
 +{{: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 =====
 +
 +**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|
fortbildungen/webdesign-lernen/ueberblick-erste-schritte.1443560324.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki