Como posso fazer um fomulário HTML? O HTML tem alguns elemento que ajudam na criação de formulários e na interação usuário-website. Esses elemento apresentam diversas formas de apresentar ao usuário informações que o site quer que o usuário preencha, selecione ou marque. Para quem programa em outras linguagens, os elementos HTML para fazer formulário são os padrões, de caixa de texto, seleção de um ou vários em uma lista, marcar opções e também escrever textos em várias linhas.

Vamos ver como fazer o elemento Form (tag <form>) do HTML, que é o elemento pai de todos os outros elementos de formulário HTML e no fim desse post teremos links para outros posts descrevendo os outros elementos HTML de formulário.

A Tag <form> – Elemento Form

A tag <form> é utilizada para fazer um formulário, nela define-se vários aspectos do formulário como para onde ele é enviado e que forma de envio é utilizado. Sempre que for fazer um formulário, todos os componentes do formulário devem ficar entre as tags <form> e </form>.

Vamos ver alguns atributos da tag de fomulário <form>.

Action

- O atributo action da tag <form> diz para onde o formulário deve ser enviado. O valor desse atributo é o endereço, estático ou relativo, de onde está a página que vai tratar esse formulário.

Method

- O method diz como enviar os dados do formulário, pode ser pelo método GET ou POST. Se você não especificar o método (atributo method), o padrão é o GET.

Para saber mais sobre os métodos GET e POST acesse Como Funciona os Métodos GET e POST – Diferenças.

Name

- Esse atributo nomeia o fomulário <form>, fazendo ele poder ser identificado por folhas de estilo e scripts (como Javascript). Esse atributo está em desuso, é utilizado somente para compatibilidade com códigos HTML antigos e os códigos HTML novos devem utilizar o atributo id.

Id

- Esse atributo pode ser utilizado em qualquer elemento HTML, ele define uma identificação única para o elemento HTML e deve ser único em um documento.

Target

- Indica onde o resultado da submissão do formulário HTML será exibida. Pode ser o nome de um frame (ou iframe, tag <iframe>), ou uma janela, ou uma dessas seguintes constantes:

– _blank – O resultado do formulário HTML é exibido em uma janela nova e sem nome. alguns navegadores deixam a opção para o usuário, de exibir esse resultado em uma nova aba.

– _self – Exibe a página referenciada na mesma página ou no mesmo frame que o link ou formulário está. Essa é a opção padrão.

- _parent – Exibe a página referenciada no frame pai do frame que o link ou formulário está. Se o frame não tiver frame pai, essa opção fica igual a opção “_self“.

- _top – Exibe a página referenciada na tela inteira do navegador, cancelando qualquer frame que a página anterior continha.

Enctype

- Esse atributo diz como o formulário HTML vai codificar os dados enviados. Se você não quiser enviar nenhum arquivo (upload) para o servidor, você pode não colocar esse atributo no seu formulário HTML (form), que ele vai ficar com o valor padrão, que vai funcionar normal.

Os valores para esse atributo podem ser:

- application/x-www-form-urlencoded – Esse é o valor padrão, se você quiser saber como os dados são codificados, entre em http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1.

- multipart/form-data – Se você quer fazer envio de arquivos (upload), via formulário HTML, você deve utilizar esse valor para o atributo Enctype. O valor padrão não é suficiente para enviar grandes quantidades de dados binários. Esse valor deve ser utilizado quando desejas enviar arquivos, dados binários ou caracteres não ASCII.

Para outros valores desse atributo, consulte: http://www.w3.org/TR/html401/types.html#type-content-type.

Accept

- Esse atributo define quais tipos de conteúdo (content types), que o servidor vai processar corretamente. Colocam-se os tipos separados por vírgula.

O atributo accept especifica que tipos de arquivos (<input type=”file”>), o navegador deve filtrar, para não enviar arquivos para o servidor que não seja correspondente a um dos tipos especificados nesse atributo.

Se você quiser uma lista dos tipos (MIME types) de conteúdo, entre em: http://www.w3.org/TR/html401/references.html#ref-MIMETYPES e em: http://www.iana.org/assignments/media-types/

Accept-charset

- Esse atributo define qual tipo de codificação de caracteres (charset) o servidor vai identificar os dados enviados pelo formulário HTML.

Para ver uma lista de codificação de caracteres (charset), acesse: http://www.w3.org/TR/html401/references.html#ref-CHARSETS.

Até a data de escrita desse post, e mesmo sem testar, o Internet Explorer não aceita esse atributo.

Exemplo de Formulário HTML (<form>)

Vamos ver um exemplo simples do uso de formulário HTML. O exemplo irá mostrar alguns campos, onde todos devem ser preenchidos para o envio do formulário. Se algum campo não for preenchido, aparece uma mensagem de erro no campo que não foi preenchido.

O nosso arquivo para executar esse código é o contato.php.

O Arquivo contato.php.

Nesse arquivo temos o nosso código PHP que processa o fomulário HTML quando ele é enviado.

<?php

$Enviar = $_POST["Enviar"];

if(strlen($Enviar) > 0) { // o formulário foi enviado
	$nome = $_POST["nome"];
	$email = $_POST["email"];
	$telefone = $_POST["telefone"];
	$departamento = $_POST["departamento"];
	$mensagem = $_POST["mensagem"];

	if((strlen($nome) > 0) && (strlen($email) > 0) && (strlen($telefone) > 0) &&
		(strlen($departamento) > 0) && (strlen($mensagem) > 0)) { // todos os dados preenchidos
		print("<strong>Dados do Formulário:<strong><BR>");
		print("<strong>Nome:</strong>".$nome."<BR>");
		print("<strong>Email:</strong>".$email."<BR>");
		print("<strong>Telefone:</strong>".$telefone."<BR>");
		print("<strong>Departamento:</strong>".$departamento."<BR>");
		print("<strong>Mensagem:</strong>".$mensagem."<BR>");
	}
	else { // nem todos os dados preenchidos, voltar para o formulário
		// dizer em msg de erro o que falta no formulário
		if(strlen($nome) == 0)
			$erro_nome = "<span class=\"msg_erro\">O campo Nome deve ser preenchido</span>";
		if(strlen($email) == 0)
			$erro_email = "<span class=\"msg_erro\">O campo Email deve ser preenchido</span>";
		if(strlen($telefone) == 0)
			$erro_telefone = "<span class=\"msg_erro\">O campo Telefone deve ser preenchido</span>";
		if(strlen($departamento) == 0)
			$erro_departamento = "<span class=\"msg_erro\">O campo Departamento deve ser preenchido</span>";
		if(strlen($mensagem) == 0)
			$erro_mensagem = "<span class=\"msg_erro\">O campo Mensagem deve ser preenchido</span>";

		// colocando o departamento selecionado como selecionado
		$$departamento = "selected=\"true\"";

		require("contatoform.php");
	}
}
else { // o formulário não foi enviado
	require("contatoform.php");
}

?>

Onde tem a chamada do array $_POST, pegamos os dados enviados do formulário, pelo método POST. Para pegar os dados enviados pelo método GET, utilizamos o array $_GET. No nosso exemplo, somente enviamos dados pelo método POST, então somente utilizaremos o array $_POST.

No array $_POST, temos todos os nomes  das variáveis que enviamos do formulário, como chaves do array (array associativo), e seus valores como os valores do formulário. Se temos um campo tipo text, com nome “email” (name=”email”), e enviamos esse formulário pelo método POST, teremos no PHP, o array $_POST["email"] com o valor do que foi escrito no campo email.

No nosso exemplo, se o formulário foi enviado, ele pega todos os valores que foram enviados e testa, para ver se algum está em branco (com número de caracteres igual a zero). Se todos estiverem preenchidos, o programa mostra eles na tela. Se algum não tiver sido preenchido, o programa testa para ver quais não foram preenchidos e seta uma mensagem de erro personalizada para cada campo não preenchido, e volta a mostrar o fomulário.

A linha que faz o campo selecionável (selecbox) ficar como estava quando foi enviado, merece um pouco mais de explicação. A linha é a seguinte: $$departamento = “selected=\”true\”";. Ela está simplesmente, colocando na variável com o nome do valor da variável $departamento, o valor “selected=\”true\”". Por exemplo, se a minha variável $departamento for igual a “comercial”, depois de executar essa linha, eu terei uma variável $comercial com o valor igual a “selected=\”true\”". Isso tudo para, no arquivo HTML, eu poder selecionar automaticamente o que foi estava selecionado no fomulário, no campo de seleção (selectbox). Vamos entender isso mais a frente.

O Arquivo contatoform.php.

Nesse arquivo tem o nosso formulário em HTML e um pouco de PHP para deixar o formulário mais dinâmico.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Exemplo de Formulário HTML/PHP</title>

	<link rel="stylesheet" type="text/css" href="estilo.css" />

</head>
<body>

<form name="form_contato" action="contato.php" method="post">
	<div>Nome: <?php echo($erro_nome); ?></div>
	<div><input name="nome" id="nome" type="text" value="<?php echo($nome); ?>" /></div>

	<div>Email: <?php echo($erro_email); ?></div>
	<div><input name="email" id="email" type="text" value="<?php echo($email); ?>" /></div>

	<div>Telefone: <?php echo($erro_telefone); ?></div>
	<div><input name="telefone" id="telefone" type="text" value="<?php echo($telefone); ?>" /></div>

	<div>Departamento: <?php echo($erro_departamento); ?></div>
	<div>
		<select name="departamento" id="departamento">
			<option value="">...</option>
			<option value="comercial" <?php echo($comercial); ?>>comercial</option>
			<option value="financeiro" <?php echo($financeiro); ?>>financeiro</option>
			<option value="juridico" <?php echo($juridico); ?>>jurídico</option>
			<option value="suporte" <?php echo($suporte); ?>>suporte</option>
		</select>
	</div>

	<div>Mensagem: <?php echo($erro_mensagem); ?></div>
	<div><textarea name="mensagem" id="mensagem" rows="5" cols="25"><?php echo($mensagem); ?></textarea></div>

	<div><input name="Enviar" value="Enviar" type="submit" /></div>
</form>

</body>
</html>/

Esse arquivo simplesmente define 5 campos e um botão de submeter o formulário, sendo que um desses campos é um campo selecionável (selectbox).

Todos eles tem no atributo value, um trecho de código em PHP, por isso precisamos que a extensão desse arquivo seja reconhecida como extensão para processamento do PHP. Esse trecho serve para definir no formulário HTML, caso de erro, o que o usuário já tinha escrito antes, porque sem isso o fomulário viria todo em branco novamente, e isso é ruim, pois se eu errei somente uma coisinha no fomulário, e ele voltar em branco, terei que preenche-lo todo novamente.

No caso do selecbox, eu tenho que fazer com que a seleção do usuário volte a aparecer se o formulário der erro, então coloco um trecho PHP exibindo uma variável com o nome do value da opção (option) em questão, para no script de processamento, ele tratar isso, como foi explicado no arquivo contato.php.

Podes perceber que tenho várias classes de folha de estilo no documento, e o documento também chama um arquivo de folha de estilo, que eu colocarei somente para mostrar a mensagem de erro em destaque.

O Arquivo estilo.css

Esse arquivo é bem simples, abaixo o código:

.msg_erro {
	color: red;
	font-weight: bold;
}

Com essa classe eu destaco as minhas mensagens de erro.

O Exemplo Pronto

Você pode ver esse exemplo pronto em http://www.comocriarsites.com/exemplos/formulariohtmlsimples/.

Se você digita um endereço na barra de endereço seu navegador e aperta a tecla enter (ou clica no botão ir), o navegador faz uma requisição HTTP para o servidor do endereço digitado e o método dessa requisição é o GET. Se você clica em um link em um site, o navegador também se encarrega de fazer um requisição HTTP com o método GET, para buscar o conteúdo da página que você clicou.

Como Funciona o Método GET

O método GET utiliza a própria URI (normalmente chamada de URL) para enviar dados ao servidor, quando enviamos um formulário pelo método GET, o navegador pega as informações do formulário e coloca junto com a URI de onde o formulário vai ser enviado e envia, separando o endereço da URI dos dados do formulário por um “?” (ponto de interrogação).

Quando você busca algo no Google, ele faz uma requisição utilizando o método GET, você pode ver na barra de endereço do seu navegador que o endereço ficou com um ponto de interrogação no meio, e depois do ponto de interrogação você pode ler, dentre outros caracteres, o que você pesquisou no Google.

Quando Utilizar o Método GET

Você deve utilizar o método GET sempre que a requisição que você faz não altere o estado do servidor, tipo uma consulta, uma busca ou qualquer outra coisa que, além de não alterar o estado do servidor, também possa sempre reproduzir os mesmos resultados quando fizer a mesma requisição e for passado os mesmos parâmetros para esta requisição.

Voltando ao exemplo do Google, na ferramenta de busca dele, quando a busca é feita, ele deixa a URI toda na barra de endereço do navegador, você pode, por exemplo, copiar essa URI e mandar para alguém, dizendo para ele acessar o terceiro item da busca, e se esse alguém acessar essa mesma URI, vai achar o mesmo terceiro item que você indicou, quantas vezes for necessário (lógico que de tempos em tempos, o Google atualiza as posições das páginas).

O nome dado ao comportamento de quando você deve utilizar o GET é idempotente, que nada mas é do que já o explicado acima: uma requisição idempotente deve retornar a mesma coisa não importa quantas vezes ela é feita, ou seja, deve ter sempre os mesmos efeitos colaterais, não importando quantas requisições idempotentes são feitas.

Requisição com o método GET pode ter seu retorno cacheados (armazenados em cache), pois não se alteraria o retorno se fizéssemos uma mesma requisição GET. Isso pode causar um erro comum, que se você precisar sempre que as requisições GET cheguem ao servidor, elas podem não chegar sempre que uma requisição é feita, pois se estiver no cache de algum proxy ou do seu navegador, o retorno pode vir antes de chegar no servidor. Se você precisa que uma requisição chegue sempre no servidor, não utilize GET.

O método GET ainda pode ter limitações quanto ao tamanho dos dados a serem enviados e também ao que pode ser enviado. Quanto ao tamanho, pode-se ter uma restrição ao tamanho da URI que pode ser enviada em um requisição, e se seus dados ultrapassarem esse tamanho, provavelmente ocorrerá um erro, ou seus dados vão ser passados incompletos.

Quanto ao que pode ser enviado, como os dados vão ser enviados pela URI, só poderão ser enviados caracteres aceitos na URI, se você quer enviar dados binários (como arquivo, imagens e outros), não poderá usar GET.

Como Funciona o Método POST

O método POST envia os dados colocando-os no corpo da mensagem. Ele deixa a URI separada dos dados que serão enviados e com isso podemos enviar qualquer tipo de dados por esse método. Quando você faz um registro em um formulário e depois de enviar a URI não tem o ponto de interrogação separando os dados que você digitou, provavelmente o formulário foi enviado pelo método POST.

Quando Utilizar o Método POST

Utilizamos o método POST sempre que vamos alterar alguma coisa no servidor, ou sempre que queremos enviar dados que não podem ser enviados pelo método GET, como arquivos. Esse método é utilizado em formulário de cadastro e registro de usuários, envio de dados para alteração do sistema, cadastro de dados em sistemas de sites e outros.

O retorno de uma requisição com método POST normalmente não deve ser cacheada (armazenada em cache) então se você quiser que uma requisição sempre chegue ao servidor quando ela for feita, utilize POST.

A diferença é simples, sempre que for buscar ou apenas consultar alguma coisa, utilize GET e se for fazer alguma alteração com a requisição, envio de arquivo ou os dados forem muitos, utilize POST.

Diferenças no Lado do Servidor entre GET e POST (PHP, CGI)

Enviar dados pelo método GET e POST é diferente, então, o servidor pega esses dados de diferentes maneiras.

No PHP, quando enviamos dados pelo método GET, ele cria um array identificado por $_GET, que contém todos os dados enviados por esse método. Quando enviamos os dados pelo método POST, o PHP cria um array identificado por $_POST, também com todos os dados enviados por esse método.

Já em um script CGI, quando utilizamos o método GET, os dados são recebido em uma variável de ambiente, e com o método POST, os dados são recebidos pela entrada padrão (stdin).

Links interessantes sobre GET e POST:

- Methods GET and POST in HTML forms – what’s the difference?
- Hypertext Transfer Protocol — HTTP/1.1 – 9 Method Definitions

Para um bom entendimento de como utilizar CSS, acesse Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

Para saber utilizar o estilo float, acesse Estilo Float (CSS Style Float).

Sabendo um pouco de CSS, vamos focalizar agora no que vai fazer o nosso layout, o <div>. Eu posso encaixar vários divs em um documento, dando estilos diferentes a eles, formando um layout agradável. Aqui vou abordar um layout normalmente utilizado, que é com um topo, um corpo e um rodapé, sendo o corpo dividido em 3 partes, uma barra de menu a esquerda, um espaço para conteúdo e uma barra lateral a direita.

Vamos ao código de exemplo, e se você quer vê-lo funcionando, acesse Exemplo Estrutura de Site Tableless.

Vou colocar o código por partes para melhor explica-lo, e no final do post está o código completo de como fazer o site com div e sem tabela (tableless).

O Cabeçalho (<head>)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
<title>Exemplo Estrutura de Site Tableless</title>

<link rel="stylesheet" type="text/css" href="estilo.css" />

</head>

A primeira linha do seu código sempre que for fazer um site, tem que ser a definição do DOCTYPE, que diz aos navegadores como deve ser tratado o seu código, e para saber mais sobre o DOCTYPE (DTD – Document Type Definition), acesse O que é e para que serve o DOCTYPE ou DTD (Document Type Definition).

O atributo xmlns da tag <html> serve para ficar nos padrões de um documento XHTML, esse atributo serve para definir o namespace que o documento utilizará. Esse valor que está no exemplo é o valor padrão.

Já dentro do cabeçalho do site (<head>), devemos dizer aos navegadores que tipo de codificação de texto estamos utilizando, isso se faz com a tag <meta>, como definido do exemplo, diz que o texto do documento está com a codificação ISO-8859-1, que é o padrão para nossa língua portuguesa, mas existe uma codificação padrão mundial que é o famoso UNICODE (UTF-8). Se seu documento estiver escrito em um tipo de código e sua tag <meta> de definição de conteúdo estiver dizendo que está em outro, o navegador poderá exibir caracteres estranhos.

A próxima tag interessante é a <link>, que serve para adicionar algum conteúdo externo ao documento, comumente utilizada para adicionar um arquivo de folha de estilos (CSS – Cascading Style Sheet) a um documento, como feito no exemplo. A tag <link> adiciona no documento a folha de estilos do arquivo estilo.css.

Para fazer um site, você deve ter em mente sempre como o navegador vai vizualizar o site, então quando for criar o site, defina seu DTD – Document Type Definition sempre e também defina sempre na criação do seu site, o código de caracteres a ser utilizado (como UTF-8 e ISO-8859-1).

A Folha de Estilos do Site (CSS – Cascading Style Sheet)

body {
	margin:0px;
	background-color: #cccccc;
	font-family:"Trebuchet MS", Tahoma, Arial, Verdana;
	font-size:12px;
	color:#000;
}

#todo {
	position: relative;
	width: 750px;
	border: 1px solid black;
	margin:0px auto;
	background-color: white;
}

#topo {
	position: relative;
	width: 746px;
	height: 100px;
	border: 2px solid red;
}

#meio {
	position: relative;
	width: 750px;
	min-height: 400px;
	background-color: #eeeeee;
}

#rodape {
	width: 746px;
	height: 75px;
	border: 2px solid brown;
}

#esquerda {
	float: left;
	width: 150px;
	min-height: 400px;
	border: 2px solid green;
}

#miolo {
	float: left;
	width: 438px;
	min-height: 400px;
	border: 2px solid blue;
}

#direita {
	float: right;
	width: 150px;
	min-height: 400px;
	border: 2px solid yellow;
}

#menu {
	width: 150px;
	height: 400px;
}

.itemMenu {
	width: 140px;
	height: 21px;
	background-color: lightyellow;
	padding: 3px 0px 0px 10px;
	border-bottom: 1px solid black;
}

#logo {
	float: left;
	width: 200px;
	height: 100px;
	text-align: center;
	background-color: #cccccc;
	margin-right: 20px;
}

.secao_miolo {
	width: 428px;
	height: 150px;
	text-align: center;
	background-color: #cccccc;
	margin: 2px 5px 4px 5px;
}

.secao_direita {
	width: 140px;
	height: 100px;
	text-align: center;
	background-color: #cccccc;
	margin: 4px 5px 4px 5px;
}

#rodape_direita {
	float: right;
	width: 200px;
	text-align: right;
	margin: 5px 10px 0px 0px
}

#rodape_direita a{color: #cc6600; text-decoration: none;}
#rodape_direita a:hover{color: #cc6600; text-decoration: underline;}

Os estilos do seu site devem ser todos definidos nesse arquivo, ou você pode separar os arquivos por parte do site, por exemplo, eu tenho um arquivo para o estilo do site todo, mas do banner e do menu (rollover ou popup), que já tenho prontos e bem definidos, eu coloco em outro arquivo, como se fosse modularizar o código, se não quero o banner, só retiro os arquivos do banner, se não quero o menu, só retiro os arquivos do menu, e assim podemos fazer com outras partes do site.

Explicando rapidamente, o elemento com o identificador todo, vai ser o elemento pai de todos os outros elementos do conteúdo do site, ele vai definir o tamanho do site e alguns estilos do site, como no exemplo, a cor de fundo do site (background). O elemento com o identificador todo, vai ser dividido verticalmente em 3 partes, o topo, o meio e o rodape.

Nesse exemplo eu coloco bordas e cor de fundo nos elementos para demonstrar onde eles estão e o tamanho deles. As partes verticais do site, tem a mesma largura, que é a largura total do site. O elemento com identificador meio vai ser dividido em 3 partes horizontais: esquerda, miolo e direita.

Normalmente na esquerda fica o menu do site (se o site tiver menu), se você quiser um menu horizontal, normalmente ficaria na parte de baixo do topo, ou logo abaixo do topo, em um outro <div>. Fazer os ajustes para o seu site ficar com um menu diferente é fácil, coloque outro <div>, coloque alguns estilos nele e pronto. Ainda na parte esquerda, colocamos o estilo float: left, pois queremos que essa parte fique na esquerda, e a próxima parte fique a direita dela.

O miolo do site também fica com o estilo float: left, pois queremos que ele fique a esquerda da próxima parte que iremos colocar. Como ele vem depois do <div> da esquerda, o miolo ficará colado a direita deste.

A parte da direita do site fica com o estilo float: right, para ficar a direita e os outros elemento a esquerda dele.

Uma parte da nossa folha de estilos que é bem interessante são as últimas duas linhas, elas dizem que qualquer tag <a>, dentro do elemento com o identificador rodape_direita, deve ter esses estilos atribuídos a elas. Isso é bem útil quando tenho em diferentes partes do meu site, diferentes estilos da mesma tag.

Para saber mais sobre a tag <a>, acesse A Tag <a> – Fazendo Link (Hyperlink).

O Código HTML do Site sem Tabelas (com <div> – Tableless)

Vamos colocar o site por partes, primeiro o topo, depois o meio e por fim o rodapé. Abaixo o código do topo.

O Topo

<body>

<div id="todo">
	<div id="topo">
		<div id="logo">Logo</div>
		Aqui pode ser uma imagem de background e um texto.
	</div>

No corpo do documento temos um elemento <div> que vai englobar todo o nosso site. Esse elemento <div> está ai para definir a largura e altura do site, qualquer tipo de fundo (cores e imagens) e o alinhamento do site no navegador. Colocamos o identificador todo nesse <div>. Sempre que for fazer um site, defina bem a largura do site, pois se a largura for variável, o conteúdo do site pode “quebrar” o layout, fazendo o site ficar diferente do planejado.

O primeiro elemento dentro do nosso <div> todo, é um <div> que ficará responsável pela parte de cima do site, onde podemos colocar o nome do site, um logo do site e mais coisas como propagandas e até mesmo o menu do site (se o menu for horizontal). Esse <div> identificamos por topo. Normalmente ele ocupa a parte de cima inteira do site, com a mesma largura do <div> todo. A altura é variável, depende muito do que queremos colocar no topo. Uma dica é, não colocar a altura do topo muita, pois poderá esconder muitas partes do conteúdo do site, que ficará logo abaixo, mas também não colocar a altura pouca, pois se for um site de empresa, a logo, o título ou o nome do site tem que serbem visualizado.

O Meio

	<div id="meio">
		<div id="esquerda">
			<div id="menu">
				<div class="itemMenu">Principal</div>
				<div class="itemMenu">Empresa</div>
				<div class="itemMenu">Produtos</div>
				<div class="itemMenu">Serviços</div>
				<div class="itemMenu">Contato</div>
			</div>
		</div>

		<div id="miolo">
			<div class="secao_miolo">Seção 1</div>
			<div class="secao_miolo">Seção 2</div>
			<div class="secao_miolo">Seção 3</div>
		</div>

		<div id="direita">
			<div class="secao_direita">Seção 1</div>
			<div class="secao_direita">Seção 2</div>
			<div class="secao_direita">Seção 3</div>
		</div>
		<div style="clear: both;"></div>
	</div>

Logo após o topo, colocamos um <div> identificado por meio. Nesse meio teremos o conteúdo do nosso site. No exemplo, dividimos o meio em três partes, horizontalmente. A primeira parte, mais a esquerda, colocamos um menu.

Na parte do meio colocamos algumas seções que o site pode ter, tipo algumas notícias na página principal, ou chamadas para artigos e outros. Nessa parte fica o conteúdo do nosso site, quando clicar em um item do menu, só é necessário mudar essa parte do site, e se necessário ou quiser, mudar também a terceira parte do meio, a parte da direita.

Na parte da direita podemos colocar algumas seções do site mais importantes, para dar melhor destque a elas, ou podemos colocar propagandas de todos os tipos, ou informações fixas que se quer ter em todas as seções do site.

Como essas partes do site requerem o estilo float, colocamos um <div> na penúltima linha com o estilo clear, para corrigir o problema de ajuste de altura. Esse jeito de corrigir pode não ser o mais elegante, mas foi o que eu achei mais fácil de fazer e sem problemas de fazer.

O Rodapé

	<div id="rodape">
		<div id="rodape_direita">
			Av. xxx yyy zzz, No 765<br/>
			Manaus - AM - CEP: 89000-000<br/>
			Email: <a href="mailto:seuemail@seudominio.com.br">seuemail@seudominio.com.br</a>
		</div>
	</div>
</div>

</body>
</html>

Na parte de baixo do site, temos normalmente um rodapé, que diz quem fez o site, algumas informações sobre contatos da empresa do site, tipo endereço, email, telefones e outros. Nós colocamos um <div> com o identificador rodape para fazer o rodapé do site. No exemplo coloquei um outro <div> dentro do rodape, para fazer ele ficar a direita com alguns dados de contato do site.

O Código Inteiro do Site em <div> – Tableless

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
<title>Exemplo Estrutura de Site Tableless</title>

<link rel="stylesheet" type="text/css" href="estilo.css" />

</head>

<body>

<div id="todo">
	<div id="topo">
		<div id="logo">Logo</div>
		Aqui pode ser uma imagem de background e um texto.
	</div>

	<div id="meio">
		<div id="esquerda">
			<div id="menu">
				<div class="itemMenu">Principal</div>
				<div class="itemMenu">Empresa</div>
				<div class="itemMenu">Produtos</div>
				<div class="itemMenu">Serviços</div>
				<div class="itemMenu">Contato</div>
			</div>
		</div>

		<div id="miolo">
			<div class="secao_miolo">Seção 1</div>
			<div class="secao_miolo">Seção 2</div>
			<div class="secao_miolo">Seção 3</div>
		</div>

		<div id="direita">
			<div class="secao_direita">Seção 1</div>
			<div class="secao_direita">Seção 2</div>
			<div class="secao_direita">Seção 3</div>
		</div>
		<div style="clear: both;"></div>
	</div>

	<div id="rodape">
		<div id="rodape_direita">
			Av. xxx yyy zzz, No 765<br/>
			Manaus - AM - CEP: 89000-000<br/>
			Email: <a href="mailto:seuemail@seudominio.com.br">seuemail@seudominio.com.br</a>
		</div>
	</div>
</div>

</body>
</html>

Não esqueca do arquivo de folha de estilo (CSS), e ajustar o nome dele ao nome colocado na tag <link> do cabeçalho do site.

Agora já podemos fazer várias modificações para o site ficar visualmente atrativo e também já sabemos como fazer um site em <div> de graça (grátis).

Se você quiser um site ou hospedagem profissional, acesse Panasoft.

A tag <a> é a tag utilizada para criar um link em uma página, o nome da tag é a inicial de anchor (âncora), que é o termo utilizado na maioria da literatura. Para criar um link para esse site, utilizamos a tag <a> como a seguir:

<a href="http://www.comocriarsites.com" title="o melhor blog de como criar sites">Como Criar Sites</a>

E o resultado dessa linha é:

Como Criar Sites

Atributos de Link – Tag <a> (href – Hypertext Reference, title e target)

O atributo que diz para onde o link aponta (para onde o usuário vai quando o link é clicado), é o href. O valor do atributo href é o endereço do site ao qual o link aponta.Você pode ver isso no exemplo acima, onde esse blog é para onde o link aponta, logo o endereço dele é o valor do atributo href do link. Mais abaixo veremos que podemos ter outros valores no atributo href.

Você pode colocar o atributo title da tag <a> para fazer o efeito de aparecer o valor desse atributo quando o mouse ficar em cima do link, dando uma descrição do destino do link para o usuário. No exemplo acima também colocamos o atributo title, e o valor dele é a descrição do site. Se você parar o mouse em cima do link de exemplo acima, ele mostrará o valor do atributo title. O atributo title também serve para outro propósito, que é para as máquinas de buscas saberem do que se trata o destino do link, podendo dar algum tipo de tratamento para essa descrição, como palavras chaves para a máquina de busca indexar melhor o site destino do link.

O atributo target define um alvo para o link ser aberto. Um alvo pode ser uma janela (nova ou já aberta) ou um frame (nas versões mais recentes de sites, frames não são mais utilizados). Para abrir o link em uma nova janela, utilize como valor do atributo target, o _blank.

<a href="http://www.comocriarsites.com" target="_blank">Como Criar Sites</a>

O atributo target não é mais padrão, segundo as normal da W3C no padrão strict. No padrão transitional ainda é permitido o seu uso. Para saber um pouco mais sobre os padrões e como coloca-los no seu site, acesse O que é e para que serve o DOCTYPE ou DTD (Document Type Definition).

Link Estático e Dinâmico

O que chamamos de link estático é o link que tem no seu atributo href o endereço completo do site destino. Os exemplos acima tem essa característica, o endereço completo. Para ligar (linkar) páginas que estejam no mesmo domínio, podemos fazer referência dinâmica, e chamamos de link dinâmico. O link dinâmico conta como início o diretório que a página que possui o link está, e para referenciar outra página no mesmo diretório, podemos colocar somente o nome da outra página no atributo href.

<a href="pagina2.html">página no mesmo diretório</a>

No exemplo acima, estamos linkando (ligando) a página2.html da nossa página, que tem que estar no mesmo diretório.

Nós podemos chamar páginas que estão em diretórios distintos, acima ou abaixo. Para fazer um link dinâmico de uma página que está no diretório exemplo, a uma página que está no diretório exemplo/teste, fazemos:

<a href="teste/pagina2.html">página em um diretório abaixo</a>

Para fazer um link dinâmico de uma página que está no diretório exemplo/teste, a uma página que está no diretório exemplo, fazemos:

<a href="../pagina2.html">página em um diretório acima</a>

Nós podemos também fazer combinações de páginas acima e abaixo, como acessar uma página que está em um outro diretório no mesmo nível que o diretório atual:

<a href="../teste2/pagina2.html">página em outro diretório do mesmo nível</a>

Link com Texto e com Imagens

Nos exemplos acima nós vimos vários links, mas todos eles sempre estão com um texto para ser clicado, mas um link pode ser uma imagem também. Para um link ser imagem, nós temos que simplesmente colocar uma imagem dentro da tag <a>.

<a href="http://www.comocriarsites.com"><img src="img/imagem_teste.png" border="0"></a>

O exemplo acima mostra como colocar um link com imagem. Podemos notar que dentro da tag <img> colocamos o atributo border=”0″, isso é porque por padrão, quando uma imagem é colocada como link, ela exibe uma borda, e com esse atributo fica somente a imagem normal.

Link para a mesma Página

Um link pode ter o seu destino na mesma página que está sendo exibida no navegador, ou indicar um certo ponto em uma outra página. Para fazer isso temos que identificar o ponto ao qual queremos que o link aponte e coloque o identificador desse ponto no atributo href do nosso link. Vamos ao exemplo:

<h2 id="indice">Índice</h2>

<a href="#topico1">Tópico 1</a><br>
<a href="#topico2">Tópico 2</a><br>
<a href="#topico3">Tópico 3</a><br>
<a href="#topico4">Tópico 4</a><br>
<a href="#topico5">Tópico 5</a><br>
<br>
<h2 id="topico1">Tópico 1</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico2">Tópico 2</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico3">Tópico 3</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico4">Tópico 4</h2>
...
<a href="#indice">Voltar ao Índice</a>
<br><br>
<h2 id="topico5">Tópico 5</h2>
...
<a href="#indice">Voltar ao Índice</a>

Para ver esse exemplo funcionando acesse Exemplo de Links Internos como Índice.

Nesse exemplo criamos um índice para a nossa página, e quando o usuário clicar nos itens do índice, ele vai ser levado direto para os tópicos correspondentes. Não tem muitos segredos aqui, somente que cada tópico vai ter um identificador único, que pode ser qualquer nome, ou o nome do tópico para melhor representar, e o atributo href dos links tem os identificadores com um jogo da velha na frente, como valor.

Pode notar no exemplo também que após cada tópico tem outro link para retornar ao índice, para melhorar a navegação do usuário.

No nosso exemplo funcionando, também há links para outra página, com identificador de onde quer que seja mostrado essa outra página. Isso também é simples, basta colocar no atributo href o endereço da página a ser acessada, seguido de jogo da velha e o identificador da parte onde se quer mostrar.

<a href="outra_pagina.html#topico1">Tópico 1 na outra página</a>

Link para Arquivo

Um link também pode ser apontado para um arquivo, na verdade ele é sempre apontado para um arquivo, só que quando esse arquivo é uma página da web, nós dizemos que o link aponta para um página, mas podemos facilmente fazer um link para um arquivo, só precisamos colocar no atributo href da tag <a> o endereço do arquivo.

<a href="http://www.comocriarsites.com/arquivos/backup.zip">Download Arquivo</a>

No exemplo acima estamos fazendo um link para um arquivo .zip (zipado). Ao clicar no link o usuário vai ter a opção de abrir o arquivo ou salvar o arquivo.

Link para Email

Um outro tipo de link é o link para email, esse não é um modo elegante de fazer o usuário enviar email para o dono do site ou o administrador, mas na falta de algum script para envio de email por formulário esse resolve.

Para fazer um link para email, nós colocamos a palavra mailto, seguido de dois pontos (:), seguido do email ao qual vai ser enviado a mensagem, caso o usuário clique.

<a href="mailto:gerente@comocriarsites.com">Envie um email para mim</a>

No exemplo acima, ao clicar no link, vai abrir o gerenciador de email padrão do usuário (Thunder Bird, Outlook, …) já com o email para ser enviado, só precisando o usuário digitar a mensagem.

Ainda utilizamos muito o HTML, muitas páginas o tem como linguagem, mas a web está sendo construida hoje com o XHTML. Ai surge a pergunta: Mas como o meu navegador vai saber com qual linguagem a página que ele está acessando foi construída? E nesse ponto entra o DOCTYPE.

O DOCTYPE serve para dizer aos visitantes da página com qual tipo de linguagem padrão a página foi construída. Hoje temos básicamente 6 tipos que são considerados os principais:

DOCTYPE HTML 4.01 Strict

Esse padrão se refere a paginas feita em HTML no modo strict. Esse seria o modo correto de fazer as páginas utilizando o HTML, ele não possui elementos de apresentação (<b>, <center>, <i>) e elementos muito antigos (fora de uso) e frames não são permitidos.

Para você dizer aos visitantes que sua página foi feita com esse padrão, você deve adicionar no início do código da sua página o seguinte trecho:

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

DOCTYPE HTML 4.01 Transitional

Nesse padrão as páginas também são feitas somente com HTML, mas esse modo é mais flexível para conter códigos mais antigos, então ele permite elementos de apresentação e os elementos muito antigos. Ele continua não permitindo frames. Esse é o padrão para transição dos documentos antigos para o novo padrão.

Para dizer aos visitantes que seu código é desse padrão, coloque no começo do seu código a linha abaixo:

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

DOCTYPE HTML 4.01 Frameset

Com esse padrão de página, você pode colocar tanto elementos de apresentação e antigos, como frames. Ele seria o padrão para quem não quer ter o mínimo de trabalho para atualizar sua página.

O código para ele é:

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

DOCTYPE XHTML 1.0 Strict

Esse padrão seria o modo correto de fazer uma página nos dias atuais. Ele utiliza o XHTML e não contém elementos de apresentação e os muito antigos, assim como não permite frames.

O código para ser colocado no início do seu documento é:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE XHTML 1.0 Transitional

O padrão transitional para XHTML funciona no mesmo esquema do transitional para HTML, ele permite elementos de apresentação e elementos muito antigos, mas continua não permitindo frames. Esse deve ser o padrão mais utilizado atualmente.

Para dizer aos visitantes tratarem seu código com esse padrão, coloque o linha abaixo no início do seu documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE XHTML 1.0 Frameset

Esse padrão é igual ao padrão XHTML 1.0 transitional, mas esse permite frames. Para utilizar esse padrão coloque, no início do seu documento, o código abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Fora os padrões listados acima, temos um que provavelmente será o futuro das páginas, que é o XHTML 1.1, esse padrão é similar ao XHTML 1.0 strict, com o adicional de permitir módulos do XHTML.

Para você saber um pouco das diferenças entre os padrões HTML e XHTML, leia XHTML vs HTML Tutorial e nunca se esqueça de procurar nas máquinas de busca (Google, Yahoo!, etc).

Se você quiser verificar se seus códigos estão de acordo com as regras definidas, acesse Markup Validation Service. E não se esqueça que é a W3C que definiu esses padrões e outros vários padrões relacionados a web, então qualquer dúvida, pode fuçar no site deles.

Para uma lista mais completa, da própria W3C, dos padrões de documentos da web (DTD – Document Type Definition) e como coloca-los nos seus documentos (DOCTYPE), acesse Recommended list of DTDs.

Vamos colocar um exemplo de tabela e depois explicamos o seu funcionamento.

<table style="width: 100%; border: 1px solid black;">
	<tr>
		<th>Título 1</th>
		<th style="border: 2px solid red;">Título 2</th>
		<th>Título 3</th>
	</tr>
	<tr>
		<td style="border: 2px solid green;">Campo 11</td>
		<td>Campo 12</td>
		<td style="border: 2px solid blue;">Campo 13</td>
	</tr>
	<tr>
		<td>Campo 21</td>
		<td style="border: 2px solid yellow;">Campo 22</td>
		<td>Campo 23</td>
	</tr>
</table>

Nesse exemplo mostro como fazer uma tabela com a primeira linha de título (<th>) e com duas linhas normais (<td>), tendo cada linha três colunas. Para fazer uma linha de uma tabela você deve iniciar com a tag <tr> e finalizar com o fechamento dessa tag </tr>. Dentro dessa tag vão as tags de colunas, <th> e <td>. Vamos a algumas definições.

<table>

- Cria uma tabela. Essa tag pode ter atributos que podem ser substituidos por estilos (CSS). Alguns atributos da tag <table> são: border, width, height, cellspacing, cellpadding e outros.

<tr>

- Cria uma linha na tabela. A tag <tr> sempre cria uma nova linha na tabela e seus atributos são parecidos com os da tag <table>, sendo que seus efeitos só são vistos dentro da linha ao qual a <tr> define.

<th>

- Cria uma coluna de título dentro de uma linha da tabela. Essa coluna deixa o seus conteúdo em negrito e centralizado. Essa tag também pode usar qualquer atributo, mas seus efeitos só valerão para a coluna que ela define e na linha que ela está contida.

<td>

- Cria uma coluna dentro de uma linha da tabela. Essa coluna dentro da linha pode ser definida como um campo da tabela. Essa tag pode definir qualquer atributo, mas seus efeitos só valerão para a coluna que ela define e na linha que ela está contida.

No nosso exemplo, está definido alguns estilos na tag <table>, como a largura dela (width: 100%) e a como vai ser a borda (border: 1px solid black). Essa borda está definida que vai ter largura de 1 pixels, vai ter o tipo solid (linha continua) e vai ter a cor preta. Em algumas colunas tem o estilo bem parecido com o da tabela, mas está para 2 pixels de largura da borda e de cores variadas. O funcionamento desse exemplo pode ser visto em Exemplo Tabela 1.

Colspan e Rowspan

Os atributos colspan e rowspan servem para dizer para um campo quantas colunas e quantas linhas ele deve ocupar, respectivamente. O padrão desses atributos é 1 (um), que normalmente um campo ocupa somente uma coluna e uma linha.

Exemplo de Colspan:

<table style="border: 1px solid black;">
	<tr>
		<td colspan="2" style="border: 1px solid black;">Campo 11 e Campo 12</td>
		<td style="border: 1px solid black;">Campo 13</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 21</td>
		<td style="border: 1px solid black;">Campo 22</td>
		<td style="border: 1px solid black;">Campo 23</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 31</td>
		<td style="border: 1px solid black;">Campo 32</td>
		<td style="border: 1px solid black;">Campo 33</td>
	</tr>
</table>

Nesse exemplo, o primeiro campo vai ocupar duas colunas (colspan = “2″), por isso, para manter a primeira linha com três colunas devemos colocar apenas mais uma coluna (<td>).

Exemplo de Rowspan

<table style="border: 1px solid black;">
	<tr>
		<td rowspan="2" style="border: 1px solid black;">Campo 11 e Campo 21</td>
		<td style="border: 1px solid black;">Campo 12</td>
		<td style="border: 1px solid black;">Campo 13</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 22</td>
		<td style="border: 1px solid black;">Campo 23</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 31</td>
		<td style="border: 1px solid black;">Campo 32</td>
		<td style="border: 1px solid black;">Campo 33</td>
	</tr>
</table>

Nesse exemplo o primeiro campo vai ocupar duas linhas (rowspan=”2″), por isso, para manter a segunda linha com três colunas devemos colocar apenas duas colunas (<td>) na segunda linha.

Exemplo de Colspan e Rowspan Juntos

<table style="border: 1px solid black;">
	<tr>
		<td colspan="2" rowspan="2" style="border: 1px solid black;">Campo 11, Campo 12, Campo 21 e Campo 22</td>
		<td style="border: 1px solid black;">Campo 13</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 23</td>
	</tr>
	<tr>
		<td style="border: 1px solid black;">Campo 31</td>
		<td style="border: 1px solid black;">Campo 32</td>
		<td style="border: 1px solid black;">Campo 33</td>
	</tr>
</table>

Nesse exemplo temos o primeiro campo ocupando duas colunas e também ocupando duas linhas, por isso temos que colocar somente mais uma coluna (<td>) na primeira e na segunda linha.

Para ver esse exemplos funcionando entre em Exemplos de Colspan e Rowspan.

Para mais informações sobre tabelas HTML acesse http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4.4.

Primeiro mostrarei o código, HTML, Javascript e um pouco de CSS. Depois vai as explicações e um exemplo de funcionamento.

Código HTML do Menu

Primeiro o código HTML do menu:

	<div id="menu">
		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/index.html">PRINCIPAL</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/empresa.html">A EMPRESA</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/noticia.html">NOTÍCIAS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/boletim.html">BOLETINS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/artigo.html">ARTIGOS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/bancoimagem.html">GALERIAS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/link.html">LINKS ÚTEIS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/faleconosco.html">FALE CONOSCO</a></div>
	</div>

Esse menu é feito sem tabela (tableless), que é um “novo” conceito de desenvolvimento de páginas. Para ser feito assim, normalmente usa-se muito a tag <div>. No código acima temos um <div> externo, que tem uma classe associada a ele, essa classe veremos na segunda parte do código. Dentro desse <div> externo, temos um <div> interno para cada item do menu. Cada <div> interno tem os atributos class, onmouseover e onmouseout, explicados abaixo:

class

- esse atributo é usado para definir uma classe de estilo (CSS) para uma tag, e todas as tags dentro dessa tag herdam parte desse estilo.

onmouseover

- esse atributo especifica uma ação a fazer quando o mouse passar por cima do que essa tag exibe, no nosso caso um item do menu. E esse atributo executa um script em Javascript, logo a função que está lá dentro (mouse_over_menu(this);) é uma função Javascript.

onmouseout

- esse atributo especifica uma ação a fazer quando o mouse sai de cima do que essa tag exibe, no nosso caso, quando o mouse sair de cima de um item do menu, esse atributo diz que é para executar a função “mouse_out_menu(this);“, essa é uma função Javascript.

Código CSS (estilos).

A seguir vem o código da classe de estilos (CSS):

<style type="text/css">

#menu{
	width:160px;
	height:263px;
	background-color:#fff;
}

.itemOn{
	width:150px;
	height:23px;
	padding-left:10px;
	padding-top:2px;
	background-color:#fff;
}
.itemOn a{color:#336600; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOn a:hover{text-decoration:none; font-size:16px; font-weight:bold;}

.itemOver{
	width:150px;
	height:23px;
	padding-left:10px;
	padding-top:2px;
	background-image: url(bg-menu.gif);
}
.itemOver a{color:#fff; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOver a:hover{text-decoration:none; font-size:16px; font-weight:bold;}

</style>

O estilo para o identificador menu (#menu), define a largura (width), altura (height) e cor de fundo (background-color) do menu. Podemos ver que o <div> externo do nosso menu está com esse identificador (id=”menu’), Ele irá receber esses estilos para começar a construção do nosso menu rollover.

Para saber um pouco mais sobre folha de estilos (CSS) acesse: Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

Como vemos nos estilos acima, a única diferença entre as classe de estilo ItemOn e ItemOver é que o último tem uma imagem de fundo (background-image).

Agora a única coisa que falta fazer é o nosso código em Javascript para fazer a troca das classes de estilo dos itens do menu quando o mouse passar por cima ou sair de cime do item.

O Javascript do Menu

Como sempre, o código depois as explicações:

function mouse_over_menu(objDiv)
{
	objDiv.className = 'itemOver';
}

function mouse_out_menu(objDiv)
{
	objDiv.className = 'itemOn';
}

Vou explicar o básico sobre funções em Javascript. Para definir uma função em Javascript você deve escrever o cabeçalho da função seguido do corpo da função. No cabeçalho da função você deve colocar a palavra function seguida do nome da sua função (no caso das funções acima, mouse_over_menu e mouse_out_menu, respectivamente), seguido dos parametros passados para a função, entre parenteses.

O corpo da função deve estar todo entre chaves, e nele você coloca códigos Javascript para fazerem o que você quiser. No nosso menu, esse código vai apenas mudar a classe de estilo do objeto do elemento passado pelos parametros da função. Lá no nosso código HTML, podemos ver que foi passado um this como parametro da função, esse this indica que é para passar o objeto do elemento de onde a função está sendo chamada. No nosso caso, cada item do menu vai ser passado como um objeto Javascript para podermos modificar a sua classe.

O Código inteiro – Menu RollOver

Abaixo vai como ficaria o código inteiro do nosso menu rollover.

<html>
<head>

<style type="text/css">

#menu{
	width:160px;
	height:263px;
	background-color:#fff;
}

.itemOn{
	width:150px;
	height:23px;
	padding-left:10px;
	padding-top:2px;
	background-color:#fff;
}
.itemOn a{color:#336600; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOn a:hover{text-decoration:none; font-size:16px; font-weight:bold;}

.itemOver{
	width:150px;
	height:23px;
	padding-left:10px;
	padding-top:2px;
	background-image: url(bg-menu.gif);
}
.itemOver a{color:#fff; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOver a:hover{text-decoration:none; font-size:16px; font-weight:bold;}

</style>

<script language="JavaScript">

function mouse_over_menu(objDiv)
{
	objDiv.className = 'itemOver';
}

function mouse_out_menu(objDiv)
{
	objDiv.className = 'itemOn';
}

</script>

</head>
<body>
	<div id="menu">
		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/index.html">PRINCIPAL</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/empresa.html">A EMPRESA</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/noticia.html">NOTÍCIAS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/boletim.html">BOLETINS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/artigo.html">ARTIGOS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/bancoimagem.html">GALERIAS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/link.html">LINKS ÚTEIS</a></div>

		<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
		<a href="http://www.seudominio.com/faleconosco.html">FALE CONOSCO</a></div>
	</div>
</body>
</html>

Nesse link você pode ver esse código funcionando: Menu RollOver

Se gostou comente.