HTML Tutorial

Life is 10% what happens to us and 90% how we react to it. If you don't build your dream, someone else will hire you to help them build theirs.

HTML Tutorial

Introduction

Web pages are written in HTML language. HTML stands for HyperText Markup Language, which means:
1. Hypertext is simply a piece of text that works as a link.
2. Markup Language is a way of writing layout information within documents.

An HTML document is a plain text file that contains text. When a browser opens an HTML file, the browser will look for HTML tags in the text and use them to change the layout, insert images, or create links to other pages.

A more popular choice is to use a special HTML editor – maybe even one that puts focus on the visual result rather than the codes – a so-called “What You See Is What You Get” editor (WYSIWYG editor).

Notepad is a very basic text editing program which is excellent for coding because it does not interfere with what you are typing. It gives you complete control. The problem with many of the programs that claim they can create websites is that they have a lot of standard functions, which you can choose from. The downside is that, everything needs to fit into these standard functions. Thus, this type of programs often cannot create a website exactly as you want it. Or – even more annoyingly – they make changes to your hand-written code. With Notepad or other simple text editors, you only have yourself to thank for your successes and errors.

A browser and Notepad (or a similar simple text editor) are all you need to go through this tutorial and make your own websites.

Elements and tags

Elements give structure to a HTML document and tell the browser how you want your website to be presented. Generally an element consists of a start tag, some content, and an end tag.
Tags are labels you use to mark up the beginning and end of an element. All tags have the same format: they begin with a less-than sign “<" and end with a greater-than sign ">“. HTML is all about elements. To learn HTML is to learn and use different tags.

For Example :

<p>This is  paragraph text</p>

Most browsers might not care if you type your tags in upper, lower or mixed cases. , or will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.

Basic layout of HTML page

The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML. This is done with the tag <html> (no surprises there). So before you do anything else type "<html>" in the first line of your document in Notepad. <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. The next thing your document needs is a "head", which provides information about your document, and a "body", which is the content of the document. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).
So the document look like:

<html>
<head>
</head>
<body>
</body>
</html>

HTML document has two parts: a head and a body. In the head section you write information about the page, while the body contains the information that constitutes the page.
Information related to HTML document is placed into head section. Styles, client script and meta tags are the part of head section.
Note that this title will not appear on the page itself. Anything you want to appear on the page is content and must therefore be added between the "body" tags.
We want to communicate the “This is my first web site” to the browser. So in the body section, type the following:
<p> This is my first web site.</p>

The p in <p> is short for "paragraph" tag.

Now HTML document should now look like this:

<html>
 <head>
  <title>My first website </title>
  </head>
 <body>
  <p> This is my web site.</p>
  </body>
 </html>