In diesem Kapitel lernst du, wie man mit HTML-Marken Bilder einfügt, generell mit Attributen Wertzuweisungen vornimmt, die Ausrichtung zum Text steuert und einen Rand um ein Bild erzeugt
Bild einfügen | Die Quellenangabe | Alternativer Text & Größenangabe | Ausrichtung zum Text | Rahmen und RandabständeIm letzten Kapitel haben uns damit beschäftigt, vorgegeben Text mit Überschriften, Absätzen und Listen zu gliedern, und einzelne Textpassagen durch Marken besonders hervorzuheben.
Zuest öffnen wir wieder unsere Beispieldatei , die wir das letzte Mal mit Textmarken so schön verziert haben, desweiteren ein Bild vom Schulportal der Kapellenschule, das wir in unser Dokument einfügen wollen. Erstelle dazu eine Kopie des Bildes auf dem Schreibtisch. Wir suchen uns nun eine schöne Stelle im Quelltext des Dokuments aus, an der wir das Bild zeigen wollen. Nach dem ersten Absatz könnten wir es mal ausprobieren...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Schulprofil der Kapellenhauptschule</title>
</head>
<body>
<h1>Schulprofil der Kapellenhauptschule - Entwicklung einer
individuellen Schulhauskultur</h1>
<p>Unsere Arbeit ist geprägt vom engen Zusammenwirken von
Schülern, Kollegen, Schulleitung und Eltern. Ziel ist es,
einen Lern- und Lebensraum zu schaffen, der die Entwicklung der
Persönlichkeit der Schüler fördert und den
Bedürfnissen einer gemeinwesenorientierten Schulgemeinschaft
entgegenkommt.</p>
<p>Nur wenn alltägliche Unterichtsarbeit und nach aussen
Mir klicken an diese Stelle nach dem ersten Absatz, machen Platz für eine neue Zeile und schreiben:
Persönlichkeit der Schüler fördert und den
Bedürfnissen einer gemeinwesenorientierten Schulgemeinschaft
entgegenkommt.</p>
<img src="schulportal.jpg">
<p>Nur wenn alltägliche Unterichtsarbeit und nach aussen
Du siehst, bei der img-Marke läuft es nun ein bisschen
anders als bei den Marken, die wir bisher verwendet haben. Mit
dem img-Tag sagen wir dem Browser, das jetzt ein
Bild kommt. Soweit ist alles klar. Aber wie sagen wir es dem
Browser, wo er das Bild findet? Man könnte ja meinen, das
ginge ebenso wie bei den schon bekannten Textmarken, indem man
vielleicht zwischen einem Anfangs- und End-tag den
Namen des Bildes reinschreibt.
So ist es aber ganz und gar nicht!
Zu <img> gibt es wie zu hr und br keine Endmarke, es ist ein sogenanntes leeres Element! Wie also sage ich's dem Browser, wo er mein Bild findet? Antwort: mit dem src-Attribut! Man nennt das auch die Quellenangabe, von src (=Abk. für source), die Quelle. Man schreibt es einfach in die Marke <img> dazu, und zwar so:
Marke | < | img | src= | "schulportal.jpg" | > |
---|---|---|---|---|---|
Bedeutung | Achtung, jetzt kommt | ein Bild, | die Quelle ist | der Dateiname, | das war's |
So erfolgt die Quellenangabe für ein Bild in HTML:
Das Attribut (in diesem Fall src) wird gefolgt von einem istgleich-Zeichen (=). Danach erfolgt die Wertzuweisung an das Attribut (in diesem Fall eine Pfadangabe) in Anführungszeichen (""). In unserem Beispiel befinden sich das HTML-Dokument, in welches das Bild eingefügt wird, und das Bild im selben Verzeichnis. Die Pfadangabe lautet dann src="schulportal.jpg". Befindet sich das Bild in einem anderen Verzeichnis, musst du die Regeln für Pfadangaben in HTML beachten, damit das Bild vom Browser auch gefunden werden kann.
Hier eine grobe Übersicht:
Mehr zu Pfadangaben unter http://selfhtml.teamone.de/html/allgemein/referenzieren.htm.
Tipps, wie du einen Hyperlink auf ein Bild setzt in HTML4: Links und Anker setzen/Extern.
Wir klicken nochmal an diese Stelle nach dem ersten Absatz, machen Platz für zwei weitere Zeilen und schreiben:
<img src="schulportal.jpg"
alt="Schulportal der Kapellenschule Augsburg"
width="240" height="320">
Verpflichtend ist die Angabe des alt-Attributs. Damit wird beschreibender Text für das Bild angegeben. Dieser Text erscheint:
Nicht zwingend vorgeschrieben ist dagegen die Angabe der
genauen Bildmaße. Sie sollten aber dennoch in jedem Fall
angegeben werden, damit der Browser während des Ladevorgangs
schon genügend Platz für das Bild reserviert. Es kommt
sonst zu unschönen Effekten, wenn die komplett geladene
Grafik den bereits geladenen Text schwups wieder vom Bildschirm
fegt.
Die Angabe erfolgt mittels der Attribute width =
"Breite in Pixeln" und height = "Höhe in
Pixeln".
Um die Pixelgröße einer Bilddatei zu bestimmen musst
du sie mit einem Bildbearbeitungsprogramm öffnen. Ein
solches Programm ist zum Beispiel
IrfanView, dass du später
noch genauer kennenlernen wirst, wenn es in Los!-web an die
digitale Bildbearbeitung geht.
Mit Hilfe des align-Attributs kannst du die
Ausrichtung des Bild zur Seite und den Textfluss um das Bild
kontrollieren. Im Beispiel siehst du, dass das
align-Attribut auf den Wert "left" gesetzt wurde.
Dies bewirkt in jedem Fall eine Ausrichtung des Bildes am linken
Seitenrand. Der Text fließt nun rechts auf ganzer
Länge um das Bild herum.
TIP: Probiere auch einmal aus, was passiert, wenn du
align auf "right" setzt!
<img src="schulportal.jpg"
alt="Schulportal der Kapellenschule Augsburg"
width="240" height="320"
align="left">
Tip: Das align-Attribut kannst du auch auf Überschriften und Absätze anwenden! |
Die Auswirkung im Browser zeigt Beispiel 6
<img src="schulportal.jpg"
alt="Schulportal der Kapellenschule Augsburg"
width="240" height="320"
align="right"
border="1"
hspace="20">
Das Bild erhält einen 1 Pixel-breiten Rahmen. Die Farbe des Rahmens ist in jedem Falle schwarz. (Rahmen in anderen Farben und vieles mehr kannst du erzeugen, wenn du die Erweiterung der HTML, die CSS =Cascading Style Sheets anwendest. Doch dazu später in einem kurzen Ausblick). Breitere Rahmen um das Bild erreichst du mit größeren Zahlen. Mit border="0" unterdrückt man den bunten Rahmen, den Browser automatisch um das Bild zeichnen, wenn es als Link funktioniert.
Mit hspace="20" erzwingst du einen horizontalen Abstand (Abstand rechts und links) von 20 Pixeln zum umfließenden Text. Randabstände oben und unten erreichst du mit dem Attribut vspace.
Achtung: Die Attribute align, border, hspace und vspace sollen in Zukunft aus dem HTML-Standard verschwinden und sollten deshalb eigentlich nicht mehr verwendet werden. Mit der Sprache CSS und dem style-Attribut lassen sich Ausrichtung, Rahmen, Randabstände und vieles mehr noch sehr viel besser einstellen. Wie das geht lernst du in Kapitel 7. HTML: CSS verwenden. |
Weiter geht's: