HTML TUTORIAL PART 4 : EXPLANATION OF BASIC TAGS

Welcome to iNFiNiTUDE PROGRAMMING SCHOOL!!

HTML TUTORIAL PART 4 : EXPLANATION OF BASIC TAGS

<!DOCTYPE> Defines the document type

The !DOCTYPE declaration is a top-level tag-like reference known as a Public Text Identifier. It should appear at the very beginning of an HTML/XHTML document in order to identify the content of the document as conforming (theoretically) to a particular HTML DTD specification. Historically, including a DTD was not required by browsers - they just interpreted a document according to what elements and attributes it understood, but that has now changed.

The quoted segment within a !DOCTYPE declaration is called a Formal Public Identifier (FPI.) Every distinct DTD variation will have its own unique FPI string.

Annotated syntax:

Code:: <!DOCTYPE [Top Element] [Availability] "[Registration]//[Organization]//[Type] [Label]//[Language]" "[URL]">

EXPLANATION:

General : A pair of forward slash characters ("//") is used as delimiters between keyword fields in the FPI declaration.

[Top Element] - Indicates the top level element type declared in the DTD; for HTML it is <html>.

[Availability] - field indicates whether the identifier is a publicly accessible object (PUBLIC) or a system resource (SYSTEM) such as a local file or URL. HTML/XHTML DTDs are specified by PUBLIC identifiers.

[Registration] - Indicated by either a plus ("+") or minus ("-"). A plus symbol indicates that the organization name that follows is ISO-registered. A minus sign indicates the organization name is not registered. The IETF and W3C are not registered ISO organizations and thus use a "-".

[Organization] - This is the "OwnerID" - a unique label indicating the name of the entity or organization responsible for the creation and/or maintenance of the artifact (DTD, etc.) being referenced by the DOCTYPE. The IETF and W3C are the two originating organizations of the official HTML/XHTML DTDs.

[Type] - This is the "Public Text Class" - the type of object being referenced. There are many different keywords possible here, but in the case of an HTML/XHTML DTD, it is "DTD" - a Document Type Definition.

[Label] - This is the "Public Text Description" - a unique descriptive name for the public text (DTD) being referenced. If the public text changes for any reason, a new Public Text Description string should be created for it.

[Language] - This is the "Public Text Language"; the natural language encoding system used in the creation of the referenced object. It is written as an ISO 639 language code (uppercase, two letters.) HTML/XHTML DTDs are usually (always?) written in English ("EN".)

[URL] - This is the optional explicit URL to the DTD being referenced.

The following DOCTYPEs are commonly used:

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The above tag declares the document to be HTML 4.01 Strict. HTML 4.01 Strict is a trimmed down version of HTML 4.01 that emphasizes structure over presentation.

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This declares the document to be HTML 4.01 Transitional. HTML 4 Transitional includes all elements and attributes of HTML 4 Strict but adds presentational attributes, deprecated elements, and link targets.

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

This declares the document to be HTML 4.01 Frameset. HTML 4 Frameset is a variant of HTML 4 Transitional for documents that use frames.

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

This declares the document to be HTML 3.2. HTML 3.2 is well supported by most browsers in use. However, HTML 3.2 has limited support for style sheets and no support for HTML 4 features such as frames and internationalization.

Code:: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

This declares the document to be HTML 2.0. HTML 2.0 is widely supported by browsers but lacks support for tables, frames, and internationalization, as well as many commonly used presentational elements and attributes.

Alright so Please follow these Thread for explanation of all the Basic tags..... Smile

-Arvind

Last edited by Arvind on Thu Jul 09, 2009 10:22 am; edited 1 time in total

<html> Defines an html document
<body> Defines the body element

I guess we have discussed a lot about these two tags in the BASIC TUTORIAL, So we are jumping directly into <h1> to <h6> tags

<h1> to <h6>

The <h1> to <h6> tags define headers. <h1> defines the largest header. <h6> defines the smallest header. Do you know what these tags are used for? Many of the pages I view are using these tags to style your content. That is NOT the purpose of the heading tag. The heading tag provides structure for your document, much like an outline displays the structure of a term paper or technical document. The h1 tag defines you page title, what your page is actually about. There should be only ONE h1 tag on each page. The default size of the <h1> tag is BIG.

BROWSER SUPPORT:

HTML TUTORIAL PART 4 : EXPLANATION OF BASIC TAGS Compatible_ie

HTML TUTORIAL PART 4 : EXPLANATION OF BASIC TAGS Compatible_firefox

HTML TUTORIAL PART 4 : EXPLANATION OF BASIC TAGS Compatible_opera

HTML TUTORIAL PART 4 : EXPLANATION OF BASIC TAGS Compatible_chrome

HTML TUTORIAL PART 4 : EXPLANATION OF BASIC TAGS Compatible_safari

Yeah, The <h1> to <h6> tags are supported in all major browsers.

<h1></h1> ... <h6></h6> ATTRIBUTES:

-> align (optional)
-> class (optional)
-> dir (optional)
-> id (optional)
-> lang (optional)
-> onclick (optional)
-> ondblclick (optional)
-> onkeydown (optional)
-> onkeypress (optional)
-> onkeyup (optional)
-> onmousedown (optional)
-> onmouseout (optional)
-> onmouseover (optional)
-> onmouseup (optional)
-> style (optional)
-> title (optional)

<h1></h1> ... <h6></h6> END TAG:

All your heading tags should have an ending tag </h1> ... </h6>

USAGE:

This is how we use the heading tag,

Code:: <h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>

So the output will be like the following:

Level 1 heading
Level 2 heading
Level 3 heading
Level 4 heading
Level 5 heading
Level 6 heading

-Arvind

Last edited by Arvind on Thu Jul 09, 2009 10:22 am; edited 1 time in total

<p> tag

The HTML p tag defines a paragraph. To end the paragraph tag we have to use </p>

ATTRIBUTES:

id (name):
The "id" attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element.

USAGE EXAMPLE:

Code:: <p id="paragraph1">This is the first paragraph named as paragraph1. To dynamically change its properties use this identifier.</p>

class (cdata):
The "class" attribute assigns a class name (or a list of class names separated by spaces) to the container element. It's used with style sheets and tells the browser the class to which the element is associated with. A class gives visual attributes to elements.

USAGE EXAMPLE:

Code:: <p class="references">This article is based on the book "Wind in the trees" by Jhon L. Brooks</p>

<p class="references important">This article is based on the book "Wind in the trees" by Jhon L. Brooks... and is more important than the one before.</p>Code end

style (style):
Defines a visual style of this element. Is a better practice to define styles attributes in external style sheets grouping them in classes. Attributes in the "style" parameter must preserve this order "name : value" and be separated by a semi-colon.

If you're writing XHTML code it's recommended not to use this attribute and try style sheet classes (with the "class" attribute).

USAGE EXAMPLE:

Code:: <p style="color: #0000FF; font-size: 12pt">This is a paragraph with a defined style</p>
<p>And this is another text without style.</p>

lang (langcode):
Specifies the language of an element's content. The default value in "unknown".

When writing XHTML code the syntax "xml:lang" represents a preferred alternative in XHTML 1.0 and a replacement in XHTML 1.1 (e.g., xml:lang="en").

USAGE EXAMPLE:

Code:: <p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un párrafo en español.</p>

align:

Specifies the horizontal alignment of its element. Possible values are (case-insensitive):

-> left: Text is aligned to the left margin.
-> center: Text is centered.
-> right: Text is aligned to the right margin.
-> justify: Text is justified to both margins.

USAGE EXAMPLE:

Code:: <p align=left>This paragraph is aligned left</p>
<p align=right>This paragraph is aligned right</p>
<p align=justify>This paragraph is justified</p>
<p align=center>This paragraph is aligned center</p>

NOTE: By default the alignment is set to left

-Arvind

Last edited by Arvind on Thu Jul 09, 2009 10:21 am; edited 1 time in total

<br> tag

A br tag will insert a line break which means the text/image following the tag will be moved to the next line when displayed in the browser.

USAGE EXAMPLE:

Code:: <p>When you insert a br tag into your HTML coding it creates a line break.<br>
The text in this sentence is after a br tag.<br>
Here's a new sentence with the br tag inserted before it.</p>

So the output for the above code is as follows:

Code:: When you insert a br tag into your HTML coding it creates a line break.
The text in this sentence is after a br tag.
Here's a new sentence with the br tag inserted before it.

NOTE: br tag does not have a closing tag!!

-Arvind

<hr> tag

The horizontal rule, or hr tag is a good way to divide the content of your webpage.

USAGE EXAMPLE:

Code:: <p>Below is a example of horizontal beak</p>
<hr>
<p> Above is the horizontal break</p>

In the example above we see that using the hr tag produces a line across the screen, the hr tag is a block level element which means it starts on a new line, so there's no need to include a <br> tag beforehand

ATTRIBUTES:

SIZE:
USAGE EXAMPLE:

Code:: <hr size="2" width="50%">
<hr size="20" width="50">
<hr size="20" width="50%">
<hr size="20" width="50%" noshade>

ALIGN:
USAGE EXAMPLE:

Code:: <hr align="left" size="3" width="50%" noshade>
<hr align="center" size="3" width="50%" noshade>
<hr align="right" size="3" width="50%" noshade>

USAGE EXAMPLE:

Code:: <hr color="#0099FF">

So you can use this examples and see the output your self to get a bette understanding about the hr tag

NOTE: hr tag does not have a ending tag

-Arvind

tag

The HTML comment tag is used to insert comments inside the code. All the text inserted inside this tag () will be ignored by the browser (with the exception of scripts and style codes in those browsers that support them) and invisible for the user. It's most common use is to "hide" scripts and style codes from older browsers (without support for it), so they don't show them as plain text.

USAGE EXAMPLE:

Code:: <p>Comment's begin</p>

<p>Comment's end</p>

So the output for the above code will be as follows:

Code:: Comment's begin

Comment's end

ATTRIBUTES:

This tag does not have any attribute.

I guess there is no need of further explanation on this tag, as it is self explanatory.

Basic tag explanation is completed...... Wink

-Arvind

» HTML TUTORIAL PART 6: EXPLANATION OF OUTPUT TAGS
» HTML TUTORIAL PART 5 :EXPLANATION OF CHARACTER FORMAT TAGS
» HTML TUTORIAL PART 3 : OVERVIEW OF ALL HTML TAGS
» HTML TUTORIAL PART 9: EXPLANATION OF TABLES AND STYLES TAG
» HTML TUTORIAL PART 7: EXPLANATION OF BLOCKS, LINKS, FRAMES TAG