Untitled Document



 Introduction to HTML
 Structure of HTML
 Creating First HTML  Document
 Understanding Basic  HTML Tools
 Creating First HTML  Document
 Understanding Basic  HTML Tools
   HTML Editors
 Web Browsers
 Starting an HTML  Document
 
 Starting an HTML  Document
 The <!DOCTYPE>  Declaration
 Setting the  boundaries With  <HTML> Tag
   The HEAD Element
   <TITLE> Tag
 A <BASE> for  Hyperlinks
 Showing  Relationships with  <LINK>
 Using <META>to give  More information
 The BODY Element
 
   The Body Element
   <BODY> Tag
 Breaking a Body into  Pieces
   Headings <Hn>
 A New Paragraph <P>
 A New Line <BR>
 Using Horizontal Rulers
 
 Using Horizontal  Rulers
 The STYLE Element
 
 The STYLE Element
 The SCRIPT Element
 
 The SCRIPT Element
 Head and Body tags
 Building Your HTML  Document
 Tables
 Frames
 Including Images into  Document
 Including Multimedia
 Developing HTML  FORMS
 Using Style Sheet
 Understanding URLs
 Using JavaScript
 Using Java

Copyrights : Layout Galaxy All Rights Reserved
No part of this tutorial may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, electrostatic, magnetic tape, mechanical or otherwise, without prior permission in writing from Layout Galaxy.




  Creating First HTML Document > Starting an HTML Document

  Starting an HTML Document

HTML documents are created by combining special markup codes called Tags. Tags define the structure of the document and provide the framework for holding the actual content, which can be text, images, or other special content. Structural element's primary purpose is to create the form of the document. These elements include the document itself, the head and body sections, page titles, and other basic document identifiers.

  The <!DOCTYPE> Declaration

In a perfect world, the <!DOCtype> tag would be the first tag in every HTML document. This tag tells the Web server what version of HTML it's dealing with, when it delivers the document, in turn, the server informs the browser what kind of tags it can expect inside. It's not really a part of the HTML DTD, but rather is a requirement based on the fact that HTML is an SGML application.

An example of <!DOCTYPE> declaration is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"
                           "http: //www.w3.org/TR/REC - html40/strict.dtd">
(This is for a HTML 4 document)
The three document types directly corresponding to W3C recommendations are:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
                           "http: //www.w3.org/TR/REC - html40/strict.dtd">
Which is for strict adherence to HTML 4 standards, excluding any deprecated items and frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
                           "http: //www.w3.org/TR/REC - html40/loose.dtd">
Which is for use as a stop-gap to support legacy browsers that still use deprecated features from HTML 3.2 and frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
                           "http: //www.w3.org/TR/REC - html40/frameset.dtd">
Which is for strict adherence to HTML 4 standards plus the inclusion of frameset tags.

Parts of this tags are

<!DOCTYPE> This is the main Tag
HTML Indicates that this document is an HTML document and not a word processor document or any other type
PUBLIC An identifier always used with the URL to enable the user's browser to download the DTD and its entity sets.
HTML 4.0 Transitional Version of HTML is use.
EN Indicates that the document is in English
URL (http-address) This URL finishes the tag and indicates where above mentioned specification for this version of HTML is located

  Setting the boundaries With <HTML> Tag

<HTML> is the start of an HTML page and it is paired with the </HTML> close tag. Elements allowed within the <HTML> tag are the <HEAD> or <TITLE> tags, followed by a <FRAMESET> or <BODY>. Even though the <HTML> tag is an optional one, it defines the boundaries of the HTML document and thus makes the downloading correct, proper and faster.

Syntax:

<HTML>
…elements and tags……..
</HTML>

The <HTML> tag is an optional element for building Web pages. This is especially true if the document is properly constructed with the appropriate defaults, the language and the direction and more importantly it conforms to the DTD and uses the DOCTYPE element. Some Good reasons to use the <HTML> tag are:

Some browsers get confused if the <HTML> tag is not given, resulting in a page displayed unpredictably, or as plain text , or with no display at all !
HTML is not the only markup language on the web.
It defines the boundary of the HTML document. So, browsers do not get confused with the size of the document and displays the page more proper, faster and without mistakes.

  The HEAD Element

Giving Your Page a <TITLE>
A <BASE> for hyperlinks
Showing relationships with <LINK>
Using <META> to give more information

Theoretically every document has a header and a body. The header of the document is where global settings are defined: it is contained in the <HEAD> and </HEAD> tags. Headers also serve another important role in locating the page when it is searched by search engines and automated robots. You can give <META> tags to give details about the last-modified date, keywords, and other essential information too.

  <TITLE> Tag

The most commonly used HEAD feature in HTML, and the only required element is the <TITLE> tag. The <TITLE> is a one-line name for the document that is displayed in the browser's title bar. Without a title, most browsers default to the HTML filename. Keep the title brief and meaningful: long enough to be useful but short enough to fit.

Syntax:

<TITLE>...the title text...</TITLE>

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http: //www.w3.org/TR/REC - html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>
Layout Galaxy Home page
</TITLE>
</HEAD>
Welcome to Layout Galaxy Home page.
This is page starts with the first lesson of your HTML Training Program and the other lessons of the training program which offers you an exhaustive and easy go.

</HTML>

  A <BASE> for Hyperlinks

The <BASE> tag controls the actions of relative hyperlinks in the body of the document. By default, relative links in a document refer to the same server and directory location in which the page is located. Though, with <BASE> tag, you can specify that the relative links are resolved in relation to a different location.
The <BASE> tag takes a single attribute: HREF.

Syntax:

<BASE href="protocol://servername/path/"[target=targetFrame]>

The URL in the href attribute specifies an absolute URL for use in resolving hyperlinks, and the targetFrame identifies the frame that will receive the contents of the hyperlink.

  Showing Relationships with <LINK>

<LINK> provides a media- and platform-independent method for defining relationships between the current HTML page and other documents and resources.

There are five other attributes used with LINK:

href The URL of the linked document.
Rel This attribute and its value indicate the relationship of the current document to the document referenced in href. Possible values include contents, Index, Glossary, Copyright, Next, Previous, Bookmark and Help. This example shows the contents page as "contents.html":

Example:

<LINK rel=Contents href= "contents.html">

This attribute is also used to specify linked style sheets. Another possible value is Alternate,which indicates an alternate version of the document. It is commonly paired with the language attribute.

Rev This attribute is similar to rel, but it indicates a reverse relationship between the document and the URL.(e.g.)

Example:

<LINK rev=Contents href=" tutorials.html">

type This attribute describes the type of link to create . The possible values are: Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, and Bookmark.
Media This specifies the kind of medium the information will be dispalyed on. It can include a single media type, or a list separated by commas. The possiblities are:
screen: The default output, intended for a computer monitor.

  Using <META>to give more information

The <META> tag is used to pass additional information about how the document should be handled and for search engines to classify and identify the document without downloading the entire document.

Syntax:

<META [http-equiv] [name] [content] [scheme] >

The http-equiv and name attributes serve the same basic purpose with one important difference: any <META> tag using http-equiv is added to the response header supplied to the browser.
<META NAME="description" CONTENT="Interactive Learning Site">
<META NAME="keywords" CONTENT="multimedia">

<META HTTP-EQUIV="refresh" CONTENT="40">
<META HTTP-EQUIV="reply" CONTENT="www.layoutgalaxy.com">

"Description" describes the content of your Website as specified in CONTENT
"Keywords" specifies a list of words separated by spaces, which is used by some search engines for quick retrieval.
"Refresh" implements a process called client pull, in which the browser is directed to reload the document after the number of seconds specified in content.
"Reply-to" provides an email address that the user can reply to.

Back Next


Copyrights : Layout Galaxy All Rights Reserved
No part of this tutorial may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, electrostatic, magnetic tape, mechanical or otherwise, without prior permission in writing from Layout Galaxy.




17, Vadsarvala Nivas, 65-A, J. Nehru Road, Mulund (W), Mumbai - 400 080 INDIA
Tel : 91-22-25795588, 91-22-25780444 Fax : 91-22-25793397
Email : ionline@vsnl.com
© Image Online 2001-2003