Introductory HTML | First Step for Beginners to HTML

introductory-html-basic-structureHTML is the main file type which enables us to view/browse websites through webbrowser like Firefox, Internet Explorer etc. This article is written for newbie so I am giving more elaboration about HTML.

As you already know a file named a-name.mp3 is a music and we use media players to run this file. Usually a software or any type of file player/decoder understand the file format from its name which appears after the last dot ‘.’ in its name. When the file type is recognized it decodes/runs the file as per requirement.

How HTML is Supplied to Browser:

When we browse the internet our browser just runs those HTML files supplied to it. Any file having .html extension can be opened using any browser. If we want to play a video, first we have to open the Media Player. Then the location of the file has to be selected from the player’s navigation menu. When we put a web address in address bar of FireFox and hit go, we actually tell it the location of the HTML file.

beginners-html-introductory-article

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is a not any kind of programming or scripting language. As it says, it is a simple text document written in combination of Markup Tags. Markup Tags are texts written in certain format so that browser can apply HTML attribute to the content.

To see an example lets create a plain text document using Notepad of Windows or any text (.txt) editor and save the file as ‘name.html’. Then open this file in/using your browser. You should find no change in view of the file between your browser and Notepad. So, we need HTML tags to manipulate more style.

What is HTML Tags?

HTML Markup Tags are those words or group of words that carry certain commands to perform. Markup tags are not revealed by a web browser; they are invisible. An HTML tag usually contains a start tag & an end tag and the any contents (text, image, script etc.) between this are effected by the tag. A beginning tag and an ending tag are identical, except a “slash” (/). A ‘/’ is placed (not ”) before the command of the ending tag to tell the browser that the command has been completed. A typical tag of that type is <u> and </u> Note: Not all tags contain start & end command.

HTML-tag

Lets create a file using the text ‘This is an <u>HTML</u> document’ using Notepad and save it as name.html; then open it in your browser. You can see the tag underlined the text in it. This is a simple example. You can make any change to an HTML document but all tags should be definite to appear properly.

Editors Caution:

So, there is a caution for newbie while editing any HTML document don’t make any change in tags unless you know. DON’T PUT ANY CHARACTER BETWEEN ‘<‘ AND ‘>’ WITHOUT ANY KNOWLEDGE. Before, I usually use repeated character like 11111,222222 333333 and if needed even more, in the source file of a page to determine the position of content. Source file is the basic HTML version of a webpage where all Markup Tags and scripts can be viewed. To place any content like adblock at a certain position in a page you can use this method. Don’t put any unnecessary character in a script or it will appear as broken.

HTML Editor/Web Designing Software:

The last point I want to discuss is about an HTML editor to create HTML file. There is a lot of HTML editor like DreamWeaver, Front page, but these are too heavy for newbie. Notepad is enough to learn basic HTML but you will have to use your browser to preview. In an HTML editor you will get the preview even in a click. So it will be easy to make changes and have a look. A free simple and easy software is NVU that you can download from NVU’s website selecting your operating system. It’s a portable soft, extract and click ‘NVU.exe’. At the bottom of the main screen two tabs are Source and Preview; where you can play with source code and preview how it looks.

html-editor-nvu-download

Another important issue is difference between some special characters that are used in Markup Tags. Some of them are:

‘‘‘ and ' ' '
’’’ and ' ' '
“““ and " " "
””” and " " "

Always use right side ones in markup tag. Left side character will break the function of the tag. For example

<p align="center" >This is an <u>HTML</u> document</p>

is right, but

<p align=“center” >This is an <u>HTML</u> document</p>

is false. In MS Office it always creates “” and ‘’ sign, but in Notepad it creates right one as it is in ANSI standards. This is all for your basic knowledge and a bit success will pay the price of the work.

Tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.