Getting started with HTML5

This is an edited excerpt from Chapter 1 of HTML5 Foundations published by Treehouse

So you're eager to start building a website? By the end of this chapter, you will have done just that!

You start by getting your computer primed for building websites. That means you’re going to install a text editor and a lot of web browsers. I take you on a brief tour through some of the most popular text editors, web browsers, and developer tools so you can decide which ones you want to use.

Once you have your computer set up for building websites, you’ll learn about HTML elements and attributes. These are the basic building blocks that make up web pages.

There are a few things that all good web developers should know. That said, toward the end of this chapter, you will learn how to validate the HTML code that you have been writing. You will also learn that your websites can sometimes behave differently depending on which browser they are being viewed in.

What is HTML?

Hyper Text Markup Language, or HTML, is the basic code that makes up the foundation of every website on the World Wide Web. HTML is used for marking up text and other page content, and for defining how a web page is structured.

A web page is made up of lots of content—text, images, even videos. Each of these pieces of content is marked up using HTML syntax (a collection of words and symbols that can be understood by computer programs). HTML is also used to describe the structure of the page, defining each of the different sections it may have (such as a header, content area, and footer).

HTML is used to define the page content and how it is structured, but it is not responsible for how the page actually looks—the color, borders, and positioning of elements. That is a job for Cascading Style Sheets, or CSS, which you will look at briefly later in this book. There is also one other language that is commonly used when building websites. JavaScript is a programming language that is used in conjunction with HTML and CSS to build interactive features for web pages. Later in this book you will be using JavaScript to build custom play- back controls for a video.

HTML is always evolving. The latest revision of HTML is HTML5, the subject of this book. The official specification for HTML5 outlines a large number of new features that enable web developers to create websites that are faster and smarter than those they could build using older versions of HTML. These new features include LocalStorage (which enables developers to store data on the user’s computer) and HTML5 Video (that enables video playback in your web browser without needing a plug-in like Flash) as well as new interactive elements, such as date pickers and sliders.

The term HTML5 has become somewhat of a buzzword in recent years, used by clients, bosses, and developers alike to describe what is coming next in the journey of web technologies. Although this usage is common, it is not strictly accurate. HTML5 is just one part of a large number of standards that are collectively referred to as New Exciting Web Technologies (NEWT). Alongside HTML5, NEWT also encompasses things like WebGL (3D graphics in the browser) and GeoLocation (finding a user’s location). Although GeoLocation is not strictly part of HTML5, you will learn about it later in this book because it is so cool that I just couldn’t leave it out.

Setting Up Your Tools

Before you can start building your own web pages, you first need to set up some tools. You likely have at least one browser and possibly a text editor already installed on your computer, but you’ll want to widen your range of browsers and you’ll need to add some specialist developer tools, too.

Browsers

Many different web browsers are available, and it is important that you test your website in all of the most popular ones in order to make sure that your website looks and behaves as you want it to. I recommend installing the latest version of each of the following five brows- ers (if they are available for your operating system):

Google Chrome

Google’s web browser, Chrome, is known for being both fast and secure. It also boasts great sup- port for the latest HTML5 and CSS3 technologies. Chrome has some great developer tools that you will be using later in this book to interact with the web pages that you create. Google Chrome also updates itself automatically whenever a newer version is available. You can download the latest version of Chrome here.

Mozilla Firefox

One of Firefox’s greatest strengths is its vast extension library that contains loads of great tools, including the very popular Firebug developer tools, to help you build websites. The browser also has great support for the majority of HTML5 technologies. Firefox also has an automatic update feature, similar to that found in Google Chrome. Download the latest ver- sion here.

Apple Safari

Apple‘s Safari browser is popular with Mac and Windows users alike. The built-in developer tools can also be useful when trying to diagnose a problem in a web page. Like Google Chrome, Safari also has great support for some of the latest HTML5 technologies. You can grab the latest version of Safari here .

Microsoft Internet Explorer

Internet Explorer (IE) is still one of the most popular browsers used today. Microsoft has released many versions of IE over the years, and it is worth noting that not all Windows operating systems will support the latest versions of IE. Windows XP, for example, does not support any versions of Internet Explorer past IE8. This means that Windows XP users will never get the latest HTML5 features without installing extra plug-ins or a different browser. Some older versions of the browser were plagued with bugs that meant that developers had to spend hours of extra time getting their web pages to display correctly. Fortunately, Microsoft has done a great job with the latest versions of IE (9 and 10) and has also managed to incorporate some of the latest HTML5 technologies. The latest version of IE will usually be downloaded when you perform Windows Updates; otherwise you can get it here.

Opera

Opera has been gaining in popularity in recent years, due in part to the success of its mobile browser. Opera software is a driving force in the development of the HTML5 specification, and has implemented a lot of HTML5 technologies in the latest versions of its browser. Like Chrome, Opera also has an auto-update feature. You can download the latest version of Opera here.

Text Editors

Your text editor is your faithful sidekick. You will use it to write all your HTML, CSS, and JavaScript code. A good text editor can actually make you more productive and help you to quickly identify any errors that you may make while coding. In this section, I list four of the most popular text editors for Mac, Windows, and Linux, but many other alternatives are available.

Sublime Text 2 is rapidly gaining popularity among developers because of its flexibility and its great set of features. It is used in the latest Treehouse videos and offers loads of features, including themes, code completion, and snippets. Sublime Text 2 is not free, but many developers find that purchasing it is a good investment because it can help to increase your productivity. Currently, versions are available for Mac, Linux, and Windows. You can download Sublime Text 2 at http://www.sublimetext.com/2. Figure 1-1 shows Sublime Text 2 in action.

Figure 1-1 Editing an HTML document with Sublime Text 2

TextWrangler is a good general-purpose text editor that is available for the Mac. Unlike Sublime Text 2, TextWrangler is free. You can download it from http://www.barebones.com/products/TextWrangler/.

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 book. 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 environment (such as Ubuntu). It supports themes and syntax high- lighting, and you can also find loads of great plug-ins online. Like Notepad++, gedit is free. You can download gedit at http://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 similar 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 book can be found in the Elements, Scripts, and Console tabs in the developer tools window. I use the Chrome developer tools throughout this book.

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 ToolsWeb DeveloperFirebugOpen 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.

Figure 1-2 Inspecting a web page using the Chrome developer tools

You can change the location of the Firebug tools panel by clicking the Firebug icon in the top-left corner and selecting an option from the Firebug UI Location menu.

Dragonfly for Opera—Opera’s Dragonfly developer tools are built directly into the browser so there are no extensions to install. You can access Dragonfly by going to ToolsAdvanced and selecting Opera Dragonfly.

Dragonfly has many of the standard developer tools that you would expect from a modern browser. The Documents and Scripts tabs will be particularly useful when building the examples in this book. Note that the developer tools are updated automatically when new versions are released.

Web Inspector in Safari—Safari’s Web Inspector Developer Tools are similar to the developer tools found in Google Chrome. That’s because they are both built upon the Web Inspector tools in WebKit.

Before you can access the developer tools in Safari, you need to enable them. To do this, open the Preferences pane by pressing Ctrl plus the comma key in Windows or Command plus the comma key on a Mac. In the Preferences pane, click on the Advanced tab and select the checkbox labeled Show Develop Menu in Menu Bar. You should now see the Develop menu appear in the menu bar at the top of the screen. If you use Safari on Windows, you may need to display the menu bar by clicking the cog in the top-right corner and selecting Show menu bar. You can access all of Safari’s developer tools, including Web Inspector, from the Developer drop-down menu.

Safari also has a number of other developer tools that enable you to easily turn off caching, images, styling, and JavaScript. These tools can be very useful when testing how a website will look and behave in less capable browsers.

IE Developer Tools—Internet Explorer has a set of built-in developer tools that can