HTML Methods to Remember and Use Effectively - Use of Classes
(Page 4 of 4 )
Use of Classes
To add appearing/disappearing text to our page we need to make use of the span tag again. We will also use the style tag. Now I know this is used with CSS, but in this application, it functions alone. The following code is a little bit longer than what we have been dealing with, mainly because of its repetitious nature.
<style>
.time { behavior: url(#default#time2);}
</style>
<span>Every second text will appear:</span>
<span class="time" begin="1">One Thousand</span>
<span class="time" begin="2">Two Thousand</span>
<span class="time" begin="3">Three Thousand</span>
<span class="time" begin="4">Finished!</span>
This only works because we have the time2 statement in our time class in the style tag. Normally the style tag is placed in the head tag, but in this case, it can be copied as is to the body of our web page.
The above code will display the selected text, each second, one after the other until it stops at 4 seconds. The span tag allows us to use the style tag's class (i.e. time) without using any other formatting tags. Notice we incremented the number of seconds by one in each begin attribute.
This is why the text is displayed in succession. With the following line of code replacing the span tags above, we can make the text appear and disappear: <span class="time" begin="1" dur="1">One Thousand</span>. All we did to accomplish this was add the dur attribute (duration), giving it a value of 1 (second).
Finally, we can make the selected text appear and disappear one after another at the same position on the screen (i.e. on top of each other) by using the following code:
<:span style="position:absolute;top:10;left:10" class="time" begin="0"
dur="1">Every second text will appear:</span>.
All we did was add the style attribute, which enables us to specify the position of the selected text. We also started with the first begin attribute as 0. If we replace the selected text with an image, as we did with the marquee, we will get an even better effect.
There are still many other HTML methods we can use to enhance our web pages, but these will give us a head start.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
