Installing Netbeans and Java JDK in Ubuntu 14.04 and Setting Up a Basic HTML5 Project

Launching NetBeans and Creating a Basic HTML5 Project

To open Netbeans, select it from the Dash menu:

Start NetBeans

Start NetBeans

To create a new HTML5 project using the basic template provided by Netbeans, go to FileNew projectHTML5HTML5 Application. Choose a descriptive name for your project and finally click Finish (do not include an external site template or javascript libraries at this time):

Create New Project in Netbeans

Create New Project in Netbeans

We will then be taken to the Netbeans UI, where we can add folders and files to our Site Root as needed. In our case, this will mean adding folders for fonts, images, Javascript files (scripts) and cascading style sheets (styles) to help us better organize our content in coming articles.

To add a folder or a file, right-click on Site Root and then choose NewFolder or HTML file.

Create HTML5 Project

Create HTML5 Project

Now let’s introduce some new HTML5 elements and modify the page body:

  1. <header> and <footer> define a header or a footer, respectively, for a document or a section.
  2. <main> represents the main content of a document, where the central topic or functionality is shown.
  3. <figure> is used for self-contained material, such as images or code, to name a few examples..
  4. <figcaption> shows a caption for a <figure> element, and thus it must be placed within the <figure> tags.
  5. <aside> is reserved for contents related somehow to the page content, usually related to it. It can be placed as a sidebar with help from CSS (more on this in coming articles).

.
Now copy the following code snippet to your index.html file in Netbeans.

TIP: Don’t just copy and paste from this window to your development environment, but take the time to type in each tag in order to visualize the auto-completion features of Netbeans, which will come in handy later on.

!DOCTYPE html>
<html>
	<head>
    	<title>TODO supply a title</title>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
    	<header style="background-color: #6699CC">THIS IS A HEADER</header>
    	<main>
        	<article>
            	<p>This is some sample text.</p>
            	<p>Another line of sample text for this HTML 5 article</p>
                	<aside>
                    	<figure>
                        	<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
                        	<figcaption>Figure 1: The HTML 5 logo</figcaption>
                    	</figure>
                        	<h2>Web development basics series at Tecmint.com</h2>
                        	<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
                        	<p>Some text here</p>
                	</aside>
        	</article>
    	</main>
    	<footer style="background-color: #CC6699">THIS IS A FOOTER</footer>
	</body>
</html>

You can view the page by selecting a web browser (preferably Firefox, as in the below image) and clicking the Play icon:

Open HTML5 Page in Firefox

Open HTML5 Page in Firefox

You can now view the progress of your development so far:

HTML5 Development Page

HTML5 Development Page

Summary

In this article we have reviewed some of the advantages of writing your web applications using HTML 5 and set up a development environment with Netbeans in Ubuntu 14.04.2.

We learned that this specification of the language introduced new elements and thus provided us with the possibility of writing cleaner code and replace resource-hungry components such as Flash movies with built-in controls.

In coming articles we will introduce jQuery and Bootstrap so that you can not only use these controls and watch your pages load faster, but also make them mobile-friendly.

In the meanwhile, feel free to experiment with other controls in Netbeans, and let us know if you have any questions or comments using the form below.

If You Appreciate What We Do Here On TecMint, You Should Consider:

TecMint is the fastest growing and most trusted community site for any kind of Linux Articles, Guides and Books on the web. Millions of people visit TecMint! to search or browse the thousands of published articles available FREELY to all.

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Gabriel Cánepa

Gabriel Cánepa is a GNU/Linux sysadmin and web developer from Villa Mercedes, San Luis, Argentina. He works for a worldwide leading consumer product company and takes great pleasure in using FOSS tools to increase productivity in all areas of his daily work.

Your name can also be listed here. Got a tip? Submit it here to become an TecMint author.

RedHat RHCE and RHCSA Certification Book
Linux Foundation LFCS and LFCE Certification Preparation Guide

You may also like...

5 Responses

  1. Valéry says:

    Thank you for this tutorial, simple and efficient, I could install Oracle’s JDK 8u51 and NetBeans “Java SE” edition 8.0.2 without problem (adapted a little bit your instructions to suit my needs – I don’t intend to do any HTML5 programing).

    Maybe you could add a short explanation on how to finalize the JDK 8 setup for one’s environment. I personally added these two lines to file ~/.profile:
    export JAVA_HOME=/usr/local/bin/jdk1.8.0_51
    export PATH=$JAVA_HOME/bin:$PATH

  2. Praduman says:

    nice tutorial

    do v need to set any env variable here??

    • @Praduman,
      When you install Netbeans, you will need to specify the path to the JDK installation, but that’s it. You should have a working Netbeans environment if you follow the steps outlined in this tutorial. Let me know if you run into any issues.

  3. Johny says:

    Looking forward to the series.. Though I already have the whole thing,set up.. It’s nice that there’s a separate tutorial for this as beginners get stuck at this step most of the time..

    One thing that always repelled me from using netbeans is the unusual fonts (when compared to windows and Mac) of the overall interface.. Do tell me a way to iron this out..

Got something to say? Join the discussion.

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.