SlideShare une entreprise Scribd logo
1  sur  3
HTML-Befehle:
Bilder einfügen
img-Tag
Zum Einfügen von Bildern verwendet man den img-
Tag mit folgender Syntax:
<p>
<img src="bild.gif" alt="Beschreibung" />
</p>
"Source" = Quelle des Bildes als Pfad-
Angabe, z.B.
bild.gif
bilder/bild.gif
http://www.xy.de/bilder/bild.gif
Alternativtext = Beschreibung des Bildes,
wichtig v.a. für
-Suchmaschinen
-Ausgabe mit Screenreader
"Fotografie eines Tigers beim Fressen."
"Zusammenhang zwischen Geschwindigkeit
und Zeit (Schema-Zeichnung)"
img-Tag als "leeres Element"
Der img-Tag gehört zu den "leeren Elementen": Er schließt keine
weiteren Inhalte ein und hat damit keinen End-Tag.
Leere Elemente werden gesondert gekennzeichnet – durch ein
abschließendes Leerzeichen + Schrägstrich vor der
schließenden Spitzklammer.
<img src="bild.gif" alt="Beschreibung" />
Leerzeichen
Schrägstrich ("Slash")

Contenu connexe

En vedette

La pedagogie du projet
La pedagogie du projetLa pedagogie du projet
La pedagogie du projettjb47
 
Les Collectivités et les Réseaux Sociaux - Etudes 2013
Les Collectivités et les Réseaux Sociaux - Etudes 2013Les Collectivités et les Réseaux Sociaux - Etudes 2013
Les Collectivités et les Réseaux Sociaux - Etudes 2013Aurélia Ledoux
 
Trucs pour mobiles
Trucs pour mobilesTrucs pour mobiles
Trucs pour mobilesdesintocx
 
La véritable histoire du dernier samourai
La véritable histoire du dernier samouraiLa véritable histoire du dernier samourai
La véritable histoire du dernier samouraiShingen_bushido
 
Guide pratique-pme-tpe
Guide pratique-pme-tpeGuide pratique-pme-tpe
Guide pratique-pme-tpeMagali Ventat
 
Curiculum françai[pdf]
Curiculum françai[pdf]Curiculum françai[pdf]
Curiculum françai[pdf]mihoub
 
Bravo aux gens du voyage ils fonctionnent en bade organisées
Bravo aux gens du voyage ils fonctionnent en bade organisées Bravo aux gens du voyage ils fonctionnent en bade organisées
Bravo aux gens du voyage ils fonctionnent en bade organisées desintocx
 
Avis anse des rochers zabrico 1
Avis anse des rochers zabrico 1Avis anse des rochers zabrico 1
Avis anse des rochers zabrico 1MC Zabrico
 
Abstracts Master Thesen PR/IK 01 (D)
Abstracts Master Thesen PR/IK 01 (D)Abstracts Master Thesen PR/IK 01 (D)
Abstracts Master Thesen PR/IK 01 (D)PR PLUS GmbH
 
La marque, productrice de contenu: mode cocréation
La marque, productrice de contenu: mode cocréationLa marque, productrice de contenu: mode cocréation
La marque, productrice de contenu: mode cocréationCloudRaker
 
Trophées innocherche 2015 - packages sponsors
Trophées innocherche 2015 - packages sponsorsTrophées innocherche 2015 - packages sponsors
Trophées innocherche 2015 - packages sponsorsBertrand Petit
 
La classe inversée et la baladodiffusion (1er Collqoue Ontario-Québec)
La classe inversée et la baladodiffusion (1er Collqoue Ontario-Québec)La classe inversée et la baladodiffusion (1er Collqoue Ontario-Québec)
La classe inversée et la baladodiffusion (1er Collqoue Ontario-Québec)Samuel Bernard
 
Teoría de Usos y Gratificaciones
Teoría de Usos y GratificacionesTeoría de Usos y Gratificaciones
Teoría de Usos y Gratificacionesleonel037
 

En vedette (20)

La pedagogie du projet
La pedagogie du projetLa pedagogie du projet
La pedagogie du projet
 
Les Collectivités et les Réseaux Sociaux - Etudes 2013
Les Collectivités et les Réseaux Sociaux - Etudes 2013Les Collectivités et les Réseaux Sociaux - Etudes 2013
Les Collectivités et les Réseaux Sociaux - Etudes 2013
 
Trucs pour mobiles
Trucs pour mobilesTrucs pour mobiles
Trucs pour mobiles
 
La véritable histoire du dernier samourai
La véritable histoire du dernier samouraiLa véritable histoire du dernier samourai
La véritable histoire du dernier samourai
 
Pour une fiscalité du numérique juste et équitable en France
Pour une fiscalité du numérique juste et équitable en FrancePour une fiscalité du numérique juste et équitable en France
Pour une fiscalité du numérique juste et équitable en France
 
Brand
BrandBrand
Brand
 
Guide pratique-pme-tpe
Guide pratique-pme-tpeGuide pratique-pme-tpe
Guide pratique-pme-tpe
 
Curiculum françai[pdf]
Curiculum françai[pdf]Curiculum françai[pdf]
Curiculum françai[pdf]
 
Bravo aux gens du voyage ils fonctionnent en bade organisées
Bravo aux gens du voyage ils fonctionnent en bade organisées Bravo aux gens du voyage ils fonctionnent en bade organisées
Bravo aux gens du voyage ils fonctionnent en bade organisées
 
Avis anse des rochers zabrico 1
Avis anse des rochers zabrico 1Avis anse des rochers zabrico 1
Avis anse des rochers zabrico 1
 
246
246246
246
 
Abstracts Master Thesen PR/IK 01 (D)
Abstracts Master Thesen PR/IK 01 (D)Abstracts Master Thesen PR/IK 01 (D)
Abstracts Master Thesen PR/IK 01 (D)
 
Elysee 2022
Elysee 2022Elysee 2022
Elysee 2022
 
La marque, productrice de contenu: mode cocréation
La marque, productrice de contenu: mode cocréationLa marque, productrice de contenu: mode cocréation
La marque, productrice de contenu: mode cocréation
 
Trophées innocherche 2015 - packages sponsors
Trophées innocherche 2015 - packages sponsorsTrophées innocherche 2015 - packages sponsors
Trophées innocherche 2015 - packages sponsors
 
Reportage CFPJ
Reportage CFPJReportage CFPJ
Reportage CFPJ
 
Wie Speaker ihre Reputation ausbauen
Wie Speaker ihre Reputation ausbauenWie Speaker ihre Reputation ausbauen
Wie Speaker ihre Reputation ausbauen
 
Environmental impact assessment
Environmental impact assessmentEnvironmental impact assessment
Environmental impact assessment
 
La classe inversée et la baladodiffusion (1er Collqoue Ontario-Québec)
La classe inversée et la baladodiffusion (1er Collqoue Ontario-Québec)La classe inversée et la baladodiffusion (1er Collqoue Ontario-Québec)
La classe inversée et la baladodiffusion (1er Collqoue Ontario-Québec)
 
Teoría de Usos y Gratificaciones
Teoría de Usos y GratificacionesTeoría de Usos y Gratificaciones
Teoría de Usos y Gratificaciones
 

Plus de lehrerfreund

mySQL - INSERT INTO
mySQL - INSERT INTOmySQL - INSERT INTO
mySQL - INSERT INTOlehrerfreund
 
mySQL - CREATE TABLE
mySQL - CREATE TABLEmySQL - CREATE TABLE
mySQL - CREATE TABLElehrerfreund
 
mySQL - Felddatentypen
mySQL - FelddatentypenmySQL - Felddatentypen
mySQL - Felddatentypenlehrerfreund
 
CSS: Links formatieren
CSS: Links formatierenCSS: Links formatieren
CSS: Links formatierenlehrerfreund
 
CSS: Zweispaltige Layouts
CSS: Zweispaltige LayoutsCSS: Zweispaltige Layouts
CSS: Zweispaltige Layoutslehrerfreund
 
CSS - Externes Stylesheet
CSS - Externes StylesheetCSS - Externes Stylesheet
CSS - Externes Stylesheetlehrerfreund
 
PHP: Variablen entschaerfen
PHP: Variablen entschaerfenPHP: Variablen entschaerfen
PHP: Variablen entschaerfenlehrerfreund
 
PHP: Indiziertes Array
PHP: Indiziertes ArrayPHP: Indiziertes Array
PHP: Indiziertes Arraylehrerfreund
 
PHP: Assoziative Arrays
PHP: Assoziative ArraysPHP: Assoziative Arrays
PHP: Assoziative Arrayslehrerfreund
 
PHP: Rechnen mit PHP
PHP: Rechnen mit PHPPHP: Rechnen mit PHP
PHP: Rechnen mit PHPlehrerfreund
 
PHP: br und n (new line)
PHP: br und n (new line)PHP: br und n (new line)
PHP: br und n (new line)lehrerfreund
 
PHP: Variablen und Datentypen
PHP: Variablen und DatentypenPHP: Variablen und Datentypen
PHP: Variablen und Datentypenlehrerfreund
 
PHP: echo, kommentare
PHP: echo, kommentarePHP: echo, kommentare
PHP: echo, kommentarelehrerfreund
 

Plus de lehrerfreund (20)

ERM - Überblick
ERM - ÜberblickERM - Überblick
ERM - Überblick
 
mySQL - INSERT INTO
mySQL - INSERT INTOmySQL - INSERT INTO
mySQL - INSERT INTO
 
mySQL - CREATE TABLE
mySQL - CREATE TABLEmySQL - CREATE TABLE
mySQL - CREATE TABLE
 
mySQL - SELECT
mySQL - SELECTmySQL - SELECT
mySQL - SELECT
 
mySQL - Felddatentypen
mySQL - FelddatentypenmySQL - Felddatentypen
mySQL - Felddatentypen
 
CSS: Links formatieren
CSS: Links formatierenCSS: Links formatieren
CSS: Links formatieren
 
CSS: Zweispaltige Layouts
CSS: Zweispaltige LayoutsCSS: Zweispaltige Layouts
CSS: Zweispaltige Layouts
 
CSS - Externes Stylesheet
CSS - Externes StylesheetCSS - Externes Stylesheet
CSS - Externes Stylesheet
 
PHP: foreach
PHP: foreachPHP: foreach
PHP: foreach
 
PHP: Switch
PHP: SwitchPHP: Switch
PHP: Switch
 
PHP: Variablen entschaerfen
PHP: Variablen entschaerfenPHP: Variablen entschaerfen
PHP: Variablen entschaerfen
 
PHP: exit
PHP: exitPHP: exit
PHP: exit
 
PHP: isset
PHP: issetPHP: isset
PHP: isset
 
PHP: if-else
PHP: if-elsePHP: if-else
PHP: if-else
 
PHP: Indiziertes Array
PHP: Indiziertes ArrayPHP: Indiziertes Array
PHP: Indiziertes Array
 
PHP: Assoziative Arrays
PHP: Assoziative ArraysPHP: Assoziative Arrays
PHP: Assoziative Arrays
 
PHP: Rechnen mit PHP
PHP: Rechnen mit PHPPHP: Rechnen mit PHP
PHP: Rechnen mit PHP
 
PHP: br und n (new line)
PHP: br und n (new line)PHP: br und n (new line)
PHP: br und n (new line)
 
PHP: Variablen und Datentypen
PHP: Variablen und DatentypenPHP: Variablen und Datentypen
PHP: Variablen und Datentypen
 
PHP: echo, kommentare
PHP: echo, kommentarePHP: echo, kommentare
PHP: echo, kommentare
 

Dernier

Presentation Endstation Dingden, Razzia von Rotterdam
Presentation Endstation Dingden, Razzia von RotterdamPresentation Endstation Dingden, Razzia von Rotterdam
Presentation Endstation Dingden, Razzia von RotterdamEus van Hove
 
Stadt Popasna.Stadt PopasnaStadt Popasna
Stadt Popasna.Stadt PopasnaStadt PopasnaStadt Popasna.Stadt PopasnaStadt Popasna
Stadt Popasna.Stadt PopasnaStadt PopasnaOlenaKarlsTkachenko
 
Dignitas Infinita - MENSCHENWÜRDE; Erklärung des Dikasteriums für die Glauben...
Dignitas Infinita - MENSCHENWÜRDE; Erklärung des Dikasteriums für die Glauben...Dignitas Infinita - MENSCHENWÜRDE; Erklärung des Dikasteriums für die Glauben...
Dignitas Infinita - MENSCHENWÜRDE; Erklärung des Dikasteriums für die Glauben...Martin M Flynn
 
Do's and Don'ts für mobile Streamsetups - Beitrag zum #ScienceVideoCamp2024 d...
Do's and Don'ts für mobile Streamsetups - Beitrag zum #ScienceVideoCamp2024 d...Do's and Don'ts für mobile Streamsetups - Beitrag zum #ScienceVideoCamp2024 d...
Do's and Don'ts für mobile Streamsetups - Beitrag zum #ScienceVideoCamp2024 d...Mathias Magdowski
 
Kurzbeschreibung Schreibtools für die Toolbox.pdf
Kurzbeschreibung Schreibtools für die Toolbox.pdfKurzbeschreibung Schreibtools für die Toolbox.pdf
Kurzbeschreibung Schreibtools für die Toolbox.pdfHenning Urs
 
Ein Telefongespräch. Ein Telefongespräch. Ein Telefongespräch
Ein Telefongespräch. Ein Telefongespräch. Ein TelefongesprächEin Telefongespräch. Ein Telefongespräch. Ein Telefongespräch
Ein Telefongespräch. Ein Telefongespräch. Ein TelefongesprächOlenaKarlsTkachenko
 

Dernier (7)

Presentation Endstation Dingden, Razzia von Rotterdam
Presentation Endstation Dingden, Razzia von RotterdamPresentation Endstation Dingden, Razzia von Rotterdam
Presentation Endstation Dingden, Razzia von Rotterdam
 
Stadt Popasna.Stadt PopasnaStadt Popasna
Stadt Popasna.Stadt PopasnaStadt PopasnaStadt Popasna.Stadt PopasnaStadt Popasna
Stadt Popasna.Stadt PopasnaStadt Popasna
 
Dignitas Infinita - MENSCHENWÜRDE; Erklärung des Dikasteriums für die Glauben...
Dignitas Infinita - MENSCHENWÜRDE; Erklärung des Dikasteriums für die Glauben...Dignitas Infinita - MENSCHENWÜRDE; Erklärung des Dikasteriums für die Glauben...
Dignitas Infinita - MENSCHENWÜRDE; Erklärung des Dikasteriums für die Glauben...
 
Díptic PFI pfi pfi pfi pfi pfi pfi pf.pdf
Díptic PFI pfi pfi pfi pfi pfi pfi pf.pdfDíptic PFI pfi pfi pfi pfi pfi pfi pf.pdf
Díptic PFI pfi pfi pfi pfi pfi pfi pf.pdf
 
Do's and Don'ts für mobile Streamsetups - Beitrag zum #ScienceVideoCamp2024 d...
Do's and Don'ts für mobile Streamsetups - Beitrag zum #ScienceVideoCamp2024 d...Do's and Don'ts für mobile Streamsetups - Beitrag zum #ScienceVideoCamp2024 d...
Do's and Don'ts für mobile Streamsetups - Beitrag zum #ScienceVideoCamp2024 d...
 
Kurzbeschreibung Schreibtools für die Toolbox.pdf
Kurzbeschreibung Schreibtools für die Toolbox.pdfKurzbeschreibung Schreibtools für die Toolbox.pdf
Kurzbeschreibung Schreibtools für die Toolbox.pdf
 
Ein Telefongespräch. Ein Telefongespräch. Ein Telefongespräch
Ein Telefongespräch. Ein Telefongespräch. Ein TelefongesprächEin Telefongespräch. Ein Telefongespräch. Ein Telefongespräch
Ein Telefongespräch. Ein Telefongespräch. Ein Telefongespräch
 

HTML: Bilder einfügen (img-Tag)

  • 2. img-Tag Zum Einfügen von Bildern verwendet man den img- Tag mit folgender Syntax: <p> <img src="bild.gif" alt="Beschreibung" /> </p> "Source" = Quelle des Bildes als Pfad- Angabe, z.B. bild.gif bilder/bild.gif http://www.xy.de/bilder/bild.gif Alternativtext = Beschreibung des Bildes, wichtig v.a. für -Suchmaschinen -Ausgabe mit Screenreader "Fotografie eines Tigers beim Fressen." "Zusammenhang zwischen Geschwindigkeit und Zeit (Schema-Zeichnung)"
  • 3. img-Tag als "leeres Element" Der img-Tag gehört zu den "leeren Elementen": Er schließt keine weiteren Inhalte ein und hat damit keinen End-Tag. Leere Elemente werden gesondert gekennzeichnet – durch ein abschließendes Leerzeichen + Schrägstrich vor der schließenden Spitzklammer. <img src="bild.gif" alt="Beschreibung" /> Leerzeichen Schrägstrich ("Slash")