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
<marquee width=”100%” height=”15″ scrolldelay=”175″ behavior=”scroll” direction=”left” loop=”infinite”>Sample Scroll </marquee>
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 <onmouseover=document.imagename.scr= “> tag to show the alternate image and a <onmouseout=”document.imagename.scr= “> 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 <nobr> at the beginning of the text string and a </nobr> tag at the end.
Example: <nobr>202-123-4567, PO Box 123, NY, NY 11229</nobr>
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 – <style>. If you are using one single table to enclose the whole of the information displayed on the web page, this code will affect the location of that table.
If the first tag is not a table, but say is an image, i.e., banner - then the image will display based on the <style> definitions.
For example, the code below sets the font face and size (10px) used within the body, table column (td) and table headings (th). It also sets the body margins for left, top, right and bottom as well as the background image. In our example, all margins are 0.
If you want some ‘padding’ space to the left and/or to the top of the table/website contents, then you would change the 0px to reflect the amount of space you want there.
<style type=”text/css”>
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(gradient.jpg);
}
</style>
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,
<a href=”http://www.yourdomain.com” title=”This link will open in a new window”>Link Text Here </a>
. . . 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
