How to Create an HTML document

Hands on the keyboard

This is a practical guide section that demonstrates the concepts you are about to study in the next sections of this chapter.

What we are going to do in this practical guide:

  1. creating the working folder
  2. creating an HTML document
  3. Using a text editor program to write HTML document
  4. Typing HTML code
  5. previewing our HTML document in a web browser

If you never wrote an HTML document before, don’t worry I will treat you as a new comer in this field.  The first thing to do is to create a folder where to store the files that we will be creating.

Creating the working folder

  • Step 1:  Open your computer drive by clicking the computer icon  on your desktop (for windows 7).
  • Step 2: On the left site of the pane, find a folder called libraries and click on documents.
The library folder on Windows
  • Step 3: create a new folder by clicking New Folder button on the toolbar and name the new folder lesson-01.

Tip on naming a folder: select the folder you have just created and press F2 on your keyboard and then type the new name of your folder.

how to create a new folder on Windows

Creating an HTML document

Now that you have created a working folder, it is time to create our first html document which will help us understand the concepts we are going to study in this chapter.

  • Step 1: double-click the lesson-01 folder you created   in order to open it and place you mouse pointer somewhere in the folder and right-click in order to get the following popup menu:
How to create a new text document on Windows

After clicking Text Document on the sub-menu, you should get the following new file ready to be renamed:

  • Step 2: type “html-document-structure” as the new name of our new file and remove the “.txt” the  last part of the name and type “.html “ and the complete file name should be ( html-document-structure.html ) .

And the complete new file after renaming should look like the following:

Tip on changing file extension:  On windows 7, the last part of a file name such us (.txt) might not be visible depending on the settings of your computer. If this is the case for you, then follow the following guide to make the file extension visible:

  • Step 1:  click the Organize button on the toolbar.
  • Step 2: show file extensions

Now that you have created your HTML file, let us write some HTML code in it and see what will be our study in this chapter.

Using a text editor program to write HTML document

What is a text editor program?

A text editor program is a program used to edit plain text document  which doesn’t feature any drawings (only text allowed), no too much formatting (e.g. text alignment, letter spacing, borders, and underline) and usually the font style used is at the same width (e.g. courier New) . On Windows 7, Notepad is one of the plain text document editor programs that you can use to write html files and other computer code related files.  You should never use Word editor programs such as Microsoft Word Document program to edit computer code files. This kind of word editors add more hidden code that you don’t see which helps the program to render styles, drawings, and formatting of the content within the document.

Example of a plain text document editor

Leave a Comment

Your email address will not be published. Required fields are marked *