A glance to HTML editors –
The basic necessity of developing a HTML document is the editor. There are a few popular editors used by professionals such as:
-
Microsoft Expression Web
-
Dreamweaver by Adobe
-
CoffeeCup HTML Editor
For newbies, it is recommended to start developing the code using text editors, including TextEdit (for Mac) and NotePad (for PC). A simple text editor aids the learners to get the command over the language quickly.
Steps for developing HTML code using Notepad –
Step 1 – Setting up the editor
-
If you are a Windows 7 user, tap Start (left bottom of screen) > tap All Programs > tap Notepad.
OR
-
If you are a Windows 8 user, tap Start Screen (windows symbol at the bottom left of the screen) > tap Notepad.
Step 2 – Writng your HTML code within the Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My heading of the content</h1>
<p>This is the body of the content.</p>
</body>
</html>
Step 3 – Saving the HTML page
-
Save the HTML document on the computer following the instructions given below:
-
Tap File > Save As listed in the Notepad menu.
-
Save files as “abc.htm” or “abc.html”. You can use any name to save the file.
-
UTF – 8 is the considered as the preferred encoding for HTML documents.
-
ANSI encoding is used that envelops Western European and US characters only.
Step 4 – Executing HTML page in a browser
You can use a browser to view your HTML code in the form of web pages. The following can be the result, if you have used above mentioned code:
Don’t forget using
-
<!DOCTYPE html> before starting the HTML document.
-
<html> and </html> tags to draft a HTML code.
-
<body> and </body> tags to show the main visible part of the web page.
You may see the above mentioned code to see the detailed explanation.
Example of HTML Document declaration
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p>This is the body of the content.</p>
</body>
</html>
Example of HTML Headings declaration
Headings are always declared using <h1>, <h2>,….,<h6> tags.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
You may use upto <h6> tag starting from <h1> tag.
Example of HTML Paragraphs declaration
Paragraphs are always declared using <p> tags.
<p>Paragraph of the content.</p>
<p>Another paragraph of the content.</p>
Example of HTML Links declaration
The links are always declared using <a> tags.
<a href=”http://www.technologydiving.com”>Technology Diving</a>
The address of the link is declared within the href attribute.
Attributes are used to define the additional information about the HTML element used. You will get to know the attributes in detail in the next tutorial.
Example of HTML Images declaration
Images within HTML document are always declared with <img> tags.
<img src=”technologydiving.jpeg” alt=”technologydiving.com” width=”201” height=”150”>
The various attibutes used with <img> tags are src (source file), width (size), height (size) and alt (alternative text).
