adding images to your web pages
you are here 
171
{GIF disappears, literally}
{GIF reappears}
Don’t panic. I’m just proving a point. If JPEG 
is so great, how come you can’t make parts 
of your images transparent like I can?  With 
transparency, what is underneath the image 
shows through. If my users want a logo on 
a Web page, and the page has a colored 
background, they’ll use me because they know 
I’ll let the background show through the parts 
of the logo without any color. 
I think you make way too much of this 
transparency thing – I say,  just build that 
background color into the image.
Sure, and then someone changes the Web page 
color. No way. Transparency is the way to go, 
and to get it, you gotta use me.
Well, I’m not too worried about it; there aren’t 
many photos without backgrounds.
Oh yeah?  How about if you want to cut out a 
picture of a person, or even a tree, and use it 
on a Web page without a background?
Yeah, sure, GIF works great for those, but only 
as long as there are a small number of those 
colors. You’re just like a lesser version of me. I 
can do anything you can.
Say what? GIF? We’re doing a show here. 
Where’d you go?
When would that ever happen?
JPEG
GIF
You’d be surprised how often I get to represent 
photos just because my users want that 
transparent background.  
Yeah, right.  Stick to your logos and simple text 
images, and I’ll stick to photos and complex 
images.  Everyone knows I’m better for 
handling complexity.
Hey, someone is asking me to do transparency... 
gotta run.
Pdf data extraction - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extract data from pdf form fields; export pdf form data to excel
Pdf data extraction - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
extract data from pdf file to excel; export excel to pdf form
172
Chapter 5
?
Congratulations: you’ve been elected “Grand Image Format Chooser” of the day. 
For each image below, choose the format that would best represent it for the Web.
WHICH Image Format?
d
d
d
n
JPEG  or  GIF
®  ®
®  ®
®  ®
®  ®
®  ®
when to use gif or jpeg
VB.NET PDF Text Extract Library: extract text content from PDF
Application. Advanced Visual Studio .NET PDF text extraction control, built in .NET framework 2.0 and compatible with Windows system.
how to flatten a pdf form in reader; how to make a pdf form fillable in reader
C# PDF Text Extract Library: extract text content from PDF file in
Image text extraction control provides text extraction from PDF images and image files. Best C#.NET PDF text extraction library and component for free download.
how to save editable pdf form in reader; change font size pdf form reader
adding images to your web pages
you are here 
173
You already know 
<img> is an empty 
element.
And now for the formal introduction: meet the 
<img> element.
<img src=”images/drinks.gif”
>
We’ve held off on the introductions long enough. As you can see, 
there’s more to dealing with images than just the HTML markup. 
Anyway, enough of that for now... it’s time to meet the <img> 
element.
Let’s start by taking a closer look at the element (although you’ve 
probably already picked up on most of how <img> works by 
now):
The src attribute specifies the location 
of an image file to be included in the 
display of the Web page.
Here’s the <img> element.
The <img> element is an inline 
element. It doesn’t cause linebreaks 
to be inserted before or after it.
<img>
Uh, I don’t mean to be 
rude, but we’re on the ninth 
page of the IMAGES chapter and 
you STILL haven’t introduced me! 
JPEG, GIF, blah, blah, blah... could 
you get on with it?
So, is that it? Not quite.  There are a couple of attributes you’ll 
want to know about.  And of course you’ll also want to know how 
to use the <img> element to reference images on the Web that 
aren’t on your own site. But really, you already know the basics of 
using the <img> element.
Let’s work through a few of the finer points of using the <img> 
element, and then put all this knowledge to work.
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
Support PDF Image Extraction from a Page, a Region on a Page, and PDF Document in VB.NET Project. DLLs for PDF Image Extraction in VB.NET.
html form output to pdf; how to save a filled out pdf form in reader
VB.NET PDF Page Extract Library: copy, paste, cut PDF pages in vb.
VB.NET PDF - PDF File Pages Extraction Guide. Detailed VB.NET Guide for Extracting Pages from Microsoft PDF Doc. Free PDF document
pdf data extraction tool; extract data from pdf using java
174
Chapter 5
<img>: it’s not just relative links anymore
<img src=”http://www.starbuzzcoffee.com/images/corporate/ceo.jpg”
>
Here’s a “Sharpen your pencil” that is actually about pencils (oh, and images too). This exercise involves a bit of 
trivia: 
Given a typical, brand-new pencil, if you drew one continuous line with it, using the entire pencil up, how 
long would the line be
?
What’s that got to do with images? To find the answer you’re going to have to write some HTML. The answer to 
this trivia is contained in the image that is at the URL: http://www.headfirstlabs.com/trivia/pencil.gif. Your job is to 
add an image to this HTML and retrieve the answer:
<html>
<head>
<title>Sharpen your pencil trivia</title>
</head>
<body>
<p>How long a line can you draw with the typical pencil?</p>
<p>
</p>
</body>
</html>
Put your image element here.
The src attribute can be used for more than just relative links; you can also put a URL 
in your src attribute.  Images are stored on Web servers right alongside HTML pages, so 
every image on the Web has its own URL, just like Web pages do.  
You’ll generally want to use a URL for an image if you’re pointing to an image at a different 
Web site (remember, for links and images on the same site, it’s better to use relative paths).  
Here’s how you link to an image using a URL:
To include an image using its URL, 
just put the whole URL of the 
image in the src attribute.
The URL is the path to the image, 
so the filename at the end is always 
the filename of an image.  There’s 
no such thing as a default image 
like there is for Web pages.
Sharpen your pencil
using urls with images
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
Document. Support PDF Image Extraction from a Page, a Region on a Page, and PDF Document. C# Project: DLLs for PDF Image Extraction. In
flatten pdf form in reader; extract pdf form data to excel
VB.NET PDF Library SDK to view, edit, convert, process PDF file
PDF Text Extraction. Mature and robust APIs are provided for programmers to integrate and perform PDF text extraction feature in .NET windows and web project.
vb extract data from pdf; pdf form save with reader
adding images to your web pages
you are here 
175
there are no
Dumb Questions
Q: 
So the <img> element is quite 
simple – it just provides a way to specify 
the location of the image that needs to be 
displayed in the page?
A: 
Yes, that about sums it up. We’ll talk 
about a couple of attributes you can add to 
the element.  Later, you’ll see a number of 
ways to use CSS to change the visual style 
of an image.
But there’s a lot to know about the images 
themselves. What are the different image 
formats for? When should I use one over the 
other? How big should they be? How do I 
prepare images for use in a Web page? 
Q: 
We’ve learned that empty 
elements are elements without content. 
We’ve also learned that the <img> 
element is empty. But, doesn’t it have 
content (the image)?
A: 
Well, to be more precise, an empty 
element is an element that doesn’t have any 
content 
in the HTML page
 to put the open 
and closing tags around. True, an image 
is content, but the <img> element refers to 
the image. The image isn’t part of the HTML 
page itself.  Instead, the image 
replaces
 the 
<img> element when the browser displays 
the page.  And remember, HTML pages 
are purely text, so the image could never 
be directly part of the page.  It’s always a 
separate thing.
Q: 
Back in the example of a Web 
page loading with images... when I load a 
Web page, I don’t see the images loading 
one after the other. Why?
A: 
Browsers often retrieve the images 
concurrently
. That is, the browser makes 
requests for multiple images at the same 
time. Given the speed of computers and 
networks, this all happens fast enough that 
you usually see a page display along with 
its images.
Q: 
If I see an image on a Web page, 
how do I determine its URL so that I can 
link to it?
A: 
Most browsers allow you to 
“right-click” on an image, which brings up 
a contextual menu with some choices. In 
these choices you should see “Copy Image 
Address” or “Copy Image Link”, which will 
place the URL in your clipboard. Another 
way to find the URL is to right-click and 
choose “Open Image in New Window”, which 
will open the image in a browser window. 
Then you can get the URL of the image from 
the browser’s address bar. A last option is 
to use your browser’s “View Source” menu 
option and look through the HTML. Keep in 
mind, though, you might find a relative link to 
the image, so you’ll have to “reconstruct” the 
URL using the Web site domain name and 
the path of the image.
Q:
What makes a JPEG photo better 
than a GIF photo, or a GIF logo better 
than a JPEG logo?
A: 
“Better” is usually defined as some 
combination of image quality and file size. 
A JPEG photo will usually be much smaller 
than an equivalent quality GIF, while a GIF 
logo will usually look better, and have a 
smaller file size than in JPEG format.
Q:
I’ve heard about the PNG image 
format too. Why didn’t you mention that?
A: 
PNG is the latest newcomer in 
graphic formats, and an interesting one as 
it can support both JPEG and GIF styles 
of images. It also has more advanced 
transparency features than GIF. Right now, 
PNG is a little on the cutting edge because 
not all browsers support it. But its popularity 
is growing quickly. You should feel free to 
use PNG, but just be aware that it won’t 
work on every browser.
C#: Demos and Sample Codes for Image Content Extraction Using OCR
C# Sample Code for Png Image Text Extraction. This C# OCR demo code illustrates how to extract text from Png and save to png.pdf. // Set the training data path.
extract table data from pdf; collect data from pdf forms
C# PDF File Permission Library: add, remove, update PDF file
Form Process. Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert Choose to offer PDF annotation and content extraction functions.
fill in pdf form reader; extract data from pdf form to excel
176
Chapter 5
Always provide an alternative
One thing you can be sure of on the Web is that you never know exactly which 
browsers and devices will be used to view your pages. Visitors are likely to show 
up with mobile devices, screen readers for the visually impaired, browsers that are 
running over very slow Internet connections (and may retrieve only the text, not 
the images, of a site), cell phones, Internet-enabled toasters... Who knows?
But in the middle of all this uncertainty you can be prepared. Even if a browser can’t 
display the images on your page, there is an alternative.  You can give the visitor 
some indication of what information is in the image using the <img> element’s 
alt
attribute. Here’s how it works:
<img src=”http://www.headfirstlabs.com/trivia/pencil.gif”
alt=”Pencil line 35 miles long”>
Take your HTML from the previous exercise.
Update the image element to include the alt attribute 
“Pencil line 35 miles long”. 
Change the image name of “pencil.gif” to “broken.gif”. This 
image doesn’t actually exist, so you’ll get a broken image.
Reload the page in your browser.
Finally, download a couple of other browsers and give this 
a try. Did you get different results?
1
2
3
4
In this exercise you’re going to see how your browser handles the alt attribute when 
you have a broken image. The theory goes that if an image can’t be found, the alt 
attribute is displayed instead. But not all browsers implement this, so your results 
may vary. Here’s what you need to do:
5
Look at the end of the chapter to see our results...
If the image can’t be displayed, then 
this text is used in its place.
The alt attribute just requires a short bit 
of text that describes the image.
For instance, you could try Firefox 
(http://www.mozilla.org/) or Opera 
(http://www.opera.com/).
Exercise 
use the alt attribute for accessibility
VB.NET PDF File Permission Library: add, remove, update PDF file
Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert, Delete, Update Choose to offer PDF annotation and content extraction functions.
extract pdf form data to xml; extract data from pdf form to excel
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. PDF document splitting, PDF page reordering and PDF page image and text extraction.
extract data from pdf into excel; extract data from pdf using java
adding images to your web pages
you are here 
177
Sizing up your images
There’s one last attribute of the <img> element you should know about – 
actually, they’re a pair of attributes: 
width
and height. You can use these 
attributes to tell the browser, up front, the size of an image in your page.
Here’s how you use 
width
and height:
<img src=”images/drinks.gif”
width=”48” height=”100”>
The height attribute 
tells the browser how 
tall the image should 
appear in the page.
The width attribute tells the 
browser how wide the image 
should appear in the page.
Q:
Why would I ever use these 
attributes if the browser just figures it 
out anyway?
A: 
On many browsers, if you supply 
the width and height in your HTML, then 
the browser can get a head start laying 
out the page before displaying it. If you 
don’t, the browser often has to readjust the 
page layout after it knows the size of an 
image.  Remember, the browser downloads 
images 
after it downloads the HTML file and 
begins to display the page.  The browser 
can’t know the size of the images before it 
downloads them unless you tell it.
You can also supply width and height values 
that are larger or smaller than the size of the 
image and the browser will scale the image  
to fit those dimensions. Many people do 
this when they need to display an existing 
image at a size that is larger or smaller than 
its original dimensions. As you’ll see later, 
however, there are many reasons not to use 
width and height for this purpose.
Q:
Do I have to use these attributes 
in pairs? Can I just specify a width or a 
height?
A: 
You can, but if you’re going to go to 
the trouble to tell the browser one dimension, 
supplying the second dimension is about the 
same amount of work (and there isn’t a lot 
to be gained by supplying just a width or a 
height unless you’re scaling the image to a 
particular width or height).
Q:
We’ve said many times that we 
are supposed to use HTML for structure, 
and not for presentation. These feel like 
presentation attributes. Am I wrong?
A: 
It depends on how you are using 
these attributes. If you’re setting the image 
width and height to the correct dimensions, 
then it is really just informational. However, 
if you are using the width and height to 
resize the image in the browser, then you 
are using these attributes for presentation. 
In that case, it’s probably better to consider 
using CSS to achieve the same result.
there are no
Dumb Questions
Both width and height are specified using the number of pixels. If 
you’re not familiar with pixels, we’ll go into what they are in a little 
more detail later in this chapter. You can add width and height 
attributes to any image; if you don’t, the browser will automatically 
determine the size of the image before displaying it in the page.
178
Chapter 5
Creating the ultimate  
fan site: myPod
iPod owners love their iPods, and they take them 
everywhere. Imagine creating a new site called “myPod” 
to display pictures of your friends and their iPods from 
their favorite locations, all around the world. 
What do you need to get started? Just some knowledge 
of HTML, some images, and a love for your iPod. 
We’ve already written some of the HTML for this site, 
but we haven’t added the images yet – that’s where 
you come in. But before you get to the images, let’s 
get things set up; look for the “chapter5” folder in the 
sample source for the book. There you’ll find a folder 
named “mypod”. Open the “mypod” folder and here’s 
what you’ll see inside:
We’ve already written some 
of the HTML for the 
myPod site. You’ll find it 
in the “index.html” file.
You’ll find this in the 
chapter5 folder.
Here’s the first iPod 
image:an image of Seattle.
We’re going to use the 
photos folder to hold 
the images for the site.
mypod
<html>
...</html>
photos
seattle.jpg
index.html
My iPod in Seattle! You can see rain clouds 
and the Space Needle. You can’t see the 628 
coffee  shops.
Note: you’ll find a couple of other folders 
in “mypod” too, but ignore those for now.
a fan site for ipods
adding images to your web pages
you are here 
179
<html>
<head>
<title>myPod</title>
<style type=”text/css”>
body { background-color: #eaf3da;}
</style>
</head>
<body>
<h1>Welcome to myPod</h1>
<p>
Welcome to the place to show off your iPod, wherever you might be.
Wanna join the fun? All you need is any iPod from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Photo, and a digital camera.  Just take a snapshot of your iPod in
your favorite location and we’ll be glad to post it on myPod. So, what 
are you waiting for?
</p>
<h2>Seattle, Washington</h2>
<p>
Me and my iPod in Seattle!  You can see rain clouds and the 
Space Needle.  You can’t see the 628 coffee shops.
</p>
</body>
</html>
Open up the file “index.html” and you’ll see work has already 
begun on myPod. Here’s the HTML so far:
This HTML should look familiar, as we’re using 
the basic building blocks: <h1>, <h2>, and <p>.
Check out myPod’s “index.html”  file
And here’s how it looks in 
the browser. Not bad, but 
we need images.
We threw in some Ready Bake CSS here. Just 
type this in for now - all it does is give 
the page a light green background. We’ll be 
getting to CSS in a few chapters - promise!
180
Chapter 5
As you can see, a lot of the HTML is already written to 
get myPod up and running.  All you need to do is add 
an 
<img>
 element for each photo you want to include. 
There’s one photo so far, “seattle.jpg”, so go ahead and 
add an element to place that image in the page below. 
When you’ve finished, load the page in your browser and 
check out the view of Seattle.
We need an 
image, right here.
<html>
<head>
<title>myPod</title>
<style type=”text/css”>
body { background-color: #eaf3da;}
</style>
</head>
<body>
<h1>Welcome to myPod</h1>
<p>
Welcome to the place to show off your iPod, wherever you might be.
Wanna join the fun? All you need is any iPod from, the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Photo, and a digital camera.  Just take a snapshot of your iPod in
your favorite location and we’ll be glad to post it on myPod. So, what 
are you waiting for?
</p>
<h2>Seattle, Washington</h2>
<p>
Me and my iPod in Seattle!  You can see rain clouds and the 
Space Needle.   You can’t see the 628 coffee shops.
</p>
<p>
</p>
</body>
</html>
This is where you need to 
place the first photo.
Your <img> element is 
going to go right here.
Sharpen your pencil
inserting an image
Documents you may be interested
Documents you may be interested