Rain and snow effects with Phaser

HTML5 beginner’s tutorial

This HTML5 tutorial is for beginners with no knowledge about HTML or HTML5. With this you will acquire skills to create your own HTML5 pages or eventually games if you continue with our other tutorials.

Introduction

What you need?

You can try the examples with simple text editor like Notepad or Notepad++, or you can download an IDE like Netbeans for web programming. Or you can choose to run the examples on some online tool for programming.

What is HTML?

HTML stands for HyperText Markup Language. Its markup language for creating web pages and web applications. HTML elements are the building blocks of web page.
HTML elements are actually tags. Browser don’t show these tags, the tags tell the browser how to render the elements of the page.

What is HTML5?

HTML5 is the fifth (and the current) version of the HTML standard. It extends and improves the markup available for documents and introduces markup and API for complex web apps.

Is it hard to learn this?

No.
Anyway we will start with HTML and then we will progress with the new features in HTML5.

HTML

Lets start with the basics of HTML.

HTML Basics tutorial

HTML documents must start with the type declaration:

<!DOCTYPE html>

Its simple row that evolved from a bit more complex declaration. If you are interested research the HTML evolution and will get the idea why this doctype is left. If not – just remember to start your documents with it.

Elements

Here is an example of very simple HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Webpage Title</title>
</head>
<body>

<p>This is paragraph.</p>

</body>
</html>

The element defines the document, you add it right bellow the doctype declaration.
The tag gives information about your page.
The tag contains the actual content of your webpage.

element defines a paragraph.

Attributes

All elements can have attributes that provide additional information about them. Here is an example of attribute:

<img src="image.jpg" width="100" height="100" >

The image element above has two attributes in name/value pairs – height and width. They give additional information about rendering of our image.

Here is how you define a link:

<a href="http://tutorialhere.com/">Tutorials</a>

Here href is the attribute and http://tutorialhere.com/ is the attribute value.

Headings

Headings are defined as <h1> to <h6>. Example of using heading element:

<h1>Big heading - Heading 1</h1>
<h2>Smaller heading</h2>

Formatting html document

These elements are used to format text in a html document:
<b> – Bold
<strong> – Important, looks similar to bold
<i> – Italic
<small> – Small
<em> – Emphasized
<mark> – Marked (highlighted)

How to comment in HTML

HTML comment tag is used to add comments to the HTML source code. Usually You are not able to see comments as they are not rendered, but you can use View source or inspect and view the code of the page.

<!-- This is comment -->
<!--
   This is comment too, you can have elements in comment and
   they are not rendered.
-->

The div tag

The div tag is generic container for flow content that by itself don’t represent anything.

Lists – ul and ol in HTML

<ul> and <ol> tags are used to define ordered and unordered lists.
Here is an example – unordered list:

<ul>
    <li>Red element</li>
    <li>Blue element</li>
    <li>Orange element</li>
    <li>Yellow element</li>
    <li>White element</li>
</ul>

And the result:

  • Red element
  • Blue element
  • Orange element
  • Yellow element
  • White element

And the same example with ol – ordered list.

<ol>
    <li>Red element</li>
    <li>Blue element</li>
    <li>Orange element</li>
    <li>Yellow element</li>
    <li>White element</li>
</ol>

And the result with the ol:

  1. Red element
  2. Blue element
  3. Orange element
  4. Yellow element
  5. White element

How to create tables in HTML?

The <table> is used to define a table. It also comes with a bunch of other tags:
tr – table row
td – table column
th – table header

Here is very simple html table example:

<table>
    <tr>
        <td>First Row - Cell One</td>
        <td>First Row - Cell Two</td>
    </tr>
    <tr>
        <td>Second Row - Cell One</td>
        <td>Second Row - Cell Two</td>
    </tr>
</table>

And the result of this example:

First Row – Cell One First Row – Cell Two
Second Row – Cell One Second Row – Cell Two

HTML Forms

HTML forms are used to collect input from site users. A web form consists of two parts HTML front end and some sort of back end – some server that processes the input. Here we will learn about the front end part with its elements.

The form tag

You define a form like this:

<form >
    Enter something: <input type="text" name="user_field" />
</form>

And the result:

Enter something:

Form element attributes:
action – the location of the backend script
method – the method used to send the data – GET, POST
target – the target window
enctype – to specify the encoding of the data

Form elements

<input> tag with type=”text” is used for creating text fields. The same tag with attribute type=”password” is for creating password field. Here is an example of both:

Username: <input type="text" name="username" />
Password: <input type="password" name="userpass" />

And the result of this code:

Username:
Password:

Checkbox tag is used when the visitor have to choose from several options. Here is an example:

<form>
    <input type="checkbox" name="cheese" value="on"> Cheese
    <input type="checkbox" name="onions" value="on"> Onions
</form>

And the result of this code:

Cheese
Onions

The select tag creates a drop down list:

<select name="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

And the result:

Radio buttons are created with the input element with type=”radio”. You create linked group of radio buttons by setting their name to be the same.

<form>
  <input type="radio" name="color" value="red" checked> Red<br />
  <input type="radio" name="color" value="blue"> Blue <br />
  <input type="radio" name="color" value="yellow"> Yellow <br />
</form>
Red
Blue
Yellow

<textarea> is used to create multiline text field. Its used in many places – for example when you write a post in a forum, the post body field is textarea. Here is how to use it:

<textarea rows="5" cols="40" name="post">
</textarea>

Textarea attributes are pretty self explaining – our text area field will have size of 5 rows and 40 columns.

As its name says the button element defines a button:

<button type="button" name="my_button">I am button</button>

And how it looks:

HTML5

HTML5 is the next version of the HTML standard. It includes features like video playback, canvas drawing and drag and drop functionality.
New features in HTML5:

  • New semantic elements
  • Persistent local storage
  • Forms 2.0
  • Canvas
  • Audio and Video
  • Geolocation
  • Microdata
  • Drag and Drop
  • Web Sockets
  • Server-Sent Events

HTML5 offers a group of new elements for better web page creation.

New semantic elements

Here are a bunch of new structural elements in HTML5 and what they do.

HTML5 document formatting

This tags are added to HTML5 for better document formatting.
<section> – it represent application section
<article> – independent part of the content – article, blog post
<header> – as its names says – header of a section
<footer> – footer of a section
<nav> – page navigation – menu for example
<aside> – content that is aside from the other content
<details> – Additional detials

Persistent local storage / Web storage

With local storage apps can store data locally. There are actually two types of storage – session storage and local storage.

Canvas

The <canvas> element can be used for drawing graphics on a web application. It uses JavaScript and is one of the major technologies behind the HTML5 games creation. Canvas has a group of methods for drawing basic shapes and texts.

How to create canvas?

Here is an example of empty html canvas.

<canvas id="canvas_id" width="100" height="100"></canvas>

If you want to add some drawing to it, you need to use JavaScript. You can read our JavaScript tutorial for beginners.
Here is full page example how to draw square and a circle in HTML5 canvas.

<!DOCTYPE html>
<html>
    <head>
        <title>Draw with HTML5</title>
    </head>
    <body>
        <canvas id="draw" width="200" height="200"></canvas>
        <script>
            var canvas = document.getElementById("draw");
            var ctx = canvas.getContext("2d");
            ctx.lineWidth="3";
            ctx.strokeStyle="red";
            ctx.rect(30, 30, 100, 50);
            ctx.stroke();
        </script>
    </body>
</html>

Audio in HTML5

The <audio> element is for playing audio in HTML page.
Example of using audio:

<audio controls>  
    <source src="music.mp3" type="audio/mpeg">
</audio>

Video in HTML5

Playing video in HTML5 is not hard, you just need to use the video tag.

<video width="640" height="480" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

Drag and Drop functionality

Drag and drop is useful feature that helps you move stuff around in a meaningful manner. It is supported with the addition of few attributes:

draggable
ondrop
ondragover
ondragstart

Web Workers – javascript threads

Web sockets tutorial became a bit long so we’ve made it into separate article – Web Worker tutorial.

WebSockets

Server-sent Events

Leave a Reply

Your email address will not be published. Required fields are marked *