adding images to your web pages
you are here 
211
Save the logo
Okay you’ve made all the adjustments you need to in the “Save for Web” 
dialog, so go ahead and click “OK” to save the image as “mypod.gif”. 
Elements will automatically 
change the extension of your 
filename to “.gif”.  Save the 
image as “mypod.gif” in the 
“logo” folder.
Add the logo to the myPod Web page
Add the logo image at the top of the 
myPod Web page.  Remember to use 
the correct relative path for the logo, 
in the “logo” folder, and add an alt 
attribute that describes the image.
<html>
<head>
<title>myPod</title>
<style type=”text/css”>
body { background-color: #eaf3da;}
</style>
</head>
<body>
<p>
<img src=”logo/mypod.gif” alt=”myPod Logo”>
</p>
<h1>Welcome to myPod</h1>
.
.
.
</body>
</html>
Rest of “index.html” HTML here...
Now all you need to do is add the logo to the myPod Web page.  
We’ll add it to the top so it appears above the Web site description 
and iPod images. That way, it’s the first thing your visitors see 
when they come to your myPod page.
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
extracting data from pdf to excel; collect data from pdf forms
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
extract data from pdf using java; how to save a pdf form in reader
212
Chapter 5
Excellent work.  The 
logo looks great.  You’ve 
got a kick-ass myPod 
Web site here!
And it works - all that 
hard work paid off.  You 
have a great looking logo 
on your myPod Web page. 
And now for the final test drive
Let’s test this puppy!   Reload the Web page in the browser 
and see how your myPod transparent GIF logo works.
testing the transparent gif
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.
extract pdf form data to excel; pdf form field recognition
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.
cannot save pdf form in reader; exporting pdf form to excel
adding images to your web pages
you are here 
213
Q:
Do  I really need to know all this stuff about 
image formats to write good Web pages?
A: 
No.  You can build great Web pages without any 
images.  However, images are a big part of the Web, so 
some knowledge of how images work can really help. 
Sometimes just an image or two makes the difference 
between a good page and a great one. There’s a lot to 
know about images, but it’s easy to learn as you go.
Q:
Why does the text need its edges softened?
A: 
Check out the two versions of the myPod logo 
below:
You’ll see the top version has very hard, jagged edges 
and is less readable. This is the way text is displayed by 
default on a computer screen. The second version has had 
its edges softened using a technique called anti-aliasing. 
Words that are anti-aliased on a computer screen are more 
readable and more pleasant to the eye.
Q:
So where does the “Matte” come in?
A: 
The process of anti-aliasing softens the edges 
relative to the background color. If you put the bottom 
version of the logo (from the previous Q&A) against a 
colored background, you’d see it has white edges in it. The 
Matte option in Photoshop Elements allows you to specify 
the color of the background that the text will be placed on, 
so when the text is softened it is done so against that color.
Q:
Does this technique just work for text?
A: 
No, it works for any lines in your graphics that might 
result in “jaggies”. Check out the circle in the myPod logo; it 
was matted too.
Q:
Why can’t I just make the logo background 
color solid and match the color to the Web page?
A: 
You could do that too, but there is one disadvantage: 
if there are other things in your Web page that are showing 
through the transparency, then they won’t be seen with the 
solid color version. You haven’t seen any examples of this 
yet, but when we get into CSS, you will.
Q:
What if I change my background color after I 
make the matted version?
A: 
A slight variation in your background color probably 
wouldn’t be noticeable; however, if you change the color 
dramatically, you’ll have to recreate the GIF with a new 
matte color.
there are no
Dumb Questions
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 filled out pdf form in reader; pdf data extraction
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 table data from pdf to excel; how to fill out pdf forms in reader
214
Chapter 5
Use the <img> 
n
element to place images in 
your Web page.
Browsers treat <img> elements a little 
n
differently than other HTML elements; after 
reading the HTML page, the browser retrieves 
each image from the Web server and displays 
it.
If you have more than a couple of large 
n
images on a Web page, you can make 
your Web page more usable and faster to 
download by creating thumbnails – small 
images that the user can click on to see the 
large version of the image. 
The <img> element is an inline element, 
n
which means that the browser doesn’t put a 
linebreak before or after an image. 
The src attribute is how you specify the 
n
location of the image file.  You can include 
images from your own site using a relative 
path in the src attribute, or images from other 
sites using a URL.
The alt attribute of an <img> element is a 
n
meaningful description of the image.  It is 
displayed in some browsers if the image can’t 
be located, and is used by screen readers to 
describe the image for the visually impaired.
A width of less than 800 pixels is a good 
n
rule of thumb for the size of photo images 
in a Web page.  Most photo images that are 
created by digital cameras are too large for 
Web pages, so you’ll need to resize them.
Photoshop Elements is one of many photo 
n
editing applications you can use to resize your 
images.
Images that are too large for the browser 
n
make Web pages difficult to use and slow to 
download and display.
A pixel is the smallest dot that can be 
n
represented on the screen.  Each image is 
composed of thousands of pixels.  Depending 
on your monitor, there can be anywhere from 
72 pixels in an inch to 120 pixels in an inch.
JPEG and GIF are the two formats for images 
n
that are widely supported by Web browsers.
The JPEG format is best for photographs and 
n
other complex images.
The GIF format is best for logos and other 
n
simple graphics with solid colors, lines, or text.
JPEG images can be compressed at a variety 
n
of different qualities, so you can choose the 
best balance of quality and file size for your 
needs.
The GIF image format allows you to make an 
n
image with a transparent background.  If you 
put an image with a transparent background 
in a Web page, what’s behind the image, such 
as the background color of the page, will show 
through the transparent parts of the image.
In Photoshop Elements, use the Matte color 
n
menu in the “Save for Web” dialog to choose 
the right color for softening the edges of your 
transparent GIF image.
Images can be used as links to other Web 
n
pages.  To create a link from an image, use 
the <img> element as the content of an <a> 
element, and put the link in the href attribute 
of the <a> element.
BULLET POINTS
review using images with html
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
using pdf forms to collect data; exporting data from excel to pdf form
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.
exporting data from pdf to excel; extract data from pdf file
adding images to your web pages
you are here 
215
HTMLcross
It’s time to give your right brain a break and put that left brain to work.  
All these words are HTML-related and from this chapter. 
Across
3. Smallest element on a screen.
5. Web server makes a request for each one of 
these.
7. Better for solid colors, lines, and small text.
9. Newcomer image format.
10. Most Web 
s
retrieve images this way.
11. Miles you can draw with a pencil.
13. Small images on a page.
14. You used Photoshop Elements to do this to 
images.
15. The alt attribute improves this.
Down
1. Lovable MP3 player.
2. With JPEG you can control this.
4. The larger the image, the _____ it takes to 
transfer it.
6. GIF has it, JPEG doesn't.
8. Technique for softening edges of text.
12. Better for photos with continuous tones.
brow ers
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.
saving pdf forms in acrobat reader; extract pdf data into 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 table data from pdf; pdf form save in reader
216
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 on the Web.
WHICH Image Format?
d
d
d
n
JPEG  or  GIF
®  ®
®  ®
®  ®
®  ®
®  ®
This image is borderline. It has 
lots of continuous colors (JPEG), 
but is also slightly geometric 
(GIF) and you may want to 
use this in a way that requires 
transparency (GIF).
A photo with lots of continuous 
shades of gray.
Only a couple of colors with some 
text; definitely a GIF.
A photo with lots of colors; 
definitely a JPEG.
Just a simple black and 
white icon; a GIF.
Exercise 
Solutions
exercise solutions
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.
sign pdf form reader; filling out pdf forms with 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 pdf data to excel; extract data from pdf table
adding images to your web pages
you are here 
217
<html>
<head>
<title>Sharpen your pencil trivia</title>
</head>
<body>
<p>How long a line can you draw with the typical pencil?</p>
<p>
<img src=”http://www.headfirstlabs.com/trivia/pencil.gif”>
</p>
</body>
</html>
Here’s a “Sharpen your pencil” that is actually about pencils (oh, and images of course). 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 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:
Source: http://www.papermate.com
Sharpen your pencil
Solution
218
Chapter 5
Here are the results of having a broken image in a few different browsers. In most 
cases, the browser is able to use the extra alt attribute information to improve what 
is displayed. Why do we care? After all, this is an error in a Web page; we should just 
fix it, right? Well, in the real world things are often not ideal; sometimes things break, 
Internet connections go bad in the middle of a page load, or visually impaired users 
need to 
hear
what is in the image, because they can’t see it.
The Firefox browser just displays the alt 
attribute, as if it were text, if the image 
can’t be retrieved.
PC
Mac
Internet 
Explorer 
displays a 
broken image 
icon and the 
alt attribute 
text next 
to it.
On the Mac, Internet 
Explorer also displays 
a broken image icon 
and the alt attribute 
text next to it.
Safari on the Mac 
doesn’t make good use 
of the alt attribute 
from broken images.
Exercise 
Solutions
exercise solutions
adding images to your web pages
you are here 
219
?
WHICH Image Format?
Format      Quality     Size     Time     Winner
JPEG
JPEG
JPEG
JPEG
JPEG
GIF
Maximum
Very High
High
Medium
Low
N/A
®
®
®
®
®
®
2
232K
112K
64K
30K
18K
221K
83 Seconds
41 Seconds
24 Seconds
12 Seconds
7 Seconds
80 Seconds
Is the winner really Medium? Not necessarily. It all depends on what your needs are. If you want a really 
high quality image, then you might want Very High. If you want the fastest possible site, then try Low. 
We’ve chosen Medium because it is a nice trade off in size versus the quality of the image. You may think 
Low is good enough, or that it’s worth bumping the quality up to High. So, it’s all very subjective.  One 
thing is for sure however, GIF doesn’t work very well for this image (which should not be a surprise).
Note that your numbers may differ depending on 
the version of software you are using.
Did you notice how 
the image quality 
degrades?
d
d
d
n
Exercise 
Solutions
220
Chapter 5
<html>
<head>
<title>myPod: Seattle Downtown</title>
<style type=”text/css”> body { background-color: #eaf3da; } </style>
</head>
<body>
<h1>Downtown Seattle</h1>
<p>
<img src=”../photos/seattle_downtown.jpg” alt=”An iPod in downtown Seattle, WA”>
</p>
</body>
</html>
Here’s the HTML; this file should 
be called “seattle_downtown.html”.
mypod
photos
     html
thumbnails
This file should go in the 
“html” folder under “mypod”.
Here’s the test drive.
If you look in the “html” folder with the chapter examples, 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. 
Here’s the answer: 
Exercise 
Solutions
exercise solutions
Documents you may be interested
Documents you may be interested