Welcome to HTML5 short course — in a nutshell. We tried to prepare a quick course about HTML5 (and the use of JavaScript in its context), containing key information in one place. The case was somewhat complicated by the fact that the subject is quite extensive. But we can handle!

HTML5 short course

HTML5 is an extension of HTML 4 and XHTML 1 variant, and it is a competitive specification in relation to the XHTML 2, whose development was abandoned in favor of HTML5 support.

The language introduces many new elements comparing to its older older counterparts, among others:

– new tags, such as article, header, footer, nav, video, audio, mark, progress, section;

– new types of form fields: color, email, datetime-local, datetime, date, month, week, time, number, range, tel, search, url;

– new attributes of form elements: autofocus, required, autocomplete, min, max, multiple, pattern, step.

The programmer gets lots of facilities for programming the UI.

There are also news concerning the API:

– 2D drawing with the new element — Canvas,

– drag and drop API, with the draggable attribute,

– audio and video playing API,

– editing API with the contenteditable attribute,

– API for offline applications,

– storage API (memory) — local

– geolocation, microdata and other.

There are also new DOM methods:

– activeElement()

– hasFocus()

– getElementsByClassName()

– getSelection()

– classList()

– relList() — for the ‘a’ html element

– innerHTML() — for window and document

In addition, the HTML5 specification focuses on errors handling.

Browsers that support HTML5 will be adapted to handle errors in syntax. HTML5 is designed so that older browsers could easily ignore the new constructions.

We believe that HTML5 is a great technology with amazing possibilities and potential, also on mobile devices.

Speaking of devices, let’s mention about meta viewport.

Meta viewport and HTML5 on mobile devices

Viewport tag defines the page display on mobile devices; allows to set scaling options or default zoom. Like other meta tags, too, and this is placed in the HEAD section.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1">

It is enough, but the meta viewport we should use in case of creating layout version for mobile or responsive website (RWD).

We can set additional parameters. But always remember about testing.

For quick tests there are great tools, such as Opera Mobile Emulator. Anyway, we have to test final version on real mobile devices.

And back to the parameters — we have:

Soap2day. business banking sales strategies

Device-width — determine the width of our site; it’s probably the most important part of the meta tag viewport. Save the tag as in the following example tells the browser that the page will adapt to the width of the device:

<meta name="viewport" content="width=device-width">

We can instead use the numerical values (in px), and also set a value for height:

<meta name="viewport" content="width=320, height=480">

Similarly to the device-width, there is also device-height value.

Initial-scale — This parameter sets the initial zoom level. Normally, this means that the CSS 1px corresponds to the 1px of device screen, which normally does not always have to coincide.

The default value depends on the browser, but we can enforce its own value, for example, to view this page default in approximately 5x:

<meta name="viewport" content="initial-scale=5">

We can also add:

Maximum-scale — so determine the maximum zoom level.

You have to remember that the use of these parameters is optional, but, for example, you should never use the maximum-scale = 1.0. So if you already use a parameter, make sure that it does not spoil the view of your site.

Drag and Drop

HTML5 brings us the solutions for common programming operations. One of them is “drag and drop”; support it’s a part of the standard.

Every element can be made ‘draggable’ (it will be possible to drag). The method is simple:

<img src="code.png" draggable="true" />

We must define handlers, especially dragStart(event) and dragDrop(event), and assign them to the appropriate elements.

A full, basic example of drag and drop implementation in HTML5:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
  #theBox, #theTarget {
    margin: 15px;
    padding: 15px;
    float: left;
  }

  #theBox {
    width: 64px;
    height: 64px;
    background-color: #ee0000;
  }

  #theTarget {
    width: 200px;
    height: 200px;
    background-color: #00ee00;
  }
</style>

<script type="text/javascript">
function dragStart(ev) {
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
    ev.dataTransfer.setDragImage(ev.target, 0, 0);

    return true;
}

function dragEnter(ev) {
    event.preventDefault();

    return true;
}

function dragOver(ev) {
    // alert('Done');
    return false;
}

function dragDrop(ev) {
    var src = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(src));
    ev.stopPropagation();

    return false;
}
</script>
</head>

<body>
  <h2>HTML5 - simple drag and drop</h2>
  <p>Try to move small box.</div>

  <div id="theBox" draggable="true"
    ondragstart="return dragStart(event)">
    <p>Drag Me</p>
  </div>

  <div id="theTarget"
    ondragenter="return dragEnter(event)"
    ondrop="return dragDrop(event)"
    ondragover="return dragOver(event)">Target</div>

</body>
</html>

An example can be seen as a skeleton for creating more advanced implementations of drag and drop.

And something for the curious — HTML5 reference on W3Schools.

Summary

And with this we finish the first part of the HTML5 short course. In the second part we will look closely at the further elements of HTML5.

Thank you!