HTML-Tutorial: Die Grundlagen (2)
Bilder und Links
In dieser Lektion erfahren Sie, wie Sie Bilder in Ihre Homepage einbauen können und wie Links zu anderen Seiten funktionieren.
Bilder in einer Internetseite
Reine Textseiten sind langweilig - "Bleiwüste" eben. Es gibt bei den heutigen Geschwindigkeiten der Übertragung im Internet keinen Grund mehr, warum man dort auf Bilder verzichten sollte, wo sie Sinn machen.
Schauen wir uns also an, wie man ein Bild in den HTML-Code integriert:
<img src="pics/nav-home.png">
img src ist zusammen gezogen aus image source und kündigt an, dass die Quelldatei genannt wird, die das anzuzeigende Bild enthält. Im obigen Beispiel ist das die Datei nav-home.png, die im Unterordner pics zu finden ist. Das ist der HTML-Code für die Einbindung des Home-Buttons, den Sie oben links auf dieser Seite hier sehen.
Bilder befinden sich nicht in der HTML-Seite. Dort steht nur der Verweis, wo das Bild zu finden ist. Das hat Vor- und Nachteile. Ein Vorteil ist, dass die HTML-Datei selbst klein bleibt und das selbe Bild für mehrere HTML-Seiten verwendet werden kann, ohne dass es deswegen mehrfach vorliegen muss. Der Nachteil ist aber, dass man selbst dafür sorgen muss, dass der Browser auch wirklich am angegebenen Ort das Bild findet, das er hier einbinden soll.
Der Browser kann nicht x-beliebige Dateiformate als Bild auf der Internetseite darstellen. Der bei weitem größte Anteil von Bildern im Internet sind jpg-Dateien. Er kann aber auch gif-Dateien und png-Dateien problemlos darstellen. Andere grafische Dateiformate wie tiff, bmp, psd, cdr, eps usw. kann der Browser nicht anzeigen.
Schreibweise beachten für das Internet
Weil HTML-Seiten in der Regel ja für das Internet verwendet werden, muss man auf ein paar Besonderheiten achten (gilt generell - also nicht nur für die Namen von Bilddateien):
- Groß- und Kleinschreibung wird unterschieden!
- Verwenden Sie nur die Zeichen von a bis z und A bis Z, 0 bis 9, das Minuszeichen - und den Unterstrich _ (also keine Sonderzeichen wie ä, ö, ü oder ß)
- Den Punkt . sollten Sie nur zur Abtrennung der Datei-Erweiterung verwenden
- Verwenden Sie keine Leerzeichen
Bilder müssen richtig aufbereitet sein
Man ist heute gewöhnt, dass man Bilder fast jeder Größe problemlos auf dem Bildschirm anschauen kann. Im Internet sieht das etwas anders aus. Man kann sich nicht drauf verlassen, dass Sie einfach automatisch auf die richtige Größe skaliert wird.
"Größe ungefähr gleich Pixel"
Angaben wie Auflösung oder dpi spielen für den Browser keine Rolle bzw. er ignoriert sie einfach. Damit Ihr Bild in der gewünschten Größe erscheint, müssen Sie das Bild mit einem Bildbearbeitungsprogramm so aufbereiten, dass es für die gewünschte Größe der Darstellung eine angemessene Anzahl Pixel mitbringt.
Dass ich das alles etwas schwammig ausdrücke, hat seinen Grund: Wie groß ein Bild auf Ihrer Homepage bei einem Besucher Ihrer Seiten wirklich erscheinen wird hängt davon ab, welche Auflösung bei dem eingestellt ist und natürlich auch, womit er Ihre Seite anschaut (mit dem iPhone sieht's bestimmt anders aus als wie mit einem Desktop-PC). Heißt konkret, dass Sie nur begrenzten Einfluss haben.
Welche Bildgröße man wählt ist natürlich Geschmackssache. Ich mag schon eine gewisse Größe haben, finde es aber extrem lästig, wenn Bilder so groß sind, dass ich ständig scrollen muss. Weil nicht jeder gleich einen 30-Zoll-Monitor hat, schadet es nicht, wenn man sich am unteren Ende der Skala orientiert. Meine Bildgröße, über die ich heute (also im Jahr 2011) nur im Ausnahmefall raus gehe, sind 1000 Pixel in der Breite und 700 Pixel in der Höhe.
Bild und Text
Wie ja hier auf dieser Seite zu sehen ist, kann man Bilder und Text tatsächlich einigermaßen frei zueinander anordnen. Mit dem "ganz konventionellen" HTML, das wir bisher nutzen, geht das aber nur sehr eingeschränkt und mühsam. Wenn wir uns in einer späteren Lektion mit CSS befassen (eine zum konventionellen HTML), werden wir die Möglichkeiten im Detail kennen lernen.
Wenn Sie momentan aber schon mit Bildern experimentieren wollen, können Sie ein Bild vom Text getrennt halten, indem Sie das img-Tag einfach in einen Absatz einschließen, also so:
<p><img src="pics/nav-home.png"></p>
Links
Ohne Verlinkung zu anderen Seiten wäre das Internet niemals das geworden, was es heute ist. Bei der Verlinkung sind zwei Möglichkeiten zu unterscheiden:
- interne Links
- externe Links
Mit internen Links meine ich Verweise, die auf Dateien zeigen, die zur selben Internetpräsenz gehören (im Fall hier ist das kurspool.de). Solche Verweise sind viel häufiger als Sie im ersten Moment vielleicht denken. Sie können auf Bilddateien zeigen, wie wir schon gesehen haben, aber natürlich auch auf andere HTML-Dateien. Ohne diese Verknüpfungen könnte man ja sonst gar nicht auf eine andere Seite gelangen, also auch nicht blättern.
Mit externen Links meine ich verweise ins Internet weg von der eigenen Domain. Diese Verweise sind möglich, ohne dass der so verlinkte etwas davon merkt und auch ohne dass er sich einfach dagegen wehren kann. Darauf beruht ja auch die grundsätzliche Idee des Internets. Man kann also auch Bilder auf diese Weise "klauen" und in der eigenen Seite erscheinen lassen. - Dass das natürlich rechtlich ein Problem sein kann, ist etwas anderes, das ich hier aber nicht diskutieren kann.
<img src="http://keinerweisswo.de/irgendeinbild.jpg">
Einen externen Link erkennt man daran, dass bei der Adresse ein "http://keinerweisswo.de/" vorne steht, was soviel heißt wie: Gehe erst mal ins Internet und suche dort,,,.
Da sich sonst ein externer Link kaum von einem internen unterscheidet, wird der User normalerweise nicht bemerken, welche Daten von der gerade besuchten Internetseite kommen und welche von irgendwo anders auf der Welt. Das bedeutet, dass heute zu Zeiten des schnellen Internets kaum mehr einer merken wird, ob er "interne" oder "externe" Daten geliefert bekommt.
Links zu einer anderen HTML-Seite
Sie wissen bereits, dass intern und extern eine Kategorie sind, die in der Praxis kaum mehr auffällt. Wir haben uns bisher nich nicht damit befasst, wie das Tag für den Link zu einer anderen HTML-Seite aussieht:
<a href="http://www.google.de">Suchmaschine aufrufen</a>
Wo das "a" herkommt, weiß ich nicht, aber das "href" steht für Hypertext reference, also den Bezug, auf den hier verwiesen wird.
Die Logik ist bei Verwendung des a-Tags die gleiche wie bei anderen HTML-Tags: Was zwischen öffnendem und schließendem Tag steht, bekommt die Eigenschaft zugewisen, die das Tag eben mitbringt. Im Beispiel oben bedeutet das, dass der Text Suchmaschine aufrufen zu einem Link wird, der beim Draufklicken die Google-Seite lädt. Und statt diesem Text könnte zwischen öffnendem und schließendem a-Tag natürlich auch natürlich auch ein img-Tag stehen. Dann wäre das zugehörige Bild an dieser Stelle der Link. - So funktionieren oben auf dieser Seite hier auch die Buttons der Navigation:
<a href="index.php"><img src="pics/nav-home.png"></a>
Link zu einer Email-Adresse
Wenn Sie auf Ihrer Seite eine anklickbare Email haben wollen, brauchen Sie dazu ebenfalls das a-Tag, aber mit einer kleinen Ergänzung. Schauen Sie mal hier:
<a href="mailto:info@kurspool.de">Schreiben Sie mir!</a>
Das mailto: gefolgt direkt von der Email-Adresse teilt dem Browser mit, dass dieser Link keine neue Seite laden sondern das Mailprogramm starten soll. Probieren Sie es hier aus: