Getting Started with HTML5 - HTML5 Foundations - page 6

• Notepad++ is a popular text editor for Windows developers, and the best bit is that it is completely free (as
in beer). It supports many different programming languages, including the ones that you will be using in
this topic. Download Notepad++ at http://notepad-plus-plus.org/download/v6.1.html .
• gedit is a simple text editor that is available for all flavors of Linux that use the GNOME desktop environ-
ment (such as Ubuntu). It supports themes and syntax highlighting, and you can also find loads of great
plug-ins online. Like Notepad++, gedit is free. You can download gedit at ht-
tp://gedit.en.softonic.com/download .
You need a text editor to begin creating your website, so if you don't have one on your machine already, download
one now and install it.
Developer Tools
Sometimes, when you are building a website you want to quickly manipulate the page styles or test some JavaScript
without having to go back to your text editor to make the changes. This is where developer tools come in. All of the
most popular web browsers either have developer tools built in or have extensions available that will give you simil-
ar functionality. You will find that you become most accustomed to the tools available in your browser of choice;
however, it is useful to know how to access and use the developer tools in other browsers in case you have to look
into a compatibility issue when testing your websites.
In this section, you learn how to access (and in some cases install) the developer tools for Chrome, Firefox, Safari,
Opera, and Internet Explorer.
• Chrome Developer Tools —Access the Chrome developer tools from the Chrome browser by clicking on
the little wrench to the right of the address bar and selecting the Developer Tools option from the Tools
menu. Alternatively, you can right-click on an element on the screen and select Inspect Element from the
context menu. Figure 1-2 shows the Google UK home page being inspected using the Chrome developer
tools.
The Chrome developer tools contain lots of features to help you interact with and monitor your web pages.
The tools that you will be using the most for the examples in this topic can be found in the Elements,
Scripts, and Console tabs in the developer tools window. I use the Chrome developer tools throughout this
topic.
• Firebug for Firefox —Firebug does not come bundled with a fresh installation of Firefox, so with Firefox
open, you need to download the latest version from http://getfirebug.com . Firebug is free to use.
Once you have the Firebug extension installed, access it by choosing Tools ⇒ Web Developer ⇒ Fire-
bug ⇒ Open Firebug. As with the Chrome developer tools, you can also access Firebug by right-clicking an
element on the page and selecting Inspect Element with Firebug from the context menu.