Learn the Basic HTML Codes With HTML Codes Practice Page

Here are the Basic HTML Codes that you will use within the HTML body tags and . You will learn here how to create a HTML table, how to create an ordered and unordered lists, how to insert an image, how to link to other web pages and other web sites and other frequently used basic HTML codes. (Note: Don't forget to remove the asterisk [*] in the HTML codes shown below).

Creating HTML Tables

HTML Tables are very useful in the presentation of data. You may also use this as layout of your web page though W3C.org requires the use of CSS Style Sheet for web site layout purposes.

Here's an example of 1-column, 2-row HTML table with a width of 400 pixels, space between cells of 2 pixels, padding around the table as 4 pixels and lines (border) to display the cells as well as the table:

<*table width="400" border="1" cellspacing="2" cellpadding="4">
<*tr><*td>row 1<*/td><*/tr>
<*tr><*td>row 2<*/td><*/tr>
<*/table>

If you want to add more columns to the HTML table, just add <*td> and <*/td> before <*/tr>. But, each row should have the same number of columns. To add more rows, just add <*tr><*td><*/td><*/tr> after <*/tr>. In a basic table, every row must have the same number of <*td><*/td>.

If you want to combine first or second columns in the first or second row add colspan=2 or x number in <*td> for the number of columns you want to combine but delete other columns covered by colspan, like this:

<*table width="400" border="1" cellspacing="2" cellpadding="4">
<*tr><*td colspan=2>row 1 col 1 & 2<*/td><*/tr>
<*tr><*td>row 2 col 1<*/td><*td>row 2 col 2<*/td><*/tr>
<*/table>

Likewise, if you want to combine the first and second row in the first or second column, add rowspan=2 or x number of rows you would want to combine, like this:

<*table width="400" border="1" cellspacing="2" cellpadding="4">
<*tr><*td rowspan=2>row 1 & 2 col 1<*/td><*td>row 1 col 2<*/td><*/tr>
<*tr><*td>row 2 col 2<*/td><*/tr>
<*/table>

Now, try it in your practice notepad, save it as HTML and browse it. Alternatively, you may use this Basic HTML Codes Practice Page. Just enter the HTML Codes and click View.

Creating HTML ordered list and unordered list

HTML ordered and unordered lists are very useful when you are enumerating or listing some of your data or information, as follows:

HTML Ordered list

<*ol>This is HTML Ordered List
<*li>Item 1<*/li>
<*li>Item 2<*/li>
<*li>Item 3<*/li>
<*/ol>

HTML Unordered list

<*ul>This is HTML Unordered List
<*li>Item 1<*/li>
<*li>Item 2<*/li>
<*li>Item 3<*/li>
<*/ul>

Notice the difference of the ordered and unordered lists. HTML Ordered list is ordered by number or other ranking types like alphabet and Roman numerals. HTML Unordered list is a plain bulleted points without ranking.

Try this in your practice notepad or in the HTML Codes Practice Page. Type it, save it and browse it.

Inserting an image

You may insert an image to your web page by placing these codes where you like the images to appear in your web page, like this:

<*img src="http://your-own-web-site.com/image-directory/image-file.gif" alt="image description" height="7" width="7" border="7" />

Looking at the above HTML codes, "img" is the image HTML tag, "src" is the source or the path of the image file with extension of gif, jpg or png, "alt" is the alternative text description in case the browser of your web site visitor is not configured to display an image, "height" and width are the dimensions of the image in pixels and "border" is width the outline of the image in pixel.

You may try the above in the HTML Codes Practice Page or in your practice notepad by replacing the path of image file with your local directory where your image file is located and changing the dimensions with the pixel size you desire. Again, save it in HTML and browse it. You may use also the HTML Codes Practice Page but use the URL of the image in the web sites that you want.

Creating text and image links to your other web pages and other web sites

Create text links or image links in linking to other pages within your own web site or of the other web sites. These text or image links are called hyperlinks. These hyperlinks will help your visitors in navigating your site from pages to pages. These must be prominent and properly placed in your pages. If not, your visitors will be confused and will eventually leave your site unhappy or unsatisfied. Worst, he may never return.

Text links as hyperlinks

Text link is better than image link as you can describe the content of the web page it is linking. Make sure that your text links are prominent, descriptive and orderly placed in your pages. Create text links in the current web page, like this:

<*a href="http://your-domain-name.com/destination-page.html" title="descriptive keywords">your link description<*/a>

Looking at the above, "a" is the opening HTML tag used for hyperlinks (closing tag is /a), "href" is the path or URL of the destination page (change this with the URL of any page of your own web site or others' site) and "title" is the hidden description of your link (if you hover or place your mouse over the link, this will appear). Use relevant keywords in the title for search engine optimization. "your link description" is the name of the URL (optimize this by using descriptive keywords).

Now, try the above in HTML Codes Practice Page or in your notepad.

Image links as hyperlinks

Just change text description of your text links with relevant image by using the image HTML codes, like this:

<*a href="http://your-domain-name.com/destination-page.html" title="descriptive keywords"><*img src="http://your-own-web-site.com/image-directory/image-file.gif" alt="image description" height="7" width="7" border="7" /><*/a>

Now, try the above in HTML Codes Practice Page or in your notepad.

You should practice the above basic HTML codes and modify it to suit your taste. Practice with the HTML Codes Practice Page or with your notepad. Learn other basic HTML codes and CSS Style Sheet in the next pages to create your own we

More on Start Your Own Web Site

Make Content Rich Web Site To Make Money Online

Know how to make content rich web site that make money online. With content-rich web site, you can surely make money with adsense and other affiliate products.

Create Your Own Web Page With Practice Page

Learn to create your own web page. Practice it with Create Your Own Web Page Practice Page.

Other Basic HTML Codes With Practice Page

Learning other basic HTML codes will enhance your web page. Practice these HTML codes for heading, bold text, underline, hidden text, italic, emphasis, form, etc.

CSS Style Sheet For Styling A Web Page

Using CSS Style Sheet is vital for styling a web page. CSS style sheet will beautify your own web site.

CSS Style Sheet For Web Page Layout

Using CSS Style Sheet as web page layout is easy to learn. Discover how to create a CSS layout or CSS box for your own web page.

Search Engine Optimization Or SEO

You gonna learn the need for search engine optimization or seo. You will also understand the needs of the search engines and search engine users.

Search Engine Optimization for Dummies 1

The search engine optimization for dummies will teach how to optimize your web pages. This part will teach you how to optimize keywords, page title, meta tags including meta keywords and meta description of every web page.

Search Engine Optimization for Dummies 2

This is the second part of search engine optimization for dummies. This part will teach you how to optimize the body copy including the page headline, text links and image alts of your web pages.

Dos and Donts of Search Engine Optimization

Know these do's and don'ts of search engine optimization (SEO) to keep your web site from being blacklisted by the search engines. These are also an additional strategies for successful SEO.

Return from Learn the Basic HTML Codes With HTML Codes Practice Page to Start Your Own Web Site

Return from Learn the Basic HTML Codes With HTML Codes Practice Page to Easy Money Making Ideas, Et Al