 |
|
 |
|
Maurer
Feature Request Editor
Joined: 29 Jan 2006
$ 25.73
Location: Sector 7G
|
|
 |
|
 |
|
 Posted: Mon Oct 16, 2006 3:36 pm Post subject: Tip: (Slightly) Advanced HTML for your Portal |
 |
|
Tip: (Slightly) Advanced HTML for your Portal
It is assumed that you are already familiar with the first post in this series: (Really) Basic HTML for your Portal. There we discussed basic issues such as formatting your text, inserting images, creating hyperlinks and hyperlinked images. In this post we shall go a bit further, giving you a wider range of tools for use in designing your portal.
Removing Borders on Hyperlinked Images:
In the last section, we discussed creating hyperlinked images. The code presented there will result in an image surrounded by a blue frame, which is default. To eliminate this frame, use the following code in place of that presented earlier:
<a href=”http://your_desination_ulr.com/” ><img src=”http://your_image_url.com” border=0></a>
Of course, you will have to replace the URLs with your own information.
Adding Mouse-Over Text to (Hyperlinked) Images:
If you would like a short text to appear when people pass their mouse cursor over your image (called a ‘mouse-over’), use the following code:
<img src=”http://your_image_url.com“ alt=“YOUR MOUSE-OVER TEXT”>
If your image is hyperlinked, use the following code:
<a href=”http://your_desination_ulr.com/” ><img src=”http://your_image_url.com” alt=”YOUR MOUSE-OVER TEXT”></a>
Be sure to replace YOUR MOUSE-OVER TEXT with your desired text.
NOTE: src, border and alt are all parameters which define the <img> tag. If they are used in conjunction with one another, they need to be separated by a space.
Using Horizontal Rules:
You may want to provide a visual division between text and / or information of a different nature which appears together in one module. The easiest way to do this is by the use of a horizontal rule. The tag for the horizontal rule is <hr>, and is quite versatile. You can define the width, height and color of the rule. It also can be used in conjunction with the <center> tag.
If you want to insert a basic horizontal rule into one of your modules, use the following code:
<hr width=”50%” size=”3”>
In this example, “50%” refers to the amount of space the rule will take up relative to the available module width. This variable can range from anything from 1% to 100%, depending upon how wide you want the rule to be. “3” refers to the height of the rule. This variable can also be adjusted, 1 giving a very thin line, 10 giving a rather thick one.
For a colored horizontal rule, use the following code:
<hr width=”50%” size=”3” color=”#FF0000”>
Just as with the <font> tag, the color parameter accepts hexadecimal values as well as some proper names. Thus, in the last example, we could also use the name “red” instead of “#FF0000”. However, hexadecimal values are much more precise and allow a wider range of flexibility than proper names.
Using Marquees:
A marquee is an animated strip of text that passes through a predefined field. Like the <hr> tag, the <marquee> tag is also quite versatile, and can be customized in terms of color and width. In addition, you can determine the speed of the scroll.
If you want a basic marquee, use the following code:
<marquee bgcolor=”#CCCCCC” loop=”-1” scrollamount=”2” width=”100%”>YOUR TEXT</marquee>
In this example, the bgcolor is the background color of the marquee itself. Here we have it set to the hexadecimal value for ‘grey’. The scrollamount is the speed at which your text moves across the screen. This can be adjusted, but anything above 3 or 4 becomes difficult to read. Like with the <hr> tag, the width parameter defines the overall size of the marquee relative to the defined width of the module you are using the code in.
Of course, you should replace YOUR TEXT with your desired text.
NOTE: This tag will not work on all browsers.
Using the Unordered List, Ordered List and List Item Tags:
The list item <li> tag is always used in conjunction with either the unordered list <ul> tag or the ordered list <ol> tag, depending upon which effect is desired.
The <ul> tag is generally used for creating lists which have bullet-type points at the start of each item. There are three primary types of ‘bullet point’, the ‘disc’ (solid), the ‘circle’ (hollow) and the ‘square’ (solid). In the following example, all three are presented:
<ul>
<li type=”disc”>ITEM 1
<li type=”circle”>ITEM 2
<li type=”square”>ITEM 3
</ul>
In addition to using the <type> parameter, you can also omit this and simply include a bullet point of your choice as text, as in the following:
<li>§ ITEM 1
etc.
Also, the <ul> tag can be used for creating hierarchy lists, in which one list appears inside of another:
<ul type="disc">
<li>List item 1
<li>List item 2
<ul type="circle">
<li>List item A
<li>List item B
</ul>
</ul>
The <ol> tag is generally used for creating numbered lists, whereby letters can be used in the place of numbers. The default ordering for the <ol> tag is with numbers, as follows:
<ol>
<li>ITEM 1
<li>ITEM 2
<li>ITEM 3
</ol>
However, just like the <ul> tag, the <ol> tag can also be defined in terms of <type>:
<ol type=”i”>
<li>ITEM 1
<li>ITEM 2
<li>ITEM 3
</ol>
This will produce a list ordered i, ii, iii, iv, etc. The parameter “a” produces a list ordered a, b, c, d, etc.
Coming eventually:
(More) Advanced HTML for your Portal: Using Tables… |
|
FAQ 
Log in to check your private messages 
