.

2 Divs on one line, filling the total width

HTML:

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

CSS:

.container {
  width:600px;
  height:200px;
  border:1px solid;
}
.right {
  width:auto;
  height:200px;
  background:red;
  overflow:hidden;
}
.left {
  height:200px;
  width:200px;
  background:blue;
  float:left;
}

Demo:

left
right

Hosting PDF in HTML

Probably the best approach is to use the PDF.JS library. It’s a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.

Online demo: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

 

 

You could also try:

<embed src="http://yoursite.com/the.pdf" width="500" height="375">

HTML validation

Here is the link for validating HTML markup

http://validator.w3.org/#validate_by_uri

http://validator.w3.org/#validate_by_input

http://validator.w3.org/#validate_by_upload

Visual Studio 2010 support for HTML 5 / CSS 3

Extension Manager -> add “Web standards Update for Visual Studio 2010″

Can test outlining of Html5 here: gsnedders.html5.org/outliner/

What’s new in HTML 5

HTML

article – the main content of your page
aside – side tags
audio – to embed audio
canvas – programmatic pixel image (not vector)
command – actions e.g. Save – use in e.g. silverlight, it includes state
datalist – for predefined data
details – use with summary – this is the detail bit
embed – 3rd party plugins – flash / silverlight
figcaption – caption for a figure
figure – a figure, used with figcaption
footer – footer
header – header
hgroup – xxx
keygen – cryptographic, easy way to manage public keys
mark – to e.g. highlight words when searching
meter – can show fractions etc.
nav – officially declare navigation
output – showing results
progress – track progress
rp – ruby ()
rt – ruby ()
ruby – ruby ()
section – used along article – section has symantec meaning (grouped together), div not
source – use with video / audio
summary – xxx
time – rendering time and date (including seconds) of the page
video – to embed video
wbr – “word break” – used for word wrapping

 

JavaScript

Canvas 2D Context – for 2d images
Contacts – common contacts area (e.g. outlook contacts in browser)
File APIs – access secure areas in the user’s machine
Forms – different tags (such as eg. email)
Geolocation – locate lat, long, alt etc.
HTML Microdata – API to allow extraction of certain data to different users (human vs machine eg.)
Indexed Database – object database (rather than sql db – web sql db not implemented by some)
Media Capture – camera, microphone etc
Messaging – supporting API (for workers etc)
Offline Web Appllications – mark pages as offline / server only etc (almost like browser cache)
Selection – selection API – Css selectors etc – similar to JQuery API, just faster
Server-Sent Events – reverse of ajax (cont), constant connection between server & client
Web Sockets – socket info from client to server. e.g. instant messageing, or audio for skype
Web Storage – session storage on browser, local storage on browser – more space than cookies – not sent from client – server
Web Sql Db – web sql database
Web Workers – threading or resource intensive work – delegate calculation to the client
XMLHttpRequest Level 2 – AJAX, allow cross domain queries with security

 

HTML 5 elements

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

IE support testing

Testing cross browser / IE support:

http://www.my-debugbar.com/wiki/IETester/HomePage