Tutorial de HTML - atributos de texto & cores

atributos de texto

Observe a formatação das palavras texto a seguir:

texto, texto, texto, texto, texto, texto, texto, texto.

As palavras acima demonstram claramente que podemos, como num editor de texto, formatar textos HTML, alterando o tamanho, o tipo e o estilo da fonte. É evidente que todos os comandos que alteram o estilo do texto devem ser usado aos pares, onde o primeiro "ativa"e o segundo "desativa" o efeito.

Tente decifrar os comandos usados na formatação de uma página com o texto acima:

<HTML>
<HEAD>
<TITLE>Conhecendo atributos de fonte</TITLE>
</HEAD>
<BODY>
texto,
<I>texto,
<FONT SIZE=4>texto,
<B>texto,
<FONT SIZE=5>texto,
<FONT SIZE=5 STYLE="font-size: 20pt">texto,
<FONT SIZE=6 STYLE="font-size: 26pt">texto,
<B>
texto.
</FONT>
</P>
</BODY>
</HTML>

Bem, vamos lá:

1 - itálico: <texto,;
2 - negrito: <texto,;
3 - negrito e itálico: texto,;
4 - sublinhado: texto,;
5 - negrito, itálico e sublinhado: texto;
6 - os tamanhos e as cores das fontes foram determinados pelas tags:
texto.;
7 - Poderíamos mudar a fonte: texto.

Como vocês puderam perceber, a tag  é muito versátil, permitindo-nos dar às fontes praticamente qualquer formatação. Eis os atributos para a tag :

FACE : tipo de fonte (Arial, Courier, Times New Romam etc)
SIZE : tamanho da fonte. Os valores variam de 01 à 07.
COLOR : cor do texto

Exemplo:

mais sobre fontes

cores

8 - Em HTML, as cores tem seus valores definidos em hexadecimal> Por exemplo, branco = FFFFFF; preto = 000000 etc.

Eu peguei um código (javascript) na internet (todos os créditos ao autor) que nos dá um bom auxílio nessa questão de cores. É só Salvar o arquivo e usá-lo para saber, imediatamente, o valor hexadecimal de determinada cor:

<HTML>
<HEAD>
<TITLE> Cores com javascript</TITLE>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!--

// Copyright (c) 1996-1997 Tomer Shiran. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.oocities.org/~yehuda/
// RCH
// create 6-element array
var hex = new Array(6)

// assign non-dithered descriptors
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"

// accept triplet string and display as background color
function display(triplet) {
        // set color as background color
        document.bgColor = '#' + triplet

        // display the color hexadecimal triplet
        alert('A cor de fundo é ' + triplet)
}

// draw a single table cell based on all descriptors
function drawCell(red, green, blue) {
        // open cell with specified hexadecimal triplet background color
        document.write('<TD BGCOLOR="#' + red + green + blue + '">')

        // open a hypertext link with javascript: scheme to call display function
        document.write('<A HREF="javascript:display(\'' + (red + green + blue) + '\')">')

        // print transparent image (use any height and width)
        document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')

        // close link tag
        document.write('</A>')

        // close table cell
        document.write('</TD>')
}

// draw table row based on red and blue descriptors
function drawRow(red, blue) {
        // open table row
        document.write('<TR>')

        // loop through all non-dithered color descripters as green hex
        for (var i = 0; i < 6; ++i) {
                drawCell(red, hex[i], blue)
        }

        // close current table row
        document.write('</TR>')
}

// draw table for one of six color cube panels
function drawTable(blue) {
        // open table (one of six cube panels)
        document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')

        // loop through all non-dithered color descripters as red hex
        for (var i = 0; i < 6; ++i) {
                drawRow(hex[i], blue)
        }

        // close current table
        document.write('</TABLE>')      
}

// draw all cube panels inside table cells
function drawCube() {
        // open table
        document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>')

        // loop through all non-dithered color descripters as blue hex
        for (var i = 0; i < 6; ++i) {
                // open table cell with white background color
                document.write('<TD BGCOLOR="#FFFFFF">')

                // call function to create cube panel with hex[i] blue hex
                drawTable(hex[i])

                // close current table cell
                document.write('</TD>')
        }

        // close table row and table
        document.write('</TR></TABLE>')
}

// call function to begin execution
drawCube()

// -->
</SCRIPT>

</body>
</html>

Salve o código acima e teste o programa. Lembre-se de mantê-lo sempre à mão, pois é um programinha que quebra um galhão!

Uma vez obtida a cor, não se esqueça de colocar o símbolo # antes de sua representação hexadecimal. Exemplo:

<BODY text="#0000FF" link="#00FFFF" bgcolor="#FFFFFF" alink="#FF6600" vlink="#FFFF66">

anterior	índice	próxima