Writing First Web Page and Basic Document

First web page of your site will be the main or home page of your website. In my previous post about The Internet and the Web and HTML Standards, I discuss about the index.html this is the very first page that the web locates.

To write a HTML document you need a simple text editor like Notepad, a rich editor like WordPad, an HTML editor like HTML-Kit or a WYSIWYG (What You See Is What You Get) HTML editor like Dreamweaver.

A WYSIWYG (pronounced "wiz-ee-wig") editor or program is one that allows a developer to see what the end result will look like while the interface or document is being created. WYSIWYG is an acronym for "what you see is what you get".

(WYSIWYG)

Why we need to use text editor?

Text editor is a simple, and easy to use program that is used to write, open, view and edit plain text documents. I use Notepad in making web page instead of rich-text editor. A rich-text editor is like a simple word processor makes it possible to add formats like text colors. But once the document is saved as an HTML document, all the formats applied are removed.

Using a text editor to save a document, by default, it gives the extension name .txt.

For example,

Saved and the file name "myfirstpage.txt". When a text document is opened, it opens with the default text editor.

If saving the document with the extension name .html, it becomes an HTML document instead of a text document.

When an HTML document is opened, it opens with the default web browser (Google Chrome my default browser).

When you edit an HTML document using a text editor, make sure that it open with the text editor and not with the web browser.

You can also use, HTML Editors. For advanced users, a more sophisticated text editor. HTML Editors are built specifically for composing HTML documents. They have useful features such as syntax highlighting, color codes for better readability, large file support, find and replace corrections, among others.  HTML editor is HTML friendly, easier and more fun to use. Some have built-in tools that make writing HTML much easier. Just a few of these tools are -

•  A list of all HTML tags and attributes that can be picked and clicked
• A color palette to pick the colors from
• HTML checker that correct HTML codes syntax.

There are also professional HTML editors. These editors are WYSIWYG editors. It means that you compose your web page exactly the way it looks on a browser and you can do it without knowing and understanding any single HTML. It is like composing a Word document. Simply type the text, insert the image, etc and the HTML codes are automatically generated by the editor.

Some professional web development do not prefer professional HTML editors.

For the reason that the HTML codes are generated by the software, they can not control how they want to write the HTML codes. The choice of tags is the software's "decision", not the developers.

Web pages created by these HTML editing software are more difficult to maintain because they have to understand how the software generated the codes. It is easier if they are the ones who exactly authored the HTML document.

Some professional HTML editors are not tidy. The way the codes are generated are not organized.

Some professional HTML editors automatically generate tables rather than div to layout the page and inline styles instead of internal or external CSS.

Most of the professional HTML editors can do more than HTML editing. Some of these can also generate script like JavaScript, PHP, ASP, etc. Adobe Dreamweaver, for example, can be used in a network, an advantage for web development organizations. These editing software are expensive as well.

If you are a beginner and plan to be a Certified HTML Developer, using professional WYSIWYG HTML editor is not advisable. It is best to start writing the HTML yourself in order to learn. As a beginner, you are advised to use the non-WYSIWYG HTML editors. Though a number of HTML editors for professional can be downloaded from the internet for free.

Here are a few of free HTML Editors for Professionals

• Amaya (www.w3.org/amaya/)
• HTML Kit (www.htmlkit.com)
• Webtide (www.webtide.eu)
• Notepad++ (notepad-plus-plus.org)

Creating a HTML document, you need to followed a certain rules for the web browser to be able to understand what was written in the HTML document.

Document Structure

The standard structure of an HTML document.

On a browser, only the body portion is displayed. The <title> content is displayed on the title bar of the browser or tab.

Image Source: 0 | 1 |

Site References:

http://www.w3schools.com/html/html_editors.asp

http://www.htmlgoodies.com/tutorials/getting_started/article.php/3863271

http://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML

http://earn.shayhowe.com/html-css/building-your-first-web-page/

Follow me @lapilipinas