Home | Previous | Next Introduction to the Web And HTML

Inline Images and HTML

Standard HTML Image Placement

<p>"Tuos ignes altus Hymettus habet." Flava verecundo dea 
crimen in ore fatetur, Et matutinos oscius urget equos. 
Exuit invisam Tellus rediviva senectam, Et cupit amplexus, 
Phoebe, subire tuos. <img src="icon-hel.gif"> Et cupit, et digna est;
quid enim formosius illa, Pandit ut omniferos luxuriosa sinus, 
Atque Arabum spirat messes, et ab ore venusto Mitia 
cum Paphiis fundit amosma rosis? Ecce, coronatur sacro 
frons ardua luco, Cingit ut Idaeam pinea turris Pim; 
Et vario madidos intexit flore capillos, Floribus et visa est.

"Tuos ignes altus Hymettus habet." Flava verecundo dea crimen in ore fatetur, Et matutinos oscius urget equos. Exuit invisam Tellus rediviva senectam, Et cupit amplexus, Phoebe, subire tuos. Et cupit, et digna est; quid enim formosius illa, Pandit ut omniferos luxuriosa sinus, Atque Arabum spirat messes, et ab ore venusto Mitia cum Paphiis fundit amosma rosis? Ecce, coronatur sacro frons ardua luco, Cingit ut Idaeam pinea turris Pim; Et vario madidos intexit flore capillos, Floribus et visa est.


Use BR To Ensure First In Line

<h3><img src="icon-hel.gif"><br>
Tuos ignes altus Hymettus habet.</h3>
<p>Flava verecundo dea crimen in ore fatetur, Et matutinos oscius 
urget equos.


Tuos ignes altus Hymettus habet.

Flava verecundo dea crimen in ore fatetur, Et matutinos oscius urget equos. Exuit invisam Tellus rediviva senectam, Et cupit amplexus, Phoebe, subire tuos.


The ALIGN Attribute

<h3><img src="icon-hel.gif" align=bottom> Tuos ignes altus Hymettus habet.</h3>
<p>Flava verecundo dea crimen in ore fatetur, Et matutinos oscius 
urget equos.  Exuit invisam Tellus rediviva senectam, Et cupit amplexus, 
Phoebe, subire tuos.
<h3><img src="icon-hel.gif" align=middle> Tuos ignes altus Hymettus habet.</h3>
<p>Flava verecundo dea crimen in ore fatetur, Et matutinos oscius 
urget equos.  Exuit invisam Tellus rediviva senectam, Et cupit amplexus, 
Phoebe, subire tuos.
<h3><img src="icon-hel.gif" align=top> Tuos ignes altus Hymettus habet.</h3>
<p>Flava verecundo dea crimen in ore fatetur, Et matutinos oscius 
urget equos.  Exuit invisam Tellus rediviva senectam, Et cupit amplexus, 
Phoebe, subire tuos.

Tuos ignes altus Hymettus habet.

Flava verecundo dea crimen in ore fatetur, Et matutinos oscius urget equos. Exuit invisam Tellus rediviva senectam, Et cupit amplexus, Phoebe, subire tuos.

Tuos ignes altus Hymettus habet.

Flava verecundo dea crimen in ore fatetur, Et matutinos oscius urget equos. Exuit invisam Tellus rediviva senectam, Et cupit amplexus, Phoebe, subire tuos.

Tuos ignes altus Hymettus habet.

Flava verecundo dea crimen in ore fatetur, Et matutinos oscius urget equos. Exuit invisam Tellus rediviva senectam, Et cupit amplexus, Phoebe, subire tuos.


Floating Images ALIGN=LEFT and ALIGN=RIGHT

<p><img src="icon-hel.gif" align=left>"Tuos ignes altus Hymettus habet."
Flava verecundo dea crimen in ore fatetur, Et matutinos oscius 
urget equos.  Exuit invisam Tellus rediviva senectam, Et cupit amplexus, 
Phoebe, subire tuos.

"Tuos ignes altus Hymettus habet." Flava verecundo dea crimen in ore fatetur, Et matutinos oscius urget equos. Exuit invisam Tellus rediviva senectam, Et cupit amplexus, Phoebe, subire tuos.


<p><img src="icon-hel.gif" align=right>"Tuos ignes altus Hymettus habet."
Flava verecundo dea crimen in ore fatetur, Et matutinos oscius 
urget equos.  Exuit invisam Tellus rediviva senectam, Et cupit amplexus, 
Phoebe, subire tuos.

"Tuos ignes altus Hymettus habet." Flava verecundo dea crimen in ore fatetur, Et matutinos oscius urget equos. Exuit invisam Tellus rediviva senectam, Et cupit amplexus, Phoebe, subire tuos.


<img src="icon-hel.gif" align=right>
<ul>
<li>"Tuos ignes altus Hymettus habet."
<li>Flava verecundo dea crimen in ore fatetur, 
<li>Et matutinos oscius urget equos.
<li>Exuit invisam Tellus rediviva senectam, 
<li>Et cupit amplexus, Phoebe, subire tuos.
</ul>


Controlling Image Size

<img src="icon-hel.gif">
<img src="icon-hel.gif" width=30>
<img src="icon-hel.gif" height=24>
<img src="icon-hel.gif" height=24>
<img src="icon-hel.gif" height=60>
<img src="icon-hel.gif" height=120>
<img src="icon-hel.gif" height=48 width=96>


Using images as links

<p>Click on the picture below to jump to some more information about
the IMG tag:<br>
<a href="http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/image.html">
<img src="icon-hel.gif"></a>

Click on the picture below to jump to some more information about the IMG tag:


Original document: copyright © 1995-1997 John Bradley, Information Commons, University of Toronto

Home | Previous | Next Introduction to the Web And HTML