c# pdfsharp sample : Save pdf forms in reader SDK application service wpf windows .net dnn Learn_HTML_in_5_Minutes_Jennifer_Marsman0-part1339

Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 1 of 17
 
Learn HTML5 in 5 Minutes! 
  
By Jennifer Marsman
 
There’s no question, HTML5 is a hot topic for developers. If you need a crash course to quickly understand the 
fundamentals of HTML5’s functionality, you’re in the right place.  
I’ll cover the new semantic markup, canvas for drawing and animation, audio and video support, and how to use 
HTML5 with older browsers. Might be a bit more than five minutes, but I promise I’ll keep it quick. Stick with me…it’ll 
be worth it!  
Semantic Markup and Page Layout 
There’s a great story about a university who, when building their campus, didn’t create any walking paths. They just 
planted grass and waited.  
A year later, the grass was all worn out where people walked most frequently. So that’s where the university paved the 
actual sidewalks.  
It makes perfect sense! The sidewalks were exactly where people actually walked.  
The HTML5 new semantic elements were based on that exact same logic (see the W3C design guidance to “Pave the 
Cowpaths”).  
Semantic elements describe their meaning or purpose clearly to the browser and to the developer. Contrast that with 
(for example) the <div> tag. The <div> tag defines a division or a section in an HTML document, but it doesn’t tell us 
anything about its content or convey any clear meaning.  
<div
Developers commonly use IDs and/or class names with these <div> tags. This conveys more meaning to the 
developers, but unfortunately, it doesn’t help browsers derive the purpose of that markup.  
<div id="header"> 
In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers 
and browsers.  
<header
The W3C mined billions of existing webpages to discover the IDs and class names that developers were already using. 
Once they threw out div1, div2, etc., they came up with a list of rich descriptive elements that were already being 
used, and made those the standards.  
Here are a few of the new semantic elements in HTML5: 
article  
Save pdf forms in reader - 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
pdf form field recognition; exporting pdf data to excel
Save pdf forms in reader - 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
extracting data from pdf into excel; exporting data from pdf to excel
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 2 of 17
 
aside  
figcaption  
figure  
footer  
header  
hgroup  
mark  
nav  
section  
time  
Because of the semantic richness, you can probably guess what most of these elements do.  
But just in case, here’s a visualisation: 
Headers and footers are self-explanatory and nav creates a navigation or menu bar. You can use sections and 
articles to group your content. Finally, the aside element can be used for secondary content, for example, as a 
sidebar of related links.  
Here is a simple example of some code that uses these elements.  
<!DOCTYPE html
<html
<head
<meta charset="utf-8" /> 
<title>Title</title
<link href="css/html5reset.css" rel="stylesheet" /> 
<link href="css/style.css" rel="stylesheet" /> 
</head
<body
<header
<hgroup
<h1>Header in h1</h1
<h2>Subheader in h2</h2
</hgroup
</header
<nav
C# PDF: PDF Document Viewer & Reader SDK for Windows Forms
file in different display formats, and save source PDF introduction to RasterEdge C#.NET PDF document viewer & reader for Windows Forms application, you
java read pdf form fields; how to type into a pdf form in reader
C# PDF: How to Create PDF Document Viewer in C#.NET with
Eaisly save and print designed PDF document using C# code; PDF document viewer can be created in C# Web Forms, Windows Form and mobile applications.
html form output to pdf; extracting data from pdf files
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 3 of 17
 
<ul
<li><href="#">Menu Option 1</a></li
<li><href="#">Menu Option 2</a></li
<li><href="#">Menu Option 3</a></li
</ul
</nav
<section
<article
<header
<h1>Article #1</h1
</header
<section
This is the first article.  This is <mark>highlighted</mark>
</section
</article
<article
<header
<h1>Article #2</h1
</header
<section
This is the second article.  These articles could be blog 
posts, etc.   
</section
</article
</section
<aside
<section
<h1>Links</h1
<ul
<li><href="#">Link 1</a></li
<li><href="#">Link 2</a></li
<li><href="#">Link 3</a></li
</ul
</section
<figure
<img width="85" height="85"  
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"  
alt="Jennifer Marsman" /> 
<figcaption>Jennifer Marsman</figcaption
</figure
</aside
<footer>Footer - Copyright 2011</footer
</body
</html
I should call out a few other new elements in this code… 
Did you notice the hgroup element, which grouped together my h1 and h2 headers?  
The mark element allowed me to highlight or mark some important text. Finally, the figure and figcaption elements 
specify a figure in my content (like an image, diagram, photo, code snippet, etc.) and let me associate a caption with 
that figure, respectively.  
Here’s what that webpage would look like when combined with some CSS. (NOTE: I borrowed this CSS from my 
talented teammate Brandon Satrom ’s TechEd talk, but the less-than-beautiful end effect was all me.) 
VB.NET Word: .NET Word Reader & Processor Control SDK | Online
How to save target Word file (with desired storage like ASP.NET web application, Windows Forms project and for converting Word document file to PDF, png, gif
extract data from pdf table; how to make a pdf form fillable in reader
VB.NET PDF: VB Code to Create PDF Windows Viewer Using DocImage
with great capabilities to view, annotate, process, save and scan and BMP) and document files (TIFF, PDF and Word NET, VB.NET, ASP.NET and .NET Windows Forms.
pdf data extraction tool; extract table data from pdf to excel
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 4 of 17
 
Now, imagine this in the hands of someone actually good at CSS (which I am not). The result is pretty powerful. The 
descriptiveness of the HTML makes it super easy to work with.  
Finally, if you’re trying to follow along in Visual Studio but you’re seeing squiggly lines everywhere that VS doesn’t 
understand the HTML5 elements, make sure you have Visual Studio 2010 SP1 installed.  
Then, in the Visual Studio menu, go to Tools, Options. In the left-hand navigation pane, expand Text Editor, HTML, 
and then click Validation. From the Target dropdown menu, select HTML5. This will give you HTML5 IntelliSense 
support. Whew!  
C# PDF Convert to Images SDK: Convert PDF to png, gif images in C#
Besides raster image Jpeg, images forms like Png, Bmp, Gif, .NET Description: Convert all the PDF pages to target format images and save them into
how to fill out a pdf form with reader; how to save a filled out pdf form in reader
Save, Print Image in .NET Winforms | Online Tutorials
PDF Generator. PDF Reader. Twain Scanning. DICOM Reading. ISIS & printing capabilities into your Windows Forms applications Save images & documents to the disk; Save
save pdf forms in reader; export pdf form data to excel spreadsheet
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 5 of 17
 
To dive deeper into semantic elements, check out: 
How to Enable HTMl5 Standards Support 
Semantics section of the W3C HTML5 specification 
Dive into HTML5 chapter on semantics entitled “What Does It All Mean?”  
Drawing in HTML5 using the Canvas element 
Another new element in HTML5 is the <canvas> tag. It’s just what it sounds like——a blank surface for drawing. You 
need to use JavaScript to manipulate and draw on the canvas.  
You may want to give your canvas element an id attribute so you can programmatically access it from your JavaScript 
code (or if you’re using jQuery and it’s the only canvas on the page, you could access it using $(‘canvas’) without 
needing to name it).  
You can also (optionally) specify a height and a width for the canvas. Between the <canvas> and </canvas>, you can 
specify some text to display in browsers that don’t support the canvas element.  
Here is a simple example of using the canvas to draw. (I’m attempting to draw the flag of Scotland . Please forgive any 
inaccuracies.)  
<!DOCTYPE HTML
<html
<body
<canvas id="myCanvas">Your browser does not support the canvas 
tag.</canvas
<script type="text/javascript"> 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
// Draw blue rectangle 
ctx.fillStyle = '#0065BD'
ctx.fillRect(0, 0, 125, 75); 
// Draw white X 
ctx.beginPath(); 
ctx.lineWidth = "15"
ctx.strokeStyle = "white"
ctx.moveTo(0, 0); 
ctx.lineTo(125, 75); 
ctx.moveTo(125, 0); 
ctx.lineTo(0, 75); 
ctx.stroke(); 
</script
</body
</html> 
Here’s what the code produces: 
C# PDF Page Insert Library: insert pages into PDF file in C#.net
document in both web server-side application and Windows Forms project using doc2.Save(outPutFilePath Add and Insert Multiple PDF Pages to PDF Document Using
extract data from pdf forms; pdf form save in reader
C# PDF: Start to Create, Load and Save PDF Document
APIs will be used to achieve PDF document saving in void Save(String fileName); void SaveToStream(Stream stream ASP.NET AJAX, Silverlight, Windows Forms as well
extract data from pdf file to excel; how to save a pdf form in reader
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 6 of 17
 
Now let’s walk through the code.  
First, I create the actual canvas and give it an ID of “myCanvas”. If this code were viewed in a browser that doesn’t 
support the HTML5 canvas element, it would display “Your browser does not support the canvas tag” instead of 
drawing the flag.  
Next, I have a script. Remember, the canvas tag is only a container for graphics; you must use JavaScript to actually 
draw and render graphics on it. First, I grab a reference to the canvas using the “myCanvas” ID, and then get the 
canvas’s context which provides methods/properties for drawing and manipulating graphics on the canvas. I specified 
“2d” to use a 2-dimensional context to draw on the page.  
Then, I draw the blue rectangle. I use fillStyle to specify the blue color. I use fillRect to draw the rectangle, 
specifying the size and position. Calling fillRect(0, 0, 125, 75) means: starting at position (0, 0)——the upper left-hand 
corner——draw a rectangle with width=125 pixels and height=75 pixels.  
Finally, I draw the white X on the flag. I first call beginPath to start the process of painting a path. I specify a 
lineWidth of 15 pixels (using the guess-and-check method of trying different values until it looked correct) and a 
strokeStyle of “white” to make the path’s color white. Then I trace out the path using moveTo and lineTo. These 
methods position a “cursor” for you to draw; the difference is that moveTo moves the cursor without drawing a line 
and lineTo draws a line while moving. I start by moving to position (0, 0)——the upper left-hand corner——and then 
drawing a line to (125, 75)——the lower right-hand corner. Then I move to position (125, 0)——the upper right-hand 
corner——and draw a line to (0, 75)——the lower left-hand corner. Finally, the stroke method actually renders these 
strokes.  
Quick Comparison of Canvas vs. SVG 
Scalable Vector Graphics (SVG) is an earlier standard for drawing in a browser window. With the release of HTML5’s 
canvas, many people are wondering how they compare.  
In my eyes, the biggest difference is that canvas uses immediate mode rendering and SVG uses retained mode 
rendering. This means that canvas directly causes rendering of the graphics to the display. In my code above, once 
the flag is drawn, it is forgotten by the system and no state is retained. Making a change would require a complete 
redraw. In contrast, SVG retains a complete model of the objects to be rendered. To make a change, you could simply 
change (for example) the position of the rectangle, and the browser would determine how to re-render it. This is less 
work for the developer, but also more heavyweight to maintain a model.  
The ability to style SVG via CSS in addition to JavaScript is worth calling out as another consideration. A canvas may 
be manipulated through JavaScript only.  
Here is a high-level overview of other differences:  
Canvas 
SVG 
Abstraction 
Pixel-based (dynamic bitmap) 
Shape-based 
Elements 
Single HTML element 
Multiple graphical elements which 
become part of the Document Object 
VB.NET Image: How to Save Image & Print Image Using VB.NET
ASP.NET web application or .NET Windows Forms project, without Allow VB.NET developers to save source image file to multi-page document files, like PDF and Word
save data in pdf form reader; how to save filled out pdf form in reader
VB.NET Word: VB Code to Create Windows Word Viewer | Online
Word documents displaying, processing and printing in .NET Windows Forms project. Word Windows Viewer enables developers to load, view, process, save and print
extract data out of pdf file; extract data from pdf form
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 7 of 17
 
Model (DOM) 
Driver 
Modified through Script only 
Modified through Script and CSS 
Event Model 
User Interaction is granular (x,y) 
User Interaction is abstracted (rect, path) 
Performance 
Performance is better with smaller 
surface and/or larger number of objects 
Performance is better with smaller 
number of objects and/or larger surface 
For a more detailed comparison, I want to point you to some sessions (from which I pulled this fabulous table, with 
permission):  
Patrick Dengler’s “Thoughts on When to use SVG and Canvas” 
Jatinder Mann’s “Deep Dive Into HTML5 Canvas 
John Bristowe’s “An Introduction to HTML5 Canvas”  
Audio and Video Support 
One of the big features that is new in HTML5 is the ability to support playing audio and videos. Prior to HTML5, you 
needed a plug-in like Silverlight or Flash for this functionality. In HTML5, you can embed audio and video using the 
new <audio> and <video> tags.  
From a coding perspective, the audio and video elements are very simple to use. (I’ll give you a more in-depth look at 
their attributes below.) The audio and video elements are also supported in all major browsers (the latest versions of 
Internet Explorer, Firefox, Chrome, Opera, and Safari). However, the tricky part is that you need codecs to play audio 
and video, and different browsers support different codecs. (For a wonderful in-depth explanation of video containers 
and codecs, read http://diveintohtml5.org/video.html.)  
Fortunately, this isn’t a show-stopper. The support for audio and video was implemented in a brilliant way, where 
there is support to try several different file formats (the browser will try each and then drop down to the next one if it 
can’t play it).  
As a best practice, you should provide multiple sources of audio and video to accommodate different 
browsers. You can also fallback to Silverlight or Flash. Finally, any text between the opening and closing tags (such as 
<audio> and </audio>) will be displayed in browsers that do not support the audio or video element.  
For example: 
<audio controls="controls"> 
<source src="laughter.mp3" type="audio/mp3" /> 
<source src="laughter.ogg" type="audio/ogg" /> 
Your browser does not support the audio element. 
</audio
With this code, the browser will first try to play the laughter.mp3 file. If it does not have the right codecs to play it, it 
will next try to play the laughter.ogg file. If the audio element is not recognized at all by the browser, it will display the 
text “Your browser does not support the audio element” where the audio control should be.  
One caveat to audio and video: there is no built-in digital rights management (DRM) support; you have to implement 
this yourself as the developer. See this link from the W3C which explains their position. (If you have a need for DRM 
content, also check out the Silverlight DRM documentation, which might be an easier solution.)  
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 8 of 17
 
Now let’s dive into each of these new elements.  
Audio 
First, let’s look at <audio> in more detail.  
<audio controls="controls"> 
<source src="laughter.mp3" type="audio/mp3" /> 
<source src="laughter.ogg" type="audio/ogg" /> 
Your browser does not support the audio element. 
</audio
We already discussed the fallback effect of trying each source until it hopefully finds one that can be played.  
Note that there is a controls attribute. This will display audio playback controls including a play/pause button, the 
time, a mute button, and volume controls. In most situations, it’s good to display audio controls to the user; I hate 
visiting a website with sound and being unable to stop it, mute it, or turn it down. Don’t you?  
Here’s what the audio controls look like in Internet Explorer: 
The controls look different in different browsers. Here are what they look like in Chrome (with a song playing). The 
drop-down volume pops down when you hover over the sound icon on the far right.  
Here are the controls in Firefox (with a song paused). Like Chrome, it also has a pop-up volume control (not shown) 
when you hover over the sound icon on the far right.  
Other fun attributes on the audio element include: 
Attribute 
Possible 
Values 
Description 
autoplay 
autoplay 
Starts the audio playing as soon as it’s ready 
controls  controls 
Displays audio playback controls on the page 
loop 
loop 
Causes audio to repeat and play again every time it 
finishes 
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 9 of 17
 
preload 
auto, 
metadata, 
none 
Determines whether to load the audio when the page is 
loaded. The value auto will load the audio, metadata will 
load only metadata associated with the audio file, and 
none will not preload audio. (This attribute will be 
ignored if autoplay is specified.) 
src 
(some URL) 
Specifies the URL of the audio file to play 
So this code sample would not only display audio playback controls, but also start the audio playing immediately and 
repeat it over and over in a loop.  
<audio controls="controls" autoplay="autoplay" loop="loop"> 
<source src="laughter.mp3" type="audio/mp3" /> 
<source src="laughter.ogg" type="audio/ogg" /> 
Your browser does not support the audio element. 
</audio
If you’d like to play around with the <audio> element yourself in your browser, there is a great “Tryit Editor” on 
http://w3schools.com that allows you to edit some sample code and see what happens. Or try the How to add an 
HTML5 audio player to your site article.  
Video 
Now, let’s examine the <video> element.  
<video width="320" height="240" controls="controls"> 
<source src="movie.ogg" type="video/ogg" /> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.webm" type="video/webm" /> 
Your browser does not support the video tag. 
</video
As we discussed above, the video element has support for multiple sources, which it will try in order and then fall 
down to the next option.  
Like audio, video has a controls attribute. Here is a screenshot of the video controls in Internet Explorer: 
Learn HTML in 5 Minutes_Jennifer Marsman.docx 
Page 10 of 17
 
Other fun attributes of the video element include: 
Attribute 
Possible 
Values 
Description 
audio 
muted 
Sets the default state of the audio (currently, “muted” is the only 
option) 
autoplay  autoplay 
Starts the video playing as soon as it’s ready 
controls 
controls 
Displays video playback controls on the page 
height 
(value in pixels)  Sets the height of the video player 
loop 
loop 
Causes video to repeat and play again every time it finishes 
poster 
(some URL) 
Specifies the URL of an image to represent the video when no 
video data is available 
preload 
auto, metadata, 
none 
Determines whether to load the video when the page is loaded. 
The value auto will load the video, metadata will load only 
metadata associated with the video file, and none will not preload 
video. (This attribute will be ignored if autoplay is specified.) 
src 
(some URL) 
Specifies the URL of the video file to play 
width 
(value in pixels) 
Sets the width of the video player 
Again, to play around with the <video> element yourself, use the “Tryit Editor” from http://w3schools.com  that allows 
you to edit some sample code and see what happens.  
To learn more about video and audio, check out:  
5 Things you need to know to start using <audio> and <video> today 
How to add an HTML5 audio player to your site 
W3C Schools HTML5 video
Develop with HTML5 while retaining support for older browsers 
We’ve discussed a lot of cool new functionality in HTML5, including the new semantic elements, the canvas tag for 
drawing, and the audio and video support.  
You may think that this stuff is really cool, but you can’t possibly adopt HTML5 when many of your users 
don’t have HTML5-compatible browsers yet. Not to mention that the browsers that DO support HTML5 support 
different pieces of it; not all of the new HTML5 functionality is supported in all browsers and various features may be 
implemented differently.  
But there is a way to use the new features without breaking your site for users with older browsers. You can use 
polyfills.  
According to Paul Irish, a polyfill is “a shim that mimics a future API, providing fallback functionality to older 
browsers.” A polyfill fills in the gaps in older browsers that don’t support the HTML5 functionality in your site. 
Learning to use polyfills will let you use HTML5 today without leaving behind users of older browsers.  
One way to get polyfill support is the JavaScript library Modernizr (but there are many polyfills available). Modernizr 
adds feature detection capability so you can check specifically for whether a browser supports (for example) the 
canvas element and provide a backup option if it doesn’t.  
Let’s walk through an example. Remember the code sample that I used when introducing semantic elements and 
page layout? Here it is again: 
Documents you may be interested
Documents you may be interested