HTML
Dicas de Uso para a Construção de Páginas
Web
HTML
Avançado
Tutorial de HTML Avançado todos os detalhes imprescindíveis para
publicar
suas páginas na
teia mundial, os comandos mais avançados de HTML,
que levarão aos novos - e
também muitos dos velhos - Internautas,
quase tudo que deve-se saber para se ter uma
presença na WEB.
Uma página HTML é na verdade um conjunto de comandos e textos,
digitados no formato texto puro (por isso muita gente usa o NOTEPAD para escrever páginas
para a WEB) que determinam aos browsers a maneira de
apresentar a página numa tela de microcomputador. Uma página HTML pode
ser construída com os comandos que foram apresentados na página de HTML
Básico. Mas para sua página se destacar das demais, além de sua própria
inventividade e criatividade, você deve lançar mão de alguns outros comandos TAG.
Diversos TAGs são considerados avançados, sendo na verdade um pouco relativa essa
classificação. Muitos poderão perguntar: porque tal TAG é básico, e porque aquele
outro TAG é avançado?. Para efeito deste Site consideraremos TAGs AVANÇADOS aqueles
TAGs que trazem melhorias estéticas sensíveis às páginas HTML.
TAG:
<ol>
Comando:
Lista Ordenada
Objetivo do TAG:
O tag <ol> é utilizado para apresentar uma lista de itens,
ordenados em seqüência, como uma lista numerada, dando indicação de uma prioridade. A
ordem é definida na digitação do programador, ficando a colocação dos números para o
browser. Uma lista ordenada pode ser endentada.
Uma lista ordenada deve obrigatoriamente
começar pelo tag <ol> e ser seguido pelos tags <li>,
denominados List Item (Item de Lista).
Sintaxe Básica:
<ol>
<li> linha número 1
<li> linha número 2
<li> linha número 3
..........
<li> última linha
</ol>
As listas aparecem numeradas, começando por 1, passando por 2, 3, etc.. Entretanto é
possível alterar o tipo de numeração dos elementos da lista.
O atributo TYPE permite alterar o tipo de
numeração:
(TYPE=A) - Letras em Maiúsculas; ex.: A, B, C ...
(TYPE=a) - Letras em Minúsculas; ex.: a, b, c ...
(TYPE=I) - Numerais Romanos em Maiúsculas; ex.: I, II, III ...
(TYPE=i) - Numerais Romanos em Minúsculas; ex.: i, ii, iii ...
(TYPE=1) - ou os Números normais; ex.: 1, 2, 3 ...
Exemplo: <ol>
<li>Clique no arquivo desejado para download.
<li>Na caixa de diálogo digite o nome do arquivo.
<li>Clique 'OK' para dar download no arquivo p/o drive.
</ol>
Aparece como:
Clique no arquivo desejado para download.
Na caixa de diálogo digite o nome do arquivo..
Clique 'OK' para dar download no arquivo p/o drive.
Objetivo do TAG:
O tag de Lista Não-ordenada é utilizado para apresentar uma listagem de itens que não
têm o objetivo de definir uma seqüência ou uma prioridade para os itens.
Uma Lista
Não-Ordenada deve começar sempre com o tag <ul> o
qual deve ser imediatamente seguido pelo tag <li>
(list item). Uma lista não-ordenada pode ser endentada.
O desenho da marca da lista possui uma seqüência pré-determinada pelo HTML, que vai
do disco cheio, passa pelo círculo vazado, e chega até o quadrado cheio. Cada marca vai
ser representada de acordo com seu nível de indentação. O atributo TYPE
permite alterar tal definição, que deve ser especificada assim:
TYPE=disc TYPE=circle TYPE=square
Sintaxe Básica:
<ul>
<li>linha que aparece nesta posição <li>linha que aparece nesta posição
<li>linha que aparece nesta posição </ul>
Exemplo: <ul>
<li>Primeiro item nesta lista
<li>Segundo item nesta lista
<li>Terceiro item nesta lista
</ul>
Objetivo do TAG:
O tag de Tabela é utilizado para apresentar uma listagem de itens que devem se dispor, na
página, num formato tabular. Isto é, devem ser mostrados dados em linhas e colunas,
representando um conjunto de 2 elementos, tal como vendas de produtos por mes.
Uma
Tabela deve começar sempre com o tag <table> o qual
deve ser imediatamente seguido pelos tags <tr> (linha
da tabela) e <td> (célula
de dados da tabela). Uma tabela pode ser endentada, isto é, uma célula de uma tabela
pode conter outra tabela (desde que inteiramente definida dentro da fronteira daquela
célula - isto é: um conjunto <table> ... </table>
inteiramente contido dentro de um conjunto <td> ... <td>. O
final da tabela é definido pelo tag </table>.
Pode-se especificar ou o tamanho exato da largura da tabela, medida em
pixels, ou a largura da tabela como uma porcentagem da largura atual da janela do browser
com o atributo WIDTH="valor ou porcentual";
Pode-se especificar ou o tamanho exato da altura da tabela, medida em
pixels, ou a altura da tabela como uma porcentagem da altura atual da janela do browser
com o atributo HEIGHT="valor ou porcentagem";
Pode-se definir a espessura das bordas com o atributo BORDER (se
border="0" então a tabela fica sem as bordas);
Pode-se especificar o alinhamento do texto dentro das células através do atributo
ALIGN;
Pode-se definir o espaçamento entre as células com o atributo CELLSPACING
(cujo valor padrão é igual a 2);
Pode-se definir o valor da distância do texto para as bordas da célula com o atributo CELLPADING
(cujo valor padrão é igual a 1);
Pode-se definir que uma célula se expanda pelas próximas X células - merge de
células - tanto na direção da linha (com o atributo ROWSPAN) quanto na direção da
coluna (com o atributo COLSPAN);
Pode-se atribuir cores para as células com o atributo BGCOLOR);
Objetivo do TAG:
O tag <bgsound> é utilizado no Internet Explorer
para automaticamente tocar uma música .MIDI (também aceita formatos .WAV e .AU) à
partir da carga da página onde o tag é colocado.
Usando o atributo loop pode-se controlar a quantidade de repetições da
música.
ex: loop="3" executa a música 3 vezes, enquanto
loop="-1" executa a música infinita vezes.
Notar que este tag deve
ser colocado entre <head> ... </head>, e só funciona no Internet
Explorer.
Objetivo do TAG:
O tag <embed> é utilizado no Netscape para
automaticamente tocar uma música .MIDI (ou .WAV ou .AU) à partir da carga da página
onde o tag é colocado.
Pode-se usar 2 atributos com o tag embed: hidden="true" - esconde a janela do plug-in do Netscape
que toca a música; loop="x" - executa a música x vezes (se
desejado um loop infinito pode-se usar loop="true" ou loop="-1";
Notar
que este tag pode ser colocado em qualquer lugar da página, inclusa entre os tags
<head> ... </head>, e só funciona no Netscape.
Objetivo do TAG:
Uma das variantes da tag <img src> é a inserção do atributo
align atributo este que permite posicionar uma imagem com o
texto que vêm em seu entorno.
As 3 opções mais usuais para a colocação de uma
figura ao lado de um texto curto, são:
default: <img
src="nomefig.gif">Pequeno texto ao
lado da figura.
à esquerda: <img
src="nomefig.gif" align="top">Pequeno texto no topo da figura.
à direita: <img
src="nomefig.gif" align="middle">Pequeno texto no meio da figura.
As 2 opções mais usuais para a colocação de uma figura ao lado de um texto de
várias linhas, são:
à esquerda: <img
src="nomefig.gif" align="left">Figura com grande texto no lado esquerdo.
à direita: <img
src="nomefig.gif" align="right">Figura com grande texto no lado direito.
Esta duas últimas opções permitem que o texto
"flua" em torno da figura, e possa inclusive sair, pela parte de baixo,
envolvendo a figura também pela parte inferior da mesma.
Sintaxe Básica:
<img src="dedao2.gif" align="top">Estou alinhado com a
parte superior da figura
Abaixo indicamos, puramente como exemplo
didático, uma página com todos os elementos avançados de uma Página,
usando os TAGs básicos, descritos em HTML Básico, e nos TAGs
desta página. Veja bem como os comandos se integram, seu posicionamento, e veja o
resultado final clicando AQUI.
NB: O exemplo irá se desenvolvendo em paralelo ao TAGs
que vão sendo desenvolvidos durante nosso tutorial; mas sempre você poderá ver o
exemplo real, dos TAGs indicados abaixo, bastando clicar no link do parágrafo anterior
<html>
<head>
<tittle>Minha Segunda Página (A Avançada) </tittle>
</head>
<body>
<h1> Esta é minha Segunda Página - É Avançada</h1>
<hr>
<center><font size=5>Objetivos</font></center>
<hr>
<ol>
<li>Mostrar que sei programar bem com HTML
<li>Dar um bom exemplo para os novos Internautas
</ol>
<hr>
<p>Agora vou colocar 2 links para vocês darem uma olhada:</p>
<ul>
<li>Help Desk: <a href="http://www.geocities.com/Eureka/5330/"> no
Geocities</a>. <li>Internet: <a
href="http://members.tripod.com/~FPanizo/inetmen.htm"> no Tripod</a>.
</ul><hr> <center><table border="1" cellpadding="5">
<tr><td
align="center" colspan="4" bgcolor="#778899">Suporte de
Help Desk por Mês</td></tr>
<tr>
<td>Tipo</td>
<td align="right">Jul</td>
<td align="right">Ago</td>
<td align="right">Set</td>
</tr>
<tr>
<td>Word</td>
<td align="right">8</td>
<td align="right">12</td>
<td align="right">13</td>
</tr>
<tr>
<td>Excel</td>
<td align="right">11</td>
<td align="right">16</td>
<td align="right">14</td>
</tr>
</table></center>
<hr><center>
Para enviar um E-Mail, clique <a href="mailto: webmaster@superdicas.com">
AQUI</a>.
</center>
</body>
</html>
TAG:
<.. bgproperties="fixed">
Comando:
Fixa a Imagem de Background
Objetivo do TAG:
O tag <body> é utilizado para defenir a parte do arquivo que
corresponde ao corpo da página. O parâmetro bgproperties define que a imagem que é
definida como de fundo fica fixa, não se movimentando com o texto quando o Internauta vai
subindo ou descendo na página. Apenas o texto se mexe. Esse parâmetro, portanto, define
uma "marca dágua" para a figura.
Atenção: não temos condição de dar suporte direto para todos os visitantes;
use nosso
Super Fórum Web Design para poder enviar suas dúvidas. O registro é gratuito!
Para um suporte diferenciado use o nosso
Clube do Help Desk.
