Introduction to HTML5

As Presented by Nobel Mujuji

What is Html5 ?

• HTML5 is the newest version of Hyper Text Markup Language. The first web browser was introduced in 1993 and the name was MOSAIC. The development of MOSAIC was at the NCSA (National Center for Supercomputing Applications). Later it was discontinued to development on 7th of January 1997. Still the people were using the nonstandard version of HTML.

• The standard version came into existence in 1995, when HTML 2.0 was announced. Later after two years HTML 3.0 and after two years HTML 4.01 was announced. And still we are using the milestone of HTML 4.01.

• The First Draft of HTML5 Was announced in January 2008. And amazingly HTML5 has a broad browser support. Though the HTML5 is still under developing phase. And a lot of organizations are working and planning for the development of HTML5.

• We can’t expect the HTML5 may be the future of Web Designing, but we can say that this is the present of Web designing. Before the development of HTML5, we were in compulsion to work in Photoshop and Flash application, but with the development of HTML5, these affords has been reduced.

HTML5 HISTORY

• HTML5 is a markup language, has been come into existence around January 2008. The two major organizations have been involved in developing of HTML5 since its initial time. One is W3C (World Wide Web Consortium) and the other one is WHATWG (Web Hypertext Application Technology Working Group). According to these organizations, they have been working on the HTML5 since initial time. So HTML5 language is still under development. There is more about to come yet in HTML5.

• During the development of HTML5, It was announced that the HTML5 reach the W3C recommendation till at the end of 2010. But the last call didn’t match till the target date. Now according to W3C the HTML5 will reach its full recommendation last by 2015

• Where according to WHATWG the last call for HTML5 Specification was in October 2009. Then suddenly the amazing changes in decision the WHATWG started to work on envisioning development of HTML, and with abounding its HTML5 Project. Later in January 2011, it renamed the HTML5 Standard to HTML5.

• On 18 January 2011, the W3C introduced a logo to represent the HTML5 interest. While presenting its logo to publicly, W3C announced that, the logo can be used for general purpose.

Requirements• To follow this tutorial, you can get by with a simple text editor, e.g.

Windows Notepad or similar. However, I do recommend using an editor specifically designed to work with web content, for a more pleasant workflow.• In this tutorial we will be using Notepad++

Browser Support: • The latest versions of Apple Safari, Google Chrome, Mozilla Firefox,

and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all

HTML

Header

Navigation

Aside

Footer

Section

ArticleFooter

ArticleFooter

ArticleFooter

Figure

Image, Video, Quote, Table, etc…

Legend

Form Enhancements

• Placeholder text• Specific text input: email, URL, number, search• Slider• Date picker• User Agent validation

CSS Effects

• Rounded corners• Gradients• Box and text shadows• Fonts• Transparencies• Multiple background images and border images• Multiple columns and grid layout• Box sizing• Stroke and outlines• Animation, movement and rotation• Improved selectors

Websites using HTML5

• www.youtube.com• www.google.com• www.pctbc.com• www.mafukeskytech.co.za• www.gforce.be• http://adventureworld.ourentry.com.au• http://space.angrybirds.com/launch/• http://www.annasafroncik.it/• http://www.digitalhands.net/• http://domanistudios.com/#/home• http://lab.4muladesign.com/dribbble/• http://www.raffaelstueken.de/

New Features in HTML5:

• HTML5 introduces a number of new elements and attributes that helps in building a modern• websites. Following are great features introduced in HTML5.

New Semantic Elements: These are like <header>, <footer>, and <section>. Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag. Persistent Local Storage: To achieve without resorting to third-party plugins. WebSocket : A next-generation bidirectional communication technology for web applications. Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript. Audio & Video: You can embed audio or video on your web pages without resorting to third-party plugins. Geolocation: Now visitors can choose to share their physical location with your web application. Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. Drag and drop: Drag

The DOCTYPE:

• DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based and therefore required a reference to a DTD.

• HTML 5 authors would use simple syntax to specify DOCTYPE as follows:

<!DOCTYPE html>

Character Encoding:

• HTML 5 authors can use simple syntax to specify Character Encoding as follows:

<meta charset="UTF-8">The <script> tag:It's common practice to add a type attribute with a value of "text/javascript" to script elements as follows:

<script type="text/javascript" src="scriptfile.js"></script>

The <link> tag:

So far you were writing <link> as follows:

<link rel="stylesheet" type="text/css" href=“pagename.css">

HTML5 Elements:• HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle

brackets with the tag name in between.

• The difference between start tags and end tags is that the latter includes a slash before the tag name.

• Following is the example of an HTML5 element:

• <p>...</p>• HTML5 tag names are case insensitive and may be written in all uppercase or mixed case,

although the most common convention is to stick with lowercase.

• Most of the elements contain some content like <p>...</p> contains a paragraph. Some elements, however, are forbidden from containing any content at all and these are known as void elements. For example, br, hr, link and meta etc.

HTML5 Attributes:• Elements may contain attributes that are used to set various properties of

an element.

• Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.

• Following is the example of an HTML5 attributes which illustrates how to mark up a div element with an attribute named class using a value of "example":

• <div class="example">...</div>

HTML5 Document:The following tags have been introduced for better structure:

1. section: This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.

2. article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.

3. aside: This tag represents a piece of content that is only slightly related to the rest of the page.

4. header: This tag represents the header of a section.

5. footer: This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.

6. nav: This tag represents a section of the document intended for navigation.

7. dialog: This tag can be used to mark up a conversation.

8. figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

HTM 5 document would look like this<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>...</title>

</head>

<body>

<header>...</header>

<nav>...</nav>

<article>

<section>

...

</section>

</article>

<aside>...</aside>

<footer>...</footer>

</body>

Challengewrite this small program using Notepad++ or text editor of your choice

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>...</title></head><body> <header role="banner">

<h1>HTML5 Document Structure Example</h1><p>This page should be tried in safari, chrome or Mozila.</p>

</header>

<nav> <ul> <li><a href="http://www.facebook.com">Facebook</a></li> <li><a href="http://www.gmail.com">Gmail</a></li> <li><a href="http://www.twitter.com">twitter</a></li></ul>

</nav>

<article> <section> <p>Once article can have multiple sections</p> </section> </article> <aside> <p>This is aside part of the web page</p> </aside> <footer> Created by <a href="http://nobelmujuji.com/">Nobel M</a> </footer></body>