-= Curso HTML - Listas, Textos em Movimento e Sons. =-
Marco Antonio de Queiroz


Listas.

*Obs* como em todo manual esclarece esses comandos, eu os estou
colocando aqui, pois não há nada nas listas que não se possa fazer sem
esses comandos específicos. Essas listas não são as listas que
encontramos dentro de caixas combinadas, onde temos de abri-las para
conhecer todo o conteúdo e escolher ou não um deles, são apenas
informações relacionadas listadas sequentemente.


CRIANDO LISTAS ORDENADAS.
Listas ordenadas são também denominadas listas numeradas, pois quando um
navegador  encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada
item utilizando números, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas são iniciadas pela TAG <OL>.
Cada item utiliza a TAG <LI>.
Finalmente,
</OL>.
Exemplo:
<OL>
<LI>É facil fazer uma Home Page
<LI>Tem que ter paciência
<LI>Bons recursos
<LI>E não exagerar em imagens
</OL>
Resultado:
1. É facil fazer uma Home Page
2. Tem que ter paciência
3. Bons Recursos
4.E não exagerar em imagens.


CRIANDO LISTAS NÃO ORDENADAS.
Listas não ordenadas são muito parecidas com as ordenadas. A única diferença
é o fato de elas não definirem explicitamente uma ordem, como é no caso as
numeradas. Eles são formados por símbolos, que podem ser bola, quadrado, e uma
bola vazia. Elas são iniciadas com a TAG <UL> e são respectivamente terminadas com
</UL>. E seus elementos são que nem as numeradas: com <LI> Exemplo:
<UL>
<LI>Internet
<LI>Intranet
<LI>BBS
</UL>
resultado:
? Internet
? Intranet
? BBS

ATRIBUTOS ADICIONAIS DO ELEMENTO UL
O Netscape introduziu o atributo TYPE também em listas ordenadas. Ele recebe
o tipo do marcador que será utilizado ao lado dos itens da lista, o qual pode ser
CIRCLE, SQUARE OU DISC.


Textos em movimento.

Vamos ver as distintas soluções para conseguir texto em movimento usando a
linguagem HTML.

Marquees.

Com a etiqueta MARQUEE fazemos um texto em movimento. Só é válido para o
Internet Explorer da Microsoft (no Netscape e webvox veremos como texto fixo).

A etiqueta básica é:

<MARQUEE> Texto em movimento </MARQUEE>

Acrescentando os atributos WIDTH e HEIGHT, ajustamos a largura e a altura.
Pode ser igual a um número de pixels ou um percentual da tela. Exemplo:

<MARQUEE WIDTH=50% HEIGHT=60> Texto em movimento que ocupa 50% de largura e
tem 60 pixels de altura </MARQUEE>

Acrescentando o atributo ALIGN, modificamos o alinhamento do texto ao redor.
Pode ser TOP (acima), MIDDLE (centro) ou BOTTOM (abaixo). O atributo
BGCOLOR="#xxyyzz", modifica a cor de fundo. Exemplo:

<MARQUEE WIDTH=50% HEIGHT=60 bgcolor="#0000aa" ALIGN=BOTTOM> Texto em
movimento com o fundo azul</MARQUEE>

Acrescentando o atributo BEHAVIOR, modificamos como o texto em movimento vai
aparecer na tela. Pode ser SCROLL (default), SLIDE ou ALTERNATE. Exemplo:

<MARQUEE BEHAVIOR=ALTERNATE> Texto que se move de um lado para outro, sem
desaparecer</MARQUEE>

Acrescentando o atributo DIRECTION, modificamos a direção do movimento do
texto. Por default é LEFT (esquerda). Podemos rolar para a direita com RIGHT.
Exemplo:

<MARQUEE DIRECTION=RIGHT> Texto que se move para a direita</MARQUEE>

Acrescentando o atributo SCROLLAMOUNT, modificamos a quantidade de
deslocamento do texto em movimento tem que avançar, expresso em pixels. Quanto
maior o número, mais rápido avança. Exemplo:

<MARQUEE SCROLLAMOUNT=50> Texto com saltos grandes</MARQUEE>

Acrescentando o atributo SCROLLDELAY, modificamos o tempo entre cada movimento
do texto, expresso em milisegundos. Quanto maior é o número, mais lento
avança. Exemplo:

<MARQUEE SCROLLDELAY=200> Texto com saltos demorados</MARQUEE>

Acrescentando o atributo LOOP, modificamos o número de vezes que o texto em
movimento vai aparecer. É infinito por default. Exemplo:

<MARQUEE WIDTH=30% HEIGHT=30 bgcolor="#0000FF" LOOP=2> Texto em movimento que
aparece duas vezes</MARQUEE>


                          Fontes dentro das Marquees

Para que um texto tenha uma determinada fonte, distinta da default do
navegador, devemos usar a etiqueta <FONT FACE>, por fora da etiqueta
<MARQUEE>.

<FONT FACE="Arial">

<MARQUEE WIDTH=30% HEIGHT=30 bgcolor="#0000FF"> Texto em movimento com a fonte
Arial</MARQUEE>
</FONT>


Como havíamos dito antes, esta etiqueta não está implementada pelo Netscape. O
texto será exibido de maneira fixa, sem movimento.
Normalmente, fazemos uso deste recurso porque queremos destacar algo
importante, porém no Netscape, passaria desapercebido. Uma maneira de
contornar este problema, ao menos em parte, é introduzir a etiqueta dentro de
uma tabela. Desta maneira, o texto estará de certa forma destacado no
Netscape e no Explorer. Além disso, o texto em movimento se verá com mais estética.
Exemplo:

<CENTER>

<TABLE BORDER=1>

<TR><TD>

<MARQUEE> Texto em movimento dentro da tabela</MARQUEE>

</TD></TR>

</TABLE>
</CENTER>

***

SONS em WAV e MID em sua página.

Uma página da Web pode ter sons incorporados, como fundo sonoro que se executa
automaticamente ao carregar a página ou como uma opção para que o usuário
ative.

                      Capacidade sonora dos navegadores:

Para poder escutar os sons é necessário dispor, como é lógico, de uma placa de
som. Porém isto não é suficiente, pois nem todos os programas navegadores
estão capacitados na mesma medida.

               Fundo sonoro para o Microsoft Internet Explorer:

<BGSOUND SRC="arquivo de som" LOOP=n>

* O arquivo de som pode estar no formato .mid ou .wav
* O atributo LOOP serve para especificar o número (n) de vezes que se deve
executar o arquivo de som. Escolhemos n=-1 ou LOOP=infinite, o som se
executará indefinidamente. Podemos omitir este atributo, porém o som será
executado uma única vez.

Exemplo 1:

A etiqueta para que se execute o arquivo amigo.mid duas vezes no Explorer:

<BGSOUND SRC="amigo.mid" LOOP=2>


Fundo sonoro para o Netscape:

A etiqueta básica para o Netscape é:

<EMBED SRC="arquivo de som" WIDTH=xxx HEIGHT=yy>

onde WIDTH é a largura e HEIGHT a altura do console que aparece e que tem
diferentes teclas (play, stop, pausa, etc.).

Dentro da etiqueta podemos adicionar os seguintes atributos opcionais:

AUTOSTART="true" (inicia automaticamente)
LOOP="true" (executa-se ininterruptamente)

Exemplo 2:

<EMBED SRC="amigo.mid" WIDTH=200 HEIGHT=55>

Exemplo 3:

Para conseguir a invisibilidade temos que acrescentar o atributo HIDDEN="true"

<EMBED SRC="imagine.mid" HIDDEN="true">

                   Fundo sonoro combinado Explorer/Netscape:

Exemplo 4:

<BGSOUND SRC="amigo.mid" LOOP=2>

<EMBED SRC="amigo.mid" HIDDEN="true">

Veremos agora um exemplo de fundo de som combinado, com execução infinita.

Exemplo 5:

<BGSOUND SRC="amigo.mid" LOOP=infinite>

<EMBED SRC="amigo.mid" AUTOSTART="true" LOOP="true" HIDDEN="true">


*Obs* Se estivermos em uma página onde haja uma música de fundo muito
alta e que esteja concorrendo com a altura do volume de nosso
sintetizador de voz, basta teclarmos "esc" que o som para imediatamente.

                               Exemplo prático

Partindo do exemplo anterior, vamos colocar fundo sonoro em uma das
páginas que já fizemos anteriormente. É evidente que o arquivo amigo.mid
tem de estar em nossa conta de ftp para que possa ser carregado na
página.