asp.net pdf viewer component : Generate pdf thumbnail c# control SDK platform web page wpf azure web browser HTML5complete0-part1319

Semantic Markup in HTML5 - 1
Semantic Markup in HTML5
This workshop will introduce attendees to core HTML5 code and concepts, with an emphasis on 
getting hands-on experience with the new semantic elements. 
Learning Objectives
In this workshop, attendees will:
gain an understanding the recent history of HTML5 and WHATWG's approach to writing the 
spec.
practice marking up content using new semantic elements in a text editor.
be introduced to the semantic nuances of the new elements, including re-defined HTML4 
elements.
receive resources for styling new elements and learning more about HTML5.
The practice file for this workshop: http://think.stedwards.edu/computerhelp/itcircuit - 
download "html5practice.html"
HTML(5), a history
"The idea that HTML's evolution should be reopened was tested at a W3C workshop in 2004, 
where some of the principles that underlie the HTML5 work... as well as the aforementioned early 
draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla 
and Opera. The proposal was rejected on the grounds that the proposal conflicted with the 
previously chosen direction for the Web's evolution; the W3C staff and membership voted to 
continue developing XML-based replacements instead.
Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on 
the effort under the umbrella of a new venue called the WHATWG. A public mailing list was 
created, and the draft was moved to the WHATWG site. The copyright was subsequently amended 
to be jointly owned by all three vendors, and to allow reuse of the specification.
The latter requirement in particular required that the scope of the HTML5 specification include 
what had previously been specified in three separate documents: HTML4, XHTML1, and DOM2 
HTML. It also meant including significantly more detail than had previously been considered the 
norm.
In 2006, the W3C indicated an interest to participate in the development of HTML5 after all, and in 
2007 formed a working group chartered to work with the WHATWG on the development of the 
HTML5 specification. Apple, Mozilla, and Opera allowed the W3C to publish the specification 
under the W3C copyright, while keeping a version with the less restrictive license on the WHATWG 
site.
Generate pdf thumbnail c# - control SDK platform:C# PDF Thumbnail Create SDK: Draw thumbnail images for PDF in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
Generate pdf thumbnail c# - control SDK platform:VB.NET PDF Thumbnail Create SDK: Draw thumbnail images for PDF in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
Semantic Markup in HTML5 - 2
Since then, both groups have been working together."
- http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#history-1
--
As of January 2011: "HTML is the main focus of the WHATWG community. HTML5 is a snapshot of 
HTML, which is being worked on by the WHATWG community and also the W3C HTML Working 
Group.... Going forward, the WHATWG is just working on "HTML", without worrying about version 
numbers. When people talk about HTML5 in the context of the WHATWG, they usually mean just 
"the latest work on HTML", not necessarily a specific version."
HTML Design Principles
"The WHATWG was based on several core principles, in particular that technologies need to be 
backwards compatible, that specifications and implementations need to match even if this means 
changing the specification rather than the implementations, and that specifications need to be 
detailed enough that implementations can achieve complete interoperability without 
reverse-engineering each other." -whatwg.org
Read more about the design principles at: http://www.w3.org/TR/html-design-principles
Support existing content. Don't break the web. This means inoperability and consistent 
error-handling by all browsers.
Degrade web content in older user agents gracefully.
Don't reinvent the wheel; evolution not revolution.
"Pave the Cowpaths" - adopt widespread usages rather than forbidding them
Solve real problems web content faces today with pragmatic solutions.
Priority of Constituencies: users > authors > implementors > specifiers > theoretical purity
Address security concerns directly in the spec.
Accessibility!
Starting an HTML5 page in Dreamweaver
1. Open Dreamweaver. File > New.
2. Page Type: HTML, Layout: <none> (these should be set by default)
3. Change DocType to HTML 5. Click "Create".
control SDK platform:How to C#: Generate Thumbnail for Word
VB.NET How-to, VB.NET PDF, VB.NET Word, VB.NET Excel, VB.NET PowerPoint, VB.NET Tiff, VB.NET Imaging, VB.NET OCR, VB.NET How to C#: Generate Thumbnail for Word.
www.rasteredge.com
control SDK platform:How to C#: Generate Thumbnail for PowerPoint
VB.NET How-to, VB.NET PDF, VB.NET Word, VB.NET Excel, VB.NET PowerPoint, VB.NET Tiff, VB.NET Imaging, VB.NET OCR, VB How to C#: Generate Thumbnail for PowerPoint
www.rasteredge.com
Semantic Markup in HTML5 - 3
Getting Started: Your page structure
Important differences in syntax: 
HTML5 is syntax agnostic; you can write HTML or XHTML style
quoting attributes isn't required like in XHTML
nor do you have to self-close the tag, like <meta charset=utf-8 />
capitalizing letters is okay
(X)HTML5 Validator tool: http://html5.validator.nu
Doctype and Character Encoding
The Doctype: 
<!doctype html>
"'Upgrading' to HTML5 can be as simple as changing your doctype. Upgrading to the HTML5 
doctype won’t break your existing markup, because all the tags defined in HTML 4 are still 
supported in HTML5. But it will allow you to use — and validate — new semantic elements like 
<article>, <section>, <header>, and <footer>." - http://diveintohtml5.info/introduction.html
Character Encoding:
<meta charset="UTF-8">
"You should always specify a character encoding on every HTML document, or bad things will 
happen. You can do it with the HTTP Content-Type header, the <meta http-equiv> declaration, or 
the shorter <meta charset> declaration, but please do it." - http://diveintohtml5.info/semantics.html
control SDK platform:How to C#: Generate Thumbnail for Raster
VB.NET How-to, VB.NET PDF, VB.NET Word, VB.NET Excel, VB.NET PowerPoint, VB.NET Tiff, VB.NET Imaging, VB.NET OCR, VB How to C#: Generate Thumbnail for Raster.
www.rasteredge.com
control SDK platform:How to C#: Overview of Using XImage.Raster
See this C# guide to learn how to use RasterEdge XImage SDK for .NET to perform quick file navigation. You may easily generate thumbnail image from image file.
www.rasteredge.com
Semantic Markup in HTML5 - 4
New Semantic Elements
HTML5 gives us new elements that unambiguously denote landmarks in a page, evolving the 
current practice from re-using the semantically neutral <div> element over and over with made-up 
IDs and classes (which will still work just fine in HTML5). 
Image: http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web
<header>
<header>
"The header element represents a group of introductory or navigational aids. A header element 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. The spec also allows <nav> to be used in the <header>.
<header> can be used multiple times on a page as necessary within other structural elements."
<hgroup>
"The hgroup element represents the heading of a section. The element is used to group a set of 
control SDK platform:How to C#: Generate Thumbnail for Excel
VB.NET How-to, VB.NET PDF, VB.NET Word, VB.NET Excel, VB.NET PowerPoint, VB.NET Tiff, VB.NET Imaging, VB.NET OCR, VB.NET How to C#: Generate Thumbnail for Excel.
www.rasteredge.com
control SDK platform:VB.NET Image: How to Process & Edit Image Using VB.NET Image
Visual C#. VB.NET. RasterEdge provides this VB.NET image processor control SDK which owns the APIs for developers to create image thumbnail, resize, crop, scale
www.rasteredge.com
Semantic Markup in HTML5 - 5
h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or 
taglines.... The point of using hgroup...[in this example] is to mask the h2 element (which acts as a 
secondary title) from the outline algorithm."
Definitions from: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html
Using <hgroup>:
grouping a title with related metadata
grouping a title with subtitiles
Wait, we can have more than one <h1> per page? Yes, but some browsers, Google and ATs 
have to catch up.
"In HTML 4, the only way to create a document outline was with the <h1>–<h6> elements. If you 
only wanted one root node in your outline, you had to limit yourself to one <h1> in your markup. 
But the HTML5 specification defines an algorithm for generating a document outline that 
incorporates the new semantic elements in HTML5. The HTML5 algorithm says that an <article> 
element creates a new section, that is, a new node in the document outline. And in HTML5, each 
section can have its own <h1> element." - http://diveintohtml5.info/semantics.html
Learn more about outlining content in HTML5: http://html5doctor.com/outlines
If you want to test your outline to be sure it's understood correctly, put your code in the HTML5 
Outliner: http://gsnedders.html5.org/outliner
Navigation
<nav>
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. Not all groups of links on a page need to be in a nav element 
— only sections that consist of major navigation blocks are appropriate for the nav element. In 
particular, it is common for footers to have a short list of links to common pages of a site, such as 
the terms of service, the home page, and a copyright page. The footer element alone is sufficient 
for such cases, without a nav element. However, the use of <nav> is allowed in <header>. 
More information about other semantic uses for <nav> are discussed at 
http://html5doctor.com/nav-element
control SDK platform:How to C#: Overview of Using XDoc.PowerPoint
See this C# guide to learn how to use RasterEdge PowerPoint SDK for .NET to perform quick file navigation. You may easily generate thumbnail image from
www.rasteredge.com
control SDK platform:How to C#: Overview of Using XDoc.Word
Tell C# users how to: create a new Word file and load Word from pdf; merge, append, and split Create Thumbnail. You may easily generate thumbnail image from Word
www.rasteredge.com
Semantic Markup in HTML5 - 6
Structure: Sectioning Content
<article>
The article element represents a component of a page that consists of a self-contained 
composition in a document, page, application, or site and that is intended to be independently 
distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or 
newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or 
any other independent item of content.
<section>
The section element represents a generic document or application section. A section, in this 
context, is a thematic grouping of content, typically with a heading. Examples of sections would 
be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A 
Web site's home page could be split into sections for an introduction, news items, contact 
information.
When determining if you should put content in a <section> element, ask yourself "Is all of this 
content related?" If yes, use <section>, if not, use <div>. 
What about <div>? "The section element is not a generic container element. When an element is 
needed only for styling purposes or as a convenience for scripting, authors are encouraged to use 
the div element instead." Some examples: A container for all page content, styling the introductory 
paragraph of an article.
Why is there no <content> element? "The first piece of content that's not in a <header>, <nav>, 
<aside> or <footer> is the beginning of the main content, regardless of whether it's contained in an 
<article>, a <div>, or whether it is a direct descendent of the <body> element." - pg, 9, Introducing 
HTML5
When to not use <section>:
Don’t use it just as hook for styling or scripting; that’s a div
Don’t use it if article, aside or nav is more appropriate
Don’t use it unless there is naturally a heading at the start of the section
Use the article element instead of the section element when it would make sense to syndicate 
the contents of the element.
http://html5doctor.com/the-section-element
<footer>
The footer element represents a footer for its nearest ancestor sectioning content or sectioning 
root element. A footer typically contains information about its section such as who wrote it, links to 
related documents, copyright data, and the like. Footers don’t necessarily have to appear at the 
end of a section, though they usually do. When the footer element contains entire sections, they 
represent appendices, indexes, long colophons, verbose license agreements, and other such 
Semantic Markup in HTML5 - 7
content.
Definitions from: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html
<time>
The time element represents either a time on a 24 hour clock, or a precise date in the proleptic 
Gregorian calendar, optionally with a time and a time-zone offset. If you want to include a time too, 
add the letter T after the date (or a space), then the time in 24-hour format, then a timezone offset.
There are three parts to a <time> element:
1. A machine-readable date (and time). If a time is specified, a timezone offset is required.
2. Human-readable text content
3. An optional pubdate flag
What does the pubdate attribute mean? It means one of two things. If the <time> element is in an 
<article> element, it means that this timestamp is the publication date of the article. If the <time> 
element is not in an <article> element, it means that this timestamp is the publication date of the 
entire document.
Source: http://diveintohtml5.info/semantics.html
Examples and more information about durations in <time> at: 
http://www.brucelawson.co.uk/2012/best-of-time
<aside>
The aside element represents a section of a page that consists of content that is tangentially 
related to the content around it, and which could be considered separate from that content. Such 
sections are often represented as sidebars in printed typography. The element can be used for 
Semantic Markup in HTML5 - 8
typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and 
for other content that is considered separate from the main content of the page.
The semantics of <aside> in and out of <article>:
"With the new definition of aside, it’s crucial to remain aware of its context. When used within an 
article element, the contents should be specifically related to that article (e.g., a glossary). When 
used outside of an article element, the contents should be related to the site (e.g., a blogroll, 
groups of additional navigation, and even advertising if that content is related to the page)."  - 
http://html5doctor.com/aside-revisited/
<mark>
The mark element represents a run of text in one document marked or highlighted for reference 
purposes, due to its relevance in another context. When used in a quotation or other block of 
text referred to from the prose, it indicates a highlight that was not originally present but which has 
been added to bring the reader's attention to a part of the text that might not have been considered 
important by the original author when the block was originally written, but which is now under 
previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of 
the document that has been highlighted due to its likely relevance to the user's current activity.
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element
Said another way, "The mark element doesn't attach any importance to the content within it, other 
than to show that it's currently of interest." - Jeremy Keith, HTML5 for Web Designers, pg 60.
Image and more discussion at http://html5doctor.com/draw-attention-with-mark
Semantic Markup in HTML5 - 9
Text-Level Semantics: Redefining HTML4 Elements
<i> — was italic, now for text in an “alternate voice,” such as foreign words, technical terms and 
typographically italicized text 
<b> — was bold, now for “stylistically offset” text, such as keywords and typographically 
emboldened text 
<em> — was emphasis, now for stress emphasis, i.e., something you’d pronounce differently 
<strong> — was for stronger emphasis, now for strong importance, basically the same thing 
(stronger emphasis or importance is now indicated by nesting)
<hr> — was horizontal rule, now used for a paragraph-level thematic break in text, "such as 
separating different topics within a section of prose, or between scenes in a novel. However you 
can use it anywhere you can use a <p>. While not widely used these days (given the dull default 
browser renderings), it can be replaced via CSS with an image." 
For more examples, visit: 
http://html5doctor.com/i-b-em-strong-element
http://html5doctor.com/small-hr-element
<small>
<small> — was for smaller text, now used for side comments and small print (legal disclaimers, 
caveats, copyright info, licensing, attribution). 
Semantic Markup in HTML5 - 10
<small> is the inline equivalent of <aside>, content that is not the main focus of the page.
<small> text does not need to be smaller than surrounding text — if all you want is smaller text 
use CSS instead.
Use <small> only on inline content.
Finally, <small> doesn’t affect the semantics of <em> or <strong>.
- http://html5doctor.com/small-hr-element
<address>
The address element represents the contact information for its nearest article or body element 
ancestor. If that is the body element, then the contact information applies to the document as a 
whole. Typically, the address element would be included along with other information in a footer 
element.
The address element must not be used to represent arbitrary addresses (e.g. postal addresses), 
unless those addresses are in fact the relevant contact information. (The <p> element is the 
appropriate element for marking up postal addresses in general.) The address element must not 
contain information other than contact information.
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-address-element
<figure> and <figcaption>
The figure element represents some flow content, optionally with a caption, that is 
self-contained and is typically referenced as a single unit from the main flow of the document.
Documents you may be interested
Documents you may be interested