Grafiken und Text auf der Webseite mit HTML

Grafiken und der <img />-Tag

Die vorige Übung  Bilder auf der Webseite hinzufügen zeigte, wie eine interne Abbildung in einem eigenen Absatz mit Text darunter in eine Seite eingefügt wird. Sie können ebenso Abbildungen neben (oder in) eine Textzeile einfügen. (Genaugenommen kommt der Ausdruck "inline image" genau daher.)

Um eine Abbildung in eine Textzeile zu integrieren, fügen Sie sie einfach innerhalb des Textes ein, zwischen die Element-Tags (<h1>, <p>, <address> und so weiter). Abbildung zeigt den Unterschied, wenn die Abbildung in eine Textzeile eingefügt wird.

<h2>
	<img src="user_male_64.png" alt="HTML-Lernen" />
	<img src="user_female_64.png" alt="HTML-Lernen" />HTML Lernen - Grundlagen und Tutorials
</h2>

Die Abbildung sollte nicht allzu groß sein, und sie muss auch nicht am Anfang des Textes stehen. Sie können eine Abbildung irgendwo in einem Textblock einsetzen:

Grafiken und Text auf der Webseite mit HTML

<blockquote>
	Lobortis porttitor himenaeos <img src="user_female_64.png" /> tristique,
	<br />
	ligula molestie ultricies ad. <img src="user_male_64.png" />
	<br />
	feugiat nam aliquam, maecenas auctor magna dolor ex laoreet <img src="user_female_64.png" /> primis sapien.
	<br />
	Metus quis, ipsum <img src="user_male_64.png" /> ullamcorper mauris.
	<br />
	--Darko Pipic 
</blockquote>

Abbildung zeigt, wie dies aussieht.

Grafiken und Text auf der Webseite mit HTML