50
Chapter 2
<a href=”elixir.html”>elixirs</a>
Next, when a user clicks on a link, the browser uses the “href” 
attribute to determine the page the link points to.
2
<a href=”directions.html”>detailed directions</a>
The user clicks on either the
elixirs link or...
...on detailed directions.
When “detailed directions” is 
clicked,  the browser grabs the 
value of the href attribute, in 
this case “directions.html”...
...and loads “directions.html”.
If elixirs was clicked, the 
browser grabs the href value 
“elixir.html”...
...and displays the 
“elixir.html” page.
Behind 
the Scenes
how links work
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
extract data from pdf; using pdf forms to collect data
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
save pdf forms in reader; extract data from pdf file
going further with hypertext
you are here 
51
Understanding attributes
Attributes give you a way to specify additional information about 
an element. While we haven’t looked at attributes in detail, you’ve 
already seen a few examples of them:
<style type=”text/css”>
<a href=”irule.html”>
<img src=”sweetphoto.gif”>
Let’s cook up an example to give you an even better feel for how 
attributes work:
What if <car> was an element?
If <car> was an element, then you’d naturally want to write some 
markup like this:
But this <car> element only gives a descriptive name for your  
car  – it doesn’t tell us the make, precise model, whether it is a 
convertible, or a zillion other details we might want to know. So, if 
<car> were really an element, we might use attributes like this:
<car make=”BMW” model=”Mini Cooper” convertible=”no”>My Red Mini</car>
Better, right? Now this markup tells us a lot more information in 
an easy to write, convenient form.
Safety
First
The type attribute specifies which style 
language we’re using, in this case CSS.
The href attribute tells us the destination of a hyperlink.
The src attribute specifies the filename 
of the picture an img tag displays.
Attributes are always written the same 
way: first comes the attribute name, 
followed by an equals sign, and then the 
attribute value surrounded in double quotes. 
You may see some sloppy HTML on the Web 
that leaves off the double quotes, but don’t 
get lazy yourself. Being sloppy can cause you 
a lot of problems down the road (as we’ll see 
later in the book).
<a href=”top10.html”>Great Movies</a>
<a href=top10.html>Great Movies</a>
Do this (correct form)
Not this (incorrect form)
attribute nameequals signdouble quote 
double quote 
attribute value
WRONG - no double quotes around the attribute value.
<car>My Red Mini</car>
With no attributes, all we can supply is 
a descriptive name for the car.
But with attributes, we can 
customize the element with all 
kinds of information.
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 save fillable pdf form in reader; pdf form data extraction
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 in a pdf form in reader; how to extract data from pdf file using java
52
Chapter 2
Q: 
Can I just make up new attributes for an 
HTML element?
A: 
No, because Web browsers only know about 
a predefined set of attributes for each element. If you 
just made up attributes, then Web browsers wouldn’t 
know what to do with them, and as you’ll see later in 
the book, doing this will very likely get you into trouble. 
When a browser recognizes an element or an attribute, 
we like to say that it “supports” that element or attribute.  
You should only use attributes that you know are 
supported.
Q: 
Who decides what is “supported?”
A: 
There are standards committees that worry 
about the elements and attributes of HTML. These 
committees are made up of people with nothing better 
to do
who generously give their time and energy to 
make sure there’s a common HTML roadmap that all 
companies can use to implement their browsers.
Q: 
How do I know what attributes and elements 
are supported? Or, can all attributes be applied to 
any element?
A: 
Only certain attributes can be used with a given 
element. Think about it this way: you wouldn’t use an 
attribute “convertible” with the element <toaster>, would 
you? So, you only want to use attributes that make sense 
and are supported by the element. 
We’re going to be learning which attributes are supported 
by which elements as we make our way through the 
book. After you’ve finished the book there are lots of 
great references you can use to refresh your memory, 
such as 
HTML & XHTML: The Definitive Guide 
(O’Reilly).
there are no
Dumb Questions
...rhymes with 
“space chef”.
The “href” attribute is 
pronounced “h - ref”... 
attributes and elements
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 extract data from pdf to excel; html form output to pdf
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
extracting data from pdf into excel; vb extract data from pdf
going further with hypertext
you are here 
53
HeadFirst:  Welcome, href.  It’s certainly a pleasure to interview as big an 
attribute as you.
href: Thanks.  It’s good to be here and get away from all the linking; it can wear 
an attribute out. Every time someone clicks on a link, guess who gets to tell the 
browser where to go next? That would be me.
HeadFirst: We’re glad you could work us into your busy schedule. Why don’t 
you take us back to the beginning... What does it mean to be an attribute?
href: Sure. Well, attributes are used to customize an element.  It’s easy to wrap 
some 
<a>
tags around a piece of content, like “Sign up now!” – we do it like 
this: <a>Sign up now!</a> – but without me, the href attribute, you have 
no way to tell the 
<a>
element the destination of the link.
HeadFirst: Got it so far...
href: ...but with an attribute you can provide additional information about the 
element.  In my case, that’s where the link points to:   
<a href=”signup.html”>Sign up now!</a>.  This says that the 
<a>
element, which is labeled “Sign up now!”,  links to the “signup.html” page. 
Now, there are lots of other attributes in the world, but I’m the one you use with 
the 
<a>
element to tell it where it points to.
HeadFirst: Nice. Now, I have to ask, and I hope you aren’t offended, but what 
is with the name?  href? What’s with that?
href: It’s an old Internet family name. It means “hypertext reference”, but all 
my friends just call me “href” for short.
HeadFirst: Which is?
href: A hypertext reference is just another name for a resource that is on the 
Internet or your computer.  Usually the resource is a Web page, but I can also 
point to audio, video... all kinds of things.
HeadFirst: Interesting.  All our readers have seen so far are links to their own 
pages; how do we link to other pages and resources on the Web?
href: Hey, I gotta get back to work, the whole Web is getting gunked up without 
me.  Besides, isn’t it your job to teach them this stuff?
HeadFirst: Okay okay, yes, we’re getting to that in a bit... thanks for joining us, 
href.
This week’s interview:
Confessions of the href attribute
Attributes Exposed
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
export pdf form data to excel spreadsheet; online form pdf output
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.
extract data from pdf into excel; extract data from pdf using java
54
Chapter 2
You’ve created links to go from “lounge.html” to “elixir.html” and 
“directions.html”; now we’re going to go back the other way. Below you’ll 
find the HTML for “elixir.html”.  Add a link with the label “Back to the 
Lounge” at the bottom of the elixir page that points back to “lounge.html”.
<html>
<head>
<title>Head First Lounge Elixirs</title>
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Green Tea Cooler</h2>
<p>
<img src=”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=”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=”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=”red.jpg”>
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
</body>
</html>
When you are done, go ahead and do the same with “directions.html” as well.
Your new HTML 
goes here.
Exercise 
linking back to the main page
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.
exporting pdf form to excel; exporting data from excel to pdf form
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.
how to flatten a pdf form in reader; extracting data from pdf forms
going further with hypertext
you are here 
55
Q: 
I’ve seen many pages where I can click on an image 
rather than text. Can I use the <a> element for that?
A: 
Yes, if you put an 
<img>
 element between the 
<a>
 tags 
then your image will be clickable just like text. We’re not going to talk 
about images in depth for a few chapters, but they work just fine as 
links.
Q: 
So I can put anything between the <a> tags and it will be 
clickable?  Like, say, a paragraph?  
A: 
Whoa now.  Not so fast. Not every element can be placed 
inside an 
<a>
 element.  In general you’ll just be using text and 
images (or both) within the 
<a>
 element. What tags will go inside 
other tags is a whole other topic, but don’t worry; we’ll get there soon 
enough.
there are no
Dumb Questions
Label
Destination
What you write in HTML
<a href=”hot.html”>Hot or Not?</a>
<a href=”           ”>Eye Candy</a>
Resume
cv.html
See my mini
mini-cooper.html
candy.html
<a href=”millionaire.html”>            </a>
let’s play
We need some help constructing and deconstructing <a> elements.  Given your new 
knowledge of the <a> element, we’re hoping you can help.   In each row below you’ll find 
some combination of the label, destination, and the complete <a> element.  Fill in any 
information that is missing.  The first row is done for you.
Hot or Not?
hot.html
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.
how to type into a pdf form in reader; pdf form field recognition
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.
extracting data from pdf forms to excel; extract data from pdf form fields
56
Chapter 2
Getting organized
Before you start creating more HTML pages, it’s time to get 
things organized. So far, we’ve been putting all our files and 
images in one folder.  You’ll find that even for modestly-sized Web 
sites, things are much more manageable if you organize your 
Web pages, graphics, and other resources into a set of folders. 
Here’s what we’ve got now:
Your work on the Head First 
Lounge has really paid off.  With 
those enticing elixirs and directions, lots of 
people are frequenting the place and visiting 
the Web site. Now we’ve got plans for 
expanding the lounge’s online content in all 
sorts of directions.
directions.html
lounge
blue.jpg
drinks.gif
red.jpg
green.jpg
lightblue.jpg
<html>
...</html>
lounge.html
<html>
...</html>
<html>
...</html>
elixir.html
And here are all the images.  See, this is 
getting sorta cluttered already, and we only 
have three pages and a few graphics.  Let’s 
do something about it....
We’ve got a top-level folder 
called “lounge” that holds all 
our files in the site.
This is often referred to as the “root” folder of 
the site, which means it is the top-level folder 
that contains the entire site.
Here are the 
three HTML 
files: for the 
lounge, the 
elixirs page, 
and the 
directions.
organizing your site with folders
going further with hypertext
you are here 
57
Organizing the lounge...
Let’s give the lounge site some meaningful organization now. 
Keep in mind there are lots of ways to organize any site; we’re 
going to start simple and create a couple of folders for pages.  
We’ll also group all those images into one place.
Q: 
Since you have a folder for 
images, why not have another one 
called “html” and put all the HTML in 
that folder? 
A: 
You could. There aren’t any 
“correct” ways to organize your files; rather, 
you want to organize them in a way that 
works best for you and your users. As with 
most design decisions, you want to choose 
an organization scheme that is flexible 
enough to grow, while keeping things as 
simple as you can.
Q: 
Or, why not put an images folder 
in each other folder, like “about” and 
“beverages.”
A: 
Again, we could have. We expect 
that some of the images will be reused 
among several pages, so we put images in 
a folder at the root (the top level) to keep 
them all together. If you have a site that 
needs lots of images in different parts of 
the site, you might want each branch to 
have its own image folder.
Q: 
“Each branch”?
A: 
You can understand the way folders 
are described by looking at 
them as upside down 
trees.  At the top is the 
root and each path 
down to a file or folder 
is a branch.
there are no
Dumb Questions
green.jpg
lightblue.jpg
blue.jpg
<html>
...</html>
directions.html
<html>
...</html>
elixir.html
lounge
<html>
...</html>
lounge.html
beverages
about
images
drinks.gif
red.jpg
Our root folder is still the 
“lounge” folder.
We’re going to leave the 
main “lounge.html” page in 
the “lounge” folder.
Let’s create a folder to 
hold pages about the lounge, 
like the directions. We 
could also add new pages 
here about the management, 
events, and so on.
We’ll also create a folder to hold 
pages about the lounge’s beverages.  
Right now that’s just the elixirs, but 
we’ll be adding more soon.
And, let’s group 
all images into 
one folder.
58
Chapter 2
Technical difficulties
It looks like we’ve got a few problems 
with the lounge page after moving 
things around. 
Now you need to create the file and folder structure shown on the previous 
page.  Here’s exactly what you need to do:
 Locate your “lounge” folder and create three new subfolders 
named “about”, “beverages”, and “images”.
Move the file “directions.html” into the “about” folder.
Move the file “elixir.html” into the “beverages” folder.
 Move all the images into the “images” folder.
Finally, load your “lounge.html” file and try out the links.  
Compare with how ours worked below.
4
3
2
1
5
We’ve got an image that 
isn’t displaying. We usually 
call this a “broken image”.
And, when you click on elixirs (or detailed 
directions) things get much worse: we get an 
error saying the page can’t be found.
Some browsers display 
this error as a web page 
rather than a dialog box.
Exercise 
reorganizing and broken links
going further with hypertext
you are here 
59
I think the problem is that 
the browser thinks the files 
are still in the same folder as 
“lounge.html”. We need to change 
the links so they point to the files 
in their new folders.
So far you’ve used href values that 
point to pages in the same folder. Sites 
are usually a little more complicated, 
though, and you need to be able to 
point to pages that are in other folders.
To do that, you trace the path from 
your page to the destination file. That 
might mean going down a folder or two, 
or up a folder or two, but either way we 
end up with a relative path that we can 
put in the href. 
Right.  We need to tell the 
browser the new location 
of the pages.
Documents you may be interested
Documents you may be interested