Página Principal Conceitos Iniciais Adquira Suas Ferramentas Preparativos
Monte Sua Página Ponha sua Página na Internet Divulgue sua Página Dicas para Evoluir



©


MONTE SUA PAGE



Começando Cor de Fundo Background Imagens Alinhamento de Imagens
Formatação de Imagens Linhas Separadoras Títulos Cor do Texto Inclusão de Textos
Textos Pré-formatados Colocação de Margens Formatação de Textos Colocação de Links Cor dos Links
Listas Não-ordenadas Listas Ordenadas Listas de Definições Menus e Diretórios Tabelas
Marquee Frames Mapas Clicáveis


COMEÇANDO!

Abrindo o editor HTML
Abra o HTMLED32 e acione o botão New New (novo documento).



Dados básicos
Nesta janela, deixe todas a caixas de diálogo marcadas. No campo "Document Title" (título do documento) digite o nome de sua página. Este nome deve ser conciso, possibilitando a qualquer pessoa que lê-lo deduzir o conteúdo da página. O título aparecerá em locais estratégicos do Windows95: na barra de tarefas, no botão Botão Voltar Voltar do Browser
e, principalmente, nos programas de procura como o CADÊ. Utilizaremos o título "Página Teste".



Aparecerão as seguintes estruturas:

<!doctype html public "-//ietf//dtd html 3.2//en">
<html>
<!-- this document was created with htmled32      -->
<!-- author: unlicensed user                      -->
<!-- date:   01/03/98                             -->
<head>
<title>Página Teste</title>
<meta name="author" content="João da Silva">
<meta name="description" content="pagina teste inicial">
<meta name="keywords" content="html, tutorial, ilustrado">
</head>

<body>

</body>
</html>


O tag <html> indica o início de um arquivo HTML, enquanto que o </html> indica o fim do mesmo arquivo.

A maioria dos tags apresentam esta característica, isto é, início e fim. O tag final é idêntico ao tag inicial, com a diferença de que o final apresenta o símbolo "/" antes do seu nome. Exemplo: <a> e </a>.

Os símbolos "<!--" e "-->" indicam respectivamento o início e o fim de um comentário. Os comentários são dados que só interessam a você (autor, data, etc) e, por isso, não aparecerão no browser.

As estruturas "<head>" e </head> delimitam o cabeçalho do arquivo. Os dados que ficam entre eles servirão como os índices e classificadores. Assim como você é achado e classificado pelos dados que contém seus documentos pessoais (carteira de identidade, CIC...), também o arquivo o é através dos dados colocados no cabeçalho. O dado que de modo análogo corresponde ao nome de uma pessoa é o "<Title>". Observe que o "Title" também possue início e fim.

As linhas:


<meta name="author" content="João da Silva">
<meta name="description" content="pagina teste inicial">
<meta name="keywords" content="html, tutorial, ilustrado">

devem ser inseridas por você. Os dados contidos nos tags <meta> são utilizados por programas de procura (como o Cadê, AltaVista, Achei!...). Quando uma pessoa acha sua página através desses programas de procura, os dados do <meta> são mostrados a esse usuário.

A linha <!doctype html public "-//ietf//dtd html 3.2//en"> deve ser a primeira de todas. Ela indica que o browser (Internet Explorer, Netscape...) deve ler somente os tags que entende e ignorar os tags que não entende.

Os tags "<body> e "</body>" marcam o início e o fim do corpo da página. Tudo o que estiver entre estes dois símbolos aparecerão no browser quando o usuário abrir sua página.



Salve seu arquivo com o nome PAGINA.HTML (só para referência, se quiser outro nome, pode colocar). Para salvá-lo, clique no seguinte botão na barra de tarefas do HTMLED32 .



Localize o diretório C:\APAGE no drop-down (de vermelho). Dê o nome pagina (de azul) para o seu arquivo (é apenas por referêcia, se quiser outro nome, mude). Selecione o botão SALVAR.



Embora não pareça, você acabou de construir uma page. Quer ver como ficou? Primeiro temos que fazer uma configuração no HTMLED32.



Preferências
Abra o menu Options e escolha Preferences...



Escolha o browser
Escolha na guia Helpers o browser que irá abrir sua página (Netscape, Internet Explorer ou outro).

OK. Na barra de ferramentas do HTMLED32, aperte o botão Testando




Sempre que você quiser ver como sua página está ficando, basta clicar no botão Testando na barra de tarefas do HTMLED32.


Se não estiver utilizando o HTMLED32, clique aqui para ver sua página. Você deve clicar neste símbolo sempre que quiser ver como está ficando sua página. Às vezes, ela será aberta por baixo da página atual. Para visualizá-la, clique no botão correspondente na barra de tarefas do windows.



Se você viu um página em branco, não se assuste. Está correto. A estrutura fundamental da página está completa. Cada tabela abaixo ensina um passo para montar sua page.



Os recursos do HTMLED32 não serão abordados a fundo nesta parte do tutorial. É muito importante que você digite manualmente os comandos do código fonte que dará origem a sua página. Mais tarde você deve experimentar as facilidades do editor.

Ínicio Ínicio Desta Página

Ato INCLUIR COR DE FUNDO
Linha a ser alterada <body>
Linha após alteração <body bgcolor=FFFF80>
Comentários O atributo responsável pela mudança de cor de fundo é o bgcolor. Cada cor possue um código hexadecimal (utiliza os algarismos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) que a identifica. No nosso exemplo, utilizamos o código FFFF80, que corresponde ao amarelo claro.

Você pode optar entre bater o código ou bater a palavra correspondente a cor. Em outras palavras, você pode digitar o código FFFF80 ou escrever a palavra Yellow no lugar dele.

Veja a tabela de cores, clicando aqui

No HTMLED32 você pode escolher uma cor sem precisar saber seu código. Para tanto proceda assim. Vá ao menu Element, escolha Color Chooser..., clique na cor que deseja (ou procure outras no botão Definir cores personalizadas). Dê OK. O programa coloca o código onde o cursor estiver piscando.

Ínicio Ínicio Desta Página

Ato INSERIR BACKGROUND
Linha a ser alterada <body bgcolor=FFFF80>
Linha após alteração <body bgcolor=FFFF80 background="b15.gif">
Comentários O atributo responsável pelo background é o background. A figura escolhida para compor o fundo foi b15.gif. Contudo você pode escolher qualquer outra, desde que ela esteja no mesmo diretório (no nosso caso C:\APAGE) onde está o arquivo pagina.html. É importante que você digite o nome do arquivo de imagem corretamente e seguido de sua extensão.

Embora a cor de fundo fique por baixo do background, elá aparecerá primeiro quando sua página estiver sendo carregada. Portanto, se for colocar cor de fundo, harmonize-a com as palavras e figuras de sua página, para que estas não fiquem invisíveis ou difíceis de se ver.

Ínicio Ínicio Desta Página

Ato INSERIR FIGURA
Linha a ser incluída <img src="ani10.gif">
Comentários O tag responsável pela inserção de imagens e vídeos é o IMG. Quando se quer inserir uma imagem, usa-se o atributo SRC seguido no nome do arquivo. Nunca é demais lembrar que o arquivo de imagem a ser inserido deve estar, também, dentro do diretório C:\APAGE.

As imagens GIFS são de dois tipos: normais e animadas. O tag não faz distinção entre estes dois tipos de arquivos, basta colocar a extensão .GIF e o programa identificará qual é qual.

Os tipos de arquivos de imagens mais aceitos sao o GIF e o JPEG (JPG). Procure inserir arquivos de imagens pequenos (2 a 40 KB).

Ínicio Ínicio Desta Página

Ato ALINHAR IMAGEM
Linha a ser alterada <img src="ani10.gif">
Linha após alteração <p align="center"><img src="ani10.gif"></p>
Comentários O tag responsável pelo alinhamento é o P, seguido do seu atributo ALIGN. As opções CENTER, LEFT OU RIGHT são associadas ao atributo ALIGN, conforme se queira alinhar a figura ao centro, esquerda ou direita.

Observe que o tag P pede o tag de fechamento /P. Tudo que estiver entre eles, não apenas imagens, mas também textos, vídeos, tabelas...será alinhado, conforme a opção selecionada para o atributo align.

O tag <P> pode ser usado também na forma simples (<P>). Neste caso, ele não exige o fechamento. O <P> simples abre uma linha em branco, iniciando um novo parágrafo.

O tag <CENTER> e seu fechamento </CENTER> também centralizam o que estiver entre eles.

Ínicio Ínicio Desta Página

Ato ALTERAR AS CARACTERÍSTICAS DA IMAGEM
Linha a ser alterada <p align="center"><img src="ani10.gif"></p>
Linha após alteração <p align="center"><img src="ani10.gif" alt="foguinho" border="4" width="20" height="40" vspace="5" hspace="5"></p>
Comentários Foram apenas adicionados os seguintes atributos ao tag IMG:

ALT - mostra o nome que aparecerá antes que a figura seja carregada ou quando o mouse é passado por sobre ela. Serve para ajudar o usuário a prever que imagem irá aparecer.
BORDER - adiciona uma borda ao redor da figura. É medida em pixels.
WIDTH - altera a largura da figura. Medida em pixels.
HEIGHT - altera a altura da figura. Medida em pixels.
VSPACE - adiciona espaço nos lados da figura. Quando houver texto ao redor dela, ele ficará mais distante.
HSPACE - adiciona espaço em cima e embaixo da figura.

Ínicio Ínicio Desta Página

Ato INCLUIR LINHA SEPARADORA
Linhas a serem incluídas <hr> e
<hr align="center" size=5 width=50% noshade>
Comentários HR inclui uma linha na página. Esta linha pode ser redimensionada e realinhada com os seguintes atributos e opções:
SIZE - dado em pixels. Altera a espessura da linha.
WIDTH - define a largura da linha, em pixels ou em porcentagem em relação à largura da página.
ALIGN - posiciona a linha no centro (center), esquerda (left) ou direita (right) da página.
NOSHADE - retira a sombra da linha.

Ínicio Ínicio Desta Página

Ato INCLUIR TÍTULO DA PÁGINA
Linha a ser incluída <center><h1> TESTE PAGE</h1></center>
Comentários Uma das formas de se escrever títulos em páginas é utilizando os tags <Hn> e </Hn>, onde n é um número que varia de 1 a 6. Quanto menor for n, maior serão as letras.

Observe que o título está entre os tags <center> e </center>, indicando que está centralizado na página.

Ínicio Ínicio Desta Página

Ato MUDAR A COR DO TEXTO
Linha a ser alterada <body bgcolor=FFFF80 background="b15.gif">
Linha após alteração <body bgcolor=FFFF80 background="b15.gif" text="blue">
Comentários O atributo TEXT é responsável pela cor do texto da página. Ele deve ser colocado no tag BODY. NO nosso exemplo, escolhemos a cor azul para o texto. Assim tudo que você digitar sairá azul, a menos que especifique o contrário.

Ínicio Ínicio Desta Página

Ato INCLUIR UM TEXTO
Linhas a serem incluídas My Heart Will Go On (Love Theme From 'titanic') Every night in my dreams I see you, I feel you That is how I know you go on. Far across the distance and spaces between us You have come to show you go on. Near,Far,wherever you are I believe that the heart does go on Once more, you opened the door And you're here in my heart, and my heart will go on and on. Love can touch us one time and last for a lifetime And never let go till we're gone. Love was when I loved you, one true time I hold to In my life we'll always go on. Near, far, wherever you are I believe that the heart does go on Once more, you opened the door And you're here in my heart, and my heart will go on and on. You're here, there's nothing I fear And I know that my heart will go on. We'll stay, forever this way You are safe in my heart and my heart will go on and on.
Comentários Não há segredo. Em qualquer lugar (entre os tags <BODY> e </BODY>) que for digitado um texto, ele aparecerá no browser. O texto é automaticamente ajustado para que caiba na página. A cor do texto será aquela escolhida no atributo TEXT do tag BODY.

Não é necessário você escrever o texto acima linha por linha. Selecione-o. Clique como o botão direito do mouse e copie-o.

Ínicio Ínicio Desta Página

Ato INCLUIR UM TEXTO PRÉ-FORMATADO
Linha a ser incluída
<PRE>
My Heart Will Go On (Love Theme From 'titanic')

Every night in my dreams
I see you, I feel you
That is how I know you go on.

Far across the distance
and spaces between us
You have come to show you go on.

Near,Far,wherever you are
I believe that the heart does go on
Once more, you opened the door
And you're here in my heart,
and my heart will go on and on.

Love can touch us one time
and last for a lifetime
And never let go till we're gone.

Love was when I loved you,
one true time I hold to
In my life we'll always go on.

Near, far, wherever you are
I believe that the heart does go on
Once more, you opened the door
And you're here in my heart,
and my heart will go on and on.

You're here, there's nothing I fear
And I know that my heart will go on.
We'll stay, forever this way
You are safe in my heart
and my heart will go on and on.
</PRE>
Comentários Um texto pré-formatado é aquele que mantém suas características (parágrafos, espaços) quando é inserido na página. Para inserir um texto pré-formatado, coloque-o entre os tags <PRE> e </PRE>, como é mostrado no exemplo acima.

Ínicio Ínicio Desta Página

Ato COLOCAR MARGEM NO TEXTO
Linhas a serem incluídas
<BLOCKQUOTE>
<PRE>

Every night in my dreams
I see you, I feel you
That is how I know you go on.

Far across the distance
and spaces between us
You have come to show you go on.

</PRE>
</BLOCKQUOTE>
Comentários Os textos colocados entre os tags <BLOCKQUOTE> e </BLOCKQUOTE> são distanciados da margem esquerda. Você pode colocar vários <BLOCKQUOTE> antes do texto. Quanta mais deles, mais o texto se distancia da margem esquerda.

Ínicio Ínicio Desta Página

Ato ALTERAR AS CARACTERÍSTICAS DO TEXTO
Linhas a serem incluídas
<BLOCKQUOTE>
<PRE>
<FONT size="3" color="#FF0080" face=ARIAL>
Every night in my dreams
I see you, I feel you
That is how I know you go on.

Far across the distance
and spaces between us
You have come to show you go on.
</FONT>
</PRE>
</BLOCKQUOTE>

Comentários Os tags <FONT> e </FONT> servem para modificar o texto que estiver entre eles. Seus atributos são:

SIZE - modifica o tamanho do texto. Varia entre -7 e 7 em relação ao tamanho definido em <BASEFONT>.
COLOR - modifica a cor do texto delimitado.
FACE - altera o tipo de fonte (arial, times new roman, candy...)

Ínicio Ínicio Desta Página

Ato INCLUIR LINKS
Lnhas a serem incluídas
<a name="topo"></a>
<hr> <blockquote> <img src="esferapiscante.gif" width="14" height="14" text="left"> <font color=red size=4><b><i>LINKS</i></b></font> <p> <a href="http://www.music.sony.com/Music/ArtistInfo/ CelineDion/"> <img src="celinedion.jpg" alt="Celine Dion" border="2" hspace="3"> <b>Celine Dion</b></a> <p> <a href="marta.html" target=window>Veja a Marta, a barata internauta</a> <p> <a href="#topo">Topo desta página</a> <BLOCKQUOTE>

Comentários LINKS OU HIPERLINKS são aquelas palavras sublinhadas que você vê nas páginas da Internet. Ao passar o ponteiro do mouse sobre um link, a setinha torna-se uma mãozinha. Quando você clica em um link é levado para outro lugar. Este outro lugar poder ser
  1. uma página na Internet em um outro servidor distante;
  2. uma página que está no mesmo local onde está a página que contém o link que você clicou, isto é, no mesmo servidor;
  3. um outro ponto qualquer da MESMA página onde está o link que você clicou (topo, rodapé...).

Os tags responsáveis pela inclusão de links são <A> e </A>.

HREF é o atributo que contém o endereço para o qual o link aponta, isto é, um dos três lugares citados acima.

Quando se quer que o link leve para um outro ponto qualquer da mesma página onde este link está, você deve primeiramente nomear este ponto. A nomeação é feita com o atributo NAME, o qual é utilizado dentro do tag <A>. No exemplo acima fizemos um link que aponta para o topo da página. As duas linhas responsáveis por isso são:

<a name="topo"></a>
<a href="#topo">Topo da Página</a>

A primeira linha deve ser colocada, por exemplo, imediatamente após o tag <body> que obviamente fica no topo da página. É claro que o nome "topo" não vai aparecer quando o usuário abrir a página. Contudo, o ato de posicionar a linha citada no local indicado, nomeia aquele local como "topo".

A segunda linha constrói o seu link. Observe que o usuário só verá o que estiver entre o tag <a> inicial e seu fechamento </a>. Esta segunda linha, resumindo, aponta para o local que foi nomeado de "topo", sendo que a frase que o usuário verá é "Topo da Página". Agora, atenção!! Nunca esqueça o simbolo "#" (cerquilha) antes da palavra que designa o local para onde o link aponta. O cerquilha indica que o link aponta para um determinado local de uma página. Sem o cerquilha, o programa entende que você está apontando para um arquivo html.

Se você quisesse apontar para um determinado local de uma página que não seja aquela onde está o link em questão, você deve digitar seu comando assim:

<a href="pagina.html#local"></a>

Experimente.

Este local foi nomeado de ©. Se você clicar aqui irá para o topo da página. Para voltar para cá, clique no © que está no início desta página.

O segundo tipo de lugar para onde um link pode levar é uma página no mesmo local (diretório) onde está a página que contém o link em questão. Usamos o seguinte exemplo:

<a href="marta.html" target=window>Veja a Marta, a barata internauta </a>

Lembra que o código fonte que dará origem a sua página foi salvo como pagina.html? Pois bem, para que o link que aponta para marta.html funcione, estes dois arquivos html devem estar no mesmo diretório. Observe que, além do atributo href, existe o atributo target (alvo, em inglês). Target="window" ou target="_blank" significa que o link abrirá um nova janela quando for acionado. Experimente:

Veja Marta, a barata internauta.

O terceiro local para onde uma link pode levar é uma página de outro servidor distante. O link que utilizamos como exemplo foi o seguinte:

<a href="http://www.music.sony.com/Music/ArtistInfo/CelineDion/">
<img src="celinedion.jpg" alt="Celine Dion" border="2" hspace="3">
<b>
Celine Dion</b></a>

Ele aponta par uma Home Page dedicada a cantora americana Celine Dion , intérprete do tema de amor do filme Titanic.

Observe que foi incluída uma figura no link. Quando o usuário clicar nesta figura ou no nome "Celine Dion", ele será remetido à página citada. Para que isto funcione deve ser respeitada a seguinte seqüência de tags, durante a confecção do link:

<a><img>Celine Dion</a>

Também é importante que o endereço associado ao atributo HREF esteja impecavelmente correto.

Observação: os tags <b> e </b> colocam em negrito o texto que estiver entre eles. Os tags <i> e </i> formatam o texto para itálico. Você pode usar os dois ao mesmo tempo.

Ínicio Ínicio Desta Página

Ato ALTERAR AS CORES DOS LINKS
Linha a ser alterada <body bgcolor=FFFF80 background="b15.gif" text=blue>
Linha após alteração <body bgcolor=FFFF80 background="b15.gif" text=blue link=blue alink=orange vlink=gray>
Comentários Você já percebeu que, quando você clica em um link, ele muda de cor?
Antes de clicar no link, ele está de uma cor. No exato segundo em que você clica nele, o link toma outra cor. Por último, depois de clicado, o link assume uma terceira cor.

Observe esse fato nos três links abaixo.

LINK 01 LINK 02 LINK 03

Três atributos são responsáveis por essas mudanças de cores. Todos os três devem ser colocados no tag BODY. São eles

  • Atributo LINK: determina a cor do link que ainda não foi clicado;
  • Atributo ALINK: determina a cor do link que está sendo clicado;
  • Atributo VLINK: determina a cor do link que já foi visitado.

Ínicio Ínicio Desta Página

Ato LISTAS NÃO-ORDENADAS
Linhas a serem incluídas

Lista não-ordenada:
<ul type="square">
<li>Kate Winslet;
<li>Leonardo DiCaprio;
<li>Titanic.
</ul>
<hr>

Comentários O tag <ul> indica o início de uma lista não-ordenada (unordered list), enquanto que o </ul>, o seu fim.

O atributo TYPE indica o tipo de marcador que antecipará cada item da lista. Este marcador pode ser uma bola cheia (disc), um quadrado cheio (square) ou uma circunferência (circle). No nosso exemplo utilizamos o square.

O tag <li> indica um item da lista (list item).

Na lista do nosso exemplo usamos três nomes como itens. Porém, estes itens podem ser os mais diversos. Veja o exemplo abaixo:

  • Link
  • (imagem)
  • Som(som)
  • E até tabelas

Ínicio Ínicio Desta Página

Ato LISTAS ORDENADAS
Linhas a serem incluídas

Lista ordenada:
<ol type="1">
<li>Kate Winslet;
<li>Leonardo DiCaprio;
<li>Titanic.
</ol>
<hr>


Comentários O tag <ol> indica o início de uma lista ordenada (ordered list), enquanto que o </ol>, o seu fim.

O atributo TYPE indica o tipo de numeração que antecipará cada item da lista. As opçoes para o type são "1" (ordenação com números), "A" (ordenação com letras maiúsculas), "a" (ordenação com letras minúsculas), "I" (ordenação com algarismos romanos maiúsculos) e, finalmente, "i" (ordenação com algarismos romanos minúsculos). No nosso exemplo utilizamos a opção "1".

Da mesma forma que na lista não-ordenada, o tag <li> indica um item da lista (list item).

Nas listas ordenadas, os itens podem ser também de diversos tipos:

  1. Link
  2. (imagem)
  3. Som(som)
  4. E até tabelas

Ínicio Ínicio Desta Página

Ato LISTAS DE DEFINIÇÕES
Linhas a serem incluídas

<b>Lista de definições:</b>

<dl>
	<dt>Cenário
		<dd>Navio
		<dd>Cais
	<dt>Personagens
		<dd>Atores
		<dd>Atrizes
		<dd>Figurantes
</dl>
<hr>


Comentários O tag <dl> indica o início de uma lista de definições (definition list), enquanto que o </dl>, o seu fim.

O tag <dt> indica um termo que será definido (definition term).

O tag <dd> indica a definição do termo (definition data).

Veja um exemplo:

Titanic
Navio que afundou em 1912, matando milhares de pessoas.
Cameron
Diretor do filme "Titanic".

Ínicio Ínicio Desta Página

Ato LISTAS DE MENUS E DIRETÓRIOS
Linhas a serem incluídas

<b>Lista tipo menu:</b>
<menu>
<li>Animal</li>
	<menu>
	<li>Vertebrados</li>
		<menu>
		<li>Mamíferos</li>
			<menu>
			<li>Homem</li>
			</menu>
		<li>Aves</li>
		<li>Peixes</li>
		</menu>
	<li>Invertebrados</li>
	</menu>
<li>Mineral</li>
<li>Vegetal</li>
	<menu>
	<li>Angiospermas</li>
	<li>Gimnospermas</li>
	</menu>
</menu>
<hr>

<b>Lista tipo diretório:</b> <dir> <li>Animal</li> <dir> <li>Vertebrados</li> <dir> <li>Mamíferos</li> <dir> <li>Homem</li> </dir> <li>Aves</li> <li>Peixes</li> </dir> <li>Invertebrados</li> </dir> <li>Mineral</li> <li>Vegetal</li> <dir> <li>Angiospermas</li> <li>Gimnospermas</li> </dir> </dir> <hr>
Comentários Achou complicado o código acima? O importante, quando se está mexendo com os tags <menu> e <dir> e seus respectivos fechamentos </menu> e </dir>, é observar a hirerquia desses tags. Observe que para cada abre-tag corresponde um fecha-tag. No código acima, os tags correpondentes (um que abre e outro que fecha) estão colocados à mesma distância da margem esquerda, para facilitar a visualização. Esse abre-fecha de tags é o que determina a árvore de elementos no menu ou diretório. Você pode escrever o código como acima, ou colocar tudo à mesma distância da margem esquerda. Porém, a identação, como mostrada acima, facilita a compreensão e edição do menu/diretório.

Os tags <menu> e <dir> têm a mesma função. Você pode optar tanto por um quanto por outro.

Ínicio Ínicio Desta Página

Ato TABELAS
Linhas a serem incluídas

<p align="center">
<table border="4" cellpadding="5" cellspacing="3"
bgcolor="yellow">
<caption align="top">TESTE</caption>
<tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> </tr>
<tr> <th>E</th> <td>1</td> <td>2</td> <td>3</td> </tr>
<tr> <th>F</th> <td>4</td> <td>5</td> <td>6</td> </tr>
<tr> <th>G</th> <td>7</td> <td>8</td> <td>9</td> </tr>
</table>
</p>

A estrutura acima parece bem difícil de digitar, não?
Mas você não precisa se preocupar. O editor HTMLED32, ou outro editor HTML que esteja usando, faz isso pra você em 5 segundos. Mesmo tabelas gigantes são feitas istantaneamente. O trabalho que você terá será digitando o conteúdo das células. O conteúdo do nosso exemplo acima são os caracteres A, B, C, D, E, F, G, 1, 2, 3, 4, 5, 6, 7, 8 e 9.

Para você criar uma estrutura coma a acima, vá ao menu Element e escolha Table Designer...

Como você pode observar, na confecção de tabelas são usados os seguintes tags:

  • <table> e </table>
  • <tr> e </tr>
  • <th> e </th>
  • <td> e </td>

Observe com bastante atenção a hierarquia desses 4 tipos de tags. Uma tabela é composta de linhas. As linhas são composta de células. Os tags <th> e </th>, <td> e </td> indicam os limites de uma célula. O primeiro par encerra um conteúdo em negrito e o segundo, um conteúdo sem negrito. Os tags <tr> e </tr> indicam os limites de uma linha. Dentro desses limites estão os tags que indicam as células. Observe no exemplo acima a existência de 4 linhas, cada uma preenchida com 4 células.


O tag <table> indica o início de uma tabela. As características que a tabela vai ter são definidas através de atributos que são colocados dentro deste tag. Os atributos de <table> são:

Border
Define a espessura da borda que a tabela terá. Veja

border="0"
border="1"
border="2"
border="3"
border="4"
border="5"

Cellpadding
Define o espaço dentro da célula. Veja

cellpadding="0"
cellpadding="1"
cellpadding="3"
cellpadding="15"

Cellspacing
Define o espaço entre as células e as bordas da tabela. Veja:

cellspacing="0"
cellspacing="0"
cellspacing="2"
cellspacing="2"
cellspacing="10"
cellspacing="10"
cellspacing="20"
cellspacing="20"

Bgcolor
Define a cor de fundo da tabela inteira. Veja

bgcolor="yellow" bgcolor="yellow"
bgcolor="yellow" bgcolor="yellow"

Background
Define a textura de fundo da tabela inteira. Veja

background="b17.gif" background="b17.gif"
background="b17.gif" background="b17.gif"

Bordercolor
Define a cor da borda da tabela. Veja

bordercolor="green" bordercolor="green"
bordercolor="green" bordercolor="green"

Bordercolordark e bordercolorlight
Define as cores de sombra e luz, respectivamente, da tabela. Veja

bordercolordark="red" bordercolorlight="yellow" bordercolordark="red" bordercolorlight="yellow"
bordercolordark="red" bordercolorlight="yellow" bordercolordark="red" bordercolorlight="yellow"

Width
Define a largura da tabela. Veja

width="200" width="200"

width="400" width="400"

Observe no nosso exemplo, onde está localizado exatamento o tag de fechamento </table>. Sua posição correta é importante.
Os tags <tr> e </tr> indicam o começo e o fim de uma linha. Se um determinado atributo for aplicadao a um tag <tr>, esse atributo incidirá somente sobre as células que estão encerradas nessa linha. Os atributos desse tag são:

Align
Alinha horizontalmente o conteúdo das células da linha. Veja

align="left"
align="center"
align="right"

Valign
Alinha verticalmente o conteúdo das células da linha. Observação: durante a confecção desta página, a visualização foi feita utilizando-se o browser Internet Explorer 4.0. O atributo valign não funcionou em nenhuma de suas opções (top, middle, bottom e baseline).

Bgcolor, bordercolor, bordercolordark e bordercolorlight
Funcionam da mesma forma que com o tag <table>.

Os tags <th> e </th>, <td> e </td> indicam o começo e o fim de uma célula, sendo que o conteúdo encerrado pelo primeiro par estará sempre em negrito.Se um determinado atributo for aplicadao a um tag <th> ou <td>, esse atributo incidirá somente sobre o contéudo da célula iniciada por tais tags.

Os atributos que podem ser aplicados sobre <th> e <td> são:

Height
Define a altura da célula.
Width
Define a largura da célula.
Bordercolorlight e bordercolordark
Assim como no tag <table>, estes atributos definem, respectivamente, a cor de luz e de sombra, só que aqui o efeito incide somente sobre uma determinada célula.
Bgcolor
Novamente, esse atributo define a cor de fundo, só que desta vez apenas de uma célula.
Bordecolor.
Define a cor de borda de uma determinada célula.
Background
Insere uma textura de fundo na célula.

Veja abaixo um exemplo que faz uso de todos esses atributos dos tags e, logo em seguida, a tabela obtida com este trecho de código: <th> e <td>:

<p align="center">
<table border=5 cellspacing=10>

<tr>
<td><b>NORMAL</b></td>
<td height="40"><b>HEIGHT="40"</b></td>
<td width="40"><b>WIDTH="40"</b></td>
</tr>

<tr>
<td bordercolorlight="WHITE"bordercolordark="orange">
<b>bordercolorlight="purple" bordercolordark="white"
</b></td>
<th><b>NORMAL</b></th>
<td bgcolor="yellow" align="center">
bgcolor="yellow" align="center"</td>
</tr>

<tr>
<td bordercolor="green"><b>bordercolor="green"
</b></td>
<td><b>NORMAL</b></td>
<td background="b10.gif"><b>background="b10.gif"
</b></td> </tr>
</table>
</p>



TABELA RESULTANTE DO CÓDIGO ACIMA
NORMAL HEIGHT="40" WIDTH="40"
bordercolorlight="purple" bordercolordark="white" <TH> NORMAL bgcolor="yellow" align="center"
bordercolor="green" NORMAL background="b10.gif"



Dois outros atributos utilizados nos tags <th> e <td> são:

Colspan
Expande uma célula de uma linha de forma que ela cubra várias colunas.
Rowspan
Expande uma célula de uma coluna de forma que ela cubra várias linhas.

Veremos abaixo três exemplos. O primeiro sem expansões, o segundo com colspan e o último com rowspan


<p align="center">
<table border="2">
<tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr>
<tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr>
<tr> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr>
<tr> <td>M</td> <td>N</td> <td>O</td> <td>P</td> </tr>
</table>
</p>

A B C D
E F G H
I J K L
M N O P


<p align="center">
<table border="2">
<tr colspan="2"> <td>AB</td> <td>C</td> <td>D</td> </tr>
<tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr>
<tr> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr>
<tr> <td>M</td> <td>N</td> <td>O</td> <td>P</td> </tr>
</table>
</p>

AB C D
E F G H
I J K L
M N O P


<p align="center">
<table border="2">
<tr> <td rowspan="3">A</td> <td>B</td> <td>C</td> <td>D</td> </tr>
<tr> <td>F</td> <td>G</td> <td>H</td> </tr>
<tr> <td>J</td> <td>K</td> <td>L</td> </tr>
<tr> <td>M</td> <td>N</td> <td>O</td> <td>P</td> </tr>
</table>
</p>

AEI B C D
F G H
J K L
M N O P

Ínicio Ínicio Desta Página

Ato MARQUEES
Linhas a serem incluídas <marquee height=30 width=500 direction=left scrollamount=30><b> <font size="5" color="#FF0000">PIUÍÍÍÍÍÍÍIÍ</font></b></marquee>
Demonstração
PIUÍÍÍÍÍÍÍIÍ
Comentários Marquee é isso que você está vendo aí em cima, isto é, textos em movimento. Se você estiver vendo apenas a palavra PIUÍÍÍÍ estática, é porque seu browser (Netscape 3.01, por exemplo) não suporta o comando marquee. Um marquee é encerrado dentro dos tags <marquee> e </marquee>. Os atributos de <marquee> são:

Height
Determina a altura da área onde está o texto em movimento.
Width
Determina a comprimento da área percorrido pelo texto.
Direction
Determina o sentido do movimento do texto. Pode ser left ou right.
Scrollamount
Determina a velocidade do texto.

Ínicio Ínicio Desta Página

Ato FRAMES
Explicação
Veja estes três arquivos HTML:

"teste.html" - a página que você criou.
"indice.html" - um índice que aponta para as partes de sua página.
"frame.html" - o arquivo que une as duas. Quando esta abrir, clique nos links do lado esquerdo da página.

Intuitivamente, você acaba de entender o que são frames.

Frames ("molduras" em inglês) são estas subdivisões que você vê nas páginas da Internet.

Para contruir uma página com frames são necessárias duas coisas:

  • dois ou mais arquivos HTML que darão origem às partes da página com frames. No exemplo acima, utilizamos os arquivos pagina.html e indice.html.

  • Um arquivo HTML que possua os tags de frames e que fará a união dos vários arquivos citados no item acima.


Explicação
Vamos utilizar o exemplo mostrado acima para explicar como fazer sua página com frames.

Primeiramente, você deve inserir vários links locais no código-fonte pagina.html. Se você esqueceu como fazer isso, veja a explicação sobre links que foi dada neste tutorial. Estes links serão:

Link Local Ponto da página que demarcará
<a name="topo"></a> Topo da página.
<a name="texto"></a> Ponto da página onde está o texto-exemplo.
<a name="links"></a> Ponto da págia onde começam os links.
<a name="listanaord"></a> Ponto da página onde se encontra a lista não-ordenada utilizada como exemplo
<a name="listaord"></a> Ponto da página onde está a lista ordenada utilizada como exemplo.
<a name="listadef"></a> Ponto da página onde está a lista de definições utilizada como exemplo.
<a name="listamenu"></a> Ponto da página onde está o menu utilizado como exemplo.
<a name"listadir"></a> Ponto da página onde está a lista do tipo diretório utilizada como exemplo.
<a name="tabela"></a> Ponto da página onde está a tabela-exemplo.

Veja aqui o código fonte de teste.html. Os links locais estão marcados em negrito


Agora dê uma olhada no código-fonte de indice.html:

indice.html

Observe que todos o links de indice.html têm a seguinte estrutura:

<a href="pagina.html#topo" target="tutorial">Topo da Página</a>

Neste exemplo, o link aponta para o trecho #topo de pagina.html. Todos os links em indice.html deverão apontar para um determindado trecho dessa mesma página pagina.html.

Agora preste bastante atenção no seguinte detalhe. Em todos os links existe o atributo target ("alvo" em inglês) seguido da opção "tutorial". Esse nome para a opção foi escolhido a dedo, você pode escolher qualquer outro. O atributo target tem uma função especial na criação de frames. É ele que faz com que o link clicado abra na página página.html e não na indice.html.



Por último, dê uma olhado no arquivo frame.html

<html>
<head>
<title>Frame</title>
</head>
<frameset cols="20%,*">
<frame src=indice.html>
<frame src=pagina.html name="tutorial">
</frameset>
</html>

De todos os três, esse é o mais fácil. Os tags utilizados são:

<frameset>
Indica o início do trecho de código que estruturará as frames. Embora haja outros atributos para <frameset>, falaremos somente do atributo cols. Este indica quantas colunas terá a página estruturada e a porcentagem que cada coluna ocupará nela. No exemplo acima, há duas colunas. A primeira ocupando 20% do total da largura da página. O simbolo * indica que o restante (80%) será ocupado pela segunda coluna. Se preferir, pode color o número no lugar do *. O número de colunas não se limita a duas apenas. Observe que para cada coluna, deverá ser colocado um tag <frame> logo abaixo do tag <frameset>.

<frame>
Com este tag, você indica qual página ocupará cada coluna. O atributo src carrega o nome do arquivo HTML da página, enquanto que o atributo name fornece o apelido da mesma página. Lembra-se que este mesmo apelido ("tutorial") foi indicado no atributo target dos links de indice.html? Pois bem, esses dois detalhes não devem ser esquecidos, caso contrário, as frames não funcionarão corretamente.

</frameset>
Indica o fim do trecho de código que estrutura as frames.

O tag <body> e seu fechamento não são usados com o tag <frameset>.

Ínicio Ínicio Desta Página

MAPAS CLICÁVEIS



Autor

ManliusManliusManlius