Site de Webmasters: março 2012

terça-feira, 27 de março de 2012

A tag Marquee

Podemos dar movimento a textos, links, imagens e a outros elementos HTML, colocando-os em evidência quando a situação for conveniente, pois conforme orientamos, não é recomendado o uso excessivo deste recurso. Para a realização desta tarefa, contamos com a tag <marquee>, que é reconhecida e executada somente pelo navegador Internet Explorer da Microsoft, sendo ignorada pelos demais navegadores.

A tag <marquee> é utilizada em par, possuindo abertura e fechamento. Na parte referente a sua abertura, inserimos diversos atributos que controlam características do seu funcionamento.

A declaração básica da tag <marquee> é:
<marquee>elemento</marquee>

Vejamos agora, a descrição dos principais atributos da tag <marquee>:

(behavior)

Com este atributo, definimos o estilo de comportamento executado pela animação, podendo ser utilizado um entre os três valores disponíveis:

Behavior="scroll" - Este é o comportamento padrão utilizado pela tag >marquee<. Faz com que o elemento entre por um lado da tela e saia pelo outro, em um ciclo.

Behavior="slide" - Faz com que o elemento entre por um lado da tela e se desloque até o outro lado.

Behavior="alternate" - Faz com que o elemento se desloque de um lado para o outro da tela, em um ciclo.

(direction): Com este atributo, definimos para qual direção será movimentado o elemento:
Direction="left" - Da direita para a esquerda (direção padrão).
Direction="right" - Da esquerda para a direita.

(height): -Com este atributo, definimos em pixels ou em porcentagem da tela, a dimensão vertical que será reservada para a animação.

(width):Com este atributo, definimos em pixels ou em porcentagem da tela, a dimensão horizontal que será reservada para a animação.

(hspace): Com este atributo, podemos estabelecer uma margem horizontal externa à área da animação, onde o valor definido em pixels será assumido tanto pelo lado esquerdo como pelo lado direito.

(vspace): Com este atributo, podemos estabelecer uma margem vertical externa à área da animação, onde o valor definido em pixels será assumido tanto pelo lado superior como pelo lado inferior.

(align): Com este atributo, definimos o alinhamento vertical do elemento, dentro do espaço reservado para a animação. Podemos utilizar um entre os três valores:
Align="top" – Alinha à parte superior.
Align="middle" – Alinha ao centro (alinhamento padrão).
Align="bottom" – Alinha à parte inferior.

(bgcolor): Este atributo nos permite definir uma cor de fundo para a área reservada para a animação, utilizando o padrão RGB.

(loop): Com este atributo, podemos definir o ciclo de repetições que será aplicada a um comportamento estabelecido para a animação:

(Loop="3") – A animação executará o movimento estabelecido por três vezes.

Loop="infinite" – O ciclo de movimentos será executado ininterruptamente.

(scrollamount): Este atributo nos permite definir em pixels, o espaço para cada movimento realizado pelo elemento na animação.

(scrolldelay): Este atributo nos permite definir o tempo em milisegundos, para cada movimento realizado pelo elemento na animação.

Note que com os atributos (scrollamount) e (scrolldelay), podemos modificar conforme a nossa preferência, a velocidade do deslocamento feito pelo elemento na animação, pois quanto maior for o espaço utilizado para cada movimento, maior será a velocidade e quanto maior for o tempo utilizado para cada movimento, menor será a velocidade.

Caso necessário, podemos combinar estas duas variáveis de modo a atingir a velocidade que desejamos

domingo, 4 de março de 2012

A função meta

<head>
<meta name="description" content="Free Web tutorials"/>
<meta name="keywords" content="HTML,CSS,XML,JavaScript"/>
<meta name="author" content="Jorge Lucas"/>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-language" content="pt-BR" />
</head>

Onde a meta name:

description: Define a descrição da página.
keywords: Define as palavras-chaves que servirão para pesquisas dos Sites de Buscas.
author: Define o autor da página.

Sendo que essas meta robots são somente para os métodos de busca portanto não aparecem no corpo da página.

A tag meta http-equiv designa outros atributos como:

cache-control: Definida por:
- public: cache compartilhado com o público
- private: cache privada
- no-cache: cache não armazenada
- no-store: em cache, mas não arquivado
content-language: Definida por pt-BR, ou pt-PT, ou en-EN, etc.

Horizontal Rule

A Horizontal Rule ê uma tag que divide a página em seções, por exemplo, a tag <hr color='green'>:

Ela aceita os atributos shade ou noshade e color

Como <hr shade>:
Como <hr noshade>:
Como <hr>:
Como <hr color='green'>

Formatação Strike

A formatação strike (lê-se: straik) gera o seguinte formato: ~~Observe~~. E dessa forma ele corta as palavras. Pode-se obter esse efeito por meio da tag <strike> ou também por <s>.

Tabelas

Quando queremos inserir tabelas em uma página, utilizamos a tag <table> que deve ser acompanhada pelo atributo border.

Seus atributos são:

border: Define a espessura da borda da tabela. A espessura pode ser de 1 a 6.
bordercolor: Define a cor da borda da tabela. A cor pode ser definida por código hexadecimal ou pelo nome em inglês da cor.
bgcolor: Define a cor de fundo da tabela.
width: Define a largura das cêlulas em porcentagem

O cabeçalho da tabela é definido pela tag <th> do inglês table head.

Teste
1°linha 1°coluna	1°linha 2°coluna
1°linha 1°coluna	2°linha 2°coluna

O código é descrito a seguir:
<center> <table border='1' bordercolor='green' bgcolor='gray' width='50%, 50%'><th colspan='4'>Teste</th> <tr><td rowspan='2'>1°linha 1°coluna</td><td>1°linha 2°coluna</td></tr> </table> </center>

O atributo colspan define que a linha será mesclada em várias colunas, no caso 4 colunas.

sábado, 3 de março de 2012

Inserindo imagens

Para se inserir imagens usamos a tag img que vem da palavra inglesa image acompanhado de src que vem da palavra source.

O código resulta no seguinte:

legenda

Onde:

img src: Define o localização da imagem.
width: Define a largura da imagem na página.
height: Define a altura da imagem na página.
title: Define a legenda da imagem na página.