Criando um site usando tabelas no layout - Como comentar códigos HTML

Se você está acompanhando nosso curso de HTML online, já deve ter percebido que sempre após explicarmos alguma coisa em nosso tutoriais, damos exemplos práticos e reais da teoria. Ou seja, vemos nossos códigos de HTML em ação.

Agora vamos usar tudo o que aprendemos nessa seção sobre tabelas para criar um site com layout bem interessante, com menu, cabeçalho e rodapé.

Mas antes, vamos aprender como comentar nossos códigos HTML!

É importante ter certificado do cursode HTML ?

Como comentar códigos em HTML

Se você tiver estudado nosso último tutorial sobre tabelas dentro de tabelas, deve ter notado como nosso código HTML está ficando cada vez maior e mais complexo.
E as coisas só tendem a piorar à medida que vamos nos tornando webmasters profissionais.

Já ensinamos que indentar seu código (dar espaço e fazer as tags ficarem na mesma posição vertical) tornará seu código muito mais legível e de fácil entendimento.
Outra importante dica para auxiliar na organização de nossos sites é o uso de comentários.

Comentários são linhas de código que não vão aparecer no resultado final.
Ou seja, você vai criar algumas linhas que apenas quem está vendo o código-fonte pode ver, o leitor do site não vai ver tal comentário.

A sintaxe para usar um comentário é:
<!-- ESCREVA AQUI SEUS COMENTÁRIOS -->

Como veremos ainda neste tutorial de nossa apostila de HTML, usaremos comentários para organizar os trechos de nossos códigos-fonte.

Como criar um site com tabelas

Bom, apenas usando tabelas vamos criar o layout de um site bem interessante.
Obviamente é algo básico e usando tags e conceitos do HTML 4.01, onde várias de suas tags já estão em desuso.

Porém, é de suma importância que se aprenda essas tags, e principalmente: é essencial fazer um site na mão, na unha, escrevendo todos os código.
Só assim você se tornará um profissional, um webmaster bem competente.

Nosso site terá um cabeçalho, que á a parte superior, que vai ter o nome do site, a imagem (logomarca) e um menu de navegação na horizontal.

Teremos um rodapé, um menu de opções na direita do site, e claro, o conteúdo.
O esboço de nosso site será mais ou menos o seguinte:

Como criar um site


Vamos fazer separadamente cada uma dessas partes do site, e cada uma dessas partes serão compostas de tabelas.
Mas antes, vamos montar o esboço, o esqueleto de nosso site.
Vamos fazer com que esta tabela maior fique sempre ocupe 80% da tela do navegador.

Usando os comentários para facilitar nossa criação de código HTML, temos:

<table width="80%" cellspacing="0" border="0">
 <table>
  <!-- CÓDIGO DO CABEÇALHO AQUI -->
 </table>

 <table>
  <!-- CÓDIGO DO CORPO E MENU AQUI -->
 </table>

 <table>
  <!-- CÓDIGO DO RODAPÉ AQUI -->
 </table>

</table>



Criando o cabeçalho do site

O nosso cabeçalho será composto de duas tabelas.

A primeira tabela terá duas linha e duas colunas, onde a primeira célula será o logotipo do site, a segunda célula será o nome do site, a terceira célula é vazia e a última nós colocamos um slogan "Curso de HTML 4.01", que vai ficar abaixo do nome/título do site.

Na segunda tabela teremos uma linha com alguns links, como "Home", "Contato" e "Sobre o autor". Vamos colocar cada link desse em uma célula, ou seja, cada link ocupa uma coluna desta linha.

Vamos usar a imagem abaixo como logo:
Criando o layout de um site com tabelas

Fica fácil ver que nosso código do cabeçalho será o seguinte:

<!-- CABEÇALHO -->
<table>
	<!-- Linha com logo, slogan e nome do site-->
	<tr>
		<td align="right"> <img src="logo.png" width="30%" height="10%" /></td>
		<td> <h1>Curso HTML Progressivo</h1></td>
	</tr>
	
	<tr>
		<td></td> <td valign="top"><h3>Curso completo de HTML 4.01</h3></td>
	</tr>
</table>

<!-- Linha com links de navegação -->
<table cellpadding="10">
	<tr>
		<td> <a href="index.html">Home</a></td>
		<td> <a href="sobre.html">Sobre o autor</a></td>
		<td> <a href="contato.html">Contato</a></td>
	</tr>
</table>>


Criando o corpo e menu de um site

Vamos para as partes um pouquinho mais trabalhosas, que é o conteúdo e o menu lateral.
Isso será o corpo de nossa tabela maior.

Esse corpo da tabela será composto por uma linha e duas colunas, totalizando duas células.
Na primeira célula, colocaremos uma tabela que será responsável pelo conteúdo.
Já a segunda célula, é uma tabela onde colocaremos links do nosso menu lateral.

Note que colocamos tabelas dentro destas células.
Nesse caso, que estamos criando um site super simples, não seria algo obrigatório.
A vantagem disso é que deixa nosso site mais 'flexível'. Por exemplo, se quisermos dividir o conteúdo em duas colunas, bastaria criar outra coluna dentro da tabela do conteúdo.
O mesmo poderia ser feito com o menu lateral de link. Lá iremos colocar só uma coluna de links, mas como é uma tabela, poderíamos facilmente colocar outra coluna dentro dessa tabela.

Após definirmos a tabela que terá duas colunas (essas colunas vão ter tabelas, a coluna/tabela de conteúdo e a coluna/tabela de menu), precisamos definir o tamanho dessas colunas.
Isso será feito com a tag colgroup, onde iremos reservar 70% do tamanho para o conteúdo e 30% para o menu. Isso é feito com o seguinte trecho de código:
<colgroup>
  	<col width="70%">
 	<col width="30%">
</colgroup>

Na única célula do conteúdo, apenas colocamos vários parágrafos de texto.
Já na coluna que terá uma tabela com o menu de links, iremos criar 4 linhas, onde cada uma delas terá um link diferente.
Para que o menu fico sempre no topo desta tabela/coluna, usamos o atributo valign (de alinhamento vertical) com o valor top (topo).

Assim, o código do corpo de nosso site, que terá o conteúdo e o menu será:

<!-- CORPO DO SITE  E MENU DO SITE-->
<table border="0" width="80%">
	<colgroup>
  		<col width="70%">
 		 <col width="30%">
	</colgroup>

	<tr>
		<td>
			<table align="left">
				<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris interdum vestibulum sem, ac molestie justo sodales a. Duis sed aliquet odio. Integer porttitor lacus augue, eu sagittis augue feugiat quis. Cras tellus lectus, vehicula et mauris nec, egestas facilisis felis. Proin eu diam at magna consectetur auctor ut quis metus. Pellentesque facilisis, massa nec faucibus ornare, enim diam dictum dui, rutrum rutrum quam risus a tellus.</p>

				<p>In vel vehicula ligula, eget convallis elit. In facilisis, augue ut viverra tincidunt, nisi nisi dignissim ante, vitae convallis purus nibh nec odio. Integer consequat vestibulum metus, non gravida mauris. Pellentesque id suscipit nisl, id vehicula leo. Donec tempor eget libero id auctor. Praesent imperdiet nulla non tortor scelerisque luctus. Vivamus convallis a lorem non iaculis. In adipiscing augue nec velit egestas, in laoreet dolor hendrerit. In ut mi tempor, tincidunt metus ut, malesuada urna. Quisque rutrum faucibus risus eget feugiat. In et dolor tristique, blandit enim ac, ultrices tortor.</p>

				<p>Donec eget est vitae est dictum vehicula in at dolor. Sed eget nibh massa. Morbi nibh mi, accumsan ac lacus eget, congue eleifend augue. Curabitur quis nisi purus. Nullam at sollicitudin odio, vitae gravida libero. Proin sed tempus neque. Proin volutpat sagittis erat, nec eleifend orci pharetra eget. Vivamus risus metus, lobortis quis lacinia vitae, dictum sed turpis. Proin nec sollicitudin mauris. Maecenas felis lacus, consectetur id fermentum vel, mollis nec velit. Suspendisse ac egestas nibh, et eleifend odio. Morbi ac mollis nulla. Nunc neque nibh, consequat sed porttitor egestas, pellentesque a lorem. Nulla accumsan, dui eu dictum suscipit, urna sapien eleifend nisi, ultricies aliquam lectus augue ac risus.</p>

				<p>Curabitur vel orci leo. Suspendisse volutpat nisi vel turpis convallis, at varius justo ultricies. Proin quis elit a nulla eleifend interdum. Maecenas vitae leo quis neque eleifend aliquet. Cras eget lacus posuere, luctus risus vel, laoreet erat. Donec ut mi accumsan, tristique enim in, porttitor orci. Fusce enim turpis, lacinia id nulla sit amet, feugiat tincidunt odio. In varius fringilla nisi sit amet egestas. Nunc ut nunc ac ipsum sollicitudin ornare. Nam eget tellus ac ligula dictum consectetur. Praesent ullamcorper iaculis erat at imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.</p>
			</table>
		</td>

		<td align="center" valign="top">
			<table>
				<tr><td> <br /><a href="http://www.htmlprogressivo.net/">Apostila de HTML</a> </td></tr>
				<tr><td> <br /><a href="http://www.cprogressivo.net/">Apostila de C</a> </td></tr>
				<tr><td> <br /><a href="http://www.javaprogressivo.net/">Apostila de Java</a> </td></tr>
				<tr><td> <br /><a href="http://www.assemblyprogressivo.net/">Apostila de Assembly</a> </td></tr>
			</table>
		</td>
	</tr>
</table>

Criando o rodapé do site

O rodapé é a parte mais simples.
Vamos colocar lá uma tabela com uma linha, e uma coluna.
Simplesmente vamos escrever as informações legais de nosso website e centralizar a seguinte frase:
"Curso HTML Progressivo, todos os direitos reservados, 2013 ©"

O código HTML de nosso rodapé será, portanto:

<!-- RODAPÉ DO SITE-->
<table align="center">
	<tr>
		<td>
			<br /><br /><br />
			<a href="http://www.htmlprogressivo.net/">Curso HTML Progressivo</a>, todos os direitos reservados, 2013 ©
		</td>
	</tr>
</table>

Site completo usando tabelas como layout

Veja como ficará nosso site, bem básico e apenas usando o antigo HTML 4.01, usando apenas tabelas (sem bordas):
Apostila de HTML - Como criar sites


Sim, nosso site é bem simples e básico.
Na verdade, hoje em dia não usaríamos isso profissionalmente, e sim CSS, pois várias tags que usamos já estão em desuso.

Porém, para se tornar um webmaster profissional é necessário que estude, aprenda as tags (mesmo as em desuso) e faça um site totalmente na 'unha', na mão, no código.
Esse é o diferencial de nossa apostila de HTML, ensinamos tudo, do básico.

Veja como ficou o código completo de nosso site usando tabelas como layout:

<!DOCTYPE html>
 
<html>
	<head>
		<title> Criando um layout com tabelas em HTML </title>
		<meta name="description" content="Como criar sites profissionais com layout em tabelas">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	</head>
 
 <body>
	<!-- TABELA PRINCIPAL -->
	<table cellspacing="0" align="center">
			<!-- CABEÇALHO -->
			<table>
					<!-- Linha com logo, slogan e nome do site-->
					<tr>
						<td align="right"> <img src="logo.png" width="30%" height="10%" /></td>
						<td> <h1>Curso HTML Progressivo</h1></td>
					</tr>
					<tr>
						<td></td> <td valign="top"><h3>Curso completo de HTML 4.01</h3></td>
					</tr>
			</table>

					<!-- Linha com links de navegação -->
			<table cellpadding="10">
					<tr>
						<td> <a href="index.html">Home</a></td>
						<td> <a href="sobre.html">Sobre o autor</a></td>
						<td> <a href="contato.html">Contato</a></td>
					</tr>
			</table>

	<!-- CORPO DO SITE  E MENU DO SITE-->
	<table border="0" width="80%">
		<colgroup>
  			<col width="70%">
 			 <col width="30%">
		</colgroup>

		<tr>
			<td>
				<table align="left">

						<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris interdum vestibulum sem, ac molestie justo sodales a. Duis sed aliquet odio. Integer porttitor lacus augue, eu sagittis augue feugiat quis. Cras tellus lectus, vehicula et mauris nec, egestas facilisis felis. Proin eu diam at magna consectetur auctor ut quis metus. Pellentesque facilisis, massa nec faucibus ornare, enim diam dictum dui, rutrum rutrum quam risus a tellus.</p>

						<p>In vel vehicula ligula, eget convallis elit. In facilisis, augue ut viverra tincidunt, nisi nisi dignissim ante, vitae convallis purus nibh nec odio. Integer consequat vestibulum metus, non gravida mauris. Pellentesque id suscipit nisl, id vehicula leo. Donec tempor eget libero id auctor. Praesent imperdiet nulla non tortor scelerisque luctus. Vivamus convallis a lorem non iaculis. In adipiscing augue nec velit egestas, in laoreet dolor hendrerit. In ut mi tempor, tincidunt metus ut, malesuada urna. Quisque rutrum faucibus risus eget feugiat. In et dolor tristique, blandit enim ac, ultrices tortor.</p>

						<p>Donec eget est vitae est dictum vehicula in at dolor. Sed eget nibh massa. Morbi nibh mi, accumsan ac lacus eget, congue eleifend augue. Curabitur quis nisi purus. Nullam at sollicitudin odio, vitae gravida libero. Proin sed tempus neque. Proin volutpat sagittis erat, nec eleifend orci pharetra eget. Vivamus risus metus, lobortis quis lacinia vitae, dictum sed turpis. Proin nec sollicitudin mauris. Maecenas felis lacus, consectetur id fermentum vel, mollis nec velit. Suspendisse ac egestas nibh, et eleifend odio. Morbi ac mollis nulla. Nunc neque nibh, consequat sed porttitor egestas, pellentesque a lorem. Nulla accumsan, dui eu dictum suscipit, urna sapien eleifend nisi, ultricies aliquam lectus augue ac risus.</p>

						<p>Curabitur vel orci leo. Suspendisse volutpat nisi vel turpis convallis, at varius justo ultricies. Proin quis elit a nulla eleifend interdum. Maecenas vitae leo quis neque eleifend aliquet. Cras eget lacus posuere, luctus risus vel, laoreet erat. Donec ut mi accumsan, tristique enim in, porttitor orci. Fusce enim turpis, lacinia id nulla sit amet, feugiat tincidunt odio. In varius fringilla nisi sit amet egestas. Nunc ut nunc ac ipsum sollicitudin ornare. Nam eget tellus ac ligula dictum consectetur. Praesent ullamcorper iaculis erat at imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.</p>
				</table>
			</td>

			<td align="center" valign="top">
				<table>
					<tr><td> <br /><a href="http://www.htmlprogressivo.net/">Apostila de HTML</a> </td></tr>
					<tr><td> <br /><a href="http://www.cprogressivo.net/">Apostila de C</a> </td></tr>
					<tr><td> <br /><a href="http://www.javaprogressivo.net/">Apostila de Java</a> </td></tr>
					<tr><td> <br /><a href="http://www.assemblyprogressivo.net/">Apostila de Assembly</a> </td></tr>
				</table>
			</td>
		</tr>
	</table>

	
	<!-- RODAPÉ DO SITE-->
	<table align="center">
		<tr>
			<td>
				<br /><br /><br />
				<a href="http://www.htmlprogressivo.net/">Curso HTML Progressivo</a>, todos os direitos reservados, 2013 ©
			</td>
		</tr>
	</table>

	</table>
 </body>

</html>


Exercício de HTML

Crie seu site sobre suas bandas favoritas.
No menu lateral você deverá exibir o link para as bandas (exemplo: Iron Maiden, Deep Purple, Led Zeppelin e Black Sabbath).

Quando clicarem nesses links você deve levar os leitores para as páginas específicas (maiden.html, deep_purple.html, led.html) e dentro dessas páginas o layout deve ser idêntico! Com o mesmo cabeçalho, rodapé e mesmos menus. Ou seja, repita os códigos, só altere o conteúdo.

No menu superior crie os links Home (que leva pra index.html), Contato e Sobre.
No conteúdo, use tabelas também. Exiba uma figura de cada banda, e ao lado bote os textos falando sobre a banda. Não esqueça de incluir um link ao final de cada artigo levando para o site oficial da banda.

Depois coloque todos esses arquivos em uma pasta só, compacte (.rar ou .zip) e envie para seus amigos :)

5 comentários:

Anônimo disse...

Cara, vc é o cara, vlw, vlw msmo!!!

Anônimo disse...

Ótimas dicas vlw cara !

joao pedro disse...

Muito bom! vou fazer!

link disse...

Excelente site cara, tô estudando com ele faz uma semana e meia. Professor da faculdade não sabe ensinar nada, vlw mesmo! Espero que tenha um javascript progressivo tbm algum dia. Vlw ^^

Anônimo disse...

Muito bom. Há anos, venho trabalhando no desenvolvimento de uma plataforma web, iniciando esse desenvolvimento quando ainda monitores de tubo, de resolução limitada, utilizando, portanto, tabelas HTML para a construção do layout. Estou estudando sobre layouts para dispositivos móveis, design responsivo, adaptativo, tag viewport, media queries, essas coisas, mas, apesar desses avanços, sinto conforto com as tabelas HTML, desejando manter sua utilização para PC e notebook. Tenho lido muitas críticas à utilização de tabelas HTML para layout, principalmente por aqueles que creio nunca as tenha utilizado, por serem de geração muito mais recente. Gostaria de saber opiniões a esse respeito.