Launching NetBeans and Creating a Basic HTML5 Project
To open Netbeans, select it from the Dash menu:
To add a folder or a file, right-click on Site Root and then choose New → Folder or HTML file.
Now let’s introduce some new HTML5 elements and modify the page body:
- <header> and <footer> define a header or a footer, respectively, for a document or a section.
- <main> represents the main content of a document, where the central topic or functionality is shown.
- <figure> is used for self-contained material, such as images or code, to name a few examples..
- <figcaption> shows a caption for a <figure> element, and thus it must be placed within the <figure> tags.
- <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:
You can now view the progress of your development so far:
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.