HTML5 und CSS – Grundlagen

Kurs | Albert America

1
2
3
4
5
6

Medien im Internet

  • Lernziele
  • Ich kann Bilder im Web veröffentlich.
  • Ich kenne den Anwendungsunterschied zwischen PNG, JPG, GIF SVG im Web.
  • Ich kann mit I-Frames Karten, Viedeo oder Bilder einbinden.

Repetition

Fragen zu Tag 2 - Links und Hypertext

Bilder – PNG, JPG, GIF oder SVG?

Welches ist das ideale Dateiformat für Bilder?
Ein Bildformat für den Einsatz im Web gibt es nicht, der Verwendungszweck gibt die richtige Wahl eines Formates vor.
Welche Kompression eignet sich für Bilder im Web?
Kurzbeschrieb
Wich one to use

Komprimierung: JPG/JPEG

Die Kompremierung mit dem JPEG-Format (Joint Photographic Experts Group) dient dazu Fotografien und Farbverläufe mit vielen Farben (bis 16 Millionen) detailgetreu darzustellen.
Beispiel: JPG/ Datenkompressionsalgorythmen

Komprimierung: GIF

Die Kompremierung mit dem GIF-Format dient dazu Logos und Grafiken mit vielen ausgewählter Farbpalette darzustellen.
Beispiel: GIF/Farbkomprimierung

Komprimierung mit Transparenz: PNG

Was ist ein PNG?
Unterschiede bei der Transparenz von .gif und .png
Komprimierung : GIF vs. PNG

Wichtig: Jedes Bild sollte webtauglich gespeichert werden.

Das SVG-Format

Im Gegensatz zu den anderen Formaten ist das SVG kein reines Bitmap-Format sondern eine vectorgrafisches Format (Vergleichbar mit den Formaten "AI" oder "EPS").
Was ist das SVG-Format

Übung - Portraitbild einfügen

  1. Öffne dein mitgebrachtes Bild portrait.jpeg im Programm: Photoshop oder Photoshop Element.
  2. Wähle > Datei > für Web und Geräte speichern ......
  3. Im Fenster "für Web und Geräte speichern" kannst du das richtige Format auswählen und die Qualität und Grösse (max. 600 Pixel Breite) des Bildes einstellen. Tipps dazu gibt die Kursleitung (Notizen).
    4. Erstelle im deinem Projektordner xx einen neuen Ordner images oder bilder
  4. Speichere das ausgewählte JPEG-Format als portait.jpeg im Ordner images deines Projektordners "xx".
  5. Öffne dein Datei ueber-mich/index.html
  6. Füge das komprimierte Bild in den main-Tag der Unterseite ueber-mich.html ein, anhand der Unterlage:
    Ein Bild mit Brackets einfügen

Lösung | Lösung ZIP

PAUSE

Medien im Internet 2

Übung - externes Bild einfügen

  1. Gehe auf die Homepage giphy.com
  2. Suche Dir dort eine eine Gif-Animation, welche Dir gefällt!
  3. Klicke auf: Copy link.
  4. Kopiere dort den GIF link.
  5. Öffne deine Startseite index.html und füge im main unter Favoriten einen img-Tag ein
  6. Füge im Attribut src="" den kopierten GIF link ein.
  7. Teste die Seite.

Lösung | Lösung ZIP

Favicon

Zusatzübung: Favicon zeigen und generieren

Ein Favicon ist das kleine Symbol oder Logo (16x16 oder 32x32 Pixel), welches im Adressfenster eines Browsers links vor der URL angezeigt wird. Um solche kleine Bilder zu erstellen gibts im Web Favico-Generatoren. Bei den meisten dieser Generatoren wird auch der link-Tag dazu generiert. Diesen musst du immer im head-Element einfügen. Natürlich muss das Favicon im richtigen Pfad auf dem Server liegen!
Favicon-generator
info und Tipps dazu auf Webmasterparadies.de

iFrames einbinden

Mit dem iframe HTML Element („inline frame“) kann eine weitere HTML Seite in die aktuelle Seite eingebunden werden.

iFrames-inlineFrames - Theorie

Ein Inlineframe ist ein HTML-Element zur Strukturierung von Webseiten. Es wird benutzt, um andere Webinhalte als selbstständige Dokumente in einem definierten Bereich des Browsers anzuzeigen.
iFrame das andere Frame.

iFrame Beispiel

Anleitung: Eine Karte von Google-Maps einbinden

Übung - Karten einbinden

  1. Rufe die Website Google Maps auf https://maps.google.ch/ .
  2. Gebe eine Adresse ein.
  3. Kopiere den iFrame-Code(Du findest den Code unter TEILEN: Karte einebetten).
  4. Öffne deine index.html-Seite im Ordner kontakt.
  5. Erstelle im main-Tag einen article.
  6. Füge den kopierten iFrame-Code dort in den erstellten article-Tag in den Quelltext ein.
  7. Teste deine Datei im Browser.

Lösung | Lösung ZIP

Zusatz-Übung: Videos einbinden

Anleitung: Vimeo einbinden.

Absoluter Link auf ein Bild

Neben Texten können Bilder verlinkt werden.

Anleitung: Ein Bild muss webtauglich gespeichert und verlinkt werden.
Ein Bild mit Brackets einfügen

Link auf einem Bild einfügen

Zusatzübung: Absoluter Link auf ein Bild

  1. Füge ein webtaugliches, kleines Bild in deine Seite ein.
  2. Dabei musst du das img-Element mit dem a-Element umschliessen.

    3. Lösung

Aufgaben

Lesen Im HTML & CSS Buch

Seite 80 - 96 (Kapitel 4 Thema Links )
Übungen aus dem Buch analysieren

Lesen

Deutscher Artikel zum Attribut: alt im a-Tag

Links & Tipp's

Software:
Afinity Photo, die Alternative zu Photoshop.
Photoshop Elements, der «kleine Photoshop» ist für fast alle Web-Arbeiten.
IrfanView, Bildverwaltungsprogramm für Windows (Freeware)
Gimp (Handbuch), OpenSource Alternative zu Photoshop (Freeware, alle Systeme)

Favicon: Icons in der Adressleiste des Browsers,
Favicon Tutorial, Favicon Generator
Farben:
drweb - Linksammlung
animiertes GIF und Banner:
grammiweb Bannerformate, StyleGuide
http://www.flipflopflyin.com
Video: Animation mit Photoshop erstellen