Launching NetBeans and Creating a Basic HTML5 Project<\/h3>\n
To open\u00a0Netbeans<\/strong>, select it from the\u00a0Dash menu<\/strong>:<\/p>\n Start NetBeans<\/p>\n<\/div>\n To create a new HTML5 project using the basic template provided by Netbeans, go to\u00a0File<\/strong>\u00a0\u2192\u00a0New project<\/strong>\u00a0\u2192\u00a0HTML5<\/strong>\u00a0\u2192\u00a0HTML5 Application<\/strong>. Choose a descriptive name for your project and finally click\u00a0Finish<\/strong>\u00a0(do not include an external site template or javascript libraries at this time):<\/p>\n Create New Project in Netbeans<\/p>\n<\/div>\n We will then be taken to the\u00a0Netbeans UI<\/strong>, where we can add folders and files to our\u00a0Site Root<\/strong>\u00a0as 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.<\/p>\n To add a folder or a file, right-click on\u00a0Site Root<\/strong>\u00a0and then choose\u00a0New<\/strong>\u00a0\u2192\u00a0Folder<\/strong>\u00a0or\u00a0HTML<\/strong>\u00a0file.<\/p>\n Create HTML5 Project<\/p>\n<\/div>\n Now let\u2019s introduce some new\u00a0HTML5<\/strong>\u00a0elements and modify the page body:<\/p>\n . TIP<\/strong>: Don\u2019t 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.<\/p>\n You can view the page by selecting a web browser (preferably\u00a0Firefox<\/strong>, as in the below image) and clicking the\u00a0Play<\/strong>\u00a0icon:<\/p>\n Open HTML5 Page in Firefox<\/p>\n<\/div>\n You can now view the progress of your development so far:<\/p>\n HTML5 Development Page<\/p>\n<\/div>\n In this article we have reviewed some of the advantages of writing your web applications using\u00a0HTML 5<\/strong>\u00a0and set up a development environment with\u00a0Netbeans<\/strong>\u00a0in\u00a0Ubuntu 14.04.2<\/strong>.<\/p>\n 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.<\/p>\n In coming articles we will introduce\u00a0jQuery<\/strong>\u00a0and\u00a0Bootstrap<\/strong>\u00a0so that you can not only use these controls and watch your pages load faster, but also make them mobile-friendly.<\/p>\n In the meanwhile, feel free to experiment with other controls in\u00a0Netbeans<\/strong>, and let us know if you have any questions or comments using the form below.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n In\u00a0Part 1<\/a>\u00a0of this series, we set up a basic HTML 5 project using Netbeans as our IDE, and we also presented a few elements that have been added in this new specification of the language.<\/p>\n Create Mobile-Friendly Responsive Websites \u2013 Part 2<\/p>\n<\/div>\n In few words, you can think of\u00a0jQuery<\/strong>\u00a0as a cross-browser and cross-platform Javascript library that can greatly simplify client-side scripting in HTML pages. On the other hand, Bootstrap can be described as a complete framework that integrates HTML, CSS, and Javascript tools to create mobile-friendly and responsive web pages.<\/p>\n In this article we will introduce you to\u00a0jQuery<\/strong>\u00a0and\u00a0Bootstrap<\/strong>, two priceless utilities to write HTML 5 code more easily. Both jQuery and Bootstrap are licensed under the MIT and Apache 2.0 licenses, which are compatible with the GPL and are thus free software.<\/p>\n Please note that basic HTML, CSS, and Javascript concepts are not covered in any article of this series. If you feel you need to get up to speed with this topics first before proceeding, I highly recommend the\u00a0HTML 5 tutorial<\/a>in W3Schools.<\/p>\n To download jQuery, go to the project\u2019s web site at\u00a0http:\/\/jquery.com<\/a>\u00a0and click on the button that displays the notice for the latest stable version.<\/p>\n At the time of this writing it\u2019s\u00a0v1.11.3<\/strong>\u00a0for full-browser compatibility (including Internet Explorer versions 6, 7, and 8) or\u00a0v2.1.4<\/strong>\u00a0if you\u2019re sure that your visitors will not be using those versions of IE.<\/p>\n We will go with this second option in this guide.\u00a0DO NOT<\/strong>\u00a0click on the download link yet (the following illustration is only meant to indicate which is the right option).<\/p>\n Download JQuery<\/p>\n<\/div>\n You will notice that you can download either a compressed\u00a0 For the sake of brevity and easiness of use, we will download the compressed (also known as\u00a0minified<\/strong>) version to the scripts folder inside our site structure.<\/p>\n Right click on the link for the compressed, production version and choose\u00a0Save Link As<\/strong>\u2026, and then navigate to the indicated directory (you may want to refer to the path indicated where we chose to save our project in\u00a0Part 1<\/strong>).<\/p>\n Finally, click\u00a0Save<\/strong>\u00a0on the bottom of the current dialog:<\/p>\n Save jQuery<\/p>\n<\/div>\n Now it\u2019s time to add\u00a0Bootstrap<\/strong>\u00a0to our project. Go to\u00a0http:\/\/getbootstrap.com<\/a>\u00a0and click on Download Bootstrap. On the next page, click on the highlighted option as indicated below to download the minified components, ready to use, in a zip file:<\/p>\n![\"Start](\"https:\/\/www.tecmint.com\/wp-content\/uploads\/2015\/07\/HTML5-Mobile-Web-Development.jpg\")
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n
\nNow copy the following code snippet to your\u00a0index.html<\/code>\u00a0file in Netbeans.<\/p>\n!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n \t<title>TODO supply a title<\/title>\r\n \t<meta charset=\"UTF-8\">\r\n \t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\t<\/head>\r\n\t<body>\r\n \t<header style=\"background-color: #6699CC\">THIS IS A HEADER<\/header>\r\n \t<main>\r\n \t<article>\r\n \t<p>This is some sample text.<\/p>\r\n \t<p>Another line of sample text for this HTML 5 article<\/p>\r\n \t<aside>\r\n \t<figure>\r\n \t<img src=\"https:\/\/www.w3.org\/html\/logo\/downloads\/HTML5_Logo_256.png\" alt=\"HTML 5 logo\" \/>\r\n \t<figcaption>Figure 1: The HTML 5 logo<\/figcaption>\r\n \t<\/figure>\r\n \t<h2>Web development basics series at Tecmint.com<\/h2>\r\n \t<h3><a href=\"http:\/\/dev.w3.org\/html5\/html-author\/\">This is HTML 5!<\/a><\/h3>\r\n \t<p>Some text here<\/p>\r\n \t<\/aside>\r\n \t<\/article>\r\n \t<\/main>\r\n \t<footer style=\"background-color: #CC6699\">THIS IS A FOOTER<\/footer>\r\n\t<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n<\/a><\/p>\nSummary<\/h3>\n
Adding jQuery and Bootstrap to Write a Mobile-Friendly and Responsive Web Application<\/h1>\n
<\/a><\/p>\nIncorporating jQuery and Bootstrap into Our Project<\/h3>\n
<\/a><\/p>\n.min.js<\/code>\u00a0or an uncompressed\u00a0.js<\/code>\u00a0version of jQuery. The first is meant specially for websites and helps reduce the load time of pages (and thus Google will rank your site better), while the second is targeted mostly at coders for development purposes.<\/p>\n<\/a><\/p>\n