An HTML document, even when written in a structured way that makes it fit in the language standard, is nothing but a simple sequence of characters that can be found in any normal keyboard. In favor of portability, these characters are usally stored in files, the same as many other types of information.
A file containing an HTML document may have several extensions. In fact, it may have whatever extension you want, but if you give your document the “wrong” extension it may not be interpreted the way you’d like to (as an HTML document). So, the two extensions that will be normally interpreted as HTML documents are “htm” and “html”. The difference between these two extensions is just one letter (“html” isn’t supported by older operative systems which arn’t used nowadays), so you can use them as you prefer.
You may find sometimes, when surfing the web, that the URL address in your browser, corresponding to the document you’re currently reading, has a file extension like “php”, “asp”, “pl” or “cfm” (sometimes followed by a question mark “?” and many other things). Even when files with these extensions are associated with different server-side languages, at the moment they arrive to the client side they are no other thing but HTML documents. This is so because these files contain originally server-side scripts that are processed every time someone requests them and are transformed into normal HTML documents, before they are sent.
Once you’ve decided which extension you’ll use, you can pick a name for your file and create it. The process of creating the file is rather simple and involves a little knowledge about your operative system. Operative systems may differ in the way that users can create a file, but never too much. In the following paragraph, I’ll show you the process of creating a file in Windows 8, and leave you to figure out how to do it in other operative systems.
The image shows how to create a file in the desktop of Windows 8. The information displayed in this image is properly described in the text and serves only as a visual aid.We’ll create a file in the desktop, as this is only an example, but you may later consider an ordered structure, as we’ll see later in the “Organizing a website” tutorial . The first step is to right-click on any clear area of the desktop and select, from the context menu that will be deployed, “New” and then “Text Document”. This will create a text file and automatically let you input a name. There you put the filename and the extension chosen, that in this example is “example.html”.
In order to successfully change the file extension from “txt” to “html”, you’ll need to configure your operative system to show file extensions, otherwise you’ll only be changing the name. To do so, open a folder (like, for example, “My documents”), go to the “Tools” menu and select “Folder options…”. Once the options window is open you must uncheck the box “Hide file extensions for known file types” in the “View” tab.
Now that the file has been created, you’re ready to begin writing your document: choose a plain-text editor and open the file. All modern operative systems provide plain-text editors that you can use to write your documents. In this example, we’re using Windows’ Notepad but you can use or install other more specialized editors, like Notepad++ or Geany (they’re both free).
Open your file right-clicking on it and selecting, in the context menu that will be deployed, “Open with” and then “Notepad”. At this point you’re ready to start writing your web page.
To see your document rendered, just save it and open it in a web browser. In most modern operative systems you can open the document in the default web browser by double-clicking on the file’s icon. Once open, the changes you make to your document can be updated in the browser by just reloading the page.
This tutorial gave you the basic knowledge to handle files in a website. Now you’re ready to start writing and viewing your own documents. The follwing tutorial, “HTML tags and attributes” will introduce you to the basic components of any HTML document. Don’t miss it!