With HTML5 you can create your own simple games and beautiful web pages. HTML5 is a big leap from its predecessor HTML4 and supports rich multimedia content found in most of the modern web pages. Let us explore how to create a beautiful working HTML5 applications.
I have created a mini working project – Solar System – that will help a beginner to implement top features of HTML5. You can also download the source code and run it locally in any browser, for best results view it in Google Chrome as browser compatibility is out-of-the-scope of this project. The objective of this project is to practically show a beginner (one who has prior knowledge of HTML4) how to use the new features of HTML5. You can be a little more creative and give it your own look-and-feel, the way you want it!
Download the source code from here
Here, a few screen-grab from the project.
P.S. – The video used in this project has been used here to demonstrate the ability of HTML5 and is for education purpose only. Those who are downloading it should use their own proprietary video if they wish to use this project for commercial purpose.
There are only two HTML pages in the Project.
In this project, apart from learning new tags you can see here how only 2 pages are used to reproduce many physical pages.
Here’s a brief write -up about the details of this project.
Codingthis.html
This project covers most of the new tags of HTML5.The <header> tag is used at the top for the introductory content “Learn top HTML5 features”. The <nav> tag is then used for navigating links. Inside the <nav> tag, three <a> tags are used for links. The code “target=main” in the <a> tag denotes that on clicking the respective <a> tags, the links will open in the div area whose name is “name=main”. In our case , this is the area below the navigation bar. Then the <iframe> is used with “name=main”, which is the target area for all the links. Finally, <footer> tag completes the page, we have written “ © www.codingthis.com” inside this tag.
Solar-About.html
The <div> tag whose attribute id=”intro” is the link which will be opened on iframe on clicking “The homepage” as we have given href = ”Solar-About.html#intro” in the <a> tag.
The <div> tag whose attribute id =”about_project” is the link which will be opened on iframe on clicking “Know about the project” as we have given href = ”Solar_About.html#about_project” in the <a> tag. Further inside this <div> tag we have used <canvas> tag which we have used to draw teal coloured lines. A <pre> tag is then used for writing some text in the page. Again a <canvas> tag is used to draw a line followed by the table used to explain the tags and functionalities used in the homepage. Again a <canvas> tag is used to draw a line followed by a table for “About the project”. At last two more <canvas> tags are used, in the middle of which the tags and functionalities of “The Solar System page” is explained using the table.
The <div> tag whose attribute id=”Solar” is the link which will be opened on iframe on clicking “The Solar System” as we have given href = ”Solar_About.html#Solar” in the <a> tag. Inside this <div> tag , a <video> tag is used to embed the video into the HTML5 page. The src attribute is used to get the video file from the place it is located in the system. The control attribute in the <video> is used to play/pause the video. The images are embedded in the page using <img> tag, the attribute src gets the place from the computer where the image is located, the width and height attributes specifies the width and height of the image. Links are created for the image using <a> tag. The href attribute then redirects the page to the following planets inside the iframe as the target attribute for these <a> tags is target=”main”.
Then comes the usage of <aside> tag, it defines some content aside from the content it is placed, in our case we have used the <aside> tag to place the contents of each and every planet aside into an iframe. The id attribute for each of the planets is used in the href attribute of the <a> tag above. Then the <section> tag is used to define a section in the document, as you can see, the facts and profiles of each planet is placed inside a <section> tag. Finally the <article> tag contains some other independent contents, we have placed the contents of the facts and the contents of the profile in the <article> tag.
The <link> tag is used to link the html page to css file for the styling purpose.
The main tags and their functionalities are given below in a table
| TAGS | FUNCTIONALITIES |
| HEADER | Defines the introductory content, in our case “Learn top features of HTML5” is the header. |
| NAV | Used for navigating through links, in our case, 2 links used for navigation are “About the project” and “Solar System” |
| FOOTER | Defines footer in a document as in a page, in our case, the use of “© www.codingthis.com”. |
| IFRAME | Used for embedding web pages within the page, in our case, “Solar-About.html page” is embedded within the “codingthis.html” |
| CANVAS | An HTML canvas is a rectangular area on an HTML page, in our case, a line in teal color is drawn after the tables. |
| TABLE | The table tag used here gives details about the project by tabulating the tags against the functionalities which is easy to understand. |
| VIDEO | The video tag embeds a video in the HTML page, in our case, a video about a solar system is embedded |
| SECTION | The section tag defines sections in a document, in our case, The facts and profiles of each planet is placed inside a section |
| ARTICLE | The article tag specifies independent, self-contained content, in our case, the content of facts and articles are placed inside an article |
| ASIDE | The aside tag defines some content aside from the content it is placed, in our case, the content about each planet is placed inside the aside tag |
Download the source code from here
Hope this helped you in getting started with HTML5. Please share this if you like this project.
Basant Singh
Latest posts by Basant Singh (see all)
- Go Maps Introduction for Beginners - May 20, 2015
- Go Programming – Arrays and Slices - May 11, 2015
- Golang Switch Case with Sample Code - May 1, 2015
