Basic lessons in HTML, CGI, SEO, domain registration, hosting - build an on line business! » HTML

10 Basic HTML Actions, Pt. 2

AdminP — Thu, 22 Jul 2010 15:50:57 +0000

Continuing our discussion on basic HTML with items ’6 through 10′ of our ’10 Basic’ HTML actions - what they do and what to call them should you want to look them up either online or in a reference book. [Part 1 ]

6. Want to have ‘scrolling’ text on the page without using JAVA?

You can use ‘Marquee’ tags to accomplish this. When using a marquee tag you can define the following attributes:

Type (scroll - continues across the page and disappears; slide – starts at one side of the screen and stops when it reaches the other side; alternate – text starts at one side and bounces back when it reaches the other side. )
Direction – which side the text starts from
Loop – number of times the text will pass across
Scrollmount – amount of space left between each pass
Scrolldelay – how much time before text scrolls again
Height
Width
Horizontal space
Vertical Space
Align
Background color

Sample Scroll

Note: I’ve used this method for small graphics but do not recommend it for large images as it would take too long to load.

7. Want to make an image change when a visitor points at it?

This is called a ‘rollover’. To accomplish this you can use a tag to show the alternate image and a to return them to the original image. To use this code, you would replace the location and name of the image with your own image location and name.

8. Want to keep a string of text or numbers together . . . all on the same line?

This is easily done by placing a ‘no return’ tag at the beginning of the text string and a tag at the end.

Example: 202-123-4567, PO Box 123, NY, NY 11229

All of the information above between the ’nobr’ tags will stay on one line. This is effective for telephone number, long URL’s, item numbers or anything else you don’t want split.

9. Want to change how your website displays?

This can be accomplished through the ‘sytle’ tag –

10. Want to display information to the visitor via a text link?

This is accomplished through the use of a ‘title‘ tag. If you are using an image for a link it’s easy to add the “ALT= ” tag to give information either about the image or the link to the visitor. The information in the ”ALT= “ tag will be displayed when the cursor is over the image. However, if you are using text links, you will need to use the ‘title‘ tag within the anchor link code to get your message across.

For example,

Link Text Here

. . . lets the visitor know that when they click on the link “This link will open in a new window ”. You can use the ‘title‘ tag for any message you want your visitor to see.

Conclusion

Most of the time, finding information on how to perform actions in HTML is easy. If you want information about tables you look under tables, information about links – look under links…. but sometimes finding how to do a specific action that doesn’t seem related to anything can be confusing.

If you’re dead serious about learning HTML, the Quick Start Guides by Elizabeth Castro are a quick, easy learn and a much needed addition to your reference library.

10 Basic HTML Actions, Part 1

AdminP — Mon, 19 Jul 2010 23:05:19 +0000

When first beginning to write and use HTML for building websites and in some cases setting-up WP blogs, there are things you may want to do but perhaps find it hard to look up because you don’t know the ‘correct’ name to use for searching. However, knowing the name of the function (or action) so you can look it up to get instructions can make things a lot easier. [ Part 2 ]

Listed below are ten (10) of the more common HTML tasks you may want more information on . . . along with the name to use when looking them up either online or in a book. (Actual HTML code is shown in blue.)

1. Don’t want your links underlined?

There may be times when you want a clean looking page. One where your links are not underlined. The underlining of a link is part of ‘Text Decoration’ and can be addressed from an individual style sheet on the page.

2. Want the color of a text link to change when the cursor is placed on it?

You’ve seen pages where the links change color when the cursor is passed over them. This is called ‘Hover’ and can also be defined from the individual style sheet. You can assign any color to the hover color using a hexadecimal color definition.

For example,

In our sample above, we’ve defined text-decoration as ’none’ (no underlining of links) and our text link as changing color when hovered over by defining a ‘hover’ color using hexadecimal colors.

The hover color will be #FF0000 (red). [Our regular text will be black based on the color assigned in the tag. ]

When using

Using a style sheet is particularly effective if you plan on using numerous header elements on one page.

Conclusion (& Search Engines)

Make use of header elements to divide your page into hierarchical sections for easier viewing and navigation. It should be noted that header elements are an effective tool for helping search engine ranking. For this reason, you always want to use good key words for the header elements whenever possible.

5 Common Types of Links – Part 2

AdminP — Thu, 15 Apr 2010 00:45:10 +0000

Email Links

When used on a page, these links make an email address, image, word or string of text an active email by clicking on it. This allows visitors to send an email to a targeted email address directly from the page. This is particularly useful if you want to have a professional looking email associated with the domain. You can then forward the ‘dummy’ email to your primary email address. This is easily accomplished via the Host Gator cPanel.

……..

………

For example: Contact Us

In this example, when the visitor clicks on ‘Contact Us’, an email form will open with the address: requestinfo@yourdomain.com. They can then fill in the form and send. Looks better than johnny@yahoo.com. And when forwarded, you can read all your emails from one main account.

Permalinks

These ‘links’ are associated with blogging – and, are not a link in the traditional sense in that you do not place this link within the body of the blog.

Permalinks are the links to specific posts where the post is given a unique URL ‘link’, i.e. name. This link is used to locate the post once it has left the front page of the blog and is archived. While the permalink is unique, it is not particularly human friendly. Changing the permalink setting to make it not only search engine friendly, but also human friendly is a good idea.

The original URL assigned to a post typically contains the site name, digits for the year, month and day followed by the post name. While this information uniquely defines the post, it is not ‘search engine friendly’ in that it does not contain any keywords that can be used for searching – nor is it pleasing to the human eye.

For example: A post that has not had the Permalinks re-defined might look something like

http://yourblog.com/2009/03/28/blogtitlehere/

… giving little information for searching and offering no information as to category or content.

However, if the blog’s permalinks have been re-defined via ‘Permalinks’ in the blog Dashboard, then the link would look like:

http://yourblog.com/categoryname/blogposttitle/

….. allowing for a searchable keyword to be used in the category space rather than a string of numbers. Also, by using keywords in the post title, not only will the search engine results will be more accurate but also when the post URL is viewed in the address bar, it will make more sense.

Changing Permalinks

To change the permalinks, go to the Permalink page located in the blog Dashboard. From this page select ‘Custom Structure’, and then copy and paste in the code below making sure to ‘Save Changes’ once you’re through.

The following code will re-define Word Press Permalinks to show the category and post name in the address bar:

/%category%/%postname%/

Conclusion

The use of links is an important part of building websites -and blogs, in that the more easily visitors can navigate the pages of your website (and blog) they will probably stay longer which translates to a better opportunity to sell your product. One last thought, when linking, include Deep Links to pages other than the home page. This helps in getting those pages ranked – which in turn adds relevance to the whole website.