First Slide

BEGINNERS GUIDE TO

HTML5 CODING - EBOOK

This demo is an example usuage of flatbook wordpress. We would like to show the possibilities of this flat ebook landing page theme.

Second Slide

FREE & PREMIUM PLANS

3 EBOOK PACKAGES

Praesent aliquet porta purus ut vehicula. Nam vulputate tristique turpis vel mollis. Fusce non suscipit urna, et porta arcu.

GET OUR FREE 5+1 LESSONS STARTER COURSE

sign up now

WHY LEARN HTML5

Easy implementation

The nice thing about HTML 5 is how easy it is to impelement. You use the HTML 5 doctype, which is very simple and streamlined. Just two words "doctype" and "html".

Dynamic Pages Support

Html5 was developed to help web application developers, so there are a lot of new features and elements to make it easy to create modern, dynamic html web pages.

New useful elements

And HTML 5 has created tags to support those elements of the page like 'section' to define sections of pages, but 'header' , 'footer' , 'nav' elements also involved

New inline elements

These inline elements define some basic con- cepts and keep them semantically marked up, mostly to do with time markers like: 'mark' 'type' & 'meter' and 'progress' tags.

The canvas element

It gives you a drawing space in JavaScript on your web pages and can let you add images or graphs to tool tips or just create dyanmic graphs on your pages, built on the fly.

Better browser support

Microsoft has stated that they will begin sup- porting at least portions of html5 in IE8. If you want to get started sooner, Opera has had the best support, with Safari close behind.

FREE HTML5 LESSONS

Below you can find a kind of introduction to our beginners html5 lessons, go through them and if you are intrested you can get the full free version of this ebook right after you signed up.

INTRODUCING HTML5

Free edition scrr

BLOCK & INLINE ELEMENTS

rge
We have looked at some of the HTML5 elements a webpage is constructed of and now it’s time to introduce yet another property of the HTML5 elements. There are 2 different types of elements: inline elements & block elements. Whether an element is an inline or block elements affects how the browser render the element.

Block Elements

A block element is rendered, as the name indicates, as an actual block. The block-element is as wide as it can possibly be, a rectangular that does not break across lines, and the width and height of the element can be regulated. Block-elements may contain inline elements and other block-elements.

Inline Elements

The inline elements are treated as a part of the flow of the document and the size should normally not be changed manually. Only inline elements may be contained with inline-elements. And to make even more confusing, inline elements are the only elements that may be contained within a paragraph-element, even though the “p”-element is a block-element.

Read the full article on www.html5-tutorials.org

THE SECTION TAG

rfd
The section element is one of the new elements that it is the hardest to learn to use correctly. It is more general than the “article” element, but you still have to have an actual section in your document when you use the “section” element.

This means, that you should always consider whether or not it might be more appropriate to use the “nav”, the “aside”, the “header”, the “footer”, or the “article” element before actually using the “section” element. (Some of these elements might be new to you, there is chapters discussing all of them).

Divides the document

As you can see, this adds several lines of markup to your document and some prefer as little markup as possible. Luckily for them, you do not need to use the section element inside the article, but it often creates a more correct document outline.

As the section element divides your content into sections, it is important to remember that all section elements must be followed by a heading tag – if this doesn’t make sense semantically, then you should not be using the section element (consider using the one of the other new semantic HTML5 elements or perhaps no element at all?).

Other usuage

Some might give in to the temptation of using the section tag as a styling hook for e.g. pullquotes, but resist it. There are more appropriate elements to use for this purpose instead of the section element, e.g. the “aside” element.

Read the full article on www.html5-tutorials.org

PLACEHOLDER TEXT

ggg
An empty form might be a bit intimidating especially if you are uncertain of what might go in to the different input fields. Therefore some developers invented the idea of a sample text inside the fields – so the user would have an idea of what to type in. This is what we nowadays call the placeholder text. Usually the placeholder text would have a light gray color in order to distinguish it from the user’s actual input.

How does it function?

As you might have discovered by now, the ability to set a placeholder text in input fields is not really a part of form validation but it is a long awaited feature that developers up until now have been creating using JavaScript. The placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click the field the placeholder text disappears and if you do not type anything into the field the placeholder text will reappear as soon as the field is no longer focused.

Browser support

The placeholder attribute actually has a pretty great support across browsers but if your user uses a browser that does not support the new html5 attribute no harm is done – the browser will just ignore your placeholder text. And of cause you can use a polyfill to make sure the placeholder text is shown in all browsers – check out my recommendations.

Read the full article on www.html5-tutorials.org

Choose a chapter

  • INTRODUCING HTML5

    - Free edition
  • BLOCK & INLINE ELEMENTS

    - We have looked at some […]
  • THE SECTION TAG

    - The section element is one […]
  • PLACEHOLDER TEXT

    - An empty form might be […]

WANNA SEE MORE ON HTML5 CODING?

Hit the button below & sign up for absolutely free to our popular 5+1 lessons Starter Course

begin starter course

ON RESPONSIVE CODING

Add as many chapters or content boxes as you wish with a custom post type called overviews. The first four elements are always shown, while the rest can be seen when you click on the show more button below. Try it!

1

Chapter I

Curabitur condimentum massa egestas quam tempus fermentum. Donec pretium leo et nibh pretium, id scelerisque turpis dictum.

2

Chapter II

Curabitur condimentum massa egestas quam tempus fermentum. Donec pretium leo et nibh pretium, id scelerisque turpis dictum.

3

Chapter III

Curabitur condimentum massa egestas quam tempus fermentum. Donec pretium leo et nibh pretium, id scelerisque turpis dictum.

4

Chapter IV

Curabitur condimentum massa egestas quam tempus fermentum. Donec pretium leo et nibh pretium, id scelerisque turpis dictum.

load more

BEHIND THE SCENES

Dave Russi

Dave Russi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dui lacus, accumsan. Sed sagittis velit velit, ut suscipit purus malesuada in. Nam sed magna at quam varius eleifend id quis quam. Maecenas ut purus elementum metus malesuada ultrices quis ut sapien. Nullam vitae eros diam.

Jane Fatale

Jane Fatale

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dui lacus, accumsan. Sed sagittis velit velit, ut suscipit purus malesuada in. Nam sed magna at quam varius eleifend id quis quam. Maecenas ut purus elementum metus malesuada ultrices quis ut sapien. Nullam vitae eros diam.

Bob Mandy

Bob Mandy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dui lacus, accumsan. Sed sagittis velit velit, ut suscipit purus malesuada in. Nam sed magna at quam varius eleifend id quis quam. Maecenas ut purus elementum metus malesuada ultrices quis ut sapien. Nullam vitae eros diam.Joseph Monroe

Chris Tedderman

Chris Tedderman

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dui lacus, accumsan. Sed sagittis velit velit, ut suscipit purus malesuada in. Nam sed magna at quam varius eleifend id quis quam. Maecenas ut purus elementum metus malesuada ultrices quis ut sapien. Nullam vitae eros diam.Joseph Monroe

Jenny Bogdan

Jenny Bogdan

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dui lacus, accumsan. Sed sagittis velit velit, ut suscipit purus malesuada in. Nam sed magna at quam varius eleifend id quis quam. Maecenas ut purus elementum metus malesuada ultrices quis ut sapien. Nullam vitae eros diam.Joseph Monroe

GO PREMIUM NOW

Choose from FlatBook’s predefined 2-3-4 columned pricing tables, set to highlight one of them or not and edit the contents and features easily in the Theme Options panel.

HTML5 EBOOK VERSION

€ 39.50

  • With detailed getting started guide
  • Practice real html5 task examples
  • Check your code and validate it
  • Monthly updates available free
purchase now

HTML5 FULL PACKAGE

€ 59.80

  • Extensive guide with more details
  • Cd with extra html5/css3 exercises
  • Video screencast explanations
  • Bonus free html5 template
purchase now