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,
<style type=”text/css”>
a {text-decoration: none}
a:hover {color: #FF0000}
</style>
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 <body> tag. ]
When using <style> code to assign link colors, note that it will override the link information in the <body> tag. You should also remember if you make any of the link colors (visited or active) the same color as the rest of the page’s textual content, i.e, black, your visitor most likely will not be able to tell which words are links or which link they’ve visited. If you decide to have any of the links the same color as the rest of the text on the page, it is a good idea to leave in the underlining.
3. Want to separate a paragraph from the rest of the text and have it stand out?
You can accomplish this by using a ‘Blockquote’ tag – <blockquote>. This is not the same as using an indent. Using this tag will not only indent the block of text but also will drop it a line below the text above. Ending the blockquote – </blockquote>- will place an empty line below the blockquote text before resuming the normal content. The image below is a sample of how a blockquote might look.
Notice how the message “This link will open is a new window” displays when you place your cursor over the image. (This is discussed in Item 10, Part 2)
4. Want to include a straight line on the page without having to use a graphic?
Do this by using a ‘Horizontal Rule’. It can be defined by
- Alignment
- Color
- Size
- Width
- and more
You should know that the width can be designated either as a percentage of the total space available or in pixels.
For example, you want a horizontal rule (HR) within a table that has a width of 500 pixels. The maximum width (100%) that the HR could be would be the defined table width of 500 pixels. If you wanted a HR that was 50% of the table width, it would result in your HR being 250 pixels wide. However, if the HR is outside the table in a ‘stand-alone’ situation and is assigned a 100% width – then it would span the entire screen.
<hr align=”center” noshade width=”100%” size=”5″ color=”#FF0000″>
5. Want to make various parts of an image link to multiple pages?
This is called an ‘Image Map’ . Images can be used for multiple links by making different areas of the image active links. The areas of the image can be defined in different shapes including:
- Rectangular
- Circle
- Irregular
This is accomplished by giving the image a ‘map’ name within the <img src= >tag and then creating a ‘map’ on the same page with the same name that defines the clickable areas and names the pages they link to. Want to learn how to create an image map?
Get HTML Quick Start Guides – Learn from Pictures
