The basic structure for all HTML documents is simple and should include the
following minimum elements or tags:
- The main container for HTML pages
- The container for page header information
</b> - The title of the page</pre>
</li>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;"><b style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><body></b> - The main body of the page</pre>
</li>
</ul>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">Remember that 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.</pre>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">Now we will explain each of these tags one by one. In this tutorial you will
find the terms element and tag are used interchangeably.</pre>
<h2 style="margin: 0px; padding: 0px 0px 5px; border: 0px; outline: 0px; font-size: 24px; vertical-align: baseline; color: rgb(72, 66, 63); letter-spacing: -1px; line-height: 1em; font-weight: normal; font-family: 'Droid Sans', Arial, sans-serif;">
The <html> Element:</h2>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">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.</pre>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">Following two elements appear as direct children of an <html> element:</pre>
<ul style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; list-style: none; font-family: 'Droid Sans', Arial, sans-serif; line-height: 20px;">
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;"><head></pre>
</li>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;"><body></pre>
</li>
</ul>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">As such, start and end HTML tags enclose all the other HTML tags you use to
describe the Web page.</pre>
<h2 style="margin: 0px; padding: 0px 0px 5px; border: 0px; outline: 0px; font-size: 24px; vertical-align: baseline; color: rgb(72, 66, 63); letter-spacing: -1px; line-height: 1em; font-weight: normal; font-family: 'Droid Sans', Arial, sans-serif;">
The <head> Element:</h2>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">The <head> element is just a container for all other header elements. It should be
the first thing to appear after the opening <html> tag.</pre>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">Each <head> element should contain a <title> element indicating the title of the
document, although it may also contain any combination of the following elements,
in any order:</pre>
<ul style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; list-style: none; font-family: 'Droid Sans', Arial, sans-serif; line-height: 20px;">
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">The <base> tag is used to create a "base" url for all links on the page.</pre>
</li>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">The <object> tag is designed to include images, JavaScript objects, Flash</pre>
</li>
</ul>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">animations, MP3 files, QuickTime movies and other components of a page.</pre>
<ul style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; list-style: none; font-family: 'Droid Sans', Arial, sans-serif; line-height: 20px;">
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">The <link> tag is used to link to an external file, such as a style sheet or</pre>
</li>
</ul>
<p style="padding: 0px 0px 10px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; line-height: 24px; font-family: 'Droid Sans', Arial, sans-serif;">
JavaScript file.</p>
<ul style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; list-style: none; font-family: 'Droid Sans', Arial, sans-serif; line-height: 20px;">
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">The <style> tag is used to include CSS rules inside the document.</pre>
</li>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">The <script> tag is used to include JAVAScript or VBScript inside the document.</pre>
</li>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">The <meta> tag includes information about the document such as keywords and a</pre>
</li>
</ul>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;"></pre>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">description, which are particularly helpful for search applications.</pre>
<h2 style="margin: 0px; padding: 0px 0px 5px; border: 0px; outline: 0px; font-size: 24px; vertical-align: baseline; color: rgb(72, 66, 63); letter-spacing: -1px; line-height: 1em; font-weight: normal; font-family: 'Droid Sans', Arial, sans-serif;">
Example:</h2>
<blockquote style="margin: 1.5em; padding: 1em; border: 1px solid rgb(220, 220, 220); outline: 0px; font-size: 12px; vertical-align: baseline; background-color: rgb(230, 230, 230); quotes: none; color: rgb(102, 102, 102); font-style: italic; font-family: 'Droid Sans', Arial, sans-serif; line-height: 20px;">
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-color: transparent; font-family: 'Courier New', monospace;"><head>
<title>HTML Basic tags
The Element:</h2>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">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:</pre>
<ul style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; list-style: none; font-family: 'Droid Sans', Arial, sans-serif; line-height: 20px;">
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">It displays at the very top of a browser window.</pre>
</li>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">It is used as the default name for a bookmark in browsers such as IE and Netscape.</pre>
</li>
<li style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; font-family: 'Courier New', monospace;">Its is used by search engines that use its content to help index pages.</pre>
</li>
</ul>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">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.</pre>
<h2 style="margin: 0px; padding: 0px 0px 5px; border: 0px; outline: 0px; font-size: 24px; vertical-align: baseline; color: rgb(72, 66, 63); letter-spacing: -1px; line-height: 1em; font-weight: normal; font-family: 'Droid Sans', Arial, sans-serif;">
Example:</h2>
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'Courier New', monospace; line-height: 20px;">Here is the example of using title tag.</pre>
<blockquote style="margin: 1.5em; padding: 1em; border: 1px solid rgb(220, 220, 220); outline: 0px; font-size: 12px; vertical-align: baseline; background-color: rgb(230, 230, 230); quotes: none; color: rgb(102, 102, 102); font-style: italic; font-family: 'Droid Sans', Arial, sans-serif; line-height: 20px;">
<pre style="margin-bottom: 10px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-color: transparent; font-family: 'Courier New', monospace;"><head>
<title>HTML Basic tags
The Element:
The element appears after the 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 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 tag and closing tag.
Example:
Here is the example of using body tag.
This is a paragraph tag.
Putting all together:
Now if we will put all these tags together, it will constitute a complete HTML
document as follows:
No comments:
Post a Comment