Typically, when people are trying to learn a programming language, their very first experience working with that programming language is creating the hello world example, sometimes known as a hello world program.
In this tutorial, I will show you how to create your very first HTML file and give some helpful pointers.
Let’s Learn HTML!
First open your favorite raw text editor, such as notepad in Microsoft Windows or TextEdit for OSX.
If you already had your editor open because you were working on a different file, save that file and then create a new file by clicking on menu and then selecting new file.
I suggest immediately saving the file so that you know where the file is located and can get the file name correct.
The file name for this tutorial will be “helloworld.html” and it’s important that the file name should have either a .html or .htm file extension.
Note: If you are using TextEdit(Mac) ensure that you are in plain text editing mode. You can change this setting in the preferences menu.
Type the following code into your text editor and save the document.
Code:
<html>
<header><title>Hello World Example!</title></header>
<body>
<h1>Hello World!</h1>
<p>Just another HTML Tutorial<p>
</body>
</html>This is exactly what your file should look like:
You can now minimize the text editor window and open your new document in a browser window.
As you can see the page looks very plain in Google Chrome.
Explanation of the HTML Hello World file.
The HTML tag at the start of the document indicates that this is an HTML file to the browser.
The header tag is the location for code and scripts that load before the page of content is rendered. This section also contains the title tag, which displays descriptive text in the menu bar of the browser you are viewing the page in.
The title tag is then closed along with the header tag.
The body tag indicates that the code within the tag is the body of the document.
The heading one tag is then opened and closed with a title for the document that will be displayed at the top of the page and is typically in a larger than normal font. This tag is incredibly important for search engines and your HTML document should contain only one h1 tag.
The h1 tag is then closed.
A paragraph tag is opened and a short paragraph of text is included in this example.
The body tag is then closed.
The HTML tag is then closed indicating the end of the HTML file. Note that any code after the end of this tag may not be rendered in the browser.
Using Code Editors to Make Writing HTML Easier
I personally prefer to use a text editor that is specifically designed for writing computer code. These editors will provide you with many useful tools that basic text editors do not provide for you, such as syntax highlighting, intelligent line spacing, and a tabs for files, so you can quickly and easily switch between multiple files that you are working on.
I personally use the Sublime Text Editor with you can download here.
Here’s an example of what the html color syntax highlighting looks like, as you can see it makes the code much more readable and easier to work with.
