Tag 6

Buchempfehlung: Little Boxes (leider fast ausverkauft!)
Im Index vom Herrn Bachner: neue Weblinks/der gesamte Kurs
Proxy = Zwischenspeicher

Übungsaufgabe für Intrahypertextuelle Verknüpfungen:

• Ordner "intra" in Tagesordner kopieren
• neue Datei dream im Ordner "intra" angelegt
• oben eine Liste erstellen und Text einfließen lassen
• Vor den Headlines einen "Anker" setzen = <a name="Bezeichnung">
• Oben in der Liste einen "AnkerLink mit #" setzen = <a href="#Ankername">
• # = interne Verweise (wichtig!) | immer beim Verlinken setzen!!!
• Zuerst die Ziele definieren, dann die Anker setzen
• Anker setzen:
  im Body oben <a name="top"></a>
  im Body unten <a name="end"></a>
• AnkerLink setzen:
  <a href="#top"> an den Anfang</a>
  <a href="#end">ans Ende</a>

• Altenative (mit der eindeutige Identivikationsmöglichkeit):
  id-setzen (mit rechter Maustast in den Befehl setzen)
  id="Bezeichnung" in bestehende Strukturen eine id-setzen
  z. B. <a id="end" href="#top">an den Anfang</a>
• dann mit dem Ankerlink zu den id verlinken, immer mit #
  <a href="#t01">

Dateiformate bei Grafikdateien

• Pixelbasierte Grafik
• Vektorgrafik

Pixelbasierte Grafik

• Auflösung / Anzahl der Bildpunkte
• Anzahlm der Farben (RGB Grafik 256 * 256* 256 = 16,7 Mio)
• 4000 * 3000 Bildpunkte = 12 Megapixel
• RGB-Farbtiefe (24bit)
• 3 Byte pro Bildpunkte
• 36 MB

Verlusthafte Kompression

JPG - Joint Expert Photo Group (jpg, jpeg)

• Kompression durch Zusammenfassung von Pixel
• Volle Farbtiefe gemäß RGB
• Keine Tranzparenz
• Fotografie

GIF - Graphic Interchange Format

• max. Farbtiefe von 256 Farben in einer eigenen Farbpalette
• Kompression über Farbreduktion
• Gif-Animationen
• Politisch inkorrekt

PNG - Portable Network Graphic

• PNG8 (Farbtiefe 8bit = 256 Farben), Transparenz
• PNG24 (Farbtiefe 24bit = 16,6 Mio. Farben) Halbtransparenz | Deckkraft

Vektorgrafik

SVG - Scalable Vector Grafic

• Frei skalierbar
• wird nicht von älteren Browsern (vor IE 10)

Grafikprogramme

Kommerzielle Software

• Photoshop
• Illustrator (Vektor / Freehand)
• Paintshop Pro
• Corel Photopaint
• Corel Draw

Freie Software

• Gimp (OpenSource)
• Irfanview
• GraphicConverter (Mac)
• Picasa (Mac und Win)
• Inkscape (Vektor)
• Paint.Net
• Pixlr (Photo editor online)

Webbasierte Dienste und Anwendungen

Grafik bearbeiten

1. Bildrechte
2. Zuschneidem
3. Resize
4. Kompression

Bildrechte
Freie Bilder (auf Lizensen achten, z. B. Creativ Commons, GNU):

• Wikimedia Commons (Bilder sind frei nutzbar)
• Bundesarchiv
• Lebensmittelfoto
•  www.sxc.hu

Foto Stock (kostenpflichtige Bilder)

• fotolia, IStockPhoto, Getty Images,Pixelio, About Pixel, shutterstock, pattern

 Grafiken einbinden
HTML-Element:
img (Inline-Block Element)
           src = Quelle (Relativer Pfad / URL)
           width = Breite (in Pixeln)
           height = Höhe (in Pixeln) Skalieren von Bildern über diese Angaben
           ist möglich, bringt aber nichts
           boder = Rahmen (in Pixel) /gibt es nicht mehr
           alt = Alternativer Text (wenn man das Bild nicht sehen kann, dann ist das
           die Kurzbeschreibung des Bildes, wichtig!!!)
           title = der Titel des Bildes (PopUp-Info)
           (oft das gleiche Wort bei title und alt eingesetzt, gut für SEO)



  <img  (Befehl, Anker) src (Attribut)  = "Wert (Name der Datei)"

<img title="Rostiges Scharnier" src="Pfad/Name des Bildes width="120" height="60" border="0" alt="Rostiges Scharnier">

Es gibt 2 Möglichkeiten:

• einmal das Bild in die Datei ziehen
• einmal das Bild aus dem Internet ziehen (macht man aber normalerweise nicht!)

Grafiken ausrichten
1. Bilder in einem eigenen Absatz </p> (mit der rechten Maustaste in den Absatz gehen und align einsetzten) ausrichten:

<p align="left"><img src="k/003_industriekultur.jpg" width="120" height="78" border="0" alt=""></p>

2. Bilder in Beziehung zum Text ausrichten (Textfluß)
in dem Bild selbst <img> mit der rechten Maustaste den Textumfluß bestimmen

vspace="12" (Vertikaler Abstand in Pixeln) heute nicht mehr nötig/CSS

hspace="12" (Horizontaler Abstand in Pixeln) heute nicht mehr nötig/CSS


<img align="right" src="k/014_industriekultur.jpg" width="120" height="78" border="0" alt="">

3.Text vertikal zum Bild ausrichten

<img align="top"> Bildunterschrift oben
<img align="middle"> Bildunterschrift mittig
<img align="absmiddle"> Bildunterschrift mittig ausgerichtet (immer besser!)
<img align="bottom"> Bildunterschrift unten