Workshop de HTML

helldanger1 · Jun 17, 2009

Uma série de artigos práticos para aprender a trabalhar com HTML. Oferece pequenos truques de construção para que os mais novatos possam começar a dominar a linguagem.

helldanger1 · Jun 17, 2009

Contato com navegante

Aprenda os mecanismos que você tem ao seu alcance para se comunicar com o visitante de suas páginas. Desde o correio até livros de visitas...

Por Miguel Angel Alvarez - Tradução de JML

Uma das tarefas mais importantes e trabalhosas do ciclo de vida de uma página web é a sua manutenção, para conservar a web, sua audiência e sua importância com o tempo. Porém, manter uma web não é só publicar novos conteúdos e atualizar os anteriores, entre estas tarefas se encontra uma que é fundamental: proporcionar mecanismos para que os visitantes possam entrar em contato com você, e, obviamente, responder a cada uma das mensagens recebidas.
Um dos graves erros em uma web é que não se ofereça a oportunidade de entrar em contato com o criador ou responsável de conteúdos, mas ainda pior do que isso é se as mensagens não são respondidas, pois se cria uma grande sensação de vazio.

Existem muitas formas de nos comunicarmos com o navegante, vamos ver os mecanismos que estão mais ao nosso alcance para que não falte a possibilidade de se comunicar com seus visitantes em nenhuma de nossas webs.

Ordenamos os seguintes pontos por ordem de facilidade em seu uso, assim os primeiros são mais acessíveis e os seguintes mais difíceis de conseguir, embora muitas vezes melhores.

helldanger1 · Jun 17, 2009

Correio eletrônico

O que nunca deve faltar em uma página é sua simplicidade e utilidade, porque é a forma mais adequada em muitos casos... Sempre temos que incluir um endereço de correio, facilmente localizável, para que os visitantes possam se comunicar. É facilíssimo fazer um link com um endereço de correio:

Há que colocar um link convencional, mas seu atributo HREF vai encaminhado a um endereço de correio com a palavra mailto:.

<A HREF="mailto:colabore@web.com">Escreva-me</A>

Ficaria assim: Escreva-me

Colocar um link em um endereço de correio em um editor de HTML, para os que trabalham com ferramentas de edição, também é parecido a como se faz com os links normais, mas com estas diferenças.
Formulário de contato

Podemos utilizar um formulário para nos comunicarmos. No formulário nosso visitante pode introduzir seus dados e a consulta ou sugestão que deseja realizar, para logo, clicando em um botão, possa enviar por correio eletrônico à pessoa de contato todos os dados.

As vantagens de um formulário em relação a um endereço de correio podem ser:
Ajudar ao visitante a compor a mensagem, e assim, incentivar sua comunicação.
Forçar que o visitante introduza certa informação que possa ser importante.
Oferecer mais mecanismos de comunicação, cada um escolherá o que mais lhe convenha.

Vejamos brevemente agora como construir um formulário em uma página web.

Um formulário coloca-se entre as etiquetas <form> e </form>. Temos que incluir nesta etiqueta vários atributos que são:
ACTION="mailto:colabore@web.com" Para indicar a que endereço de correio enviar os resultados do formulário.
METHOD="post" Para que o envie por método post, essencial para envia-lo por e-mail.
ENCTYPE="text/plain" Porque o que vamos enviar é texto.
Resumindo, a etiqueta do formulário ficaria assim:

<FORM ACTION="mailto:colabore@web.com"
METHOD="post"
ENCTYPE="text/plain">

</FORM>

helldanger1 · Jun 17, 2009

Agora vejamos como colocar campos no formulário, pelo menos os mais fáceis:

Campos de texto
Utiliza-se a etiqueta <INPUT> desta maneira:
<INPUT TYPE="text" NAME="nome_do_campo" SIZE=10>
O atributo TYPE indica que é um campo de texto. NAME é o nome do campo, tem que descrever o que existe dentro. SIZE lhe permite ajustar o tamanho do campo.
A etiqueta NÃO tem fechamento com </INPUT>
Areas de texto

Utiliza-se a etiqueta <TEXTAREA> desta maneira:
<TEXTAREA NAME="nome_do_campo" COLS="20" ROWS="4>
Texto inicial dentroda textarea< BR></TEXTAREA>
O atributo NAME é o nome do campo. COLS indica o número de colunas da área de texto e ROWS de filas.
Botão de envio

Utiliza-se a etiqueta <INPUT> desta maneira:
<INPUT TYPE="submit" VALUE="Enviar agora!">
O atributo TYPE indica que é um botão submit (de envio). VALUE indica o que vai escrito dentro do botão.
A etiqueta NÃO tem fechamento com </INPUT>, NÃO precisa lhe dar um nome com NAME

Na se esqueça de colocar antes de </FORM> o botão de envio e então, já terá o formulário pronto para seus navegantes mandarem seus pedidos e perguntas.

helldanger1 · Jun 17, 2009

Lista de correio

Uma lista de correio é um endereço de e-mail oa qual ao enviarmos um correio nos faz chegar a todos os integrantes de uma lista de endereços.

Com um exemplo estará mais claro. Se todos os integrantes de uma lista, quando quiserem conversar entre eles, ao invés de mandar um correio eletrônico a todos eles, o mandam a um servidor e este se encarrega de que chegue a mensagem a todos da lista, este servidor seria uma lista de correio ;-)

As listas de correio podem ser muito úteis para que os usuários que cheguem às páginas se inscrevam, e nós, como administradores do website mandaremos correios eletrônicos periodicamente à lista para manter-lhes informados de notícias, mudanças no site e tudo aquilo que quisermos enviar.

Para ter uma lista de correio em sua página você pode contratar o serviço com um provedor, mas é muito mais fácil e econômico usar uma lista de correio das que oferecem em vários servidores. Para montá-la em sua web, simplesmente há de seguir as instruções que lhe dá o provedor.
Livro de visitas

Agora veremos algum mecanismo adicional para se comunicar com o cliente, mas neste caso, não se trata tanto de uma comunicação entre eles e você, e sim, uma forma de comunicação de todos para todos.

No caso do livro de visitas está bem claro, é uma ferramenta onde os visitantes podem deixar as mensagens que desejarem para que estas fiquem expostas na web e assim, não lê somente você, mas também todos os demais usuários de suas páginas. Isto dá agilidade à página, dinamismo e faz com que os visitantes se sintam integrados no projeto, colaborem e voltem para ver suas "digitais". As vantagens são muitas.

Na maioria dos casos não vamos dispor da tecnologia, nem conhecimentos para implementar esta tecnologia, mas existem no mercado vários livros de visitas personalizáveis e integráveis dentro de webs simples, ou seja, você não tem que fazer nada, eles lhe proporcionam todos os recursos e explicações para montar um livro de visitas em sua web.

helldanger1 · Jun 17, 2009

Fóruns de discussão

Em algum caso podemos passar a uma opção mais avançada do que nos oferecia o livro de visitas. Estes são os Fóruns de discussão, onde as pessoas podem opinar sobre temas e outros navegantes responder-lhes, etc. É muito útil e interessante. Não cabe já destacar suas múltiplas vantagens e hits que receberemos, pois tratam-se de temas de interesse.

Se não tivermos a infra-estrutura suficiente para montar nós mesmo o fórum, podemos utilizar os serviços, muitas vezes gratuitos, de outros servidores.
Conclusão

Vimos um montão de idéias para incluir em nossas páginas, todas elas com o objetivo de estabelecer contato com o visitante, embora afinal passemos um pouco do tema planejado inicialmente, incluímos muito mais do que meras ferramentas de marketing. Porque não se esqueça que tudo isso é para tornar-se conhecido e fazer com que os visitantes lembrem com alegria e retornem muitas vezes.

helldanger1 · Jun 17, 2009

Avaliar uma web

Vemos um interessante workshop de HTML onde oferecemos ao visitante de nossa web um formulário rápido para avaliar nossa web.

Por José Manuel Cerrato Bartolomé

O objetivo deste workshop de HTML consiste em colocar um pequeno formulário para que as pessoas que visitam nossa web possam pontua-la rapidamente. Trata-se de um exemplo de recurso simples que pode ser obtido utilizando somente um pouco de HTML. A simplicidade é bela e compatível com os distintos navegadores, vejamos então o efeito que pretendemos conseguir.
Valora esta web

Como pode ser visto à direita, o formulário nos propõem que pontuemos a página e ao lado temos um botão para mandar a tal pontuação ao webmaster do site.
Nota: este exemplo só funciona se o visitante tiver configurado o correio eletrônico em seu computador.

A pontuação será enviada por correio eletrônico à pessoa que se indique no formulário, tal como veremos mais adiante. Se um usuário não tiver correio eletrônico configurado em seu computador com o Outlook Express, Netscape Composer, Eudora ou outro parecido, a mensagem não poderá ser enviada.

Pode acontecer da mensagem ser criada, mas não ser enviada se não tivermos e-mail... sendo assim, poderia ser encontrada provavelmente na caixa de saída do programa de correio.

Para criar um sistema que não funcione através do correio eletrônico do visitante e conseguir inclusive que os que não têm correio possam pontuá-la, necessitaremos utilizar algum recurso avançado como CGI, ASP ou PHP, mas isso é outro assunto.

Não pretendemos explicar neste artigo os formulários em HTML, já que em há descrições suficientes sobre seu funcionamento. Para aqueles que não conhecem os formulários recomendamos a leitura da seqüência de artigos sobre este tema no manual de HTML.

helldanger1 · Jun 17, 2009

O código deste exemplo é tão simples como este:

<form action="mailto:xxx@tudominio.br" method="post" enctype="text/plain">
Pontue esta web<br>
<select name="Pontuacao">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<input type="submit" value="Enviar">
</form>

Pode-se copiar e colar na página o que desejar. A única linha que teria que ser modificada é a da etiqueta <FORM>, onde temos que mudar o endereço de e-mail do atributo action pelo endereço onde quisermos que chegue o correio com a pontuação.

Se quisermos que o correio chegasse a eu@meudominio.com colocaríamos nosso atributo action assim:

action="malito:eu@meudominio.com"

Isso é tudo. Espero que o recurso tenha sido interessante e prático para vocês.

helldanger1 · Jun 17, 2009

Fundos de imagem em HTML

Explicamos asuntos relativos al uso de fondos de imagen en HTML y ofrecemos algún ejemplo ilustrativo.

Por Miguel Angel Alvarez - Tradução de JML

No presente workshop vamos tratar de explicar assuntos relativos ao uso de fundos de imagem em HTML. Indicaremos a maneira de utilizá-los corretamente, pois os fundos são capazes do pior e do melhor, ou seja, podem ser tão bonitos e atraentes como feios e incômodos, e claro, trata-se de ficarmos com a parte boa.

Colocar um fundo em uma página web

Para incluir um fundo em uma página web necessitamos utilizar o atributo background na etiqueta <BODY>, ao qual atribuímos o nome do arquivo que desejarmos utilizar como fundo. Se o arquivo se encontra em um diretório diferente da página web, necessitaremos incluir a rota do arquivo, tendo sempre em conta de utilizar uma rota relacionada ao arquivo .html para que se conserve a rota no caso de mudarmos o website de localização.

<body background="fundo.gif">

O que conseguimos com isto é que o arquivo fundo.gif se mostre na página como fundo. Por padrão, a imagem de fundo aparece como um mosaico, repetindo-se ao longo de todo o espaço da página.

Fundo em outros elementos

Não só a página pode ter um fundo, como também podemos colocar nas tabelas ou nas células, por exemplo. Utiliza-se o mesmo atributo background, embora aplicado a outras etiquetas.

<table background="fundo.gif">

<td background="fundo.gif">

helldanger1 · Jun 17, 2009

Conselhos para utilizar fundos

Vejamos agora alguns conselhos que deveriam ser seguidos para uma correta utilização dos fundos de imagem.

1) Colocar um fundo de cor parecido à imagem
Quando colocamos um fundo em uma página devemos utilizar o atributo bgcolor para atribuir uma cor de fundo parecido ao predominante na imagem que compõe o mosaico. Possivelmente, muitos de nós já acessamos a uma página na qual não se via nada e, quando se carrega o fundo, nos damos conta que sim que havia texto na página, o que ocorre é que não se via porque não se contrastava com a cor de fundo branco por padrão. É possível que neste caso a imagem de fundo fosse escura e que o texto fosse branco e, até que não se carregue a imagem de fundo, não se pode ver nada. Este problema se agrava se o fundo não chega a se carregar por algum erro de transferência do arquivo ou porque a imagem foi apagada do servidor acidentalmente.

2) Que os textos possam ser bem lidos
Os fundos estão para tornar a página mais vistosa, e não para molestar na leitura dos textos. É um erro muito comum usar um fundo que logo molesta ao ler os textos. Já é bastante difícil ler uma web em um monitor como para ainda por cima ter um texto que não contraste bem com o fundo que está sendo utilizando. Neste caso cabe indicar também que é muito importante que as combinações de cor do texto e do fundo sejam agradáveis, já que há certas cores que, embora contrastem bem, provocam umas combinações difíceis de ler, por exemplo, um fundo com uma cor azul predominante e o texto em vermelho.

3) Os fundos de imagem de cor homogêneo
Se utilizarmos um fundo de imagem, temos que procurar fazer com que se utilize na imagem cores da mesma gama. Se a imagem tiver partes escuras e claras, que cor colocaremos o texto para termos a certeza de que se leia bem sempre? Se o texto é claro não contrastará bem com as partes do fundo que também são claras. Igual passará se colocarmos o texto com uma cor escura, que não contrastará bem com as partes escuras do fundo.

4) Ter cuidado com as distintas definições de tela
É importante saber que um visitante pode acessar a uma página com um tamanho de janela variável. Às vezes um fundo se comporta bem com uma definição dada, mas não com outras maiores. Ocorre muitas vezes que se utiliza um fundo e se vê o resultado em uma janela de 800x600 ou 1024x768. Logo acessa uma pessoa com uma definição de 1280x1024, ou superior, e vê a página incorretamente porque se realiza um mosaico com o fundo que o desenvolvedor não levou em conta. Para entender este ponto, pode ser interessante acessar a esta página, que se verá bem em uma definição de 800x600 porém, mal se for maior.

helldanger1 · Jun 17, 2009

5) Fazer um fundo suficientemente grande
É importante que o tamanho do arquivo que vamos utilizar como fundo tenha um certo tamanho. Se utilizarmos como fundo uma imagem de poucos pixels, nosso computador trabalhará muito para criar o mosaico repetindo centenas ou milhares de vezes essa imagem. Entretanto, se o fundo tivesse sido um pouco maior, para realizar o mosaico teria trabalhado muito menos.

Definitivamente, teremos que ter muito cuidado ao utilizar os fundos, visto que podem dificultar muito, a apresentação da informação na página de uma maneira clara.

Se desejarmos utilizar um fundo que possa dar algum problema, uma idéia para certificarmos que os textos se visualizem corretamente é colocar todo o conteúdo da dentro de uma tabela e atribuir-lhe uma cor de fundo com o atributo bgcolor.

<html>
<head>
<title>Fundo de prova</title>
</head>

<body background="fundo1.jpg" bgcolor="FFCECB">

<table width="550" bgcolor=FFCECB align=center>
<tr>
<td>

<h1 style="color:000000">Provando...</h1>
<br>
Este texto se lê bem porque tem um fundo plano.
<br>

</td>
</tr>
</table>

</body>
</html>

helldanger1 · Jun 17, 2009

Como proteger o código fonte de uma web

Com um simples Script podemos tornar as coisas mais difíceis a todos aqueles que andam baixos de inspiração e pretendem roubar nosso código para fazer suas próprias.

Por Fabio Núñez Iturriaga

Depois de tentar com muitos métodos, scripts e outros, chegamos à conclusão de que nenhum método é perfeito e de que todos estes scripts que dizem que protegem o código fonte na verdade o único que fazem é bloquear o botão direito do mouse e do teclado.

De todos estes scripts e para quem gosta de usá-los, este é o que parece mais simples e melhor:

<body oncontextmenu="return false" onkeydown="return false">

Simplesmente há que colocar estes atributos no body e o botão direito do mouse e o teclado ficarão inutilizados, sem que saia estas incômodas janelas dizendo, "o botão direito foi inabilitado" ou "as imagens estão protegidas"....

Estes scripts talvez protejam as imagens de usuários inexperientes que simplesmente sabem navegar pela internet e pouco mais. Mas não impedirão um usuário experiente de conseguir copiar estas imagens em seu computador. Salvar estes scripts é tão fácil como fazer: "Arquivo>Salvar como..." e salvar a página completa com todas suas imagens.

No caso de que o script só proteja o botão direito, inclusive podemos selecionar a imagem e fazer Ctrl+C e logo cola-la em qualquer editor gráfico.

E mesmo se tudo isso não funcionasse bem, ainda existe sempre a possibilidade de imprimir a tela, com o botão: "Print Screen SysRq" e logo Ctrl+V em qualquer editor gráfico.

helldanger1 · Jun 17, 2009

Desabilitar a barra de imagens do Internet Explorer

Neste breve tutorial veremos de que forma podemos desabilitar a barra que aparece no IExlorer 6 ao situar o mouse sobre uma imagem.

Por Juliana Monteiro Lázaro

Quantas vezes reclamamos ou ao menos desejamos que não aparecesse aquela incômoda barra no Internet Explorer (versão 6) quando passamos o ponteiro por cima de uma imagem? Pois a solução é extremamente simples...

Imagem que mostra a barra emergente.

O único código que temos que incluir no cabeçalho de nossa página é uma simples etiqueta META que automaticamente desabilitará a barra mencionada acima.

Também dispomos de um comportamento de Dreamweaver que nos poupará de ter que escrever a tal META. Mas ao ver como é reduzida, provavelmente você deixará de fazer o download do tal comportamento. De qualquer forma, para todos aqueles que desejem tê-la, poderão adquirir na web de Macromedia Exchange.

Esta é a etiqueta que você deverá incluir entre <HEAD> e </HEAD>

<meta http-equiv="imagetoolbar" content="no">

helldanger1 · Jun 17, 2009

Veremos um pouco melhor em um pequeno exemplo de código HTML, de forma que não fique nenhum tipo de dúvida.

Ex:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//SP">
<html>
<head>

<title>:::: Minha página web::::</title>

<META NAME="TITLE" CONTENT="Nome">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="Description" content="descrição de nossa web.">
<meta name="Keywords" content="palavras relacionadas com o conteúdo de nossa web.">
<meta name="author" content="Nome da empresa.">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 31 Dec 2054 00:00:01 PST">
<meta name="reply-to" content="correio eletrônico da empresa">
<meta name="owner" content="Propietário da empresa.">
<META HTTP-EQUIV="VW96.OBJECT TYPE" CONTENT="Tipo de web">
<META NAME="RATING" CONTENT="Geral">
<meta name="robots" content="index, follow">
<META NAME="REVISIT-AFTER" CONTENT="7 days">
<meta http-equiv="imagetoolbar" content="no">
</head>
<body>

O conteúdo de nossa web.

</body>
</html>

Lembre-se que não importa onde você vai colocar a etiqueta META, desde que esta se encontre sempre entre o <HEAD> e </HEAD>.

helldanger1 · Jun 17, 2009

Tabela com esquinas arredondadas

Prático artigo de HTML no qual criamos uma tabela com cor de fundo cujas esquinas estão arredondadas.

Por Juliana Monteiro Lázaro

Tabela com esquinas arredondadas

Corpo da tabela. Podemos colocar o texto que desejarmos, que a tabela crescerá em altura suficiente para contê-lo.

Nesta artigo prático de HTML vamos criar uma tabela com as esquinas arredondadas, que poderá servir para destacar alguma informação no texto ou criar uma barra de links lateral um pouco mais vistosa. Abaixo aparece uma tabela como a que pretendemos conseguir.

O exemplo não é nada complexo. Simplesmente cria-se uma tabela normal, na qual colocamos em cada uma de suas esquinas um gráfico que faz a forma arredondada. Os gráficos que utilizamos nesta ocasião têm uma parte com cor e outra transparente. A parte com cor é a que desenha a borda arredondada e a parte transparente deixa ver a cor de fundo que tivermos colocado na tabela. As imagens podem ser vistas em seguida. Para salvá-las utilize o botão direito do mouse em cima da imagem e selecione a opção que põe "Salvar imagem como..." ou algo parecido.

helldanger1 · Jun 17, 2009

Em nosso exemplo, criamos imagens que têm a parte não transparente de cor branca, que corresponde com a cor de fundo da página onde queremos colocar a tabela. Se quisermos colocar uma tabela como esta sobre um fundo diferente do branco, deveríamos criar uns gráficos que tenham a mesma cor que o fundo, no lugar do branco.

Tabela com esquinas arredondadas

Esta tabela tem outra cor de fundo, mas foi criada com as mesmas imagens que a tabela anterior.

O bom de que a outra cor utilizada na imagem seja transparente é que a tabela que criamos pode ter a cor de fundo que desejarmos. Esta outra tabela abaixo foi criada com as mesmas imagens do exemplo e, como se pode ver, tem outra cor de fundo que a anterior.

Criação da tabela

Agora vamos estudar o código HTML que precisamos para criar esta tabela com esquinas arredondadas. Provavelmente com outro código HTML mais simples também se poderia construir.

A tabela que utilizamos contem várias células dispostas em duas filas e três colunas. Nas células das esquinas da tabela colocamos as quatro imagens que fazem o efeito das bordas arredondadas. Para certificarmos de que a colocação das imagens é a correta -procurando que as imagens fiquem coladas nas esquinas da tabela-, utilizamos os atributos que servem para alinhar o conteúdo da célula: align para o alinhamento horizontal e valign para o vertical.

Na célula do centro é onde colocamos o corpo da tabela, com todo o texto que queremos que vá dentro, suas imagens, etc. O único detalhe a assinalar é que expandimos a célula central para que ocupe duas filas, com rowspan=2.

<table width=300 cellspacing=0 cellpadding=0 bgcolor="#333399" border=0 align="right">
<tr>
<td width=11 valign="top" align=left><img src="images/sup-izq.gif" width=11 height=11></td>
<td rowspan=2>
<font color="#ffffff" face="verdana,arial,helvetica" size=1>
<br>
<b>Tabela com esquinas arredondadas </b>
<br>
<br>
Corpo da tabela. Podemos colocar o texto que desejarmos, que a tabela crescerá em altura suficiente para contê-lo.
<br>
<br>
</font>
</td>
<td width=11 valign="top" align=right><img src="images/sup-der.gif" width=11 height=11></td>
</tr>
<tr>
<td width=11 align=left valign=bottom><img src="images/inf-izq.gif" width=11 height=11></td>
<td width=11 align=right valign=bottom><img src="images/inf-der.gif" width=11 height=11></td>
</tr>
</table>

Se alguém deseja utilizar este código para criar suas próprias tabelas, deverá modificar unicamente poucos dados:

*Texto do corpo da tabela
*Color de fondo de la tabela

helldanger1 · Jun 17, 2009

Tabela com as esquinas arredondadas, tipo 2

Outro exemplo de tabela com as esquinas arredondadas, neste caso com uma borda de um pixel, também arredondada.

Por Miguel Angel Alvarez - Tradução de JML

Vamos ver como realizar com HTML uma tabela com as esquinas arredondadas e com uma pequena borda de um pixel. É um exemplo de tabela com as bordas arredondadas como qualquer outra, de fato, já vimos um exemplo sobre este assunto em nosso anterior artigo Tabela com esquinas arredondadas.

Como sempre, o melhor para se dar conta do que pretendemos construir é vê-lo num exemplo e ao lado destas mesmas linhas podemos vê-lo.

Corpo da tabela

Aqui poderemos escrever o que desejarmos, que a tabela crescerá o suficiente para conter todo o texto que colocarmos, inclusive imagens.

Espero que pareça um desenho interessante, embora certamente há melhores...

Neste caso, utilizaremos as seguintes imagens, que podemos salvar clicando sobre elas com o botão direito do mouse e selecionando "Salvar imagem como...".

Criação da tabela

Vamos ver o código HTML necessário para criar este exemplo. Temos que levar em conta que o código poderia haver sido criado de várias maneiras, embora nós apresentamos a que consideramos mais versátil.

Construímos a tabela com as correspondentes etiquetas de tabelas de HTML. Como consideração cabe assinalar que as etiquetas das imagens que são colocadas dentro das células têm que estar junto da etiqueta </TD>, que se utiliza para fechar a tabela. Se não for assim, nosso exemplo pode ficar desenquadrado.

O tamanho da tabela em largura pode ser definido perfeitamente no atributo width da etiqueta <TABLE>. A altura será a suficiente para que caibam todos os conteúdos da tabela.

Este é o código em questão:

<TABLE WIDTH=300 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/tabela_01.gif" WIDTH=6 HEIGHT=6></TD>
<TD background="images/tabela_02.gif">
<IMG SRC="espaco.gif" WIDTH=1 HEIGHT=6></TD>
<TD>
<IMG SRC="images/tabela_03.gif" WIDTH=6 HEIGHT=6></TD>
</TR>
<TR>
<TD background="images/tabela_04.gif">
<IMG SRC="espaco.gif" WIDTH=6 HEIGHT=1></TD>
<TD bgcolor=E8E8E8 valign=top>
Corpo isto é o Corpo isto é o Corpo isto é o Corpo...
</TD>
<TD background="images/tabela_06.gif">
<IMG SRC="espaco.gif" WIDTH=6 HEIGHT=1></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/tabela_07.gif" WIDTH=6 HEIGHT=6></TD>
<TD align=center background="images/tabela_08.gif">
<IMG SRC="espaco.gif" WIDTH=1 HEIGHT=6></TD>
<TD>
<IMG SRC="images/tabela_09.gif" WIDTH=6 HEIGHT=6></TD>
</TR>
</TABLE>

helldanger1 · Jun 17, 2009

Frames sem bordas

Artigo de HTML no qual explicamos como realizar frames sem bordas e nos navegadores mais habituais.

Por Miguel Angel Alvarez - Tradução de JML

Neste artigo de HTML explica como realizar uma declaração de frames sem bordas. Para os leitores que não conhecem o que são os frames ou como se definem seria necessário estudar o manual de HTML, pelo menos os capítulos dedicados aos frames.

Vimos que existem muitos atributos que servem para eliminar as bordas das janelas, talvez tantos que tenha ficado pouco claro qual seria a forma exata para excluir todos os frames de uma só vez. os frames de una vez. Acontece que é feito igual em todos os navegadores, apesar de que incluindo os atributos adequados para cada navegador estaremos certos de que as bordas não serão vistas nunca.

Em Netscape, simplesmente necessitamos especificar o atributo border="0" no primeiro frameset. Esta opção também funciona nas versões mais modernas de Internet Explorer.

Em Internet Explorer, devemos especificar dois atributos também no primeiro frameset. frameborder="0" e framespacing="0".

Se colocamos os três atributos de uma vez no primeiro frameset estaremos certos de que não existem bordas, pelo menos nos navegadores mais habituais.

A etiqueta frameset com os três atributos ficaria assim:

<frameset cols="90,*" border="0" frameborder="0" e framespacing="0">

Exemplo prático

Vamos escrever por completo uma declaração de frames sem bordas, para que tudo fique suficientemente claro.

<html>
<head>
<title>Definição de Frames</title>
</head>
<frameset cols="200,*" border="0" frameborder="0" e framespacing="0">
<frameset rows="170,*">
<frame src="pagina1.html">
<frame src="pagina2.html">
</frameset>
<frame src="pagina3.html">
</frameset>
</html>

helldanger1 · Jun 17, 2009

Caixa elegante e simples com HTML

Como fazer com HTML, de maneira simples e prática, uma caixa para destacar parte do conteúdo de uma página web.

Por Miguel Angel Alvarez - Tradução de JML

Ao construir uma página web com HTML, é muito habitual querer destacar um pedaço de texto que se deseja remarcar. Muitas vezes utilizamos tabelas e lhe damos uma borda ou um fundo para destacar seu conteúdo, mas nem sempre ficam muito atraentes. Neste simples workshop apto para principiantes, vamos mostrar a maneira de fazer uma caixa bonita com poucos recursos.

Trata-se de utilizar tabelas, mas vamos decorá-las de uma maneira simples, mas que pode ser nova para os menos experientes. À princípio, o melhor será darmos uma olhada nos exemplos que vamos construir.

Como pode ser visto no exemplo, vamos construir três caixas diferentes, embora muito parecidas. Estas caixas têm uma caixa de 1 píxel e cores diferentes para o fundo da célula com o cabeçalho e o corpo da caixa. As pautas de construção são as seguintes:

Criar uma tabela com uma cor de fundo como desejarmos e com espaço entre células de 1 píxel e espaço entre a borda da célula e seu conteúdo de 3 pixel (estes últimos atributos são cellspacing="1" cellpadding="3")
A tabela terá duas células. Uma com o cabeçalho da tabela, onde colocaremos o título da caixa e a outra, com o conteúdo propriamente dito. Ambas células terão estilos próprios. O título deve estar mais destacado, sendo colocado em negrito ou em uma cor que contraste bem com o texto e o corpo com uma cor mais tênue, para ajudar na leitura do texto.
As cores de fundo das células devem ser atribuídas tal como quisermos que apareça na tabela. Assim, o fundo da tabela somente poderá ser visto no espaço que há entre células, que havíamos indicado que era um píxel.

helldanger1 · Jun 17, 2009

Primeira tabela

A primeira tabela tem este código:

<table width="280" cellspacing="1" cellpadding="3" border="0" bgcolor="#1E679A">
<tr>
<td><font color="#FFFFFF" face="arial, verdana, helvetica">
<b>Caixa curiosa com HTML</b>
</font></td>
</tr>
<tr>
<td bgcolor="#ffffcc">
<font face="arial, verdana, helvetica">
Este é o interior da caixa. Esperamos que seja elegante... é muito simples.
</font>
</td>
</tr>
</table>

A cor do texto da célula com o titular é branco, para que contraste com a cor de fundo da célula, que é neste caso, a mesma que a da tabela, pois não foi indicada nenhuma cor na célula.

A célula com o corpo da tabela foi colocada de cor amarelo pálido.

Segunda tabela

A segunda tabela que realizamos simplesmente tem uma mudança no tipo de letra utilizada para os textos, que fizemos menor. Ademais, foi atribuída uma cor de fundo para o cabeçalho com o titular da tabela, para que seja diferente do fundo atribuído para toda a tabela.

O código da segunda tabela é o seguinte:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#165480">
<tr>
<td bgcolor="#5FA6D7">
<font size=1 face="verdana, arial, helvetica">
<b>Caixa curiosa com HTML</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#ffffcc">
<font face="verdana, arial, helvetica" size=1>
Este é o interior da caixa. Esperamos que pareça elegante... é muito simples.
</font>
</td>
</tr>
</table>

Workshop de HTML

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP