CURSO DE HTML

COMEÇANDO ...

Toda home page é composta de vários arquivos que podem ser de imagens, sons, HTML e outros.

Os arquivos com extensão HTM são aqueles que dão as instruções ao browser. Podem ser feitos e visualizados em qualquer editor de texto, mas existem vários programas para facilitar o processo. Mas é importante que o usuário saiba pelo menos o básico de sua linguagem de programação: HTML.

É recomendado que seja criado um diretório especial em seu computador para armazenar todos os arquivos de sua home page.

Quando pronta, a home page pode ser enviada para um computador que a hospede na Internet através de um programa de FTP. Várias empresas se encarregam de deixar estes arquivos disponíveis 24 horas por dia a toda Internet. Geralmente se paga uma taxa proporcional ao tamanho em bytes do site para que uma empresa o hospede. Mas é muito comum se encontrar na rede, empresas como Geocities e outras, que não exigem nenhum pagamento pelo serviço de hospedagem de sites.

Depois de pronta, sua home page poderá ser facilmente encontrada na rede, se você cadastrá-la nos principais mecanismos de busca da Internet.

INTRODUÇÃO

1) Introdução
2) TAGS HTML e o Arquivo HTM básico
3) TAGS Básicas de texto
4) Links e Imagens
5) Background - O fundo
6) Tabelas
7) Inserção de sons
8) Construção de frames
9) Dicas importantes

1) Introdução

É a linguagem de programação de hipertexto (documento com palavras ou imagens que levam para outras páginas com um clique) usada para fazer páginas para a World Wide Web .

Essa linguagem foi crescendo conforme foram sendo inventados browsers mais avançados com recursos de imagens, som e vídeo. É a estrutura básica de uma homepage, mas pode ser acompanhada por outros recursos como em Java ou em Shockwave.

Hoje é mais fácil programar

A HTML é constituída de apenas instruções em texto, apesar de web sites conterem imagens, sons e até vídeo. É que ela é quem dá as ordens dos arquivos que irão participar da página. Por isso um arquivo HTM (um documento de HTML) poderia ser feito em qualquer editor de textos.

Há alguns poucos anos, mas que para a informática, representam muito, quando a HTML nasceu, não existiam programas para facilitar sua programação.Era necessário realmente conhecer bem a linguagem. Hoje existem vários programas que ajudam, tornando o trabalho muito mais fácil e prático, sendo possível fazer uma página em minutos. Para ver uma lista dos principais programas veja ferramentas. Por isso só serão listados os principais comandos (ou tags )de HTML para que você não se perca em um monte de inutilidades.

BÁSICO

TAGS

Tags são os comandos ou instruções dadas em HTML. Quase sempre estão delimitadas pelos sinais < e > Para deixar uma palavra em negrito por exemplo usa-se a tag <B> e para indicar que acabou o negrito </B>

O arquivo HTM básico.

Esta é a estrura básica de um arquivo HTM (o arquivo mais simples possível):

<HTML>
<HEAD>
<TITLE>Título que aparecerá na Barra de Títulos do browser</TITLE>
</HEAD>
<BODY>
...............corpo do documento...........
.....................................................
.....................................................
</BODY>
</HTML>

O que está em amarelo é o que você substitui pelos dados de sua página. O resto é fixo.

O que fica entre as tags <html> e </html> é a sua página. O que fica entre <BODY> e </BODY> é o corpo de sua página, o que efetivamente aparecerá na tela do browser. E, entre <title> e </title> deve ficar o título da homepage (que aparecerá na Barra de título do browser e não no corpo da página !)

TEXTO

Tags de texto mais importantes

Agora que você já aprendeu como é o arquivo htm básico , pode começar a ver tags. Elas ficam após o comando <BODY> , no meio do seu texto. Após <BODY> você já pode começar a escrever o que quiser, mas para formatar o seu texto, é necessário que conheça estas tags.

Existem os tags de título, "headings", que vão do tamanho 1 até 6. Veja :

<h1>Título 1</h1>

Título 1

<h2>Títulol 2</h2>

Título 2

<h3>Título 3</h3>

Título 3

Agora quanto à formatação do texto:

<b>palavra </b> palavra em negrito
<i> palavra </i> palavra em itálico
<hr> insere uma barra horizontal
<br> quebra de linha
<p> pula uma linha
<center>palavra</center> palavra centralizada

Exemplo:

<HTML>
<HEAD>
<TITLE>Exemplo 1</TITLE>
</HEAD>
<BODY>
<h1>Exemplo 1</h1>
Este aqui é o texto. <p>
<b>Este aqui é o texto em negrito</b><p>
<i>E este o texto em itálico.</i>
</BODY>
</HTML>

Nosso exemplo apareceria assim no browser:

Exemplo 1

Este aqui é o texto.

Este aqui é o texto em negrito

E este o texto em itálico.

Também são importantes as tags de fontes. Veja:

<font face="Arial">Palavra </font>
A palavra terá a fonte Arial

<font size="2">Palavra </font>
A palavra terá o tamanho 2

<font color="red">Palavra </font>
A palavra terá a cor vermelha.

Podemos também combinar as três tags acima:

<font face="Arial" size="2" color="red">Palavra </font>

LINKS E IMAGENS

Inserindo links e imagens

LINKS

Links são os pontos clicáveis do documento HTML que levam a qualquer outro documento disponível na Internet.

Podemos fazer links internos, para documentos no mesmo servidor, ou links externos, para qualquer lugar na WEB. Ambos dependem da tag

<a href="nome-do-lugar-a-ser-levado">descrição</a>

Nome-do-lugar-a-ser-levado pode ser substituído por um nome de arquivo seu como por exemplo dados.htm ou por um URL como http://www.yahoo.com .

Descrição é o que vai aparecer sublinhado na home page indicando que pode ser clicado. Por exemplo se a descrição fosse "Clique aqui para visitar Webmasters":

Sintaxe: <a href="http://www.winbr.com/wm">Clique aqui para visitar Webmasters</a>

Ficaria assim: Clique aqui para visitar Webmasters

A descrição pode também ser uma imagem GIF ou JPG. Esse é um assunto que será abordado ainda nesta página.

Também existem os links de e-mail. Se você quer um lugar para os usuários deixarem e-mail faça assim:

<a href="mailto:seu email">Deixe um E-mail para mim ! </a>

IMAGENS

As imagens você faz em programas separados, em seu editor gráfico preferido. Mas os formatos ideais para home pages são GIF e JPG. Clique aqui para saber mais sobre esses formatos.

A tag para inserir uma imagem é a seguinte:

Na verdade, apenas <img src="nome do arquivo de imagem que vai aparecer"> já seria o suficiente, mas com o tempo você vai precisar usar os outros atributos.

Widht e height: As dimensões da imagem. Use se quiser que a imagem apareça em tamanho diferente do real. Também têm outra função importante: se estiverem presentes, as figuras só aparecerão depois que a página tiver sido carregada por completo.

Alt: Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.

Border: Tamanho da borda da imagem. Os browsers da Microsoft colocam uma borda na figura se este atributo estiver com um valor maios que 0. Para os browsers Netscape, a vantagem é ocultar a borda azul que indica hyperlink em volta das figuras clicáveis, quando o valor atribuído é 0.

BACKGROUNDS

Os Atributos da TAG <BODY>

Para acrescentar um fundo a página, para mudar a cor automática das letras e links, utiliza-se os atributos da tag <BODY>. Veja um exemplo:

Background: nome do arquivo GIF ou JPG que será o fundo da página.
Bgcolor: código da cor de fundo da página.
Text: código da cor das letras da página.
Link: código da cor dos links não visitados
Vlink: código da cor dos links visitados

Mesmo que você não tenha uma tabela com os códigos das cores, poderá usaro nome da cor em inglês. Exemplo:

Veja a coleção de backgrounds que selecionamos.

Tabelas

Fazendo Tabelas

As tabelas, além da função de organizar dados em linhas e colunas, têm uma função especial em HTML. Elas organizam a disposição de texto, imagens e links, lado a lado para uma melhor apresentação gráfica da página.

As tabelas são feitas a partir dos seguintes tags:

<table> e </table> indicam, respectivamente, o início e o fim de uma tabela
<tr> e </tr> indicam, respectivamente, o início e o fim de uma linha
<td> e </td> indicam, respectivamente, o início e o fim de uma célula

Veja um exemplo:

<TABLE BORDER=1>
<TR>
<TD> Linha 1, Coluna 1</TD>
<TD> Linha 1 , Coluna 2 </TD>
</TR>
<TR>
<TD>Linha 2, Coluna 1</TD>
<TD>Linha 2, Coluna 2</TD>
</TR>
</TABLE>

O que está em amarelo você pode substituir por texto, imagens, links, o que quiser.

Como se pode ver em BORDER=1 o tamanho de suas bordas podem ser definidos. Quando se dá o valor 0 (zero) as bordas não aparecem. E esse é um dos maiores "truques" dos designers para colocar imagens do lado de textos.

Veja como ficaria o exemplo:

Linha 1, Coluna 1	Linha 1 , Coluna 2
Linha 2, Coluna 1	Linha 2, Coluna 2

Sons

Inserido Sons MIDI

Os arquivos de som ideais para serem inseridos em uma home page são aqueles no formato MIDI.

O Internet Explorer 3.0 ou melhor são os únicos browsers que reconhecem o tag BGSOUND. Veja o exemplo:

<bgsound src="musica.mid" loop=2> O som musica.mid seria repetido duas vezes como som de fundo.

O código reconhecido pelo Netscape é o seguinte:

Frames

Construção de Frames

Frames são as divisões existentes em algumas páginas, como a WebMasters, que deixam o site com duas ou mais partes separadas na tela. O arquivo HTM responsável para a separação em frames, indica que arquivos irão ocupar cada frame quando a página for carregada e qual a porcentagem de extensão da tela de cada um. Vamos supor, para o exemplo abaixo, que desejamos criar uma página com 2 frames em colunas e que os nomes dos arquivos são 1.htm e 2.htm :

<html>
<head>
<title>Exemplo de página com Frames</title>
</head>
<frameset cols="30%,70%">
<frame src=1.htm NAME=indice>
<frame src=2.htm NAME=conteudo>
</frameset>
</html>

O arquivo de frames só precisa destes comandos mesmo. Mas toda vez, que você quiser que um arquivo com link em 1.htm apareça em 2.htm, é necessário acrescentar o atributo target="conteudo" ao tag <a href .

Exemplo em 1.htm:

<a href="soccer.htm" target="conteudo">futebol</a>

E para que soccer.htm seja visto livremente dos frames:

<a href="soccer.htm" target="auto">futebol</a>

OBS: Para frames em linhas deve-se usar frameset rows .