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
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,
·
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.....................
No comments:
Post a Comment