| Tutorial
de HTML
|
A criação de uma home page na Internet é pratica cada vez mais freqüênte entre empresas que precisam divulgar sua imagem e seus produtos e entre pessoas que desejam compartilhar seus interesses com outras. Elaborar uma página é uma tarefa bem mais simples do que se imagina. Não é preciso ser programador nem técnico. Este guia mostra os passos e os comandos da linguagem HTML necessários para criar uma página completa, com imagens, tabelas, link para outras páginas e frames.
Como criar uma página Web
Uma página da Web é composta de textos e comandos especiais (tags) de uma linguagem de programação chamada HTML, abreviação de Hiper Text Markup Language. Ela é bastante simples e tem como finalidade básica formatar o texto exibido e criar ligações entre as páginas, gerando documentos com o conceito de hipertexto.
Assim como em qualquer outra linguagem, o programador deve escrever o código-fonte seguindo as regras de sintaxe. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos ou as tags para formatar e acessar recursos da Web. O código-fonte pode ser escrito usando o mais simples do editores de texto. Até o programa Bloco de Notas (Notepad) do Windows pode ser usado. Contudo, a forma mais prática e produtiva para escrever uma página Web é usar um editor HTML.
O que é HTML tags
Quando um browser exibre uma página Web, ele lê o texto da página e procura símbolos especiais denominados tags, que dizem como o texto ou informação devem ser exibidos. Por exemplo: uma tag pode dizer que um texto deve ser mostrado em negrito, em itálico, com certo tipo de fonte etc. Além do aspecto físico do texto, uma tag pode indicar que um determinado trecho representa, na verdade, o endereço de outras páginas, que devem ser acessadas no caso de o texto ser clicado.
As tags normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. Contudo, exibem várias tags individuais.
As tags são identificadas por ser envolvidas pelos sinais "<>" ou "</>". Entre os sinais "<>" são especificados os comandos propriamente ditos.
No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando a barra de divisão "/", indicando que a tag está finalizando a marcação de um texto.
O formato genérico de uma tag é: <Nome da tag>textto</nome da tag>.
A estrutura de uma página HTML
Assim como em outras linguagens, existem algumas estruturas básicas que identificam partes de um programa HTML.
O comando <HTML> é usado em par com o comando </HTML>. Ele delimita a área dos comandos da linguagem HTML. O par de comandos <HEAD></HEAD> é usado para especificar algumas tags de linguagem. A mais importante delas serve para criar uma expressão que aparece na linha de título da janela do browser. O par de comandos <BODY></BODY> deve ser usado para envolver todos os comandos de formatação da página.
Os principais elementos de uma página HTML
Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links - estes últimos responsáveis pela chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de comandos específicos da linguagem.
Acentuação/Caracteres Especiais
As notações
presentes em marcações, devem ser representadas com notações
especiais para que possam ser exibidas em tela. Estas notações
especiais sempre se iniciam por &(e comercial) e encerram-se com ;(ponto
e vírgula).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Segue abaixo o padrão
para acentuação. ISO Latin-1 alphabet -, semelhante ao utilizado
para exibir caracteres das marcações, e que poderá
ser visualizado pela grande maioria das máquinas.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
A primeira etapa para fazer o layout do texto é definir os cabeçalhos. São linhas do documento que aparecem com um tamanho de letra diferenciado do restante do texto com a finalidade de identificar o início de uma seção ou de um tópico. Existem seis tamanhos ou modelos de cabeçalho. O comando H tem a seguinte sintaxe:
<Hn>Texto do cabeçalho</Hn>.
No caso, "n" deve ser substituído por um número de 1 a 6.
O maior cabeçalho é especificado com o comando H1 e o menor
com o comando H6.
Existem outras formas
de criar linhas de texto com tamanho e tipo de letra diferentes. Contudo,
os comando de cabeçalhos são a forma mais rápida de
conseguir este efeito.
Parágrafos e quebras de linha
De nada adianta você ter cabeçalhos se não tiver um conteúdo que os siga. Nas páginas HTML, você pode digitar o texto exatamente no lugar onde deseja que ele apareça na tela, da mesma forma que faz com um editor de texto comum.
O comando <P>
A diferença principal entre a página HTML e o editor tradicional é que a página não reconhece o fim de um parágrafo quando se pressiona a tecla Enter. Você precisa forçar o fim do parágrafo e a quebra de linha usando comandos especiais. O comando responsável pela quebra de parágrafo é o <P>. Sua sintaxe é: <p>.
Além do comando <P>, que avança o texto para o próxima linha, você pode criar uma separação de blocos de texto usando o comando <HR> (Horizontal Rule), que insere uma linha divisória no local onde é especificado. Note que o comando <P> é obedecido e executado, independentemente do redimensionamento da janela.
O comando <BR>
O comando <p> insere uma linha em branco imediatamente após sua especificação. Em muitas situações, você precisa quebrar a linha e continuar o texto na linha seguinte. Nessa situação, o comando que deve ser utilizado é <BR>.
Muito bem, você já sabe como criar título e inserir texto na página HTML. Com isso, já poderia escrever documentos da mesma forma que faz com o seu editor de texto. Vejamos, agora, como melhorar a aparência do texto.
Assim como no editor de texto, você pode criar uma série de efeitos no documento, modificando o tamanho ou o tipo da fonte. Todos os comandos que alteram o estilo do texto são do tipo liga-desliga, ou seja, precisam ser especificados em pares, marcando o início e o fim do trecho que sofrerá a formatação.
Os principais comandos
de estilo de texto são:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Como organizar o texto em seqüência de itens
Assim como os cabeçalhos, outras forma de estruturar um documento HTML é a utilização de listas. Estas podem funcionar como sumário, menu ou resumo do conteúdo e são excelentes como ponto de partido para acessar outras partes de um documento. Existem basicamente dois tipos de lista: as não-ordenadas, que encadeiam uma série de itens sem numerá-los; e as ordenadas, que atribuem um número a cada elemento.
O comando <UL>
Para criar uma lista não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista não ordenada (Unordered List) é <UL>, que deve envolver o primeiro e o último item da lista. Cada item deve ser especificado precedido pelo comando <LI> (Line Item).
<UL>
<LI>texto do item n...
O comando <OL>
Para criar uma lista ordenada, você deve usar um conjunto de comando cuja sintaxe básica é mostrada a seguir. O comando que gera a lista ordena (Ordered List) é <OL>, que deve envolver o primeiro e o último item da lista. Cada item, nesse caso, também deve ser precedido do comando <LI>(Line Item).
<OL>
<LI>texto do item n...
Listas aninhadas
Você pode aninhar diversas lista para criar estruturas hierárquicas. Também é possível misturar listas ordenadas e não ordenadas. Primeiramente, você vai ver como funciona o aninhamento de listas não ordenadas.
Listas não ordenadas aninhadas
Note que, para cada nível de lista, o browser mostra um marcador (símbolo) diferente para facilitar a visualização das páginas. Você deve prestar bastante atenção ao casar todos os comandos. Ou seja, todo comando <OL> aberto deve ser fechado por um comando </OL>. Se você esquecer um deles, a estrutura das listas ficará incorreta.
Aprenda a interligar os documentos
Uma das principais
atrações da Internet é a apresentação
de documentos com o conceito de hipertexto - ou seja, uma página
que se liga a outras por meio de conexões especiais chamadas hiperlinks.
Com esse conceito, você pode criar documentos que façam referência
a outros e permitam ao usuário acessar essas referências,
não importando se estão em outra página da Web, no
seu micro ou em qualquer sevidor de rede.
O uso de hipertexto
também facilita a criação de documentos extensos cujas
seções ou tópicos podem ser rapidamente acessados
mediante os links. Imagine que você cria uma página sobre
o determinado assunto no qual vários tópico são abordados.
Assim como um livro, você cria todo o texto do documento e depois
o insere no início. Se quiser acessar diretamente o texto de um
tópico, basta dar um clique no item do tópico no sumário
e ele será imediantamente exibido.
O grande atrativo da Internet e da Web é a possibilidade de trazer o mundo para a sua mesa ao clique de um mouse. Imagine que você está criando uma página com informações sobre um pintor famoso. Você pode acrescentar imagens na página (no tópico Imagens veremos como fazer isso) e também criar links para que o leitor possa acessar outras páginas da Web com informações sobre o pintor Velásques, poderia definir um link para o site do Museo del Prado, que exibe vária obras desse mestre. Para exemplificar o uso de hipertexto, vamos mostras alguns modelos que começam com a criação de hiperlinks para diferentes partes de um documento, para outras página no diretório e micro do usuário e, finalmente, para qualquer lugar da Web.
Ligando seções de uma página
Para dominar o uso do hipertexto, o programador HTML deve conhecer bem o funcionamento de dois comando da linguagem: A NAME e A HREF.
Saiba como usar uma âncora
Para interligar partes de uma página, você precisa criar uma âncora no início de cada seção.
Uma âncora é um ponto de referência ou endereço que será acessado por um link. É usada dentro de um documento para marcar o início de uma seção. A âncora recebe um nome que será mencionado pelo link que a acessará.
O comando usado para
criar uma âncora é:
<a name="#nome
da ancora">Texto para linkar</a>
Como exemplo, poderíamo
ter a linha mostrada a seguir:
<a name="#parte1">Introdução</a>
Criando o link para a âncora
Para criar um link
para um âncora, você deve usar o comando A HREF, especificando
o nome da âncora que deseja acessar e um texto que será convertido
em hipertexto, indicando que ele remete a algum objeto. O texto especificado
mudará de cor e ficará sublinhado para se destacar.
Sintaxe:<a href=)"#xxxxx">Texto
usado como hipertexto</a>
Em nosso caso, um
exemplo poderia ser: <a href="#parte1>Introdução do produto</a>.
O símbolo "#" avisa o browser para procurar o link no documento
atual.
Quando você
clica no hipertexto, ele exibe a parte do documento que contém a
âncora, colocando-a, sempre que possível, no alto da tela.
Interligando arquivos locais
Fazer a ligação de um texto com uma página local é uma tarefa bastante simples. Você precisa apenas especificar o nome completo do arquivo que será chamado, com o comando A HREF. <a href="nomearquivo.htm">Nome na página</a>.
<a href="nomearquivo.htm#parte2">Nome na Página</a>
Ela vai um pouco mais longe e faz referência a uma âncora chamada "parte2" do documento denominado arquivonome.htm. Note que uma âncora é sempre indentificada pelo sinal "#". A terceira linha faz referência a uma âncora do próprio documento.
Conectanto arquivo de outros servidos
Agora a coisa fica um pouco mais séria. É aqui que está toda a graça da Internet. Com o uso de esquema de endereçamento chamado URL, consegue-se acessar um arquivo localizado em qualquer servidor do planeta que esteja conectado adequadamente à Web.
URL é abreviação
de Uniform Resource Locator e serve para especificar a localização
de páginas e arquivos em diretórios de servidores da Web.
Esse esquema é parecido com aquele que você usa para acessar
um programa armazenado num diretório de sua máquina, ou seja,
você tem de especificar o caminho (path) do arquivo para que ele
seja encontrado. Na Web, você indica a URL do arquivo. Veja dois
exemplos:
Acessando um arquivo
pelo DOS: C\msoffice\word\winword.exe
Acessando uma página
pela Web: http://www.xispita.com/demo.html.
Uma URL é composta de duas partes principais. A primeira é o protocolo Internet do documento e a segunda é endereço do servidor e da página. A sintaxe é: protocolo://servidor.arquivo
Protocolo é o tipo de servidor que está sendo acessado, e servidor é o computador que contém a página.
Arquivo pressupõe o caminho completo do arquivo. Por exemplo, para acessar a página do Aldisio, a URL da página é: htp://www.geocities.com/capecanaveral/galaxy/2310. Esse endereço pode ser escrito na linha de URL do browser, para acessar diretamente a página.
Pode, também, ser indicado dentro de um documento HTML mediante o comando A HREF, que cria uma ligação ou link para a URL especificada. <A HREF="http://members.8op.com/AutoCAD">Maurijones Web Design</a>
Como Trabalhar com fotos e ilustrações
Incluir uma imagem em sua página WEb é tarefa bem fácil. Exige apenas que você tenha disponível a figura e que ela esteja num dos formatos aceitos pelo browser. O formato de arquivo gráfico padrão aceito pela Web é o GIF e JPEG(Joint Photografic Engineering Group), que reduz até dez vezes o tamanho de uma image. Os browsers Netscape e Internet Explorer trabalham com esses dois tipos de arquivo. Atenção: imagens em BMP do Windows não servem. Elas precisam ser convertidas para os formatos acima. Existem diversos programas que transformam arquivos gráficos BMP e de vários outros formatos em GIF. Entre eles estão o shareware Paint Shop Pro, o Picture Publisher e Photostyle. Antes de inundar suas páginas de imagens, lembre-se de que, ao usar a rede, a velocidade transmissão de ilustrações é muito reduzida. Dependendo do tráfego, ela cai para dezenas de bytes por segundo. Portanto, o tempo aumentará para completar a página.
O comando <IMG>
O comando HTML usado para inserir uma imagem na posição atual onde ele é especificado é:
<IMG SRC="nomedoarquivo.gif"> ou <IMG SRC="nomedoarquivo.jpg">
Se você colocar uma imagem perto de um texto, poderá especificar seu alinhamento em relação ao texto que está a seu redor.
Como padrão, a imagem é alinhada colocando o seu fundo (parte inferior) na mesma linha do texto. Com a diretiva Align, você pode alinhar o texto pelo fundo (bottom), que é o padrão, pelo meio (middle) e por cima(top).
<IMG ALIGN="top"
SRC="image.gif">
<IMG ALIGN="middle"
SRC="image.gif">
<IMG ALIGN="bottom"
SRC="image.gif">
Como mostrar informações em linhas e colunas
O trabalho com tabela parece difícil a princípio. Todavia, depois de conhecidos os comando de formatação, a tarefa se torna bastante rápida e fácil. As tabelas têm uma estrutura parecida com a de uma planilha eletrônica: compõem-se de linhas e de colunas cujas interseções formam o que se chama de células. Uma célula pode conter um texto simples, um hipertexto ou até mesmo uma imagem. A seguir, vamos ver os comando relativos a tabelas.
<TABLE>/TABLE>
Uma tabela é criada com o par de comandos <TABLE> e </TABLE>. Entre eles, devem ser especificadas as tags responsáveis pela criação das linhas e células, títulos, bordas e alinhamento da tabela. Como padrão, uma tabela é criada sem borda, ou seja, não aparecem as linhas horizontais e as verticais que separam as células. Para visualizar:
<TR></TR>
Abreviação de Table Row. Essa tags são usadas para criar uma linha da tabela. Se uma tabela tiver cinco linhas, deverão ser indicados cinco pares desses comandos.
<TD></TD>
Abreviação de Table Data. As tags TD são usadas para especificar o conteúdo de uma célula. Esse comandos são usados em pares para cada célula de linha. Devem ser usados entre os comandos <TR></TR>. Ao contrário das planilhas, uma tabela não precisa ter todas as linhas com o mesmo número de células. A largura de uma coluna é definida pela largura da maior célula que faz parte da coluna. O conteúdo de uma célula é alinhado pela opção Align. Como padrão, o alinamento horizontal do texto é feito à esquerda (Align=left) e o alinhamento vertical, no meio da célula (Valign=middle).
<TH></TH>
Abreviação de Table Header. Esse par de comando é usado para criar células da mesma forma que os comando <TD></TD>, só que o texto é exibido em negrito e centralizado.
<CAPTION></CAPTION>
Permite a criação de uma legenda para a tabela. A legenda é um texto externo que aparece antes ou depois da tabela. Esses comando devem ser especificados após o comando Table, antes das tags TR. Uma legenda pode ser exibida no topo ou no pé da tabela, dependendo do valor atribuído à opção Align, que pode ser Top ou Bottom. O padrão é Top. A legenda sempre é centralizada horizontalmente.
A seguir encontram-se as opções que podem ser usadas com os comandos descritos:
BORDER
Esta opção
pertence ao comando Table. Se for especificado sem nenhum valor, uma linha
fina é criada em volta de todas as células. O valor 0 é
equivalente a não ter borda. Quanto maior o valor especificado,
mais grossa é a borda.
BORDER=<value>
ALIGN
Esta opção aparece em diversos comandos HTML, não só os relativos a tabelas. Serve para centralizar o texto dentro da célula ou da linha. Dentro do comando Caption, pode assumir os valores Top e Bottom. Nos comandos TR, TH ou TD, pode Assumir os valores Left, Center e Right.
VALIGN
É equivalente ao comando Align só que funciona para alinhar o texto verticalmente na linha ou na célula. Os valores possíveis são Top, Middle, Bottom e Baseline, Middle é o padrão.
NOWRAP
Esta opção pode aparecer em qualquer célula da tabela e indica que o texto da célula não pode ser quebrado para se ajustar ao seu tamanho.
COLSPAN
Esta opção pode aparecer em qualquer célula da tabela e especifica quantas colunas da tabela a célula deve ocupar. O valor padrão é 1.
ROWSPAN
Esta opção funciona como a anterior, só que especifica quantas linhas, para baixo, a célula deve ocupar. O valor padrão é 1.
CELLSPACING
Esta opção é exclusiva do Netscape e define o espaçamento, em pixels, entre as células da tabela.
CELLPADDING
Esta opção é exclusiva do Netscape e define o espaçamento, em pixels, entre as colunas e as linhas da tabela.
Agora que você tem um idéia dos comandos usados para criar tabelas, vamos ver alguns exemplos práticos.
Criando uma tabela simples
A lógica de
criação de uma tabela é a seguinte:
Use o comando <TABLE>
para especificar que uma tabela está sendo criada.
Use os comandos
<TR>...</TR> para criar uma linha da tabela.
Use os comandos
<TD>...</TD> para criar cada célula de uma linha
Use o comando </TABLE>
para encerrar a tabela. Use opções para mudar a aparência
da tabela.
Títulos de colunas
Com o par de comandos <TH> (Title Heading), você pode especificar títulos para as colunas. Esses comandos funcionam da mesma forma que os comandos <TD>, só que deixam o conteúdo da célula centralizado e em negrito.
Bordas
A criação de bordas pode ser útil em várias tabelas, mas em muitos casos as bordas não são necessárias. Você pode criar uma tabela sem bordas para montar um menu em que as opções não fiquem unicamente na vertical, como ocorre quando se usam os comandos para a criação de listas.
Bom chegamos então ao fim deste pequeno e curto Tutorial de HTML, tomara que você tenha gostado, aprendendo HTML aconselho a aprender um pouco de JavaScript para da mais vida e modernização em sua Páginas. Nesta mesma Home-Page você encontrá alguns exemplos de scripts.
 |
 |