Home arrow HTML arrow Page 3 - HTML Methods to Remember and Use Effectively
HTML

HTML Methods to Remember and Use Effectively


In the years since the first development of HTML, many other computer languages have been developed to enhance the pages displayed on the Internet. These languages include JavaScript, VBS, Perl, ASP, and .Net. However, I will show you that you can enhance your web page just using HTML. This is especially important if you are new to web page development and have not had the time to learn another language.

Author Info:
By: Stephen Davies
Rating: 3 stars3 stars3 stars3 stars3 stars / 15
December 05, 2007
TABLE OF CONTENTS:
  1. · HTML Methods to Remember and Use Effectively
  2. · Page Layout
  3. · Text Enhancing
  4. · Use of Classes

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
HTML Methods to Remember and Use Effectively - Text Enhancing
(Page 3 of 4 )


Text enhancing

We can also use HTML tags to enhance the actual text on our page. We can specify the type, size, color, and whether or not the text is highlighted. We can also add scrolling or appearing/disappearing text to our page. We can set the color of our text in the body tag by using its text attribute, like this: <body text="blue">. This also works for link color by using the link attribute in the body tag.

With the font tag, we can change not only the color of our text, but also its size and type by using the size, color, and face attributes. Here is an example of the code:

<font size="2" color="red" face="Courier">text goes here</font>.

The font size ranges from 1 to 7. We picked our color from the color chart (we can also use hex code) and the font type is a TrueType font (some common types that work well are Arial, Helvetica, Courier, and Times).

To highlight a particular portion of text we will use the following code:

<span style="background-color: #FFFF00">highlighted text</span>.

This code will highlight our selected text in yellow. Notice that we used the span tag here. This tag was created to take full advantage of CSS (Cascading Style Sheets). That is why it has a style attribute. However, this works even if we do not have a CSS. This also works well to highlight any links that we have on our page. We just substitute the following code: <a
href="http://www.microsoft.com"><span style="background-color:
#FFFF00">Microsoft</SPAN></a>
for the code above. A different way of doing this is: <a href="http://www.microsoft.com" style="background:yellow;
color:black">
Microsoft</a>. We can take our pick!

Next, let us enhance our page by using a scrolling marquee. In fact, the HTML tag for this is marquee. This is the code we will use: <marquee bgcolor="#80FF00"
loop="infinite" >My scrolling text</marquee>
. This code will place a green background line (the banner) on the page in which the selected text will continuously scroll right to left.

To have the text scroll a limited number of times, replace infinite with a number. The marquee tag has the following additional attributes: height, width, align, direction, behavior, hspace, scrollamount, scrolldelay, and vspace. The height and width attributes determine the size of the marquee banner (as a percentage of screen height and width).

The align attribute has three values (top, middle, or bottom) that position the text in the banner. The direction attribute naturally changes the direction of the scroll (values of left or right with right being the default). The behavior attribute has three values (scroll, slide, or alternate).

Scroll is the default value, slide makes the text come to a stop, and alternate makes the text come in on either side of the screen. The hspace and vspace attributes determine the amount of space around the text (this is in pixels). The scrollamount attribute tells the browser how much space to put between successive scrolls (this is in pixels).

Finally, the scrolldelay attribute determines the number of milliseconds between scrolls (in thousands of milliseconds). We can experiment with all the attributes to get just the right effect. We can also replace the text with an image, which is really neat! We just replace the text with the following code: <img
src="myimage.gif">
.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials