Monday
Aug242009
Intermediate HTML - Learn How To Create Text Links, Lists, Basic Tables, And More
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- 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
- 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:
- Park your vehicle on level ground
- Carefully loosen the lugs nuts
- Jack the vehicle off the ground
- 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.
- basic HTML
- intermediate HTML
- advanced HTML
- basic HTML
- intermediate HTML
- advanced HTML
- 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
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.
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
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:
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..
There are two types of lists ordered ( numbered) and unordered ( bulleted ).
Unordered List
The tags
Ordered Lists
Ordered lists use the same format but different tags. The tag
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.
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
Basic Table
The following code is about as basic as it gets for creating a table.
Want more columns? Simply add another column between the open table row tag and the closing table row tag. Like this:
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.
In this example we added a table heading tag
| 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.
| 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
| 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
[James Rouse