The Complete HTML5 Course 2018 From Beginning to Advanced

HTML vs HTML5 - What's the Difference?

HTML vs HTML5 - What's the Difference?

This comparison on HTML vs HTML5 is intended to provide a crisp knowledge about both the markup languages and guide you to find the suitable one if you are building your own web page or web application.

This comparison on HTML vs HTML5 is intended to provide a crisp knowledge about both the markup languages and guide you to find the suitable one if you are building your own web page or web application.

History of HTML

The history of the hypertext markup language is a strange and interesting tale. The man behind HTML, Tim Berners-Lee was putting together his first elementary browsing and authoring system for the Web and created a quick little hypertext language that would serve his purposes.

But the problem lied in the simplicity of the language. HTML was text-based and anyone could use any editor or word processor to create or convert documents for the Web. The developers started implementing new features in their browsers and started releasing advanced versions of HTML.

Introduction to HTML & HTML5

HTML stands for Hyper Text Markup Language and it is the standard markup language for creating web pages and web applications. It is used to describe the structure of Web pages using markup.

HTML5 is the 5th version of HTML and is a core technology markup language of internet that is used for structuring and presenting the content for www.

Comparison between the Two

Now lets have a look at all the new elements that were added in HTML5 and the factors that make it better than HTML.

Let’s look at the factors we will be using for the comparison on HTML vs HTML5:
Video & AudioVector GraphicsStorageWeb Browser SupportEase of Use

Video & Audio

The first factor in HTML vs HTML5 is the introduction of audio and video in HTML5. There was no such concept of media in case of HTML. But it is one of the integral part of the 5th Version.

Vector Graphics

Vector graphics was used in HTML with the help of various technologies such as VML, Flash, Silverlight etc. But it is an integral part of HTML 5 such as canvas and svg. This was a new addition to the revised version.

Storage

The third factor of comparison is storage. In case of HTML, we can use the browser cache as the temporary storage whereas in case of HTML5, **application cache, web SQL database **and web storage is used.

Web Browser Support

Now for the first version of HTML, all the old web browsers run smoothly for creating web pages. For HTML5, the new browsers have started supporting its specifications. Some of the browsers include mozilla firefox, chrome, opera etc.

Ease of Use

While HTML5 does have risks like** constant updates**, it is generally easy to keep up with the changes and updates because of the simpler syntax as compared to other versions of HTML. For instance, you have a very simple declaration at the start of the page to set it as an HTML5 page, ie, the doctype declaration.

New Elements in HTML5

The comparison on HTML vs HTML5 also includes new elements and tags that have been added to the latest version. HTML5 comes with a number of new elements and eliminates several others. Some of the tags were discarded in the new HTML version and the usage of tags were changed accordingly.

Let’s have a look at some of the important tags that were added in HTML5:

Audio & Video

The **audio tag **and the video tag are the two major additions to the HTML5. The audio tag and the video tag enables developers to embed music and audio on their website.The audio & video tags also have a number of attributes for additional controls.

<audio autoplay=”autoplay” controls=”controls”>
<source src=”music.ogg” />
<source src=”music.mp3″ />
</audio>

There are a few other multimedia attributes and elements that come with HTML5, like the track element that provides text tracks for the video element.

Canvas

One of the key added elements in HTML5 is which has hugely impacted the use of Adobe Flash in websites. The element can be used to draw graphics with various shapes and colors via scripting, usually JavaScript. The element is simply a container for the graphics.

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>
</canvas>

Header > & < Footer

Another big addition that HTML5 comes with are the new and elements, indicating a new web anatomy. With these new tags, there is no longer a need to identify the two elements with a

tag.

<header>
<h1>Title </h1>
<div class=”post-meta”>
<p>By Author</a> <span class=”category”>Filed in Web 2.0</span></p>
</div>
</header>
<article>
<p>Body of text</p>
</article>

The footer is placed at the bottom of the web page but it can also be placed at the end of a page section.

<header>
<h1>Title </h1>
<div class=”post-meta”>
<p>By Author</a> <span class=”category”>Filed in Web 2.0</span></p>
</div>
</header>
<article>
<p>Body of text</p>
</article>

Menu

Given the fact that the web has changed into more just linked paged and documents, the tag is a welcome addition for greater web interactivity. It represents menu commands for simplicity in desktop and mobile applications.

<body contextmenu=”new-context-menu”>

<menu id=”new-context-menu” type=”context”>

<menuitem>Hello World</menuitem>

</menu>

</body>

Now with this, we come to an end of this comparison on HTML vs HTML5. I Hope you guys enjoyed this article and understood the difference between the two versions and how HTML5 is better and simpler in use. So, if you have read this, you might have a clear idea about which version of HTML you should opt for, while building your own web page.

Learn HTML5 Canvas - DRAW - HTML & JavaScript

Learn HTML5 Canvas - DRAW - HTML & JavaScript

We go over the basics of the HTML5 Canvas element and use JavaScript to draw lines, circles, squares and rectangles to the DOMs Canvas. JavaScript combined with HTML5 Canvas can be used to draw elements anywhere you want inside of the HTML5 Canvas. We learn the basics in a simple how to video but in the next part we will look how to animate the HTML5 Canvas using JavaScript to change the X & Y coordinates of shapes we create. We will follow an Object Oriented Programming pattern.

HTML 5 tutorial - How to view Google Maps in the HTML Page?

HTML 5 tutorial - How to view Google Maps in the HTML Page?

In this HTML 5 tutorial, we will show you how to view Google Maps in the HTML page in just a few lines of HTML tags, CSS, and Javascript codes.

An example of view Google Maps in HTML page from scratch complete with setup Google Maps Javascript API

We will start this tutorial with the setup of Google Maps API in the Google Developer Console. After that, we will display or view Google Maps in the HTML page using the created Google API Key. Configuration and layout will be done using a little** Javascript** and CSS codes.

Setup Google Maps API Key

To view Google Maps in the HTML page using Javascript API we need a Google Maps API key. The Google Maps JavaScript API lets you customize maps with your own content and imagery for display on web pages and mobile devices. The Maps JavaScript API features four basic map types (roadmap, satellite, hybrid, and terrain) which you can modify using layers and styles, controls and events, and various services and libraries.

Next, open your browser the go to the Google Developer Console. You will be taken to this Google Developer Console page.

Just scroll the default opened projects then it will take to this dialog.

Click the "New Project" button then it will take to this New Google Project page.

Fill the project name and leave other fields as default then click the "Create" button and it will take to the Google Developer Console home page with default opened project. Select again the project then choose the newly created Google project and click the "OK" button. It will take to the new Google project dashboard without any APIs enabled.

Click the "Enable API" button then it will take to this Google APIs library page.

Find and choose Maps Javascript API then it will take to this Maps Javascript API page.

Just click on the "Enable" button then it will take back to the Maps Javascript API dashboard.

Click on Credentials link then it will take to the Credentials page.

Click on "+ Create Credentials" link then choose "API KEY" and it will take to the API KEY dialog. Copy and paste the newly created API KEY to your Notepad or Text Editor for using in the HTML page.

View Google Maps in HTML Page

Now, we will create an HTML page from scratch starting by creating a new HTML file in your project folder. You can create the HTML file using your text editor, IDE, or terminal/command line. Next, open and edit that HTML file then adds these HTML tags that just contain a div for viewing Google Maps.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Google Maps</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

As you can see, we declare an HTML 5 page by defining HTML using this tag . Next, include the Google Maps Javascript API before the closing of tag.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

In that Google Maps Javascript API calls include a callback to "initMap" function. Add a Javascript code after or before that Google Maps Javascript API calls.

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 53.430938, lng: -2.960841},
      zoom: 17
    });
  }
</script>

Just using the HTML page and Javascript function will not display Google maps in the browser. For that, you have determined the size of MAP DIV using CSS. Add the CSS or STYLE codes before the end of the tag.

<style>
    #map {
      height: 100%;
    }
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
</style>

Now, you can see the Google Maps in the HTML page like this.

If you see a Grey Google Maps view like ours, that means, your Google developers account to reach the limits of API quota's and it needs to upgrade.

That it's, an example of View Google Maps in HTML Page. You can find the full source code in our GitHub.