Pages

Monday, 24 June 2013

HTML PART 3

Using Acronym - The <acronym> tag

The <acronym> tag allows us to indicate that the text between an opening <acronym> and closing </acronym> element is an acronym.
Let us see the following example

In the above example we can see that hypertext markup language is written in between the acronym and the short form of the above example is written as HTML.

We can see that when we move our mouse over HTML the full form of the HTML is arising.
Special Terms - The <dfn> tag
The <dfn> tag allows us to specify that we are introducing a special term. Its use is similar to the words that are in italics in the midst of paragraphs in this book when new key concepts are introduced.

In the above example we can see that HTML is written in between the <dfn> tag

We can see that the HTML is slightly appears as it is written in italic.
Quoting Text - The <blockquote> tag
This tag is used to maintain the paragraph in a proper way or in the proper line


Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font.
Short Quotations - The <q> tag
The <q> tag is used when we want to add a quote within a sentence rather than as an indented block on its own.

We can see the following picture where <q> tag has been used. That will produce the following output

Citations - The <cite> tag :
If we are quoting a text, we can indicate the source placing it between an opening <cite> tag and closing </cite> tag.

The content of the <cite> element is rendered in italicized text by default. As we can see in the following figure below.

Computer Code - The <code> tag
Any code to appear on a Web page should be placed inside a <code> element. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.

We can see the following result for the above code.

Keyboard Text - The <kbd> tag
When we are talking about computers, if we want to tell a reader to enter some text, we can use the <kbd> element to indicate what should be typed in.
The content of a <kbd> element is usually represented in a monospaced font rather like the content of the <code> element.

We can the following example of that code.

Programming Variables - The <var> tag
This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that element is a variable that can be supplied by a user.

The following output will going to come.

Program Output - The <samp> tag
The <samp> element indicates sample output from a program, script, or the like. Again, it is mainly used when documenting programming concepts.

The following output will going to display.

Addresses - The <address> tag
The <address> element is used to contain any address.

The following outputs will going to display.


Block and Inline tags
We can categories all the elements into two sections:
1) Block-level elements - Block-level elements appear on the screen as if they have a carriage return or line break before and after them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.
2) Inline elements - Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

The elements which we have not discussed till now, will be discussed in subsequent chapters.
HTML Comments
Comments are piece of code which is ignored by any web browser. It is good practice to comment your code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code.

HTML Comment lines are indicated by the special beginning tag <!-- and ending tag --> placed at the beginning and end of EVERY line to be treated as a comment.

Comments do not nest, and the double-dash sequence "--" may not appear inside a comment except as part of the closing --> tag. You must also make sure that there are no spaces in the start-of-comment string.
For example: Given line is a valid comment in HTML

But following line is not a valid comment and will be displayed by the borwser. This is because there is a space between the left angle bracket and the exclamation mark.

Be careful if you use comments to "comment out" HTML that would otherwise be shown to the user, since some older browsers will still pay attention to angle brackets inside the comment and close the comment prematurely -- so that some of the text that was supposed to be inside the comment mistakenly appears as part of the document.
Multiline Comments
we have seen how to comment a single line in HTML. we can comment multiple lines by the special beginning tag <!-- and ending tag --> placed before the first line and end of the lastline to be treated as a comment.
Conditional Comments 
Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.  
The following command is used for these comments.
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Some more instruction about this comments are as follows.

·         Their basic structure is the same as an HTML comment (<! -- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.
·         Explorer Windows, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
·         Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files.

Comment tag
There are few browsers who support this tag as a part of code.
Here is the example how to use the comment tag in HTML coding
<p>this is <comment>not</comment> Internet Explorer. </p>

Commenting Scripts and Style Sheets
While using java script or VB script in HTML code it is recommended to put that code inside proper HTML comment to make old browser works properly.



Similarly if you are using Casecading Style Sheet in your HTML code then it is recommended to put that style sheet code inside proper HTML Comments to make old browser works properly.
The example of cascading is
<style>
<!--
img{
border:0px;
}
//-->
</style>
NOTE: - Java script and Casecading is the different programming language for more info about this language stay tuned to www.tech-dominus.blogspot.in 
HTML Images
Images are very important to beautify as well as to depict many concepts on your web page. It is true that one single image is worth than thousands of words.
Insert Image - The <img> tag
We can able to insert any image in our web page by using <img> tag.
The following steps is used to insert the image in our web pages

In the above image we can see that the link which is past by following the img has taken from f drive.
The step to copy the link address is as follows.
1.       Go to start option and click it or simply press window+R key.
2.       Click on the browse option.
3.       Then select the folder where you have save your images as we can see in the above image.
4.       Then copy the link which is going to appear on the check box of run option and paste it on the notepad by following the <img src=”image url”  and by entering  height and width of that image>



Image Attributes

·          width: sets width of the image. This will have a value like 10 or 20%etc.
·         Height: sets height of the image. This will have a value like 10 or 20% etc.
·         border: sets a border around the image. This will have a value like 1 or 2 etc.
·         src: specifies URL of the image file.
·         alt: this is an alternate text which will be displayed if image is missing.
·         align: this sets horizontal alignment of the image and takes value either left, right or center.
·         valign: this sets vertical alignment of the image and takes value either top, bottom or center.
·         hspace: horizontal space around the image. This will have a value like 10 or 20%etc.
·         vspace: vertical space around the image. This will have a value like 10 or 20%etc.
·         name: name of the image with in the document.
·         id: id of the image with in the document.
·         style: this will be used if you are using CSS.
·         title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.
·         ismap and usemap: These attributes for the <img> tag tell the browser that the image is a special mouse-selectable visual map of one or more hyperlinks, commonly known as an image map. We will see how to use these attributes in Image Links chapter.

Anchor Attributes

·          href: specifies the URL of the target of a hyperlink. Its value is any valid document URL, absolute or relative, including a fragment identifier or a JavaScript code fragment.
·         target: specify where to display the contents of a selected hyperlink. If set to "_blank" then a new window will be opened to display the loaded page, if set to "_top" or "_parent" then same window will be used to display the loaded document, if set to "_self" then loads the new page in current window. By default its "_self".
·         name & id: attributes places a label within a document. When that label is used in a link to that document, it is the equivalent of telling the browser to goto that label.
·         event: attributes like on Click,
onMouseOver etc. are used to trigger any Javascript ot VBscript code.
·         title: attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotation marks. The browser might use it when displaying the link, perhaps flashing the title when the mouse passes over the link.
·         access key: attribute attribute provides a keyboard shortcut that can be used to activate a link. For example, you could make the T key an access key so that when the user presses either the Alt or Ctrl key on his keyboard (depending on his operating system) along with the T key, the link gets activated.
S
stay tune for next part.....................