Haupt-Reiter

Prüfungsgebiet 5: Eine Website gestalten, erfassen und bearbeiten:
 Bilder in HTML

Hier könnt ihr gemeinsam eure Inhalte erarbeiten und zusammenstellen. Das Wiki kann direkt jeweils bearbeitet werden. Oben auf »Bearbeiten« und dann könnt ihr Ergänzungen oder auch gegebenenfalls Korrekturen vornehmen.

Für Beispielaufgaben nutzt bitte die Lerngruppe: https://www.mediencommunity.de/lerngruppe-mediengestalter-zp-2017
Viel Erfolg

P.S. Beachtet bitte die Urheberrechte! Also kein Copy & Paste von anderen Websites oder aus Fachbüchern online stellen.

Bewertung: 
0
Bisher keine Bewertung

Kommentare

Wir hoffen das die Videos für den Einstieg in dieses Thema helfen. 

Grundlagen für den Gebrauch von Bilder auf einer der Webseite in HTML mit dem IMG Element. Wichtige Attribute bei Bildern sind sicherlich CLASS, TITLE und ALT.
https://www.youtube.com/watch?v=_BArhD7NubE


Auch hier grundlegende Informationen wie man Bilder Bilder in HMTL einfügt. 
https://www.youtube.com/watch?v=XvKT3FWSLfo


Möchte man Hintergrundbilder im HTML verwenden, dann werden diese über CSS zugewiesen.
https://www.youtube.com/watch?v=u5Chq_GF_8k


Bilder werden mittlerweile nicht mehr nur über IMG eingebunden. Für responsives Webdesign können Bilder an bestimmte Bildschirmanforderungen geknüpft werden. Z.B. Handy im Hochformat hat andere Anforderungen als ein 5K iMac. Dann kommt das PICTURE Element hinzu.
https://www.youtube.com/watch?v=uLLqafzVIlw&list=PLPjKx80JC4CAWBNOp8z_LJqYIekU8MzKi&index=4


Bilder für das Web optimieren ist ein ergänzender Teilbereich. Natürlich sollte man sich Gedanken über Auflösung und Qualität sowie Speicherplatz machen.
https://www.youtube.com/watch?v=udaLENwDyXY

Vielen herzlichen Dank für die prima Videos!

Zum Video: https://www.youtube.com/watch?v=_BArhD7NubE

die gesetzten Inline-Attribute width und height sollen lediglich dazu beitragen, dass Bilder beim Laden des CSS nicht springen. Die Bildgröße auf ein Maximum von 100% zu beschränken, sollte hingegen eine globale CSS Eigenschaft von Bildern sein. 

Zudem ist es invalid, den inline-attributen Prozentwerte zuzuweisen. Das w3c wünscht sich hier folgendes: width="300" height="100".

https://validator.w3.org/

Hier wird das <picture>-Element sehr ausführlich und einfach erklärt mit mehreren Beispielen:

https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

In HTML einbinden (index.htm)

index = startseite

  • Verknüpfung durch <img> Tag
  • width, height = Breite und Höhe, Maße des Bildes, können in px "100" oder in Prozent "30%" angegeben werden
  • alt = “...“ Beschreibung des Bildes, zur Orientierung für Blinde. Suchmaschinen erkennen so
  • den Bildinhalt. Berschreibung wird angezeigt, wenn Bild nicht darstellbar ist.
  • src = “button.png“ Dateiname und Verlinkung des Bildes
  • href="link" Verlinkt das Bild mit einer Webseite

<img src=“button.png“ width=“200“ height=“200“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im selben Ordner wie der HTML-Code <img src=“Bilder/button.png“ width=“20%“ height=“30%“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im Unterordner „Bilder“ !ACHTUNG!alt ist sehr wichtig beim Einfügen eines Bildes. Gründen siehe oben.

= Hintergrundbild liegt im selben Ordner wie CSS-Datei.