adding images to your web pages
you are here 
201
<a href=”html/seattle_downtown.html”>
<img src=”thumbnails/seattle_downtown.jpg” 
alt=”An iPod in downtown Seattle, WA”>
</a>
So, how do I make links out of images?
If you look in the “html” folder in the chapter example files, you’ll find 
all of the single photo pages already there, except one – the page for 
“seattle_downtown.jpg”. Create a page called “seattle_downtown.html” in 
the “html” folder, and test it out. Get this working before you move on. 
You’ll find the answer in the back of the chapter if you have any problems. 
You’ve got your large photos, your smaller thumbnails, and even a set of 
HTML pages for displaying individual photos. Now you need to put it all 
together and get those thumbnails in “index.html” linked to the pages in the 
“html” folder. But how?
To link an image, you put the <img> element inside an 
<a>
element, like this:
The <img> element is nested 
directly inside the <a> element.
Here’s the <img> element for 
the “seattle_downtown.jpg” 
thumbnail, just as it is in the 
“index.html” file.
And here’s an <a> 
opening tag just before 
the <img> element.
The href is linked to the new 
HTML page for the photo, 
“seattle_downtown.html”, which 
is in the “html” directory.
Here’s the 
closing <a> tag.
Once you’ve placed the <img> element into an 
<a>
element, the 
browser treats the image as a clickable link.  When you click the 
image, the browser will retrieve the page in the href.
Exercise 
Pdf data extraction to excel - 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
can reader edit pdf forms; extracting data from pdf files
Pdf data extraction to excel - 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
how to save a pdf form in reader; export pdf form data to excel
202
Chapter 5
<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>
<a href=”html/seattle_med.html”>
<img src=”thumbnails/seattle_med.jpg” alt=”My iPod in Seattle, WA”>
</a>
<a href=”html/seattle_shuffle.html”>
<img src=”thumbnails/seattle_shuffle.jpg” alt=”A iPod Shuffle in Seattle, WA”>
</a>
<a href=”html/seattle_downtown.html”>
<img src=”thumbnails/seattle_downtown.jpg” alt=”An iPod in downtown Seattle, WA”>
</a>
</p>
<h2>Birmingham, England</h2>
<p>
Here are some iPod photos around Birmingham. We’ve obviously got some  
Add the image links to “index.html”
This is the last step.  You just need to wrap 
<a>
elements around each 
thumbnail’s <img> element in your “index.html” file.  Remember, the 
href of each 
<a>
element should link to the page containing the large 
version of the image in the “html” folder.  Make sure that your links, 
thumbnails, and pages all match up correctly.
Here’s the complete “index.html” file.  All you need to do is add the 
HTML marked in gray.
adding links to images
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.
sign pdf form reader; extract data from pdf
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 fill out pdf forms in reader; extract data out of pdf file
adding images to your web pages
you are here 
203
passionate folks over here who love their iPods. Check out the classic
red British telephone box!
</p>
<p>
<a href=”html/britain.html”>
<img src=”thumbnails/britain.jpg” alt=”An iPod in Birmingham at a telephone box”>
</a>
<a href=”html/applestore.html”>
<img src=”thumbnails/applestore.jpg” alt=”An iPod at the Birmingham Apple store”>
</a>
</p>
</body>
</html>
Add these 
<a>
elements to your “index.html” file. 
Save, load into your browser and check out myPod!
For each thumbnail image, wrap an <a> element around it. 
Just be careful to get the right href in each link!
there are no
Dumb Questions
Q:
When we put an <a> element around text we get 
an underline. Why don’t we get something equivalent with 
images?
A: 
Actually, most browsers DO put a border around an image 
to show it is linked. (Our browser, Safari, is one of the few that 
don’t.) If your browser puts a border around your linked images, 
and you don’t like it, hold on a few more chapters and you’ll 
learn how to take that border off with CSS. Also notice that when 
you pass your mouse over an image, your cursor will change to 
indicate you can click on the linked image. In most cases your 
users will know an image is linked by context and by the mouse 
cursor, even if there’s no border.
Q:
Can’t we just link to the JPEG image directly without 
all those HTML pages? I thought the browser was smart 
enough to display images by themselves.
A: 
You’re right, you could link directly to the image, like this: 
<a href=“photos/seattle_downtown.jpg”> ... </a>. If you did that 
and clicked on the link, the browser would display the image 
by itself on a blank page. In general though, linking directly to 
an image is considered bad form, because you usually want to 
provide some context for the images you are displaying.
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.
how to save a filled out pdf form in reader; extract data from pdf c#
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
extract pdf data to excel; export pdf form data to excel spreadsheet
204
Chapter 5
The myPod Web page is 
looking awesome!  I think 
you should add a logo to the 
page - that would add a 
great finishing touch.
Great idea.  In fact, we’ve got a myPod 
logo all ready to go.
Take another look in the folder 
“chapter5/mypod”, and you’ll find a 
folder called “logo”.  In that folder 
you’ll find a file called “mypod.psd”.  
The “.psd” means that the file has 
been saved in the Photoshop format,  a 
common format for digital images.  But 
Photoshop format files are meant for 
processing digital images, not for Web 
pages, so we’ll have to do some work to 
get a “Web ready” image from it. 
Many photo editing applications 
understand .psd files, so even 
if you don’t have Photoshop 
Elements, follow along for 
the next few pages. If your 
application can’t open the “.psd” 
file, you’ll find the images from 
each step in the “logo” folder.
adding a logo
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
saving pdf forms in acrobat reader; html form output to pdf
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.
filling out pdf forms with reader; how to save editable pdf form in reader
adding images to your web pages
you are here 
205
If your photo editing 
application won’t open 
the file, follow along 
anyway - the same 
principles apply for 
other formats as well.
You’ll find the “logo” folder in 
the “chapter5/mypod” folder.
Open the myPod logo
Let’s check out the myPod logo: open up the file “mypod.psd” 
in the “chapter5/mypod/logo” folder in Photoshop Elements:
Nice logo; it’s got some typography combined with two circles, 
one gray and one white (obviously inspired by the click-wheel 
controls on the iPod). 
But what is that checkered pattern in the background?  That’s 
the way most photo editing applications show you areas that 
are transparent. Keep all that in mind as we choose a graphic 
format for the logo...
A closer look...
Whenever you see this 
checkered pattern, 
that indicates a 
transparent area in 
the image.  
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.
export excel to pdf form; how to extract data from pdf to excel
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.
extract pdf form data to excel; change font size pdf form reader
206
Chapter 5
What format should we use?
Remember, use this 
pulldown menu to set the 
format.  We’re going to 
set the format to GIF to 
save the logo.
You already know that we have a couple of options in deciding how to save 
this image: we could use JPEG or GIF.  This logo uses only three colors, 
text, and some geometric shapes.  From what you’ve learned about the two 
formats, you’re probably leaning towards GIF (good choice!).
So, go ahead and choose GIF in the format drop down, and you’ll see we 
have a few more options. Let’s take a look...
When you set the 
format to GIF, this 
Transparency checkbox 
appears.  By default, 
it’s checked.  Do we 
want a transparent 
background?
Here’s where Photoshop 
Elements shows you the 
number of colors being 
used to save the GIF.  
It’s already set to the 
maximum, 256.  We’ll 
leave it there.
Try unchecking the Transparency checkbox: 
you’ll see the GIF preview at the bottom 
change to a white background.
Also note the 
Matte option. 
This is related to 
transparency, as 
you’ll see in a sec.
choosing between gif and jpeg
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.
extracting data from pdf to excel; edit pdf form in reader
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.
exporting data from pdf to excel; extract data from pdf file to excel
adding images to your web pages
you are here 
207
To be transparent, or not to be transparent? 
That is the question...
The myPod logo is going to be placed on a light green 
background, so you might think that transparency is going 
to be a good thing, right?  Well, let’s compare how the logo 
looks using a few options in the “Save for Web” dialog:
Without transparency things look 
pretty bad.  Clearly, a white 
background isn’t going to work 
on a green Web page.  (It might, 
however, work just fine on a 
white Web page).
Here’s what we get if we check 
Transparency and save.  Better... 
but what’s that white “halo” 
around the letters in the logo?
Ah, now we’re talking; this looks great. For this 
version we told Photoshop Elements to create the 
matte around the text using a green background. 
How? We’ll show you next. 
The halos happen because the 
photo editing application creates 
a “matte” to soften the text’s 
edges against the background 
color. When it did that for this 
logo, however, it assumed it was 
softening the edges against a 
white background.
Here’s the logo saved in three different ways and 
displayed on a Web page with a green background.
208
Chapter 5
You know you want a transparent GIF version of the logo, 
and you also know we’ll need to use a matte to prevent the 
halos around the text. Let’s check out the GIF panel of the 
“Save for Web” dialog.
Save the transparent GIF
You know to 
choose GIF 
already.
And check 
Transparency.
Now we need to take a look at 
the Matte option.
The Matte option allows you to select the color for the matte 
around the text. And we want that to be the color of the Web 
page background.
The Matte option 
supplies the color for 
softening the edges 
of the text. Since the 
Web page is a light 
green, we want to use 
the same color for the 
matte.
Choose “Other...” since 
our color isn’t listed.
creating a transparent gif
adding images to your web pages
you are here 
209
What? You can’t tell that’s light 
green? For now take our word for 
it; we’ll come back to this in a few 
chapters and explain all about colors.
The Color Picker gives you a lot 
of different ways to choose the 
matte color. We just want to set 
it to the background of the Web 
page, and we already know that 
is eaf3da...
When you click on the Matte pulldown menu and choose the “Other...” menu 
option, Photoshop Elements will bring up the Color Picker dialog.
Wait, what 
is
the color of the Web page background?
<style type=”text/css”>
body { background-color: #eaf3da;}
</style>
Here’s the background 
color right here.
Remember that Ready Bake CSS in the myPod “index.html” file?  
That CSS is what sets the background color of the page to light 
green. And that’s where we can get the color:
Set the matte color
... which is going to go right here.
210
Chapter 5
Type these letters in right here. 
This box is designed specifically for 
colors written in the Web format. 
You can type the letters in upper- 
or lowercase, it doesn’t matter.
Set the matte color, continued
Once you’ve typed the color 
into the Color Picker, click 
“OK” and it will apply the 
change to the logo.
Now, when you look close up at the 
logo, you’ll see the matte matches the 
green color in the background of the 
“mypod.html” Web page.
Go ahead and enter the color, “eaf3da”, into the “Color Picker” dialog box. 
You’ll see the color change to the background color of the myPod page.
Check out the logo with a matte
Now take a close look at the logo again in the preview pane.  You’ll see Photoshop 
Elements has added a light green matte around the hard edges, which will give the 
myPod logo text a softer, more polished look when the logo is in the Web page.
setting a matte color
Documents you may be interested
Documents you may be interested