|
|
|
 |
|
Creating Headings in Web Pages:
Headings:
You can create six different levels of headings to organize an HTML
document. These six levels of headings differ from each other only by their font size.
A heading element automatically
inserts font changes, paragraph breaks before and after the heading, and white space characters necessary to display the heading.
Levels of Headings:
The highest level of headings is <H1>, followed by
<H2> ... <H6>.
<H1>Header level one is used for headlines or page
titles</H1>
<H2>Level two is used
for major subheads</H2>
<H3>Level three is used for minor subheads</H3>
<H4>Level four is
similar to regular text and
emphasized</H4>
<H5>Level five is emphasized and smaller than level
four</H5>
<H6>It is the smallest level of heading</H6>
To create a heading for a page you can use <H1>
level
and to create a subheading for this topic you can use
<H2> level of heading.
To create a heading,
include the heading text between
the heading tags which could be the <H1> and </H1>
tags or any other
desired level of heading's tag.
The HTML standards require that if you use a <H2>
header in a document,
you should have used <H1>
somewhere before in that document. However, you can
use any other header without
using its previous level
of header.
|
|
|
Formatting HTML Documents:
Formatting Tags:
You can use different formatting tags to format an
HTML document
according to your requirements. The
tags are categorized as:
Physical container tags: These tags are used to
specify
how you want the text in your document to be
displayed. The tags used to mark the text as italic,
bold or underlined
are:
<B></B>: The text placed between the <B> and </B>
tags is displayed in bold.
<I></I>:
The text placed between <I> and </I> tags is
displayed in italics.
<U></U>: The text placed
between the <U> and </U>
tags is displayed as underlined.
For example, important text in your document
can be in highlighted, references can be in italics and sub-topics can be underlined.
Logical Tags:
You can use
basic logical HTML tags to assign how the
text should appear in a browser. Different logical
tags are:
<EM></EM>:
The text placed between <EM> and </EM> is
emphasized and displayed in italics.
<STRONG></STRONG>:
The text placed between <STRONG>
and </STRONG> is strongly emphasized and appears in
bold.
<TT></TT>:
The text placed between <TT> and </TT> is
teletyped and appears as monospaced text.
HTML Tags for
Computer Programming:
These tags make it easier to present the programming
code. The tags are:
<CODE></CODE>:
The text placed between these tags
indicates a programming code and appears monospaced.
It is similar to the <TT>
tag.
<KBD></KBD>: The text placed between <KBD> and </KBD>
indicates the keyboard text and
it also appears
monospaced.
<SAMP></SAMP>: The text placed between <SAMP> and
</SAMP>
indicates a sample code or output and appears
monospaced.
<VAR></VAR>: The text placed between <VAR>
and
lt/VAR> indicates that it is a variable name and
appears in italics.
Publisher Style Tags: These tags
work as publishers
codes and are similar to the other HTML tags. The
tags are:
<CITE></CITE>:
The text placed between the <CITE and
</CITE> indicates a bibliographical citation and the
text is displayed
in italics.
Publisher Style and Empty Tags:
<BLOCKQUOTE></BLOCKQUOTE>: The text placed between
<BLOCKQUOTE> and </BLOCKQUOTE> is displayed as a block
of quotations.
Empty Tags: Certain empty tags
are also available.
They are:
The <BR> tag gives a line break when specified. For
example,
Ian
Smith
CEO, SGC Inc.
Empty Tags:
<DFN></DFN>: The text placed between the <DFN>
and
</DFN> indicates a term definition and is displayed as
regular text.
<ADDRESS></ADDRESS>:
The text placed between
<ADDRESS> and </ADDRESS> indicates an e-mail or street
address and is displayed
in italics.
Non Standard Formatting Tags: Certain non standard formatting tags are:
<BLINK></BLINK>
tags display the text placed between the tags blink on the screen. Netscape Navigator supports this feature.
Non-Standard
Formatting Tags:
<MARQUEE>...</MARQUEE> makes the text scroll across
the screen. Only Internet Explorer
supports this.
<STRIKE><STRIKE> tags are used to strike through
data.
For example, we are no more
available on this site
http://www.address.com.
<SUB>...</SUB>: The text placed between these tags
is
displayed as a subscript. For example, H2O, where 2
is a subscript of H.
<SUP>...</SUP>: The text
placed between these tags is
displayed as a superscript. For example, Skillette,
where TM is a superscript of Skillette.
<BIG></BIG>: The text between these tags appear as
big text.
For example, you can use <BIG>big
text</BIG> for
headings. This will be displayed as: You can use big
text for headings.
Similarly you can
use <SMALL></SMALL> tags for a
small display of text.
The comment <!> tag hides the text that
is placed
within this tag.
Preformatted Text:
You can use the <PRE> container tag to keep the exact
spaces and the line breaks that you have placed
between the tags.
For example,
<PRE>THERE IS NO FUTURE
IN BELIEVING SOMETHING CAN
NOT BE DONE,
THE FUTURE IS IN MAKING IT HAPPEN.</PRE>
This will appear as:
THERE IS NO FUTURE IN BELIEVING SOMETHING CAN NOT BE
DONE, THE FUTURE IS IN MAKING IT HAPPEN.
You can also
write the text in paragraphs. The beginning of a paragraph can be specified by using the <P> container tag. It has one
attribute ALIGN which takes care of how the text should be aligned in that paragraph. The values it can take are LEFT, RIGHT
or CENTER. The default value is LEFT.
The format is: <P ALIGN= "position">
For example, <P ALIGN=
"CENTER"> will align the text
to the center of the paragraph.
|
|
|
|
|
|
 |
|
Creating Hyperlinks:
Creating Hypertext:
The basic tags for creating hypertext are the <A> and
</A>
tags. It is also known as the anchor tag. To create a hyperlink, the HREF attribute of the anchor tag is used. A full URL
can be used to identify the target file, or a partial URL (just the filename)is sufficient when the target file is in the
same directory as that of the referring file. The text specified between the <A> and </A> tags become the actual
visible hyperlink which will appear underlined and in a different color in the browser.
The basic format for a text link
is:
< A HREF= URL>Text describing the link</A>
If you want to create a link to a file called testlink.htm
in the same directory, you will use:
<A HREF= testlink.htm >Click here to link to testlink.htm</A>
The
sentence Click here to link to testlink.htm will appear as a link in the browser.
If the file is located somewhere else
on the Internet, you will have to specify the complete URL.
Enabling Local Jumps: You can create links to other parts
of the same document. This is a very useful feature that gives you full control over internal navigation within the document.
You can use two attributes of anchor tag, one that acts as a hypertext link (HREF) and the other acts as a reference point
for that link (NAME).
The NAME attribute is used to create the actual section within the current page. The basic
format is:
<A HREF=#label name>Link to other section of the page</A>
<A NAME=label name>Beginning
of the other section</A>
This creates a link within the same page to that line in the page where the NAME attribute
is used to assign the label name. The anchor tag that creates the hyperlinks is similar to a simple anchor tag except the
# sign.
The # sign refers to a section within the current document.
Here is an example of hypertext.
<A
NAME=xyx></A> will create an anchor at the place where label xyz is defined and <A HREF= #xyz >Go to the link
below </A> will create a link within the same page to the line where the label xyz is assigned.
You can create a
name and a link at the same place by using both the NAME and the HREF attributes. For example,
<A NAME= xxx HREF=xyz.htm>...</A>.
When you create an anchor using the NAME attribute, make sure that you use the same case when you refer it while creating
hyperlink to the anchor.
|
|
|
|
|
|
|
|
|
Using Graphics in HTML Documents:
Using Images:
You can use graphics in a Web page to make it more attractive.
Graphics help you put a point across more effectively. You can use an image as a link in the same manner as text or just as
a display.
You can use Graphic Interchange Format (GIF) and Joint Photographic Expert Group (JPEG) formats on the Web.
Displaying an Image:
Displaying an image is very simple. You can use a <IMG> empty tag with a SRC
attribute which is used to accept the name of the graphic file to be displayed.
The format is:
<IMG SRC=gif_file_url>
For example, to display an image called face.gif, you will use:
<IMG SRC=face.gif >?
Since only the file
name was given, the file must be stored in the same directory. If the image is stored in some other directory, you should
provide the full URL of the file.
For example, <IMG
SRC=http://www.here.com/pictures/face.gif>
Attributes
of <IMG> Empty tag
Certain other attributes available with this tag are:
ALT Attribute: The ALT attribute of
the <IMG> tag is used to accept the description of a graphic. It is used when the browser is unable to display the graphic.
The format is:
<IMG SRC=gif_file_url ALT=description of graphic>
For example, <IMG SRC=face.gif ALT=picture
of a face>
If the browser you are using cannot display the graphic, a message will be displayed that the graphic exists
and a description of the graphic will be displayed.
ALIGN Attribute: You can use the ALIGN attribute to align the
text that comes after a graphic with certain part of graphic itself. It can take the values TOP, BOTTOM, MIDDLE, ABSMIDDLE,
BASELINE or RIGHT. The default value is BOTTOM. The format for aligning text is:
<IMG SRC=gif_file_url ALIGN=position>
For example, <IMG SRC=face.gif ALIGN=TOP> is used to align the text with top of the graphic.
To align the graphic
at the bottom with the bottom of the text, use <IMG SRC=face.gif ALIGN=ABSMIDDLE>
To align the text to begin
in the middle of the graphic, use <IMG
SRC=face.gif ALIGN=MIDDLE>
To align the text to the right of a graphic,
use <IMG SRC=face.gif ALIGN=RIGHT>
To align the text to left of a graphic in the same manner you can use <IMG
SRC=face.gif ALIGN=LEFT>
You can use all the attributes together within one <IMG> tag. For example, <IMG
SRC=face.gif
ALT=picture of a face ALIGN=TOP>
Creating Hot Links:
You can also create a link through
an image which is known as a hot link. You can do this by using the <IMG> tag within the anchor tags<A>..</A>.
The format is:
<A HREF=URL><IMG SRC=gif_file_url ALT=description of graphic BORDER=no.></A>
For
example, <A HREF="link.htm"><IMG SRC="next.gif" ALT="Next" BORDER=0></A>
Since
the <IMG> tag is given between the <A> and the </A>, it becomes a link as anything specified within the
anchor tag automatically becomes a link. The BORDER =0 attribute is used to remove the border that appears by default around
an image.
Using Animated Images:
You can also display animated images in your Web pages. It is similar to
adding a normal graphic to the Web page.
For example, <IMG SRC="devilwmn.gif"> will display an animated
images.
You can only see the animation if you are using the Microsoft Internet Explorer 3.0 or Netscape Navigator 2.0
or higher. An image can also be used as a background for the browser windows like the wallpaper in Windows.
HTML GURU
|
|
