6.3.7 Icons

6.3.7 Icons

1	Allgemein
2	Include-Datei mit Verweis-Endtag Lupe Buch Weiter Schau (Auf die Grafik klicken)	Prinzip einer Include-Datei mit Verweis-Endtag: Jede Grafik ist in einer eigenen Include-Datei in der die Grafik und der Endtag eines Verweises enthalten ist. Die Grafik kann damit mit einem PHP-Befehl in den Quelltext eines HTML-Dokumentes eingelesen werden. Im Quelltext muss vor dieser Include-Datei der Anfangs-Verweistag <a href=".."> eingegeben werden. Die Grafik, die sich in der Include-Datei befindet, hat folgenden Code: <img src="...">. Der Endtag des Verweises, der sich in der Include-Datei befindet hat folgenden Code: </a>.
3	Include-Datei ohne Verweis-Endtag Include-Grafiken aus andern Seiten: (Auf die Grafik klicken)	Prinzip einer Include-Datei ohne Verweis-Endtag: Jede Grafik ist in einer eigenen Include-Datei. Die Grafik kann damit mit einem PHP-Befehl in den Quelltext eines HTML-Dokumentes eingelesen werden. Die Grafik, die sich in der Include-Datei befindet hat folgenden Code: <img src="...">. Um aus der Grafik eine Grafik mit Verweis zu machen, muss im Quelltext des HTML-Dokumentes folgendes gemacht werden: Vor der Include-Datei muss der Anfangstag <a href="..."> und nach der Include-Datei muss de Endtag des Verweises </a> angegeben werden. HTML: Grafik mit Verweis
4	Weitere Icons (Auf die Grafik klicken)
5	Websites

 

---

Siehe auch

Webdesign: Logos

Internet-Grundlagen: E-Mails, Emoticons & Smileys

HTML: Grafik mit Verweis

-

⇧ 1 Allgemein

• Der englische Ausdruck Icon (von griechisch: Bild, in deutschen Übersetzungen von Computerprogrammen meist als "Symbol" bezeichnet) bezeichnet im Computerbereich ein Piktogramm, das oft eine Datei oder ähnliches repräsentiert.

• Eine Analogie zu den Ikonen (welches die korrekte deutsche Übersetzung ist) ist möglich, da diese auch sinnbildliche Darstellungen sind.

• Wikipedia de Icon (Computer)
  Wikipedia en Icon (computing)
  Wikipedia fr  Icône (informatique)

• Artikel mit Grundregeln zur Icongestaltung
  doku.info de Dank Icons voll im Bilde

-

⇧ 2 Include-Datei mit Verweis-Endtag

a) Lupe b) Buch c) Weiter d) Schau

Prinzip einer Include-Datei mit Verweis-Endtag: Jede Grafik ist in einer eigenen Include-Datei in der die Grafik und der Endtag eines Verweises enthalten ist. Die Grafik kann damit mit einem PHP-Befehl in den Quelltext eines HTML-Dokumentes eingelesen werden. Im Quelltext muss vor dieser Include-Datei der Anfangs-Verweistag <a href=".."> eingegeben werden. Die Grafik, die sich in der Include-Datei befindet, hat folgenden Code: <img src="...">. Der Endtag des Verweises, der sich in der Include-Datei befindet hat folgenden Code: </a>.

-

↑ a) Lupe (Vergrössern)

Lupe - Grafik mit Verweis - in einer Include-Datei

1) Ablage einer Include-Datei auf dem Server

Include-Ordner = Ein Verzeichnis (Ordner) in dem die Include-Dateien abgelegt sind.

Include-Datei = Eine Datei in einem Include-Verzeichnis.

Include-Datei mit Verweis-Endtag: Grafik <img src="..."> und Endtag des Verweises </a>

<img src="<?php echo "$punkte";?>/grafiken/icon/lupe.png"
width="26" height="26" border="0" 
alt="Lupe (Icon)
24 x 24 Pixel"></a>      

2) Angabe im Quelltext

Anfangstag des Verweises: <a href="....">

Include-Datei: <?php include "$punkte/include/grafik/....php";?>
(in dieser Include-Datei befindet sich bereits der Verweis-Endtag)

<a href="#lupe">
<?php include "$punkte/include/grafik/lupe.php";?>

3) Anzeige im HTML-Dokument

Verwendung der Include-Datei mit Verweis-Endtag:

Diese Include-Datei wird in dieser Website normalerweise zur Vergrösserung eines Bildes verwendet.

Beispiel:

Andere Anwendungen

Andere Websites und auch Browser verwenden die Lupe auch als Icon zum Suchen.

HTML: Grafik mit Verweis

-

↑ b) Buch

Buch - Grafik mit Verweis - in einer Include-Datei

1) Eintrag in der Include-Datei

a) Eingabe der Grafik:
<img src="...">

b) Eingabe des End-Tags (des Links auf dessen Seite verwiesen wird):
</a>

<img src="<?php echo "$punkte";?>/grafiken/clipart/buch.png"
width="26" height="26" border="0" 
alt="Buch (Icon)
50 x 50 Pixel"></a>      

2) Eintrag im Quelltext

a) Im Quelltext muss zuerst der Link zum Dokument angegeben werden, das mit dem Symbol geöffnet werden soll.
<a href="....">
In diesem Beispiel ist dies:
<a href="buch">

b) Dann wird die Include-Datei mit dem Symbol im Quelltext angegeben.
<?php include "....php";?>
In diesem Beispiel ist das;
<?php include "$punkte/include/grafik/buch.php";?>
Bemerkung:
Die Einlesung der Punkte des Pfades der Include-Datei erfolgt in dieser Website mit einem PHP-Befehl, der den Pfad der internen Links automatisch einliest.

<a href="buch">
<?php include "$punkte/include/grafik/buch.php";?>

3) Anzeige im HTML-Dokument

Beim Klicken auf das Symbol wird dieses Beispiel angezeigt.

Buch - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/buch-orig.png"
width="256" height="256" border="0" 
alt="Buch (Icon)
256 x 256 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• IconArchive.com en book

-

↑ c) Weiter

Weiter - Grafik mit Verweis - in einer Include-Datei

1) Include-Datei

Grafik <img src="..."> und Endtag des Verweises </a>

<img src="<?php echo "$punkte";?>/grafiken/icon/weiter.png"
width="60" height="60" border="0" 
alt="Weiter (Icon)
128 x 128 Pixel"></a>        

2) HTML-Quelltext

Anfangstag des Verweises <a href="#weiter">

und Include-Datei <?php include "....php";?>

<a href="#weiter">
<?php include "$punkte/include/grafik/weiter.php";?>

3) Anzeige im HTML-Dokument

Weiter - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/weiter.png"
width="128" height="128" border="0" 
alt="Weiter (Icon)
128 x 128 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• IconArchive.com en arrow

-

↑ d) Schau

Schau - Grafik mit Verweis - in einer Include-Datei

1) Include-Datei

Grafik <img src="..."> und Endtag des Verweises </a>

<img src="<?php echo "$punkte";?>/grafiken/icon/schau.png"
width="30" height="30" border="0" 
alt="Schau (Icon)
128 x 128 Pixel"></a>        

2) HTML-Quelltext

Anfangstag des Verweises <a href="#schau">

und Include-Datei <?php include "....php";?>

<a href="#schau">
<?php include "$punkte/include/grafik/schau.php";?>

3) Anzeige im HTML-Dokument

Schau - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/schau.png"
width="128" height="128" border="0" 
alt="Schau (Icon)
128 x 128 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• IconArchive.com en arrow

-

⇧ 3 Include-Datei ohne Verweis-Endtag

a) New b) Neu c) Information d) Welt (Weltkugel) e) Frage f) Wichtig g) Link h) Daumen nach oben i) Daumen nach rechts j) Daumen nach unten k) Fenster l) Pfeil (nach rechts) m) Suchen (Feldstecher) n) Audio (Lautsprecher) o) Video p) Microsoft Word-Dokument q) Adobe PDF Dokument r) PowerPoint Präsentation s) Flash Player t) Brief (Post) u) E-Mail v) Telefon w) Karte x) Wechselkurs

Prinzip einer Include-Datei ohne Verweis-Endtag: Jede Grafik ist in einer eigenen Include-Datei. Die Grafik kann damit mit einem PHP-Befehl in den Quelltext eines HTML-Dokumentes eingelesen werden. Die Grafik, die sich in der Include-Datei befindet hat folgenden Code: <img src="...">. Um aus der Grafik eine Grafik mit Verweis zu machen, muss im Quelltext des HTML-Dokumentes folgendes gemacht werden: Vor der Include-Datei muss der Anfangstag <a href="..."> und nach der Include-Datei muss de Endtag des Verweises </a> angegeben werden. HTML: Grafik mit Verweis

-

↑ a) New

New - in einer Include-Datei (Grafik ohne Verweis )

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/new.jpg"
width="50" height="45" border="0" 
alt="New (Icon)
72 x 65 Pixel">      

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/new.php";?>

3) Anzeige im HTML-Dokument

New - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/new-orig.jpg"
width="150" height="134" border="0" 
alt="New (Icon)
448 x 400 Pixel">      

2) Anzeige im HTML-Dokument

(Verkleinert dargestellt mit 150 x 134 Pixel)

Herkunft:

-

↑ b) Neu

Neu - in einer Include-Datei (Grafik ohne Verweis )

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/neu.jpg"
width="45" height="45" border="0" 
alt="Neu (Icon)
72 x 72 Pixel">      

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/neu.php";?>

3) Anzeige im HTML-Dokument

New - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/neu.jpg"
width="72" height="72" border="0" 
alt="Neu (Icon)
72 x 72 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

-

↑ c) Information

Information - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/info.png"
width="50" height="50" border="0" 
alt="Information (Icon)
256 x 256 Pixel">        

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/info.php";?>

3) Anzeige im HTML-Dokument

Information - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/info.png"
width="256" height="256" border="0" 
alt="Information (Icon)
256 x 256">      

2) Anzeige im HTML-Dokument

Herkunft:

• IconArchive.com en info

-

↑ d) Welt (Weltkugel)

Weltkugel - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/welt.png"
width="45" height="49" border="0" 
alt="Welt (Icon)
552 x 598 Pixel">        

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/welt.php";?>

3) Anzeige im HTML-Dokument

Welt - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/welt.png"
width="552" height="598" border="0" 
alt="Welt (Icon)
552 x 598 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• ClipartPanda.com en Graphical User Interface Gallery

-

↑ e) Frage

Link - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/frage.png"
width="36" height="36" border="0" 
alt="Frage (Icon) 
51 x 51 Pixel">        

2) HTML-Quelltext

Include-Datei: <?php include "....php";?>

<?php include "$punkte/include/grafiken/frage.png";?>

3) Anzeige im HTML-Dokument

Bemerkung:

Im Vademecum wurde im Kapitel "Fragen" das Icon "Frage" mit einer Kopie der Grafik aus dem Vademecum-Grafik-Ordner und mit eingebautem Verweis verwendet.

Link - Original

Ist zu gross um hier wiedergegeben zu werden: wurde von 512x512 mit 100x100 wiedergegeben

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/frage_orig.png"
width="100" height="100" border="0" 
alt="Link (Icon)
512 x 512 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• flaticon.com de "Icon made by Pixel perfect from www.flaticon.com"

-

↑ f) Wichtig

Wichtig - Grafik mit Verweis - in einer Include-Datei

1) Include-Datei

Grafik <img src="..."> und Endtag des Verweises </a>

<img src="<?php echo "$punkte";?>/grafiken/icon/wichtig.jpg"
width="36" height="36" border="0" 
alt="Wichtig (Icon)

135 x 135 Pixel"></a>        

2) HTML-Quelltext

Anfangstag des Verweises <a href="#wichtig">

und Include-Datei <?php include "....php";?>

<a href="#wichtig">
<?php include "$punkte/include/grafik/wichtig.php";?>

3) Anzeige im HTML-Dokument

Wichtig - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/wichtig.jpg"
width="135" height="135" border="0" 
alt="Wichtig (Icon)
135 x 135 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• Google Bilder-Suche de Images: important

• Wikimedia de File:Ambox important.svg

-

↑ g) Link

Link - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/link.gif"
width="32" height="32" border="0" 
alt="Link (Icon) 
42 x 42 Pixel">        

2) HTML-Quelltext

Include-Datei: <?php include "....php";?>

<?php include "$punkte/include/grafik/link.php";?>

3) Anzeige im HTML-Dokument

Link - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/link.gif"
width="42" height="42" border="0" 
alt="Link (Icon)
42 x 42 Pixel">      

2) Anzeige im HTML-Dokument

-

↑ h) Daumen nach oben

Link - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/daumenoben.png"
width="30" height="30" border="0" 
alt="Daumen nach oben (Icon) 
50 x 50 Pixel">        

2) HTML-Quelltext

Include-Datei: <?php include "....php";?>

<?php include "$punkte/include/grafiken/daumenoben.png";?>

3) Anzeige im HTML-Dokument

Daumen nach oben - Original

Originalgrösse wurde verkleinert
Datei wurd von jpg auf png kopiert

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/daumenoben_orig.png"
width="50" height="50" border="0" 
alt="Daumen nach oben (Icon)
50 x 50 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• de Digital Marketing Weekly

-

↑ i) Daumen nach rechts

Daumen nach rechts - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/daumenrechts.png"
width="30" height="30" border="0" 
alt="Daumen nach rechts (Icon) 
50 x 50 Pixel">        

2) HTML-Quelltext

Include-Datei: <?php include "....php";?>

<?php include "$punkte/include/grafiken/daumenrechts.png";?>

3) Anzeige im HTML-Dokument

Link - Original

Originalgrösse wurde von 330x330 Pixel verkleinert
Datei wurd von jpg auf png kopiert

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/daumenrechts.png"
width="50" height="50" border="0" 
alt="Daumen nach rechts (Icon)
50 x 50 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• de Digital Marketing Weekly

-

↑ j) Daumen nach unten

Daumen nach unten - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/daumenunten.png"
width="30" height="30" border="0" 
alt="Daumen nach unten (Icon) 
50 x 50 Pixel">        

2) HTML-Quelltext

Include-Datei: <?php include "....php";?>

<?php include "$punkte/include/grafiken/daumenunten.png";?>

3) Anzeige im HTML-Dokument

Link - Original

Originalgrösse wurde von 330x330 Pixel verkleinert
Datei wurd von jpg auf png kopiert

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/daumenunten.png"
width="50" height="50" border="0" 
alt="Daumen nach unten (Icon)
50 x 50 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• de Digital Marketing Weekly

44444444444444444444444444444

-

↑ k) Fenster

Fenster - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/fenster.png"
width="16" height="16" border="0" 
alt="Fenster (Icon) 
100 x 100 Pixel">        

2) HTML-Quelltext

Include-Datei: <?php include "....php";?>

<?php include "$punkte/include/grafik/fenster.php";?>

3) Anzeige im HTML-Dokument

Fenster - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/fenster.png"
width="100" height="100" border="0" 
alt="Fenster (Icon)
100 x 100 Pixel">      

2) Anzeige im HTML-Dokument

Anwendung und Herkunft: Die Datei öffnet in einem neuen Fenster

• User Experience Stack Exchange
  en Should we ask browsers to open a link in a new window/tab?

-

↑ l) Pfeil (nach rechts)

Pfeil - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/pfeil.png"
width="26" height="26" border="0" 
alt="Pfeil nach rechts (Icon)
120 x 120 Pixel">    

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/pfeil.php";?>

3) Anzeige im HTML-Dokument

Pfeil - Originalgrafik

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/pfeil.png"
width="120" height="120" border="0" 
alt="Pfeil rechts (Icon)
120 x 120 Pixel">

2) Anzeige im HTML-Dokument

Herkunft:

• Wikimedia de Crystal Clear
  Wikimedia de Crystal Clear action loopnone.png
  Wikimedia de Crystal Clear action icons

-

↑ m) Suchen (Feldstecher)

Suchen - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei: Grafik <img src="...">

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/suchen.gif"
width="26" height="26" border="0" 
alt="Suchen (Feldstecher Icon)
24 x 24 Pixel">    

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/suchen.php";?>

3) Anzeige im HTML-Dokument

Suchen (Feldstecher) - Originalgrafik

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/suchen.png"
width="24" height="24" border="0" 
alt="Suchen (Feldstecher Icon)
24 x 24 Pixel">

2) Anzeige im HTML-Dokument

Herkunft:

• IconExperience de New: Icon Search

-

↑ n) Audio (Lautsprecher)

Audio - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/audio.jpg"
width="30" height="30" border="0" 
alt="Audio (Lautsprecher Icon)
50 x 50 Pixel">    

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/audio.php";?>

3) Anzeige im HTML-Dokument

Audio (Lautsprecher) - Originalgrafik

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/audio.jpg"
width="50" height="50" border="0" 
alt="Audio (Lautsprecher Icon)
50 x 50 Pixel">

2) Anzeige im HTML-Dokument

Herkunft:

• Wikimedia de Category:Exquisite icons

-

↑ o) Video

Video - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/video.png"
width="24" height="22" border="0" 
alt="Video (Icon)
50 x 50 Pixel">    

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/video.php";?>

3) Anzeige im HTML-Dokument

Video - Originalgrafik

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/video-orig.png"
width="128" height="128" border="0" 
alt="Video (Icon)
128 x 128 Pixel">

2) Anzeige im HTML-Dokument

Herkunft:

• Iconfinder de video

-

↑ p) Microsoft Word-Dokument

Word - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/word.gif"
width="26" height="26" border="0" 
alt="Microsoft Word Dokument (Icon)
32 x 32 Pixel">    

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/video.php";?>

3) Anzeige im HTML-Dokument

Word - Originalgrafik

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/word.gif"
width="32" height="32" border="0" 
alt="Microsoft Word Dokument (Icon)
32 x 32 Pixel">

2) Anzeige im HTML-Dokument

Herkunft von Word-Icons:

• Google Bilder-Suche de Suche: microsoft word logo

-

↑ q) Adobe PDF Dokument

Adobe - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/adobe.gif"
width="26" height="26" border="0" 
alt="Adobe PDF Dokument (Icon)
32 x 32 Pixel">    

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/adobe.php";?>

3) Anzeige im HTML-Dokument

Adobe - Originalgrafik

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/adobe.gif"
width="32" height="32" border="0" 
alt="Adobe PDF Dokument (Icon)
32 x 32 Pixel">

2) Anzeige im HTML-Dokument

Herkunft:

• Google Bilder de adobe logo

-

↑ r) PowerPoint Präsentation

PowerPoint - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/powerpoint.gif"
width="26" height="26" border="0" 
alt="PowerPoint Präsentation (Icon)
16 x 16 Pixel">    

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/powerpoint.php";?>

3) Anzeige im HTML-Dokument

PowerPoint - Originalgrafik

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/powerpoint.gif"
width="26" height="26" border="0" 
alt="PowerPoint Präsentation (Icon)
16 x 16 Pixel">

2) Anzeige im HTML-Dokument

-

↑ s) Flash Player

Flash Player - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/flash.png"
width="26" height="26" border="0" 
alt="Flash Player (Icon)
32 x 32 Pixel">    

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/flash.php";?>

3) Anzeige im HTML-Dokument

Flash Player - Originalgrafik

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/flash.png"
width="32" height="32" border="0" 
alt="Flash Player (Icon)
32 x 32 Pixel">

2) Anzeige im HTML-Dokument

Herkunft:

• Wishingline en Adobe Flash Player Icon

-

↑ t) Brief (Post)

Brief (Post) - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/brief.png"
width="50" height="50" border="0" 
alt="Brief (Post Icon)
128 x 128 Pixel">       

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/brief.php";?>

3) Anzeige im HTML-Dokument

Brief - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/brief.png"
width="128 height="128" border="0" 
alt="Brief (Post Icon)
128 x 128 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• Wikimedia de Category:Exquisite icons

-

↑ u) E-Mail

E-Mail - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

<img src="<?php echo "$punkte";?>/grafiken/icon/email.jpg"
width="50" height="50" border="0" 
alt="E-Mail (Icon)
128 x 128 Pixel">        

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

<?php include "$punkte/include/grafik/email.php";?>

3) Anzeige im HTML-Dokument

E-Mail - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/email.jpg"
width="128" height="128" border="0" 
alt="E-Mail (Icon)
128 x 128 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• Google Bilder de E-Mail

-

↑ v) Telefon

Telefon - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

a) Gross

<img src="<?php echo "$punkte";?>/grafiken/icon/telefon.jpg"
width="50" height="50" border="0" 
alt="Telefon (Icon)
85 x 85 Pixel">        

b) Klein

<img src="<?php echo "$punkte";?>/grafiken/icon/telefon.jpg"
width="30" height="30" border="0" 
alt="Telefon klein (Icon)
85 x 85 Pixel">        

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

a) Gross

<?php include "$punkte/include/grafik/telefon.php";?>

b) Klein

<?php include "$punkte/include/grafik/telefon_klein.php";?>

3) Anzeige im HTML-Dokument

a) Gross

b) Klein

Telefon - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/telefon.jpg"
width="85" height="85" border="0" 
alt="Telefon (icon)
85 x 85 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• Google Icons de telefon icon

-

↑ w) Karten (Landkarten, Stadtpläne)

Karten - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

a) Gross

<img src="<?php echo "$punkte";?>/grafiken/icon/karte.png"
width="50" height="50" border="0" 
alt="Karte (Icon)
32 x 32 Pixel">        

b) Klein

<img src="<?php echo "$punkte";?>/grafiken/icon/karte.png"
width="30" height="30" border="0" 
alt="Karte klein (Icon)
32 x 32 Pixel">        

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

a) Gross

<?php include "$punkte/include/grafik/karte.php";?>

b) Klein

<?php include "$punkte/include/grafik/karte_klein.php";?>

3) Anzeige im HTML-Dokument

a) Gross

b) Klein

Karten - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/karte.png"
width="32" height="32" border="0" 
alt="Karte (Icon)
32 x 32 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• Guidebookgallery en Graphical User Interface Gallery

-

↑ x) Wechselkurse

Wechselkurse - in einer Include-Datei (Grafik ohne Verweis)

1) Include-Datei

Grafik <img src="...">

a) Gross

<img src="<?php echo "$punkte";?>/grafiken/icon/kurs.png"
width="50" height="50" border="0" 
alt="Kurs (Icon)
120 x 120 Pixel">        

b) Klein

<img src="<?php echo "$punkte";?>/grafiken/icon/kurs.png"
width="30" height="30" border="0" 
alt="Kurs klein (Icon)
120 x 120 Pixel">        

2) HTML-Quelltext

Include-Datei <?php include "....php";?>

a) Gross

<?php include "$punkte/include/grafik/kurs.php";?>

b) Klein

<?php include "$punkte/include/grafik/kurs_klein.php";?>

3) Anzeige im HTML-Dokument

a) Gross

b) Klein

Wechselkurse - Original

1) Eintrag im Quelltext

<img src="<?php echo "$punkte";?>/grafiken/icon/calculator.svg.png"
width="120" height="120" border="0" 
alt="Calculator (Icon)
120 x 120 Pixel">      

2) Anzeige im HTML-Dokument

Herkunft:

• Wikimedia en Category:Calculator icons

-

⇧ 4 Weitere Icons

• a) Lupe (Vergrössern)
• b) Schloss (Zugangssperre)
• c) Baustelle (In Bearbeitung)
• d) Telefon Apparat
• e) Bleistift (z. B. Hilfe oder Erklärung)
• f) FAQ (Frequently asked questions)

-

↑ a) Lupe: Text vergrössern, verkleinern, Originalgrösse herstellen.

<img src="<?php echo "$punkte";?>/grafiken/icon/lupeplus.png"
width="32" height="32" border="0" 
alt="Lupe Plus (Icon)
48 x 48 Pixel">      

<img src="<?php echo "$punkte";?>/grafiken/icon/lupeminus.png"
width="32" height="32" border="0" 
alt="Lupe Minus (Icon)
48 x 48 Pixel">      

-

↑ b) Schloss: Zugangssperre

<img src="<?php echo "$punkte";?>/grafiken/icon/schlosszu.png"
width="48" height="48" border="0" 
alt="Schloss zu (Icon)
120 x 120 Pixel">      

<img src="<?php echo "$punkte";?>/grafiken/icon/schlossoffen.png"
width="48" height="48" border="0" 
alt="Schloss offen (Icon)
120 x 120 Pixel">      

<img src="<?php echo "$punkte";?>/grafiken/icon/passwort.png"
width="48" height="48" border="0" 
alt="Passwort (Icon)
120 x 120 Pixel">      

<img src="<?php echo "$punkte";?>/grafiken/icon/bildschirmsperre.png"
width="48" height="48" border="0" 
alt="Bildsschirmsperre (Icon)
120 x 120 Pixel">      

Herkunft:

• Wikimedia en Category:Vista icons

• Wikimedia en Media in category "Tango project"

-

↑ c) Baustelle

<img src="<?php echo "$punkte";?>/grafiken/icon/baustelle.png"
width="48" height="48" border="0" 
alt="Icon Baustelle (Icon)
120 x 120 Pixel">      

• Wikimedia en Category:Vista icons

-

↑ d) Telefon Apparat

<mg src="<?php echo "$punkte";?>/grafiken/icon/telefon_app.gif"
width="34" height="29" border="0" 
alt="Telefon Apparat (Icon)
34 x 29 Pixel">      

Herkunft:

• SELFHTML de Symbole

⇒ Siehe auch Smileys:
Telefon-Smiley

-

↑ e) Bleistift (z. B. Hilfe oder Erklärung)

<img src="<?php echo "$punkte";?>/grafiken/icon/bleistift.gif"
width="51" height="43" border="0" 
alt="Bleistift (Icon)
51 x 43 Pixel">      

-

↑ f) FAQ (Frequently asked questions)

<img src="<?php echo "$punkte";?>/grafiken/icon/faq.gif"
width="38" height="38" border="0" 
alt="FAQ (Icon)
38 x 38 Pixel">      

-

⇧ 5 Websites

• Wikipedia de Icon (Computer)
  Wikipedia en Icon (computing)
  Wikipedia fr  Icône (informatique)

• Wikimedia: Category:Icons by subject

• Wikimedia: Crystal Clear

• Wikimedia en Category:Vista icons

• Wikimedia en Category:Exquisite icons

• guidebookgallery.org en Icons from various interfaces: Components

• drweb.de de Symbole, Buttons und Icons zum Download

• Iconfinder en video

• freewebsitebuttons.com en Buttons

• IconArchive.com en info
  IconArchive.com en arrow
  IconArchive.com en book
  IconArchive.com en SoftDimension Icons by Benjigarner

• ClipartPanda.com en Graphical User Interface Gallery

• IconExperience en New: Icon Search

↑