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:
- creating the working folder
- creating an HTML document
- Using a text editor program to write HTML document
- Typing HTML code
- 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.
- 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.
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:
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.