HTML códigos básicos Parte 4

por **Admin** Dom 12 Jun 2011 - 20:43

- Observações
Existem alguns tipos de arquivos que você pode querer disponibilizar para download, mas que os navegadores, em vez de fazer o download, abrem com programas que você já tenha instalado. Se você, por exemplo, colocar um link para um arquivo de vídeo ".avi" ou ".mpg", o navegador abrirá o programa para exibir esse vídeo. Para evitar isso, a melhor solução é compactar estes arquivos para o formato .zip. Assim, não haverá problemas. Além disso, a compactação do arquivo faz com que ele fique menor e o download demore menos tempo para ser feito.

Listas

Você usa listas para criar menus simples ou organização de temas e textos em sua página.

O HTML permite definir três categorias distintas de listas:
- Ordenadas,
- Sem ordenação
- E uma especial, chamada lista de definição.

- Listas Ordenadas
As listas ordenadas são numeradas e só usam um bullet (marca de · ) para demarcar cada uma das linhas.

Em listas ordenadas, o navegador se encarrega de colocar os números que referenciam cada lista. Uma lista ordenada deve ser envolvida pelo par <OL> ... </OL>.

Exemplo 1:

<OL>
<LI> Primeiro item de uma lista ordenada
<LI> Segundo item de uma lista ordenada
<LI> Terceiro item de uma lista ordenada
</OL>

Produz o seguinte resultado:
Primeiro item de uma lista ordenada
Segundo item de uma lista ordenada
Terceiro item de uma lista ordenada
- Listas sem Ordenação
Em listas não ordenadas é utilizado algum símbolo gráfico. Este tipo de lista será envolvido pelo par <UL> ... </UL>.

Para que o interpretador distinga um trecho de texto de uma lista deverá ser colocado no início de cada linha a diretiva <LI>, não havendo a necessidade de fechar esta tag com </LI>. Alguns exemplos:

Exemplo 2:

<UL>
<LI> Primeiro item de uma lista não ordenada
<LI> Segundo item de uma lista não ordenada
<LI> Terceiro item de uma lista não ordenada
</UL>

Produz o seguinte resultado:

Primeiro item de uma lista não ordenada
Segundo item de uma lista não ordenada
Terceiro item de uma lista não ordenada
- Listas Encadeadas
O próximo exemplo será de uma lista encadeada. Você pode encadear tantas listas quantas quiser, desde que envolva cada nível de encadeamento com <OL> ... </OL> ou <UL> ... </UL>.

<OL>
<LI> Primeiro item de uma lista encadeada.
<LI> Segundo item de uma lista encadeada.
<UL>
<LI> Terceiro item de uma lista encadeada.
<LI> Quarto item de uma lista encadeada.
</UL>
<LI> Quinto item de uma lista encadeada.
</OL>

Produz o seguinte resultado:

Primeiro item de uma lista encadeada.
Segundo item de uma lista encadeada.
Terceiro item de uma lista encadeada.
Quarto item de uma lista encadeada.
Quinto item de uma lista encadeada.
A numeração de listas ordenadas obedece ao nível de encadeamento das respectivas linhas.

Não é preciso usar a tag <P> para forçar quebras de linha, pois os comandos <UL> e <OL> forçam uma quebra de linha automaticamente.

Você pode incluir tags após cada tag de lista como uma tag para definir a fonte e o tamanho da letra ou a cor. Você pode combinar estas tags. Você também pode colocar links em cada lista, bastando apenas usar a tag de link logo após a tag de lista. Veja o exemplo:

<OL>
<LI><a href="#"> Primeiro item de uma lista ordenada com link </a>
<LI> Segundo item de uma lista ordenada sem link
<LI><a href="#"> Terceiro item de uma lista ordenada com link </a></OL>

O resultado é:

Primeiro item de uma lista ordenada com link
Segundo item de uma lista ordenada sem link
Terceiro item de uma lista ordenada com link
Inserindo Imagem de Fundo

Da mesma forma que é possível definir uma cor de fundo diferente para as páginas, pode-se colocar uma imagem como papel de parede. Com isso você pode criar um site muito mais bonito.
Vamos explicar como colocar uma imagem de fundo e também características básicas sobre as imagens de fundo.

A imagem de fundo é um atributo que colocamos dentro da Tag <BODY> que você aprendeu no início deste tutorial. Veja como fica:

<BODY BACKGROUND="nome da imagem">

Em "nome da imagem" você coloca o nome do arquivo de imagem que você deseja que seja o fundo. Ele pode ser do tipo GIF ou JPG.

- Características de imagens de fundo

Quando uma imagem é menor que o tamanho da tela, o navegador se encarrega de "repetir" essa imagem por toda a tela para que ela possa cobrir todo o espaço. Este é um ótimo recurso, pois você não vai ter que criar uma imagem do tamanho da tela. Isso faria a imagem ser muito grande e demorar muito a carregar. Além disso, há muita diferença entre os tamanhos das telas dos micros.

Letreiros e Linhas

- Letreiros
É possível colocar mais recursos em seu site. Um deles é o letreiro. A imagem fica "rolando" pela tela. Ele é feito com a tag "<MARQUEE>", porém este recurso só funciona no Internet Explorer. No Netscape, o texto ficará parado. Por isso analise bem quando valerá a pena usá-lo!

Veja como usar este recurso:

<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>

- Em "BEHAVIOR" você coloca o tipo de efeito, que pode ser "SCROLL" ou "SLIDE".
- Em "WIDTH" você pode definir o tamanho que o letreiro vai ocupar na tela. Veja :

<MARQUEE BEHAVIOR=SCROLL WIDTH=100%>Texto</MARQUEE>
Resulta em:

Texto
- Linhas

Com as linhas é possível que você crie separações entre textos e imagens. É muito simples criar uma linha. Basta incluir a tag <HR> (não é preciso fazer o fechamento dela).

Veja o resultado:

Atributos da linha:
Você pode definir atributos para a linha, como alinhamento, largura e cor. Veja como fazer: - WIDTH
Você define a largura da régua, em pixels ou em porcentagem. Veja:

<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço disponível na tela.

- ALIGN
Define o alinhamento da régua que pode ser "Left" (esquerda), "Right" (direita) ou "Center" (centralizado):

<HR WIDTH=100% ALIGN=RIGHT> insere uma linha de comprimento 100% (do espaço disponível na tela) e alinhada à direita.

- COLOR
Define a cor para a linha, este recurso não funciona no Netscape 4x. Para colocara cor, basta incluir ela na tag da seguinte forma:

<HR WIDTH=100% COLOR="#FFFFFF>

- NOSHADE
Define se a linha vai ter um efeito tridimensional. Se você não incluir este atributo, a linha terá o efeito tridimensional.

Exemplo combinando os atributos:

<HR WIDTH=100% ALIGN=RIGHT COLOR="#CC0000" NOSHADE>

Insere uma linha de comprimento 100% (do espaço disponível), alinhada à direita, sem efeito tridimensional (feito pelo atributo NOSHADE) e com cor vermelha.

Seg	Ter	Qua	Qui	Sex	Sáb	Dom
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31