HTML5 Tutorial

 

HTML5 Basics

HTML5, the latest version of HTML, the formatting language that produces web pages - including the one you read this on, of course - has taken the web development community by storm.

On one hand, it is easy to learn; On the other hand, it has the potential to evolve and then pose a serious threat to Flash, which is more or less synonymous with impressive animations.

HTML5 has come about thanks to the cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), in their collective pursuit to make the web a true treasure trove for mankind.

This tutorial shows you the following in an easy-to-learn manner:

  • The basic structure of a web page
  • The main elements of a web page
  • How to manipulate the elements to produce a meaningful web page using simple application like Microsoft's Notepad

Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Sams Teach Yourself HTML, CSS and JavaScript as a stepping stone towards your destination of a competent web developer.
Then, you can get a comprehensive practical understanding by reading Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:

 

<!DOCTYPE html>
<html>

 <head>
  <title>
  </title>
  <meta charset="UTF-8">
 </head>

 <body>
  <foot>
  </foot>
 </body>

</html>

 

The first line define the document type. The rest is the page structure in HTML5.

Headings

In HTML5, there are 6 different types of headings for a web page, starting from <h1>, the largest, to <h6>, the smallest. They are as follows:

<h1>First Heading</h1>
<h2>Second Heading.</h2>
<h3>Third Heading.</h3>
<h4>Fourth Heading.</h4>
<h5>Fifth Heading.</h5>
<h6>Sixth Heading.</h6>

In addition to the fundamental tags, there are quite a few other tags which are essential to produce a meaningful web page.

The following image shows some of the main ones:

See the Pen LVjKML by VivaxSolutions (@VivaxSolutions) on CodePen.

See the Pen GJvbaB by VivaxSolutions (@VivaxSolutions) on CodePen.

Lists

An ordered list - numbered - or an unordered - bulleted - list could be made as follows:

See the Pen QbMXee by VivaxSolutions (@VivaxSolutions) on CodePen.

Tables

HTML5 tables give us a very creative way to arrange data on web pages. The following shows a basic table:/p>

See the Pen bdrXrb by VivaxSolutions (@VivaxSolutions) on CodePen.

Images

HTML5 <img> element gives us the opportunity to put images on web pages, with the following attributes:
src = source of the image
width = width of the image
height = height of the image
alt = description of the image

See the Pen VLzorG by VivaxSolutions (@VivaxSolutions) on CodePen.

Links

Links let us move from one web page to another web page in the same site or any site on the internet. It can just be a text link or an image link, as shown by the following:

See the Pen qdXeoY by VivaxSolutions (@VivaxSolutions) on CodePen.

Line Breaks, empty space, Emailing and Comments

HTML5 gives us elements for line breaks and comments too.

Line Break
- <br>
Comment
- <!--This is a comment.--->
Simple Emailing
- <a href="mailto:info@vivaxsolutions.com" >Email Me</a>
Empty space
- &nbsp;

 

 

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Email: 

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Advertisements

Advertisement