Getting Started with HTML

HTML as we have already seen is defined as HyperText Markup Language, consists of many tags or elements that define the property of the text or image or any other stuff you add within it.

HTML tags, nearly all of them, come in pairs, for example, to indicate a paragraph we use the 'p' tag i.e < p > and < /p >. Any text within < p > and < /p > is defined as a paragraph. Here < p > is the start tag and < /p > is the end tag.

Every HTML document starts with the 'html' start tag < html > and end with the html end tag < /html >. A html document consists of 2 main divisions, the head denoted by the head tag(< head > and < /head >) and body denoted by the body tag (< body > and < /body >).

The head tag contains all the information like the styles used, description for the web page, links to any external style sheet or scripts(internal and external) which we will come to later in the series.

The body tag is where all the "visible" data goes. If anything is to be displayed on the web page it MUST be written within the body tag i.e < body > and < /body >.

A basic example of a HTML document is given below:

< html >
< head >
< /head >
< body >
< h1 > this is my first heading < /h1 >
< p > this is my first paragraph. You can create any number of headings and paragraphs as you want.. < /p >
< /body >
< /html >

You can see the browser output of this code in the image below. Click on it to see it in full size.

Now that we have seen and understood the basics of writing HTML document, let us see how to write it. For creating a HTML document like the one above, you can use any simple text-editor like Notepad for Windows and save the output as .html . Or you can choose HTML editors like Textpad or Notepad++ or some high level editors like Adobe Dreamweaver. I suggest you use Notepad++, a free ware, which is light on the system and is simple to install and use. Textpad is not a freeware and can be equally good. So any of these two would be perfect to start with. Just save the file as *****.html and view it any browser you want and you can see the result there.

Next i will be talking about HTML elements. So till then, See ya.

Coding: Where to Start?

Websites that you see in your browser,look good,attractive and informative but have you ever wondered what goes "behind the scenes" in your favorite browser? Have you ever bothered to check how the browser displays all these images,text,videos and lots of other stuff that you can see in your free website? Well i will explain all that here. 

Every Website has something called "the source", it is something which tells the browser how to display that particular website. There are many ways to code a website. You can do it using HTML and CSS or using PHP or ASP and many more. But let us start with the real basics. We will go through HTML first.

The first question you might have in your mind is What is HTML? It is a language devised for creating website which can be viewed by anyone else who has an internet connection.  HTML is relatively  easy to learn and can be done in a few days.

HTML stands for  HyperText Markup Language.

1. Hypertext is the method you move around the web by clicking on a special text called Hyperlinks which takes you to a different page or a section in the same page. (it looks something like "this")
2. Markup is what HTML tags do to the text inside them (italicised text, for example).
3. HTML has syntaxes and codewords like any other language.

How does it work?

HTML contains a numerous short codestyped  into a text-file by the site author — these are the tags,  saved as a html file, and viewed through a browser, like Firefox or Chrome. This browser reads the file and translates the text into a visible form, rendering the page as the author had intended. 

The tags are what separate normal text from HTML code. These are the words between the . They add stuff like images and videos and stuff, just by telling your browser what to do whith the text on the page. Different tags will perform different functions. The tags WILL NOT  appear when you view your page through a browser, but their effects do. Some tags are used to format some text, like this:

<i>These words will be italic </i>,and these will not. 

In the example above, the <i> tags were wrapped around some text, and the contained text will be in "italics" when viewed through an ordinary web browser.

But, using HTML and designing good websites is not that easy, which is what I try to help you with rather than just teach what HTML is all about. Learning techniques and correct use of your tag knowledge will improve your work immensely, and the more you practice, the more you do better. But always bear in mind the audience of the websites.  The audience  are the people who visit your wesbsite and also bear in mind the BROWSER they use. These things can be researched and  i will be coming to it later.

Now that we know what to start with, let us see how to understand HTML Tags and how these are used in websites, this will be explained in my next post. Till then happy learning.