5. Was ist „Markup“?
Was im Word sichtbar
ist:
Lena Doppel
Oskar-Kokoschkaplatz 2
1010 Wien
Wien, den 11. 11. 2009
Sehr geehrte Damen und
Herren!
Ich möchte mich beschweren!
Ihr Produkt ist so was von
schlecht, da geht mir echt der
Humor aus.
Aber wirklich!
6. Was ist „Markup“?
Was im Word sichtbar Was FÜR DEN COMPUTER im
ist: Word steht (fiktiv):
Lena Doppel [Dokument Anfang, Absatz Beginn,
linksbündig, Standardschrift
Oskar-Kokoschkaplatz 2 HelveticaNeue, 27pt] Lena
1010 Wien Doppel[Zeilenschaltung]Oskar Kokoschka
Platz 2 [Zeilenschaltung]1010 Wien [Absatz
Ende]
Wien, den 11. 11. 2009 [rechtsbündig Beginn] Wien, den 11. 11.
2009 [rechtsbündig Ende, Absatz
Sehr geehrte Damen und Beginn]Sehr geehrte Damen und Herren!
[Absatz Ende, Absatzbeginn]Ich möchte
Herren! mich [Fett Anfang beschweren![Fett Ende,
Absatz Ende, Absatz Anfang]Ihr Produkt
Ich möchte mich beschweren! ist so was von schlecht, da geht mir
[Schriftfarbe rot Anfang]echt[Schriftfarbe
rot Ende] der Humor aus. [Absatz Ende,
Ihr Produkt ist so was von Schrift Papyrus Anfang, Absatz
schlecht, da geht mir echt der Anfang]Aber wirklich! [Absatz Ende, Schrift
Humor aus. Papyrus Ende, Dokument Ende]
Aber wirklich!
8. Das gleiche in HTML
Was man IM Browser
sieht:
Lena Doppel
Oskar Kokoschka Platz 2
1010 Wien
Wien, den 1. 11. 2007
Sehr geehrte Damen und
Herren!
Ich möchte mich beschweren!
Ihr Produkt ist so was von
schlecht, da geht mir echt der
Humor aus.
Aber wirklich!
9. Das gleiche in HTML
Was man IM Browser Was der BROWSER sieht:
sieht: <html>
<body>
Lena Doppel <p>
Lena Doppel<br />
Oskar Kokoschka Platz 2 Oskar Kokoschka Platz 2<br />
1010 Wien 1010 Wien
</p>
Wien, den 1. 11. 2007 <p style="text-align:right"> Wien, den 1.
11. 2007
</p>
Sehr geehrte Damen und <p> Sehr geehrte Damen und Herren!
Herren! </p>
<p> Ich möchte mich
Ich möchte mich beschweren! <strong> beschweren! </strong>
</p>
Ihr Produkt ist so was von <p> Ihr Produkt ist so was von schlecht, da
schlecht, da geht mir echt der geht mir echt der Humor aus.
</p>
Humor aus. <p style="font-family:Papyrus"> Aber
wirklich!
</p>
Aber wirklich! </body>
</html>
11. Guten "Tag" (sprich: Täg)
„Tags“ nennt man die Elemente von HTML. Sie beschreiben das
Aussehen von Webseiten im allgemeinen und Texten im Speziellen
12. Guten "Tag" (sprich: Täg)
„Tags“ nennt man die Elemente von HTML. Sie beschreiben das
Aussehen von Webseiten im allgemeinen und Texten im Speziellen
Tags kommen (meistens) in Paaren vor
<strong>fetter Text</strong>
manchmal auch nicht
<br /> <!--Zeilenschaltung-->
13. Guten "Tag" (sprich: Täg)
„Tags“ nennt man die Elemente von HTML. Sie beschreiben das
Aussehen von Webseiten im allgemeinen und Texten im Speziellen
Tags kommen (meistens) in Paaren vor
<strong>fetter Text</strong>
manchmal auch nicht
<br /> <!--Zeilenschaltung-->
Tags können Attribute und diese wiederum Werte haben
14. Guten "Tag" (sprich: Täg)
„Tags“ nennt man die Elemente von HTML. Sie beschreiben das
Aussehen von Webseiten im allgemeinen und Texten im Speziellen
Tags kommen (meistens) in Paaren vor
<strong>fetter Text</strong>
manchmal auch nicht
<br /> <!--Zeilenschaltung-->
Tags können Attribute und diese wiederum Werte haben
Tags betten Objekte ein (z.B. Bilder, Töne oder Flash Files)
15. Guten "Tag" (sprich: Täg)
„Tags“ nennt man die Elemente von HTML. Sie beschreiben das
Aussehen von Webseiten im allgemeinen und Texten im Speziellen
Tags kommen (meistens) in Paaren vor
<strong>fetter Text</strong>
manchmal auch nicht
<br /> <!--Zeilenschaltung-->
Tags können Attribute und diese wiederum Werte haben
Tags betten Objekte ein (z.B. Bilder, Töne oder Flash Files)
Tags kann man ineinander verschachteln
16. Guten "Tag" (sprich: Täg)
„Tags“ nennt man die Elemente von HTML. Sie beschreiben das
Aussehen von Webseiten im allgemeinen und Texten im Speziellen
Tags kommen (meistens) in Paaren vor
<strong>fetter Text</strong>
manchmal auch nicht
<br /> <!--Zeilenschaltung-->
Tags können Attribute und diese wiederum Werte haben
Tags betten Objekte ein (z.B. Bilder, Töne oder Flash Files)
Tags kann man ineinander verschachteln
Tags beschreiben die Struktur einer Seite, Styles (CSS) beschreiben
das Layout
19. Don‘ts bei Dateinamen
KEINE Leerzeichen verwenden
meine seite wird z.B. in der URL zu meine%20seite.html
KEINE ä, ü, ö, ß etc. im Pfadnamen
Domains dürfen inzwischen Umlaute verwenden in Pfaden
gilt das gleiche wie bei den Leerzeichen
KEINE &, §, ?, !, $ im Pfadnamen verwenden
sind für Scriptbefehle in der URL reserviert
NICHT Groß- und Kleinschreibung mixen
für den eigenen Rechner und manche Windows-Server ist
hallo.html das gleiche Dokument wie Hallo.html für 99% aller
Server aber nicht
20. Do‘s bei Dateinamen
NUR Kleinbuchstaben und Zahlen verwenden
Dateinamen generell mit Buchstaben beginnen
IMMER ein Suffix verwenden (.htm, .html)
statt Leerzeichen Unterstriche und Bindestriche
verwenden (_ -)
das Default-Dokument in einem Ordner heisst
IMMER index.htm oder index.html bei einem CMS
z.B. index.php oder index.asp
21. Links - Getting around...
absolut auf einen anderen Server:
http://www.orf.at/news/whatever.dhtml
absolut auf dem eigenen Server:
/webdesigns/web_f_drei/screen2.html
relativ auf dem eigenen Server:
screen1.html (Datei im selben Verzeichnis)
web_f_drei/index.html (ein Verzeichnis unterhalb)
../ (ein Verzeichniss nach oben)
22. Web-Screendesign
visuelle Dummy-Seiten in Photoshop, InDesign
etc. zumindestens zwei Seiten-Typen (index/liste
und content)
festlegen der Textformate für CSS
ausmessen der Spalten-Formate in Pixel
ev. tracing image verwenden
umsetzen in tables oder layers
23. Bildformate am Web
gif (graphic interchange format)
jpg, jpeg (joint photographers expert group)
png (portable network graphics)
tif, tiff (tagged image file format)
unter Windows (bis XP) werden nur RGB
Dateien im Browser korrekt angezeigt, am Mac
auch CMYK
generell werden nur 3x8-bit Dateien richtig
angezeigt
24. Farbräume am Schirm
und in Print
RGB CMYK
Red/Green/Blue Cyan/Yellow/
Magenta/Key
additives Farbmodell subtraktives
Farbmodell
emittiertes Licht Farbe auf Medium
„schwarz“=0% „schwarz“=100%
25. Abbildung von Farbe am
Schirm
Computer arbeiten mit 0 und 1
1-bit Farbsystem könnte 2 Farben darstellen,
z.B. schwarz=0 und weiss=1
2-bit Farbsystem könnte 4 Farben darstellen,
z.B. schwarz=00, dunkelgrau=01,
hellgrau=10, weiss=11
8-bit Farbsystem RGB kann 16,7 Mio.
verschiedener Farben darstellen.
26. Wieso 16,7 Mio.?
8-bit bedeutet, dass eine Farbkomponente
von 8 Nullen und Einsen dargestellt wird
jede Farbe besteht aber aus den drei
Komponenten rot, grün und blau
daraus ergibt sich, dass jede Farbe von
8+8+8 = 24 Nullen und Einsen dargestellt
wird
000000000000000000000000 = schwarz
111111111111111111111111 = weiß
27. Wieso 16,7 Mio.?
Eine Farbkomponente wird von 8 Nullen und
Einsen gebildet (00000000 bis 11111111)
Die Anzahl an Möglichkeiten beträgt 2 hoch 8
2hoch1=2*1=2, 2hoch2=2*2=4,
2hoch3=2*2*2=8 .......
2hoch8=2*2*2*2*2*2*2*2*=256
RGB = 256*256*256=16.777.216
Farbmöglichkeiten
28. What the #FFF ***?
Schwarz =0000000000(R)0000000000(G)00000000(B)
oder
=000000 (00->R, 00->G, 00->B)
Weiß
=11111111(R)11111111(G)11111111(B) oder
=FFFFFF (Kurzschreibweise FFF)
dazu braucht es ein „erweitertes“ Ziffernsystem, das
hexadezimale („Basis 16“)
unser dezimales System (dezimal = Basis von 10
Ziffern) hat die Ziffern 0,1,2,3,4,5,6,7,8,9
hexadezimal hat die (Basis von 16) „Ziffern“
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
30. GIF
für damalige (80er Jahre) Netzkapazitäten entwickeltes sehr
kleines Format
kann animiert werden
keine Kompression, kein Qualitätsverlust, aber „Farbverlust“
8-bit Farbraum (im Gegensatz zum 24bit Farbraum
moderner Bildbearbeitungssoftware), dh. kann nur 256
Farben darstellen (insgesamt!)
unterstützt Transparenz
kann auch weniger als 256 Farben darstellen (siehe 1-bit,
2-bit)
Einsatz: bei Farbflächen, Logos, Line Art
31. JPEG
Kompressionsverfahren mit Verlust an
Bilddaten
kann 16,7 Mio Farben darstellen (24bit
Farbraum)
keine Unterstützung von Transparenz
löscht Bilddaten (unwiderbringlich) und
speichert stattdessen Annäherungen in
Formeln
Kompressionsverfahren erzeugt so genannte
„Artefakte“, meist sichtbar als Sprenkel in
32. PNG
modernstes Format
Kompressionsformat wie jpg, aber mit
„besseren“ Techniken
unterstützt Transparenz
keine Unterstützung in älteren Browsern
Einsatz: kann alles was gif und jpg kann außer
Animation