Esses elementos são usados para destacar trechos de texto. Se dividem em elementos Lógicos, que sugerem uma utilização para o texto destacado (grifo, destaque, variável, código, etc.) e elementos Físicos, que sugerem uma formatação específica para o trecho (negrito, itálico, etc.). A ação destes últimos restringe-se à capacidade de visualização do browser;
Todos podem conter: texto, elementos de formatação de caracteres, <A>, <IMG>, <BR>
São permitidos dentro de: cabeçalhos, elementos de formatação de caracteres, <A>, <PRE>, <P>, <LI>, <DD>, <DT>, <TD>
|
<STRONG> ... </STRONG> Destaque (geralmente negrito). |
Este é um texto rotulado com STRONG. |
|
<EM> ... </EM> Grifo (geralmente itálico). |
Este é um texto rotulado com em. |
|
<CITE> ... </CITE> Citação (geralmente itálico). |
Este é um texto rotulado com cite. |
|
<VAR> ... </VAR> Variável (geralmente itálico). |
Este é um texto rotulado com var. |
|
<SAMP> ... </SAMP> Amostra (geralmente fonte de largura fixa). |
Este é um texto rotulado com samp. |
|
<KBD> ... </KBD> Teclado (geralmente fonte de largura fixa). |
Este é um texto rotulado com kbd. |
|
<DFN> ... </DFN> Indica definição de uma palavra (geralmente em itálico). |
Este é um texto rotulado com dfn. |
| <B> ... </B> Negrito. | Este é um texto formatado com bold. |
| <I> ... </I> Itálico. | Este é um texto formatado com itálico. |
| <TT> ... </TT> Teletipo. | Este é um texto formatado com tt. |
| <U> ... </U> Sublinhado. | Este é um texto formatado com sublinhado. |
| <STRIKE> ... </STRIKE> Texto riscado |
| <DEL> ... </DEL> Texto riscado |
| <S> ... </S> Texto riscado |
| <SUB> ... </SUB> Texto Subscrito. | H20, H2SO4 |
| <SUP> ... </SUP> Texto Sobrescrito. |
E = mc2, 20 oC |
| <SMALL> ... </SMALL> Texto normal, | agora texto escrito com small. |
| <BIG> ... </BIG> Formata o texto um pouco maior que o normal. É o oposto do comando small. | Este texto está escrito com big. |
| <BLINK> ... </BLINK> Texto Pulsante. |
|
Os browsers Internet Explorer e Opera não reconhecem esse recurso.
Você também pode usar vários comandos de formatação ao mesmo tempo sobrepondo-os, sempre seguindo a lógica LIFO, isto é: A primeira tag a ser aberta, é a última a ser fechada. Exemplos:
<b><i><u>Este texto está com bold, itálico e sublinhado.</u></i></b>
Este texto está com bold, itálico e sublinhado.
<tt><strike>Este texto está com teletipo riscado.</strike></tt>
Este texto está com teletipo riscado.
Marquee é uma propriedade que possibilita o efeito de rolamento de um objeto (texto, quadro ou imagem) para a esquerda ou direita, para cima ou para baixo como também define sua velocidade. A sintaxe é a seguinte:
<MARQUEE atributo=efeito>objeto</MARQUEE>
ATRIBUTOS:
align="top", "middle", "bottom"
Alinha o texto pelo topo, meio e inferior, respectivamente.behavior=scroll, slide, alternate
Scroll - Inicia o texto aparecendo de um lado e segue até desaparecer a última letra do outro.
Slide - Inicia o texto de um lado e segue até a primeira letra tocar o lado oposto, então ele pára.
Alternative - Cria o efeito do texto aparecer de um lado e segue até tocar o lado oposto, então ele retorna.
bgcolor="cor"
Especifica a cor de fundo. Pode ser pelo nome da cor ou através de seu código RGB.direction=left, right, up, down
Especifica a direção do texto, esquerda (default), direita, para cima e para baixo, respectivamente.height="número", %
Especifica a largura do painel. Se for um número ele especifica a quantidade de pixels se for % ele especifica a largura da janela do marquee em porcentagem.hspace="número"
Especifica a largura em pixels das margens esquerda / direita.loop="número", -1, infinite
Especifica quantas vezes será executado a rolagem do texto, se o valor for -1 ou infinite, o texto rolará infinitamente.scrollamount="número"
Especifica a quantidade de pixels que será usada para deslocar o marquee, ou seja, quanto maior for o valor, maior será a velocidade de deslocamento.scrolldelay="número"
Especifica em milissegundos o tempo de deslocamento do texto.vspace="número"
Determina em pixels a margem superior e inferior do marquee.width="número", %
O número especifica a altura do painel, % especifica a altura em relação a janela em porcentagem.
Aqui configurei que um texto com fonte tamanho 5 (<font size="5px">) iria rolar numa faixa de 70% (width=70%) da tela entre duas barras <hr>
|
<CENTER> <HR WIDTH="80%"> <MARQUEE behavior=scroll width="70%"> <font size="5px"><b>Não esqueça de fazer back-up de seus arquivos.</b></font> </MARQUEE> <HR WIDTH="80%"> </CENTER> |
Agora um exemplo com o texto rolando de baixo para cima direction="up" num quadro e de cima para baixo direction="down" noutro quadro. Para isso criei uma tabela com duas células de 250px cada, width="250" e inseri os quadros nelas. Abri o espaço vertical com height="100" e diminui a velocidade de movimento das letras com scrollamount="1" de forma que ela irá correr lentamente como na abertura de um filme. E finalmente inseri algumas imagens também.
|
<CENTER> <TABLE> <TR> <TD WIDTH="250"> <MARQUEE behavior=scroll width=250 height="100" direction="up" scrollamount="1"> <IMG SRC="imagens/3sun5a.gif" align="left"> <CENTER><I>Texto...</I></CENTER> </MARQUEE> </TD> <TD WIDTH="250"> <MARQUEE behavior=scroll width=250 height="100" direction="down" scrollamount="1"> <IMG SRC="imagens/3sun6c.gif" align="left"> <CENTER><I>Texto...</I></CENTER> </MARQUEE> </TD> </TR> </TABLE> </CENTER> |
Aqui configurei uma cor de fundo (bgcolor="#dda0dd") com o texto em movimento alternado (behavior=alternate)
Sintaxe:
|
<marquee behavior=alternate direction=left bgcolor="#dda0dd"> <font size="5px"><b><i>É muito fácil aprender HTML, 8-))</i></b></font> </marquee> |
Aqui combinei quatro conjuntos de marquee com rolagens em direções alternadas.
|
<marquee behavior=scroll direction=right width=50% bgcolor="#ff7f50"> <font color="#191970"><b>Agora quatro marquees combinados.</b></font></marquee> <marquee behavior=scroll direction=left width=50% bgcolor="#ffa500"> <font color="#ff4500"><b>.combinados marquees quatro Agora</b></font></marquee> <marquee behavior=scroll direction=left width=50% bgcolor="#ffa500"> <font color="#ff4500"><b>Agora quatro marquees combinados.</b></font></marquee> <marquee behavior=scroll direction=right width=50% bgcolor="#ff7f50"> <font color="#191970"><b>.sodanibmoc seeuqram ortauq arogA</b></font></marquee> |
Aqui aumentei a velocidade de rolamento do texto com scrollamount="30".
|
<marquee behavior=scroll direction=right scrollamount="30"> <font color="green"><b>Texto ajato para internautas com leitura dinâmica.</b></font> </marquee> |
Neste exemplo configurei o rolamento de um texto com várias linhas utilizando o comando <pre> para criar o efeito de atraso de início de cada linha.
|
<marquee behavior=scroll direction=left scrolldelay="150" vspace="20"> <font size="3" color="#ff00ff"> <pre><b>Agora bem devagarzinho... Você pode fazer efeitos de movimento com várias linhas também.</b></pre></marquee> |
Agora configurei os rolamentos de texto dentro de uma tabela. Separei a sintaxe em módulos para ficar mais fácil o entendimento.
|
<center> <table border="5" bgcolor="#ffd700" width="450"> <tr><td bgcolor="#00bfff"> <marquee behavior=scroll direction=left scrollamount="3"> <b>_#_#_#_#</b> </marquee> </td> <td colspan=2 bgcolor="#9acd32"> <td bgcolor="#f0e68c"> <tr> |
E finalmente a rolagem que um arquivo de imagem em movimento.
|
<marquee behavior=scroll direction=left scrolldelay="140" scrollamount="20"> <img src="imagens/borboleta.gif"> </marquee> |
Humm!... Só pra ficar mais bonitinho vou colocar umas florzinhas de fundo. Estou criando uma janela com o comando <iframe> e dentro dessa janela estou jogando o arquivo flores1.htm com um background. A aplicação do comando <iframe> está explicado em outra seção mas mesmo assim aqui vai a sintaxe:
|
<center> <iframe src="flores1.htm" width="650" height="90" scrolling="auto" frameborder="1"> </iframe> </center> |
E aqui está o resultado. Ficou bonito, né?