 |
| HTML and CSS tutorial for beginners in English |
Friends, you can write HTML and CSS using HTML editors. You can use your mobile or a computer as per your convenience. Read the following lesson.
HTML editors
Hello friends, welcome to KTL's HTML and CSS tutorial.
Today we are going to learn about Notepad++ and AnWriter. These are free HTML editors.
HTML editors are text editors which are specifically designed for writing scripts in coding languages like HTML, CSS and so on. These editors have features which help in writing HTML code.
Search in Google "free html editors" and you will find some names of editors like CoffeeCup, Komodo, NetBeans, Notepad++ and so on.
Notepad++ HTML editor
Today we will learn about Notepad++. Read this lesson carefully. We have discussed Notepad++ in detail. Once you understand this lesson, then you will be able to very easily use AnWriter on your mobile phones.
We can write HTML in Notepad++ in the same way as we do in Windows Notepad. This is very simple to use. Notepad++ works in Windows operating system. Additionally it has many features which are helpful when typing HTML. Notepad++ is also available for Android and Mac systems.
You will need to ensure that Notepad++ is there in your computer before we begin today's lesson. Before proceeding to install it, check if it is already there in your computer. Click on "Start" button, in the search bar type "Notepad++". If it is already installed in your computer then it will be displayed here. See the following figure.
 |
| Figure 1. Check if Notepad++ is already there |
If it is not there in your computer then you need to install it. Click here to download it. Download the latest version and install it in your computer.
To download it on mobile tap on this link and download it.
If you are using operating system which Notepad++ does not support, then search for a suitable HTML editor for your operating system and download it. You will find that number of free HTML editors are available. Once you understand how to write code in an HTML editor you will be able to work in any other HTML editor.
Now let us see how to use Notepad++ and see some of its features. This lesson explains Notepad++ for Windows operating system. Study carefully this lesson. If you are using it on mobile, proceed in similar way, you will learn to use Notepad++ on mobile.
Now open Notepad++. The following screen is displayed.
 |
| Figure 2. Notepad++ HTML editor |
At the top left corner, you will find a window title in which our file name is displayed. Also menu items and a tool bar are displayed. You will find normal menu items like File, Edit, Search and so on. Click on "File", you will find options like new, open, close, save and so on Click on "Edit", you will find copy, cut, paste, redo, undo and so on. We are familiar with all these. In tool bar you will find buttons for open, print, save, cut, copy, paste, undo, redo and so on.
Click on the "Language" option. Bring mouse on "A". Different languages beginning with "A" are displayed. Similarly number of languages are displayed under this option. We will need to select a language as per our requirement. We are writing HTML scripts, therefore we will select "HTML". Do this first thing before doing anything else in Notepad++. This is very important as Notepad++ displays code in different ways depending on our language selection. It uses specific color set and displays in bold or normal depending on the language that we have selected. This makes reading and writing code very simple.
Writing HTML in Notepad++
Let us begin to write our code.
First line is <!doctype html>. Next is <html>. As you begin to write this tag, Notepad++ will display suggestions. Autocomplete is a very useful feature. Simply select one of the suggestions displayed.
 |
| Figure 3. Suggestions in Notepad++ |
There are many tags, attributes, and values in HTML. As suggestions are displayed when typing, we need not remember all keywords and type them. This reduces errors when typing the code. We can make sure that syntax for a tag is correct and spellings are correct.
Next begin to type <head>. once again suggestions will be displayed, simply select one.
Now let us copy all code from our lesson-09. Once again note that you can open PDF file and copy code from that file.
 |
| Figure 4. HTML code in Notepad++ |
Observe carefully. In the left, line numbers are displayed. These play important role when typing long scripts. We can refer to a specific line by mentioning its line number.
There is a vertical ruler, which displays some "+" or "-" symbols. Click on one of these symbol. Say you click on "-" symbol near <title>. The symbol will become "+" and a horizontal line will be displayed instead of displaying code of title element. We can toggle this and we can display or hide code written for an element as per our need.
Click on word wrap button. This button is useful when long text is typed. Using this button we can display all text in a single line or we can wrap text as per our requirement.
Observe how h1, p, and img tags are displayed. Here attributes are displayed in red color and values are displayed in blue color. Also text is displayed in black and bold.
Now select "CSS" from "Language" option. Notice that display pattern is changed as language is changed. Note that color scheme is changed as per new language selected.
One important point. There are "zoom in" and "zoom out" buttons. Display size is changed. Keep the size that is convenient for you.
AnWriter for mobiles
Finally, There are many HTML editors available. If you are using mobile for writing HTML, then there is another editor named AnWriter.1. It is free. Size is only 2 Mb.
2. It supports HTML5 and CSS3.
2. You can download it from Google Play Store.
3. Very simple to work with. Simple interface.
4. Provides suggestions for all keywords (autocomplete).
5. You can save files in the folder of your choice.
6. You can run an HTML file and see its output from application itself.
Strongly recommended for mobiles. Begin to use it.
Friends, now you have learned how to use an HTML editors. Try using them.
