Subscribe To My Site
For Recent Updates
internet network marketing techniques
Get Your Free Special Report Here!
Reaching Higher
Levels Of Success
Isn't Rocket Science:

Avoid Being A Small
Fish In A Big Pond
By James Rouse

Email
First
Last

Search My Blog
FTC Disclosure
Marketing Techniques Table Of Contents
Monday
Aug242009

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

Bookmark and Share

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).
  • <a href="”URL" goes here”>text goes here</a> The above text link is most commonly used to link to another page on your site.
  • <a href="”URL" goes here” target="”_blank”">text goes here</a> 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> And this is what you get: check out my site.

    Until you get comfortable with this coding you may want copy the following and paste it in to a document on your computer for later use. Then paste the full URL between the quotation marks, and type in your link text between the opening tag and the closing tag.
    <a href="””"></a> <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:
    1. basic HTML
    2. intermediate HTML
    3. 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
      1. step number one
      2. step number two
      3. 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 1Row 1 Column 2
    Row 2 Column 1Row 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
    & &amp; Ampersand   &nbsp; Blank Space
    &euro; Euro currency © &copy; Copyright
    £ &pound; Pound currency ® &reg; Registered
    ¥ &yen; Yen currency &trade; Trademark
    ¢ &cent Cent > &gt; Greater than
    ° &deg; Degree < &lt; Less than
    &radic; Check Mark &ge; Greater than or equal to
    &ldquo; Open Curly Quotes &le; Less than or equal to
    &rdquo; Close Curly Quotes &infin; 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