Saturday, November 28, 2009

Cool Effects HTML

In this article, I will show you some cool effects using HTML code. You will learn how to change the size and the color of your websites text so it will look better.

When you create a Web document without specifying the font size, the Web browser displays the text using the browser's default text size. The default values that browsers use for the size of characters vary, but on average run between 12 and 14 points. To insert and control the size of heading text on a Web page, enclose the heading text within start and end heading level tags (<> ... < /h1 > to <> ... < /h6 >). The number that follows the letter "h" in a start heading tag specifies the size of the heading text in relative terms. When using the heading tags, the lower the number that follows the "h", the larger the heading will be onscreen.

To use heading tags to specify the size of text on a page, place the text between the start and end heading tags. When a Web browser encounters an end heading tag in the Web page HTML, the browser automatically places the text following the end heading tag on the next line, and reverts to using the browser's default font size.

A second way to change the size of text in an HTML document is to use the "size" attribute in the <> tag in the form < size="">" > (where "n" is a number from 1 to 7). When you use the "size" attribute, the larger the value, the greater the size of the text-the opposite of the heading tags in which increasing the size of "n" decreases the size of the letters. To set the text using the "size" attribute, place the text between the start and end font tags (<>< /font >).

Both the start heading tag and the "size" attribute in the <> tag let you specify the size of text; the start heading tag also tells the Web browser to display the text in boldface. Bear in mind that the resolution of the visitor's monitor affects the size of text displayed within the Web browser's application window. Text on a monitor running at a resolution of 1024×768 pixels appears smaller than the same "size" text on a monitor using a lower resolution such as 800×600 pixels. Moreover, different platforms may also display text in different sizes even at the same resolution. The Mac, for example, displays text about two point sizes smaller than text displayed at the same resolution on an Intel-based machine. The W3C deprecated the font tag and its attributes in the HTML 4 standard. As such, future version releases of HTML-compliant Web browsers may no longer support the font tag.

Now, if you do not specify the color of text on a page, a Web browser will display the text in the browser's default text color, usually black. If you want to change the color of a word or a group of words, use the "color" attribute in the <> tag to tell the Web browser what color to use.

Suppose, for example, that you want to change the color of one sentence in a paragraph of text. Insert a <> tag with a "color" attribute in the form < color="">color" > just before the beginning of the text whose color you want to change. The "color" attribute instructs the browser to display the text following the tag in the specified color. Later in the text, insert a < /font > tag at the point where you want the Web browser to start using the browser's default text color again. For example, the "color" attribute in the <> tag after the first sentence in the following HTML tells the Web browser to display the second sentence in red. Then, the < /font > tag, after the end of the second sentence, tells the Web browser to stop using red, which causes the Web browser to use the default text color again when displaying the remaining Web page text:

<>

<>

<>Changing the color of text < /title >

< /head >

<>

<> To change the color of the text in the next sentence.

< font color="red" > Insert the FONT tag with the color

attribute at the beginning and end of the line.< /font >

The color changes and then reverts back to a default

color of black.< /p >

< /body >

< /html >

You can specify the value of the "color" attribute either by name or by number. As you saw in the preceding example, you can use color names such as red, green, blue, and so on. Alternatively, you can use the hexadecimal triplet that represents a color. For example, the hexadecimal triplet for red is #FF0000. Therefore, you can tell the browser to start displaying text in red with either < color="red"> or < color = "#FF0000">. When you specify a color as a hexadecimal triplet, the numbers in the triplet represent the amount of red, green, and blue the browser is to "mix" to create the color you want. For example, the color black has a hexadecimal triplet value of "#000000". Each two-digit number in the triplet represents the amount of one of the three primary colors red, green, and blue the browser is to use to create the composite color. Thus, for black (#000000), the browser is to mix "00" red, "00" green, and "00" blue. Conversely, to create the color white, the browser must use the maximum amount of red, green, and blue. Hence, the hexadecimal triplet for white is "#FFFFFF". In the print world, there are few limitations on the range of colors available to enhance brochures and magazine advertisements. Most computers have video cards capable of displaying thousands, if not millions, of colors. Both Macintosh and Windows-based computers have a color lookup table that instructs the monitor how to display color. When you assign a color using a hexadecimal value, the Web browser works with the video card's lookup table; if the color is available in the table, then the system will display the color correctly onscreen. If the lookup table does not contain the correct color, the system creates the color by mixing (dithering) existing color pixels together to produce a visual equivalent of the requested color. Many years ago, when video cards were only capable of displaying a maximum of 256 colors, deciding which colors to use was an easier job (fewer colors) but more restricting. To complicate matters, computer operating systems reserved some of these colors for their visual interface (that is, for use in displaying the system's desktop). Because the Windows and Macintosh operating systems choose a different set of colors for their visual interface (40 colors) that leaves 216 colors that are displayed the same way in Macintosh and Windows Web browsers.

Today, you have a greater range of color from which to choose when creating a Web page, because video cards in both Macintosh and Windows computers (check out top ten coolest software for Windows, maybe you can find something HTML-related) can display millions of colors. However, you still create each color as a combination of red, green, and blue values (a triplet). For a complete listing of browser-safe colors, that shows both the color names and corresponding hexadecimal triplet values, visit http://www.htmlhelp.com/cgi-bin/color.cgi.

Although most visitors will leave the browser's default text color set to black, some may have selected another default text color. As such, it is a good idea to specify the color you want the browser to use when displaying your Web page text, even if the color you want is black.

I hope this article was helpful and you can now take full advantage of the cool effects using HTML code.

No comments:

Post a Comment