5.2.7 Icons
| 1 | Allgemein | |
| 2 |
Icons mit Verweis-Endtag in Include-Datei
Include-Grafiken als Verweis aus andern Seiten: (Auf die Grafik klicken) |
|
| 3 |
Icons ohne Verweis-Endtag in Include-Datei
Include-Grafiken aus andern Seiten: (Auf die Grafik klicken) |
|
| 4 | Weitere Icons
(Auf die Grafik klicken) | |
| 5 | Quellen | |
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)
en Icon (computing)
fr Icône (informatique)
-
Artikel mit Grundregeln zur Icongestaltung
doku.info de Dank Icons voll im Bilde
2 Icons mit Verweis-Endtag in Include-Datei
Prinzip:
-
Jede Grafik ist als Verweis-Grafik mit dem
Endtag des Verweises
</a>in einer Include-Datei. - Diese Grafik kann nur als Grafik-Verweisdatei verwendet werden.
-
Im Quelltext muss vor der Include-Datei der Anfangs-Verweistag
<a href="..">und kann fakultativ ein Text eingegeben werden. - Nach der Include-Datei wird im Quelltext kein Verweis-Endtag eingegeben, da dieser schon in der Include-Datei vorhanden ist.
a) Lupe (Vergrössern)
Lupe - 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/lupe.png" width="24" height="24" border="0" alt="Lupe 24 x 24 Pixel"></a>
2) HTML-Quelltext: Anfangstag des Verweises
<a href="....">
und Include-Datei <?php include "....php";?>
<a href="#lupe"> <?php include "$punkte/include/grafik/lupe.php";?>
3) Anzeige im HTML-Dokument
Herkunft:
- drweb.de: Gratis Icons und Buttons
Verwendung in dieser Website:
Wird in dieser Website mit einer Include-Datei mit Verweis (Link)
zur Vergrösserung eines Bildes verwendet.
Andere Verwendungen:
Andere Websites und auch Browser verwenden die Lupe auch
als Icon zum Suchen.
Beispiel:
b) New
New - 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/new.jpg" width="48" height="43" border="0" alt="New verkleinert von 448 x 400 Pixel auf 72 x 66 Pixel"></a>
2) HTML-Quelltext: Anfangstag des Verweises
<a href="....">
und Include-Datei <?php include "....php";?>
<a href="new"> <?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="100" height="89" border="0" alt="New 448 x 400 Pixel">
2) Anzeige im HTML-Dokument:
Herkunft:
- Google Bilder-Suche: Images: New
c) 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 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 135 x 135 Pixel">
2) Anzeige im HTML-Dokument:
Herkunft:
-
Google Bilder-Suche:
Images: important
Detail: Important
3 Icons ohne Verweis-Endtag in Include-Datei
- a) Pfeil (nach rechts)
- b) Suchen (Feldstecher)
- c) Ton (Lautsprecher)
- d) Video
- e) Microsoft Word-Dokument (DOC)
- f) Adobe PDF Dokument
- g) PowerPoint Präsentation
- h) Flash Player
- i) Brief (Post)
- j) E-Mail
- k) Telefon
- l) Karte
- m) Wechselkurs
Prinzip:
- Jede Grafik ist in einer eigenen Include-Datei.
-
Um aus der Grafik eine Grafik mit Verweis zu machen, muss im
Quelltest vor der Include-Datei der
Anfangstag
<a href="...">und nach der Include-Datei der Endtag des Verweises</a>angegeben werden.
a) 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="22" height="22" border="0" alt="Pfeil nach rechts 32 x 32 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="../../grafiken/icon/pfeil.png" width="60" height="60" border="0" alt="Pfeil rechts 120 x 120 Pixel">
2) Anzeige im HTML-Dokument
Herkunft:
b) Suchen (Feldstecher)
Suchen - in einer Include-Datei (Grafik ohne Verweis)
1) Include-Datei:
Grafik <img src="...">
<img src="<?php echo "$punkte";?>/grafiken/icon/suchen.gif" width="20" height="20" border="0" alt="Feldstechern (Suchen) 24 x 24 Pixel">
2) HTML-Quelltext: Include-Datei <?php include "....php";?>
<?php include "$punkte/include/grafik/suchen.php";?>
3) Anzeige im HTML-Dokument
Sucheb (Feldstecher) - Originalgrafik
1) Eintrag im Quelltext
<img src="../../grafiken/icon/suchen.png" width="24" height="24" border="0" alt="Feldstecher (Suchen) 24 x 24 Pixel">
2) Anzeige im HTML-Dokument
Herkunft:
- IconExperience: New: Icon Search
c) Ton (Lautsprecher)
Ton - in einer Include-Datei (Grafik ohne Verweis)
1) Include-Datei:
Grafik <img src="...">
<img src="<?php echo "$punkte";?>/grafiken/icon/ton.jpg" width="22" height="22" border="0" alt="Ton (Lautsprecher) 50 x 50 Pixel">
2) HTML-Quelltext: Include-Datei <?php include "....php";?>
<?php include "$punkte/include/grafik/ton.php";?>
3) Anzeige im HTML-Dokument
Ton (Lautsprecher) - Originalgrafik
1) Eintrag im Quelltext
<img src="../../grafiken/icon/ton.jpg" width="50" height="50" border="0" alt="Ton (Lautsprecher) 50 x 50 Pixel">
2) Anzeige im HTML-Dokument
Herkunft:
- Wikimedia: Category:Exquisite icons
- Google Bilder-Suche: Suche: lautsprecher
d) Video
Video - in einer Include-Datei (Grafik ohne Verweis)
1) Include-Datei:
Grafik <img src="...">
<img src="<?php echo "$punkte";?>/grafiken/icon/video.jpg" width="23" height="22" border="0" alt="Video-Icon 35 x 26 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="../../grafiken/icon/video.jpg" width="35" height="26" border="0" alt="Video-Icon 35 x 26 Pixel">
2) Anzeige im HTML-Dokument
Herkunft:
- Google Bilder-Suche: Suche: video icon
e) Microsoft Word-Dokument (DOC)
Word - in einer Include-Datei (Grafik ohne Verweis)
1) Include-Datei:
Grafik <img src="...">
<img src="<?php echo "$punkte";?>/grafiken/icon/word.gif" width="22" height="22" border="0" alt="Microsoft Word Dokument (DOC) 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="../../grafiken/icon/word.gif" width="32" height="32" border="0" alt="Microsoft Word Dokument (DOC) 32 x 32 Pixel">
2) Anzeige im HTML-Dokument
Herkunft von Word-Icons:
- Google Bilder-Suche: Suche: microsoft word logo
f) 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="22" height="22" border="0" alt="Adobe Dokument (PDF) 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="../../grafiken/icon/adobe.gif" width="32" height="32" border="0" alt="Adobe Dokument (PDF) 32 x 32 Pixel">
2) Anzeige im HTML-Dokument
Herkunft:
g) PowerPoint Dokument
PowerPoint - in einer Include-Datei (Grafik ohne Verweis)
1) Include-Datei:
Grafik <img src="...">
<img src="<?php echo "$punkte";?>/grafiken/icon/powerpoint.gif" width="22" height="22" border="0" alt="PowerPoint Dokument 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="../../grafiken/icon/powerpoint.gif" width="16" height="16" border="0" alt="PowerPoint Dokument 16 x 16 Pixel">
2) Anzeige im HTML-Dokument
Herkunft:
- Warwick: Icons for use in SiteBuilder
h) 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="22" height="22" border="0" alt="Flash Player 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="../../grafiken/icon/flash.png" width="32" height="32" border="0" alt="Flash Player 32 x 32 Pixel">
2) Anzeige im HTML-Dokument
Herkunft:
- Wishingline: Adobe Flash Player Icon
i) 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) 128 x 128 Pixel">
2) HTML-Quelltext: Include-Datei <?php include "....php";?>
<?php include "$punkte/include/grafik/brief.php";?>
3) Anzeige im HTML-Dokument
Wichtig - Original
1) Eintrag im Quelltext:
<img src="../../grafiken/icon/brief.png" width="128 height="128" border="0" alt="Brief (Post) 128 x 128 Pixel">
2) Anzeige im HTML-Dokument:
Herkunft:
- Wikimedia: Category:Exquisite icons
j) 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 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="../../grafiken/icon/email.jpg" width="128" height="128" border="0" alt="E-Mail 128 x 128 Pixel">
2) Anzeige im HTML-Dokument:
Herkunft:
- Google Bilder: E-Mail
k) Telefon
Telefon - in einer Include-Datei (Grafik ohne Verweis)
1) Include-Datei:
Grafik <img src="...">
<img src="<?php echo "$punkte";?>/grafiken/icon/telefon.jpg" width="45" height="45" border="0" alt="Telefon 85 x 85 Pixel">
2) HTML-Quelltext: Include-Datei <?php include "....php";?>
<?php include "$punkte/include/grafik/telefon.php";?>
3) Anzeige im HTML-Dokument
Telefon - Original
1) Eintrag im Quelltext:
<img src="../../grafiken/icon/telefon.jpg" width="85" height="85" border="0" alt="Telefon 85 x 85 Pixel">
2) Anzeige im HTML-Dokument:
Herkunft:
- Google Icons: telefon icon
m) Karten (Landkarten, Stadtpläne)
Karten - in einer Include-Datei (Grafik ohne Verweis)
1) Include-Datei:
Grafik <img src="...">
<img src="../../grafiken/icon/karte.png" width="50" height="50" border="0" alt="Karte 32 x 32 Pixel">
2) HTML-Quelltext: Include-Datei <?php include "....php";?>
<?php include "$punkte/include/grafik/karte.php";?>
3) Anzeige im HTML-Dokument
Karten - Original
1) Eintrag im Quelltext:
<img src="<?php echo "$punkte";?>/grafiken/icon/karte.png" width="32" height="32" border="0" alt="Karte 32 x 32 Pixel">
2) Anzeige im HTML-Dokument:
Herkunft:
- Guidebookgallery: Graphical User Interface Gallery
n) Wechselkurse
Wechselkurse - in einer Include-Datei (Grafik ohne Verweis)
1) Include-Datei:
Grafik <img src="...">
<img src="<?php echo "$punkte";?>/grafiken/icon/calculator.svg.png" width="50" height="50" border="0" alt="Calculator 120 x 120 Pixel">
2) HTML-Quelltext: Include-Datei <?php include "....php";?>
<?php include "$punkte/include/grafik/kurs.php";?>
3) Anzeige im HTML-Dokument
E-Mail - Original
1) Eintrag im Quelltext:
<img src="../../grafiken/icon/calculator.svg.png" width="120" height="120" border="0" alt="Calculator 120 x 120 Pixel">
2) Anzeige im HTML-Dokument:
Herkunft:
- Wikimedia: 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)
- g)
Link (Verweise)
a) Lupe: Text vergrössern, verkleinern, Originalgrösse herstellen.
<img src="../../grafiken/icon/lupeplus.png" width="32" height="32" border="0" alt="Lupe Plus 48 x 48 Pixel">
<img src="../../grafiken/icon/lupeminus.png" width="32" height="32" border="0" alt="Lupe Minus 48 x 48 Pixel">
<img src="../../grafiken/icon/lupeoriginal.png" width="32" height="32" border="0" alt="Lupe Original 48 x 48 Pixel">
- Wikimedia: Category:GNOME Desktop icon theme
b) Schloss: Zugangssperre
<img src="../../grafiken/icon/schlosszu.png" width="48" height="48" border="0" alt="Schloss zu 120 x 120 Pixel">
<img src="../../grafiken/icon/schlossoffen.png" width="48" height="48" border="0" alt="Schloss offen 120 x 120 Pixel">
<img src="../../grafiken/icon/passwort.png" width="48" height="48" border="0" alt="Passwort 120 x 120 Pixel">
<img src="../../grafiken/icon/bildschirmsperre.png" width="48" height="48" border="0" alt="Bildsschirmsperre 120 x 120 Pixel">
Herkunft:
- Wikimedia: Media in category "Tango project"
- Wikimedia: Category:Vista icons
- Wikimedia: Media in category "Tango project"
c) Baustelle
<img src="../../grafiken/icon/baustelle.png" width="48" height="48" border="0" alt="Icon Baustelle 120 x 120 Pixel">
- Wikimedia: Category:Vista icons
d) Telefon Apparat
<mg src="../../grafiken/icon/telefon_app.gif" width="34" height="29" border="0" alt="Telefon Apparat 34 x 29 Pixel">
Herkunft:
- SELFHTML: Symbole
⇒ Siehe auch Smileys:
Telefon-Smiley 
e) Bleistift (z. B. Hilfe oder Erklärung)
<img src="../../grafiken/icon/bleistift.gif" width="51" height="43" border="0" alt="Bleistift 51 x 43 Pixel">
- neukleid.com: Buttons
f) FAQ (Frequently asked questions)
<img src="../../grafiken/icon/faq.gif" width="38" height="38" border="0" alt="FAQ 38 x 38 Pixel">
- neukleid.com: Buttons
g) Link (Verweise)
<img src="../../grafiken/icon/link.gif" width="42" height="42" border="0" alt="Link 42 x 42 Pixel>
- neukleid.com: Buttons
5 Quellen
- Wikimedia: Category:Icons
- Wikimedia: Category:Icons themes
- Wikimedia: Category:Icons by subject
- Wikimedia: Icons from the Crystal Clear
- guidebookgallery.org: Icons from various interfaces: Components
- drweb.de: Dr. Web Weblog - Teil 1
- drweb.de: Webgrafik: Icons zum Download
- drweb.de: Gratis Icons und Buttons - Teil 2
- drweb.de: Gratis Icons und Buttons - Teil 3
- drweb.de: Symbole, Buttons und Icons zum Download
- freewebsitebuttons.com: Buttons
- IconArchive: SoftDimension Icons by Benjigarner
- Warwick: Icons for use in SiteBuilder