HTML 101, Part 2 – Setup

« HTML101 Part 1 || HTML101 Part 3 »

Welcome back to HTML Bootcamp, recruit. Today we will be covering editing environments, setting up your very first HTML document and testing it in a web browser. So let’s not waste any time and get down to business!

1. Editors

When you’re on the battlefield you need to be comfortable with your equipment and know how to use it. If your helmet is too big for you or your rifle’s strap is broken you’re not really performing the way you should. The same principal applies to coding. If your editing environment causes you more headaches than anything else you’re not really performing at maximum capacity. So making the right choice when it comes to which editor you use is not something to be taken lightly.

Initially you might be able to get away with using your operating system’s standard text editor, like Notepad on Microsoft Windows, but later you’ll want to pick the right tools to make your job easier. When you reach that point you can go one of two routes.

Integrated Development Environment

Integrated Development Environments or IDEs are your one-stop-shop tools for development. IDEs usually offer you quite a number of tools in one central location to do all your development with, be it HTML, CSS, PHP, Javascript or any of a host of other languages. They have tons of features and have a tool for almost any job. This may sound scary and overwhelming to new developers and it can be, but popular IDEs usually have enough documentation to support new users. IDEs are at their most useful when working on large projects with hundreds of files that you need to keep track of.

Apart from a learning curve associated with IDEs, the major drawback is speed. IDEs do tend to take a couple of seconds to load, so at the times when you want to double click a file, jump in and make a quick change, it can become a bit annoying.

Popular IDEs include Codelobster, Netbeans and Eclipse. These are by no means the only options available. Feel free to find one that suits your style should you choose to use an IDE.

Text Editors

Text Editors are exactly that, programs in which you can edit text. Good-old text editors will always hold one edge over their bigger and bulkier IDE brothers in that they’re fast and simple to use. No clunky configuration process, no loading times, no splash screens and almost no hassles.

The more advanced text editors also allow you to install plug-ins to get specific functionality that doesn’t come standard with the software. This allows you to customize it to your liking without sacrificing general performance.

We used HAPedit and recently started using Notepad++ in our offices for exactly those reasons. They’re fast.

2. Hello World

In most “army movies” the first words drilled into the skull of new recruits are the words, “SIR, YES SIR!“. Similarly, programmers learn to code a small application that writes the words “Hello World” on screen whenever they start out in a new language.

So let’s get started.

Doctype

As you learned in Part 1, we start off our documents with the doctype. We’ll be using the XHTML 1.0 Strict doctype for this demo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML tag

Next comes the opening html tag.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

HEAD tag

After this we insert our head tags which act as “dogtags” for our HTML document. A place where we put information about our document. For now we’ll only specify our document’s title. For this demo let’s call it “Hello World”.

<head>
    <title>Hello World</title>
</head>

As you can see the <title> tag contained in the <head> tag specifies the title of the page. This is the title that appears at the top of your browser as seen in the image below.

The title tag

Content

After the head comes the body. Just to recap, the body is where the actual content of your document is specified. The content of our Hello World document will simply be the text, Hello World.

<body>
<p>Hello World</p>
</body>

The p tags around the text are for paragraphs. Tags will be covered in more depth in Part 3 of this series.

Final Touches

You’re almost done, but one last thing remains. You have to close your html tag which you opened after the doctype. Your code should now look as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
		<title>Hello World</title>
	</head>
	
	<body>
		<p>Hello World</p>
	</body>

</html>

Congratulations, you’ve just completed your first HTML document. Before you can view the fruits of your labours, you need to save your document.

When you are saving your document and the text editor you’re using does not give you the option to select HTML as the type, select the All Files option and we’ll manually enter our extension.

Saving a document as html

You may notice that editors that do give you the option to save a document as HTML will have 2 extensions listed, .htm and .html. Both are acceptable extensions for html documents. Apart from the extra L there aren’t any major differences. .html is the newer and the standard extension used today while .htm dates back to the days when operating systems limited file extensions to 3 characters.

Save your document as hello_world.html.

Saving a document as html

3. Viewing HTML Documents

Now that you have your finished document saved somewhere on your system, it’s time to view it. To view html documents locally, you use the same program that you would use to view them on the world wide web, a web browser. Once again, there are several options when it comes to browsers and most operating systems come with one bundled. In our offices we prefer Google Chrome or Mozilla Firefox, but feel free to use any browser you like, and preferably an up-to-date one! You wouldn’t want to go into war with a musket when the enemy troops all have m16’s.

No matter which browser you use, there should be an option to open a file somewhere on your toolbar. The standard shortcut Ctrl+O should work as well. Navigate to where you saved your file and open it. There you have it, your very first HTML document, congratulations!

4. Modifications & Debugging

One of the pros of HTML is that you can view the results of your code in real time without needing to go through a lengthy compiling process first. To demonstrate this, change the text on your current document to something else, such as your name.

With your source code open in a text editor and the document open in a web browser, simply tab to your text editor. Modify the line that read <p>Hello World</p> and replace the “Hello World” with your name. Your code should now look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
		<title>Hello World</title>
	</head>
	
	<body>
		<p>Your Name Here</p>
	</body>

</html>

To view the results switch back to your browser and refresh the page by clicking on the refresh button or by pressing F5 in most browsers. The page should now reload and reflect your latest changes. As you can see, HTML allows you to view the results of changes you make, on the fly.

In closing

After working through this article, you should now be able to create 1-page static html documents with plain text in them. In the next bootcamp training session we’ll cover some more tags (like the p tag) and their uses, and delve deeper into the wonderful world of web development.

« HTML101 Part 1 || HTML101 Part 3 »

Leave a Reply