Intermediate HTML - Learn How To Create Text Links, Lists, Basic Tables, And More

[James Rouse — Mon, 24 Aug 2009 12:06:18 +0000

We covered some simple formatting in the HTML basics now lets move on to some intermediate html. What we will cover in this tutorial are text links, adding color to text, creating a bulleted list, creating a numbered list, creating a nested list (bullets and numbers), basic tables, and creating a box around text.

Not all content management systems are created equal so it all depends on which system you are using. Having said that; the system that these codes will work for flawlessly is Site build It. Near the end of this page you will be left with a table of special HTML entities.

Text links

Links are your websites bread and butter. Without links there wouldn't be a web. Its critical to have well built links within your site sending your visitors to other pages on your site, off your site, and to your monetization model. There's nothing worse than to have a well written page only to find broken links. Your credibility will be damaged and the search engines could penalize you. Always check your links before uploading your page(s).

The above text link is most commonly used to link to another page on your site.
The above text link would link to a page off your site but open in a new window. This way your site is still visible in your visitors browser. Its a good practice to use this link whenever you send your visitor off site

<a href=”http://helpcurechildobesity.com” target=”_blank”> check out my site</a>

check out my site

between

<a href="" target="_blank"></a>
Adding color to text

Sometimes you may feel compelled to add color to text as an added emphasis. Adding color is an easy task.

For example: Lets say you wanted to make the phrase intermediate HTML to appear as red. All you need to do is surround the phrase with <span style=”color:red;”>intermediate HTML</span>. And this is what you get intermediate HTML.

To use other colors just replace the word “red” with “yellow” or “green” or “orange”, and so forth.

You can also use HTML colors otherwise known as HEX values such as this:
<span style=”color:#B8860B;”>intermediate HTML</span> Which looks like this: intermediate HTML.

Click here to see an assortment of HTML color codes and other useful information.

Note: HEX colors must include the # ( pound sign) before the code characters (# B8860B). Browers have become more compliant to standards so forgetting the # in the HEX code will result in your color of choice not displaying.

Creating Lists

At one point or another most people will want to add a list to their blog or website. Some of the benefits to creating lists are..

display information in fewer words
key points or information is separated by a single line
lists are easier to read
lists are easier to scan...which is how most web users read information
numbered lists make it easier for readers to follow a set of instructions or steps

Lists

There are two types of lists ordered ( numbered) and unordered ( bulleted ).

an e-mail list would be an unordered list, since all e-mail addresses are of equal importance.
An outline for a web page would be an ordered list, Page title, headline, and text have a specific order.
The steps to remove a tire on an automobile require an ordered list , you can't do step four before the preceding steps..For instance:
1. Park your vehicle on level ground
2. Carefully loosen the lugs nuts
3. Jack the vehicle off the ground
4. Remove the tire from the vehicle
There is a third type of list: A nested list ( which I created above) which is a list within a list. Nested lists can be ordered, unordered, or both.

Unordered List

The tags <ul> and </ul>are used to make an unordered list and the tags <li> and </li>separate each point with bullets.
<ul><li>basic HTML</li> <li>intermediate HTML</li> <li>advanced HTML</li></ul> which looks like this:

basic HTML
intermediate HTML
advanced HTML

Ordered Lists

Ordered lists use the same format but different tags. The tag <ol> and </ol> are used instead of <ul> and </ul> The content can be the same. The opening and closing tags are all that needs to be changed to make an unordered list into an ordered list.
<ol><li>basic HTML</li> <li>intermediate HTML</li> <li>advanced HTML</li></ol> And this is what you get:

basic HTML
intermediate HTML
advanced HTML

Nested lists have one list contained in another list. They can be all bullet points or combinations of numbers and bullets. Ordered lists also have options that you can choose for changing the levels. For instance: You can use upper or lower case Roman numerals or letters.

Lets use the example above which is an unordered list containing an ordered list. The unordered list opening tag stays open until the end of the list.
<ul><li>bullet point number one</li> <li>bullet point number two</li> <li>bullet point number three</li> <ol><li>step number one</li> <li>step number two</li> <li>step number three</li></ol> <li>bullet point number Four</li></ul> As you can see the numbered list was opened and closed within the unordered list.

bullet point number one
bullet point number two
bullet point number three

step number one
step number two
step number three

bullet point number Four

The next time you're building a web page or posting to your blog create a list to identify key points. The extra work will be worth the time and effort for the benefit of your visitors.
If you don't have time or patience but still want a list for your website use the contact me form to discuss your options.

Basic Tables

Tables can be very simple or quite complex and confusing. Creating tables requires patience. The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns or data) tags. Tables are a handy way to create a site's layout, but it does take some getting used to.

Basic Table
The following code is about as basic as it gets for creating a table.
<table border="1"> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td></tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td></tr> </table>
Want more columns? Simply add another column between the open table row tag and the closing table row tag. Like this:
<table border="1"> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> <td>Row 1 Column 3</tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> <td>Row 2 Column 3</tr> </table>
This is what it looks like.

Row 1 Column 1	Row 1 Column 2	Row 1 Column 3
Row 2 Column 1	Row 2 Column 2	Row 2 Column 3

With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within.
<table border="1" cellspacing="10" <tr> <th>Column 1</th> <th>Column 2</th></tr> <tr><td>Row 1 Column 1</td> <td>Row 1 Column 2</td></tr> <tr><td>Row 2 Column 1</td> <td>Row 2 Column 2</td></tr> </table>
In this example we added a table heading tag <th>

Column 1	Column 2
Row 1 Column 1	Row 1 Column 2
Row 2 Column 1	Row 2 Column 2

This last example was taken from my child obesity website www.helpcurechildobesity.com I added some color plus you may be able to visualize the cells better.
<table border=”1” bordercolor="blue"> <tr> <th>BMI</th> <th>category</th> </tr> <tr> <td>below 18.5</td> <td>underweight</td> </tr> <tr> <td>18.5-24.9</td> <td>normal weight</td> </tr> <tr> <td>25.0-29.9</td> <td>overweight</td> </tr> <tr> <td>30.0 and above</td> <td>obese</td> </tr> </table>

BMI	category
below 18.5	underweight
18.5-24.9	normal weight
25.0-29.9	overweight
30.0 and above	obese

You may have noticed the tables are much more clean and crisper on my Site Build It website. Exact same code but a different platform. So all content management systems are not created equal.

Creating A Box Around Text

There are several very good reasons to enclose text within a box. As mentioned earlier in this tutorial it benefits your visitors online experience at your website. It stands out from the rest of your text and is easy to read. One popular use for a box around text is creating a link to your website for other webmasters to use on their website. All they have to do is copy and paste the text from within the box. I'm sure you will find a good use for this code
<table align="left" border="1" cellpadding="5" cellspacing="0" width="200"> <tbody> <tr> <td bordercolor="#006633" bgcolor="#FFEC8B"> CONTENT GOES HERE </td> </tr> </tbody> </table> Replace the width alignment and color to suit your needs, In this example bgcolor refers to back ground color.

www.attraction-marketing-techniques.com Attraction marketing strategies and techniques for internet network marketers. Learn how to use social networking, articles marketing, and even build a blog or website to attract targeted prospects to your business or opportunity.

Intermediate HTML is not difficult; it is more time consuming but you can do this.

If you don't have time or patience but still want a table for your website use the contact me form to discuss your options.

Special Entities

As promised here's a list of special entities.

Character	HTML	Description	Character	HTML	Description
&	&	Ampersand			Blank Space
€	€	Euro currency	©	©	Copyright
£	£	Pound currency	®	®	Registered
¥	¥	Yen currency	™	™	Trademark
¢	¢	Cent	>	>	Greater than
°	°	Degree	<	<	Less than
√	√	Check Mark	≥	≥	Greater than or equal to
“	“	Open Curly Quotes	≤	≤	Less than or equal to
”	”	Close Curly Quotes	∞	∞	Infinity

Success has a simple formula: do your best, and people may like it. Sam Ewing

Return to "Introduction To HTML Basics" page from Intermediate HTML

Home | About Me | RSS | Link To Me ©2008-2011 Attraction Marketing Techniques - All Rights Reserved