Home » HTML Tutorial » HTML Basics

HTML Basics

Chapter-1

HTML Fundamentals

HTML stands for Hypertext Markup Language. HTML is a improved is a improved version of SGML-Standard Generalized Markup Language.

 

Evolution of HTML:-

HTML evolved in the following four stages:

 

Level 0- included only the basic structural elements and assumed that all browsers supported all features of Level 0. This was very similar to SGML.

 

Level 1:- Advanced features included highlighted text and graphics that were supported depending on the browser capability. Many useful elements found in the current version of HTML were added in this stage.

 

Level 2:-introduced the World Wide Web as an interactive medium. Forms with high level of user interaction were introduced.

 

Level 3:-Introduced framed and multimedia support.

 

HTML document

 

A website consists of a collection of web pages. Every web page is created by using a special application tool called as HTML. Every file created by using HTML is called as a HTML file. The terms “HTML document” and “HTML page” also refer to the HTML file.

 

A HTML is converted to a web page:

 

The set of instruction written in HTML is interpreted by the web browser (ex: Internet Explorer, Netscape etc.). That is, every instruction is read line by line by line and the appropriate action for that line is carried out. Thus the whole HTML code is converted into a web page which is presented to the end user.

 

Tags Explained

The key components of HTML are tags. Every HTML page (i.e. a web page) is a collection of tags.

 

What is a tag:

 

A tag is a keyword enclosed in <>. Ex: <br>,<hr>,<bode>,,</body> etc.

 

There are two types of tags:-

                Empty tags:- Empty tags are keywords enclosed within <>,

                                                Ex:-<BR><HR>

                Container tags: A container tag can have a empty or container tag enclosed within itself. It has the following syntax -<keyword></keyword>.

                                Ex: <table></table>, <html><body></body></html>

 

The container tags are also known as paired tags.

 

Build a simple HTML Document

 

Open Notepad and type the following

 

<html>

<head>

<title>My First HTML document</title>

</head>

<body>

</body>

</html>

 

Save the file as “first.htm”

 

Open Internet Explorer and open the file.htm.

 

The browser will display a blank page. At the top-left corner of the browser the line “My First HTML document” will be displayed.

 

In the above example, the following container tags are used.

 

<html></html>

<head></head>

<body></body>

<title></title>

 

We Will see the function of these elements in detail.

 

<html>….</html>

This tag marks the beginning and end of an HTML.document.

 

<head>….</head>

Every HTML. Document theoretically has a header and body. The <head></head> tag marks the beginning and end of the header of an HTML. Document.

<title>….</title>

This tag identifies the title of an HTML. Document. This tag is usually used within <head></head> tag.

 

<body>…..</body>

 

This tag marks the beginning and end of the body of an HTML. Document.

 

The body tag has several  attributes. They are

 

 

 

 

 

 

 

 

 

 

  1. BACKGROUND:-

Syntax:- Background = URL.

 

EXAMPLE

 

<html>

<head>

<title> My Background</title>

</head>

<body background=”ss.jpg”>

</body>

</html>

 

The above example will display a page with the image “ss.jpg” as background.

 

  1. BGCOLOR:-

Syntax: bgcolor=color

 

Specifies color for background.

 

  1. TEXT :-

Syntax: text=color

 

Specifies color for the text.

 

  1. LINK :-

Syntax: link=color

 

Specifies color for links on a page.

 

  1. ALINK :-

Syntax: alink=color

 

Specifies color for action links on a page.

 

  1. VLINK :-

Syntax:-vlink=color

 

Specifies color for visited links on a page.

 

  1. LEFTMARGIN :-

Syntax:-leftmargin = n

 

Specifies the distance between the left side of the document and the left edge of the window.

 

  1. TOPMARGIN :-

Syntax:-topmargin = n

 

Specifies the distance between the top of the document and the top of the browser window.

 

 

 

 

  1. RIGHTMARGIN:-

Syntax:-rightmargin = n

 

Specifies the distance between the right side of the document and the right edge of the browser window.

 

  1. BOTTOMMARGIN:-

Syntax:-bottommargin=n

 

Specifies the distance between the bottom of the document and the bottom edge of the browser window.

 

Let us a example which utilizes some of the attributes of the body tag.

 

 

EXAMPLE

 

<html>

<head>

<title>Technical BaBaG</title>

</head>

<body bgcolor=green topmargin=10 bottommargin=20 leftmargin=20 rightmargin=20 link=red text=blue>

This is a link.<br>

<ahref=”newfile.html”>Click Hare!!!</a>

</body>

</html>

 

Run the above example in a browser and see. The web page will have a green background. The line “This is a link” Will appear in blue color. A underlined line – “Click Here!!!” will appear in red color. This link is called as a link.  Links usually refer to other web pages. If you click a link, it will take you to another web page. The tag  <a>..</a> is used to create a link. We will see links and <a>..</a> (called as Anchor tag) tag in detail later.

 

NOTE:-

                Thetopmargin,bottommargin,leftmargin and rightmargin may not work with all browsers well.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*