HTML and CSS Reference
In-Depth Information
How the browser works with images
Browsers handle
<img>
elements a little differently than other elements.
Take an element like an
<h1>
or a
<p>
. When the browser sees these
tags in a page, all it needs to do is display them. Pretty simple. But when
a browser sees an
<img>
element, something very different happens: the
browser has to retrieve the image before it can be displayed in a page.
The best way to understand this is to look at an example. Let's take a
quick look back at the elixirs page from the Head First Lounge, which
has four
<img>
elements:
<html>
<head>
<title>
Head First Lounge Elixirs
</title>
</head>
<body>
<h1>
Our Elixirs
</h1>
<h2>
Green Tea Cooler
</h2>
<p>
<img src="../images/green.jpg">
Chock full of vitamins and minerals, this elixir combines
the healthful benefits of green tea with a twist of chamomile
blossoms and ginger root.
</p>
<h2>
Raspberry Ice Concentration
</h2>
<p>
<img src="../images/lightblue.jpg">
Combining raspberry juice with lemon grass, citrus peel and
rosehips, this icy drink will make your mind feel clear and
crisp.
</p>
<h2>
Blueberry Bliss Elixir
</h2>
<p>
<img src="../images/blue.jpg">
Blueberries and cherry essence mixed into a base of
elderflower herb tea will put you in a relaxed state of
bliss in no time.
</p>
<h2>
Cranberry Antioxidant Blast
</h2>
<p>
<img src="../images/red.jpg">
Wake up to the flavors of cranberry and hibiscus in
this vitamin C rich elixir.
</p>
<p>
<a href="../lounge.html">
Back to the Lounge
</a>
</p>
</body>
</html>
