HTML Basics

Format of html tags

To change the format of a block of text we need to start with an opening tag and finish with a closing tag. For example, to change a text block into a header format we could start with <h1> and end with </h1>. Notice that the only difference is in the use of the / in the closing tag. For example:

<h1>Heading Text</h1>

For italics use <i>Text with italic formatting</i>

The result is:

Text with italic formatting

For bold text use <b>Text with bold formatting</b>

The result is:

Text with bold formatting

Some tags don't require a closing tag. For instance <br> which is the tag for defining a line break:

This is a line break.<br>

This is not the same as a paragraph break where a closing tag is required:

<p>This is a paragraph.</p>

To avoid changing the formatting of text, for example where you have gaps (whitespace) between words, use the <pre> tags e.g:

<pre>Don't change the spacing of this!</pre>

The result is:

Don't change the spacing       of this!

Links

The format of a link is:

<a href="http://www.3dmodelzone.com/">Open 3d Model Zone in this window</a>

This results in the following hyperlink:

Open 3d Model Zone in this window

This opens the link in the current window. If you want to open the link in a new window then add target="_blank" as follows:

<a href="http://www.3dmodelzone.com/" target="_blank">Open 3d Model Zone in a new window</a>

This looks much the same:

Open 3d Model Zone in a new window

You can use an image to link to another site or page:

For example:

<a href= "http://3dmodelzone.com/icem-surf-tutorial.html"><img border="0" src="http://www.3dmodelzone.com/images/icemsurf-create-surface-fillet-

002.gif" Alt="ICEMSurf tutorial fillet menu"></a>

This results in:

Alt="ICEMSurf tutorial fillet menu">

Images

To include an image:

<img border="0" src="http://www.3dmodelzone.com/images/icemsurf-create-surface-fillet-002.gif" width="500" Alt="ICEMSurf tutorial fillet menu">

This results in:

ICEMSurf tutorial fillet menu

Notice that if you hover over the image you will see the alternative text description pop-up. The Alt text is there in case the browser cannot display the image or if the user is uses a screen reader. Notice also that the image can be from any other site on the internet (within copyright restrictions of course). So you can store all your images in any of the free image storage sites (such as photobucket) and then reference them in your website. This could significantly reduce the amount of storage that you need for your website.

Tables

To create a table:

<table border="1">
  <tr>  <th>Value</th>    <th>Model Units</th>  </tr>
  <tr>  <td>1</td>  <td>inches(default)</td>    </tr>
  <tr>  <td>2</td>  <td>millimeter</td>         </tr>
  <tr>  <td>3</td>  <td>see field 15 below</td> </tr>
  <tr>  <td>4</td>  <td>feet</td>               </tr>
</table>

<table> - defines table
<tr> - denotes rows
<th> - contains column header text in this case Value and Model Units
<td> - is the data within the table

This results in the following table:

Value Model Units
1 inches(default)
2 millimeter
3 see field 15 below
4 feet

Here is a blank version (2 columns, 4 rows) which you can copy and paste:

<table border="1">
  <tr>  <th></th>  <th></th>  </tr>
  <tr>  <td></td>  <td></td>  </tr>
  <tr>  <td></td>  <td></td>  </tr>
  <tr>  <td></td>  <td></td>  </tr>
  <tr>  <td></td>  <td></td>  </tr>
</table>

Summary

<h1>Heading Text</h1> (h1 to h6 formats are available)
<b>Text with bold formatting</b>
<i>Text with italic formatting</i>
This is a line break.<br>
<p>This is a paragraph.</p>
<a href="http://www.3dmodelzone.com/">Open 3d Model Zone in this window</a>
<a href="http://www.3dmodelzone.com/" target="_blank">Open 3d Model Zone in a new window</a>

References

http://www.w3schools.com/html is a great source of information on html as well as other programming languages.