Implementing Recommended HTML code in Webpage by humera568

VIEWS: 29 PAGES: 18

									      Implementing Recommended HTML Code
The html commands hot use them and how to correct html errors on the web page.

Below is a listing of some of the HTML commands recommended to be reviewed first, if not
already known.

A HREF - Creating a link to other pages.

BODY - Setting the looks of the web page.

BR - Creating a line break.

IMG SRC - Creating an image.

META - Creating meta tags.

TITLE - Creating a title for a web page.

All additional HTML command can be found on our HTML commands section.

HTML overview

HTML, or HyperText Markup Language, is a world wide markup language that allows a user to
create his or her own web page. While HTML is a fairly easy to learn markup language, it does
involve several hundred commands to learn and memorize.

With HTML, the user creates tags; tags are anything between the less-than and the greater-than
signs. Using the tags, this identifies where the commands begin and end. For example, <b>Bold
Text</b> tells the browser that <b> is the beginning of the bold text statement that will turn
anything after that tag bold; once the browser hits </b> the browser then turns the bold text
statement off, allowing for only specific text to be bold

On this page we have created a list of HTML commands, which can be used in web pages to
change text, add different features, and apply several other different effects.

HTML commands

<!-- REMARK --> - HTML Tag that allows you to implement comments into your HTML
Code, which would be hidden to the average browser.

Example:

<!-- This text Cannot be seen by the user unless the source is viewed. -->
Preview:

<A> -HTML tag that which allows aspects of your web page to be anchored, such as a link <A
HREF= "Http://www.computerhope.com">

Example:

<A HREF="http://www.computerhope.com">Computer Hope</A>

Preview:

<ABBREV> - New HTML tag available with HTML3.0 which allows you to abbreviate words
on your web page automatically.

Example:

<ABBREV>Contained words will be abbreviated.</ABBREV>

<ACRONYM> - Like ABBREV, also a new command with HTML 3.0 that displays the text
acronym when mouse is highlighted over text.

Example:

<ACRONYM TITLE="Free computer help and support">Computer Hope</ACRONYM>

Preview:

Computer Hope

<ADDRESS> - Command that changes the format of the text to signify an address. This is
generally used with e-mail addresses. However, can also be used for a street address.

Example:

<ADDRESS>support@computerhope.com</ADDRESS>

Preview:

support@computerhope.com

<APPLET> - Command used with Netscape to implement a Java application into a web page.

Example:

<APPLET CODE="myapplet">Click here to see Java applet.</APPLET>
Preview:

View COOL FEATURES to see Java applets.

Additional information:

To insert JavaScript into your web page you would use the <SCRIPT> tag.

<AREA> - Defines a section of an image that the user can click on. This allows you to have one
image with multiple clickable links within it.

Example:

<AREA CORD="10,20,150,125" SHAPE=rect HREF="http://www.computerhope.com">. The
CORD that is used in this example tells the computer where on the image the location for the
link is when your mouse is over that CORD; then, if clicked, it will go to the web page. The
SHAPE tells the browser it is able to click and what type of shape the portion area is.

Example:

<map name="menu">
<AREA SHAPE=rect COORDS="100,5,155,55" HREF="http://www.computerhope.com">
</map>
<img src="title.gif" usemap="#menu"><BR>

Additional information:

The 100,5,155,55 are telling the browser where the link is. 100 representing how far from the left
you want the link to start. 5 representing how far from the top you want the link to start. 155
representing how far from the right you want the link to end. 55 representing how far from the
bottom you want the link to end.

Preview:

On the below image, move your mouse over the O and notice how that is the only link on the
image; clicking on that O would take you to our main page.




<B> - Tells the browser to display the text within the HTML tags to be bold.

Example:
<B>This text would be in bold</B>

Preview:

This text would be in bold

<BANNER> - HTML Tag used with HTML 3.0 used like scrolling but does not scroll with the
rest of the HTML document.

Example:

<BANNER>Welcome to Computer Hope</BANNER>

<BASEFONT> - Tells the browser the new set for the font size can be 1 through 7. The default
value is 3.

Example:

<BASEFONT SIZE=2>

<BDO> - Tells the browser how to display the text; for example, using the DIR attribute you can
make it go left to right using DIR=ltr Example: <BDO DIR=rtl>Makes text go opposite
way<bdo> this just causes the text to go right to left; this tag is usually used for international
purpose.

Example:

<BDO DIR=ltr>This text would be going from the left to the right.</BDO>

Preview:

This text would be going from the left to the right.

<BGSOUND> - Allows you to play your music on your web page with Internet Explorer; will
not work with people browsing with Netscape. You may also add the loop= statement to specify
how many times you wish the sound to play.

Example:

<BGSOUND SRC=sounds.wav loop=1>

Example:

<BGSOUND SRC=sounds.wav loop=infinite>

<BIG> - HTML 3.0 tag that allows your text to be BIG.
Example:

<BIG>This text would be big.</BIG>

Preview:

This text would be big.

Example:

<BIG><BIG>This text would be bigger.</BIG></BIG>

Preview:

This text would be bigger.
<BLINK> - HTML tag that can be extraordinarily annoying when viewing a web page. Internet
Explorer does not incorporate this tag, but still is available with Netscape Navigator.

Example:

<BLINK>This text would be blinking if compatible browser</BLINK>

Preview:

This text would be blinking if compatible browser.

<BLOCKQUOTE> - Command that allows you to indent your lines one inch from the left hand
side. Instead of using this command to indent text or other objects we suggest using CSS. See
document CH001034 for additional information and help.

Example:

<BLOCKQUOTE>This would be one tab from the left hand side of the page or the table cell it is
in.</BLOCKQUOTE>

Preview:

This would be one tab from the left hand side of the page or the table cell it is in.

<BODY> - Command that should be located towards the top of your HTML code. This tag is
used to specify the color of the text, the links, the background color and the background image.

Example:
<body background="back.gif" bgcolor="#FFFFFF" text="#000000" link="#000000"
vlink="#000000" alink="#000000" topmargin="0" leftmargin="0">

background="back.gif" - This is telling the browser that you wish to have an image in the
background. The page you are currently viewing is one image tiled down to create the
appearance of a side column. If you wish to create the same effect with your web page, you must
remember to create this image at least 1040 pixels in length; this will allow your web page to be
displayed properly with all resolutions up to 1024 x 768. A common mistake we have noticed is
other web masters creating images at 640/650 pixels in length, which makes the image tiled
when viewing web pages over 640 x 480. For additional information on video resolutions, see
our Video Card Page.
bgcolor="#FFFFFF" - This specifies we wish to have a white background; while this is not
necessary when having an image as a background, it generally creates a better transition for our
page, considering it contains mostly white. #FFFFFF is the hexadecimal for the color white. In
this tag you can also specify white instead of the hexadecimal value.
text="#000000" - This tells the browser to display all text black unless otherwise specified.
#000000 is the hexadecimal for the color black. This tag will also allow you to specify the color
by spelling it out.
link="#000000" - Specifies that links on the page that have not been visited should be black. If
this tag is not specified the default color will be used, which usually is a blue. #000000 is the
hexadecimal for the color black. This tag will also allow you to specify the color by spelling it
out.
vlink="#000000" - Specifies the color of the links that have been visited. If this tag is not
specified the default color is generally purple. #000000 is the hexadecimal for the color black.
This tag will also allow you to specify the color by spelling it out.
alink="#000000" - Specifies the color when the link is active; this is generally specified for
newer browsers, old browsers under 3.x do not have any effect on this code. The active link only
changes when clicked (this is not used to change the color when the mouse is moved over the
link). #000000 is the hexadecimal for the color black. This tag will also allow you to specify the
color by spelling it out.
topmargin="0" - Tells the browser not to have a margin on the top of the browser window (this
is generally a small white space on the top of the page. We have noticed that Netscape and older
versions of Internet Explorer do not completely eliminate the margin even if the value is zero.
leftmargin="0" - Tells the browser not to have a margin on the left side of the browser window
(this is generally a small white space on the top of the page. We have noticed that Netscape and
older versions of Internet Explorer do not completely eliminate the margin even if the value is
zero.

Preview:

The above example is the body tag we are currently using on this page.

<BR> - Tells the browser that this is the end of the line and to start a new one.

Example:
<BR>

Preview:

The <BR> HTML tag returns once (down one line), another applicable HTML tag is <P
ALIGN="LEFT"> Paragraph here.</P> When this tag is used this will begin a new paragraph.

<CENTER> - Tells the web browser to center the text according to the page, table, or frame.

Example:

<CENTER>This text would center on the page.</CENTER>

Preview:

                                This text would center on the page.

<CITE> - Similar to the blockquote command this command enables you to cite text and
displays itself in an italic font.

Example:

<CITE>This text is in italic and is a cite from somewhere else.</CITE>

Preview:

This text is in italic and is a cite from somewhere else.

<CODE> - Allows the user to specify code or a command that generates a different type of font
to signify the code.

Example:

<CODE>dir - command used in DOS to list files.</CODE>

Preview:

dir - command used in DOS to list files.

<DEL> - Allows a user to delete text within an HTML document without actually removing it
using a strike through.

Example:

This is an example of <del>removed</del> text.
Preview:

This is an example of text.

<DD> - Specifies to the browser that a definition is going to placed in the code. The browser will
then indent the paragraph (x 2) and change the font of the characters.

Example:

<DD>Definition goes here.</DD>

Preview:

           Definition goes here.

<EM> - Tells the browser that this is important text and it will make it emphasized.

Example:

<EM>Computer Hope</EM>

Preview:

Computer Hope

<EMBED> - Used with Netscape Navigator, which implements a third-party file such as a
movie or sound clip or some special embedded object on the web page. Example: <embed
src="mydoc.dcr">

Example:

<EMBED SRC="resume.doc">

<FONT> - Allows you to have multiple fonts, colors and sizes.

Example 1:

<FONT size=+2>This text would be two times bigger.</FONT>

Example 2:

<FONT COLOR="BLUE">This text would be blue.</FONT>

Example 3:

<FONT COLOR="RED">This text would be red.</FONT>
Example 4:

<FONT COLOR="YELLOW">This text would be yellow.</FONT>

Preview 1:

This text would be two times bigger.

Preview 2:

This text would be blue.

Preview 3:

This text would be red.

Preview 4:

This text would be yellow.

For more usable colors and information, see our HTML COLOR page

<FORM> - Allows you to obtain input from visitors; you can see an example of this by viewing
the source in our e-mail page.

<FRAME> - Netscape HTML extension that allows you to use frames on the web page, being
able to make bigger and smaller sections; each frame can contain different text. You can also use
the <FRAMESET command, which is a replacement for the regular body command.>

Example:

<FRAM SRC="http://www.Computerhope.com" SCROLLING="yes" NORESIZE>

<H1> - <H6> - Tells the browser how big you want the text <H1> being the biggest and <H6>
being the smallest. Note: Because Computer Hope is using CSS elements for the H1 tag not only
will this text be big but it will have an underline in this example. Without the CSS it would just
be big.

Example:

<H1>This text would be BIG.</H1>

Example:

<H6>This text needs spectacles to read.</H6>
Preview:


This text would be BIG.
Preview:
This text needs spectacles to read.


<HEAD> Allowing you to tell about the web page but this info will never be displayed when
viewing unless the source is viewed, as well as the location to place your meta tags.

Example:

<HEAD><TITLE>Look at the top of the page how it says HTML HELP, specify the name you
want the page to be.</TITLE></HEAD>

<HR> - Puts a normal bar across the screen to help separate the text.

Example 1:

<HR>

Example 2:

<HR width="50%">

Example 3:

<HR size=10 width="50%">

Preview 1:



Preview 2:



Preview 3:



<I> - Italicizes the text.

Example:
<I>Italic Text</I>

Preview:

Italic Text

<IMG> - Command used to display images on your web page.

Example:

<IMG SRC= "http://www.computerhope.com/logo.gif">

Preview:




<INS> - Short for Insert, this tag is used to help illustrate what new text has been inserted into an
HTML document. Useful for when multiple people are working on the same document.

Example:

This line of text has <INS>new</INS> inserted text.

Preview:

This line of text has new inserted text.

<ISIndex> - New command coming out with HTML 3.0 allowing you to search.

Example:

<ISIndex>

<LI> - Tells the browser that this is a list item, either putting a bullet in front of text or a number
in front of the text, depending if <ul> or <ol> is used.

Example:

<ul>
<li>one</li>
<li>two</li>
</ul>
Example 2:

<ol>
<li>one</li>
<li>two</li>
</ol>

Preview:

      one
      two

Preview 2:

   1. one
   2. two

<MARQUEE> - Used with Microsoft Internet Explorer and other recent browsers to make your
text scroll on the screen. This HTML tag does not work with any current versions of Netscape
Navigator.

Example 1:

<MARQUEE BEHAVIOR="scroll" DIRECTION ="left">Computer Hope</MARQUEE>

Example 2:

<MARQUEE BEHAVIOR="scroll" DIRECTION ="right">Computer Hope</MARQUEE>

Example 3:

<MARQUEE BEHAVIOR="slide" DIRECTION ="left">Computer Hope</MARQUEE>

Example 4:

<MARQUEE BEHAVIOR="alternate" >Computer Hope</MARQUEE>

Example 5:

<MARQUEE BEHAVIOR="scroll" DIRECTION ="left" bgcolor="blue">Computer
Hope</MARQUEE>

Example 6:

<font color ="green"><MARQUEE BEHAVIOR="scroll" DIRECTION ="right" >Computer
Hope</MARQUEE></font>
Example 7:

<font color ="white"><MARQUEE BEHAVIOR="scroll" DIRECTION ="right"
bgcolor="red">Computer Hope</MARQUEE></font>

Preview 1:



<META> - Allowing you to tell some search engines what to display for your page and
keywords for your page.

Example 1:

<META NAME="DESCRIPTION" CONTENT="Computer Hope getting your computer
questions answered fast, easy and free">

Example 2:

<META NAME="KEYWORDS" CONTENT="Computer, support, easy, free, html, printers,
windows95">

Example 3:

<META NAME="GENERATOR" CONTENT="Generated in Notepad">

Preview:

Preview not available due to the fact it needs to be in the body of this page.

See our meta tags definition for additional information and our promote page for information on
getting your web page more visible.

<NOBR> - Tells the browser that you want to continue the line with no breaking, preventing the
line from getting cut of and returning to the next line.

Example:

<NOBR>This line would go on and not auto return so if the browser screen was not as long as
the sentence you would have to scroll to see the remainder of the screen.</NOBR>

Preview:

This line would not wrap until you entered a break

<OL> - Tells the browser that this is a list item and to list it in numbering format.
Example:

<ol>
<li>one</li>
<li>two</li>
</ol>

Preview:

   1. one
   2. two

<OPTGROUP> - Add an option groups to a drop down list of items.

Example:

<select name="Example">
<optgroup label="First"></optgroup>
<option>Example one</option>
<optgroup label="Second"></optgroup>
<option>Example two</option>
</select>

Preview:



<P> - Tells the browser that this is the end of the paragraph and will not attempt to word wrap it.

Example:

<P>Location for the paragraph to begin and end.</P>

Preview:

Location for the paragraph to begin and end.

<PRE> - Tells the browser to do what you do as you type it so you can put text where you want
it and have as many spaces as you want.

Example:

<PRE>The Text Can l o o k how you want it to            l oo k.</pre>

Preview:
The Text Can l o o k how you want it to l oo k.

<SAMP> - Will enclose the text as a sample, usually lower casing it and underlining it.

Example:

<SAMP>This would be small and plain.<SAMP>

Preview:

This would be small and plain.

<SELECT> - Select menu that allows their person viewing your web page to select from a menu.

Example:

<select name="List" size="1">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>

Preview:



<STRONG> - Putting the text bold.

Example:

<STRONG>This text would get your attention</STRONG>

Preview:

This text would get your attention

<SUB> - Subscript; makes the browser display text low.

Example:

<SUB>This text would be below midway.<SUB>

Preview:

This text would be below midway
<SUP> - Superscript; makes the browser display text high.

Example:

<SUP>This text would be above midway.<SUP>

Preview:
This text would be above midway



<TABLE> - Allows you to Align text in tables. You can see an example of this on our Support
page. How you do this is start with <Table> and if you want borders, just use the below
commands.

Example:

<TABLE ALIGN="center" border=1 cols=5 width=20 cellpadding=5><tr><td>Computer
Hope</td></tr></TABLE>

Preview:

Computer
 Hope

See table page for additional information and examples on tables.

<TD> - Used to define each cell part of the table. See table page for additional information and
examples on tables.

Example:

<TD ALIGN="center" WIDTH=20>Cell</TD>

<TEXT AREA> - Allows the user to input text.

Example:

<TEXTAREA NAME="text" COLS=20 ROWS=20></TEXTAREA>

Preview:
<TH> - This is what each cell on the table is using.You can make this contain as many cells as
you need.

Example:

<TH VALIGN="middle" WIDTH=50>Table header</TH>

Preview:

Preview not available for the fact changes page layout.

<TITLE> - This is used to label the page that your on. For example, the name of this page is
ONLINE HELP -HTML-, Usually shown at the top of your screen.

Example:

<TITLE>HTML HELP</TITLE>

Preview:

Look on the top title bar, this is what the above would do.

<TR> - The start of each row in a table. See table page for additional information and examples
on tables.

Example:

<TR><TD>Table contents</TD></TR>
<TT> - Tells the browser that the font needs to be evenly spaced to occupy the full line.

Example:

<TT>This would be displayed as teletype</TT>

Preview:

This would be displayed as teletype

<UL> - Starts a bulleted item list (puts a bullet in front of text).

Example:

<ul>
<li>one</li>
<li>two</li>
</ul>

Preview:

       one
       two

<XMP> - Tells the browser to do no formatting to this text, just to display as-is, no matter what
the size of the screen is. Just like the <PRE> command.

Example:

<XMP>Put text in its own area.</XMP>

Preview:

Put     text in it   s   own    area

								
To top