TUXEDO - Tutorial HTML

Tutorial HTML

_____________________________________

Introdução (topo)

A criação de home pages é uma tarefa que pode ser executada por qualquer internauta, iniciante ou experiente.
Uma home page é criada pelos comandos de uma linguagem chamada "HTML". Depois de aprender meia dúzia de comandos, o internauta já pode criar uma home page.
Um programa "HTML" nada mais é do que um arquivo de texto, que pode ser gerado até pelo Bloco de Notas do "Windows", que contém os comandos da linguagem.
Esse arquivo deve possuir a extensão .htm, como menu.htm. Para criar e testar uma home page, o usuário precisa ter apenas um navegador instalado na máquina.
Não é preciso estar conectado à Internet. Uma página em "HTML" tem três elementos básicos: texto, hiperlinks e imagens.
A parte textual da home page é composta pelo texto acomodado em parágrafos, cabeçalhos e linhas divisórias. As imagens são fotos ou figuras gravadas nos formatos gráficos JPG ou Gif. Os hiperlinks são um tipo especial de texto que, ao ser clicado, instrui o navegador para abrir outra página ou imagem.

Estrutura do HTML (topo)

Todo programa "HTML" deve possuir obrigatoriamente alguns comandos que identificam aquele texto como uma home page para o navegador. Alguns comandos da linguagem são do tipo container ou envolventes. Eles precisam ser especificados duas vezes, abrindo e fechando uma área do programa.
O comando <HTML> deve ser o primeiro e o último comando do programa. Note que o comando que fecha possui uma barra </HTML>.
O comando <HEAD> </HEAD> é opcional, mas deve ser incluído, pois é usado para especificar diversas características da página. O comando <TITLE> </TITLE> exibe o texto que envolve na barra de título do navegador. O par <BODY> </BODY> envolve todos os comandos que são efetivamente responsáveis pela formatação da página.
Abaixo segue a ordem de comandos obrigatórios para a estrutura de uma home page:
<HTML>
   <HEAD>
    <TITLE>Nome</TITLE>
   </HEAD>
  <BODY>
  </BODY>
</HTML>
Depois de digitar os comandos acima, o usuário deve entrar com o texto que será exibido na página e os comandos especiais para formatar o texto ou inserir imagens e links. Esses novos comandos devem ser digitados entre os comandos <BODY> </BODY>.
Usando o Bloco de Notas do "Windows", você deve digitar o texto normalmente. Contudo é importante lembrar que o navegador só entenderá que você terminou um parágrafo se digitar um comando <P>, que irá deixar uma linha em branco.
O comando <BR> também pode ser usado para iniciar uma nova linha. De nada adianta pressionar a tecla Enter no fim de um parágrafo. O navegador não entende esse comando.

Cabeçalhos (topo)

Para dividir uma seção da página, use o comando <HR>, que insere no local uma linha divisória que toma toda a largura da tela.
A linguagem "HTML" possui seis tamanhos diferentes de cabeçalhos. O texto de um cabeçalho ou subtítulo deve ser especificado dentro do comando <Hx> </Hx>, em que x é um número que pode variar de 1 (o maior tamanho) até 6 (o menor). Exemplo: <H1>A Grécia</H1>. O browser automaticamente embute uma linha em branco após o cabeçalho.
Para alterar o tamanho ou a cor de um texto, use o comando <FONT /SIZE=x COLOR=cor> texto</FONT>, em que x é um número de 1 (o menor) a 7 (o maior tamanho que é aplicado ao texto envolvido pelo comando). O parâmetro color= é opcional e pode ser usado para especificar uma cor diferente.
Podem ser usados nomes de cores ou códigos. Exemplo: blue, yellow, green, white etc.
Para inserir uma imagem, use o comando <IMG SRC="nome">, em que nome deve ser substituído pelo nome do arquivo de imagem. Exemplo: foto.gif, toto.jpg. A imagem é sempre exibida no local onde o comando foi inserido.
Se for colocada no meio de um texto, a imagem aparecerá no meio da linha, envolvida por ele. Pode-se, contudo, alinhar a imagem pelo parâmetro Align. Exemplo: <IMG SRC="acro.jpg"> <align=left>.
O parâmetro Align aceita os valores left, right e center para exibir a imagem à esquerda, à direita ou centralizada na linha onde foi colocada.

Links (topo)

Um link é criado pelo comando <A HREF="endereço">Texto</A>, em que endereço é o endereço da Internet no estilo www. NomeDoSite.com.br ou o nome do arquivo que será chamado. Texto é o texto que servirá como link e que aparece na cor azul e sublinhado.
No exemplo da semana, os links são <A HREF="weblogger.gif">Weblogger</A> para chamar uma imagem.
E <A HREF="index.htm">Home</A> para chamar uma outra home page.
Um tipo especial de link permite ativar o programa de e-mail automaticamente. Basta especificar, no lugar do endereço, mailto: seguido do endereço eletrônico. Exemplo: <A HREF="mailto:suporte@weblogger.com.br">Dê sua opinião</A>.
Somente com esses comandos já é possível criar uma home page. Nas próximas edições, a Folha trará mais detalhes desses comandos, além de novos tópicos, como criar tabelas e listas e inserir som em uma página.

Tabelas (topo)

ma tabela pode servir para exibir dados em forma colunar ou para posicionar outros elementos dentro da página.
São três os comandos básicos para a criação de uma tabela. Todos eles do tipo abre-e-fecha.
<TABLE></TABLE> define a tabela e deve envolver os demais comandos.
<TR></TR> define uma linha da tabela. Se a tabela possuir três linhas deverá conter três pares deste comando.
<TD></TD> Cria as colunas, ou células de cada linha da tabela. Se a tabela tiver quatro colunas, dentro de cada comando <TR></TR> deverão existir quatro pares destes comandos.
Para inserir uma linha de comentário no progrrama HTML e que não é executad pelo browser use os caracters <!-- para iniciar a linha. Veja um exemplo de uma tabela com duas linhas e três colunas

<TABLE BORDER="1">
  
   <TR>
    <TD>Linha1 Col 1 </TD>
    <TD>Linha1 Col 2</TD>
    <TD>Linha1 Col 3</TD>
   </TR>
  
   <TR>
    <TD>Linha2 Col 1 </TD>
    <TD>Linha2 Col 2</TD>
    <TD>Linha2 Col 3</TD>
   </TR>
</TABLE>

Dentro do comando <TD></TD> você pode colocar qualquer texto, imagem ou comando HTML.
O comando <TABLE> de abertura aceita vários parâmetros. Um deles é o parâmetro border. Se não for especificado a tabela terá uma linha envolvendo todas as células. Se for especificado zero como valor, nenhuma borda é exibida. Bordas podem ser exploradas para exibir imagens envolvidas por molduras. Uma tabela sempre vai ocupar a largura total da página a menos que seja especificada a opção width=x ond x é um número em pixels ou um percentual em relação a largura da janela. Exemplo <table width=200> ou <table width= 50%>. Através do parâmetro align=left/center/right pode-se especificar a posição da tabela dentro da largura da página.
Você pode aninhar tabelas, ou seja criar tabelas dentro de tabelas. Por exemplo, dentro de uma célula de uma tabela você pode criar a definição de outra tabela. Tome bastante cuidado ao criar tabelas pois todos os comandos tem que abrir e fechar em pares. Um deles que fique sem o correto fechamento vai causar efeitos imprevisíveis na exibição da tabela. Se você acessar o tutorial online (www.ramalho.com.br/folha.htm) verá dois exemplos de tabelas sob o item Semana 4. O uso de tabelas oferece bastante opções para criar layouts de páginas interessantes. Por exemplo, você quiser criar uma página com colunas de texto como um jornal basta criar uma tabela com apenas uma linha e duas colunas ou três colunas, colocando o texto dentro de cada comando <TD>

Listas (topo)

A linguagem "HTML" permite a criação de listas que podem ser usadas para enumerar fatos ou também como um menu para acessar outros documentos do seu site e de endereços da Internet.
As listas são classificadas em listas ordenadas, criadas com o par de comandos< OL></OL>, que colocam números na frente dos itens da lista, e listas não ordenadas, criadas com <UL></UL>, que colocam marcadores. Independente do tipo de lista usado, cada item deve ser precedido pelo comando <LI>. Veja exemplo de construção dos dois tipos de lista.

<h1>Lista não ordenada</h1>
  <UL>
    <LI> Primeiro item da lista
    <LI> Segundo item da lista
    <LI> Terceiro item da lista
    <LI> Quarto item da lista
  </UL>
  <h2>Lista ordenada</h2>
  <ol>
    <LI> Primeiro item da lista
    <LI> Segundo item da lista
    <LI> Terceiro item da lista
    <LI> Quarto item da lista
  </OL>

Se optar por usar uma lista não ordenada, poderá opcionalmente especificar três tipos diferentes de marcador. Para isso, basta acrescentar a cláusula type= square/circle/disc ao comando <UL>, onde square coloca um quadrado, circle, um círculo e disc, uma bolinha como marcador.
<h2>Exemplo de marcadores alternativos</h2>

  <UL type=square>
    <LI> Primeiro item da lista
    <LI> Segundo item da lista
    <LI> Terceiro item da lista
  </UL>
  <UL type=circle>
    <LI> Primeiro item da lista
    <LI> Segundo item da lista
    <LI> Terceiro item da lista
  </UL>
  <UL type=disc>
    <LI> Primeiro item da lista
    <LI> Segundo item da lista
    <LI> Terceiro item da lista
  </UL>

O primeiro exemplo mostra tipos de listas. Você pode aninhar listas, ou seja, colocar uma dentro da outra e até mesmo combinar tipos diferentes. A combinação de uma lista com a utilização de links cria práticos índices. O menu usado para acessar as lições foi criado usando uma lista ordenada, onde seus itens são links.
Se estiver em outro diretório, use "file://" antes do caminho do arquivo. Para carregar um arquivo chamado lista que estivesse num diretório chamado exemp do drive e:, o comando seria o seguinte:
<A HREF="file://e:/exemp/lista.htm">Exemplo <A>
Quando o arquivo estiver na Internet, preceda o seu nome com o protocolo usado pelo site, como "http://", "ftp://" etc. A minha página é acessada com o comando <A HREF="http://www.weblogger.com.br"> Weblogger Brasil </A>.

Âncoras (topo)

Se uma página for muito extensa, você pode criar âncoras (como aquelas ali no início da página), que são marcas colocadas dentro do texto e usadas como endereço de link. Para criar uma âncora de identificação, deve-se usar o comando <A NAME="NomeDaÂncora"> </A>.
Um documento que contenha três partes poderia ter três âncoras colocadas em pontos estratégicos:

<A NAME="parte1"> </A>
***texto
<A NAME="parte2" ></A>
***texto
<A NAME="parte 3" ></A>
***texto

Para criar um link que acesse diretamente a parte três, deve ser especificado o comando <A HREF seguido do nome da âncora antecedido pelo sinal "#".
<A HREF="#parte3"> Acessa a terceira parte</A>
Se você desejar acessar uma âncora em outro documento, especifique o nome do documento acrescentado do nome da âncora:
<A HREF="resumo.htm#parte3"> Acessa a terceira parte</A>

Música e Video (topo)

Muitos acham que é uma verdadeira Missão impossível incluir vídeo e áudio nas páginas html.
Vários tipos de arquivo de som são executados diretamente pelo browser ou por plugins.
Os principais tipos de formato de audio suportados são do tipo .WAV, no formato .AU ou ou no formato .mpeg ou um dos plugins que se tornaram mais populares é o Real Audio, que permite a execução de audio sob demanda, ou seja o audio é transimitido instantaneamente sem que seja necessário fazer um download ou ler todo o arquivo de som.
Um dos motivos do seu sucesso é a possibilidade de transmissão ao vivo.
Ao contrário dos outros formatos de som a música no formato .ra não pode, na maioria dos casos, ter o seu arquivo gravado no seu disco, apenas um arquivo de parâmetros, indicando onde está a música em um servidor real audio é armazenada no disco.
Para ouvir esta música, além de estar conectado a internet você precisa possuir o plugin Real audio.

Em alguns segundos você estará ouvindo uma música muito popular. Ela está sendo tocada com o comando :

<EMBED SRC='MARARENA.MID' WIDHT=0 HEIGHT=0 AUTOSTART='TRUE'>

Executando Vídeos através de Links

Você pode criar um link para um arquivo de vídeo. Ao clicar sobre o ícone, será aberta uma janela do programa acessório encarregado de executar o vídeo.
Veja um exemplo onde um arquivo do tipo avi é executado

Veja a Terra girar.
É executado o arquivo TERRA.AVI
Veja uma corrida Stock Cars em circuito oval.
É executado o arquivo race.mov
Veja uma geleira muito, muito rapidamente
É executado o arquivo glacier.mpeg

1- Este comando funciona tanto no Netscape Navigator como no Internet Explorer
2- Os parâmetros width e height são opcionais. Quando especificados com valor 0 eliminam a exibição do painel do programa media player.
3- O parâmetro autostart=true faz com que a música seja automaticamente executada.
4-Para fechar a janela do Media Player clique no botão fechar (x).
5-Para iniciar a execução do vídeo do tipo mov que é aberto em outra página clique no botão play (>).
6- Os geradores de blogs (Weblogger, Blogger Brasil e Blig/HpG) só armazenam imagens em nossos servidores.

_____________________________________

Este tutorial foi retirado do site Weblogger