Workshop de HTML

[helldanger1]

Como vimos, esta página está composta por um cabeçalho e um corpo de página. Para criar o cabeçalho e o corpo utilizaremos tabelas independentes. Fazemos isto porque com duas tabelas separadas se simplifica o exemplo, ou seja, por comodidade e porque se torna mais fácil de desenhar. Não obstante, como a distribuição de colunas e filas no cabeçalho e corpo neste exemplo é diferente, necessitamos utilizar tabelas independentes. Porém, a razão mais importante de colocar cabeçalho e corpo nas tabelas diferentes é que em alguns navegadores, quando há desenhos com tabelas, até que não se carregue o código da tabela inteira não se mostra nada. Se tivéssemos toda a página colocada na mesma tabela, o usuário não veria nada até que não se terminasse de carregar toda a página em seu navegador. Se separarmos as tabelas de cabeçalho e corpo conseguiremos que o cabeçalho da página se carregue e se mostre mais rapidamente e logo, embora demore bastante em carregar o resto da página com todo o corpo, pelo menos o usuário vê o cabeçalho e pode saber que a página está sendo toda carregada.

Neste caso, o cabeçalho é bastante típico, com o logotipo, um banner e uma barra de navegação horizontal. O código pode ser como o seguinte.

<table width="778" cellspacing="1" cellpadding="3" border="0" bgcolor="#000000" align="center">
<tr>
<td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clássico" border="0"></td>
<td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
<td colspan=2 bgcolor="#ffffff" background="fundohorizontal.gif">

<font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
</td>
</tr>
</table>

Se observarmos, o cabeçalho tinha um contorno negro. Isto o conseguimos de maneira similar a como explicamos em um artigo anterior de HTML: Caixa elegante e simples com HTML. Simplesmente colocamos uma cor de fundo preta à tabela, logo fazemos com que os campos estejam separados (cellspacing) de um píxel e definimos em branco a cor de todos os campos. Assim, a separação entre campos aparecerá em preto e os campos em branco. Neste caso definimos uma margem entre a borda do campo e o conteúdo (cellpadding) de três pixels, para que o conteúdo dos campos não se grude na borda.

A barra de navegação horizontal ocupa toda a largura do cabeçalho, por isso tem um colspan=2. Colocamos um fundo degradê para melhorar um pouco o desenho.

Outra coisa destacável é a largura da tabela, que fizemos de 778 pixels. Poderíamos ter feito um desenho que ocupasse toda a largura da página, porém criei um desenho não fluido com largura fixa. Este tipo de design em minha opinião é mais simples do que ficar bem. O tamanho de 778 pixels é porque é o máximo que se pode colocar que caiba em definições de tela de 800 x 600. Podemos conhecer mais sobre designs fluidos no artigo Páginas fluidas. Também temos outro artigo onde podemos saber mais sobre definições de tela.

 

[helldanger1]

Por sua vez, o corpo tem uma distribuição de três colunas. O código da tabela que englobaria todo o corpo é o seguinte:

<table width="778" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width=150 valign="top">
<!--NAVEGADOR LATERAL ESQUERDO-->
</td>
<td width=10></td>
<td width=484 valign="top">
<!--CORPO PRINCIPAL-->
</td>
<td width=10></td>
<td width=124 align=center valign="top">
<!--LATERAL DIREITO-->
</td>
</tr>
</table>

A técnica para fazer esta tabela é diferente que a tabela do cabeçalho. Esta tabela não tem a borda preta, para não recarregar demais o desenho da página. Porém, o mais importante é que as margens e o espaço entre as células (cellspacing e cellpadding) foram eliminados ou visto a zero. Então, os espaços que tem que haver entre as células foram colocados com células vazias de 10 pixel. Faço isto assim porque deste modo me resulta mais simples de calcular os espaços da tabela e porque assim podemos definir margens que não afetam a todas as células da tabela, e sim só as que necessitam.

A tabela tem três células onde se colocarão conteúdos e duas células com espaço ou margens para separar os três campos onde estão os conteúdos. Dentro de cada célula colocamos os conteúdos necessários. Na primeira irá a barra de navegação da esquerda, na célula do centro o corpo principal e no terceiro campo irá a lateral direita que utilizamos para colocar publicidade.

As larguras de cada célula, definidas pelo atributo width, são bastante típicas neste tipo de estruturas de três colunas. Ademais, podemos ver que todas as células têm o atributo valign="top" para que os conteúdos se situem na parte de cima da tabela.

O conteúdo de cada uma das células do corpo inclui mais código HTML, inclusive outras tabelas aninhadas. Em geral, podemos colocar em cada coluna o código HTML que necessitarmos com qualquer etiqueta, tendo em conta que a largura disponível está limitada à largura da célula.

 

[helldanger1]

Recarregar ou endereçar a outra página com HTML



Código HTML em etiquetas META para atualizar uma página ou fazer um re-encaminhamento a outra página automaticamente.

Por Miguel Angel Alvarez - Tradução de JML




Nas etiquetas META, como provavelmente saberemos, se indicam informações sobre as palavras-chave e descrições dos documentos, autoria e propriedade, métodos de contato, etc. Porém, também podemos indicar outras ações ao navegador que podem ser úteis para os desenvolvedores, como indicar uma atualização ou um re-endereçamento. Neste artigo, veremos como fazê-lo.

A etiqueta META que se faz para indicar ao navegador uma atualização ou um re-endereçamento tem a seguinte forma:

<META HTTP-EQUIV="REFRESH" CONTENT="5;URL=http://www.web.com">

Como vemos, o atributo HTTP-EQUIV se indica uma informação ao navegador como se fosse enviado no cabeçalho do http, ou seja, a instrução enviada em uma etiqueta META que utiliza HTTP-EQUIV é equivalente se esta tiver enviado no cabeçalho do http. Neste caso, que temos igualado a REFRESH, é para indicar se queremos fazer uma atualização da página.

No atributo CONTENT indicamos as características da atualização. O valor associado contém duas partes, primeira o tempo em segundos de espera para fazer atualização ou o re-endereçamento e a URL a que enviar o navegador.

Página para fazer um re-endereçamento com HTML

O código HTML da página completo para fazer um re-endereçamento seria o seguinte:

<html>
<head>
<title>Re-endereçar o navegador a outra URL</title>
<META HTTP-EQUIV="REFRESH" CONTENT="5;URL=http://www.web.com">
</head>
<body>
Esta página muda em 5 segundos pelo portal de Web.com
</body>
</html>

 

[helldanger1]

Página que se atualiza ela sozinha ao passar uns segundos

Agora veremos também um exemplo de página que se atualiza ou se recarrega a cada segundo que passa. Nesta página, para comprovar que se atualiza e se recarrega seu conteúdo, utilizamos um pouco de javascript para mostrar a hora, minutos e segundos atuais, assim em cada recarregamento poderemos ver que os segundos vão se incrementando.

<html>
<head>
<title>Atualizar a URL</title>
<META HTTP-EQUIV="REFRESH" CONTENT="1;URL=refrescar.html"> </head>
<body>
Hora:
<script>
minhaData = new Date()
document.write(minhaData.getHours() + ":" + minhaData.getMinutes() + ":" + minhaData.getSeconds())
</script>
</body>
</html>



Neste caso, na META para definir a atualização especificamos que se realize cada segundo e que chame à URL refrescar.html. Obviamente, o arquivo HTML tem o nome refrescar.html, de modo que o recarregamento chamará à mesma página todo o tempo.

 

[helldanger1]

Transparência em formatos gráficos para web GIF e PNG


Como fazer imagens transparentes para a web, com formatos GIF e PNG, para eliminar os incômodos halos.

Por Miguel Angel Alvarez - Tradução de JML




Neste workshop de HTML mostraremos um exemplo de transparência em formatos gráficos GIF e PNG, comprovando suas diferenças e as vantagens que nos traz PNG de 24 bits para eliminar as "auréolas" ou também chamados os halos. O que veremos é um exemplo muito simples, porém muito interessante para ilustrar um modo de fazer transparências que sempre ficam bem, sobre qualquer fundo.

Os halos são as bordas que às vezes saem nas imagens que têm transparências, que são como uma borda de cor que rodeia as silhuetas dos desenhos da imagem. Mesmo que você não saiba o que é um halo, certamente já viu em diversas páginas web que têm halos em suas imagens, efeitos que ficam muito mal e dão má imagem do desenvolvedor da página.

Os dois formatos que suportam transparência, que podemos utilizar para o desenvolvimento de uma página web, são o GIF e PNG. O formato PNG é muitas vezes desconhecido pelos desenvolvedores, ou simplesmente ignorado, porque anteriormente não era compatível com todos os navegadores. No momento atual, nenhum navegador tem problemas para mostrar os arquivos PNG, porém como este formato não se começou a utilizar desde o princípio muitos dos desenvolvedores não o usam habitualmente.

 

[helldanger1]

Utilizaremos neste workshop as duas imagens a seguir:

GIF

PNG-24 bits


Como podemos comprovar temos duas imagens, nos dois formatos mencionados: GIF e PNG. Podemos ver que neste caso mostram poucas diferenças, ou melhor, nenhuma à primeira vista. As duas se vêem igualmente bem, embora realmente não pareça que seja uma imagem transparente porque realmente as colocamos sobre fundo branco.

Vejamos estas duas imagens sobre um fundo de outra cor:

Neste outro caso tudo vai bastante bem, as diferenças são quase inapreciáveis. O fundo de cor rosa é bastante claro e não permite ver realmente o que queremos mostrar no exemplo. Portanto, vamos mostrar estas duas imagens sobre um fundo mais escuro, que nos servirá para ver o efeito desagradável que começa a acusar o formato GIF.

Nesta amostra podemos ver os famosos halos, no formato GIF. São essas silhuetas brancas que aparecem ao redor dos desenhos da imagem.

 

[helldanger1]

Por que ocorre isso?

A borda da figura está suavizada, por isso os píxels ao redor desta têm tonalidades que não são diretamente a cor da figura nem o transparente do fundo. Quando fizermos esta imagem com Photoshop, ou qualquer outro programa de design gráfico, aconteceria isto com o suavizado, porque ele sempre tende para uma cor de fundo, neste caso o branco. A não ser que tirássemos o suavizado, mas tiraríamos os halos, assim a forma teria uma cor e logo diretamente apareceria o transparente, porém isso posso garantir que isso fará com que a imagem perca bastante qualidade.

Em GIF, com um pouco de trabalho podemos consertar, simplesmente com nosso programa de design gráfico fazemos a figura sobre outro fundo, da cor que necessitarmos. Ou seja, desenhamos a forma diretamente sobre um fundo da mesma cor que a da onde pensamos colocar. Logo, marcamos como transparente a cor de fundo. O suavizado permanecerá, tendendo a essa cor ao invés do branco. Porém claro, sempre temos o problema que a imagem só nos servirá para fundos da tonalidade para a qual prepararmos, ou uma muito similar.

Com o formato PNG-24 bit não temos esse problema, a imagem continua transparente. Isto é uma vantagem muito interessante, porque nos servirá sempre, independentemente do fundo sobre o qual a colocarmos.

Agora vamos ver o exemplo sobre um fundo negro:

Este é o pior dos casos, onde o halo resulta mais patente. É porque tínhamos criado a imagem sobre fundo branco e o suavizado branco ao redor da figura contrasta exageradamente sobre o negro de fundo.

Enquanto isso, o formato PNG continua se comportando bem com a transparência. Inclusive, se colocarmos a imagem sobre um fundo que tenha uma textura ou qualquer outro desenho, o PNG continua sendo visto perfeitamente.

Conclusão sobre transparência GIF e PNG

Não se deve subestimar PNG. Ao contrário, queremos ressaltar suas vantagens, na hora de tratar a transparência, com respeito ao formato GIF. As transparências que conseguimos com PNG são muito mais versáteis porque poderemos utilizá-las sobre qualquer fundo que necessitarmos.

 

[helldanger1]

Colocar vídeo em uma página web através de YouTube



Uma forma muito simples de colocar um vídeo em uma página web é transferi-la a YouTube e logo incrustá-lo na página web por meio de um código HTML que eles proporcionam.

Por Luis Javier Alvarez




Para colocar vídeo em uma página web, uma das opções mais simples é transferi-lo a YouTube.com e linkar com o vídeo para que se mostre desde lá. Pode-se colocar um link que vá a YouTube diretamente ou um código HTML para que o vídeo se mostre dentro de sua própria página web.

Publicar vídeos em YouTube tem várias vantagens, entre as quais poderíamos destacar:
Seus vídeos não ocupam espaço em sua hospedagem web.
A transferência devida aos vídeos se encarrega o YouTube, por isso que não afetará ao seu servidor (em velocidade e largura de banda consumida) porque tenha muitos visitantes vendo vídeos e tampouco será cobrado nada a mais por passar de Gigas transferidos em seu hosting.
É extremamente simples transferir vídeos a YouTube e logo colocá-los em sua web. Não tem que se preocupar por quase nada em tudo que se refere aos formatos ou compatibilidade de seu vídeo com diversos tipos de navegadores.
Porém, nem tudo são vantagens, pois há alguns detalhes que não são tão bons:
A definição de seu vídeo é fixa. Quando você transfere o vídeo, YouTube o processa para ajustá-lo a seus tamanhos e qualidade padrão.
Os vídeos que podem ser transferidos têm uma duração máxima de 10 minutos e 100 MB.
Seus vídeos são públicos (embora em YouTube pode-se restringir mais ou menos sua difusão).
É uma possível saída de visitantes de sua página: pode acontecer de alguns usuários irem a YouTube para continuar vendo vídeos ou qualquer outra coisa.
Sendo assim, se lhe interessa as vantagens anteriores e não lhe importa padecer certas desvantagens, como tornar seu conteúdo público em outro website ou não lhe importa que o tamanho dos vídeos seja menor que o que possivelmente tenha seu original, pois YouTube é sem dúvida uma grande opção.

YouTube - Broadcast Yourself.

 

[helldanger1]

Para transferir um vídeo a YouTube necessita-se estar registrado como usuário. Registrar-se é muito simples e não requer nenhum conhecimento especial. Uma vez registrado, você receberá um e-mail com um link para confirmar sua conta, que serve para que eles saibam que seu e-mail lhe pertence e foi escrito corretamente. Sem confirmar seu e-mail não lhe permitem transferir vídeos.

Uma vez registrado e confirmado seu e-mail, acessamos à nossa conta e poderemos transferir um vídeo através do botão "Enviar um vídeo" ou também através do link "Conta" que aparece em cima à direita e logo "Meus vídeos" e logo clicando no botão "enviar um vídeo" que aparece à esquerda.

Então, basta seguir os passos para colocar o vídeo. Oferece-se primeiro uma descrição e logo, envia-se o arquivo com seu vídeo. Demorará uns minutos em carregar o vídeo dependendo do tamanho que tiver e logo outros minutinhos para YouTube processá-lo para ajustá-lo a seu formato próprio.

A partir de então, você terá o vídeo em sua conta e poderá acessá-lo através do link "Meus vídeos".

Para conseguir o pedaço de código que tem que colar no HTML de sua página, você tem que ir a sua conta, logo a "meus vídeos" e logo abrir a janela de edição da informação do vídeo, através do botão "Editar informação de vídeo". Então, aparecem vários campos e um abaixo de tudo com o código que tem que copiar e colar no HTML de sua página, no lugar onde quiser que saia o vídeo. Tal código será algo parecido a isto:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/EtLjq3Ocs6w"></param><embed src="http://www.youtube.com/v/EtLjq3Ocs6w" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

Com este pedaço de código se mostrará seu vídeo com os controles de YouTube para colocá-lo em funcionamento, deter a reprodução, controlar o volume, etc.

 

[helldanger1]

Notas adicionais sobre transferir vídeos a YouTube:

A imagem que aparece à princípio no vídeo pode ser selecionada ao editar as informações do vídeo. Por padrão, já na maioria dos casos o primeiro fotograma, porém logo podemos selecionar outro fotograma se desejarmos.

As mudanças nas imagens iniciais levam umas horas, portanto terá que ter paciência se tiver mudado a imagem. Às vezes, não aparece a imagem inicial do vídeo e em seu lugar sai uma imagem padrão. Em alguns minutos ou horas poderá ver que YouTube se atualiza e lhe permitirá selecionar a foto fixa que desejar. Porém, em qualquer caso informam que pode demorar até 6 horas em se atualizar.

Logo, nas informações do vídeo, pode-se escolher inclusive o lugar onde se realizou a gravação.

Resumindo, com YouTube podemos facilmente começar a distribuir conteúdos multimídia, ao alcance de todos.

 

[helldanger1]

Como fazer uma transparência com GIF sem halos



Como fazer uma imagem com formato GIF que tenha transparência e suavizado, porém sem que pareçam halos.

Por Miguel Angel Alvarez - Tradução de JML




Os halos são efeitos pouco desejáveis que tem o fundo transparente, geralmente em formato GIF. O que ocorre com os halos que aparece uma linha de cor ao redor da silhueta da imagem. Esta linha pode ser escura ou clara. Se for escura e a colocarmos sobre um fundo escuro, não se verá o halo e tudo irá bem. Mas se for escura e a colocarmos sobre um fundo claro teremos o mencionado efeito de halo.

Em formato GIF, sempre que a silhueta da imagem tiver a borda suavizada, vamos sofrer o efeito de halo. Agora também, se o halo tiver uma tonalidade similar ao fundo onde estamos colocando a imagem, não o veremos e o resultado será bom. Por isso, às vezes as imagens GIF vêm preparadas para colocar sobre fundos claros ou escuros. Se a colocamos sobre um fundo com uma tonalidade que não lhe corresponde sairá silhueta rodeando a imagem, ou seja, aparecerá o famoso halo.

Por exemplo, aqui temos uma imagem que tem um halo.

O halo é essa pequena borda escura que há ao redor da silhueta do círculo e do caracol. Este halo aparece porque esta imagem GIF transparente está preparada para colocar sobre um fundo escuro. De fato, aqui temos a prova do bem que se veria a imagem sem o halo se a colocamos sobre um fundo preto.

Referência: Publicamos outro artigo com detalhes sobre os formatos gráficos GIF e PNG e os halos: Transparência em formatos gráficos para web GIF e PNG.

 

[helldanger1]

O suavizado provoca os halos

Enquanto a imagem tiver um suavizado existirá um halo. Se o suavizado da imagem estiver preparado para um fundo claro e a imagem se coloca sobre um fundo claro, não se verá o halo. Porém, se a imagem tem um suavizado tirando a claro e se coloca sobre um fundo escuro, o halo aparecerá. Ou seja, sempre temos que colocar a imagem sobre um fundo parelho ao que tivermos preparado.

Se não tivermos suavizado não sairá o halo, porém o efeito será sensivelmente pior, em muitos dos casos. Na imagem seguinte fizemos o mesmo desenho, porém sem suavizado.

Acho que para qualquer pessoa estará claro que o resultado tem pior qualidade. O halo desapareceu, mas se nota o pixelado ao redor da imagem.

Fazer um suavizado da cor desejado para evitar o halo

Agora vamos mostrar a maneira de conseguir um suavizado sem que apareça o halo. Vamos trabalhar com Photoshop, embora cada qual fará um processo similar em seu programa de design gráfico preferido.

Começamos com uma imagem com o tela de cor que desejarmos como fundo. Ou seja, colocamos o fundo da mesma cor da do fundo da web.

Logo, fazemos o desenho que quisermos

A seguir fazemos um "Salvar para Web", no menu Arquivo de Photoshop, para salvar a imagem passando por um quadro de diálogo que nos vai permitir realizar uma série de ações para selecionar a transparência.

 

[helldanger1]

Na janela de Salvar para web temos que fazer trÊs passos. (Sempre ter em conta que queremos salvar a imagem em formato GIF, que se indica nas opções que há à direita. Pois se estamos salvando com outro formato como JPG, não poderemos selecionar transparência porque não tem. Além disso, temos que ter marcado o checkbox para permitir transparência.)
Primeiro selecionamos a ferramenta conta-gotas.
A seguir clicamos na cor que quisermos que seja transparente, que será o fundo da imagem.
Por último apertamos o botão para atribuir as cores selecionadas ao transparente. Com isso, conseguimos que a cor selecionada se mostre como transparente.
Este processo pode ser repetido se quisermos que várias cores da imagem se mostrem como transparente.

O resultado é a seguinte:

Observaremos que a imagem, sobre fundo branco, aparece com um halo azul, porém quando colocamos a imagem sobre um fundo que tenha a tonalidade azul, o halo desaparecerá de nossa vista.

 

[helldanger1]

Contador de visitas com a procedência dos usuários



Apresentamos ClustrMaps, um contador para saber a procedência dos visitantes de sua web.

Por Miguel Angel Alvarez - Tradução de JML




Queremos falar sobre ClustrMaps, um serviço inovador de contador, que tem a particularidade que serve para conhecer a procedência dos visitantes de sua web. É um serviço gratuito que você pode incorporar em qualquer site, sem praticamente conhecimentos HTML nem nenhum conhecimento de programação.

O sistema oferece uma página web que pode ser acessada através da URL: ClustrMaps - Hit counter map widget and tracker shows locations of all visitors to any site - free

Estão em fase Beta, o que quer dizer que ainda estão desenvolvendo ou melhorando o sistema, porém já podemos incorporá-lo em nossa página web. Para conseguir um contador temos que nos registrar em tal página. Não nos pedem nenhuma informação pessoal, salvo a URL onde vamos incorporar o sistema e nosso e-mail. Enviarão a senha para acessar aos serviços ao nosso correio eletrônico. Uma vez recebida, podemos acessar à página através do endereço de nosso site e a senha.

E uma vez dentro nos darão um código fonte que podemos copiar e colar na página. Têm várias versões do código, que podemos escolher a que melhor se ajuste a nossas necessidades. Têm uma versão inclusive para utilizar se nossa página está hospedada em um servidor como MySpace.

Nós colocamos o primeiro dos códigos que provêem. O interessante é que este código seja colocado em todas as páginas de nosso web site, no lugar onde quisermos que apareça o contador, para que contabilize as entradas de usuários de qualquer página, não só no portal.

Logo, podemos marcar algum comportamento do sistema, como que conte as visitas de todo o ano ou então de um só dia.

Veremos que não só nos diz o país que vêem os visitantes, como também a localização específica de sua cidade. Tem um sistema de pontos que, quanto maior o tamanho do ponto, indica que o número de usuários que vêem desse lugar é maior.

 

[helldanger1]

Animação HTML simples com marquee



Utilizamos a etiqueta marquee para realizar uma animação simples em uma página web. Como animar uma imagem ou fazer texto em movendo só com HTML.

Por Miguel Angel Alvarez - Tradução de JML




Este artigo serve para as pessoas que trabalham somente com HTML ao fazer páginas web e que querem incorporar um tipo simples de animação em seus sites. Uma solução fácil para fazer uma animação com HTML é fazer uso de Marquee. Há pouco tempo recebemos um e-mail de Carlos López Schmidt no qual nos sugeria um truque para animar imagens em páginas web utilizando marquee. Como não tínhamos nenhuma explicação sobre a etiqueta HTML <MARQUEE>, nos dedicamos a escrever este texto que dá algumas especificações e conselhos mais detalhados sobre a etiqueta. De qualquer forma, há que agradecer a Carlos a inspiração para escrever estas linhas.

<MARQUEE> é uma destas etiquetas não padronizadas de HTML, que suportam os navegadores mais comuns, porém que não estão compreendidas dentro das especificações de HTML. Serve para animar elementos dentro da página. Teoricamente. permite que o conteúdo que colocamos dentro da etiqueta, seja texto, fotografias, ou as duas coisas, se desloque horizontalmente pela página.

A etiqueta marquee pode nos servir para fazer animações em páginas simples, sem nenhum conhecimento de linguagens de programação nem de outras complicações semelhantes. Para os que só conhecem HTML é uma ferramenta perfeita se desejam fazer com que um elemento da página se mova.

Porém atenção, embora esteja comentando este truque para mover texto pela página ou imagens, temos que utilizar o marquee com muita prudência, visto que tem desvantagens:
Marquee não está compreendido nos padrões HTML.
Utilizar Marquee pode ter problemas de acessibilidade, ou seja, pode ser difícil de ler para determinadas pessoas com deficiências.
O fato de animar elementos de uma página favorece o dinamismo e ajuda a chamar atenção sobre determinadas mensagens ou imagens, porém, se utilizar marquee em muitos lugares pode provocar confusão e cansar o usuário.
Para utilizar marquee, simplesmente colocamos dentro da etiqueta os conteúdos que queremos que se movam, já sejam texto, imagens ou qualquer outro tipo de conteúdo. Algo como isto:

<marquee>texto que se move</marquee>

Porém, também poderíamos colocar algo como isto:

<marquee>
<table align="center" width="100"border="1">
<tr>
<td>Esta tabela se desloca, com todo o conteúdo da tabela</td>
</tr>
</table>
</marquee>

 

[helldanger1]

Marquee suporta uma série de atributos para modificar seu comportamento ou seu aspecto. São os seguintes:

WIDTH
Largura do marquee. Se não marcamos altura, se colocará na seguinte linha, como em um parágrafo distinto. Se marcamos uma largura, a marquee tentará se mostrar na mesma linha onde a tivermos colocado. Se não houver espaço para ela se realizará a conseguinte quebra de linha para mostrá-la um pouco mais abaixo.

DIRECTION
Para onde queremos que se desloque o conteúdo do marquee. Os possíveis valores são "LEFT" e "RIGHT".

BEHAVIOR
É o comportamento do marquee, dentre os possíveis: SCROLL (o comportamento por padrão) indica que tem que fazer o deslocamento sempre em um mesmo endereço e ALTERNATE, que indica que o deslocamento se faz a um lado e ao outro de maneira alternada.

SCROLLDELAY
É o tempo em milésimos de segundos que tem que passar entre cada mudança da posição do que está se deslocando. Ou seja, quanto maior for o valor, mais milésimos de segundo demorará o marquee em se mover. O valor padrão é 85, porém, se por exemplo, colocarmos um valor 500 o marquee mudará de estado (deslocará o conteúdo) a cada meio segundo.

SCROLLAMOUNT
É a quantidade de pixel que tem que se deslocar o conteúdo do marquee cada vez que se move. Quanto maior scrollamount, mais se deslocará o marquee em cada movimento e portanto a animação será mais rápida. O valor padrão é 6. Podemos provar colocando um valor maior e veremos que o movimento será mais "a golpes".

LOOP
O número de ciclos que irá se mover o texto ou o que for que tiver dentro do marquee. Este atributo só funciona em Internet Explorer. Por padrão é INFINITE, que quer dizer que se deslocará todo o tempo sem parar. Porém, por exemplo se colocarmos um valor como 3, quer dizer que o marquee só realizará três ciclos ou movimentos e logo parará.

BGCOLOR
A cor de fundo do marquee. Aceita o nome de uma cor HTML ou de um valor RGB de tal cor.

HSPACE e VSPACE
Estes dois atributos servem para definir o número de pixel que deve aparecer entre o marquee e outros conteúdos da página, em horizontal e vertical.

Alguns exemplos de marquee:

<marquee width=200 direction=right>
Marquee à direita e com largura
</marquee>

<marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que se move</marquee>

 

[helldanger1]

Declaração DOCTYPE em documentos HTML



Estudo da declaração do tipo de documento HTML, que se especifica na declaração DOCTYPE ao princípio do código.

Por Jose A. Molina




Neste artigo nos centraremos na declaração DOCTYPE dos documentos HTML.

O W3C (World Wide Web Consortium: World Wide Web Consortium - Web Standards), encarregado da criação dos Standard webs, define que os arquivos HTML, XML, XHTML devem ter uma declaração de tipo DOCTYPE que deve fazer referência a uma das três definições do tipo de documento que existem.

Esta declaração deve ser a primeira linha de nosso documento e é necessária para dizer ao navegador que versão de HTML é a que se usa na página. Se não se faz, o navegador processará a página em modo Quirks (modo de compatibilidade) podendo não interpretar corretamente o código da página.

A DTD (definição do tipo de documento) é a estrutura regulamentar, ou seja, os elementos e atributos que estão disponíveis para cada tipo de documento. Para HTML 4.01 (as versões anteriores não são recomendáveis devido a que não são totalmente compatíveis com as Folhas de Estilo), existem 3 tipos de DTD:
HTML 4.01 transitório

O HTML 4 transitório inclui todos os elementos e qualidades de HTML 4 Strict, porém agrega qualidades "presentational", elementos desaprovados ou elementos obsoletos. Chama-se Transitional porque está pensado como transição para HTML 4 estrito.

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">

HTML 4.01 Frameset:

Esta é uma variante de HTML 4 transitório para os documentos que utilizam Frames (molduras).

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\" \"http://www.w3.org/TR/html4/frameset.dtd\">

HTML ESTRITO

Se declararmos este DTD, o navegador passará a agir em cumprimento dos padrões (Standards compilam-se). Isto implicará que só possam se usar as etiquetas de HTML 4.01. Este é o modo recomendado pelo W3C, já que é compatível com o CSS e pode ser interpretado corretamente por todos os navegadores, tornando muito mais fácil o passo de nossos documentos ao XHTML que muito possivelmente tenda a substituir ao HTML nos próximos anos.

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">

 

[helldanger1]

Etiquetas para ressaltar texto em HTML



Algumas etiquetas que podem servir para ressaltar texto em HTML, como sublinhado, riscado, cabeçalhos e formatos de texto de parágrafos, como pedaços de código, etc.

Por Miguel Angel Alvarez - Tradução de JML






HTML tem diversas ferramentas para ressaltar texto que vamos ver neste artigo, que oferece alguns detalhes práticos, embora também teóricos, da linguagem de etiquetas para a criação de páginas web. Para ver outros artigos práticos consultar o Workshop de HTML.

Como devemos saber, HTML é uma linguagem que serve para criar páginas web. É especialmente indicada para escrever os conteúdos das páginas, embora também tenha uma boa gama de etiquetas para formatar texto e apresentá-lo de uma maneira atrativa ou simplesmente clara. Já publicamos um completo manual de HTML, com explicações detalhadas sobre a criação de páginas web, porém agora vamos ver um compêndio de etiquetas que servem especialmente para formatar e destacar texto, pois algumas delas não chegamos a vê-las no manual, por se tratar de etiquetas pouco utilizadas.
Nota: Antes de continuar é importante assinalar que a formatação de texto agora se faz com CSS, que permite trabalhar de uma maneira muito mais detalhada, cômoda e completa com o estilo das páginas web.

 

[helldanger1]

Pois vejamos as etiquetas para destacar texto:

<B> o <STRONG>
As mais conhecidas e utilizadas são os negritos, que simplesmente colocam o texto com uma largura maior, como mais ressaltado.

Este é o efeito de um negrito

<I> o <EM>
As etiquetas itálicas ou cursivas, que servem para fazer que o texto se incline a um lado.

Este texto está em itálico ou cursivo

<U>
Esta etiqueta serve para que se sublinhe o texto, aparecendo uma linha por debaixo do mesmo. Embora em HTML 4 esta etiqueta tenha sido marcada como obsoleta ou não incluída nas especificações, todos os navegadores continuam entendendo-a.

Este texto está sublinhado

<STRIKE>
Esta etiqueta não é muito conhecida e nem muito utilizada. Serve para que o texto apareça riscado, ou seja, com uma linha por cima do texto. Esta etiqueta é muito útil quando atualizamos uma informação que aparece em uma página e a substituímos por outra. Ao invés de eliminar a anterior informação podemos riscá-la, para que os leitores possam comprovar que a página se encontra sempre atualizada e em revisão. Ocorre o mesmo que à etiqueta <u>, que na especificação de HTML 4 não está incluída. Entretanto, todos os navegadores a entendem perfeitamente.

Este texto está riscado

Cabeçalhos <H1> … <H6>
As etiquetas de cabeçalhos, ou headings em inglês, servem para destacar um texto, porém não podemos utilizá-las em qualquer caso, porque um cabeçalho sempre indica um titular ou a abertura de uma nova seção com um título. Temos que utilizá-las então para estruturar nossos documentos em seções e subseções e titular cada uma delas com um nível adequado. <H1> deveria ter um no cabeçalho principal do documento, porém logo poderíamos ter vários <H2> e dentro destes alguns <H3>, se é que os necessitamos. E assim sucessivamente.

 

[helldanger1]

Este é um cabeçalho h3

Formatos de parágrafo para destacar textos

Existem algumas etiquetas para destacar parágrafos inteiros e dar-lhes um formato específico. Alguns exemplos são:

<CODE> ou <KBD>
Serve para escrever um código fonte de uma linguagem de programação. Simplesmente coloca uma fonte de um tipo como courier, no qual todas as letras têm a mesma largura.

var InstrumentoMusical = new Class({
initialize: function(tipo){
this.tipo = tipo;
}
});

<TT>
Texto de Teletipo. Que cria um estilo como o das antigas máquinas de teletipo, que transmitiam informação com caracteres.

Este texto é tipo teletipo.
Pode-se observar o tipo de letra que se utiliza.
Em geral com courier.

<CITE>
Serve para colocar texto de citação, texto dito por outra pessoa. Esta etiqueta geralmente coloca o texto em cursiva, porém outros navegadores poderiam interpretá-la de outras maneiras.

Só séi que não sei nada!

<BLOCKQUOTE>
Esta etiqueta é bastante útil, porque cria uma margem tanto à esquerda como à direita, o que produz um efeito como se fosse um fragmento extraído de outro lugar ou que sirva para comentar a informação anterior.

Este é um parágrafo que se mostra com margens em ambos lados. Para que se vejam as margens tenho que escrever bastante texto. É uma boa utilidade para destacar um pedaço do texto.