c# pdf viewer open source : Bookmark pdf acrobat control SDK platform web page wpf .net web browser DevPro%20HTML5%20PDF1-part1484

How many <div> tags would you guess there are on the web functioning as the container for footer 
information? Well, the count is so high it became obvious that a tag was needed to represent this 
information. In HTML5, the tag looks like this:
<footer>&copy; Copyright 2011 Egan &amp; Palermo</footer>
The main purpose of semantic elements is to provide context to the data. These tags are not about 
how the content looks. Rather, they are more concerned about the substance of the content. You 
modify the appearance of these elements through CSS.
The <input> tag in HTML5 supports new attribute types, shown in Figure 6.
Figure 6: New input attributes
Although not all browsers support these new attribute types, it is clear that these types will map nicely 
with our modern entry forms.
Audio and Video Capabilities
Support for multimedia via the <audio> and <video> tags is another welcome addition to HTML5. 
What used to require a plug-in is now accomplished with simple HTML tags. Getting started is very 
easy. Observe the following markup and the screen shot in Figure 7:
10
Chapter 1: The Past, Present, and Future of HTML5 
Bookmark pdf acrobat - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
how to create bookmark in pdf automatically; how to add a bookmark in pdf
Bookmark pdf acrobat - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
create bookmarks in pdf reader; how to bookmark a pdf in reader
<video src=”big_buck_bunny.mp4” controls> 
Sorry, your browser does not support the video tag. 
</video>
With just a few lines of code, you can have a video up and running with interactive controls for 
your users to manage! The controls attribute can stand by itself, or you can use controls=”controls” 
to provide the XML-friendly approach. Also, note that within the tags you can provide optional text 
that will be displayed if the browser does not support the video tag. As you select your video formats, 
remember that not all browsers support the same video types.
If adding video seems easy, HTML5 makes it just as easy to add audio to your site. The markup is 
fairly similar:
<audio src=”music.mp3” controls> 
Sorry, your browser does not support the audio tag. 
</audio>
Like the <video> tag, the <audio> tag contains a controls attribute for visual display to manage 
volume and positioning of audio, as Figure 8 shows.
Figure 8: HTML5 audio control
Although this example features an MP3 audio file, be aware that not all browsers support the same 
audio types.
A very exciting addition to HTML5 is the <canvas> tag. With this new feature, developers can add 
rich graphical experiences to their web pages. Think of a canvas as you would visual art in the real 
world. A painting canvas is usually a blank rectangle waiting to be drawn or painted upon. Likewise, 
in your web page, a canvas is a designated section of the page that you can draw on. By using the 
<canvas> tag, you eliminate the need for plug-ins that provide animations. Here is an example of how 
to declare a simple <canvas> tag:
Chapter 1: The Past, Present, and Future of HTML5  
11
C# PDF Converter Library SDK to convert PDF to other file formats
manipulate & convert standard PDF documents in .NET class applications independently, without using other external third-party dependencies like Adobe Acrobat.
create pdf with bookmarks from word; add bookmarks to pdf file
.NET PDF Document Viewing, Annotation, Conversion & Processing
Search text content inside PDF. Extract bookmark & outlines. Edit, update, delete PDF annotations from PDF file. Support for all the print modes in Acrobat PDF.
export pdf bookmarks to text file; bookmark pdf documents
<canvas id=”myArtwork” width=”200” height=”200”> 
Your browser does not support the canvas element. </canvas>
To begin your artwork, you need calls in JavaScript are needed. Using the canvas from the preceding 
example,Figure 9 shows how to draw a simple blue square.
Figure 9: JavaScript for canvas
<script type=”text/javascript”> 
var art=document.getElementById(“myArtwork”); 
var ctx=art.getContext(“2d”); 
ctx.fillStyle=”#FF0000”; 
ctx.fillRect(0,0,150,75); 
</script>
To what degree can the <canvas> tag enhance the user experience? You really must try it yourself 
to experience the difference. However, to give you an idea, Figure 10 presents a screen shot of the 
game “Pirates Love Daisies.” This tower-defense game is packed with action, animation, and stimu-
lating sounds. It is so well done that you might find yourself doubting it is a pure HTML5 page.
Figure 10: Pirates Love Daisies game
Another striking demo that showcases a variety of HTML5 features, including Scalable Vector 
Graphics (SVG) support, is found at director.bonjovi.com. This page, shown in Figure 11, allows a fan 
to drag and drop clips onto a circular timeline, add effects, and publish a custom Bon Jovi video.
12
Chapter 1: The Past, Present, and Future of HTML5 
C# Windows Viewer - Image and Document Conversion & Rendering in
standard image and document in .NET class applications independently, without using other external third-party dependencies like Adobe Acrobat. Convert to PDF.
pdf bookmark; how to bookmark a pdf file in acrobat
C# Word - Word Conversion in C#.NET
Word documents in .NET class applications independently, without using other external third-party dependencies like Adobe Acrobat. Word to PDF Conversion.
add bookmark pdf; create bookmarks pdf file
Figure 11: Custom Bon Jovi video
Web Storage
Web storage represents another nice addition to HTML5. Web storage is a highly anticipated feature 
that allows larger amounts of data to be stored locally in the browser without generating a perfor-
mance hit on round trips. The primary way developers handle local storage today is through cookies. 
The disadvantage of cookies is that the data is passed back and forth with every HTTP request or 
response.
In HTML5, developers can use one of two options: local or session storage. The difference is that ses-
sion storage expires when the browser session ends, while local storage has no time limit. This web-
storage feature is available through objects in JavaScript. Here is an example of how to store a display 
name in local storage:
<script type=”text/javascript”> 
localStorage.DisplayName=”Egan-Palermo”; 
</script>
Note that in the preceding example, DisplayName was made up on the fly. The property name can be 
whatever you want it to be.
No Better Time to Be a Web Developer
What we have covered so far is just a taste of the new features in HTML5. In upcoming articles in this 
series, we will demonstrate how to leverage specific features in greater depth.
Chapter 1: The Past, Present, and Future of HTML5  
13
This is an exciting time to be a web developer! Whether you are developing publicly for the web or 
creating internal sites for your company, HTML5 has much to offer in providing sorely needed features 
that are native to the browser. With growing support among all the major browsers and with new sites 
emerging that consistently use it, HTML5 is a must-visit technology for any serious web developer 
today.
14
Chapter 1: The Past, Present, and Future of HTML5 
Chapter 2: Three of the Most Important 
Basic Elements in HTML5
New HTML5 elements--header, nav, and footer--improve consistency  
of web page coding 
By Michael Palermo and Daniel Egan
In Chapter 1 we discussed the evolution from HTML to HTML5 in order to provide a firm founda-
tion for understanding HTML5 coding. Now we’re ready to dive into some of the most important and 
useful HTML5 elements.
In the HTML5 world, much emphasis has been placed on features such as animation, the <video> 
tag, and hardware acceleration. However, in our opinion, only a small percentage of developers will 
be working with these high-profile elements. While the cool factor of sites like html5gallery.com is 
definitely a draw for developers and designers, the more mundane but nevertheless important ele-
ments will make a much bigger impact. In this article, we will discuss some of the new elements that 
are now available in HTML5, specifically <header>, <nav>, and <footer>.
Although these elements are not technically difficult to use, it is important to address why we use 
them. A few years ago, I (Daniel Egan) got my first taste of HTML5 at a code camp. As the speaker 
discussed elements such as <header>, <footer>, and <article>, I thought, “What’s the big deal? Won’t 
more elements just serve to clutter up HTML even more? Why should I even care about this?” What 
we have learned since then is that these elements are important for a variety of reasons.
Reasons to Care about HTML5
Although these new elements are quite simple to use, their implications for the web are both subtle 
and profound. For example, web developers and designers are very accustomed to the universal, 
catch-all <div> element—which no longer exists in HTML5. The division element, as the name 
implies, divides markup into appropriate sections. But in practice, the <div> element is used for every-
thing. Therefore, it loses its effectiveness as an element itself. Even worse, the IDs used within the div 
element aren’t consistent, as Figure 1 shows.
Chapter 2: Three of the Most Important Basic Elements in HTML5 
15
Figure 1: Inconsistent IDs used in the <div> element
Although it would be nice if each and every developer used the same nomenclature, as shown in 
Figure 1, we know that individuality reigns supreme. Without consistency, there is no way to have any 
hooks into a web page. Hooks might include readers for the visually impaired or keystrokes that hook 
into certain areas of a site or that direct the user’s focus onto a particular section of a page. None of 
this can be done at the browser or machine level because there is no consistent naming at that level. 
That’s where this very simple and sometimes overlooked portion of the HTML5 specifications come in 
handy.
Although you can’t count on certain sections of HTML pages to have the same name, a great majority 
of developers do use consistent naming practices for particular sections. In 2004, Ian Hickson, editor 
of the HTML5 specifications, did a Google search to determine the most common names used by 
developers. The names used by HTML5 for the new elements include many of these commonly used 
names; you can see the HTML5 and class-name mapping here.
Of course, that doesn’t mean you can easily map your HTML code to the new elements; what it does 
mean, however, is that developers have a certain comfort level by using these names. While this 
simplicity might seem like a small detail, anyone who has ever done a redesign of a system knows 
that easing the transition is a big part of making the redesign successful. Simplicity is sometimes both 
overlooked and underestimated.
Now that we have discussed why we care about these elements, let’s dive right into their use. If you 
like digging into functional specifications, go to the W3C HTML5 spec overview page. There you will 
find the definition and usage specification for each of these elements.
16
Chapter 2: Three of the Most Important Basic Elements in HTML5
Header Element
We might as well start at the head of the class: the <header> element. According to the aforemen-
tioned W3.org site, “The header element represents a group of introductory or navigational aids… [It] 
is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this 
is not required. The header element can also be used to wrap a section’s table of contents, a search 
form, or any relevant logos.” In other words, the header element contains the stuff developers have 
been putting in their <div id=”header”> tag for many years. Figure 2 shows an example of the header 
element.
Figure 2: The HTML5 <header> element
<!doctype html > 
<html lang=en> 
<head> 
<title>This is my sample</title> 
<meta charset=”utf-8”/> 
</head> 
<body> 
<header> 
<a href=”/”><img src=”HighFive.png” alt=”main” /></a> 
<hgroup> 
<h1>HighFive HTML5 Training</h1> 
<h2>The one stop shop for all things HTML5</h2> 
</hgroup> 
</header> 
<footer> 
</footer> 
</body> 
</html>
You may notice from the code in Figure 2 that the syntax that starts with <!doctype html> is quite dif-
ferent from what you’re used to. The syntax has been simplified and no longer requires the long URL 
that we have become accustomed to. Additionally, the tag is not case sensitive. For example, <!DOC-
TYPE html> is the same as <!DoCtyPe html>. As a matter of fact, you can even leave out the <html>, 
<head>, and <body> tags because they are implied in HTML5. However, we do not recommend 
leaving them out. You will also notice that the <header> section entails a logical grouping of an image 
and <h1> and <h2> tags, all contained within an <hgroup> tag.
Nav Element
Developers frequently want to put menus in the header when menus are used as global resources 
across the site. This leads us to the use of the next new element, <nav>. The specification for this 
element states, “The nav element represents a section of a page that links to other pages or to parts 
within the page: a section with navigation links.” Of course, this specification identifies the basic use 
for the <nav> element, but as we discussed earlier, the real importance of these elements resides in 
their broader application. The specification goes on to say, “User agents (such as screen readers) that 
Chapter 2: Three of the Most Important Basic Elements in HTML5 
17
are targeted at users who can benefit from navigation information being omitted in the initial ren-
dering, or who can benefit from navigation information being immediately available, can use this ele-
ment as a way to determine what content on the page to initially skip and/or provide on request.” The 
code in Figure 3 shows a <nav> element.
Figure 3: The HTML5 <nav> element
<header> 
<a href=”/”><img src=”HighFive.png” alt=”main” /></a> 
<hgroup> 
<h1>HighFive HTML5 Training</h1> 
<h2>The one stop shop for all things HTML5</h2> 
</hgroup>         
<nav> 
<ul> 
<li>Home</li> 
<li>Talks</li> 
<li>Training</li> 
<li>About Us</li> 
</ul> 
</nav>       
</header>
Of course, this code would normally put hyperlinks inside the <li> elements, but we’ll leave it as is 
for simplicity’s sake. The specification also helps users determine where not to use this element. For 
example, simple links to terms of service or to copyright information in a footer do not typically use 
the <nav> element.
The Footer Element
At first glance, you might assume that the <footer> element is meant for the bottom of your page. It 
is, but its intended use is broader than that. According to the specification, “The footer element rep-
resents a footer for its nearest ancestor sectioning content or sectioning root element.” This means 
that <footer> can go at the end of <article>, <include>, <aside>, <nav>, <section>, <blockquote>, 
or <body> elements (all new elements that will need to be discussed in a later article in this series). 
There are restrictions to where footer elements can be placed. For instance, you cannot put a <footer> 
at the end or <nav> above because they cannot be nested inside a <header>, <footer>, or <address> 
element.
Keeping It Simple
Hopefully, by now in this series, it’s clear why we should care about HTML5. Like most things in pro-
gramming, simple constructs can have deep underpinnings. Simple elements like <header>, <nav>, 
and <footer> can have deeper implications than what initially meets the eye. Understanding why 
these elements were created can help us master best practices for their use. We hope you continue 
18
Chapter 2: Three of the Most Important Basic Elements in HTML5
this journey with us into the dynamic world of HTML5 as we explore additional elements, their uses, 
and their implications.
Chapter 2: Three of the Most Important Basic Elements in HTML5 
19
Documents you may be interested
Documents you may be interested