80
Chapter 3
My first day of the trip! I can’t believe finally 
got everything packed and ready to go. Because 
I’m on a Segway, I wasn’t able to bring a whole 
lot with me: cellphone, iPod, digital camera, and 
a protein bar. Just the essentials.  As Lao Tzu 
would have said, “A journey of a thousand miles 
begins with one Segway.”
June 2, 2005
I saw some Burma Shave style signs on the side of 
the road today: “Passing cars, When you can’t see, 
May get you, A glimpse, Of eternity”. I definitely 
won’t be passing any cars!  
July 14, 2005
Segway’n USA
Documenting my trip around the US on my 
very own Segway!
August 20, 2005
Well I made it 1200 miles already, and I passed 
through some interesting places on the way: Walla Walla, 
WA, Magic City, ID, Bountiful, UT, Last Chance, CO, 
Why, AZ and Truth or Consequences, NM.
Tony’s journal looks a lot like a Web page; all we need to do to 
create the design sketch is to get all his entries on one page and 
map out the general organization.  It looks like, for each day 
that Tony creates an entry, he has a date heading, an optional  
picture, and a description of what happened that day. Let’s 
look at the sketch...
Tony gave his journal a title, 
“Segway’n USA”, so let’s get that 
right at the top as a heading.
He also gave his journal a description.  
We’ll capture that here as a small 
paragraph at the top.
Each day, Tony creates an entry that includes 
the date, usually a picture, and a description 
of the day’s adventures. So, that’s a heading, 
an image, and another paragraph of text.
The rough design sketch
Sometimes he doesn’t include a picture.  In this 
entry he just has a heading (the date) and a 
description of the day’s events.
Unlike Tony’s paper journal, our page length isn’t 
limited, so we can fit many entries on one Web page. 
His friends and family can just use the scroll bar to 
scroll through his entries...
However, notice that we reversed the order of 
the journal entries from newest to oldest.  That 
way the most recent entries appear at the top 
where users can see them without scrolling.
The third entry should look just 
like the first one: a heading, an 
image, and a paragraph.
making a rough sketch
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
how to fill out pdf forms in reader; exporting data from excel to pdf form
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
how to save a pdf form in reader; export excel to pdf form
building blocks
you are here 
81
From a sketch to an outline
Now that you’ve got a sketch of the page, you can take 
each section and draw something that looks more like 
an outline or blueprint for the HTML page... 
All you need to do now is figure out which HTML 
element maps to each content area, and then you can 
start writing the HTML.
Here we’ve taken each area of the 
sketch and created a corresponding 
block in our blueprint.
h1
EXERCISE: Web Construction  
p
img
h2
h3
h4
h5
h6
a
h1
p
img
h2
h3
h4
h5
h6
a
h1
p
img
h2
h3
h4
h5
h6
a
h1
You’ve already figured out the major 
architectural areas of the page; now you just 
need to nail down the building materials. Use 
the elements below to label each area.  You 
won’t use them all, so don’t worry if you have 
some building materials left over.  And don’t 
forget to wear your hard hat.
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 data from pdf form; extract data from pdf file
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.
extracting data from pdf files; extract data from pdf using java
82
Chapter 3
From the outline to a Web page
Now that you know 
what “building blocks” make up 
each part of the page, you can 
translate this blueprint directly 
into HTML.
You’re almost there.  You’ve created an outline of 
Tony’s Web page. Now all you need to do is create 
the corresponding HTML to represent the page 
and fill in Tony’s text.
Before you begin, remember that every Web page 
needs to start with the 
<html>
element and include 
the 
<head>
and 
<body>
elements.
h1
p
h2
img
p
h2
p
h2
img
p
turning the outline into a web page
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.
filling out pdf forms with reader; can reader edit pdf forms
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
collect data from pdf forms; extract data from pdf form fields
building blocks
you are here 
83
<html>
<head>
<title>My Trip Around the USA on a Segway</title>
</head>
<body>
<h1>Segway’n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2005</h2>
<img src=”images/segway2.jpg”>
<p>
Well I made it 1200 miles already, and I passed 
through some interesting places on the way: Walla Walla, 
WA, Magic City, ID, Bountiful, UT, Last Chance, CO, 
Why, AZ and Truth or Consequences, NM.
</p>
<h2>July 14, 2005</h2>
<p>
I saw some Burma Shave style signs on the side of the 
road today: “Passing cars, When you can’t see, May get 
you, A glimpse, Of eternity.” I definitely won’t be passing
any cars.
</p>
<h2>June 2, 2005</h2>
<img src=”images/segway1.jpg”>
<p>
My first day of the trip!  I can’t believe I finally got 
everything packed and ready to go.  Because I’m on a Segway, 
I wasn’t able to bring a whole lot with me: cellphone, iPod, 
digital camera, and a protein bar. Just the essentials.  As
Lao Tzu would have said, “A journey of a thousand miles begins
with one Segway.”
</p>
</body>
</html>
Don’t forget, you always need the <html>, 
<head>, <title> and <body> elements.
We’re using the title of the journal as the 
title of the Web page.
Here’s the heading and 
description of Tony’s journal.
Here’s Tony’s most 
recent entry.
And at the bottom, 
Tony’s first entry, 
with the image 
“segway1.jpg”.
Last, but not least, don’t forget to close 
your <body> and <html> elements.
Go ahead and type this in. Save your file to the “chapter3/journal” folder as “journal.html”.  You’ll find the images “segway1.jpg” 
and “segway2.jpg” already in the “images” folder. When you’re done, give this page a test drive.
Here’s his second 
entry, which doesn’t 
have an image.
heading 
image 
description
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 data to excel; how to save fillable pdf form in reader
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.
how to extract data from pdf to excel; how to flatten a pdf form in reader
84
Chapter 3
Test driving Tony’s Web page
Look how well this page has come 
together. You’ve put everything in 
Tony’s journal into a readable and 
well-structured Web page.
Fantastic! This looks 
great; I can’t wait to 
add more entries to my page.
Tony’s calling in 
from the road...
My first day of the trip! I can’t believe I 
finally got everything packed and ready to go. 
Because I’m on a Segway, I wasn’t able to bring 
a whole lot with me: cellphone, iPod, digital 
camera, and a protein bar. Just the essentials. 
As Lao Tzu would have said, “A journey of a 
thousand miles begins with one step Segway.”
June 2, 2005
I saw some Burma Shave style signs on the side of 
the road today: “Passing cars, When you can’t see, 
May get you, A glimpse, Of eternity.” I definitely 
won’t be passing any cars!  
July 14, 2005
Segway’n USA
Documenting my trip around the US on my 
very own Segway!
August 20 2005
Well I made it 1200 miles already, and I passed 
through some interesting places on the way: 
Walla Walla, WA, Magic City, ID, Bountiful, 
UT, Last Chance, CO, Why, AZ and Truth or 
Consequences, NM.
test driving tony’s 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.
pdf form save with reader; make pdf form editable in reader
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 type into a pdf form in reader; vb extract data from pdf
building blocks
you are here 
85
Adding some new elements
You have the basic elements of HTML down. You’ve gone from a hand-
written journal to an online version in just a few steps using the basic 
HTML elements 
<p>
<h1>
<h2>,
and <img>.
Now we’re going to s-t-r-e-t-c-h your brain a little and add a few more 
common elements. Let’s take another look at Tony’s journal and see 
where we can spruce things up a bit...
Check this out: Tony has a little quote stuck 
at the end of his first post. It’s his remixed 
version of a Lao Tzu quote: “A journey of a 
thousand miles begins with one Segway.”
HTML has an element, <q>, for just that kind of thing.  
Let’s take a look on the next page...
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.
using pdf forms to collect data; pdf data extractor
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 pdf data into excel; how to save a filled out pdf form in reader
86
Chapter 3
Got a short quote in your HTML? The 
<q>
element is just what 
you need. Here’s a little test HTML to show you how it works:
Meet the <q> element
<html>
<head>
<title>Quote Test Drive</title>
</head>
<body>
<p>
You never know when you’ll need a good quote, how
about <q>To be or not to be</q>, or <q>Wherever you go, there you are</q>.
</p>
</body>
</html>
We’ve got two quotes in this HTML...
We surround each quote with a <q> opening tag and 
a </q> closing tag. Notice that we don’t put our own 
double quote characters around the quotes.
And here’s how the quotes look in the 
browser. Notice the browser has gone to 
the trouble of adding the double quotes.  
...and check out the test drive...
This is unfortunate, because if you add your own 
double quotes, some browsers will display TWO sets 
of quotes.  The only way to solve this conundrum is 
to use CSS to add some visual style to your quotes, 
such as italics.  We’ll show you how to add italics to 
your elements in Chapter 9.
Some browsers, including 
Internet Explorer version 6, do 
not display double quotes around 
the content in the <q> element.
Watch it!
quotes in your html
building blocks
you are here 
87
Wait a sec... you removed 
the double quotes and substituted a 
<q>
element, which just displays double 
quotes? Am I supposed to be impressed? 
Are you 
trying
to make things  more 
complicated?
There are lots of reasons people use double quotes in 
text, but when we use 
<q>
that means something specific 
– it means the text of an actual quote (in Tony’s case, a 
“remixed” quote).
In other words what we’ve done is to add some 
additional meaning by marking up the quote.  Before we 
added the 
<q>
element, the browser just knew it had a 
paragraph of text with a few double quote characters 
in it. Now, because we’re using the 
<q>
element, the 
browser knows that some of that text is a real quote.  
So what?  Well, now that the browser knows this is a 
quote it can display it in the best way possible. Some 
browsers will display double quotes around the text, 
some won’t, and in instances where browsers are using 
non-English languages, other methods might be used. 
And don’t forget mobile devices, like cell phones, or 
audio HTML browsers for the visually impaired. It’s 
also useful in other situations, such as a search engine 
that scours the Web looking for Web pages with quotes. 
Structure and meaning in your pages are Good Things.
One of the best reasons (as you’ll see when we get back 
to presentation and CSS later in the book) is that you’ll 
be able to style quotes to look just the way you want.  
Suppose you want quoted text to be displayed in italics 
and colored gray? If you’ve used the 
<q>
element to 
structure the quoted content in your Web pages, you’ll be 
able to do just that.
No. We’re trying to make things 
more structured and meaningful.
See! Using double quotes 
doesn’t make something 
an actual quote.  
88
Chapter 3
Here’s Tony’s journal.  Go ahead and rework his Lao Tzu quote to use the <q> 
element.  After you’ve done it on paper, make the changes in your “journal.html” 
file and give it a test drive. You’ll find the solution in the back of the chapter.
<html>
<head>
<title>Segway’n USA</title>
</head>
<body>
<h1>Segway’n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2005</h2>
<img src=”images/segway2.jpg”>
<p>
Well I made it 1200 miles already, and I passed 
through some interesting places on the way: Walla Walla, 
WA, Magic City, ID, Bountiful, UT, Last Chance, CO, 
Why, AZ and Truth or Consequences, NM.
</p>
<h2>July 14, 2005</h2>
<p>
I saw some Burma Shave style signs on the side of the 
road today: “Passing cars, When you can’t see, May get 
you, A glimpse, Of eternity.” I definitely won’t be passing
any cars.
</p>
<h2>June 2, 2005</h2>
<img src=”images/segway1.jpg”>
<p>
My first day of the trip!  I can’t believe I finally got 
everything packed and ready to go.  Because I’m on a Segway, 
I wasn’t able to bring a whole lot with me: cellphone, iPod, 
digital camera, and a protein bar. Just the essentials.  As
Lao Tzu would have said, “A journey of a thousand miles begins
with one Segway.”
</p>
</body>
</html>
Exercise 
adding a quote
building blocks
you are here 
89
The Case of the Elements Separated at Birth
Identical twins were born in Webville a number of years ago and by a 
freak accident involving an Internet router malfunction, the twins were 
separated shortly after birth. Both grew up without knowledge of the 
other, and only through another set of freak circumstances did they later 
meet and discover their identity, which they decided to keep secret.  
After the discovery, they quickly learned that they shared a surprising 
number of things in common. Both were married to wives named 
Citation. They also both had a love for quotations. The first twin, 
the <q> element, loved short, pithy quotes, while the second, 
<blockquote>, loved longer quotes, often memorizing 
complete passages from books or poems.
Being identical twins, they bore a strong resemblance to each other, and 
so they decided to put together an evil scheme whereby they might stand 
in for each other now and then. They first tested this on their wives (the 
details of which we won’t go into) and they passed with flying colors 
their wives had no idea (or at least pretended not to).
Next they wanted to test their switching scheme in the work place 
where,  as another coincidence, they both performed the same job: 
marking up quotes in HTML documents.  So, on the chosen day, the 
brothers went to the other’s work place fully confident they’d pull off 
their evil plan (after all, if their wives couldn’t tell, how could their 
bosses?), and that’s when things turned bad. Within 10 minutes of 
starting the work day, the brothers had both been found to be imposters 
and the standards authorities were immediately alerted.
How were the twins caught in the act?  
Keep reading for more clues...
Five-Minute
Mystery
Documents you may be interested
Documents you may be interested