HTML Tutorial
Posted: Thu Oct 01, 2009 1:34 am
HTML is not a programming language, but rather a markup language. In November 1990 the first web page was launched with little no standards. Since then the World Wide Web Consortium was formed and they put forward the new set of standards, which we follow this tutorial.
HTML - Introduction
Creating an HTML document is easy.
To begin coding HTML you need only a simple-text editor. You can use any text editor like notepad etc.
You can write your HTML code to design your web pages that can be used to:
Market your business.
Let the world know about your personal pages.
Spread information to a large audience.
An HTML file is often called an HTML document or a Web Page. An HTML file name must an extension .htm or .html
HTML Elements
HTML Elements includes the paragraph texts, title, the navigation links and all those you see in front of you.
An element consists of three parts:
An opening tag.
The element's content.
A closing tag.
Every web page requires 4 basic elements: the html, head, title, and body elements.
The HTML element
Every webpage begin and end with an HTML tag. Its sole purpose is to encapsulate all the HTML code, so that the web browser can understand it.
Example:
Save the above code as index.html. Now open the index.html file in your browser, you will find a blank page.
The HEAD element
The head functions "behind the scenes." Here you can add the elements used for scripting (Javascript), formatting (CSS) and the title.
Example:
The TITLE element
The title tag is placed within the head element. All those that you write in between the opening and closing <title> </title> tags will be displayed at the top of the browser.
Example:
Save the above code and open it in the browser. You should see "My Website!" in the upper-left, as the window's title.
The BODY element
All your web contents are added here. It includes the Paragraphs, pictures, tables, etc. We will discuss these in detail as the tutorial progress.
Example:
Now check out your website!
HTML Tags
A web browser reads an HTML document top to bottom, left to right.
The tags are impotent in HTML as it signals the browser to display it accordingly.
Tags have 3 major parts:
There are lots of tags in HTML. There are tags for headers, tables, forms, images, paragraphs etc. The tags should be lower-case letters.
Below given are few example tags.
Tags Without Closing Tags
There are few tags that do not require the closing tag.
Some of them include the line break tag, image tag, input tag etc.
Example:
As these tags do not have any contents, they do not require the closing tag.
HTML Attributes
Attributes provide additional information about the tag and they are placed within the opening tag and they follow a precise syntax. With the help of attributes we add the body colours, align text etc.
HTML - ID Attribute
The "id" attribute plays a major role in formatting your text but it serves behind the scene.
It calls the id values from the Cascading Style Sheets (CSS) file and format your text accordingly.
We will discuss about CSS in detail in our CSS tutorials.
Example:
HTML - Name Attribute
The name attribute is used to add a scripting varible to an element.
This variable can be used with the scripting languages such as Javascript, PHP etc. The name attribute is widely used with user-input elements.
Example:
HTML - Title Attribute
The title attribute is used to give a title text to your headings, images etc.
This attribute do not have any direct impact but when you keep the mouse over the image of text you can see the title poping up.
Example:
The title attribute provides some useful information to the users.
HTML - Align Attribute
The align attribute is used to format the text. You may use left, right or center.
Example:
Some of the important attributes and its functions are given below.
The Paragraph tag is very important in publishing written contents.
The Paragraph tag starts with <p> and end with </p>.
The Syntax:
Example code:
Adding the paragraph tag automatically adds s blank line above and below the text of the paragraph.
HTML - Paragraph Alignment
The paragraph text can be formatted and aligned as per our requirement.
We use the align attribute justify, center, right etc to format our paragraph text.
Example:
HTML - Introduction
Creating an HTML document is easy.
To begin coding HTML you need only a simple-text editor. You can use any text editor like notepad etc.
You can write your HTML code to design your web pages that can be used to:
Market your business.
Let the world know about your personal pages.
Spread information to a large audience.
An HTML file is often called an HTML document or a Web Page. An HTML file name must an extension .htm or .html
HTML Elements
HTML Elements includes the paragraph texts, title, the navigation links and all those you see in front of you.
An element consists of three parts:
An opening tag.
The element's content.
A closing tag.
Every web page requires 4 basic elements: the html, head, title, and body elements.
The HTML element
Every webpage begin and end with an HTML tag. Its sole purpose is to encapsulate all the HTML code, so that the web browser can understand it.
Example:
Code: Select all
<html>
</html>The HEAD element
The head functions "behind the scenes." Here you can add the elements used for scripting (Javascript), formatting (CSS) and the title.
Example:
Code: Select all
<html>
<head>
</head>
</html>The title tag is placed within the head element. All those that you write in between the opening and closing <title> </title> tags will be displayed at the top of the browser.
Example:
Code: Select all
<html>
<head>
<title>My Website!</title>
</head>
</html>The BODY element
All your web contents are added here. It includes the Paragraphs, pictures, tables, etc. We will discuss these in detail as the tutorial progress.
Example:
Code: Select all
<html>
<head>
<title>My Website!</title>
</head>
<body>
Hello World!
</body>
</html>HTML Tags
A web browser reads an HTML document top to bottom, left to right.
The tags are impotent in HTML as it signals the browser to display it accordingly.
Tags have 3 major parts:
- opening tag
- content(s)
- closing tag
There are lots of tags in HTML. There are tags for headers, tables, forms, images, paragraphs etc. The tags should be lower-case letters.
Below given are few example tags.
Code: Select all
<body>Body Tag (acts as a content shell)
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>There are few tags that do not require the closing tag.
Some of them include the line break tag, image tag, input tag etc.
Example:
Code: Select all
<input type="text" size="10" /> -- Input Tag
<img src="image.jpg" /> -- Image Tag
<br /> -- Line Break TagHTML Attributes
Attributes provide additional information about the tag and they are placed within the opening tag and they follow a precise syntax. With the help of attributes we add the body colours, align text etc.
HTML - ID Attribute
The "id" attribute plays a major role in formatting your text but it serves behind the scene.
It calls the id values from the Cascading Style Sheets (CSS) file and format your text accordingly.
We will discuss about CSS in detail in our CSS tutorials.
Example:
Code: Select all
<p id="bold"> Paragraph text in Bold </p>
<p id="small"> Paragraph text in small size </p>The name attribute is used to add a scripting varible to an element.
This variable can be used with the scripting languages such as Javascript, PHP etc. The name attribute is widely used with user-input elements.
Example:
Code: Select all
<input type="text" name="TextName" />The title attribute is used to give a title text to your headings, images etc.
This attribute do not have any direct impact but when you keep the mouse over the image of text you can see the title poping up.
Example:
Code: Select all
<h2 title="Heading!!!">Heading Tag 2</h2>HTML - Align Attribute
The align attribute is used to format the text. You may use left, right or center.
Example:
Code: Select all
<h3 align="left">Left aligned</h3>
<h3 align="center">Centred</h3>
<h3 align="right">Right aligned</h3>- align - Horizontally aligns tags
- valign - Vertically aligns tags.
- bgcolor - Places a background colour behind an element.
- background - Places an background image behind an element
- id - Names an element for use with Cascading Style Sheets.
- class - Classifies an element for use with Cascading Style Sheets.
- width - Specifies the width of tables, images, or table cells.
- height - Specifies the height of tables, images, or table cells.
- title - "Pop-up" title for your elements.
The Paragraph tag is very important in publishing written contents.
The Paragraph tag starts with <p> and end with </p>.
The Syntax:
Code: Select all
<p>
Paragraph content
</p>Code: Select all
<p>
We are learning to create Paragraph in HTML.
</p> HTML - Paragraph Alignment
The paragraph text can be formatted and aligned as per our requirement.
We use the align attribute justify, center, right etc to format our paragraph text.
Example:
Code: Select all
<p align="justify">
We are learning to create Paragraph in HTML.
</p>
<p align="center">
We are learning to create Paragraph in HTML.
</p>
<p align="right">
We are learning to create Paragraph in HTML.
</p>