HTML Tips for Newbies

As much as you may want to avoid learning html there is some html code you will need to understand if you want your site looking perfect.

Many of the HTML commands outlined here are not the only commands used to perform these actions. This is just a basic tutorial, if you are interested in learning more or different methods, I recommend HTML Tutorial

The first thing to understand is that anything computerized will continue doing what it is told until it is told to stop.

Many commands have a stop or end command.

i.e. <b>Is the command for Bold Type the type continues to be bold until the </b>end command is used. You get the same result using<strong> strong </strong>

Text HTML

Headline	<h1>headline 1</h1>, <h2>Headline 2</h2>
Paragraph	<p> New Paragraph</p>
Line Break	<br>there is no end tag, as the action is to start a new line
Center	<center>These tags will center anything on the page center</center>
Underline	<u>Underline</u>
Italic	<i>Italic<i>or <em>Italic</em>
Color	<font color="#0000ff">Color</font>
Size	<font size="14">Size</font>
Align Right	<font align="right"> Align Right </font>
Size & Color	<font size="10" color="#0000ff">Size and Color</font>

Colors are defined by hexadecimal codes. I suggest you download & install "colorpic" Its a fantastic free tool you can choose a color or pick one straight off the screen. For true color Hex codes you can use a colour chart

Links

URL Link Displays as	<a href="http://www.ecommercenewbies.com">Newbies</a> Newbies
Display Picture Displays As	<img style="WIDTH: 100px; HEIGHT: 57px" alt="" src="http://www.e-commercenewbies.com/images/logo.gif">
Alternative Direct Link	<img style="WIDTH: 100px; HEIGHT: 57px" alt="" src="/images/logo.gif"> Path to picture from page file
Link Picture	<a href="http://www.e-commercenewbies.com"><img style="WIDTH: 100px; HEIGHT: 57px" alt="" src="/images/logo.gif"></a>

Picture Display HTML

You can see from the logo displayed above that some linked images will display with a border. To remove the border from the image change the code to

Remove border from linked image	<a href="http://www.e-commercenewbies.com"><img style="WIDTH: 100px; HEIGHT: 57px" alt="" src="/images/logo.gif" border="0"></a>
Resize Image	<a href="http://www.e-commercenewbies.com"><img style="WIDTH: 150px; HEIGHT: 150px" alt="" src="/images/logo.gif"></a>
Wrap Text Around Image Add align="left" align="right" or align="center"	<a href="http://www.e-commercenewbies.com"><img style="WIDTH: 50px; HEIGHT: 50px" alt="" src="/images/logo.gif" border="0" align="left"></a> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Wraped Text Clearance Add hspace="10" vspace="5"	<a href="http://www.e-commercenewbies.com"><img style="WIDTH: 50px; HEIGHT: 50px" alt="" src="/images/logo.gif" border="0" align="left" hspace="10" vspace="5"></a> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text

Alt Text

This may be lhe last part about images but for SEO purposes it is the most important.
All SEO tutorials will advise you to use your keywords in your image alt text.
Alt text is the text that appears when you mouse over an image or if the image does not display the alt text will display in its place.
Adding an alt tag is similar to the other commands we have been adding.

Adding an
Alt tag

Adding a Html Button

Adding a

Simple Button

<BUTTON> <STRONG>Button Text</STRONG></BUTTON>

<BUTTON >
<IMG SRC="/images/logo.gif" HEIGHT=50
WIDTH=100 ALT="Logo">
<STRONG>Button Text</STRONG></BUTTON>

Once you are comfortable with the basics of html coding you may want to include Tables , Scripts or Colours

If you have HTML Tips or Hints please take the time to post them here.

Warning: include(../Comments/Local.php) [function.include]: failed to open stream: No such file or directory in /home/solc00/public_html/e-commercenewbies.com/mobile/html-tips/index.php on line 422

Warning: include() [function.include]: Failed opening '../Comments/Local.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/solc00/public_html/e-commercenewbies.com/mobile/html-tips/index.php on line 422

Bookmark this page
Google Bookmarks Delicious Yahoo My Web Digg Facebook