Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML Basic Tags

Html code can be written using Notepad or TextEdit HTML can also be edited by using a professional HTML editor like:

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Please follow below mentioned 4 steps to create your first web page with Notepad.

Step 1: Open Notepad Editor Step 2: Write your HTML code into your Notepad:

Step 3: Save Your HTML
Select Save as.. in Notepad's file menu. When you save an HTML file, you can select either the .htm or the .html file extension. There is no difference between this two.
Step 4: Run your HTML file using Browser
Open your web browser and run your html file from the File -> Open menu, or just browse the folder and double-click on your HTML file. The result should look much like this:

The basic structure for all HTML documents is very simple and should atleast include the below mentioned elements or tags:

  • <html>- The root or main container for HTML pages
  • <head> - The container for storing page header information
  • <title> - Assigning title to the page
  • <body> - The main body or content of the page

Before an opening <html> tag, an XHTML document can contain the optional XML declaration, and it should always contain a DOCTYPE declaration indicating which version of XHTML it uses.
Now we will explain each of these tags as we proceed. In this tutorial you will see that term element and tag are used interchangeably.

The <html> Element:

The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag.
Following elements are direct children of an <html> element:

  • <head>
  • <body>
Start and ending HTML tags enclose all HTML tags you use to describe the Web page.
The <head> Element:
The <head> element is just a parent container for all other header elements. It should be the first thing to appear after the opening <html> tag.
Each <head> element should contain a <title> element indicating the title of the document, it may also contain below elements, in any order:

  • The <base> tag is used to create a "base" url for all links on the page.
  • The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime movies and other components of a page.
  • The <link> tag is used to link to external files such as a style sheet(*.css)
  • The <style> tag is used to include CSS rules inside the document.
  • The <script> tag is used to include JavaScript or VBScript files inside the document.
  • The <meta> tag includes information about the document such as keywords and a description, which are particularly helpful for SEO.

<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.tuton.orianaitsolutions.com" />
<link rel="stylesheet" type="text/css" href="site.css" />
<script type="text/javascript">
TestFunction();
</script>
</head>
The <title> Element:

You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> element. It is used in several ways:

  • It is displayed at the very top of a browser window.
  • It is used as the default name for a bookmark in browsers such as IE and Netscape.
  • It is used by search engines that use its content to help index pages.

Therefore it is important to use a title that really describes the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements.



<head>
<title>HTML Basic tags</title>
</head>
The <body> Element:

The <body> element appears after the <head> element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content.
A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables.
Most of what you will be learning in this and the following five chapters will be written between the opening <body> tag and closing </body> tag.



<body>
<p>This is a paragraph tag.</p>
</body>
Putting all together:

Now if we will put all these tags together, it will constitute a complete HTML document as follows:


<html>
<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.tuton.orianaitsolutions.com" />
<link rel="stylesheet" type="text/css" href="site.css" />
<script type="text/javascript">
TestFunction();
</script>
</head>
<body>
<p>This is a paragraph tag.</p>
</body>
</html>


Related Videos